♻️ Migrate viewport snap, pixel-overlay and outline components to modern syntax (#9394)

Co-authored-by: wdeveloper16 <wdeveloer16@protonmail.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -362,10 +362,8 @@
                                       :zoom zoom}])
 
       (when picking-color?
-        [:& pixel-overlay/pixel-overlay {:vport vport
+        [:> pixel-overlay/pixel-overlay* {:vport vport
-                                         :vbox vbox
+                                          :viewport-ref viewport-ref}])]
-                                         :layout layout
-                                         :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

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
+         [:> outline* {:zoom zoom
-                      :shape dest-shape
+                       :shape dest-shape
-                      :color stroke-color}])
+                       :color stroke-color}])
 
        [:> interaction-marker* {:index index
                                 :x orig-x

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/defc outline*
-  {::mf/wrap-props false}
+  [{:keys [shape modifier zoom]}]
-  [props]
+  (let [zoom      (d/nilv zoom 1)
-  (let [shape     (unchecked-get props "shape")
-        modifier  (unchecked-get props "modifier")
-
-        zoom      (d/nilv (unchecked-get props "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/defc shape-outlines-render*
-  {::mf/wrap-props false
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "zoom" "modifiers"]))]}
-   ::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "zoom" "modifiers"]))]}
+  [{:keys [shapes zoom modifiers]}]
-  [props]
+  (for [shape shapes]
-  (let [shapes    (unchecked-get props "shapes")
+    (let [shape-id (dm/get-prop shape :id)
-        zoom      (unchecked-get props "zoom")
+          modifier (get modifiers shape-id)]
-        modifiers (unchecked-get props "modifiers")]
+      [:> outline* {:key (dm/str "outline-" shape-id)
+                    :shape shape
+                    :modifier modifier
+                    :zoom zoom}])))
 
-    (for [shape shapes]
+(mf/defc shape-outlines*
-      (let [shape-id (dm/get-prop shape :id)
+  [{:keys [selected hover highlighted objects edition zoom modifiers]}]
-            modifier (get modifiers shape-id)]
+  (let [selected    (or selected #{})
-        [:& outline {:key (dm/str "outline-" shape-id)
+        hover       (or hover #{})
-                     :shape shape
+        highlighted (or highlighted #{})
-                     :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")
 
         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
+     [:> shape-outlines-render* {:shapes shapes
-                                :zoom zoom
+                                 :zoom zoom
-                                :modifiers modifiers}]]))
+                                 :modifiers modifiers}]]))

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/defc pixel-overlay*
-  {::mf/wrap-props false}
+  [{:keys [vport viewport-ref]}]
-  [props]
+  (let [viewport-node     (mf/ref-val viewport-ref)
-  (let [vport             (unchecked-get props "vport")
-
-        viewport-ref      (unchecked-get props "viewport-ref")
-        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)

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/defc shape-distance*
-  {::mf/wrap-props false}
+  [{:keys [frame selrect page-id zoom coord selected]}]
-  [props]
+  (let [subject    (mf/use-memo #(rx/subject))
-  (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))
 
 
         lt-shapes* (mf/use-state nil)
@@ -279,27 +271,22 @@
         :coord coord
         :zoom zoom}])))
 
-(mf/defc snap-distances
+(mf/defc snap-distances*
-  {::mf/wrap-props false}
+  [{:keys [page-id zoom selected selected-shapes]}]
-  [props]
+  (let [frame-id        (-> selected-shapes first :frame-id)
-  (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)
         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

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