github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-07 12:40:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Support grid editor with wasm modifiers

Browse Source
This commit is contained in:
alonso.torres 2025-06-17 11:47:39 +02:00
parent 72f2a409f9
commit b2647f30c2
1 changed files with 131 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View File

@ -23,6 +23,7 @@
[app.main.data.workspace.grid-layout.editor :as dwge] [app.main.data.workspace.grid-layout.editor :as dwge]
[app.main.data.workspace.modifiers :as dwm] [app.main.data.workspace.modifiers :as dwm]
[app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.shape-layout :as dwsl]
[app.main.features :as features]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.css-cursors :as cur] [app.main.ui.css-cursors :as cur]
@ -158,11 +159,13 @@
(mf/deps on-drag-end) (mf/deps on-drag-end)
(fn [event] (fn [event]
(let [raw-pt (mf/ref-val current-pos-ref) (let [raw-pt (mf/ref-val current-pos-ref)
position (uwvv/point->viewport raw-pt)] position (uwvv/point->viewport raw-pt)
start (mf/ref-val start-pos-ref)
delta (gpt/to-vec start (dom/get-client-position event))]
(dom/release-pointer event) (dom/release-pointer event)
(mf/set-ref-val! dragging-ref false) (mf/set-ref-val! dragging-ref false)
(mf/set-ref-val! start-pos-ref nil) (mf/set-ref-val! start-pos-ref nil)
(when on-drag-end (on-drag-end event position))))) (when on-drag-end (on-drag-end event position delta)))))
handle-pointer-move handle-pointer-move
(mf/use-fn (mf/use-fn
@ -190,6 +193,9 @@
height (unchecked-get props "height") height (unchecked-get props "height")
handler (unchecked-get props "handler") handler (unchecked-get props "handler")
on-set-modifiers (unchecked-get props "on-set-modifiers")
on-clear-modifiers (unchecked-get props "on-clear-modifiers")
objects (mf/deref refs/workspace-page-objects) objects (mf/deref refs/workspace-page-objects)
{cell-id :id} (unchecked-get props "cell") {cell-id :id} (unchecked-get props "cell")
{:keys [row column row-span column-span]} (get-in shape [:layout-grid-cells cell-id]) {:keys [row column row-span column-span]} (get-in shape [:layout-grid-cells cell-id])
@ -197,10 +203,10 @@
direction (unchecked-get props "direction") direction (unchecked-get props "direction")
layout-data (unchecked-get props "layout-data") layout-data (unchecked-get props "layout-data")
handle-drag-position calculate-drag-modifiers
(mf/use-fn (mf/use-fn
(mf/deps shape row column row-span column-span) (mf/deps shape row column row-span column-span)
(fn [_ position] (fn [position]
(let [[drag-row drag-column] (gsg/get-position-grid-coord layout-data position) (let [[drag-row drag-column] (gsg/get-position-grid-coord layout-data position)
[new-row new-column new-row-span new-column-span] [new-row new-column new-row-span new-column-span]
@ -225,19 +231,34 @@
shape shape
(-> (ctl/resize-cell-area shape row column new-row new-column new-row-span new-column-span) (-> (ctl/resize-cell-area shape row column new-row new-column new-row-span new-column-span)
(ctl/assign-cells objects)) (ctl/assign-cells objects))]
(-> (ctm/empty)
(ctm/change-property :layout-grid-rows (:layout-grid-rows shape))
(ctm/change-property :layout-grid-columns (:layout-grid-columns shape))
(ctm/change-property :layout-grid-cells (:layout-grid-cells shape))))))
modifiers handle-drag-position
(-> (ctm/empty) (mf/use-fn
(ctm/change-property :layout-grid-rows (:layout-grid-rows shape)) (mf/deps calculate-drag-modifiers on-set-modifiers)
(ctm/change-property :layout-grid-columns (:layout-grid-columns shape)) (fn [_ position]
(ctm/change-property :layout-grid-cells (:layout-grid-cells shape)))] (let [modifiers (calculate-drag-modifiers position)
(st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers)))))) modif-tree (dwm/create-modif-tree [(:id shape)] modifiers)]
(if (features/active-feature? @st/state "render-wasm/v1")
(do
(when on-set-modifiers (on-set-modifiers modifiers))
(st/emit! (dwm/set-wasm-modifiers modif-tree)))
(st/emit! (dwm/set-modifiers modif-tree))))))
handle-drag-end handle-drag-end
(mf/use-fn (mf/use-fn
(fn [] (mf/deps calculate-drag-modifiers on-clear-modifiers)
(st/emit! (dwm/apply-modifiers)))) (fn [_ position]
(if (features/active-feature? @st/state "render-wasm/v1")
(let [modifiers (calculate-drag-modifiers position)
modif-tree (dwm/create-modif-tree [(:id shape)] modifiers)]
(when on-clear-modifiers (on-clear-modifiers modifiers))
(st/emit! (dwm/apply-wasm-modifiers modif-tree)))
(st/emit! (dwm/apply-modifiers)))))
{:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]} {:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]}
(use-drag {:on-drag-position handle-drag-position (use-drag {:on-drag-position handle-drag-position
@ -291,9 +312,9 @@
text]])) text]]))
(mf/defc grid-cell (mf/defc grid-cell
{::mf/memo #{:shape :cell :layout-data :zoom :hover? :selected?} {::mf/memo #{:shape :cell :layout-data :zoom :hover? :selected? :on-set-modifiers :on-clear-modifiers}
::mf/props :obj} ::mf/props :obj}
[{:keys [shape cell layout-data zoom hover? selected?]}] [{:keys [shape cell layout-data zoom hover? selected? on-set-modifiers on-clear-modifiers]}]
(let [cell-bounds (gsg/cell-bounds layout-data cell) (let [cell-bounds (gsg/cell-bounds layout-data cell)
cell-origin (gpo/origin cell-bounds) cell-origin (gpo/origin cell-bounds)
cell-width (gpo/width-points cell-bounds) cell-width (gpo/width-points cell-bounds)
@ -408,10 +429,12 @@
:width width :width width
:height height :height height
:direction dir :direction dir
:layout-data layout-data}])]))])) :layout-data layout-data
:on-set-modifiers on-set-modifiers
:on-clear-modifiers on-clear-modifiers}])]))]))
(defn use-resize-track (defn use-resize-track
[type shape index track-before track-after zoom snap-pixel?] [type shape index track-before track-after zoom snap-pixel? on-set-modifiers on-clear-modifiers]
(let [start-size-before (mf/use-var nil) (let [start-size-before (mf/use-var nil)
start-size-after (mf/use-var nil) start-size-after (mf/use-var nil)
@ -433,13 +456,18 @@
modifiers modifiers
(-> (ctm/empty) (-> (ctm/empty)
(ctm/change-property tracks-prop (get shape tracks-prop)))] (ctm/change-property tracks-prop (get shape tracks-prop)))
(st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
handle-drag-position modif-tree
(dwm/create-modif-tree [(:id shape)] modifiers)]
(if (features/active-feature? @st/state "render-wasm/v1")
(st/emit! (dwm/set-wasm-modifiers modif-tree))
(st/emit! (dwm/set-modifiers modif-tree))))))
calculate-modifiers
(mf/use-fn (mf/use-fn
(mf/deps shape track-before track-after) (mf/deps shape track-before track-after)
(fn [_ position] (fn [position]
(let [[tracks-prop axis] (let [[tracks-prop axis]
(if (= :column type) [:layout-grid-columns :x] [:layout-grid-rows :y]) (if (= :column type) [:layout-grid-columns :x] [:layout-grid-rows :y])
@ -454,20 +482,34 @@
(cond-> (some? track-before) (cond-> (some? track-before)
(update-in [tracks-prop (dec index)] merge {:type :fixed :value new-size-before})) (update-in [tracks-prop (dec index)] merge {:type :fixed :value new-size-before}))
(cond-> (some? track-after) (cond-> (some? track-after)
(update-in [tracks-prop index] merge {:type :fixed :value new-size-after}))) (update-in [tracks-prop index] merge {:type :fixed :value new-size-after})))]
(-> (ctm/empty)
(ctm/change-property tracks-prop (get shape tracks-prop))))))
modifiers handle-drag-position
(-> (ctm/empty) (mf/use-fn
(ctm/change-property tracks-prop (get shape tracks-prop)))] (mf/deps calculate-modifiers on-set-modifiers)
(st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers)))))) (fn [_ position]
(let [modifiers (calculate-modifiers position)
modif-tree (dwm/create-modif-tree [(:id shape)] modifiers)]
(if (features/active-feature? @st/state "render-wasm/v1")
(do
(when on-set-modifiers (on-set-modifiers modifiers))
(st/emit! (dwm/set-wasm-modifiers modif-tree)))
(st/emit! (dwm/set-modifiers modif-tree))))))
handle-drag-end handle-drag-end
(mf/use-fn (mf/use-fn
(mf/deps track-before track-after) (mf/deps calculate-modifiers on-clear-modifiers)
(fn [] (fn [_ _ position]
(if (features/active-feature? @st/state "render-wasm/v1")
(let [modifiers (calculate-modifiers position)
modif-tree (dwm/create-modif-tree [(:id shape)] modifiers)]
(when on-clear-modifiers (on-clear-modifiers))
(st/emit! (dwm/apply-wasm-modifiers modif-tree)))
(st/emit! (dwm/apply-modifiers)))
(reset! start-size-before nil) (reset! start-size-before nil)
(reset! start-size-after nil) (reset! start-size-after nil)))]
(st/emit! (dwm/apply-modifiers))))]
(use-drag {:on-drag-start handle-drag-start (use-drag {:on-drag-start handle-drag-start
:on-drag-delta handle-drag-position :on-drag-delta handle-drag-position
@ -485,6 +527,9 @@
track-after (unchecked-get props "track-after") track-after (unchecked-get props "track-after")
snap-pixel? (unchecked-get props "snap-pixel?") snap-pixel? (unchecked-get props "snap-pixel?")
on-set-modifiers (unchecked-get props "on-set-modifiers")
on-clear-modifiers (unchecked-get props "on-clear-modifiers")
{:keys [column-total-size column-total-gap row-total-size row-total-gap] :as layout-data} {:keys [column-total-size column-total-gap row-total-size row-total-gap] :as layout-data}
(unchecked-get props "layout-data") (unchecked-get props "layout-data")
@ -499,7 +544,7 @@
[layout-gap-row layout-gap-col] (ctl/gaps shape) [layout-gap-row layout-gap-col] (ctl/gaps shape)
{:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]} {:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]}
(use-resize-track type shape index track-before track-after zoom snap-pixel?) (use-resize-track type shape index track-before track-after zoom snap-pixel? on-set-modifiers on-clear-modifiers)
[width height] [width height]
(if (= type :column) (if (= type :column)
@ -656,11 +701,14 @@
track-after (unchecked-get props "track-after") track-after (unchecked-get props "track-after")
snap-pixel? (unchecked-get props "snap-pixel?") snap-pixel? (unchecked-get props "snap-pixel?")
on-set-modifiers (unchecked-get props "on-set-modifiers")
on-clear-modifiers (unchecked-get props "on-clear-modifiers")
text-x (:x center) text-x (:x center)
text-y (:y center) text-y (:y center)
{:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]} {:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]}
(use-resize-track type shape index track-before track-after zoom snap-pixel?)] (use-resize-track type shape index track-before track-after zoom snap-pixel? on-set-modifiers on-clear-modifiers)]
[:g {:on-pointer-down handle-pointer-down [:g {:on-pointer-down handle-pointer-down
:on-lost-pointer-capture handle-lost-pointer-capture :on-lost-pointer-capture handle-lost-pointer-capture
@ -699,6 +747,9 @@
on-move-reorder-track (unchecked-get props "on-move-reorder-track") on-move-reorder-track (unchecked-get props "on-move-reorder-track")
on-end-reorder-track (unchecked-get props "on-end-reorder-track") on-end-reorder-track (unchecked-get props "on-end-reorder-track")
on-set-modifiers (unchecked-get props "on-set-modifiers")
on-clear-modifiers (unchecked-get props "on-clear-modifiers")
track-input-ref (mf/use-ref) track-input-ref (mf/use-ref)
[layout-gap-row layout-gap-col] (ctl/gaps shape) [layout-gap-row layout-gap-col] (ctl/gaps shape)
@ -876,7 +927,9 @@
:track-before track-before :track-before track-before
:type type :type type
:value (dm/str (inc index)) :value (dm/str (inc index))
:zoom zoom}]] :zoom zoom
:on-set-modifiers on-set-modifiers
:on-clear-modifiers on-clear-modifiers}]]
[:& resize-track-handler [:& resize-track-handler
{:index index {:index index
@ -888,7 +941,9 @@
:track-after track-data :track-after track-data
:track-before track-before :track-before track-before
:type type :type type
:zoom zoom}]])) :zoom zoom
:on-set-modifiers on-set-modifiers
:on-clear-modifiers on-clear-modifiers}]]))
(mf/defc editor (mf/defc editor
{::mf/memo true {::mf/memo true
@ -900,12 +955,18 @@
zoom (unchecked-get props "zoom") zoom (unchecked-get props "zoom")
view-only (unchecked-get props "view-only") view-only (unchecked-get props "view-only")
st-modif (mf/use-state nil)
shape shape
(mf/use-memo (mf/use-memo
(mf/deps modifiers base-shape) (mf/deps base-shape modifiers @st-modif)
#(gsh/transform-shape #(cond-> base-shape
base-shape (some? modifiers)
(dm/get-in modifiers [(:id base-shape) :modifiers]))) (gsh/transform-shape
(dm/get-in modifiers [(:id base-shape) :modifiers]))
(some? @st-modif)
(gsh/transform-shape @st-modif)))
snap-pixel? (mf/deref refs/snap-pixel?) snap-pixel? (mf/deref refs/snap-pixel?)
@ -1032,7 +1093,17 @@
(mf/set-ref-val! target-tracks* nil) (mf/set-ref-val! target-tracks* nil)
(reset! drop-track-type* nil) (reset! drop-track-type* nil)
(reset! drop-track-target* nil)))] (reset! drop-track-target* nil)))
handle-set-modifiers
(mf/use-fn
(fn [modifier]
(reset! st-modif modifier)))
handle-clear-modifiers
(mf/use-fn
(fn []
(reset! st-modif nil)))]
(mf/with-effect [] (mf/with-effect []
#(st/emit! (dwge/stop-grid-layout-editing (:id shape)))) #(st/emit! (dwge/stop-grid-layout-editing (:id shape))))
@ -1048,7 +1119,9 @@
:cell cell :cell cell
:zoom zoom :zoom zoom
:hover? (contains? hover-cells (:id cell)) :hover? (contains? hover-cells (:id cell))
:selected? (contains? selected-cells (:id cell))}])] :selected? (contains? selected-cells (:id cell))
:on-set-modifiers handle-set-modifiers
:on-clear-modifiers handle-clear-modifiers}])]
(when-not ^boolean view-only (when-not ^boolean view-only
[:* [:*
@ -1085,7 +1158,9 @@
:hovering? (contains? hover-columns idx) :hovering? (contains? hover-columns idx)
:on-start-reorder-track handle-start-reorder-track :on-start-reorder-track handle-start-reorder-track
:on-move-reorder-track handle-move-reorder-track :on-move-reorder-track handle-move-reorder-track
:on-end-reorder-track handle-end-reorder-track}])) :on-end-reorder-track handle-end-reorder-track
:on-set-modifiers handle-set-modifiers
:on-clear-modifiers handle-clear-modifiers}]))
;; Last track resize handler ;; Last track resize handler
(when-not (empty? column-tracks) (when-not (empty? column-tracks)
@ -1102,7 +1177,9 @@
:track-before (last column-tracks) :track-before (last column-tracks)
:type :column :type :column
:value (dm/str (inc (count column-tracks))) :value (dm/str (inc (count column-tracks)))
:zoom zoom}] :zoom zoom
:on-set-modifiers handle-set-modifiers
:on-clear-modifiers handle-clear-modifiers}]
(let [drop? (and (= :column @drop-track-type*) (let [drop? (and (= :column @drop-track-type*)
(= (count column-tracks) @drop-track-target*))] (= (count column-tracks) @drop-track-target*))]
[:& resize-track-handler [:& resize-track-handler
@ -1115,7 +1192,9 @@
:start-p end-p :start-p end-p
:type :column :type :column
:track-before (last column-tracks) :track-before (last column-tracks)
:zoom zoom}])])) :zoom zoom
:on-set-modifiers handle-set-modifiers
:on-clear-modifiers handle-clear-modifiers}])]))
(for [[idx row-data] (d/enumerate row-tracks)] (for [[idx row-data] (d/enumerate row-tracks)]
(let [drop? (and (= :row @drop-track-type*) (let [drop? (and (= :row @drop-track-type*)
@ -1132,7 +1211,9 @@
:hovering? (contains? hover-rows idx) :hovering? (contains? hover-rows idx)
:on-start-reorder-track handle-start-reorder-track :on-start-reorder-track handle-start-reorder-track
:on-move-reorder-track handle-move-reorder-track :on-move-reorder-track handle-move-reorder-track
:on-end-reorder-track handle-end-reorder-track}])) :on-end-reorder-track handle-end-reorder-track
:on-set-modifiers handle-set-modifiers
:on-clear-modifiers handle-clear-modifiers}]))
(when-not (empty? row-tracks) (when-not (empty? row-tracks)
(let [last-track (last row-tracks) (let [last-track (last row-tracks)
start-p (:start-p last-track) start-p (:start-p last-track)
@ -1148,7 +1229,9 @@
:track-before (last row-tracks) :track-before (last row-tracks)
:type :row :type :row
:value (dm/str (inc (count row-tracks))) :value (dm/str (inc (count row-tracks)))
:zoom zoom}]] :zoom zoom
:on-set-modifiers handle-set-modifiers
:on-clear-modifiers handle-clear-modifiers}]]
(let [drop? (and (= :row @drop-track-type*) (let [drop? (and (= :row @drop-track-type*)
(= (count row-tracks) @drop-track-target*))] (= (count row-tracks) @drop-track-target*))]
[:& resize-track-handler [:& resize-track-handler
@ -1161,4 +1244,6 @@
:type :row :type :row
:track-before (last row-tracks) :track-before (last row-tracks)
:snap-pixel? snap-pixel? :snap-pixel? snap-pixel?
:zoom zoom}])]))])]))) :zoom zoom
:on-set-modifiers handle-set-modifiers
:on-clear-modifiers handle-clear-modifiers}])]))])])))