diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 77a223bc4..ae7fddc77 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 730062873..0d1eef4a2 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/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]]) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index e02088953..974f4eb23 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/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))) 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 d13d7259a..c67e955fa 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 @@ -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! diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index 511912a19..eb9b5e68a 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/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}])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs index 82c099f84..5d7932a89 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs +++ b/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/-debug! option) - (dbg/debug! option)))) + (dbg/toggle! option) + (js* "app.main.reinit()"))) - close-fn - (mf/use-callback + on-close + (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/debug-options)] - [:div.debug-option {:key (d/name option) - :on-click #(on-toggle-enabled % option)} - [:input {:type "checkbox" - :id (d/name option) - :on-change #(on-toggle-enabled % option) - :checked (contains? @dbg/*debug* option)}] - [:div.field.check - (if (contains? @dbg/*debug* option) - [:span.checked i/checkbox-checked] - [:span.unchecked i/checkbox-unchecked])] - [:label {:for (d/name option)} (d/name option)]])]]])) + (for [option (sort-by d/name dbg/options)] + [:div.debug-option {:key (d/name option) + :on-click #(on-toggle-enabled % option)} + [:input {:type "checkbox" + :id (d/name option) + :on-change #(on-toggle-enabled % option) + :checked (dbg/enabled? option)}] + [:div.field.check + (if (dbg/enabled? option) + [:span.checked i/checkbox-checked] + [:span.unchecked i/checkbox-unchecked])] + [:label {:for (d/name option)} (d/name option)]])]])) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index cb5bf6233..5817a196d 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index ffc9a3fd9..9a6f0862a 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index 4ee872a59..65437ed8d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/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}] diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index bb6fb4a7c..065984894 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/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-opacity (if (debug? :pixel-grid) 1 "0.2") + :stroke (if (dbg/enabled? :pixel-grid) "red" "var(--color-info)") + :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 diff --git a/frontend/src/app/util/debug.cljs b/frontend/src/app/util/debug.cljs new file mode 100644 index 000000000..4c6eb35bc --- /dev/null +++ b/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))) + + + + + + diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index d9f1bd308..aa8015976 100644 --- a/frontend/src/debug.cljs +++ b/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 debug-all! [] - (reset! *debug* debug-options) - (js* "app.main.reinit()")) - -(defn debug-none! [] - (reset! *debug* #{}) - (js* "app.main.reinit()")) - -(defn debug! [option] - (swap! *debug* conj option) +(defn- enable! + [option] + (dbg/enable! option) (when (= :events option) (set! st/*debug-events* true)) - (js* "app.main.reinit()")) -(defn -debug! [option] - (swap! *debug* disj option) +(defn- disable! + [option] + (dbg/disable! option) (when (= :events option) (set! st/*debug-events* false)) (js* "app.main.reinit()")) -(defn ^:export ^boolean debug? - [option] - (boolean (@*debug* option))) +(defn ^:export toggle-debug + [name] + (let [option (keyword name)] + (if (dbg/enabled? option) + (disable! option) + (enable! option)))) -(defn ^:export toggle-debug [name] (let [option (keyword name)] - (if (debug? option) - (-debug! option) - (debug! option)))) -(defn ^:export debug-all [] (debug-all!)) -(defn ^:export debug-none [] (debug-none!)) +(defn ^:export debug-all + [] + (reset! dbg/state dbg/options) + (js* "app.main.reinit()")) + +(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 %))))))