♻️ Migrate viewport debug and workspace shape debug components to modern syntax (#9395)

Co-authored-by: wdeveloper16 <wdeveloer16@protonmail.com>
2026-05-07 09:08:33 +00:00 · 2026-05-07 08:44:09 +02:00 · 2026-05-07 08:44:09 +02:00 · 70e1a16bb8
commit 70e1a16bb8
parent 61b791368a
11 changed files with 92 additions and 136 deletions
--- a/frontend/src/app/main/ui/workspace/shapes/bool.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/bool.cljs
@ -41,5 +41,5 @@
         [:& bool-shape {:shape shape
                         :childs childs}]
         (when *assert*
-           [:& wsd/shape-debug {:shape shape}])]))))
+           [:> wsd/shape-debug* {:shape shape}])]))))

--- a/frontend/src/app/main/ui/workspace/shapes/common.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/common.cljs
@ -25,4 +25,4 @@
      [:> shape-container {:shape shape}
       [:& component {:shape shape}]
       (when *assert*
-         [:& wsd/shape-debug {:shape shape}])])))
+         [:> wsd/shape-debug* {:shape shape}])])))
--- a/frontend/src/app/main/ui/workspace/shapes/debug.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/debug.cljs
@ -23,7 +23,7 @@
   [cuerdas.core :as str]
   [rumext.v2 :as mf]))

-(mf/defc debug-bounding-boxes
+(mf/defc debug-bounding-boxes*
  [{:keys [shape]}]
  (let [points (->> (:points shape)
                    (map #(dm/fmt "%,%" (dm/get-prop % :x) (dm/get-prop % :y)))
@ -47,11 +47,9 @@
                :stroke-width 1
                :stroke color}]]))

-(mf/defc debug-text-bounds
-  {::mf/wrap-props false}
-  [props]
-  (let [shape (unchecked-get props "shape")
-        zoom (mf/deref refs/selected-zoom)
+(mf/defc debug-text-bounds*
+  [{:keys [shape]}]
+  (let [zoom (mf/deref refs/selected-zoom)
        bounding-box (gst/shape->rect shape)
        ctx (js* "document.createElement(\"canvas\").getContext(\"2d\")")]
    [:g {:transform (gsh/transform-str shape)}
@ -91,8 +89,7 @@
                  :style {:stroke "green"
                          :stroke-width (/ 2 zoom)}}]]))]))

-(mf/defc debug-bool-shape
-  {::mf/wrap-props false}
+(mf/defc debug-bool-shape*
  [{:keys [shape]}]

  (let [objects (mf/deref refs/workspace-page-objects)
@ -172,17 +169,17 @@
          (when hp
            [:circle {:data-i i :key (dm/str "c13-" i) :cx (:x hp) :cy (:y hp) :r radius :fill "green"}])]))]))

-(mf/defc shape-debug
+(mf/defc shape-debug*
  [{:keys [shape]}]
  [:*
   (when ^boolean (dbg/enabled? :bounding-boxes)
-     [:& debug-bounding-boxes {:shape shape}])
+     [:> debug-bounding-boxes* {:shape shape}])

   (when (and ^boolean (dbg/enabled? :bool-shapes)
              ^boolean (cfh/bool-shape? shape))
-     [:& debug-bool-shape {:shape shape}])
+     [:> debug-bool-shape* {:shape shape}])

   (when (and ^boolean (dbg/enabled? :text-outline)
              ^boolean (cfh/text-shape? shape)
              ^boolean (seq (:position-data shape)))
-     [:& debug-text-bounds {:shape shape}])])
+     [:> debug-text-bounds* {:shape shape}])])
--- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs
@ -47,7 +47,7 @@
        [:& shape-container {:shape shape :ref ref}
         [:& frame-shape {:shape shape :childs childs}]
         (when *assert*
-           [:& wsd/shape-debug {:shape shape}])]))))
+           [:> wsd/shape-debug* {:shape shape}])]))))

 (defn check-props
  [new-props old-props]
@ -230,5 +230,5 @@
             [:& frame-shape {:shape shape :ref content-ref}]])]

         (when *assert*
-           [:& wsd/shape-debug {:shape shape}])]))))
+           [:> wsd/shape-debug* {:shape shape}])]))))

