0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00

Add internal improvements to debug related namespaces

This commit is contained in:
Andrey Antukh 2023-09-21 15:53:34 +02:00 committed by Alonso Torres
parent a2e3da2c07
commit ae08a330fa
12 changed files with 181 additions and 151 deletions

View file

@ -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

View file

@ -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]])

View file

@ -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)))

View file

@ -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!

View file

@ -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}])]))

View file

@ -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)]])]]))

View file

@ -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

View file

@ -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

View file

@ -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}]

View file

@ -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

View file

@ -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)))

View file

@ -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 %))))))