github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-11 01:42:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Migrate flex-controls padding/margin/gap to modern syntax (#9458)

Browse Source 
Co-authored-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
Dexterity 2026-06-10 07:47:48 -04:00 committed by GitHub
parent 5d2e0cb7cb
commit 0b60e4e16e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 89 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/main/ui/flex_controls.cljs
View File

@ -11,6 +11,6 @@
[app.main.ui.flex-controls.margin :as fcm]
[app.main.ui.flex-controls.padding :as fcp]))
(dm/export fcg/gap-control)
(dm/export fcm/margin-control)
(dm/export fcp/padding-control)
(dm/export fcg/gap-control*)
(dm/export fcm/margin-control*)
(dm/export fcp/padding-control*)

26
frontend/src/app/main/ui/flex_controls/gap.cljs
View File

@ -27,9 +27,9 @@
[app.util.dom :as dom]
[rumext.v2 :as mf]))
(mf/defc gap-display
(mf/defc gap-display*
[{:keys [frame-id zoom gap-type gap on-pointer-enter on-pointer-leave
rect-data hover? selected? mouse-pos hover-value
rect-data is-hover is-selected mouse-pos hover-value
on-move-selected on-context-menu on-change]}]
(let [resizing (mf/use-var nil)
start (mf/use-var nil)
@ -109,8 +109,8 @@
:on-pointer-down on-move-selected
:on-context-menu on-context-menu
:style {:fill (if (or hover? selected?) fcc/distance-color "none")
:opacity (if selected? 0.5 0.25)}}]
:style {:fill (if (or is-hover is-selected) fcc/distance-color "none")
:opacity (if is-selected 0.5 0.25)}}]
(let [handle-width
(if (= axis :x)
@ -132,12 +132,12 @@
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move
:on-context-menu on-context-menu
:class (when (or hover? selected?)
:class (when (or is-hover is-selected)
(if (= (:resize-axis rect-data) :x) (cur/get-dynamic "resize-ew" 0) (cur/get-dynamic "resize-ew" 90)))
:style {:fill (if (or hover? selected?) fcc/distance-color "none")
:opacity (if selected? 0 1)}}])]))
:style {:fill (if (or is-hover is-selected) fcc/distance-color "none")
:opacity (if is-selected 0 1)}}])]))
(mf/defc gap-rects
(mf/defc gap-rects*
[{:keys [frame zoom on-move-selected on-context-menu]}]
(let [frame-id (:id frame)
saved-dir (:layout-flex-dir frame)
@ -320,7 +320,7 @@
[:g.gaps {:pointer-events "visible"}
(for [[index display-item] (d/enumerate (concat display-blocks display-children))]
(let [gap-type (:gap-type display-item)]
[:& gap-display
[:> gap-display*
{:key (str frame-id index)
:frame-id frame-id
:zoom zoom
@ -332,8 +332,8 @@
:on-context-menu on-context-menu
:on-change on-change
:rect-data display-item
:hover? (= @hover gap-type)
:selected? (= gap-selected gap-type)
:is-hover (= @hover gap-type)
:is-selected (= gap-selected gap-type)
:mouse-pos mouse-pos
:hover-value hover-value}]))
@ -349,12 +349,12 @@
:value @hover-value}])]))
(mf/defc gap-control
(mf/defc gap-control*
[{:keys [frame zoom on-move-selected on-context-menu]}]
(when frame
[:g.measurement-gaps {:pointer-events "none"}
[:g.hover-shapes
[:& gap-rects
[:> gap-rects*
{:frame frame
:zoom zoom
:on-move-selected on-move-selected

52
frontend/src/app/main/ui/flex_controls/margin.cljs
View File

@ -20,10 +20,10 @@
[app.util.dom :as dom]
[rumext.v2 :as mf]))
(mf/defc margin-display
[{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin
(mf/defc margin-display*
[{:keys [shape-id zoom is-hover-all is-hover-v is-hover-h margin-num margin
on-pointer-enter on-pointer-leave on-change
rect-data hover? selected? mouse-pos hover-value]}]
rect-data is-hover is-selected mouse-pos hover-value]}]
(let [resizing? (mf/use-var false)
start (mf/use-var nil)
original-value (mf/use-var 0)
@ -42,7 +42,7 @@
calc-modifiers
(mf/use-fn
(mf/deps shape-id margin-num margin hover-all? hover-v? hover-h?)
(mf/deps shape-id margin-num margin is-hover-all is-hover-v is-hover-h)
(fn [pos]
(let [delta
(-> (gpt/to-vec @start pos)
@ -54,10 +54,10 @@
layout-item-margin
(cond
hover-all? (assoc margin :m1 val :m2 val :m3 val :m4 val)
hover-v? (assoc margin :m1 val :m3 val)
hover-h? (assoc margin :m2 val :m4 val)
:else (assoc margin margin-num val))
is-hover-all (assoc margin :m1 val :m2 val :m3 val :m4 val)
is-hover-v (assoc margin :m1 val :m3 val)
is-hover-h (assoc margin :m2 val :m4 val)
:else (assoc margin margin-num val))
layout-item-margin-type
(if (= (:m1 margin) (:m2 margin) (:m3 margin) (:m4 margin)) :simple :multiple)]
@ -114,13 +114,13 @@
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move
:class (when (or hover? selected?)
:class (when (or is-hover is-selected)
(if (= (:resize-axis rect-data) :x) (cur/get-dynamic "resize-ew" 0) (cur/get-dynamic "resize-ew" 90)))
:style {:fill (if (or hover? selected?) fcc/warning-color "none")
:opacity (if selected? 0.5 0.25)}}]))
:style {:fill (if (or is-hover is-selected) fcc/warning-color "none")
:opacity (if is-selected 0.5 0.25)}}]))
(mf/defc margin-rects [{:keys [shape frame zoom alt? shift?]}]
(mf/defc margin-rects* [{:keys [shape frame zoom is-alt is-shift]}]
(let [shape-id (:id shape)
pill-width (/ fcc/flex-display-pill-width zoom)
pill-height (/ fcc/flex-display-pill-height zoom)
@ -133,9 +133,9 @@
hover-value (mf/use-state 0)
mouse-pos (mf/use-state nil)
hover (mf/use-state nil)
hover-all? (and (not (nil? @hover)) alt?)
hover-v? (and (or (= @hover :m1) (= @hover :m3)) shift?)
hover-h? (and (or (= @hover :m2) (= @hover :m4)) shift?)
hover-all? (and (not (nil? @hover)) is-alt)
hover-v? (and (or (= @hover :m1) (= @hover :m3)) is-shift)
hover-h? (and (or (= @hover :m2) (= @hover :m4)) is-shift)
margin (:layout-item-margin shape)
{:keys [width height x1 x2 y1 y2]} (:selrect shape)
@ -202,21 +202,21 @@
[:g.margins {:pointer-events "visible"}
(for [[margin-num rect-data] margin-display-data]
[:& margin-display
[:> margin-display*
{:key (:key rect-data)
:shape-id shape-id
:zoom zoom
:hover-all? hover-all?
:hover-v? hover-v?
:hover-h? hover-h?
:is-hover-all hover-all?
:is-hover-v hover-v?
:is-hover-h hover-h?
:margin-num margin-num
:margin margin
:on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
:on-pointer-leave on-pointer-leave
:on-change on-change
:rect-data rect-data
:hover? (hover? margin-num)
:selected? (get margins-selected margin-num)
:is-hover (hover? margin-num)
:is-selected (get margins-selected margin-num)
:mouse-pos mouse-pos
:hover-value hover-value}])
@ -231,14 +231,14 @@
:y (- (:y @mouse-pos) pill-width)
:value @hover-value}])]))
(mf/defc margin-control
[{:keys [shape parent zoom alt? shift?]}]
(mf/defc margin-control*
[{:keys [shape parent zoom is-alt is-shift]}]
(when shape
[:g.measurement-gaps {:pointer-events "none"}
[:g.hover-shapes
[:& margin-rects
[:> margin-rects*
{:shape shape
:frame parent
:zoom zoom
:alt? alt?
:shift? shift?}]]]))
:is-alt is-alt
:is-shift is-shift}]]]))

58
frontend/src/app/main/ui/flex_controls/padding.cljs
View File

@ -20,9 +20,9 @@
[app.util.dom :as dom]
[rumext.v2 :as mf]))
(mf/defc padding-display
[{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter
on-pointer-leave rect-data hover? selected? mouse-pos hover-value on-move-selected
(mf/defc padding-display*
[{:keys [frame-id zoom is-hover-all is-hover-v is-hover-h padding-num padding on-pointer-enter
on-pointer-leave rect-data is-hover is-selected mouse-pos hover-value on-move-selected
on-context-menu on-change]}]
(let [resizing? (mf/use-var false)
start (mf/use-var nil)
@ -42,7 +42,7 @@
calc-modifiers
(mf/use-fn
(mf/deps frame-id padding-num padding hover-all? hover-v? hover-h?)
(mf/deps frame-id padding-num padding is-hover-all is-hover-v is-hover-h)
(fn [pos]
(let [delta
(-> (gpt/to-vec @start pos)
@ -54,10 +54,10 @@
layout-padding
(cond
hover-all? (assoc padding :p1 val :p2 val :p3 val :p4 val)
hover-v? (assoc padding :p1 val :p3 val)
hover-h? (assoc padding :p2 val :p4 val)
:else (assoc padding padding-num val))
is-hover-all (assoc padding :p1 val :p2 val :p3 val :p4 val)
is-hover-v (assoc padding :p1 val :p3 val)
is-hover-h (assoc padding :p2 val :p4 val)
:else (assoc padding padding-num val))
layout-padding-type
@ -115,8 +115,8 @@
:on-pointer-move on-pointer-move
:on-pointer-down on-move-selected
:on-context-menu on-context-menu
:style {:fill (if (or hover? selected?) fcc/distance-color "none")
:opacity (if selected? 0.5 0.25)}}]
:style {:fill (if (or is-hover is-selected) fcc/distance-color "none")
:opacity (if is-selected 0.5 0.25)}}]
(let [handle-width
(if (= axis :x)
@ -139,17 +139,17 @@
:on-pointer-move on-pointer-move
:on-context-menu on-context-menu
:class
(when (or hover? selected?)
(when (or is-hover is-selected)
(if (= (:resize-axis rect-data) :x)
(cur/get-dynamic "resize-ew" 0)
(cur/get-dynamic "resize-ew" 90)))
:style
{:fill (if (or hover? selected?) fcc/distance-color "none")
:opacity (if selected? 0 1)}}])]))
{:fill (if (or is-hover is-selected) fcc/distance-color "none")
:opacity (if is-selected 0 1)}}])]))
(mf/defc padding-rects
[{:keys [frame zoom alt? shift? on-move-selected on-context-menu]}]
(mf/defc padding-rects*
[{:keys [frame zoom is-alt is-shift on-move-selected on-context-menu]}]
(let [frame-id (:id frame)
paddings-selected (mf/deref refs/workspace-paddings-selected)
current-modifiers (mf/use-state nil)
@ -161,9 +161,9 @@
mouse-pos (mf/use-state nil)
hover (mf/use-state nil)
hover-all? (and (not (nil? @hover)) alt?)
hover-v? (and (or (= @hover :p1) (= @hover :p3)) shift?)
hover-h? (and (or (= @hover :p2) (= @hover :p4)) shift?)
hover-all? (and (not (nil? @hover)) is-alt)
hover-v? (and (or (= @hover :p1) (= @hover :p3)) is-shift)
hover-h? (and (or (= @hover :p2) (= @hover :p4)) is-shift)
padding (:layout-padding frame)
{:keys [width height x1 x2 y1 y2]} (:selrect frame)
pill-width (/ fcc/flex-display-pill-width zoom)
@ -243,13 +243,13 @@
[:g.paddings {:pointer-events "visible"}
(for [[padding-num rect-data] padding-rect-data]
[:& padding-display
[:> padding-display*
{:key (:key rect-data)
:frame-id frame-id
:zoom zoom
:hover-all? hover-all?
:hover-v? hover-v?
:hover-h? hover-h?
:is-hover-all hover-all?
:is-hover-v hover-v?
:is-hover-h hover-h?
:padding padding
:mouse-pos mouse-pos
:hover-value hover-value
@ -259,8 +259,8 @@
:on-move-selected on-move-selected
:on-context-menu on-context-menu
:on-change on-change
:hover? (hover? padding-num)
:selected? (get paddings-selected padding-num)
:is-hover (hover? padding-num)
:is-selected (get paddings-selected padding-num)
:rect-data rect-data}])
(when @hover
@ -274,15 +274,15 @@
:y (- (:y @mouse-pos) pill-width)
:value @hover-value}])]))
(mf/defc padding-control
[{:keys [frame zoom alt? shift? on-move-selected on-context-menu]}]
(mf/defc padding-control*
[{:keys [frame zoom is-alt is-shift on-move-selected on-context-menu]}]
(when frame
[:g.measurement-gaps {:pointer-events "none"}
[:g.hover-shapes
[:& padding-rects
[:> padding-rects*
{:frame frame
:zoom zoom
:alt? alt?
:shift? shift?
:is-alt is-alt
:is-shift is-shift
:on-move-selected on-move-selected
:on-context-menu on-context-menu}]]]))

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

@ -537,33 +537,33 @@
:bounds vbox}]]))
(when show-padding?
[:& mfc/padding-control
[:> mfc/padding-control*
{:frame first-shape
:hover @frame-hover
:zoom zoom
:alt? @alt?
:shift? @shift?
:is-alt @alt?
:is-shift @shift?
:on-move-selected on-move-selected
:on-context-menu on-menu-selected}])
(when show-padding?
[:& mfc/gap-control
[:> mfc/gap-control*
{:frame first-shape
:hover @frame-hover
:zoom zoom
:alt? @alt?
:shift? @shift?
:is-alt @alt?
:is-shift @shift?
:on-move-selected on-move-selected
:on-context-menu on-menu-selected}])
(when show-margin?
[:& mfc/margin-control
[:> mfc/margin-control*
{:shape first-shape
:parent selected-frame
:hover @frame-hover
:zoom zoom
:alt? @alt?
:shift? @shift?}])
:is-alt @alt?
:is-shift @shift?}])
[:> widgets/frame-titles*
{:objects base-objects

18
frontend/src/app/main/ui/workspace/viewport_wasm.cljs
View File

@ -725,33 +725,33 @@
:zoom zoom}])
(when show-padding?
[:& mfc/padding-control
[:> mfc/padding-control*
{:frame first-shape
:hover @frame-hover
:zoom zoom
:alt? @alt?
:shift? @shift?
:is-alt @alt?
:is-shift @shift?
:on-move-selected on-move-selected
:on-context-menu on-menu-selected}])
(when show-padding?
[:& mfc/gap-control
[:> mfc/gap-control*
{:frame first-shape
:hover @frame-hover
:zoom zoom
:alt? @alt?
:shift? @shift?
:is-alt @alt?
:is-shift @shift?
:on-move-selected on-move-selected
:on-context-menu on-menu-selected}])
(when show-margin?
[:& mfc/margin-control
[:> mfc/margin-control*
{:shape first-shape
:parent selected-frame
:hover @frame-hover
:zoom zoom
:alt? @alt?
:shift? @shift?}])
:is-alt @alt?
:is-shift @shift?}])
(when-not shapes-loading?
[:> widgets/frame-titles*