mirror of
https://github.com/penpot/penpot.git
synced 2025-07-28 03:57:16 +02:00
❇️ Debugging panel for development
This commit is contained in:
alonso.torres
parent
28663b5ff6
commit
7d48b86e46
9 changed files with 179 additions and 40 deletions
|
|
@ -81,7 +81,7 @@
|
|||
(init-ui)
|
||||
(st/emit! (initialize)))
|
||||
|
||||
(defn reinit
|
||||
(defn ^:export reinit
|
||||
[]
|
||||
(mf/unmount (dom/get-element "app"))
|
||||
(mf/unmount (dom/get-element "modal"))
|
||||
|
|
|
|||
|
|
@ -23,22 +23,29 @@
|
|||
[type data]
|
||||
(ptk/data-event type data))
|
||||
|
||||
;;(def debug-exclude-events
|
||||
;; #{:app.main.data.workspace.notifications/handle-pointer-update
|
||||
;; :app.main.data.workspace.notifications/handle-pointer-send
|
||||
;; :app.main.data.workspace.persistence/update-persistence-status
|
||||
;; :app.main.data.workspace.changes/update-indices
|
||||
;; :app.main.data.websocket/send-message
|
||||
;; :app.main.data.workspace.selection/change-hover-state})
|
||||
;; (def ^:dynamic *debug-events* false)
|
||||
(def on-event identity)
|
||||
|
||||
(def ^:dynamic *debug-events* false)
|
||||
|
||||
;; Only created in development build
|
||||
(when *assert*
|
||||
(def debug-exclude-events
|
||||
#{:app.main.data.workspace.notifications/handle-pointer-update
|
||||
:app.main.data.workspace.notifications/handle-pointer-send
|
||||
:app.main.data.workspace.persistence/update-persistence-status
|
||||
:app.main.data.workspace.changes/update-indices
|
||||
:app.main.data.websocket/send-message
|
||||
:app.main.data.workspace.selection/change-hover-state})
|
||||
|
||||
(set! on-event (fn [e]
|
||||
(when (and *debug-events*
|
||||
(ptk/event? e)
|
||||
(not (debug-exclude-events (ptk/type e))))
|
||||
(.log js/console (str "[stream]: " (ptk/repr-event e)) )))))
|
||||
|
||||
(defonce state
|
||||
(ptk/store {:resolve ptk/resolve
|
||||
;;:on-event (fn [e]
|
||||
;; (when (and *debug-events*
|
||||
;; (ptk/event? e)
|
||||
;; (not (debug-exclude-events (ptk/type e))))
|
||||
;; (.log js/console (str "[stream]: " (ptk/repr-event e)) )))
|
||||
:on-event on-event
|
||||
:on-error (fn [e] (@on-error e))}))
|
||||
|
||||
(defonce stream
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@
|
|||
(def bool-intersection (icon-xref :boolean-intersection))
|
||||
(def bool-union (icon-xref :boolean-union))
|
||||
(def box (icon-xref :box))
|
||||
(def bug (icon-xref :bug))
|
||||
(def chain (icon-xref :chain))
|
||||
(def chat (icon-xref :chat))
|
||||
(def checkbox-checked (icon-xref :checkbox-checked))
|
||||
|
|
|
|||
|
|
@ -177,6 +177,19 @@
|
|||
:on-click (fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar))
|
||||
(dw/remove-layout-flag :debug-panel)
|
||||
(-> (dw/toggle-layout-flag :shortcuts)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
|
||||
i/shortcut]]]]))
|
||||
i/shortcut]
|
||||
|
||||
(when *assert*
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt "Debugging tool"
|
||||
:class (when (contains? layout :debug-panel) "selected")
|
||||
:on-click (fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar))
|
||||
(dw/remove-layout-flag :shortcuts)
|
||||
(-> (dw/toggle-layout-flag :debug-panel)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
|
||||
i/bug])]]]))
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.comments :refer [comments-sidebar]]
|
||||
[app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.debug :refer [debug-panel]]
|
||||
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
section (cond (or mode-inspect? (contains? layout :layers)) :layers
|
||||
(contains? layout :assets) :assets)
|
||||
shortcuts? (contains? layout :shortcuts)
|
||||
show-debug? (contains? layout :debug-panel)
|
||||
|
||||
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
|
||||
(use-resize-hook :left-sidebar 255 255 500 :x false :left)
|
||||
|
|
@ -53,26 +55,31 @@
|
|||
:on-mouse-move on-mouse-move}]
|
||||
|
||||
[:div.settings-bar-inside
|
||||
(cond
|
||||
shortcuts?
|
||||
[:& shortcuts-container]
|
||||
|
||||
[:* (if shortcuts?
|
||||
[:& shortcuts-container]
|
||||
[:*
|
||||
[:button.collapse-sidebar
|
||||
{:on-click handle-collapse
|
||||
:aria-label (tr "workspace.sidebar.collapse")}
|
||||
i/arrow-slide]
|
||||
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
|
||||
:selected section
|
||||
:shortcuts? shortcuts?}
|
||||
show-debug?
|
||||
[:& debug-panel]
|
||||
|
||||
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
|
||||
[:div.layers-tab
|
||||
[:& sitemap {:layout layout}]
|
||||
[:& layers-toolbox]]]
|
||||
:else
|
||||
[:*
|
||||
[:button.collapse-sidebar
|
||||
{:on-click handle-collapse
|
||||
:aria-label (tr "workspace.sidebar.collapse")}
|
||||
i/arrow-slide]
|
||||
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
|
||||
:selected section
|
||||
:shortcuts? shortcuts?}
|
||||
|
||||
(when-not mode-inspect?
|
||||
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
|
||||
[:& assets-toolbox]])]])]]]))
|
||||
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
|
||||
[:div.layers-tab
|
||||
[:& sitemap {:layout layout}]
|
||||
[:& layers-toolbox]]]
|
||||
|
||||
(when-not mode-inspect?
|
||||
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
|
||||
[:& assets-toolbox]])]])]]))
|
||||
|
||||
;; --- Right Sidebar (Component)
|
||||
|
||||
|
|
|
|||
51
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
Normal file
51
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
;; 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.main.ui.workspace.sidebar.debug
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[debug :as dbg]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc debug-panel
|
||||
[]
|
||||
(let [on-toggle-enabled
|
||||
(mf/use-callback
|
||||
(fn [event option]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(if (contains? @dbg/*debug* option)
|
||||
(dbg/-debug! option)
|
||||
(dbg/debug! option))))
|
||||
|
||||
close-fn
|
||||
(mf/use-callback
|
||||
(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]
|
||||
[: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)]])]]]))
|
||||
|
|
@ -86,6 +86,9 @@
|
|||
|
||||
;; Show html text
|
||||
:html-text
|
||||
|
||||
;; Show history overlay
|
||||
:history-overlay
|
||||
})
|
||||
|
||||
;; These events are excluded when we activate the :events flag
|
||||
|
|
@ -99,10 +102,26 @@
|
|||
|
||||
(defonce ^:dynamic *debug* (atom #{#_:events}))
|
||||
|
||||
(defn debug-all! [] (reset! *debug* debug-options))
|
||||
(defn debug-none! [] (reset! *debug* #{}))
|
||||
(defn debug! [option] (swap! *debug* conj option))
|
||||
(defn -debug! [option] (swap! *debug* disj option))
|
||||
(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)
|
||||
(when (= :events option)
|
||||
(set! st/*debug-events* true))
|
||||
|
||||
(js* "app.main.reinit()"))
|
||||
|
||||
(defn -debug! [option]
|
||||
(swap! *debug* disj option)
|
||||
(when (= :events option)
|
||||
(set! st/*debug-events* false))
|
||||
(js* "app.main.reinit()"))
|
||||
|
||||
(defn ^:export ^boolean debug?
|
||||
[option]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue