Merge pull request #2815 from penpot/alotor-debug-names

✨ Add debug tool to display name and id for shapes

frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs

@@ -18,6 +18,7 @@
    [app.main.ui.workspace.viewport.utils :as vwu]
    [app.util.dom :as dom]
    [app.util.globals :as globals]
+   [debug :refer [debug?]]
    [rumext.v2 :as mf]))
 
 (defn get-shape-node
@@ -52,19 +53,27 @@
         masking-child?
         [shape-node
          (dom/query parent-node ".mask-clip-path")
-         (dom/query parent-node ".mask-shape")]
+         (dom/query parent-node ".mask-shape")
+         (when (debug? :shape-titles)
+           (dom/query (dm/str "#frame-title-" id)))]
 
         group?
         (let [shape-defs (dom/query shape-node "defs")]
           (d/concat-vec
+           [(when (debug? :shape-titles)
+              (dom/query (dm/str "#frame-title-" id)))]
            (dom/query-all shape-defs ".svg-def")
            (dom/query-all shape-defs ".svg-mask-wrapper")))
 
         text?
-        [shape-node]
+        [shape-node
+         (when (debug? :shape-titles)
+           (dom/query (dm/str "#frame-title-" id)))]
 
         :else
-        [shape-node]))))
+        [shape-node
+         (when (debug? :shape-titles)
+           (dom/query (dm/str "#frame-title-" id)))]))))
 
 (defn transform-region!
   [node modifiers]

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

@@ -311,7 +311,15 @@
 
              ;; Debug only: Disable the thumbnails
              new-active-frames
-             (if (debug? :disable-frame-thumbnails) (into #{} all-frames) new-active-frames)]
+             (cond
+               (debug? :disable-frame-thumbnails)
+               (into #{} all-frames)
+
+               (debug? :force-frame-thumbnails)
+               #{}
+
+               :else
+               new-active-frames)]
 
          (when (not= @active-frames new-active-frames)
            (reset! active-frames new-active-frames)))))))

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

@@ -42,7 +42,7 @@
   (let [inv-zoom (/ 1 zoom)]
     (dm/fmt "scale(%, %) translate(%, %)" inv-zoom inv-zoom (* zoom x) (* zoom y))))
 
-(defn title-transform [frame zoom]
-  (let [frame-transform (gsh/transform-str frame {:no-flip true})
-        label-pos (gpt/point (:x frame) (- (:y frame) (/ 10 zoom)))]
-    (dm/str frame-transform " " (text-transform label-pos zoom))))
+(defn title-transform [{:keys [selrect] :as shape} zoom]
+  (let [transform (gsh/transform-str shape {:no-flip true})
+        label-pos (gpt/point (:x selrect) (- (:y selrect) (/ 10 zoom)))]
+    (dm/str transform " " (text-transform label-pos zoom))))

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

@@ -90,7 +90,7 @@
 (mf/defc frame-title
   {::mf/wrap [mf/memo
               #(mf/deferred % ts/raf)]}
-  [{:keys [frame selected? zoom show-artboard-names? on-frame-enter on-frame-leave on-frame-select]}]
+  [{:keys [frame selected? zoom show-artboard-names? show-id? on-frame-enter on-frame-leave on-frame-select]}]
   (let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
         on-mouse-down
         (mf/use-callback
@@ -148,7 +148,6 @@
                :width (:width frame)
                :height 20
                :class "workspace-frame-label"
-               ;:transform (dm/str frame-transform " " (text-transform label-pos zoom))
                :style {:fill (when selected? "var(--color-primary-dark)")}
                :visibility (if show-artboard-names? "visible" "hidden")
                :on-mouse-down on-mouse-down
@@ -156,7 +155,9 @@
                :on-context-menu on-context-menu
                :on-pointer-enter on-pointer-enter
                :on-pointer-leave on-pointer-leave}
-        (:name frame)]])))
+        (if show-id?
+          (dm/str (dm/str (:id frame)) " - " (:name frame))
+          (:name frame))]])))
 
 (mf/defc frame-titles
   {::mf/wrap-props false
@@ -169,20 +170,26 @@
         on-frame-enter       (unchecked-get props "on-frame-enter")
         on-frame-leave       (unchecked-get props "on-frame-leave")
         on-frame-select      (unchecked-get props "on-frame-select")
-        frames               (ctt/get-frames objects)
+        shapes               (ctt/get-frames objects)
+        shapes               (if (debug? :shape-titles)
+                               (into (set shapes)
+                                     (map (d/getf objects))
+                                     selected)
+                               shapes)
         focus                (unchecked-get props "focus")]
 
     [:g.frame-titles
-     (for [frame frames]
+     (for [{:keys [id parent-id] :as shape} shapes]
        (when (and
-              (= (:parent-id frame) uuid/zero)
-              (or (empty? focus)
-                  (contains? focus (:id frame))))
-         [:& frame-title {:key (dm/str "frame-title-" (:id frame))
-                          :frame frame
-                          :selected? (contains? selected (:id frame))
+              (not= id uuid/zero)
+              (or (debug? :shape-titles) (= parent-id uuid/zero))
+              (or (empty? focus) (contains? focus id)))
+         [:& frame-title {:key (dm/str "frame-title-" id)
+                          :frame shape
+                          :selected? (contains? selected id)
                           :zoom zoom
                           :show-artboard-names? show-artboard-names?
+                          :show-id? (debug? :shape-titles)
                           :on-frame-enter on-frame-enter
                           :on-frame-leave on-frame-leave
                           :on-frame-select on-frame-select}]))]))

frontend/src/debug.cljs

@@ -69,6 +69,9 @@
     ;; Disable frame thumbnails
     :disable-frame-thumbnails
 
+    ;; Force thumbnails always (independent of selection or zoom level)
+    :force-frame-thumbnails
+
     ;; Enable a widget to show the auto-layout drop-zones
     :layout-drop-zones
 
@@ -89,6 +92,9 @@
 
     ;; Show history overlay
     :history-overlay
+
+    ;; Show shape name and id
+    :shape-titles
     })
 
 ;; These events are excluded when we activate the :events flag