--- a/frontend/src/app/main/ui/workspace/shapes/group.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/group.cljs
@ -18,11 +18,9 @@
  [shape-wrapper]
  (let [group-shape (group/group-shape shape-wrapper)]
    (mf/fnc group-wrapper
-      {::mf/wrap [#(mf/memo' % check-shape-props)]
-       ::mf/wrap-props false}
-      [props]
-      (let [shape    (unchecked-get props "shape")
-            shape-id (dm/get-prop shape :id)
+      {::mf/wrap [#(mf/memo' % check-shape-props)]}
+      [{:keys [shape]}]
+      (let [shape-id (dm/get-prop shape :id)

            childs*  (mf/with-memo [shape-id]
                       (refs/children-objects shape-id))
@ -33,5 +31,4 @@
          {:shape shape
           :childs childs}]
         (when *assert*
-           [:& wsd/shape-debug {:shape shape}])]))))
-
+           [:> wsd/shape-debug* {:shape shape}])]))))
--- a/frontend/src/app/main/ui/workspace/shapes/path.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/path.cljs
@ -55,4 +55,4 @@
                         :pointer-events (when editing? "none")}
     [:& path/path-shape {:shape shape}]
     (when *assert*
-       [:& wsd/shape-debug {:shape shape}])]))
+       [:> wsd/shape-debug* {:shape shape}])]))
--- a/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs
@ -29,7 +29,7 @@
           [:& svg-raw-shape {:shape shape
                              :childs childs}]
           (when *assert*
-             [:& wsd/shape-debug {:shape shape}])]
+             [:> wsd/shape-debug* {:shape shape}])]

          [:& svg-raw-shape {:shape shape
                             :childs childs}])))))
--- a/frontend/src/app/main/ui/workspace/shapes/text.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs
@ -36,4 +36,4 @@
      [:& text/text-shape {:shape shape}]]

     (when *assert*
-       [:& wsd/shape-debug {:shape shape}])]))
+       [:> wsd/shape-debug* {:shape shape}])]))
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@ -653,34 +653,34 @@

       ;; DEBUG LAYOUT DROP-ZONES
       (when (dbg/enabled? :layout-drop-zones)
-         [:& wvd/debug-drop-zones {:selected-shapes selected-shapes
-                                   :objects base-objects
-                                   :hover-top-frame-id @hover-top-frame-id
-                                   :zoom zoom}])
+         [:> wvd/debug-drop-zones* {:selected-shapes selected-shapes
+                                    :objects base-objects
+                                    :hover-top-frame-id @hover-top-frame-id
+                                    :zoom zoom}])

       (when (dbg/enabled? :layout-content-bounds)
-         [:& wvd/debug-content-bounds {:selected-shapes selected-shapes
-                                       :objects base-objects
-                                       :hover-top-frame-id @hover-top-frame-id
-                                       :zoom zoom}])
+         [:> wvd/debug-content-bounds* {:selected-shapes selected-shapes
+                                        :objects base-objects
+                                        :hover-top-frame-id @hover-top-frame-id
+                                        :zoom zoom}])

       (when (dbg/enabled? :layout-lines)
-         [:& wvd/debug-layout-lines {:selected-shapes selected-shapes
-                                     :objects base-objects
-                                     :hover-top-frame-id @hover-top-frame-id
-                                     :zoom zoom}])
-
-       (when (dbg/enabled? :parent-bounds)
-         [:& wvd/debug-parent-bounds {:selected-shapes selected-shapes
+         [:> wvd/debug-layout-lines* {:selected-shapes selected-shapes
                                      :objects base-objects
                                      :hover-top-frame-id @hover-top-frame-id
                                      :zoom zoom}])

+       (when (dbg/enabled? :parent-bounds)
+         [:> wvd/debug-parent-bounds* {:selected-shapes selected-shapes
+                                       :objects base-objects
+                                       :hover-top-frame-id @hover-top-frame-id
+                                       :zoom zoom}])
+
       (when (dbg/enabled? :grid-layout)
-         [:& wvd/debug-grid-layout {:selected-shapes selected-shapes
-                                    :objects base-objects
-                                    :hover-top-frame-id @hover-top-frame-id
-                                    :zoom zoom}])
+         [:> wvd/debug-grid-layout* {:selected-shapes selected-shapes
+                                     :objects base-objects
+                                     :hover-top-frame-id @hover-top-frame-id
+                                     :zoom zoom}])

       (when show-selection-handlers?
         [:g.selection-handlers {:clipPath "url(#clip-handlers)"}
--- a/frontend/src/app/main/ui/workspace/viewport/debug.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/debug.cljs
@ -21,17 +21,11 @@
   [rumext.v2 :as mf]))

 ;; Helper to debug the bounds when set the "hug" content property
-(mf/defc debug-content-bounds
+(mf/defc debug-content-bounds*
  "Debug component to show the auto-layout drop areas"
-  {::mf/wrap-props false}
-  [props]
+  [{:keys [objects zoom selected-shapes hover-top-frame-id]}]

-  (let [objects            (unchecked-get props "objects")
-        zoom               (unchecked-get props "zoom")
-        selected-shapes    (unchecked-get props "selected-shapes")
-        hover-top-frame-id (unchecked-get props "hover-top-frame-id")
-
-        selected-frame
+  (let [selected-frame
        (when (and (= (count selected-shapes) 1) (= :frame (-> selected-shapes first :type)))
          (first selected-shapes))

@ -72,17 +66,11 @@
                      :r (/ 4 zoom)
                      :style {:fill "red"}}])]]))))

