✨ Add new debug panel

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]

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]
 

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;
   }

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

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;
+}

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]

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)