Merge pull request #215 from gridaco/debug-mode

Debug Mode

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,84 @@ 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,
+  expandMaxLevel = 5,
+  omitkeys = [],
+}: {
+  data: any;
+  hideRoot?: boolean;
+  expandRoot?: boolean;
+  expandParent?: boolean;
+  expandMaxLevel?: number;
+  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 (expandMaxLevel > 0 && level > expandMaxLevel) {
+          return false;
+        }
+        if (keypath[keypath.length - 1] === "parent") {
+          return expandParent;
+        }
+        return true;
+      }}
       getItemString={(type, data, itemType, itemString) => {
         return (
           <span>
@@ -85,7 +156,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/components/visualization/node-visualization/control.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import styled from "@emotion/styled";
+import { GearIcon, Cross1Icon } from "@radix-ui/react-icons";
+import { IconToggleButton } from "@code-editor/ui";
+
+type Props = {
+  layout: string;
+  orientation: string;
+  linkType: string;
+  stepPercent: number;
+  setLayout: (layout: string) => void;
+  setOrientation: (orientation: string) => void;
+  setLinkType: (linkType: string) => void;
+  setStepPercent: (percent: number) => void;
+};
+
+export default function LinkControls({
+  layout,
+  orientation,
+  linkType,
+  stepPercent,
+  setLayout,
+  setOrientation,
+  setLinkType,
+  setStepPercent,
+}: Props) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <ControlContainer data-expanded={isExpanded}>
+      <div
+        className="controls"
+        style={{
+          display: isExpanded ? undefined : "none",
+        }}
+      >
+        <div className="control">
+          <label>layout</label>
+          <select
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => setLayout(e.target.value)}
+            value={layout}
+          >
+            <option value="cartesian">cartesian</option>
+            <option value="polar">polar</option>
+          </select>
+        </div>
+        <div className="control">
+          <label>orientation</label>
+          <select
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => setOrientation(e.target.value)}
+            value={orientation}
+            disabled={layout === "polar"}
+          >
+            <option value="vertical">vertical</option>
+            <option value="horizontal">horizontal</option>
+          </select>
+        </div>
+        <div className="control">
+          <label>link</label>
+          <select
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => setLinkType(e.target.value)}
+            value={linkType}
+          >
+            <option value="diagonal">diagonal</option>
+            <option value="step">step</option>
+            <option value="curve">curve</option>
+            <option value="line">line</option>
+          </select>
+        </div>
+        {linkType === "step" && layout !== "polar" && (
+          <div className="control">
+            <label>step</label>
+            <input
+              onClick={(e) => e.stopPropagation()}
+              type="range"
+              min={0}
+              max={1}
+              step={0.1}
+              onChange={(e) => setStepPercent(Number(e.target.value))}
+              value={stepPercent}
+              disabled={linkType !== "step" || layout === "polar"}
+            />
+          </div>
+        )}
+      </div>
+      <div style={{ marginLeft: 16 }}>
+        <IconToggleButton
+          on={<Cross1Icon />}
+          off={<GearIcon />}
+          onChange={setIsExpanded}
+        />
+      </div>
+    </ControlContainer>
+  );
+}
+
+const ControlContainer = styled.div`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+
+  display: flex;
+  padding: 16px;
+
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(16px);
+  font-size: 10px;
+  color: white;
+
+  &[data-expanded="false"] {
+    border: none;
+    background-color: transparent;
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .control {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+`;

editor-packages/editor-devtools/components/visualization/node-visualization/get-link-component.ts

@@ -0,0 +1,58 @@
+import { ComponentType } from "react";
+import {
+  LinkHorizontal,
+  LinkVertical,
+  LinkRadial,
+  LinkHorizontalStep,
+  LinkVerticalStep,
+  LinkRadialStep,
+  LinkHorizontalCurve,
+  LinkVerticalCurve,
+  LinkRadialCurve,
+  LinkHorizontalLine,
+  LinkVerticalLine,
+  LinkRadialLine,
+} from "@visx/shape";
+
+export default function getLinkComponent({
+  layout,
+  linkType,
+  orientation,
+}: {
+  layout: string;
+  linkType: string;
+  orientation: string;
+}): ComponentType<any> {
+  let LinkComponent: ComponentType<any>;
+
+  if (layout === "polar") {
+    if (linkType === "step") {
+      LinkComponent = LinkRadialStep;
+    } else if (linkType === "curve") {
+      LinkComponent = LinkRadialCurve;
+    } else if (linkType === "line") {
+      LinkComponent = LinkRadialLine;
+    } else {
+      LinkComponent = LinkRadial;
+    }
+  } else if (orientation === "vertical") {
+    if (linkType === "step") {
+      LinkComponent = LinkVerticalStep;
+    } else if (linkType === "curve") {
+      LinkComponent = LinkVerticalCurve;
+    } else if (linkType === "line") {
+      LinkComponent = LinkVerticalLine;
+    } else {
+      LinkComponent = LinkVertical;
+    }
+  } else if (linkType === "step") {
+    LinkComponent = LinkHorizontalStep;
+  } else if (linkType === "curve") {
+    LinkComponent = LinkHorizontalCurve;
+  } else if (linkType === "line") {
+    LinkComponent = LinkHorizontalLine;
+  } else {
+    LinkComponent = LinkHorizontal;
+  }
+  return LinkComponent;
+}