Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues Activity

✨ Make interaction paths size independent of zoom

Browse source
This commit is contained in:
Andrés Moya 2020-05-18 15:19:00 +02:00
parent d54b5509bd
commit bbcff7f7c8
1 changed files with 54 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
frontend/src/uxbox/main/ui/workspace/shapes/interactions.cljs
View file

@ -94,8 +94,35 @@
[orig-pos orig-x orig-y dest-pos dest-x dest-y])) [orig-pos orig-x orig-y dest-pos dest-x dest-y]))
(mf/defc interaction-marker
[{:keys [x y arrow-dir zoom] :as props}]
(let [arrow-pdata (case arrow-dir
:right "M -5 0 l 8 0 l -4 -4 m 4 4 l -4 4"
:left "M 5 0 l -8 0 l 4 -4 m -4 4 l 4 4"
[])
inv-zoom (/ 1 zoom)]
[:*
[:circle {:cx 0
:cy 0
:r 8
:stroke "#31EFB8"
:stroke-width 2
:fill "#FFFFFF"
:transform (str
"scale(" inv-zoom ", " inv-zoom ") "
"translate(" (* zoom x) ", " (* zoom y) ")")}]
(when arrow-dir
[:path {:stroke "#31EFB8"
:fill "transparent"
:stroke-width 2
:d arrow-pdata
:transform (str
"scale(" inv-zoom ", " inv-zoom ") "
"translate(" (* zoom x) ", " (* zoom y) ")")}])]))
(mf/defc interaction-path (mf/defc interaction-path
[{:keys [orig-shape dest-shape dest-point selected selected?] :as props}] [{:keys [orig-shape dest-shape dest-point selected selected? zoom] :as props}]
(let [[orig-pos orig-x orig-y dest-pos dest-x dest-y] (let [[orig-pos orig-x orig-y dest-pos dest-x dest-y]
(if dest-shape (if dest-shape
(connect-to-shape orig-shape dest-shape) (connect-to-shape orig-shape dest-shape)
@ -107,67 +134,47 @@
path ["M" orig-x orig-y "C" (+ orig-x orig-dx) orig-y (+ dest-x dest-dx) dest-y dest-x dest-y] path ["M" orig-x orig-y "C" (+ orig-x orig-dx) orig-y (+ dest-x dest-dx) dest-y dest-x dest-y]
pdata (str/join " " path) pdata (str/join " " path)
arrow-path (if (= dest-pos :left) arrow-dir (if (= dest-pos :left) :right :left)]
["M" (- dest-x 5) dest-y "l 8 0 l -4 -4 m 4 4 l -4 4"]
["M" (+ dest-x 5) dest-y "l -8 0 l 4 -4 m -4 4 l 4 4"])
arrow-pdata (str/join " " arrow-path)]
(if-not selected? (if-not selected?
[:path {:stroke "#B1B2B5" [:path {:stroke "#B1B2B5"
:fill "transparent" :fill "transparent"
:stroke-width 2 :stroke-width (/ 2 zoom)
:d pdata :d pdata
:on-mouse-down #(on-mouse-down % orig-shape selected)}] :on-mouse-down #(on-mouse-down % orig-shape selected)}]
[:g {:on-mouse-down #(on-mouse-down % orig-shape selected)} [:g {:on-mouse-down #(on-mouse-down % orig-shape selected)}
[:path {:stroke "#31EFB8" [:path {:stroke "#31EFB8"
:fill "transparent" :fill "transparent"
:stroke-width 2 :stroke-width (/ 2 zoom)
:d pdata}] :d pdata}]
[:circle {:cx orig-x [:& interaction-marker {:x orig-x
:cy orig-y :y orig-y
:r 8 :arrow-dir nil
:stroke "#31EFB8" :zoom zoom}]
:stroke-width 2 [:& interaction-marker {:x dest-x
:fill "#FFFFFF"}] :y dest-y
[:circle {:cx dest-x :arrow-dir arrow-dir
:cy dest-y :zoom zoom}]])))
:r 8
:stroke "#31EFB8"
:stroke-width 2
:fill "#FFFFFF"}]
[:path {:stroke "#31EFB8"
:fill "transparent"
:stroke-width 2
:d arrow-pdata}]])))
(mf/defc interaction-handle (mf/defc interaction-handle
[{:keys [shape selected] :as props}] [{:keys [shape selected zoom] :as props}]
(let [shape-rect (geom/selection-rect-shape shape) (let [shape-rect (geom/selection-rect-shape shape)
handle-x (+ (:x shape-rect) (:width shape-rect)) handle-x (+ (:x shape-rect) (:width shape-rect))
handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2)) handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))]
arrow-path ["M" (- handle-x 5) handle-y "l 8 0 l -4 -4 m 4 4 l -4 4"]
arrow-pdata (str/join " " arrow-path)]
[:g {:on-mouse-down #(on-mouse-down % shape selected)} [:g {:on-mouse-down #(on-mouse-down % shape selected)}
[:circle {:cx handle-x [:& interaction-marker {:x handle-x
:cy handle-y :y handle-y
:r 8 :arrow-dir :right
:stroke "#31EFB8" :zoom zoom}]]))
:stroke-width 2
:fill "#FFFFFF"}]
[:path {:stroke "#31EFB8"
:fill "transparent"
:stroke-width 2
:d arrow-pdata}]]))
(mf/defc interactions (mf/defc interactions
[{:keys [selected] :as props}] [{:keys [selected] :as props}]
(let [data (mf/deref refs/workspace-data) (let [data (mf/deref refs/workspace-data)
local (mf/deref refs/workspace-local) local (mf/deref refs/workspace-local)
zoom (mf/deref refs/selected-zoom)
current-transform (:transform local) current-transform (:transform local)
objects (:objects data) objects (:objects data)
active-shapes (filter #(first (get-click-interaction %)) (vals objects)) active-shapes (filter #(first (get-click-interaction %)) (vals objects))
@ -184,13 +191,15 @@
:orig-shape shape :orig-shape shape
:dest-shape dest-shape :dest-shape dest-shape
:selected selected :selected selected
:selected? false}]))) :selected? false
:zoom zoom}])))
(if (and draw-interaction-to first-selected) (if (and draw-interaction-to first-selected)
[:& interaction-path {:key "interactive" [:& interaction-path {:key "interactive"
:orig-shape first-selected :orig-shape first-selected
:dest-point draw-interaction-to :dest-point draw-interaction-to
:selected? true}] :selected? true
:zoom zoom}]
(for [shape selected-shapes] (for [shape selected-shapes]
(let [interaction (get-click-interaction shape) (let [interaction (get-click-interaction shape)
@ -200,9 +209,11 @@
:orig-shape shape :orig-shape shape
:dest-shape dest-shape :dest-shape dest-shape
:selected selected :selected selected
:selected? true}] :selected? true
:zoom zoom}]
(when (not (#{:move :rotate} current-transform)) (when (not (#{:move :rotate} current-transform))
[:& interaction-handle {:key (:id shape) [:& interaction-handle {:key (:id shape)
:shape shape :shape shape
:selected selected}])))))])) :selected selected
:zoom zoom}])))))]))