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

♻️ Convert grid-cell and editor to * suffix in grid layout editor

Browse Source
This commit is contained in:
Andrey Antukh 2026-04-02 21:40:20 +00:00
parent be091b508b
commit 043e7bb8cd
1 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -313,10 +313,9 @@
:text-anchor "middle"}} :text-anchor "middle"}}
text]])) text]]))
(mf/defc grid-cell (mf/defc grid-cell*
{::mf/memo #{:shape :cell :layout-data :zoom :hover? :selected? :on-set-modifiers :on-clear-modifiers} {::mf/wrap [mf/memo]}
::mf/props :obj} [{:keys [shape cell layout-data zoom is-hover is-selected on-set-modifiers on-clear-modifiers]}]
[{: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)
@ -338,17 +337,17 @@
handle-pointer-down handle-pointer-down
(mf/use-fn (mf/use-fn
(mf/deps (:id shape) (:id cell) selected?) (mf/deps (:id shape) (:id cell) is-selected)
(fn [event] (fn [event]
(when (dom/left-mouse? event) (when (dom/left-mouse? event)
(cond (cond
(and selected? (or (kbd/mod? event) (kbd/shift? event))) (and is-selected (or (kbd/mod? event) (kbd/shift? event)))
(st/emit! (dwge/remove-selection (:id shape) (:id cell))) (st/emit! (dwge/remove-selection (:id shape) (:id cell)))
(and (not selected?) (kbd/mod? event)) (and (not is-selected) (kbd/mod? event))
(st/emit! (dwge/add-to-selection (:id shape) (:id cell))) (st/emit! (dwge/add-to-selection (:id shape) (:id cell)))
(and (not selected?) (kbd/shift? event)) (and (not is-selected) (kbd/shift? event))
(st/emit! (dwge/add-to-selection (:id shape) (:id cell) true)) (st/emit! (dwge/add-to-selection (:id shape) (:id cell) true))
:else :else
@ -356,12 +355,12 @@
handle-context-menu handle-context-menu
(mf/use-fn (mf/use-fn
(mf/deps (:id shape) (:id cell) selected?) (mf/deps (:id shape) (:id cell) is-selected)
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(let [position (dom/get-client-position event)] (let [position (dom/get-client-position event)]
(if selected? (if is-selected
(st/emit! (dw/show-grid-cell-context-menu {:position position :grid-id (:id shape)})) (st/emit! (dw/show-grid-cell-context-menu {:position position :grid-id (:id shape)}))
;; If right-click on a non-selected cell we select the cell and then open the menu ;; If right-click on a non-selected cell we select the cell and then open the menu
@ -395,8 +394,8 @@
[:rect [:rect
{:transform (dm/str (gmt/transform-in cell-center (:transform shape))) {:transform (dm/str (gmt/transform-in cell-center (:transform shape)))
:class (dom/classnames (stl/css :grid-cell-outline) true :class (dom/classnames (stl/css :grid-cell-outline) true
(stl/css :hover) hover? (stl/css :hover) is-hover
(stl/css :selected) selected?) (stl/css :selected) is-selected)
:x (:x cell-origin) :x (:x cell-origin)
:y (:y cell-origin) :y (:y cell-origin)
:width cell-width :width cell-width
@ -413,7 +412,7 @@
:zoom zoom :zoom zoom
:text (:area-name cell)}]) :text (:area-name cell)}])
(when selected? (when is-selected
(let [handlers (let [handlers
;; Handlers positions, size and cursor ;; Handlers positions, size and cursor
[[:top (:x cell-origin) (+ (:y cell-origin) (/ -10 zoom)) cell-width (/ 20 zoom) :row] [[:top (:x cell-origin) (+ (:y cell-origin) (/ -10 zoom)) cell-width (/ 20 zoom) :row]
@ -948,15 +947,10 @@
:on-set-modifiers on-set-modifiers :on-set-modifiers on-set-modifiers
:on-clear-modifiers on-clear-modifiers}]])) :on-clear-modifiers on-clear-modifiers}]]))
(mf/defc editor (mf/defc editor*
{::mf/memo true {::mf/wrap [mf/memo]}
::mf/props :obj} [{:keys [shape objects modifiers zoom view-only]}]
[props] (let [base-shape shape
(let [base-shape (unchecked-get props "shape")
objects (unchecked-get props "objects")
modifiers (unchecked-get props "modifiers")
zoom (unchecked-get props "zoom")
view-only (unchecked-get props "view-only")
st-modif (mf/use-state nil) st-modif (mf/use-state nil)
@ -1116,15 +1110,15 @@
:on-pointer-down handle-pointer-down} :on-pointer-down handle-pointer-down}
[:g.cells [:g.cells
(for [cell (ctl/get-cells shape {:sort? true})] (for [cell (ctl/get-cells shape {:sort? true})]
[:& grid-cell {:key (dm/str "cell-" (:id cell)) [:> grid-cell* {:key (dm/str "cell-" (:id cell))
:shape base-shape :shape base-shape
:layout-data layout-data :layout-data layout-data
:cell cell :cell cell
:zoom zoom :zoom zoom
:hover? (contains? hover-cells (:id cell)) :is-hover (contains? hover-cells (:id cell))
:selected? (contains? selected-cells (:id cell)) :is-selected (contains? selected-cells (:id cell))
:on-set-modifiers handle-set-modifiers :on-set-modifiers handle-set-modifiers
:on-clear-modifiers handle-clear-modifiers}])] :on-clear-modifiers handle-clear-modifiers}])]
(when-not ^boolean view-only (when-not ^boolean view-only
[:* [:*