From f46fddab74be77006e3b0d8e2f007c5888ba8ef1 Mon Sep 17 00:00:00 2001
From: Mai Trung Duc <maitrungduc1410@gmail.com>
Date: Wed, 14 Jun 2023 14:52:31 +0800
Subject: [PATCH] feat: add more attributes that can be edited

---
 package.json                                  |   4 +-
 src/pages/panel/components/Attributes.tsx     | 128 +++++++++++
 .../panel/components/InspectedElement.tsx     | 111 ++-------
 src/pages/panel/components/Panel.scss         |  24 +-
 src/pages/panel/components/constants.ts       | 213 +++++++++++++++++-
 .../panel/devtools/konvaDevtoolsOutline.ts    |   1 +
 .../panel/devtools/konvaDevtoolsOverlay.ts    |  23 +-
 yarn.lock                                     |  17 ++
 8 files changed, 413 insertions(+), 108 deletions(-)
 create mode 100644 src/pages/panel/components/Attributes.tsx

diff --git a/package.json b/package.json
index 193e4cd..2eb2bf8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "konva-inspector",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Devtools for your Konva App",
   "license": "MIT",
   "repository": {
@@ -18,6 +18,7 @@
   "type": "module",
   "dependencies": {
     "konva": "^9.0.2",
+    "lodash-es": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -26,6 +27,7 @@
     "@testing-library/react": "^13.4.0",
     "@types/chrome": "^0.0.224",
     "@types/jest": "29.0.3",
+    "@types/lodash-es": "^4.17.7",
     "@types/node": "18.15.11",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.11",
diff --git a/src/pages/panel/components/Attributes.tsx b/src/pages/panel/components/Attributes.tsx
new file mode 100644
index 0000000..b339d65
--- /dev/null
+++ b/src/pages/panel/components/Attributes.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+import { bridge } from "..";
+import CopyToClipboard from "./CopyToClipboard";
+import { IAttr } from "./constants";
+
+interface IProps {
+  title: string;
+  nodeAttrs: Record<string, any>;
+  attrs: IAttr[];
+  custom?: boolean;
+  updateAttr: (attrName: string, val: any) => Promise<void>;
+}
+
+export default function Attributes({
+  title,
+  nodeAttrs,
+  attrs,
+  custom,
+  updateAttr,
+}: IProps) {
+  const copyToClipBoard = () => {
+    bridge(
+      `window.copy(window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.selected().attrs)`
+    );
+  };
+
+  return (
+    <div className="attributes">
+      <div className="header-row">
+        <div className="header">{title}</div>
+        <button
+          className="button"
+          title="Copy Attributes to Clipboard"
+          onClick={() => copyToClipBoard()}
+        >
+          <span className="button-content" tabIndex={-1}>
+            <CopyToClipboard />
+          </span>
+        </button>
+      </div>
+      <div className="attr-list">
+        {attrs.map((item) => {
+          let input;
+
+          switch (item.type) {
+            case "boolean": {
+              input = (
+                <input
+                  type="checkbox"
+                  checked={
+                    nodeAttrs[item.name] === undefined
+                      ? item.defaultValue !== undefined
+                        ? item.defaultValue
+                        : true
+                      : nodeAttrs[item.name]
+                  }
+                  onChange={(e) => updateAttr(item.name, e.target.checked)}
+                />
+              );
+              break;
+            }
+            case "number": {
+              input = (
+                <input
+                  value={
+                    nodeAttrs[item.name] !== undefined
+                      ? nodeAttrs[item.name]
+                      : ""
+                  }
+                  type="number"
+                  placeholder="<default>"
+                  onChange={(e) =>
+                    updateAttr(
+                      item.name,
+                      isNaN(e.target.valueAsNumber)
+                        ? null // JSON.stringify will not preserve undefined, so we have to use null here
+                        : e.target.valueAsNumber
+                    )
+                  }
+                  min={item.min}
+                />
+              );
+              break;
+            }
+            case "json": {
+              input = (
+                <textarea
+                  value={
+                    nodeAttrs[item.name] !== undefined
+                      ? JSON.stringify(nodeAttrs[item.name])
+                      : ""
+                  }
+                  placeholder="<default>"
+                  onChange={(e) =>
+                    updateAttr(item.name, JSON.parse(e.target.value))
+                  }
+                />
+              );
+              break;
+            }
+            default: {
+              input = (
+                <input
+                  value={
+                    nodeAttrs[item.name] !== undefined
+                      ? nodeAttrs[item.name]
+                      : ""
+                  }
+                  type="text"
+                  placeholder="<default>"
+                  onChange={(e) => updateAttr(item.name, e.target.value)}
+                />
+              );
+            }
+          }
+          return (
+            <div className="attr-item" key={item.name}>
+              <span className={`item-name ${custom ? "key-name" : ""}`}>
+                {item.name}:
+              </span>
+              {input}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/panel/components/InspectedElement.tsx b/src/pages/panel/components/InspectedElement.tsx
index 983ed85..c972188 100644
--- a/src/pages/panel/components/InspectedElement.tsx
+++ b/src/pages/panel/components/InspectedElement.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { bridge } from "..";
 import { OutlineNode } from "../types";
-import CopyToClipboard from "./CopyToClipboard";
-import { ATTRS, SHAPE_ATTRS } from "./constants";
+import { ATTRS, SHAPE_ATTRS, SHAPE_CUSTOM_ATTRS } from "./constants";
+import Attributes from "./Attributes";
 
 interface IProps {
   selectedNode: OutlineNode | null;
@@ -20,9 +20,6 @@ export default function InspectedElement({ selectedNode }: IProps) {
       });
     }
   }, [selectedNode]);
-  // if (!selectedNode) {
-  //   return null;
-  // }
 
   const updateAttr = async (attrName: string, val: any) => {
     await bridge(
@@ -40,12 +37,6 @@ export default function InspectedElement({ selectedNode }: IProps) {
 
   const attrs = selectedNode?.isShape ? SHAPE_ATTRS : ATTRS;
 
-  const copyToClipBoard = () => {
-    bridge(
-      `window.copy(window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.selected().attrs)`
-    );
-  };
-
   return (
     <>
       <div className="title-row">
@@ -59,88 +50,24 @@ export default function InspectedElement({ selectedNode }: IProps) {
       </div>
       <div className="inspected-element-data">
         {selectedNode && (
-          <div className="attributes">
-            <div className="header-row">
-              <div className="header">Attributes</div>
-              <button
-                className="button"
-                title="Copy Attributes to Clipboard"
-                onClick={() => copyToClipBoard()}
-              >
-                <span className="button-content" tabIndex={-1}>
-                  <CopyToClipboard />
-                </span>
-              </button>
-            </div>
-            <div className="attr-list">
-              {attrs.map((item) => {
-                let input;
+          <>
+            {SHAPE_CUSTOM_ATTRS[selectedNode.className] && (
+              <Attributes
+                title={`${selectedNode.className} Attributes`}
+                attrs={SHAPE_CUSTOM_ATTRS[selectedNode.className]}
+                nodeAttrs={nodeAttrs}
+                updateAttr={updateAttr}
+                custom
+              />
+            )}
 
-                switch (item.type) {
-                  case "boolean": {
-                    input = (
-                      <input
-                        type="checkbox"
-                        checked={
-                          nodeAttrs[item.name] === undefined
-                            ? item.defaultValue !== undefined
-                              ? item.defaultValue
-                              : true
-                            : nodeAttrs[item.name]
-                        }
-                        onChange={(e) =>
-                          updateAttr(item.name, e.target.checked)
-                        }
-                      />
-                    );
-                    break;
-                  }
-                  case "number": {
-                    input = (
-                      <input
-                        value={
-                          nodeAttrs[item.name] !== undefined
-                            ? nodeAttrs[item.name]
-                            : ""
-                        }
-                        type="number"
-                        placeholder="<default>"
-                        onChange={(e) =>
-                          updateAttr(
-                            item.name,
-                            isNaN(e.target.valueAsNumber)
-                              ? null // JSON.stringify will not preserve undefined, so we have to use null here
-                              : e.target.valueAsNumber
-                          )
-                        }
-                      />
-                    );
-                    break;
-                  }
-                  default: {
-                    input = (
-                      <input
-                        value={
-                          nodeAttrs[item.name] !== undefined
-                            ? nodeAttrs[item.name]
-                            : ""
-                        }
-                        type="text"
-                        placeholder="<default>"
-                        onChange={(e) => updateAttr(item.name, e.target.value)}
-                      />
-                    );
-                  }
-                }
-                return (
-                  <div className="attr-item" key={item.name}>
-                    <span className="item-name">{item.name}:</span>
-                    {input}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
+            <Attributes
+              title="Attributes"
+              attrs={attrs}
+              nodeAttrs={nodeAttrs}
+              updateAttr={updateAttr}
+            />
+          </>
         )}
       </div>
     </>
diff --git a/src/pages/panel/components/Panel.scss b/src/pages/panel/components/Panel.scss
index f37d157..56896fc 100644
--- a/src/pages/panel/components/Panel.scss
+++ b/src/pages/panel/components/Panel.scss
@@ -84,6 +84,10 @@ body {
   font-family: var(--font-family-sans);
   -webkit-font-smoothing: var(--font-smoothing);
 
+  .key-name {
+    color: var(--color-attribute-name);
+  }
+
   .button {
     border: none;
     background: var(--color-button-background);
@@ -183,7 +187,9 @@ body {
     }
     .trees {
       overflow-y: auto;
-      height: calc(100% - 42px - 3px); // add 3px as buffer for better scrollbar visibility
+      height: calc(
+        100% - 42px - 3px
+      ); // add 3px as buffer for better scrollbar visibility
     }
   }
   .inspected-element {
@@ -225,7 +231,9 @@ body {
 
     .inspected-element-data {
       overflow-y: auto;
-      height: calc(100% - 42px - 3px); // add 3px as buffer for better scrollbar visibility
+      height: calc(
+        100% - 42px - 3px
+      ); // add 3px as buffer for better scrollbar visibility
       .header-row {
         display: flex;
         align-items: center;
@@ -241,7 +249,7 @@ body {
         padding: 0.25rem;
         border-top: 1px solid var(--color-border);
       }
-      .attributes {
+      .attributes:first-child {
         border-top: none;
       }
       .attributes {
@@ -255,9 +263,10 @@ body {
 
             .item-name {
               margin-right: 0.5rem;
+              font-family: var(--font-family-monospace);
             }
 
-            input {
+            input, textarea {
               flex: 1 1;
               background: none;
               border: 1px solid transparent;
@@ -270,6 +279,9 @@ body {
                 outline: none;
               }
             }
+            textarea {
+              resize: vertical;
+            }
           }
         }
       }
@@ -316,10 +328,6 @@ body {
     }
   }
 
-  .key-name {
-    color: var(--color-attribute-name);
-  }
-
   .key-value {
     color: var(--color-attribute-value);
     user-select: text;
diff --git a/src/pages/panel/components/constants.ts b/src/pages/panel/components/constants.ts
index a83869c..787a31f 100644
--- a/src/pages/panel/components/constants.ts
+++ b/src/pages/panel/components/constants.ts
@@ -1,4 +1,12 @@
-export const ATTRS = [
+export interface IAttr {
+  name: string;
+  path?: string;
+  type: "string" | "number" | "boolean" | "json";
+  defaultValue?: string | number | boolean;
+  min?: number;
+}
+
+export const ATTRS: IAttr[] = [
   {
     name: "x",
     type: "number",
@@ -34,6 +42,7 @@ export const ATTRS = [
   {
     name: "opacity",
     type: "number",
+    min: 0,
   },
   {
     name: "scaleX",
@@ -82,7 +91,7 @@ export const ATTRS = [
   },
 ];
 
-export const SHAPE_ATTRS = [
+export const SHAPE_ATTRS: IAttr[] = [
   ...ATTRS,
   {
     name: "fill",
@@ -95,6 +104,7 @@ export const SHAPE_ATTRS = [
   {
     name: "strokeWidth",
     type: "number",
+    min: 0,
   },
   {
     name: "shadowColor",
@@ -121,3 +131,202 @@ export const SHAPE_ATTRS = [
     type: "boolean",
   },
 ];
+
+export const SHAPE_CUSTOM_ATTRS: Record<string, IAttr[]> = {
+  Layer: [
+    { name: "clearBeforeDraw", type: "boolean" },
+    { name: "hitGraphEnabled", type: "boolean" },
+    { name: "imageSmoothingEnabled", type: "boolean" },
+  ],
+  Group: [
+    { name: "clearBeforeDraw", type: "boolean" },
+    { name: "clipX", type: "number" },
+    { name: "clipY", type: "number" },
+    { name: "clipWidth", type: "number" },
+    { name: "clipHeight", type: "number" },
+  ],
+  Label: [
+    { name: "clearBeforeDraw", type: "boolean" },
+    { name: "clipX", type: "number" },
+    { name: "clipY", type: "number" },
+    { name: "clipWidth", type: "number" },
+    { name: "clipHeight", type: "number" },
+  ],
+
+  Rect: [
+    {
+      name: "cornerRadius",
+      type: "number",
+      min: 0,
+    },
+  ],
+
+  Circle: [
+    {
+      name: "radius",
+      type: "number",
+      min: 0,
+    },
+  ],
+  Ellipse: [
+    {
+      name: "radiusX",
+      type: "number",
+      min: 0,
+    },
+    {
+      name: "radiusY",
+      type: "number",
+      min: 0,
+    },
+  ],
+  Wedge: [
+    {
+      name: "angle",
+      type: "number",
+    },
+    {
+      name: "radius",
+      type: "number",
+      min: 0,
+    },
+    {
+      name: "clockwise",
+      type: "boolean",
+    },
+  ],
+  Transformer: [
+    { name: "resizeEnabled", type: "boolean" },
+    { name: "rotateEnabled", type: "boolean" },
+    { name: "rotationSnaps", type: "json" },
+    { name: "rotationSnapTolerance", type: "number" },
+    { name: "rotateAnchorOffset", type: "number" },
+    { name: "borderEnabled", type: "boolean" },
+    { name: "borderStroke", type: "string" },
+    { name: "borderStrokeWidth", type: "number" },
+    { name: "borderDash", type: "json" },
+    { name: "anchorFill", type: "string" },
+    { name: "anchorStroke", type: "string" },
+    { name: "anchorStrokeWidth", type: "number" },
+    { name: "anchorSize", type: "number" },
+    { name: "anchorCornerRadius", type: "number" },
+    { name: "keepRatio", type: "boolean" },
+    { name: "shiftBehavior", type: "string" },
+    { name: "centeredScaling", type: "boolean", defaultValue: false },
+    { name: "enabledAnchors", type: "json" },
+    { name: "flipEnabled", type: "boolean" },
+    { name: "ignoreStroke", type: "boolean", defaultValue: false },
+    { name: "useSingleNodeRotation", type: "boolean" },
+    { name: "shouldOverdrawWholeArea", type: "boolean", defaultValue: false },
+  ],
+  Line: [
+    { name: "points", type: "json" },
+    { name: "tension", type: "number" },
+    { name: "closed", type: "boolean", defaultValue: false },
+    { name: "bezier", type: "boolean", defaultValue: false },
+  ],
+  Sprite: [
+    { name: "animation", type: "string" },
+    { name: "frameIndex", type: "number", min: 0 },
+    { name: "frameRate", type: "number", min: 0 },
+  ],
+  Image: [
+    // {
+    //   name: "image",
+    //   path: "image.src",
+    //   type: "string",
+    // },
+    { name: "crop", type: "json" },
+    {
+      name: "cornerRadius",
+      type: "number",
+      min: 0,
+    },
+  ],
+  Text: [
+    { name: "text", type: "string" },
+    { name: "fontFamily", type: "string" },
+    { name: "fontSize", type: "number", min: 0 },
+    { name: "fontStyle", type: "string" },
+    { name: "fontVariant", type: "string" },
+    { name: "textDecoration", type: "string" },
+    { name: "align", type: "string" },
+    { name: "verticalAlign", type: "string" },
+    { name: "padding", type: "number" },
+    { name: "lineHeight", type: "number" },
+    { name: "letterSpacing", type: "number" },
+    { name: "wrap", type: "string" },
+    { name: "ellipsis", type: "boolean", defaultValue: false },
+  ],
+  TextPath: [
+    { name: "text", type: "string" },
+    { name: "data", type: "string" },
+    { name: "fontFamily", type: "string" },
+    { name: "fontSize", type: "number", min: 0 },
+    { name: "fontStyle", type: "string" },
+    { name: "letterSpacing", type: "number" },
+  ],
+  Star: [
+    { name: "numPoints", type: "number", min: 0 },
+    { name: "innerRadius", type: "number", min: 0 },
+    { name: "outerRadius", type: "number", min: 0 },
+  ],
+  Ring: [
+    { name: "innerRadius", type: "number", min: 0 },
+    { name: "outerRadius", type: "number", min: 0 },
+  ],
+  Arc: [
+    { name: "angle", type: "number" },
+    { name: "innerRadius", type: "number", min: 0 },
+    { name: "outerRadius", type: "number", min: 0 },
+    { name: "clockwise", type: "boolean" },
+  ],
+  Tag: [
+    { name: "pointerDirection", type: "number" },
+    { name: "pointerWidth", type: "number", min: 0 },
+    { name: "pointerHeight", type: "number", min: 0 },
+    { name: "cornerRadius", type: "json" },
+  ],
+  Path: [{ name: "data", type: "string" }],
+  RegularPolygon: [
+    {
+      name: "sides",
+      type: "number",
+    },
+    {
+      name: "radius",
+      type: "number",
+    },
+  ],
+  Arrow: [
+    {
+      name: "points",
+      type: "json",
+    },
+    {
+      name: "tension",
+      type: "number",
+    },
+    {
+      name: "closed",
+      type: "boolean",
+      defaultValue: false,
+    },
+    {
+      name: "pointerLength",
+      type: "number",
+    },
+    {
+      name: "pointerWidth",
+      type: "number",
+    },
+    {
+      name: "pointerAtBeginning",
+      type: "boolean",
+    },
+    {
+      name: "pointerAtEnding",
+      type: "boolean",
+    },
+  ],
+};
diff --git a/src/pages/panel/devtools/konvaDevtoolsOutline.ts b/src/pages/panel/devtools/konvaDevtoolsOutline.ts
index 3112506..104ab5c 100644
--- a/src/pages/panel/devtools/konvaDevtoolsOutline.ts
+++ b/src/pages/panel/devtools/konvaDevtoolsOutline.ts
@@ -44,6 +44,7 @@ export default function konvaDevtoolsOutline(devtools: KonvaDevtools) {
         !devtools.Konva().Util._isPlainObject(val) &&
         !devtools.Konva().Util._isArray(val);
       if (nonPlainObject) {
+        obj.attrs[key] = "<NON_PLAIN_OBJECT>";
         continue;
       }
       getter = typeof this[key] === "function" && this[key];
diff --git a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts
index 7fd02ba..6a37949 100644
--- a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts
+++ b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts
@@ -2,6 +2,13 @@ import type Konva from "konva";
 import { KonvaDevtools } from "../types";
 
 export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) {
+  function formatNumber(
+    num: number,
+    options: Intl.NumberFormatOptions = { maximumFractionDigits: 2 }
+  ) {
+    return num ? new Intl.NumberFormat(undefined, options).format(num) : 0;
+  }
+
   function position(
     x: string,
     y: string,
@@ -48,6 +55,9 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) {
     const leftTooltip = document.createElement("div");
     leftTooltip.style.color = "#61dafb";
 
+    const _idText = document.createElement("div");
+    _idText.style.color = "#ef6632";
+
     const separator = document.createElement("div");
     separator.textContent = "|";
 
@@ -55,6 +65,8 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) {
 
     tooltip.append(leftTooltip);
     tooltip.append(separator);
+    tooltip.append(_idText);
+    tooltip.append(separator.cloneNode(true));
     tooltip.append(rightTooltip);
     overlayEl.appendChild(tooltip);
     document.body.appendChild(overlayEl);
@@ -82,11 +94,12 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) {
       overlayEl.style.height = rect.height.toString() + "px";
 
       leftTooltip.textContent = node.getClassName();
-      rightTooltip.textContent = `${rect.width.toFixed(
-        2
-      )}px x ${rect.height.toFixed(2)}px (${rect.x.toFixed(
-        2
-      )}, ${rect.y.toFixed(2)})`;
+      _idText.textContent = `_id=${node._id.toString()}`;
+      rightTooltip.textContent = `${formatNumber(
+        rect.width
+      )}px x ${formatNumber(rect.height)}px (${formatNumber(
+        rect.x
+      )}, ${formatNumber(rect.y)})`;
 
       if (throttle <= 0) {
         calibrateOverlay();
diff --git a/yarn.lock b/yarn.lock
index 9f797ef..52d6b69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -969,6 +969,18 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/lodash-es@^4.17.7":
+  version "4.17.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.7.tgz#22edcae9f44aff08546e71db8925f05b33c7cc40"
+  integrity sha512-z0ptr6UI10VlU6l5MYhGwS4mC8DZyYer2mCoyysZtSF7p26zOX8UpbrV0YpNYLGS8K4PUFIyEr62IMFFjveSiQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.195"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
+  integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
+
 "@types/node@*", "@types/node@18.15.11":
   version "18.15.11"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
@@ -3347,6 +3359,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.memoize@4.x:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"