-(mf/defc debug-layout-lines
+(mf/defc debug-layout-lines*
  "Debug component to show the auto-layout drop areas"
-  {::mf/wrap-props false}
-  [props]
+  [{:keys [objects zoom selected-shapes hover-top-frame-id]}]

-  (let [objects            (unchecked-get props "objects")
-        zoom               (unchecked-get props "zoom")
-        selected-shapes    (unchecked-get props "selected-shapes")
-        hover-top-frame-id (unchecked-get props "hover-top-frame-id")
-
-        selected-frame
+  (let [selected-frame
        (when (and (= (count selected-shapes) 1) (= :frame (-> selected-shapes first :type)))
          (first selected-shapes))

@ -117,18 +105,12 @@
              [:polygon {:points (->> points (map #(dm/fmt "%, %" (:x %) (:y %))) (str/join " "))
                         :style {:stroke "red" :stroke-width (/ 2 zoom) :stroke-dasharray (dm/str (/ 10 zoom) " " (/ 5 zoom))}}]]))]))))

-(mf/defc debug-drop-zones
+(mf/defc debug-drop-zones*
  "Debug component to show the auto-layout drop areas"
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["objects" "selected-shapes" "hover-top-frame-id"]))]
-   ::mf/wrap-props false}
-  [props]
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["objects" "selected-shapes" "hover-top-frame-id"]))]}
+  [{:keys [objects zoom selected-shapes hover-top-frame-id]}]

-  (let [objects            (unchecked-get props "objects")
-        zoom               (unchecked-get props "objects")
-        selected-shapes    (unchecked-get props "selected-shapes")
-        hover-top-frame-id (unchecked-get props "hover-top-frame-id")
-
-        selected-frame
+  (let [selected-frame
        (when (and (= (count selected-shapes) 1) (= :frame (-> selected-shapes first :type)))
          (first selected-shapes))

@ -159,15 +141,11 @@
                    :fill "black"}
             (:index drop-area)]])]))))

-(mf/defc shape-parent-bound
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "parent"]))]
-   ::mf/wrap-props false}
-  [props]
+(mf/defc shape-parent-bound*
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "parent"]))]}
+  [{:keys [shape parent zoom]}]

-  (let [shape (unchecked-get props "shape")
-        parent (unchecked-get props "parent")
-        zoom (unchecked-get props "zoom")
-        [i1 i2 i3 i4] (gpo/parent-coords-bounds (:points shape) (:points parent))]
+  (let [[i1 i2 i3 i4] (gpo/parent-coords-bounds (:points shape) (:points parent))]
    [:*
     [:polygon {:points (->> [i1 i2 i3 i4] (map #(dm/fmt "%,%" (:x %) (:y %))) (str/join ","))
                :style {:fill "none" :stroke "red" :stroke-width (/ 1 zoom)}}]
@ -183,16 +161,10 @@
             :y2 (:y i4)
             :style {:stroke "blue" :stroke-width (/ 1 zoom)}}]]))

-(mf/defc debug-parent-bounds
-  {::mf/wrap-props false}
-  [props]
+(mf/defc debug-parent-bounds*
+  [{:keys [objects zoom selected-shapes hover-top-frame-id]}]

-  (let [objects            (unchecked-get props "objects")
-        zoom               (unchecked-get props "zoom")
-        selected-shapes    (unchecked-get props "selected-shapes")
-        hover-top-frame-id (unchecked-get props "hover-top-frame-id")
-
-        selected-frame
+  (let [selected-frame
        (when (and (= (count selected-shapes) 1) (= :frame (-> selected-shapes first :type)))
          (first selected-shapes))

@ -207,10 +179,10 @@
        [:g.debug-parent-bounds {:pointer-events "none"}
         (for [[idx child] (d/enumerate children)]
           [:*
-            [:> shape-parent-bound {:key (dm/str "bound-" idx)
-                                    :zoom zoom
-                                    :shape child
-                                    :parent parent}]
+            [:> shape-parent-bound* {:key (dm/str "bound-" idx)
+                                     :zoom zoom
+                                     :shape child
+                                     :parent parent}]

            (let [child-bounds (:points child)
                  points
@ -223,16 +195,10 @@
                          :r (/ 2 zoom)
                          :style {:fill "red"}}]))])]))))

