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

Update selection to take care of handlers, lines and zoom

Browse source
This commit is contained in:
Jesús Espino 2016-12-19 18:22:11 +01:00
parent 60a596c585
commit e88495f1a5
1 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/uxbox/main/ui/shapes/selection.cljs
View file

@ -76,19 +76,19 @@
:stroke-opacity "1"}}]])) :stroke-opacity "1"}}]]))
(mx/defc single-not-editable-selection-handlers (mx/defc single-not-editable-selection-handlers
[{:keys [id] :as shape}] [{:keys [id] :as shape} zoom]
(let [{:keys [width height x y]} (geom/outer-rect shape)] (let [{:keys [width height x y]} (geom/outer-rect shape)]
[:g.controls [:g.controls
[:rect.main {:x x :y y [:rect.main {:x x :y y
:width width :width width
:height height :height height
:stroke-dasharray "5,5" :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5.0 zoom))
:style {:stroke "#333" :style {:stroke "#333"
:fill "transparent" :fill "transparent"
:stroke-opacity "1"}}]])) :stroke-opacity "1"}}]]))
(mx/defc single-selection-handlers (mx/defc single-selection-handlers
[{:keys [id] :as shape}] [{:keys [id] :as shape} zoom]
(letfn [(on-mouse-down [vid event] (letfn [(on-mouse-down [vid event]
(dom/stop-propagation event) (dom/stop-propagation event)
(start-resize vid id))] (start-resize vid id))]
@ -97,48 +97,56 @@
[:rect.main {:x x :y y [:rect.main {:x x :y y
:width width :width width
:height height :height height
:stroke-dasharray "5,5" :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5.0 zoom))
:style {:stroke "#333" :style {:stroke "#333"
:fill "transparent" :fill "transparent"
:stroke-opacity "1"}}] :stroke-opacity "1"}}]
[:circle.top [:circle.top
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :top %) {:on-mouse-down #(on-mouse-down :top %)
:r (/ 6.0 zoom)
:cx (+ x (/ width 2)) :cx (+ x (/ width 2))
:cy (- y 2)})] :cy (- y 2)})]
[:circle.right [:circle.right
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :right %) {:on-mouse-down #(on-mouse-down :right %)
:r (/ 6.0 zoom)
:cy (+ y (/ height 2)) :cy (+ y (/ height 2))
:cx (+ x width 1)})] :cx (+ x width 1)})]
[:circle.bottom [:circle.bottom
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :bottom %) {:on-mouse-down #(on-mouse-down :bottom %)
:r (/ 6.0 zoom)
:cx (+ x (/ width 2)) :cx (+ x (/ width 2))
:cy (+ y height 2)})] :cy (+ y height 2)})]
[:circle.left [:circle.left
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :left %) {:on-mouse-down #(on-mouse-down :left %)
:r (/ 6.0 zoom)
:cy (+ y (/ height 2)) :cy (+ y (/ height 2))
:cx (- x 3)})] :cx (- x 3)})]
[:circle.top-left [:circle.top-left
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :top-left %) {:on-mouse-down #(on-mouse-down :top-left %)
:r (/ 6.0 zoom)
:cx x :cx x
:cy y})] :cy y})]
[:circle.top-right [:circle.top-right
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :top-right %) {:on-mouse-down #(on-mouse-down :top-right %)
:r (/ 6.0 zoom)
:cx (+ x width) :cx (+ x width)
:cy y})] :cy y})]
[:circle.bottom-left [:circle.bottom-left
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :bottom-left %) {:on-mouse-down #(on-mouse-down :bottom-left %)
:r (/ 6.0 zoom)
:cx x :cx x
:cy (+ y height)})] :cy (+ y height)})]
[:circle.bottom-right [:circle.bottom-right
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :bottom-right %) {:on-mouse-down #(on-mouse-down :bottom-right %)
:r (/ 6.0 zoom)
:cx (+ x width) :cx (+ x width)
:cy (+ y height)})]]))) :cy (+ y height)})]])))
@ -159,14 +167,15 @@
(rx/subscribe stream on-move nil on-end)))) (rx/subscribe stream on-move nil on-end))))
(mx/defc path-edition-selection-handlers (mx/defc path-edition-selection-handlers
[{:keys [id points] :as shape}] [{:keys [id points] :as shape} zoom]
(letfn [(on-mouse-down [index event] (letfn [(on-mouse-down [index event]
(dom/stop-propagation event) (dom/stop-propagation event)
(rlocks/acquire! :shape/resize) (rlocks/acquire! :shape/resize)
(start-path-edition id index))] (start-path-edition id index))]
[:g.controls [:g.controls
(for [[index {:keys [x y]}] (map-indexed vector points)] (for [[index {:keys [x y]}] (map-indexed vector points)]
[:circle {:cx x :cy y :r 6 [:circle {:cx x :cy y
:r (/ 6.0 zoom)
:on-mouse-down (partial on-mouse-down index) :on-mouse-down (partial on-mouse-down index)
:fill "#31e6e0" :fill "#31e6e0"
:stroke "#28c4d4" :stroke "#28c4d4"
@ -177,6 +186,7 @@
[] []
(let [shapes (mx/react selected-shapes-ref) (let [shapes (mx/react selected-shapes-ref)
edition (mx/react scommon/edition-ref) edition (mx/react scommon/edition-ref)
zoom (mx/react wb/zoom-ref)
shapes-num (count shapes) shapes-num (count shapes)
shape (first shapes)] shape (first shapes)]
(cond (cond
@ -184,22 +194,22 @@
nil nil
(> shapes-num 1) (> shapes-num 1)
(multiple-selection-handlers shapes) (multiple-selection-handlers shapes zoom)
:else :else
(cond (cond
(= :path (:type shape)) (= :path (:type shape))
(if (= @edition-ref (:id shape)) (if (= @edition-ref (:id shape))
(path-edition-selection-handlers shape) (path-edition-selection-handlers shape zoom)
(single-not-editable-selection-handlers shape)) (single-not-editable-selection-handlers shape zoom))
(= :text (:type shape)) (= :text (:type shape))
(if (= @edition-ref (:id shape)) (if (= @edition-ref (:id shape))
(single-not-editable-selection-handlers shape) (single-not-editable-selection-handlers shape zoom)
(single-selection-handlers (first shapes))) (single-selection-handlers (first shapes) zoom))
(= :group (:type shape)) (= :group (:type shape))
(single-not-editable-selection-handlers shape) (single-not-editable-selection-handlers shape zoom)
:else :else
(single-selection-handlers (first shapes)))))) (single-selection-handlers (first shapes) zoom)))))