diff --git a/frontend/resources/images/icons/bug.svg b/frontend/resources/images/icons/bug.svg new file mode 100644 index 000000000..2904d3122 --- /dev/null +++ b/frontend/resources/images/icons/bug.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index 7979ba2e1..ffae5942e 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -360,12 +360,16 @@ button.collapse-sidebar { overflow: hidden; } -.shortcuts { - .shortcuts-header { +.shortcuts, +.debug-panel { + .shortcuts-header, + .debug-panel-header { display: flex; height: 40px; background-color: $color-gray-60; - .shortcuts-title { + + .shortcuts-title, + .debug-panel-title { color: $color-white; font-size: $fs12; display: flex; @@ -379,7 +383,9 @@ button.collapse-sidebar { fill: $color-gray-20; } } - .shortcuts-close-button { + + .shortcuts-close-button, + .debug-panel-close-button { display: flex; justify-content: center; background-color: transparent; @@ -547,3 +553,35 @@ button.collapse-sidebar { font-size: $fs12; } } + +.debug-panel { + .debug-panel-inner { + padding: 8px; + } + .debug-option { + display: flex; + gap: 8px; + margin: 4px 0; + cursor: pointer; + + label { + font-size: 80%; + cursor: pointer; + } + + svg { + width: 15px; + height: 15px; + background: white; + } + + &:hover { + svg { + stroke: var(--color-primary); + } + label { + color: var(--color-primary); + } + } + } +} diff --git a/frontend/src/app/main.cljs b/frontend/src/app/main.cljs index 5831edea8..678eaf3aa 100644 --- a/frontend/src/app/main.cljs +++ b/frontend/src/app/main.cljs @@ -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")) diff --git a/frontend/src/app/main/store.cljs b/frontend/src/app/main/store.cljs index 0c66507fc..cb2d99824 100644 --- a/frontend/src/app/main/store.cljs +++ b/frontend/src/app/main/store.cljs @@ -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 diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index f73424ecd..4254b0906 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index bf01aa001..de16a19c3 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -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])]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index cf61c1e9e..02f2c6be5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs new file mode 100644 index 000000000..82c099f84 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs @@ -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)]])]]])) diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index f2d2e729a..e78a24dc8 100644 --- a/frontend/src/debug.cljs +++ b/frontend/src/debug.cljs @@ -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]