Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-11 09:38:56 -05:00
Code Issues Activity

Add the ability to select shapes.

Browse source
This commit is contained in:
Andrey Antukh 2015-12-28 20:40:02 +02:00
parent a211c6323e
commit c9dc332ae2
1 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
frontend/uxbox/ui/workspace/canvas.cljs
View file

@ -8,6 +8,7 @@
[uxbox.shapes :as shapes] [uxbox.shapes :as shapes]
[uxbox.library.icons :as _icons] [uxbox.library.icons :as _icons]
[uxbox.data.projects :as dp] [uxbox.data.projects :as dp]
[uxbox.data.workspace :as dw]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.dom :as dom] [uxbox.ui.dom :as dom]
[uxbox.ui.util :as util] [uxbox.ui.util :as util]
@ -49,25 +50,21 @@
:stroke "gray"}) :stroke "gray"})
(defn- shape-render (defn- shape-render
[own {:keys [x y] :as shape}] [own {:keys [id x y width height] :as shape}]
(let [local (:rum/local own)] (let [local (:rum/local own)
selected (rum/react wb/selected-state)]
(html (html
[:g { [:g {
:on-mouse-down :on-mouse-down
(fn [event] (fn [event]
(println "mouse-down") (swap! local assoc :init-coords [x y])
(rx/push! wb/selected-shape-b shape)) (rx/push! wb/selected-shape-b shape))
;; :on-mouse-move :on-click
;; (fn [event] (fn [ev]
;; (when (:drop @local) (when (= (:init-coords @local) [x y])
;; (println "mouse-move" @wb/mouse-position2) (rs/emit! (dw/select-shape id))
;; (let [target (.-currentTarget event) (println "click")))
;; [nx ny] @wb/mouse-position2
;; svg (aget (.-childNodes target) 0)]
;; (.setAttribute svg "x" nx)
;; (.setAttribute svg "y" ny)))
;; false)
:on-mouse-up :on-mouse-up
(fn [event] (fn [event]
@ -75,7 +72,21 @@
(rx/push! wb/selected-shape-b :nothing) (rx/push! wb/selected-shape-b :nothing)
(dom/stop-propagation event)) (dom/stop-propagation event))
} }
(shapes/render shape)]))) (shapes/render shape)
(if (contains? selected id)
[:g {:class "controls"}
[:rect {:x x :y y :width width :height height
:style {:stroke "black" :fill "transparent"
:stroke-opacity "0.5"}}]
[:circle (merge default-selection-props
{:cx x :cy y})]
[:circle (merge default-selection-props
{:cx (+ x width) :cy y})]
[:circle (merge default-selection-props
{:cx x :cy (+ y height)})]
[:circle (merge default-selection-props
{:cx (+ x width) :cy (+ y height)})]])])))
;; (defn- shape-render ;; (defn- shape-render
;; [own shape] ;; [own shape]
@ -104,7 +115,7 @@
(util/component (util/component
{:render shape-render {:render shape-render
:name "shape" :name "shape"
:mixins [mx/static (mx/local {})]})) :mixins [mx/static rum/reactive (mx/local {})]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Canvas ;; Canvas