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

✨ Move path-editor from selection handlers

Browse source
This commit is contained in:
Andrey Antukh 2025-04-29 12:31:20 +02:00
parent f1a557c372
commit 7cb2f307d8
4 changed files with 87 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.helpers :as cfh]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.types.path :as path] [app.common.types.path :as path]
[app.common.types.path.helpers :as path.helpers] [app.common.types.path.helpers :as path.helpers]
@ -289,8 +290,14 @@
:as edit-path} :as edit-path}
(mf/deref edit-path-ref) (mf/deref edit-path-ref)
selected-points (or selected-points #{}) selected-points
shape (hooks/use-equal-memo shape) (or selected-points #{})
shape
(mf/with-memo [shape]
(cond-> shape
(not (cfh/path-shape? shape))
(path/convert-to-path)))
base-content base-content
(get shape :content) (get shape :content)

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

@ -24,6 +24,7 @@
[app.main.ui.measurements :as msr] [app.main.ui.measurements :as msr]
[app.main.ui.shapes.export :as use] [app.main.ui.shapes.export :as use]
[app.main.ui.workspace.shapes :as shapes] [app.main.ui.workspace.shapes :as shapes]
[app.main.ui.workspace.shapes.path.editor :refer [path-editor*]]
[app.main.ui.workspace.shapes.text.editor :as editor-v1] [app.main.ui.workspace.shapes.text.editor :as editor-v1]
[app.main.ui.workspace.shapes.text.text-edition-outline :refer [text-edition-outline]] [app.main.ui.workspace.shapes.text.text-edition-outline :refer [text-edition-outline]]
[app.main.ui.workspace.shapes.text.v2-editor :as editor-v2] [app.main.ui.workspace.shapes.text.v2-editor :as editor-v2]
@ -116,7 +117,9 @@
objects-modified (mf/with-memo [base-objects text-modifiers modifiers] objects-modified (mf/with-memo [base-objects text-modifiers modifiers]
(apply-modifiers-to-selected selected base-objects text-modifiers modifiers)) (apply-modifiers-to-selected selected base-objects text-modifiers modifiers))
selected-shapes (keep (d/getf objects-modified) selected) selected-shapes (->> selected
(into [] (keep (d/getf objects-modified)))
(not-empty))
;; STATE ;; STATE
alt? (mf/use-state false) alt? (mf/use-state false)
@ -436,12 +439,13 @@
:zoom zoom :zoom zoom
:modifiers modifiers}]) :modifiers modifiers}])
(when show-selection-handlers? (when (and show-selection-handlers?
[:& selection/selection-area selected-shapes)
[:> selection/area*
{:shapes selected-shapes {:shapes selected-shapes
:zoom zoom :zoom zoom
:edition edition :edition edition
:disable-handlers (or drawing-tool edition @space? @mod?) :disabled (or drawing-tool edition @space? @mod?)
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-menu-selected}]) :on-context-menu on-menu-selected}])
@ -611,12 +615,16 @@
(when show-selection-handlers? (when show-selection-handlers?
[:g.selection-handlers {:clipPath "url(#clip-handlers)"} [:g.selection-handlers {:clipPath "url(#clip-handlers)"}
[:& selection/selection-handlers (when-not text-editing?
{:selected selected (if editing-shape
:shapes selected-shapes [:> path-editor* {:shape editing-shape
:zoom zoom :zoom zoom}]
:edition edition (when selected-shapes
:disable-handlers (or drawing-tool edition @space?)}] [:> selection/handlers*
{:selected selected
:shapes selected-shapes
:zoom zoom
:disabled (or drawing-tool @space?)}])))
(when show-prototypes? (when show-prototypes?
[:& interactions/interactions [:& interactions/interactions

108
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View file

@ -20,7 +20,6 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.css-cursors :as cur] [app.main.ui.css-cursors :as cur]
[app.main.ui.workspace.shapes.path.editor :refer [path-editor*]]
[app.util.array :as array] [app.util.array :as array]
[app.util.debug :as dbg] [app.util.debug :as dbg]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -314,9 +313,8 @@
:style {:fill (if (dbg/enabled? :handlers) "yellow" "none") :style {:fill (if (dbg/enabled? :handlers) "yellow" "none")
:stroke-width 0}}]])) :stroke-width 0}}]]))
(mf/defc controls-selection (mf/defc controls-selection*
{::mf/wrap-props false} [{:keys [shape zoom color on-move-selected on-context-menu disabled]}]
[{:keys [shape zoom color on-move-selected on-context-menu disable-handlers]}]
(let [selrect (dm/get-prop shape :selrect) (let [selrect (dm/get-prop shape :selrect)
transform-type (mf/deref refs/current-transform) transform-type (mf/deref refs/current-transform)
sr-transform (mf/deref refs/workspace-selrect-transform) sr-transform (mf/deref refs/workspace-selrect-transform)
@ -330,7 +328,7 @@
(when (and (some? selrect) (when (and (some? selrect)
(not (or (= transform-type :move) (not (or (= transform-type :move)
(= transform-type :rotate)))) (= transform-type :rotate))))
[:g.controls {:pointer-events (if ^boolean disable-handlers "none" "visible")} [:g.controls {:pointer-events (if ^boolean disabled "none" "visible")}
;; Selection rect ;; Selection rect
[:& selection-rect {:rect selrect [:& selection-rect {:rect selrect
:transform transform :transform transform
@ -339,9 +337,9 @@
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-context-menu}]]))) :on-context-menu on-context-menu}]])))
(mf/defc controls-handlers (mf/defc controls-handlers*
{::mf/wrap-props false} {::mf/private true}
[{:keys [shape zoom color on-resize on-rotate disable-handlers]}] [{:keys [shape zoom color on-resize on-rotate disabled]}]
(let [transform-type (mf/deref refs/current-transform) (let [transform-type (mf/deref refs/current-transform)
sr-transform (mf/deref refs/workspace-selrect-transform) sr-transform (mf/deref refs/workspace-selrect-transform)
@ -370,7 +368,7 @@
(not (or (= transform-type :move) (not (or (= transform-type :move)
(= transform-type :rotate)))) (= transform-type :rotate))))
[:g.controls {:pointer-events (if ^boolean disable-handlers "none" "visible")} [:g.controls {:pointer-events (if ^boolean disabled "none" "visible")}
(for [handler (calculate-handlers selrect shape zoom)] (for [handler (calculate-handlers selrect shape zoom)]
(let [type (obj/get handler "type") (let [type (obj/get handler "type")
position (obj/get handler "position") position (obj/get handler "position")
@ -425,9 +423,9 @@
:stroke-opacity 1 :stroke-opacity 1
:fill "none"}}]])) :fill "none"}}]]))
(mf/defc multiple-handlers (mf/defc multiple-handlers*
{::mf/wrap-props false} {::mf/private true}
[{:keys [shapes selected zoom color disable-handlers]}] [{:keys [shapes selected zoom color disabled]}]
(let [shape (mf/with-memo [shapes] (let [shape (mf/with-memo [shapes]
(-> shapes (-> shapes
(gsh/shapes->rect) (gsh/shapes->rect)
@ -452,34 +450,34 @@
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/start-rotate shapes)))))] (st/emit! (dw/start-rotate shapes)))))]
[:& controls-handlers [:> controls-handlers*
{:shape shape {:shape shape
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers :disabled disabled
:on-resize on-resize :on-resize on-resize
:on-rotate on-rotate}])) :on-rotate on-rotate}]))
(mf/defc multiple-selection (mf/defc multiple-selection*
{::mf/wrap-props false} {::mf/private true}
[{:keys [shapes zoom color disable-handlers on-move-selected on-context-menu]}] [{:keys [shapes zoom color disabled on-move-selected on-context-menu]}]
(let [shape (mf/with-memo [shapes] (let [shape (mf/with-memo [shapes]
(-> shapes (-> shapes
(gsh/shapes->rect) (gsh/shapes->rect)
(assoc :type :multiple) (assoc :type :multiple)
(cts/setup-shape)))] (cts/setup-shape)))]
[:& controls-selection [:> controls-selection*
{:shape shape {:shape shape
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers :disabled disabled
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-context-menu}])) :on-context-menu on-context-menu}]))
(mf/defc single-handlers (mf/defc single-handlers*
{::mf/wrap-props false} {::mf/private true}
[{:keys [shape zoom color disable-handlers]}] [{:keys [shape zoom color disabled]}]
(let [shape-id (dm/get-prop shape :id) (let [shape-id (dm/get-prop shape :id)
on-resize on-resize
@ -501,28 +499,27 @@
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/start-rotate [shape])))))] (st/emit! (dw/start-rotate [shape])))))]
[:& controls-handlers [:> controls-handlers*
{:shape shape {:shape shape
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers :disabled disabled
:on-rotate on-rotate :on-rotate on-rotate
:on-resize on-resize}])) :on-resize on-resize}]))
(mf/defc single-selection (mf/defc single-selection*
{::mf/wrap-props false} {::mf/private true}
[{:keys [shape zoom color disable-handlers on-move-selected on-context-menu]}] [{:keys [shape zoom color disabled on-move-selected on-context-menu]}]
[:& controls-selection [:> controls-selection*
{:shape shape {:shape shape
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers :disabled disabled
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-context-menu}]) :on-context-menu on-context-menu}])
(mf/defc selection-area (mf/defc area*
{::mf/wrap-props false} [{:keys [shapes edition zoom disabled on-move-selected on-context-menu]}]
[{:keys [shapes edition zoom disable-handlers on-move-selected on-context-menu]}]
(let [total (count shapes) (let [total (count shapes)
shape (first shapes) shape (first shapes)
@ -538,15 +535,12 @@
selection-rect-color-normal)] selection-rect-color-normal)]
(cond (cond
(zero? total)
nil
(> total 1) (> total 1)
[:& multiple-selection [:> multiple-selection*
{:shapes shapes {:shapes shapes
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers :disabled disabled
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-context-menu}] :on-context-menu on-context-menu}]
@ -561,56 +555,38 @@
nil nil
:else :else
[:& single-selection [:> single-selection*
{:shape shape {:shape shape
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers :disabled disabled
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-context-menu}]))) :on-context-menu on-context-menu}])))
(mf/defc selection-handlers (mf/defc handlers*
{::mf/wrap-props false} [{:keys [shapes selected zoom disabled]}]
[{:keys [shapes selected edition zoom disable-handlers]}]
(let [total (count shapes) (let [total (count shapes)
shape (first shapes) shape (first shapes)
shape-id (dm/get-prop shape :id)
;; Note that we don't use mf/deref to avoid a repaint dependency here ;; Note that we don't use mf/deref to avoid a repaint dependency here
objects (deref refs/workspace-page-objects) objects (deref refs/workspace-page-objects)
color (if (and (= total 1) ^boolean color (if (and (= total 1)
^boolean
(or (ctn/in-any-component? objects shape) (or (ctn/in-any-component? objects shape)
(ctk/is-variant-container? shape))) (ctk/is-variant-container? shape)))
selection-rect-color-component selection-rect-color-component
selection-rect-color-normal)] selection-rect-color-normal)]
(cond (if (> total 1)
(zero? total) [:> multiple-handlers*
nil
(> total 1)
[:& multiple-handlers
{:shapes shapes {:shapes shapes
:selected selected :selected selected
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers}] :disabled disabled}]
[:> single-handlers*
(and (cfh/text-shape? shape)
(= edition shape-id))
nil
(and (= edition shape-id)
(cfh/path-shape? shape))
[:> path-editor*
{:zoom zoom
:shape shape}]
:else
[:& single-handlers
{:shape shape {:shape shape
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers}]))) :disabled disabled}])))

