✨ Add internal improvements to debug related namespaces

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

@@ -16,8 +16,8 @@
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.custom-stroke :refer [shape-fills shape-strokes]]
    [app.main.ui.shapes.grid-layout-viewer :refer [grid-layout-viewer]]
+   [app.util.debug :as dbg]
    [app.util.object :as obj]
-   [debug :refer [debug?]]
    [rumext.v2 :as mf]))
 
 (defn- frame-clip-id
@@ -120,7 +120,7 @@
 
         thumb    (:thumbnail shape)
 
-        debug?   (debug? :thumbnails)
+        debug?   (dbg/enabled? :thumbnails)
         safari?  (cf/check-browser? :safari)
 
         ;; FIXME: ensure bounds is always a rect instance and

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

@@ -34,11 +34,11 @@
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
    [app.main.ui.workspace.textpalette :refer [textpalette]]
    [app.main.ui.workspace.viewport :refer [viewport]]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.globals :as globals]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.router :as rt]
-   [debug :refer [debug?]]
    [goog.events :as events]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
@@ -95,10 +95,10 @@
        :ref node-ref}
 
       [:section.workspace-viewport
-       (when (debug? :coordinates)
+       (when (dbg/enabled? :coordinates)
          [:& coordinates/coordinates {:colorpalette? colorpalette?}])
 
-       (when (debug? :history-overlay)
+       (when (dbg/enabled? :history-overlay)
          [:div.history-debug-overlay
           [:button {:on-click #(st/emit! dw/reinitialize-undo)} "CLEAR"]
           [:& history-toolbox]])

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

@@ -19,7 +19,7 @@
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.workspace.shapes.common :refer [check-shape-props]]
    [app.main.ui.workspace.shapes.frame.dynamic-modifiers :as fdm]
-   [debug :refer [debug?]]
+   [app.util.debug :as dbg]
    [rumext.v2 :as mf]))
 
 (defn frame-shape-factory
@@ -112,7 +112,7 @@
                                  (refs/workspace-modifiers-by-frame-id frame-id))
             modifiers          (mf/deref modifiers-ref)
 
-            debug?             (debug? :thumbnails)]
+            debug?             (dbg/enabled? :thumbnails)]
 
         (when-not (some? thumbnail-uri)
           (st/emit! (dwt/update-thumbnail frame-id)))

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

@@ -17,9 +17,9 @@
    [app.main.store :as st]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.workspace.viewport.utils :as vwu]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.timers :as ts]
