update json tree view

Author: softmarshmallow

editor-packages/editor-devtools/components/visualization/index.ts

@@ -1 +1,3 @@
+export * from "./json-visualization";
+export * from "./node-visualization";
 export * as visualize_node from "./node-visualization";

editor-packages/editor-devtools/components/visualization/json-visualization/index.ts

@@ -0,0 +1 @@
+export * from "./json-tree";

editor-packages/editor-devtools/components/visualization/json-visualization/json-tree.tsx

@@ -4,14 +4,16 @@ import { Figma } from "@design-sdk/figma";
 import { Widget as ReflectWidget } from "@reflect-ui/core";
 import React from "react";
 import JSONTree from "react-json-tree";
+import type { Theme } from "react-base16-styling";
+import assert from "assert";
 
 interface CompactNodeTree {
   id: string;
   name: string;
   children?: CompactNodeTree[];
 }
 
-const theme = {
+const monokai: Theme = {
   scheme: "monokai",
   author: "wimer hazenberg (http://www.monokai.nl)",
   base00: "#272822",
@@ -30,15 +32,79 @@ const theme = {
   base0D: "#66d9ef",
   base0E: "#ae81ff",
   base0F: "#cc6633",
-  "background-color": "transparent",
 };
 
-export function JsonTree(props: { data: any; hideRoot?: boolean }) {
+export function JsonTree({
+  data,
+  hideRoot,
+  expandRoot = false,
+  expandParent = false,
+  theme = monokai,
+  backgroundColor,
+  sortkeys = false,
+  omitkeys = [],
+}: {
+  data: any;
+  hideRoot?: boolean;
+  expandRoot?: boolean;
+  expandParent?: boolean;
+  theme?: Theme;
+  backgroundColor?: React.CSSProperties["backgroundColor"];
+  sortkeys?: ReadonlyArray<string> | boolean;
+  // not used
+  omitkeys?: ReadonlyArray<string>;
+}) {
+  const sorter = (a: string, b: string) => {
+    assert(sortkeys instanceof Array, "keysort must be an array");
+    const aindex = sortkeys.indexOf(a);
+    const bindex = sortkeys.indexOf(b);
+    // the sortkeys may not contain all keys.
+
+    // if a is not in sortkeys, it should be placed after b
+    if (aindex === -1) {
+      return 1;
+    }
+
+    // if b is not in sortkeys, it should be placed after a
+    if (bindex === -1) {
+      return -1;
+    }
+
+    // if both are not in sortkeys, they should be placed in the order of appearance
+    if (aindex === -1 && bindex === -1) {
+      return 0;
+    }
+
+    // if both are in sortkeys, they should be placed in the order of sortkeys
+    return aindex - bindex;
+  };
+
   return (
     <JSONTree
-      data={props.data}
-      theme={theme}
-      hideRoot={props.hideRoot}
+      data={data}
+      theme={{
+        ...(theme as object),
+        ...(backgroundColor ? { base00: backgroundColor } : {}),
+        tree: ({ style }) => ({
+          style: {
+            ...style,
+            fontFamily: "Monaco, monospace",
+            fontSize: 14,
+          },
+        }),
+      }}
+      invertTheme={false}
+      hideRoot={hideRoot}
+      sortObjectKeys={typeof sortkeys === "boolean" ? sortkeys : sorter}
+      shouldExpandNode={(keypath, data, level) => {
+        if (level === 0) {
+          return expandRoot;
+        }
+        if (keypath[keypath.length - 1] === "parent") {
+          return expandParent;
+        }
+        return true;
+      }}
       getItemString={(type, data, itemType, itemString) => {
         return (
           <span>
@@ -85,7 +151,7 @@ export function WidgetTree(props: {
   return (
     <JSONTree
       data={props.data}
-      theme={theme}
+      theme={monokai}
       hideRoot={props.hideRoot}
       getItemString={(type, data: WidgetDataLike, itemType, itemString) => {
         return (

editor-packages/editor-devtools/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": "."
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}