-(mf/defc debug-grid-layout
-  {::mf/wrap-props false}
-  [props]
+(mf/defc debug-grid-layout*
+  [{:keys [objects zoom selected-shapes hover-top-frame-id]}]

-  (let [objects            (unchecked-get props "objects")
-        zoom               (unchecked-get props "zoom")
-        selected-shapes    (unchecked-get props "selected-shapes")
-        hover-top-frame-id (unchecked-get props "hover-top-frame-id")
-
-        selected-frame
+  (let [selected-frame
        (when (and (= (count selected-shapes) 1) (= :frame (-> selected-shapes first :type)))
          (first selected-shapes))

@ -277,13 +243,9 @@
                     :style {:stroke "red"
                             :stroke-width (/ 1 zoom)}}]))]))))

-(mf/defc debug-text-wasm-position-data
-  {::mf/wrap-props false}
-  [props]
-  (let [zoom               (unchecked-get props "zoom")
-        selected-shapes    (unchecked-get props "selected-shapes")
-
-        selected-text
+(mf/defc debug-text-wasm-position-data*
+  [{:keys [zoom selected-shapes]}]
+  (let [selected-text
        (when (and (= (count selected-shapes) 1) (= :text (-> selected-shapes first :type)))
          (first selected-shapes))

--- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs
@ -782,37 +782,37 @@

       ;; DEBUG LAYOUT DROP-ZONES
       (when (dbg/enabled? :layout-drop-zones)
-         [:& wvd/debug-drop-zones {:selected-shapes selected-shapes
-                                   :objects base-objects
-                                   :hover-top-frame-id @hover-top-frame-id
-                                   :zoom zoom}])
-
-       (when (dbg/enabled? :layout-content-bounds)
-         [:& wvd/debug-content-bounds {:selected-shapes selected-shapes
-                                       :objects base-objects
-                                       :hover-top-frame-id @hover-top-frame-id
-                                       :zoom zoom}])
-
-       (when (dbg/enabled? :layout-lines)
-         [:& wvd/debug-layout-lines {:selected-shapes selected-shapes
-                                     :objects base-objects
-                                     :hover-top-frame-id @hover-top-frame-id
-                                     :zoom zoom}])
-
-       (when (dbg/enabled? :parent-bounds)
-         [:& wvd/debug-parent-bounds {:selected-shapes selected-shapes
-                                      :objects base-objects
-                                      :hover-top-frame-id @hover-top-frame-id
-                                      :zoom zoom}])
-
-       (when (dbg/enabled? :grid-layout)
-         [:& wvd/debug-grid-layout {:selected-shapes selected-shapes
+         [:> wvd/debug-drop-zones* {:selected-shapes selected-shapes
                                    :objects base-objects
                                    :hover-top-frame-id @hover-top-frame-id
                                    :zoom zoom}])

+       (when (dbg/enabled? :layout-content-bounds)
+         [:> wvd/debug-content-bounds* {:selected-shapes selected-shapes
+                                        :objects base-objects
+                                        :hover-top-frame-id @hover-top-frame-id
+                                        :zoom zoom}])
+
+       (when (dbg/enabled? :layout-lines)
+         [:> wvd/debug-layout-lines* {:selected-shapes selected-shapes
+                                      :objects base-objects
+                                      :hover-top-frame-id @hover-top-frame-id
+                                      :zoom zoom}])
+
+       (when (dbg/enabled? :parent-bounds)
+         [:> wvd/debug-parent-bounds* {:selected-shapes selected-shapes
+                                       :objects base-objects
+                                       :hover-top-frame-id @hover-top-frame-id
+                                       :zoom zoom}])
+
+       (when (dbg/enabled? :grid-layout)
+         [:> wvd/debug-grid-layout* {:selected-shapes selected-shapes
+                                     :objects base-objects
+                                     :hover-top-frame-id @hover-top-frame-id
+                                     :zoom zoom}])
+
       (when (dbg/enabled? :text-outline)
-         [:& wvd/debug-text-wasm-position-data
+         [:> wvd/debug-text-wasm-position-data*
          {:selected-shapes selected-shapes
           :objects base-objects
           :zoom zoom}])