From 0b60e4e16e6ebce81d50935192fb2091cadf49b9 Mon Sep 17 00:00:00 2001 From: Dexterity <173429049+Dexterity104@users.noreply.github.com> Date: Wed, 10 Jun 2026 07:47:48 -0400 Subject: [PATCH] :recycle: Migrate flex-controls padding/margin/gap to modern syntax (#9458) Co-authored-by: Andrey Antukh --- frontend/src/app/main/ui/flex_controls.cljs | 6 +- .../src/app/main/ui/flex_controls/gap.cljs | 26 ++++----- .../src/app/main/ui/flex_controls/margin.cljs | 52 ++++++++--------- .../app/main/ui/flex_controls/padding.cljs | 58 +++++++++---------- .../src/app/main/ui/workspace/viewport.cljs | 18 +++--- .../app/main/ui/workspace/viewport_wasm.cljs | 18 +++--- 6 files changed, 89 insertions(+), 89 deletions(-) diff --git a/frontend/src/app/main/ui/flex_controls.cljs b/frontend/src/app/main/ui/flex_controls.cljs index 4875d424bb..baa8207df3 100644 --- a/frontend/src/app/main/ui/flex_controls.cljs +++ b/frontend/src/app/main/ui/flex_controls.cljs @@ -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*) diff --git a/frontend/src/app/main/ui/flex_controls/gap.cljs b/frontend/src/app/main/ui/flex_controls/gap.cljs index edef8fd144..710b89882f 100644 --- a/frontend/src/app/main/ui/flex_controls/gap.cljs +++ b/frontend/src/app/main/ui/flex_controls/gap.cljs @@ -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 diff --git a/frontend/src/app/main/ui/flex_controls/margin.cljs b/frontend/src/app/main/ui/flex_controls/margin.cljs index c2aa537295..20f486fdeb 100644 --- a/frontend/src/app/main/ui/flex_controls/margin.cljs +++ b/frontend/src/app/main/ui/flex_controls/margin.cljs @@ -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}]]])) diff --git a/frontend/src/app/main/ui/flex_controls/padding.cljs b/frontend/src/app/main/ui/flex_controls/padding.cljs index b2c5e4272b..b751c565d3 100644 --- a/frontend/src/app/main/ui/flex_controls/padding.cljs +++ b/frontend/src/app/main/ui/flex_controls/padding.cljs @@ -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}]]])) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index e842451c2f..3c5fb33114 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs index 8036612542..2972b58ead 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs @@ -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*