29
frontend/src/app/main/ui/workspace/viewport_wasm.cljs
View file

@ -23,6 +23,7 @@
[app.main.ui.flex-controls :as mfc] [app.main.ui.flex-controls :as mfc]
[app.main.ui.hooks :as ui-hooks] [app.main.ui.hooks :as ui-hooks]
[app.main.ui.measurements :as msr] [app.main.ui.measurements :as msr]
[app.main.ui.workspace.shapes.path.editor :refer [path-editor*]]
[app.main.ui.workspace.shapes.text.editor :as editor-v1] [app.main.ui.workspace.shapes.text.editor :as editor-v1]
[app.main.ui.workspace.shapes.text.text-edition-outline :refer [text-edition-outline]] [app.main.ui.workspace.shapes.text.text-edition-outline :refer [text-edition-outline]]
[app.main.ui.workspace.shapes.text.v2-editor :as editor-v2] [app.main.ui.workspace.shapes.text.v2-editor :as editor-v2]
@ -119,8 +120,9 @@
(binding [cts/*wasm-sync* false] (binding [cts/*wasm-sync* false]
(apply-modifiers-to-selected selected base-objects text-modifiers modifiers))) (apply-modifiers-to-selected selected base-objects text-modifiers modifiers)))
selected-shapes (keep (d/getf objects-modified) selected) selected-shapes (->> selected
(into [] (keep (d/getf objects-modified)))
(not-empty))
;; STATE ;; STATE
alt? (mf/use-state false) alt? (mf/use-state false)
shift? (mf/use-state false) shift? (mf/use-state false)
@ -443,12 +445,13 @@
:zoom zoom :zoom zoom
:modifiers modifiers}]) :modifiers modifiers}])
(when show-selection-handlers? (when (and show-selection-handlers?
[:& selection/selection-area selected-shapes)
[:> selection/area*
{:shapes selected-shapes {:shapes selected-shapes
:zoom zoom :zoom zoom
:edition edition :edition edition
:disable-handlers (or drawing-tool edition @space? @mod?) :disabled (or drawing-tool edition @space? @mod?)
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-menu-selected}]) :on-context-menu on-menu-selected}])
@ -618,12 +621,16 @@
(when show-selection-handlers? (when show-selection-handlers?
[:g.selection-handlers {:clipPath "url(#clip-handlers)"} [:g.selection-handlers {:clipPath "url(#clip-handlers)"}
[:& selection/selection-handlers (when-not text-editing?
{:selected selected (if editing-shape
:shapes selected-shapes [:> path-editor* {:shape editing-shape
:zoom zoom :zoom zoom}]
:edition edition (when selected-shapes
:disable-handlers (or drawing-tool edition @space?)}] [:> selection/handlers*
{:selected selected
:shapes selected-shapes
:zoom zoom
:disabled (or drawing-tool @space?)}])))
(when show-prototypes? (when show-prototypes?
[:& interactions/interactions [:& interactions/interactions