From 85d56e6057f312a0c72452f4588a6ebdac358620 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 20 Jan 2023 12:22:44 +0100 Subject: [PATCH] :sparkles: Add debug tool to display name and id for shapes --- .../shapes/frame/dynamic_modifiers.cljs | 15 ++++++++-- .../app/main/ui/workspace/viewport/hooks.cljs | 10 ++++++- .../app/main/ui/workspace/viewport/utils.cljs | 8 ++--- .../main/ui/workspace/viewport/widgets.cljs | 29 ++++++++++++------- frontend/src/debug.cljs | 6 ++++ 5 files changed, 49 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs index 2c849e422..1863e9cd3 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs +++ b/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] diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index 6df2d16c9..261ee5493 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/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))))))) diff --git a/frontend/src/app/main/ui/workspace/viewport/utils.cljs b/frontend/src/app/main/ui/workspace/viewport/utils.cljs index 59c411b4a..549489e4c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/utils.cljs +++ b/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)))) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index d95835fd5..6b1f42e87 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/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}]))])) diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index e78a24dc8..4e45f7ae5 100644 --- a/frontend/src/debug.cljs +++ b/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