-   [debug :refer [debug?]]
    [rumext.v2 :as mf]))
 
 (defn get-shape-node
@@ -55,25 +55,25 @@
         [shape-node
          (dom/query parent-node ".mask-clip-path")
          (dom/query parent-node ".mask-shape")
-         (when (debug? :shape-titles)
+         (when (dbg/enabled? :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)
+           [(when (dbg/enabled? :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
-         (when (debug? :shape-titles)
+         (when (dbg/enabled? :shape-titles)
            (dom/query (dm/str "#frame-title-" id)))]
 
         :else
         [shape-node
-         (when (debug? :shape-titles)
+         (when (dbg/enabled? :shape-titles)
            (dom/query (dm/str "#frame-title-" id)))]))))
 
 (defn transform-region!

frontend/src/app/main/ui/workspace/shapes/text.cljs

@@ -15,8 +15,8 @@
    [app.main.refs :as refs]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.shapes.text :as text]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
-   [debug :refer [debug?]]
    [rumext.v2 :as mf]))
 
 (mf/defc debug-text-bounds
@@ -84,6 +84,6 @@
      [:g.text-shape {:key (dm/str shape-id)}
       [:& text/text-shape {:shape shape}]]
 
-     (when (and ^boolean (debug? :text-outline)
+     (when (and ^boolean (dbg/enabled? :text-outline)
                 ^boolean (seq (:position-data shape)))
        [:& debug-text-bounds {:shape shape}])]))

frontend/src/app/main/ui/workspace/sidebar/debug.cljs

@@ -10,42 +10,40 @@
    [app.main.data.workspace :as dw]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
-   [debug :as dbg]
    [rumext.v2 :as mf]))
 
 (mf/defc debug-panel
   []
   (let [on-toggle-enabled
-        (mf/use-callback
+        (mf/use-fn
          (fn [event option]
            (dom/prevent-default event)
            (dom/stop-propagation event)
-           (if (contains? @dbg/*debug* option)
+           (dbg/toggle! option)
-             (dbg/-debug! option)
+           (js* "app.main.reinit()")))
-             (dbg/debug! option))))
 
-        close-fn
+        on-close
-        (mf/use-callback
+        (mf/use-fn
          (fn []
            (st/emit! (dw/remove-layout-flag :debug-panel))))]
     [:div.debug-panel
      [:div.debug-panel-header
       [:div.debug-panel-close-button
-       {:on-click close-fn} i/close]
+       {:on-click on-close} i/close]
       [:div.debug-panel-title "Debugging tools"]]
-     
+
      [:div.debug-panel-inner
-      [:*
+      (for [option (sort-by d/name dbg/options)]
-       (for [option (sort-by d/name dbg/debug-options)]
+        [:div.debug-option {:key (d/name option)
-         [:div.debug-option {:key (d/name option)
+                            :on-click #(on-toggle-enabled % option)}
-                             :on-click #(on-toggle-enabled % option)}
+         [:input {:type "checkbox"
-          [:input {:type "checkbox"
+                  :id (d/name option)
-                   :id (d/name option)
+                  :on-change #(on-toggle-enabled % option)
-                   :on-change #(on-toggle-enabled % option)
+                  :checked (dbg/enabled? option)}]
-                   :checked (contains? @dbg/*debug* option)}]
+         [:div.field.check
-          [:div.field.check 
+          (if (dbg/enabled? option)
-           (if (contains? @dbg/*debug* option)
+            [:span.checked i/checkbox-checked]
-             [:span.checked i/checkbox-checked]
+            [:span.unchecked i/checkbox-unchecked])]
-             [:span.unchecked i/checkbox-unchecked])]
+         [:label {:for (d/name option)} (d/name option)]])]]))
-          [:label {:for (d/name option)} (d/name option)]])]]]))

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

@@ -45,8 +45,8 @@
    [app.main.ui.workspace.viewport.utils :as utils]
    [app.main.ui.workspace.viewport.viewport-ref :refer [create-viewport-ref]]
    [app.main.ui.workspace.viewport.widgets :as widgets]
+   [app.util.debug :as dbg]
    [beicon.core :as rx]
-   [debug :refer [debug?]]
    [rumext.v2 :as mf]))
 
 ;; --- Viewport
@@ -272,9 +272,9 @@
      [:div.viewport-overlays
       ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
       ;; inside a foreign object "dummy" so this awkward behaviour is take into account
-      [:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity (when-not (debug? :html-text) 0)}}
+      [:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity (when-not (dbg/enabled? :html-text) 0)}}
        [:foreignObject {:x 0 :y 0 :width "100%" :height "100%"}
-        [:div {:style {:pointer-events (when-not (debug? :html-text) "none")
+        [:div {:style {:pointer-events (when-not (dbg/enabled? :html-text) "none")
                        ;; some opacity because to debug auto-width events will fill the screen
                        :opacity 0.6}}
          [:& stvh/viewport-texts
@@ -315,7 +315,7 @@
                :pointer-events "none"}
        :fill "none"}
 
-      (when (debug? :show-export-metadata)
+      (when (dbg/enabled? :show-export-metadata)
         [:& use/export-page {:options options}])
 
       ;; We need a "real" background shape so layer transforms work properly in firefox
@@ -326,7 +326,7 @@
               :fill background}]
 
       [:& (mf/provider ctx/current-vbox) {:value vbox'}
-       [:& (mf/provider use/include-metadata-ctx) {:value (debug? :show-export-metadata)}
+       [:& (mf/provider use/include-metadata-ctx) {:value (dbg/enabled? :show-export-metadata)}
         [:& (mf/provider embed/context) {:value true}
          ;; Render root shape
          [:& shapes/root-shape {:key page-id
@@ -542,31 +542,31 @@
            :modifiers modifiers}])
 
        ;; DEBUG LAYOUT DROP-ZONES
-       (when (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 (debug? :layout-content-bounds)
+       (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 (debug? :layout-lines)
+       (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 (debug? :parent-bounds)
+       (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 (debug? :grid-layout)
+       (when (dbg/enabled? :grid-layout)
          [:& wvd/debug-grid-layout {:selected-shapes selected-shapes
                                     :objects base-objects
                                     :hover-top-frame-id @hover-top-frame-id

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

@@ -27,10 +27,10 @@
    [app.main.ui.workspace.viewport.actions :as actions]
    [app.main.ui.workspace.viewport.utils :as utils]
    [app.main.worker :as uw]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.globals :as globals]
    [beicon.core :as rx]
-   [debug :refer [debug?]]
    [goog.events :as events]
    [rumext.v2 :as mf])
   (:import goog.events.EventType))
@@ -343,10 +343,10 @@
              ;; Debug only: Disable the thumbnails
              new-active-frames
              (cond
-               (debug? :disable-frame-thumbnails)
+               (dbg/enabled? :disable-frame-thumbnails)
                (into #{} all-frames)
 
-               (debug? :force-frame-thumbnails)
+               (dbg/enabled? :force-frame-thumbnails)
                #{}
 
                :else

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

@@ -19,9 +19,9 @@
    [app.main.ui.context :as ctx]
    [app.main.ui.css-cursors :as cur]
    [app.main.ui.workspace.shapes.path.editor :refer [path-editor]]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.object :as obj]
-   [debug :refer [debug?]]
    [rumext.v2 :as mf]
    [rumext.v2.util :refer [map->obj]]))
 
@@ -170,7 +170,7 @@
             :class (cur/get-dynamic "rotate" (+ rotation angle))
             :width size
             :height size
-            :fill (if (debug? :handlers) "blue" "none")
+            :fill (if (dbg/enabled? :handlers) "blue" "none")
             :stroke-width 0
             :transform (dm/str transform)
             :on-pointer-down on-rotate}]))
@@ -207,7 +207,7 @@
                  :width resize-point-circle-radius
                  :height resize-point-circle-radius
                  :transform (when rotation (dm/fmt "rotate(%, %, %)" rotation cx' cy'))
-                 :style {:fill (if (debug? :handlers) "red" "none")
+                 :style {:fill (if (dbg/enabled? :handlers) "red" "none")
                          :stroke-width 0}
                  :on-pointer-down #(on-resize {:x cx' :y cy'} %)}])
 
@@ -216,7 +216,7 @@
                  :cx cx'
                  :cy cy'
                  :class cursor
-                 :style {:fill (if (debug? :handlers) "red" "none")
+                 :style {:fill (if (dbg/enabled? :handlers) "red" "none")
                          :stroke-width 0}}])]))
 
 (mf/defc resize-side-handler
@@ -251,7 +251,7 @@
                       (if scale-text (cur/get-dynamic "scale-ns" rotation) (cur/get-dynamic "resize-ns" rotation)))
              :transform transform-str
              :on-pointer-down #(on-resize res-point %)
-             :style {:fill (if (debug? :handlers) "yellow" "none")
+             :style {:fill (if (dbg/enabled? :handlers) "yellow" "none")
                      :stroke-width 0}}]]))
 
 (defn minimum-selrect [{:keys [x y width height] :as selrect}]

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

@@ -26,10 +26,10 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
    [app.main.ui.workspace.viewport.utils :as vwu]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.timers :as ts]
-   [debug :refer [debug?]]
    [rumext.v2 :as mf]))
 
 (mf/defc pixel-grid
@@ -43,8 +43,8 @@
                :pattern-units "userSpaceOnUse"}
      [:path {:d "M 1 0 L 0 0 0 1"
              :style {:fill "none"
-                     :stroke (if (debug? :pixel-grid) "red" "var(--color-info)")
+                     :stroke (if (dbg/enabled? :pixel-grid) "red" "var(--color-info)")
-                     :stroke-opacity (if (debug? :pixel-grid) 1 "0.2")
+                     :stroke-opacity (if (dbg/enabled? :pixel-grid) 1 "0.2")
                      :stroke-width (str (/ 1 zoom))}}]]]
    [:rect {:x (:x vbox)
            :y (:y vbox)
@@ -225,7 +225,7 @@
         on-frame-select      (unchecked-get props "on-frame-select")
         components-v2        (mf/use-ctx ctx/components-v2)
         shapes               (ctt/get-frames objects {:skip-copies? components-v2})
-        shapes               (if (debug? :shape-titles)
+        shapes               (if (dbg/enabled? :shape-titles)
                                (into (set shapes)
                                      (map (d/getf objects))
                                      selected)
@@ -239,14 +239,14 @@
      (for [{:keys [id parent-id] :as shape} shapes]
        (when (and
               (not= id uuid/zero)
-              (or (debug? :shape-titles) (= parent-id uuid/zero))
+              (or (dbg/enabled? :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)
+                          :show-id? (dbg/enabled? :shape-titles)
                           :on-frame-enter on-frame-enter
                           :on-frame-leave on-frame-leave
                           :on-frame-select on-frame-select

frontend/src/app/util/debug.cljs

@@ -0,0 +1,100 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.util.debug)
+
+(defonce state (atom #{#_:events}))
+
+(def options
+  #{;; Displays the bounding box for the shapes
+    :bounding-boxes
+
+    ;; Displays an overlay over the groups
+    :group
+
+    ;; Displays in the console log the events through the application
+    :events
+
+    ;; Display the boxes that represent the rotation and resize handlers
+    :handlers
+
+    ;; Displays the center of a selection
+    :selection-center
+
+    ;; When active the single selection will not take into account previous transformations
+    ;; this is useful to debug transforms
+    :simple-selection
+
+    ;; When active the thumbnails will be displayed with a sepia filter
+    :thumbnails
+
+    ;; When active we can check in the browser the export values
+    :show-export-metadata
+
+    ;; Show text fragments outlines
+    :text-outline
+
+    ;; Disable thumbnail cache
+    :disable-thumbnail-cache
+
+    ;; 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
+
+    ;; Display the layout lines
+    :layout-lines
+
+    ;; Display the bounds for the hug content adjust
+    :layout-content-bounds
+
+    ;; Makes the pixel grid red so its more visibile
+    :pixel-grid
+
+    ;; Show the bounds relative to the parent
+    :parent-bounds
+
+    ;; Show html text
+    :html-text
+
+    ;; Show history overlay
+    :history-overlay
+
+    ;; Show shape name and id
+    :shape-titles
+
+    ;;
+    :grid-layout
+    })
+
+(defn enable!
+  [option]
+  (swap! state conj option))
+
+(defn disable!
+  [option]
+  (swap! state disj option))
+
+(defn enabled?
+  ^boolean
+  [option]
+  (contains? @state option))
+
+(defn toggle!
+  [option]
+  (if (enabled? option)
+    (disable! option)
+    (enable! option)))
+
+
+
+
+
+

frontend/src/debug.cljs

@@ -26,6 +26,7 @@
    [app.main.features :as features]
    [app.main.repo :as rp]
    [app.main.store :as st]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.http :as http]
    [app.util.object :as obj]
@@ -44,72 +45,6 @@
   ([ns level]
    (l/set-level! (keyword ns) (keyword level))))
 
-(def debug-options
-  #{;; Displays the bounding box for the shapes
-    :bounding-boxes
-
-    ;; Displays an overlay over the groups
-    :group
-
-    ;; Displays in the console log the events through the application
-    :events
-
-    ;; Display the boxes that represent the rotation and resize handlers
-    :handlers
-
-    ;; Displays the center of a selection
-    :selection-center
-
-    ;; When active the single selection will not take into account previous transformations
-    ;; this is useful to debug transforms
-    :simple-selection
-
-    ;; When active the thumbnails will be displayed with a sepia filter
-    :thumbnails
-
-    ;; When active we can check in the browser the export values
-    :show-export-metadata
-
-    ;; Show text fragments outlines
-    :text-outline
-
-    ;; Disable thumbnail cache
-    :disable-thumbnail-cache
-
-    ;; 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
-
-    ;; Display the layout lines
-    :layout-lines
-
-    ;; Display the bounds for the hug content adjust
-    :layout-content-bounds
-
-    ;; Makes the pixel grid red so its more visibile
-    :pixel-grid
-
-    ;; Show the bounds relative to the parent
-    :parent-bounds
-
-    ;; Show html text
-    :html-text
-
-    ;; Show history overlay
-    :history-overlay
-
-    ;; Show shape name and id
-    :shape-titles
-
-    ;;
-    :grid-layout
-    })
-
 ;; These events are excluded when we activate the :events flag
 (def debug-exclude-events
   #{:app.main.data.workspace.notifications/handle-pointer-update
@@ -119,39 +54,36 @@
     :app.main.data.websocket/send-message
     :app.main.data.workspace.selection/change-hover-state})
 
-(defonce ^:dynamic *debug* (atom #{#_:events}))
+(defn- enable!
-
+  [option]
-(defn debug-all! []
+  (dbg/enable! option)
-  (reset! *debug* debug-options)
-  (js* "app.main.reinit()"))
-
-(defn debug-none! []
-  (reset! *debug* #{})
-  (js* "app.main.reinit()"))
-
-(defn debug! [option]
-  (swap! *debug* conj option)
   (when (= :events option)
     (set! st/*debug-events* true))
-
   (js* "app.main.reinit()"))
 
-(defn -debug! [option]
+(defn- disable!
-  (swap! *debug* disj option)
+  [option]
+  (dbg/disable! option)
   (when (= :events option)
     (set! st/*debug-events* false))
   (js* "app.main.reinit()"))
 
-(defn ^:export ^boolean debug?
+(defn ^:export toggle-debug
-  [option]
+  [name]
-  (boolean (@*debug* option)))
+  (let [option (keyword name)]
+    (if (dbg/enabled? option)
+      (disable! option)
+      (enable! option))))
 
-(defn ^:export toggle-debug [name] (let [option (keyword name)]
+(defn ^:export debug-all
-                                     (if (debug? option)
+  []
-                                       (-debug! option)
+  (reset! dbg/state dbg/options)
-                                       (debug! option))))
+  (js* "app.main.reinit()"))
-(defn ^:export debug-all [] (debug-all!))
+
-(defn ^:export debug-none [] (debug-none!))
+(defn ^:export debug-none
+  []
+  (reset! dbg/state #{})
+  (js* "app.main.reinit()"))
 
 (defn ^:export tap
   "Transducer function that can execute a side-effect `effect-fn` per input"
@@ -344,7 +276,7 @@
   (defonce debug-subscription
     (->> st/stream
          (rx/filter ptk/event?)
-         (rx/filter (fn [s] (and (debug? :events)
+         (rx/filter (fn [s] (and (dbg/enabled? :events)
                                  (not (debug-exclude-events (ptk/type s))))))
          (rx/subs #(println "[stream]: " (ptk/repr-event %))))))