github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-01 02:46:20 +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.margin :as fcm]
[app.main.ui.flex-controls.padding :as fcp])) [app.main.ui.flex-controls.padding :as fcp]))
(dm/export fcg/gap-control) (dm/export fcg/gap-control*)
(dm/export fcm/margin-control) (dm/export fcm/margin-control*)
(dm/export fcp/padding-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] [app.util.dom :as dom]
[rumext.v2 :as mf])) [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 [{: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]}] on-move-selected on-context-menu on-change]}]
(let [resizing (mf/use-var nil) (let [resizing (mf/use-var nil)
start (mf/use-var nil) start (mf/use-var nil)
@ -109,8 +109,8 @@
:on-pointer-down on-move-selected :on-pointer-down on-move-selected
:on-context-menu on-context-menu :on-context-menu on-context-menu
:style {:fill (if (or hover? selected?) fcc/distance-color "none") :style {:fill (if (or is-hover is-selected) fcc/distance-color "none")
:opacity (if selected? 0.5 0.25)}}] :opacity (if is-selected 0.5 0.25)}}]
(let [handle-width (let [handle-width
(if (= axis :x) (if (= axis :x)
@ -132,12 +132,12 @@
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move :on-pointer-move on-pointer-move
:on-context-menu on-context-menu :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))) (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") :style {:fill (if (or is-hover is-selected) fcc/distance-color "none")
:opacity (if selected? 0 1)}}])])) :opacity (if is-selected 0 1)}}])]))
(mf/defc gap-rects (mf/defc gap-rects*
[{:keys [frame zoom on-move-selected on-context-menu]}] [{:keys [frame zoom on-move-selected on-context-menu]}]
(let [frame-id (:id frame) (let [frame-id (:id frame)
saved-dir (:layout-flex-dir frame) saved-dir (:layout-flex-dir frame)
@ -320,7 +320,7 @@
[:g.gaps {:pointer-events "visible"} [:g.gaps {:pointer-events "visible"}
(for [[index display-item] (d/enumerate (concat display-blocks display-children))] (for [[index display-item] (d/enumerate (concat display-blocks display-children))]
(let [gap-type (:gap-type display-item)] (let [gap-type (:gap-type display-item)]
[:& gap-display [:> gap-display*
{:key (str frame-id index) {:key (str frame-id index)
:frame-id frame-id :frame-id frame-id
:zoom zoom :zoom zoom
@ -332,8 +332,8 @@
:on-context-menu on-context-menu :on-context-menu on-context-menu
:on-change on-change :on-change on-change
:rect-data display-item :rect-data display-item
:hover? (= @hover gap-type) :is-hover (= @hover gap-type)
:selected? (= gap-selected gap-type) :is-selected (= gap-selected gap-type)
:mouse-pos mouse-pos :mouse-pos mouse-pos
:hover-value hover-value}])) :hover-value hover-value}]))
@ -349,12 +349,12 @@
:value @hover-value}])])) :value @hover-value}])]))
(mf/defc gap-control (mf/defc gap-control*
[{:keys [frame zoom on-move-selected on-context-menu]}] [{:keys [frame zoom on-move-selected on-context-menu]}]
(when frame (when frame
[:g.measurement-gaps {:pointer-events "none"} [:g.measurement-gaps {:pointer-events "none"}
[:g.hover-shapes [:g.hover-shapes
[:& gap-rects [:> gap-rects*
{:frame frame {:frame frame
:zoom zoom :zoom zoom
:on-move-selected on-move-selected :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] [app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc margin-display (mf/defc margin-display*
[{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin [{:keys [shape-id zoom is-hover-all is-hover-v is-hover-h margin-num margin
on-pointer-enter on-pointer-leave on-change 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) (let [resizing? (mf/use-var false)
start (mf/use-var nil) start (mf/use-var nil)
original-value (mf/use-var 0) original-value (mf/use-var 0)
@ -42,7 +42,7 @@
calc-modifiers calc-modifiers
(mf/use-fn (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] (fn [pos]
(let [delta (let [delta
(-> (gpt/to-vec @start pos) (-> (gpt/to-vec @start pos)
@ -54,10 +54,10 @@
layout-item-margin layout-item-margin
(cond (cond
hover-all? (assoc margin :m1 val :m2 val :m3 val :m4 val) is-hover-all (assoc margin :m1 val :m2 val :m3 val :m4 val)
hover-v? (assoc margin :m1 val :m3 val) is-hover-v (assoc margin :m1 val :m3 val)
hover-h? (assoc margin :m2 val :m4 val) is-hover-h (assoc margin :m2 val :m4 val)
:else (assoc margin margin-num val)) :else (assoc margin margin-num val))
layout-item-margin-type layout-item-margin-type
(if (= (:m1 margin) (:m2 margin) (:m3 margin) (:m4 margin)) :simple :multiple)] (if (= (:m1 margin) (:m2 margin) (:m3 margin) (:m4 margin)) :simple :multiple)]
@ -114,13 +114,13 @@
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move :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))) (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") :style {:fill (if (or is-hover is-selected) fcc/warning-color "none")
:opacity (if selected? 0.5 0.25)}}])) :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) (let [shape-id (:id shape)
pill-width (/ fcc/flex-display-pill-width zoom) pill-width (/ fcc/flex-display-pill-width zoom)
pill-height (/ fcc/flex-display-pill-height zoom) pill-height (/ fcc/flex-display-pill-height zoom)
@ -133,9 +133,9 @@
hover-value (mf/use-state 0) hover-value (mf/use-state 0)
mouse-pos (mf/use-state nil) mouse-pos (mf/use-state nil)
hover (mf/use-state nil) hover (mf/use-state nil)
hover-all? (and (not (nil? @hover)) alt?) hover-all? (and (not (nil? @hover)) is-alt)
hover-v? (and (or (= @hover :m1) (= @hover :m3)) shift?) hover-v? (and (or (= @hover :m1) (= @hover :m3)) is-shift)
hover-h? (and (or (= @hover :m2) (= @hover :m4)) shift?) hover-h? (and (or (= @hover :m2) (= @hover :m4)) is-shift)
margin (:layout-item-margin shape) margin (:layout-item-margin shape)
{:keys [width height x1 x2 y1 y2]} (:selrect shape) {:keys [width height x1 x2 y1 y2]} (:selrect shape)
@ -202,21 +202,21 @@
[:g.margins {:pointer-events "visible"} [:g.margins {:pointer-events "visible"}
(for [[margin-num rect-data] margin-display-data] (for [[margin-num rect-data] margin-display-data]
[:& margin-display [:> margin-display*
{:key (:key rect-data) {:key (:key rect-data)
:shape-id shape-id :shape-id shape-id
:zoom zoom :zoom zoom
:hover-all? hover-all? :is-hover-all hover-all?
:hover-v? hover-v? :is-hover-v hover-v?
:hover-h? hover-h? :is-hover-h hover-h?
:margin-num margin-num :margin-num margin-num
:margin margin :margin margin
:on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num)) :on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
:on-pointer-leave on-pointer-leave :on-pointer-leave on-pointer-leave
:on-change on-change :on-change on-change
:rect-data rect-data :rect-data rect-data
:hover? (hover? margin-num) :is-hover (hover? margin-num)
:selected? (get margins-selected margin-num) :is-selected (get margins-selected margin-num)
:mouse-pos mouse-pos :mouse-pos mouse-pos
:hover-value hover-value}]) :hover-value hover-value}])
@ -231,14 +231,14 @@
:y (- (:y @mouse-pos) pill-width) :y (- (:y @mouse-pos) pill-width)
:value @hover-value}])])) :value @hover-value}])]))
(mf/defc margin-control (mf/defc margin-control*
[{:keys [shape parent zoom alt? shift?]}] [{:keys [shape parent zoom is-alt is-shift]}]
(when shape (when shape
[:g.measurement-gaps {:pointer-events "none"} [:g.measurement-gaps {:pointer-events "none"}
[:g.hover-shapes [:g.hover-shapes
[:& margin-rects [:> margin-rects*
{:shape shape {:shape shape
:frame parent :frame parent
:zoom zoom :zoom zoom
:alt? alt? :is-alt is-alt
:shift? shift?}]]])) :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] [app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc padding-display (mf/defc padding-display*
[{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter [{:keys [frame-id zoom is-hover-all is-hover-v is-hover-h padding-num padding on-pointer-enter
on-pointer-leave rect-data hover? selected? mouse-pos hover-value on-move-selected on-pointer-leave rect-data is-hover is-selected mouse-pos hover-value on-move-selected
on-context-menu on-change]}] on-context-menu on-change]}]
(let [resizing? (mf/use-var false) (let [resizing? (mf/use-var false)
start (mf/use-var nil) start (mf/use-var nil)
@ -42,7 +42,7 @@
calc-modifiers calc-modifiers
(mf/use-fn (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] (fn [pos]
(let [delta (let [delta
(-> (gpt/to-vec @start pos) (-> (gpt/to-vec @start pos)
@ -54,10 +54,10 @@
layout-padding layout-padding
(cond (cond
hover-all? (assoc padding :p1 val :p2 val :p3 val :p4 val) is-hover-all (assoc padding :p1 val :p2 val :p3 val :p4 val)
hover-v? (assoc padding :p1 val :p3 val) is-hover-v (assoc padding :p1 val :p3 val)
hover-h? (assoc padding :p2 val :p4 val) is-hover-h (assoc padding :p2 val :p4 val)
:else (assoc padding padding-num val)) :else (assoc padding padding-num val))
layout-padding-type layout-padding-type
@ -115,8 +115,8 @@
:on-pointer-move on-pointer-move :on-pointer-move on-pointer-move
:on-pointer-down on-move-selected :on-pointer-down on-move-selected
:on-context-menu on-context-menu :on-context-menu on-context-menu
:style {:fill (if (or hover? selected?) fcc/distance-color "none") :style {:fill (if (or is-hover is-selected) fcc/distance-color "none")
:opacity (if selected? 0.5 0.25)}}] :opacity (if is-selected 0.5 0.25)}}]
(let [handle-width (let [handle-width
(if (= axis :x) (if (= axis :x)
@ -139,17 +139,17 @@
:on-pointer-move on-pointer-move :on-pointer-move on-pointer-move
:on-context-menu on-context-menu :on-context-menu on-context-menu
:class :class
(when (or hover? selected?) (when (or is-hover is-selected)
(if (= (:resize-axis rect-data) :x) (if (= (:resize-axis rect-data) :x)
(cur/get-dynamic "resize-ew" 0) (cur/get-dynamic "resize-ew" 0)
(cur/get-dynamic "resize-ew" 90))) (cur/get-dynamic "resize-ew" 90)))
:style :style
{:fill (if (or hover? selected?) fcc/distance-color "none") {:fill (if (or is-hover is-selected) fcc/distance-color "none")
:opacity (if selected? 0 1)}}])])) :opacity (if is-selected 0 1)}}])]))
(mf/defc padding-rects (mf/defc padding-rects*
[{:keys [frame zoom alt? shift? on-move-selected on-context-menu]}] [{:keys [frame zoom is-alt is-shift on-move-selected on-context-menu]}]
(let [frame-id (:id frame) (let [frame-id (:id frame)
paddings-selected (mf/deref refs/workspace-paddings-selected) paddings-selected (mf/deref refs/workspace-paddings-selected)
current-modifiers (mf/use-state nil) current-modifiers (mf/use-state nil)
@ -161,9 +161,9 @@
mouse-pos (mf/use-state nil) mouse-pos (mf/use-state nil)
hover (mf/use-state nil) hover (mf/use-state nil)
hover-all? (and (not (nil? @hover)) alt?) hover-all? (and (not (nil? @hover)) is-alt)
hover-v? (and (or (= @hover :p1) (= @hover :p3)) shift?) hover-v? (and (or (= @hover :p1) (= @hover :p3)) is-shift)
hover-h? (and (or (= @hover :p2) (= @hover :p4)) shift?) hover-h? (and (or (= @hover :p2) (= @hover :p4)) is-shift)
padding (:layout-padding frame) padding (:layout-padding frame)
{:keys [width height x1 x2 y1 y2]} (:selrect frame) {:keys [width height x1 x2 y1 y2]} (:selrect frame)
pill-width (/ fcc/flex-display-pill-width zoom) pill-width (/ fcc/flex-display-pill-width zoom)
@ -243,13 +243,13 @@
[:g.paddings {:pointer-events "visible"} [:g.paddings {:pointer-events "visible"}
(for [[padding-num rect-data] padding-rect-data] (for [[padding-num rect-data] padding-rect-data]
[:& padding-display [:> padding-display*
{:key (:key rect-data) {:key (:key rect-data)
:frame-id frame-id :frame-id frame-id
:zoom zoom :zoom zoom
:hover-all? hover-all? :is-hover-all hover-all?
:hover-v? hover-v? :is-hover-v hover-v?
:hover-h? hover-h? :is-hover-h hover-h?
:padding padding :padding padding
:mouse-pos mouse-pos :mouse-pos mouse-pos
:hover-value hover-value :hover-value hover-value
@ -259,8 +259,8 @@
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-context-menu :on-context-menu on-context-menu
:on-change on-change :on-change on-change
:hover? (hover? padding-num) :is-hover (hover? padding-num)
:selected? (get paddings-selected padding-num) :is-selected (get paddings-selected padding-num)
:rect-data rect-data}]) :rect-data rect-data}])
(when @hover (when @hover
@ -274,15 +274,15 @@
:y (- (:y @mouse-pos) pill-width) :y (- (:y @mouse-pos) pill-width)
:value @hover-value}])])) :value @hover-value}])]))
(mf/defc padding-control (mf/defc padding-control*
[{:keys [frame zoom alt? shift? on-move-selected on-context-menu]}] [{:keys [frame zoom is-alt is-shift on-move-selected on-context-menu]}]
(when frame (when frame
[:g.measurement-gaps {:pointer-events "none"} [:g.measurement-gaps {:pointer-events "none"}
[:g.hover-shapes [:g.hover-shapes
[:& padding-rects [:> padding-rects*
{:frame frame {:frame frame
:zoom zoom :zoom zoom
:alt? alt? :is-alt is-alt
:shift? shift? :is-shift is-shift
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-context-menu}]]])) :on-context-menu on-context-menu}]]]))

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

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

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

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