3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-23 11:16:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Show tools on path creation. Change snap while drawing

Browse source
This commit is contained in:
alonso.torres 2023-01-19 13:34:13 +01:00
parent 0632111e96
commit 75d6e21af8
7 changed files with 79 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
common/src/app/common/geom/point.cljc
View file

@ -60,7 +60,7 @@
(point v v) (point v v)
(point-like? v) (point-like? v)
(map->Point v) (Point. (:x v) (:y v))
:else :else
(ex/raise :hint "invalid arguments (on pointer constructor)" :value v))) (ex/raise :hint "invalid arguments (on pointer constructor)" :value v)))

39
frontend/src/app/main/data/workspace/path/drawing.cljs
View file

@ -8,7 +8,6 @@
(:require (:require
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes.flex-layout :as gsl] [app.common.geom.shapes.flex-layout :as gsl]
[app.common.geom.shapes.path :as upg]
[app.common.path.commands :as upc] [app.common.path.commands :as upc]
[app.common.path.shapes-to-path :as upsp] [app.common.path.shapes-to-path :as upsp]
[app.common.spec :as us] [app.common.spec :as us]
@ -125,14 +124,11 @@
(ptk/reify ::close-path-drag-start (ptk/reify ::close-path-drag-start
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [id (st/get-path-id state) (let [stop-stream
stop-stream
(->> stream (rx/filter #(or (helpers/end-path-event? %) (->> stream (rx/filter #(or (helpers/end-path-event? %)
(ms/mouse-up? %)))) (ms/mouse-up? %))))
content (st/get-path state :content) content (st/get-path state :content)
snap-toggled (get-in state [:workspace-local :edit-path id :snap-toggled])
points (upg/content->points content)
handlers (-> (upc/content->handlers content) handlers (-> (upc/content->handlers content)
(get position)) (get position))
@ -141,7 +137,7 @@
(first handlers)) (first handlers))
drag-events-stream drag-events-stream
(->> (streams/position-stream snap-toggled points) (->> (streams/position-stream)
(rx/take-until stop-stream) (rx/take-until stop-stream)
(rx/map #(drag-handler position idx prefix %)))] (rx/map #(drag-handler position idx prefix %)))]
@ -164,16 +160,10 @@
(defn start-path-from-point [position] (defn start-path-from-point [position]
(ptk/reify ::start-path-from-point (ptk/reify ::start-path-from-point
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ _ stream]
(let [mouse-up (->> stream (rx/filter #(or (helpers/end-path-event? %) (let [mouse-up (->> stream (rx/filter #(or (helpers/end-path-event? %)
(ms/mouse-up? %)))) (ms/mouse-up? %))))
content (st/get-path state :content) drag-events (->> (streams/position-stream)
points (upg/content->points content)
id (st/get-path-id state)
snap-toggled (get-in state [:workspace-local :edit-path id :snap-toggled])
drag-events (->> (streams/position-stream snap-toggled points)
(rx/take-until mouse-up) (rx/take-until mouse-up)
(rx/map #(drag-handler %)))] (rx/map #(drag-handler %)))]
@ -192,11 +182,11 @@
(rx/merge-map #(rx/empty)))) (rx/merge-map #(rx/empty))))
(defn make-drag-stream (defn make-drag-stream
[stream snap-toggled _zoom points down-event] [stream down-event]
(let [mouse-up (->> stream (rx/filter #(or (helpers/end-path-event? %) (let [mouse-up (->> stream (rx/filter #(or (helpers/end-path-event? %)
(ms/mouse-up? %)))) (ms/mouse-up? %))))
drag-events (->> (streams/position-stream snap-toggled points) drag-events (->> (streams/position-stream)
(rx/take-until mouse-up) (rx/take-until mouse-up)
(rx/map #(drag-handler %)))] (rx/map #(drag-handler %)))]
@ -217,20 +207,13 @@
(assoc-in [:workspace-local :edit-path id :edit-mode] :draw)))) (assoc-in [:workspace-local :edit-path id :edit-mode] :draw))))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ _ stream]
(let [zoom (get-in state [:workspace-local :zoom]) (let [mouse-down (->> stream (rx/filter ms/mouse-down?))
mouse-down (->> stream (rx/filter ms/mouse-down?))
end-path-events (->> stream (rx/filter helpers/end-path-event?)) end-path-events (->> stream (rx/filter helpers/end-path-event?))
content (st/get-path state :content)
points (upg/content->points content)
id (st/get-path-id state)
snap-toggled (get-in state [:workspace-local :edit-path id :snap-toggled])
;; Mouse move preview ;; Mouse move preview
mousemove-events mousemove-events
(->> (streams/position-stream snap-toggled points) (->> (streams/position-stream)
(rx/take-until end-path-events) (rx/take-until end-path-events)
(rx/map #(preview-next-point %))) (rx/map #(preview-next-point %)))
@ -238,12 +221,12 @@
mousedown-events mousedown-events
(->> mouse-down (->> mouse-down
(rx/take-until end-path-events) (rx/take-until end-path-events)
(rx/with-latest merge (streams/position-stream snap-toggled points)) (rx/with-latest merge (streams/position-stream))
;; We change to the stream that emits the first event ;; We change to the stream that emits the first event
(rx/switch-map (rx/switch-map
#(rx/race (make-node-events-stream stream) #(rx/race (make-node-events-stream stream)
(make-drag-stream stream snap-toggled zoom points %))))] (make-drag-stream stream %))))]
(rx/concat (rx/concat
(rx/of (undo/start-path-undo)) (rx/of (undo/start-path-undo))

54
frontend/src/app/main/data/workspace/path/edition.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.data.workspace.path.edition (ns app.main.data.workspace.path.edition
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes.path :as upg] [app.common.geom.shapes.path :as upg]
[app.common.path.commands :as upc] [app.common.path.commands :as upc]
@ -35,8 +36,8 @@
(let [content (st/get-path state :content) (let [content (st/get-path state :content)
modifiers (helpers/move-handler-modifiers content index prefix false match-opposite? dx dy) modifiers (helpers/move-handler-modifiers content index prefix false match-opposite? dx dy)
[cx cy] (if (= prefix :c1) [:c1x :c1y] [:c2x :c2y]) [cx cy] (if (= prefix :c1) [:c1x :c1y] [:c2x :c2y])
point (gpt/point (+ (get-in content [index :params cx]) dx) point (gpt/point (+ (dm/get-in content [index :params cx]) dx)
(+ (get-in content [index :params cy]) dy))] (+ (dm/get-in content [index :params cy]) dy))]
(-> state (-> state
(update-in [:workspace-local :edit-path id :content-modifiers] merge modifiers) (update-in [:workspace-local :edit-path id :content-modifiers] merge modifiers)
@ -51,7 +52,7 @@
id (st/get-path-id state) id (st/get-path-id state)
page-id (:current-page-id state) page-id (:current-page-id state)
shape (st/get-path state) shape (st/get-path state)
content-modifiers (get-in state [:workspace-local :edit-path id :content-modifiers]) content-modifiers (dm/get-in state [:workspace-local :edit-path id :content-modifiers])
content (:content shape) content (:content shape)
new-content (upc/apply-content-modifiers content content-modifiers) new-content (upc/apply-content-modifiers content content-modifiers)
@ -98,7 +99,7 @@
(let [id (st/get-path-id state) (let [id (st/get-path-id state)
content (st/get-path state :content) content (st/get-path state :content)
modifiers-reducer (partial modify-content-point content move-modifier) modifiers-reducer (partial modify-content-point content move-modifier)
content-modifiers (get-in state [:workspace-local :edit-path id :content-modifiers] {}) content-modifiers (dm/get-in state [:workspace-local :edit-path id :content-modifiers] {})
content-modifiers (->> points content-modifiers (->> points
(reduce modifiers-reducer content-modifiers))] (reduce modifiers-reducer content-modifiers))]
@ -115,9 +116,9 @@
modifiers-reducer (partial modify-content-point content delta) modifiers-reducer (partial modify-content-point content delta)
points (get-in state [:workspace-local :edit-path id :selected-points] #{}) points (dm/get-in state [:workspace-local :edit-path id :selected-points] #{})
modifiers (get-in state [:workspace-local :edit-path id :content-modifiers] {}) modifiers (dm/get-in state [:workspace-local :edit-path id :content-modifiers] {})
modifiers (->> points modifiers (->> points
(reduce modifiers-reducer modifiers))] (reduce modifiers-reducer modifiers))]
@ -132,8 +133,8 @@
(ptk/reify ::start-move-path-point (ptk/reify ::start-move-path-point
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [id (get-in state [:workspace-local :edition]) (let [id (dm/get-in state [:workspace-local :edition])
selected-points (get-in state [:workspace-local :edit-path id :selected-points] #{}) selected-points (dm/get-in state [:workspace-local :edit-path id :selected-points] #{})
selected? (contains? selected-points position)] selected? (contains? selected-points position)]
(streams/drag-stream (streams/drag-stream
(rx/of (rx/of
@ -148,10 +149,9 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [stopper (->> stream (rx/filter ms/mouse-up?)) (let [stopper (->> stream (rx/filter ms/mouse-up?))
id (get-in state [:workspace-local :edition]) id (dm/get-in state [:workspace-local :edition])
snap-toggled (get-in state [:workspace-local :edit-path id :snap-toggled])
selected-points (get-in state [:workspace-local :edit-path id :selected-points] #{}) selected-points (dm/get-in state [:workspace-local :edit-path id :selected-points] #{})
content (st/get-path state :content) content (st/get-path state :content)
points (upg/content->points content)] points (upg/content->points content)]
@ -159,7 +159,7 @@
(rx/concat (rx/concat
;; This stream checks the consecutive mouse positions to do the dragging ;; This stream checks the consecutive mouse positions to do the dragging
(->> points (->> points
(streams/move-points-stream snap-toggled start-position selected-points) (streams/move-points-stream start-position selected-points)
(rx/map #(move-selected-path-point start-position %)) (rx/map #(move-selected-path-point start-position %))
(rx/take-until stopper)) (rx/take-until stopper))
(rx/of (apply-content-modifiers))))))) (rx/of (apply-content-modifiers)))))))
@ -178,7 +178,7 @@
(ptk/reify ::finish-move-selected (ptk/reify ::finish-move-selected
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(let [id (get-in state [:workspace-local :edition])] (let [id (dm/get-in state [:workspace-local :edition])]
(-> state (-> state
(update-in [:workspace-local :edit-path id] dissoc :current-move)))))) (update-in [:workspace-local :edit-path id] dissoc :current-move))))))
@ -192,8 +192,8 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(let [id (get-in state [:workspace-local :edition]) (let [id (dm/get-in state [:workspace-local :edition])
current-move (get-in state [:workspace-local :edit-path id :current-move])] current-move (dm/get-in state [:workspace-local :edit-path id :current-move])]
(if (nil? current-move) (if (nil? current-move)
(-> state (-> state
(assoc-in [:workspace-local :edit-path id :moving-nodes] true) (assoc-in [:workspace-local :edit-path id :moving-nodes] true)
@ -202,11 +202,11 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [id (get-in state [:workspace-local :edition]) (let [id (dm/get-in state [:workspace-local :edition])
current-move (get-in state [:workspace-local :edit-path id :current-move])] current-move (dm/get-in state [:workspace-local :edit-path id :current-move])]
;; id can be null if we just selected the tool but we didn't start drawing ;; id can be null if we just selected the tool but we didn't start drawing
(if (and id (= same-event current-move)) (if (and id (= same-event current-move))
(let [points (get-in state [:workspace-local :edit-path id :selected-points] #{}) (let [points (dm/get-in state [:workspace-local :edit-path id :selected-points] #{})
move-events (->> stream move-events (->> stream
(rx/filter (ptk/type? ::move-selected)) (rx/filter (ptk/type? ::move-selected))
@ -238,13 +238,13 @@
(ptk/reify ::start-move-handler (ptk/reify ::start-move-handler
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [id (get-in state [:workspace-local :edition]) (let [id (dm/get-in state [:workspace-local :edition])
cx (d/prefix-keyword prefix :x) cx (d/prefix-keyword prefix :x)
cy (d/prefix-keyword prefix :y) cy (d/prefix-keyword prefix :y)
start-point @ms/mouse-position start-point @ms/mouse-position
modifiers (get-in state [:workspace-local :edit-path id :content-modifiers]) modifiers (dm/get-in state [:workspace-local :edit-path id :content-modifiers])
start-delta-x (get-in modifiers [index cx] 0) start-delta-x (dm/get-in modifiers [index cx] 0)
start-delta-y (get-in modifiers [index cy] 0) start-delta-y (dm/get-in modifiers [index cy] 0)
content (st/get-path state :content) content (st/get-path state :content)
points (upg/content->points content) points (upg/content->points content)
@ -253,14 +253,12 @@
handler (-> content (get index) (upc/get-handler prefix)) handler (-> content (get index) (upc/get-handler prefix))
[op-idx op-prefix] (upc/opposite-index content index prefix) [op-idx op-prefix] (upc/opposite-index content index prefix)
opposite (upc/handler->point content op-idx op-prefix) opposite (upc/handler->point content op-idx op-prefix)]
snap-toggled (get-in state [:workspace-local :edit-path id :snap-toggled])]
(streams/drag-stream (streams/drag-stream
(rx/concat (rx/concat
(rx/of (dch/update-shapes [id] upsp/convert-to-path)) (rx/of (dch/update-shapes [id] upsp/convert-to-path))
(->> (streams/move-handler-stream snap-toggled start-point point handler opposite points) (->> (streams/move-handler-stream start-point point handler opposite points)
(rx/take-until (->> stream (rx/filter #(or (ms/mouse-up? %) (rx/take-until (->> stream (rx/filter #(or (ms/mouse-up? %)
(streams/finish-edition? %))))) (streams/finish-edition? %)))))
(rx/map (rx/map
@ -283,7 +281,7 @@
(ptk/reify ::start-path-edit (ptk/reify ::start-path-edit
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(let [edit-path (get-in state [:workspace-local :edit-path id]) (let [edit-path (dm/get-in state [:workspace-local :edit-path id])
content (st/get-path state :content) content (st/get-path state :content)
state (st/set-content state (ups/close-subpaths content))] state (st/set-content state (ups/close-subpaths content))]
(cond-> state (cond-> state
@ -297,7 +295,7 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [mode (get-in state [:workspace-local :edit-path id :edit-mode]) (let [mode (dm/get-in state [:workspace-local :edit-path id :edit-mode])
stopper (->> stream stopper (->> stream
(rx/filter #(or (rx/filter #(or
(= (ptk/type %) ::dwe/clear-edition-mode) (= (ptk/type %) ::dwe/clear-edition-mode)

28
frontend/src/app/main/data/workspace/path/streams.cljs
View file

@ -6,10 +6,11 @@
(ns app.main.data.workspace.path.streams (ns app.main.data.workspace.path.streams
(:require (:require
[app.common.data.macros :as dm]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes.path :as upg] [app.common.geom.shapes.path :as upg]
[app.main.constants :refer [zoom-half-pixel-precision]] [app.main.constants :refer [zoom-half-pixel-precision]]
[app.main.data.workspace.path.state :as state] [app.main.data.workspace.path.state :as pst]
[app.main.snap :as snap] [app.main.snap :as snap]
[app.main.store :as st] [app.main.store :as st]
[app.main.streams :as ms] [app.main.streams :as ms]
@ -71,15 +72,23 @@
(->> position-stream (->> position-stream
(rx/merge-map (fn [] to-stream))))))) (rx/merge-map (fn [] to-stream)))))))
(defn snap-toggled-stream
[]
(let [get-snap (fn [state]
(let [id (pst/get-path-id state)]
(dm/get-in state [:workspace-local :edit-path id :snap-toggled])))]
(-> (l/derived get-snap st/state)
(rx/from-atom {:emit-current-value? true}))))
(defn move-points-stream (defn move-points-stream
[snap-toggled start-point selected-points points] [start-point selected-points points]
(let [zoom (get-in @st/state [:workspace-local :zoom] 1) (let [zoom (get-in @st/state [:workspace-local :zoom] 1)
ranges (snap/create-ranges points selected-points) ranges (snap/create-ranges points selected-points)
d-pos (/ snap/snap-path-accuracy zoom) d-pos (/ snap/snap-path-accuracy zoom)
check-path-snap check-path-snap
(fn [position] (fn [[position snap-toggled]]
(if snap-toggled (if snap-toggled
(let [delta (gpt/subtract position start-point) (let [delta (gpt/subtract position start-point)
moved-points (->> selected-points (mapv #(gpt/add % delta))) moved-points (->> selected-points (mapv #(gpt/add % delta)))
@ -88,6 +97,7 @@
position))] position))]
(->> ms/mouse-position (->> ms/mouse-position
(rx/map to-pixel-snap) (rx/map to-pixel-snap)
(rx/with-latest-from (snap-toggled-stream))
(rx/map check-path-snap)))) (rx/map check-path-snap))))
(defn get-angle [node handler opposite] (defn get-angle [node handler opposite]
@ -99,7 +109,7 @@
[rot-angle rot-sign]))) [rot-angle rot-sign])))
(defn move-handler-stream (defn move-handler-stream
[snap-toggled start-point node handler opposite points] [start-point node handler opposite points]
(let [zoom (get-in @st/state [:workspace-local :zoom] 1) (let [zoom (get-in @st/state [:workspace-local :zoom] 1)
ranges (snap/create-ranges points) ranges (snap/create-ranges points)
@ -108,7 +118,7 @@
[initial-angle] (get-angle node handler opposite) [initial-angle] (get-angle node handler opposite)
check-path-snap check-path-snap
(fn [position] (fn [[position snap-toggled]]
(if snap-toggled (if snap-toggled
(let [delta (gpt/subtract position start-point) (let [delta (gpt/subtract position start-point)
handler (gpt/add handler delta) handler (gpt/add handler delta)
@ -134,13 +144,14 @@
(rx/map to-pixel-snap) (rx/map to-pixel-snap)
(rx/with-latest merge (->> ms/mouse-position-shift (rx/map #(hash-map :shift? %)))) (rx/with-latest merge (->> ms/mouse-position-shift (rx/map #(hash-map :shift? %))))
(rx/with-latest merge (->> ms/mouse-position-alt (rx/map #(hash-map :alt? %)))) (rx/with-latest merge (->> ms/mouse-position-alt (rx/map #(hash-map :alt? %))))
(rx/with-latest-from (snap-toggled-stream))
(rx/map check-path-snap)))) (rx/map check-path-snap))))
(defn position-stream (defn position-stream
[snap-toggled _points] []
(let [zoom (get-in @st/state [:workspace-local :zoom] 1) (let [zoom (get-in @st/state [:workspace-local :zoom] 1)
d-pos (/ snap/snap-path-accuracy zoom) d-pos (/ snap/snap-path-accuracy zoom)
get-content #(state/get-path % :content) get-content #(pst/get-path % :content)
content-stream content-stream
(-> (l/derived get-content st/state) (-> (l/derived get-content st/state)
@ -154,7 +165,8 @@
(->> ms/mouse-position (->> ms/mouse-position
(rx/map to-pixel-snap) (rx/map to-pixel-snap)
(rx/with-latest vector ranges-stream) (rx/with-latest vector ranges-stream)
(rx/map (fn [[position ranges]] (rx/with-latest-from (snap-toggled-stream))
(rx/map (fn [[[position ranges] snap-toggled]]
(if snap-toggled (if snap-toggled
(let [snap (snap/get-snap-delta [position] ranges d-pos)] (let [snap (snap/get-snap-delta [position] ranges d-pos)]
(gpt/add position snap)) (gpt/add position snap))

12
frontend/src/app/main/ui/workspace/shapes/path/common.cljs
View file

@ -6,7 +6,10 @@
(ns app.main.ui.workspace.shapes.path.common (ns app.main.ui.workspace.shapes.path.common
(:require (:require
[app.common.data.macros :as dm]
[app.main.data.workspace.path.state :as pst]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st]
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -17,10 +20,11 @@
(def gray-color "var(--color-gray-20)") (def gray-color "var(--color-gray-20)")
(def current-edit-path-ref (def current-edit-path-ref
(let [selfn (fn [local] (l/derived
(let [id (:edition local)] (fn [state]
(get-in local [:edit-path id])))] (let [id (pst/get-path-id state)]
(l/derived selfn refs/workspace-local))) (dm/get-in state [:workspace-local :edit-path id])))
st/state))
(defn make-edit-path-ref [id] (defn make-edit-path-ref [id]
(mf/use-memo (mf/use-memo

11
frontend/src/app/main/ui/workspace/shapes/path/editor.cljs
View file

@ -327,14 +327,15 @@
[:g.path-node {:key (dm/str index "-" (:x position) "-" (:y position))} [:g.path-node {:key (dm/str index "-" (:x position) "-" (:y position))}
[:g.point-handlers {:pointer-events (when (= edit-mode :draw) "none")} [:g.point-handlers {:pointer-events (when (= edit-mode :draw) "none")}
(for [[index prefix] pos-handlers] (for [[hindex prefix] pos-handlers]
(let [handler-position (upc/handler->point content index prefix) (let [handler-position (upc/handler->point content hindex prefix)
handler-hover? (contains? hover-handlers [index prefix]) handler-hover? (contains? hover-handlers [hindex prefix])
moving-handler? (= handler-position moving-handler) moving-handler? (= handler-position moving-handler)
matching-handler? (matching-handler? content position pos-handlers)] matching-handler? (matching-handler? content position pos-handlers)]
[:& path-handler {:point position [:& path-handler {:key (dm/str (dm/str index "-" (:x position) "-" (:y position)) "-" hindex "-" (d/name prefix))
:point position
:handler handler-position :handler handler-position
:index index :index hindex
:prefix prefix :prefix prefix
:zoom zoom :zoom zoom
:hover? handler-hover? :hover? handler-hover?

13
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -50,12 +50,13 @@
(mf/defc viewport-actions (mf/defc viewport-actions
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[] []
(let [edition (mf/deref refs/selected-edition) (let [edition (mf/deref refs/selected-edition)
selected (mf/deref refs/selected-objects) selected (mf/deref refs/selected-objects)
shape (-> selected first)] drawing (mf/deref refs/workspace-drawing)
(when (and (= (count selected) 1) drawing-obj (:object drawing)
(= (:id shape) edition) shape (or drawing-obj (-> selected first))]
(not= :text (:type shape))) (when (or (and (= (count selected) 1) (= (:id shape) edition) (not= :text (:type shape)))
(and (some? drawing-obj) (= :path (:type drawing-obj))))
[:div.viewport-actions [:div.viewport-actions
[:& path-actions {:shape shape}]]))) [:& path-actions {:shape shape}]])))