From 440983d2b9d52fda2a8c9079e91ede8bf335801d Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 29 Jan 2024 14:18:58 +0100 Subject: [PATCH] :sparkles: Add new debug panel --- common/src/app/common/geom/matrix.cljc | 11 ++ .../src/app/main/ui/workspace/sidebar.cljs | 14 ++- .../src/app/main/ui/workspace/sidebar.scss | 1 + .../workspace/sidebar/debug_shape_info.cljs | 101 ++++++++++++++++++ .../workspace/sidebar/debug_shape_info.scss | 98 +++++++++++++++++ frontend/src/app/util/debug.cljs | 5 +- frontend/src/debug.cljs | 4 +- 7 files changed, 227 insertions(+), 7 deletions(-) create mode 100644 frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs create mode 100644 frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss diff --git a/common/src/app/common/geom/matrix.cljc b/common/src/app/common/geom/matrix.cljc index 6a7e5fc2e..52efef50e 100644 --- a/common/src/app/common/geom/matrix.cljc +++ b/common/src/app/common/geom/matrix.cljc @@ -44,6 +44,17 @@ (mth/to-fixed (.-e this) precision) (mth/to-fixed (.-f this) precision)))) +(defn format-precision + [mtx precision] + (when mtx + (dm/fmt "matrix(%, %, %, %, %, %)" + (mth/to-fixed (.-a mtx) precision) + (mth/to-fixed (.-b mtx) precision) + (mth/to-fixed (.-c mtx) precision) + (mth/to-fixed (.-d mtx) precision) + (mth/to-fixed (.-e mtx) precision) + (mth/to-fixed (.-f mtx) precision)))) + (defn matrix? "Return true if `v` is Matrix instance." [v] diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 0cf25ceee..0cfcb8ddb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -19,11 +19,13 @@ [app.main.ui.workspace.right-header :refer [right-header]] [app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]] [app.main.ui.workspace.sidebar.debug :refer [debug-panel]] + [app.main.ui.workspace.sidebar.debug-shape-info :refer [debug-shape-info]] [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]] [app.main.ui.workspace.sidebar.shortcuts :refer [shortcuts-container]] [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]] + [app.util.debug :as dbg] [app.util.i18n :refer [tr]] [app.util.object :as obj] [rumext.v2 :as mf])) @@ -134,10 +136,11 @@ current-section* (mf/use-state :info) current-section (deref current-section*) - can-be-expanded? (and (not is-comments?) - (not is-history?) - is-inspect? - (= current-section :code)) + can-be-expanded? (or (dbg/enabled? :shape-panel) + (and (not is-comments?) + (not is-history?) + is-inspect? + (= current-section :code))) {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move set-size size]} (use-resize-hook :code 276 276 768 :x true :right) @@ -176,6 +179,9 @@ [:div {:class (stl/css :settings-bar-inside)} (cond + (dbg/enabled? :shape-panel) + [:& debug-shape-info] + (true? is-comments?) [:& comments-sidebar] diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 8f006ca43..af90a5ea5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -60,6 +60,7 @@ $width-settings-bar-max: $s-500; height: 100%; display: flex; flex-direction: column; + z-index: 0; &.not-expand { max-width: $width-settings-bar; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs new file mode 100644 index 000000000..1e1c8c55b --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs @@ -0,0 +1,101 @@ +;; 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-shape-info + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data :as d] + [app.common.data.macros :as dm] + [app.common.geom.matrix :as gmt] + [app.main.data.workspace :as dw] + [app.main.refs :as refs] + [app.main.store :as st] + [app.main.ui.icons :as i] + [debug :as dbg] + [rumext.v2 :as mf])) + +(def remove-attrs + #{:id :name}) + +(def vertical-layout-attrs + #{}) + +(def custom-renderer + {:parent-id :shape-link + :frame-id :shape-link + :shapes :shape-list + :shape-ref :shape-link + :transform :matrix-render + :transform-inverse :matrix-render + :selrect :rect-render + :points :points-render}) + +(mf/defc shape-link + [{:keys [id objects]}] + [:a {:class (stl/css :shape-link) + :on-click #(st/emit! (dw/select-shape id))} + (dm/str (dm/get-in objects [id :name]) " #" id)]) + +(mf/defc debug-shape-attr + [{:keys [attr value objects]}] + + (case (get custom-renderer attr) + :shape-link + [:& shape-link {:id value :objects objects}] + + :shape-list + [:div {:class (stl/css :shape-list)} + (for [id value] + [:& shape-link {:id id :objects objects}])] + + :matrix-render + [:div (dm/str (gmt/format-precision value 2))] + + :rect-render + [:div (dm/fmt "X:% Y:% W:% H:%" (:x value) (:y value) (:width value) (:height value))] + + :points-render + [:div {:class (stl/css :point-list)} + (for [point value] + [:div (dm/fmt "(%, %)" (:x point) (:y point))])] + + [:div {:class (stl/css :attrs-container-value)} (str value)])) + +(mf/defc debug-shape-info + [] + (let [objects (mf/deref refs/workspace-page-objects) + selected (->> (mf/deref refs/selected-shapes) + (map (d/getf objects)))] + + [:div {:class (stl/css :shape-info)} + [:div {:class (stl/css :shape-info-title)} + [:span "Debug"] + [:div {:class (stl/css :close-button) + :on-click #(dbg/disable! :shape-panel)} + i/close-refactor]] + + (if (empty? selected) + [:div {:class (stl/css :attrs-container)} "No shapes selected"] + (for [[idx current] (d/enumerate selected)] + [:div {:class (stl/css :attrs-container) :key (dm/str "shape" idx)} + [:div {:class (stl/css :shape-title)} + [:div {:class (stl/css :shape-name)} (:name current)] + [:button {:on-click #(debug/dump-object (dm/str (:id current)))} "object"] + [:button {:on-click #(debug/dump-subtree (dm/str (:id current)) true)} "tree"]] + + [:div {:class (stl/css :shape-attrs)} + (let [attrs (->> (keys current) + (remove remove-attrs)) + attrs (concat [:frame-id :parent-id :shapes] + (->> attrs (remove #{:frame-id :parent-id :shapes})))] + (for [attr attrs] + (when-let [value (get current attr)] + [:div {:class (stl/css-case :attrs-container-attr true + :vertical-layout (contains? vertical-layout-attrs attr)) + :key (dm/str "att-" idx "-" attr)} + [:div {:class (stl/css :attrs-container-name)} (d/name attr)] + + [:& debug-shape-attr {:attr attr :value value :objects objects}]])))]]))])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss new file mode 100644 index 000000000..0e910e7f5 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss @@ -0,0 +1,98 @@ +// 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 + +@import "refactor/common-refactor.scss"; + +.shape-info { + display: flex; + flex-direction: column; + background-color: var(--panel-background-color); + color: white; + font-size: $fs-12; +} + +.shape-info-title { + @include flexCenter; + @include tabTitleTipography; + position: relative; + height: $s-32; + min-height: $s-32; + margin: $s-8 $s-8 0 $s-8; + border-radius: $br-8; + background-color: var(--panel-title-background-color); + + span { + @include flexCenter; + flex-grow: 1; + color: var(--title-foreground-color-hover); + } +} + +.close-button { + @extend .button-tertiary; + position: absolute; + right: $s-2; + top: $s-2; + height: $s-28; + width: $s-28; + border-radius: $br-6; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } +} + +.attrs-container { + padding: $s-16 $s-8; + overflow: hidden; +} + +.shape-title { + font-size: $fs-14; + padding-bottom: $s-4; + background: $db-cuaternary; + color: $df-primary; + padding: $s-8; + border-radius: $s-8; + display: flex; + gap: $s-4; +} +.shape-name { + flex: 1; +} + +.attrs-container-attr { + display: grid; + grid-template-columns: 25% auto; + padding: $s-4 0; + + &.vertical-layout { + grid-template-columns: auto; + grid-template-rows: auto 1fr; + } +} + +.shape-attrs { + overflow: auto; + height: calc(100% - 8px); + padding-bottom: 8px; +} + +.shape-link { + color: $df-primary; + text-decoration: underline; +} + +.shape-list { + display: flex; + flex-direction: column; + gap: $s-4; +} + +.point-list { + display: flex; + gap: $s-8; +} diff --git a/frontend/src/app/util/debug.cljs b/frontend/src/app/util/debug.cljs index b02cbf48f..3129e856f 100644 --- a/frontend/src/app/util/debug.cljs +++ b/frontend/src/app/util/debug.cljs @@ -77,7 +77,10 @@ :grid-layout ;; Show an overlay to the grid cells to know its properties - :grid-cells}) + :grid-cells + + ;; Show info about shapes + :shape-panel}) (defn enable! [option] diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index 5090efc5c..7f5c6a562 100644 --- a/frontend/src/debug.cljs +++ b/frontend/src/debug.cljs @@ -57,14 +57,14 @@ :app.main.data.websocket/send-message :app.main.data.workspace.selection/change-hover-state}) -(defn- enable! +(defn enable! [option] (dbg/enable! option) (when (= :events option) (set! st/*debug-events* true)) (js* "app.main.reinit()")) -(defn- disable! +(defn disable! [option] (dbg/disable! option) (when (= :events option)