Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-06 06:18:32 -05:00
Code Issues Activity

Improved grouped selection.

Browse source
This commit is contained in:
Andrey Antukh 2015-12-31 19:05:06 +02:00
parent 0b8cc5f964
commit fb833f34c8
1 changed files with 86 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -49,69 +49,46 @@
:fill "lavender" :fill "lavender"
:stroke "gray"}) :stroke "gray"})
(defn- shape-render (defn shape-render
[own {:keys [id x y width height] :as shape}] [own {:keys [id x y width height] :as shape}]
(let [local (:rum/local own) (let [selected (rum/react wb/selected-state)
selected (rum/react wb/selected-state)] selected? (contains? selected id)]
(html (letfn [(on-mouse-down [event]
[:g { (let [local (:rum/local own)]
:on-mouse-down (dom/stop-propagation event)
(fn [event] (swap! local assoc :init-coords [x y])
(dom/stop-propagation event) (reset! wb/shapes-dragging? true))
(swap! local assoc :init-coords [x y]) (cond
(reset! wb/shapes-dragging? true)) (and (not selected?)
(empty? selected))
:on-click
(fn [event]
(when (= (:init-coords @local) [x y])
(if (.-ctrlKey event)
(rs/emit! (dw/select-shape id)) (rs/emit! (dw/select-shape id))
(rs/emit! (dw/deselect-all)
(dw/select-shape id)))))
:on-mouse-up (and (not selected?)
(fn [event] (not (empty? selected)))
(dom/stop-propagation event) (if (.-ctrlKey event)
(reset! wb/shapes-dragging? false)) (rs/emit! (dw/select-shape id))
} (rs/emit! (dw/deselect-all)
(shapes/render shape) (dw/select-shape id)))))
(if (contains? selected id) (on-mouse-up [event]
[:g {:class "controls"} (dom/stop-propagation event)
[:rect {:x x :y y :width width :height height (reset! wb/shapes-dragging? false))]
:style {:stroke "black" :fill "transparent" (html
[:g {:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}
(shapes/render shape)
(if selected?
[:g {:class "controls"}
[:rect {:x x :y y :width width :height height
:style {:stroke "black" :fill "transparent"
:stroke-opacity "0.5"}}] :stroke-opacity "0.5"}}]
[:circle (merge default-selection-props [:circle (merge default-selection-props
{:cx x :cy y})] {:cx x :cy y})]
[:circle (merge default-selection-props [:circle (merge default-selection-props
{:cx (+ x width) :cy y})] {:cx (+ x width) :cy y})]
[:circle (merge default-selection-props [:circle (merge default-selection-props
{:cx x :cy (+ y height)})] {:cx x :cy (+ y height)})]
[:circle (merge default-selection-props [:circle (merge default-selection-props
{:cx (+ x width) :cy (+ y height)})]])]))) {:cx (+ x width) :cy (+ y height)})]])]))))
;; (defn- shape-render
;; [own shape]
;; (let [local (:rum/local own)
;; x 30
;; y 30
;; width 100
;; height 100]
;; (html
;; [:g
;; (shapes/render shape {:x x :y y :width width :height height})
;; [: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)})]]])))
(def shape (def shape
(util/component (util/component
@ -119,6 +96,48 @@
:name "shape" :name "shape"
:mixins [mx/static rum/reactive (mx/local {})]})) :mixins [mx/static rum/reactive (mx/local {})]}))
(defn- selected-shapes-render
[own shapes]
(let [selected (rum/react wb/selected-state)
local (:rum/local own)
x (apply min (map :x shapes))
y (apply min (map :y shapes))
x' (apply max (map (fn [{:keys [x width]}] (+ x width)) shapes))
y' (apply max (map (fn [{:keys [y height]}] (+ y height)) shapes))
width (- x' x)
height (- y' y)]
(letfn [(on-mouse-down [event]
(dom/stop-propagation event)
(swap! local assoc :init-coords [x y])
(reset! wb/shapes-dragging? true))
(on-mouse-up [event]
(dom/stop-propagation event)
(reset! wb/shapes-dragging? false))]
(html
[:g.selected
{:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}
(for [item shapes]
(shapes/render item))
[: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)})]]]))))
(def selected-shapes
(util/component
{:render selected-shapes-render
:name "selected-shapes"
:mixins [mx/static rum/reactive (mx/local {})]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Canvas ;; Canvas
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -151,10 +170,14 @@
[:svg.page-layout {} [:svg.page-layout {}
(for [item nonselected] (for [item nonselected]
(rum/with-key (shape item) (str (:id item)))) (rum/with-key (shape item) (str (:id item))))
(if (seq selected)
[:g.selected
(for [item selected] (cond
(rum/with-key (shape item) (str (:id item))))])]])))) (= (count selected) 1)
(shape (first selected))
(> (count selected) 1)
(selected-shapes selected))]]))))
(def canvas (def canvas
(util/component (util/component