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

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

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