From 83cc71e5859079fbfc82fb515ad8a4e6e57eb353 Mon Sep 17 00:00:00 2001 From: wdeveloper16 Date: Tue, 19 May 2026 17:37:31 +0200 Subject: [PATCH] :recycle: Migrate viewport snap, pixel-overlay and outline components to modern syntax (#9394) Co-authored-by: wdeveloper16 Co-authored-by: Andrey Antukh --- .../src/app/main/ui/workspace/viewport.cljs | 14 ++--- .../ui/workspace/viewport/interactions.cljs | 8 +-- .../main/ui/workspace/viewport/outline.cljs | 57 +++++++------------ .../ui/workspace/viewport/pixel_overlay.cljs | 11 +--- .../ui/workspace/viewport/snap_distances.cljs | 29 +++------- .../app/main/ui/workspace/viewport_wasm.cljs | 8 +-- 6 files changed, 46 insertions(+), 81 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 8a6806f4f8..10c0b08b3c 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -362,10 +362,8 @@ :zoom zoom}]) (when picking-color? - [:& pixel-overlay/pixel-overlay {:vport vport - :vbox vbox - :layout layout - :viewport-ref viewport-ref}])] + [:> pixel-overlay/pixel-overlay* {:vport vport + :viewport-ref viewport-ref}])] [:svg {:id "render" @@ -463,7 +461,7 @@ (last)) outlined-frame (get objects outlined-frame-id)] [:* - [:& outline/shape-outlines + [:> outline/shape-outlines* {:objects base-objects :hover #{outlined-frame-id} :zoom zoom @@ -471,13 +469,13 @@ (when (ctl/any-layout? outlined-frame) [:g.ghost-outline - [:& outline/shape-outlines + [:> outline/shape-outlines* {:objects base-objects :selected selected :zoom zoom}]])])) (when show-outlines? - [:& outline/shape-outlines + [:> outline/shape-outlines* {:objects base-objects :selected selected :hover #{(:id @hover) @frame-hover} @@ -617,7 +615,7 @@ :focus focus}]) (when show-snap-distance? - [:& snap-distances/snap-distances + [:> snap-distances/snap-distances* {:layout layout :zoom zoom :transform transform diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index 8b1ae15552..9490cd1785 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -19,7 +19,7 @@ [app.main.store :as st] [app.main.ui.context :as muc] [app.main.ui.shapes.embed :as embed] - [app.main.ui.workspace.viewport.outline :refer [outline]] + [app.main.ui.workspace.viewport.outline :refer [outline*]] [app.util.dom :as dom] [cuerdas.core :as str] [okulary.core :as l] @@ -196,9 +196,9 @@ :d pdata}] (when dest-shape - [:& outline {:zoom zoom - :shape dest-shape - :color stroke-color}]) + [:> outline* {:zoom zoom + :shape dest-shape + :color stroke-color}]) [:> interaction-marker* {:index index :x orig-x diff --git a/frontend/src/app/main/ui/workspace/viewport/outline.cljs b/frontend/src/app/main/ui/workspace/viewport/outline.cljs index 853addb761..6b5d52798a 100644 --- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/outline.cljs @@ -19,13 +19,9 @@ [clojure.set :as set] [rumext.v2 :as mf])) -(mf/defc outline - {::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - modifier (unchecked-get props "modifier") - - zoom (d/nilv (unchecked-get props "zoom") 1) +(mf/defc outline* + [{:keys [shape modifier zoom]}] + (let [zoom (d/nilv zoom 1) shape (gsh/transform-shape shape (:modifiers modifier)) transform (gsh/transform-str shape) @@ -95,33 +91,22 @@ [:> outline-type props])) -(mf/defc shape-outlines-render - {::mf/wrap-props false - ::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "zoom" "modifiers"]))]} - [props] - (let [shapes (unchecked-get props "shapes") - zoom (unchecked-get props "zoom") - modifiers (unchecked-get props "modifiers")] +(mf/defc shape-outlines-render* + {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "zoom" "modifiers"]))]} + [{:keys [shapes zoom modifiers]}] + (for [shape shapes] + (let [shape-id (dm/get-prop shape :id) + modifier (get modifiers shape-id)] + [:> outline* {:key (dm/str "outline-" shape-id) + :shape shape + :modifier modifier + :zoom zoom}]))) - (for [shape shapes] - (let [shape-id (dm/get-prop shape :id) - modifier (get modifiers shape-id)] - [:& outline {:key (dm/str "outline-" shape-id) - :shape shape - :modifier modifier - :zoom zoom}])))) - -(mf/defc shape-outlines - {::mf/wrap-props false} - [props] - (let [selected (or (obj/get props "selected") #{}) - hover (or (obj/get props "hover") #{}) - highlighted (or (obj/get props "highlighted") #{}) - - objects (obj/get props "objects") - edition (obj/get props "edition") - zoom (obj/get props "zoom") - modifiers (obj/get props "modifiers") +(mf/defc shape-outlines* + [{:keys [selected hover highlighted objects edition zoom modifiers]}] + (let [selected (or selected #{}) + hover (or hover #{}) + highlighted (or highlighted #{}) lookup (d/getf objects) edition? (fn [o] (= edition o)) @@ -139,6 +124,6 @@ shapes (hooks/use-equal-memo shapes)] [:g.outlines.blurrable - [:& shape-outlines-render {:shapes shapes - :zoom zoom - :modifiers modifiers}]])) + [:> shape-outlines-render* {:shapes shapes + :zoom zoom + :modifiers modifiers}]])) diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs index 89f1f9737c..587f6cfc7e 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs @@ -102,13 +102,9 @@ (st/emit! (dwc/pick-color color)))))))))) -(mf/defc pixel-overlay - {::mf/wrap-props false} - [props] - (let [vport (unchecked-get props "vport") - - viewport-ref (unchecked-get props "viewport-ref") - viewport-node (mf/ref-val viewport-ref) +(mf/defc pixel-overlay* + [{:keys [vport viewport-ref]}] + (let [viewport-node (mf/ref-val viewport-ref) canvas (get-offscreen-canvas (:width vport) (:height vport)) canvas-context (.getContext canvas "2d" #js {:willReadFrequently true}) @@ -310,7 +306,6 @@ (st/emit! (dwc/pick-color color)))))))))) (mf/defc pixel-overlay-wasm* - {::mf/wrap-props false} [{:keys [viewport-ref canvas-ref]}] (let [viewport-node (mf/ref-val viewport-ref) canvas (mf/ref-val canvas-ref) diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs index 97b8c905f8..5e87fed91d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs @@ -227,17 +227,9 @@ (rx/combine-latest (query-side lt-side) (query-side gt-side)))) -(mf/defc shape-distance - {::mf/wrap-props false} - [props] - (let [frame (unchecked-get props "frame") - selrect (unchecked-get props "selrect") - page-id (unchecked-get props "page-id") - zoom (unchecked-get props "zoom") - coord (unchecked-get props "coord") - selected (unchecked-get props "selected") - - subject (mf/use-memo #(rx/subject)) +(mf/defc shape-distance* + [{:keys [frame selrect page-id zoom coord selected]}] + (let [subject (mf/use-memo #(rx/subject)) lt-shapes* (mf/use-state nil) @@ -279,27 +271,22 @@ :coord coord :zoom zoom}]))) -(mf/defc snap-distances - {::mf/wrap-props false} - [props] - (let [page-id (unchecked-get props "page-id") - zoom (unchecked-get props "zoom") - selected (unchecked-get props "selected") - selected-shapes (unchecked-get props "selected-shapes") - frame-id (-> selected-shapes first :frame-id) +(mf/defc snap-distances* + [{:keys [page-id zoom selected selected-shapes]}] + (let [frame-id (-> selected-shapes first :frame-id) frame (mf/deref (refs/object-by-id frame-id)) selrect (gsh/shapes->rect selected-shapes)] (when-not (ctl/any-layout? frame) [:g.distance - [:& shape-distance + [:> shape-distance* {:selrect selrect :page-id page-id :frame frame :zoom zoom :coord :x :selected selected}] - [:& shape-distance + [:> shape-distance* {:selrect selrect :page-id page-id :frame frame diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs index 80e5028f5a..69ef789c27 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs @@ -620,20 +620,20 @@ (last)) outlined-frame (get objects outlined-frame-id)] [:* - [:& outline/shape-outlines + [:> outline/shape-outlines* {:objects objects-for-outlines :hover #{outlined-frame-id} :zoom zoom}] (when (ctl/any-layout? outlined-frame) [:g.ghost-outline.blurrable - [:& outline/shape-outlines + [:> outline/shape-outlines* {:objects objects-for-outlines :selected selected :zoom zoom}]])])) (when show-outlines? - [:& outline/shape-outlines + [:> outline/shape-outlines* {:objects objects-for-outlines :selected selected :hover #{(:id @hover) @frame-hover} @@ -753,7 +753,7 @@ :focus focus}]) (when show-snap-distance? - [:& snap-distances/snap-distances + [:> snap-distances/snap-distances* {:layout layout :zoom zoom :transform transform