Skip to content

Commit 5c4ed5a

Browse files
softmarshmallowsoftmarshmallow
authored
Merge pull request #215 from gridaco/debug-mode
Debug Mode
2 parents 46ef4ad + c4e2d14 commit 5c4ed5a

File tree

26 files changed

+1658
-170
lines changed

26 files changed

+1658
-170
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
export * from "./json-visualization";
2+
export * from "./node-visualization";
13
export * as visualize_node from "./node-visualization";

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./json-tree";

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

Lines changed: 78 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ import { Figma } from "@design-sdk/figma";
44
import { Widget as ReflectWidget } from "@reflect-ui/core";
55
import React from "react";
66
import JSONTree from "react-json-tree";
7+
import type { Theme } from "react-base16-styling";
8+
import assert from "assert";
79

810
interface CompactNodeTree {
911
id: string;
1012
name: string;
1113
children?: CompactNodeTree[];
1214
}
1315

14-
const theme = {
16+
const monokai: Theme = {
1517
scheme: "monokai",
1618
author: "wimer hazenberg (http://www.monokai.nl)",
1719
base00: "#272822",
@@ -30,15 +32,84 @@ const theme = {
3032
base0D: "#66d9ef",
3133
base0E: "#ae81ff",
3234
base0F: "#cc6633",
33-
"background-color": "transparent",
3435
};
3536

36-
export function JsonTree(props: { data: any; hideRoot?: boolean }) {
37+
export function JsonTree({
38+
data,
39+
hideRoot,
40+
expandRoot = false,
41+
expandParent = false,
42+
theme = monokai,
43+
backgroundColor,
44+
sortkeys = false,
45+
expandMaxLevel = 5,
46+
omitkeys = [],
47+
}: {
48+
data: any;
49+
hideRoot?: boolean;
50+
expandRoot?: boolean;
51+
expandParent?: boolean;
52+
expandMaxLevel?: number;
53+
theme?: Theme;
54+
backgroundColor?: React.CSSProperties["backgroundColor"];
55+
sortkeys?: ReadonlyArray<string> | boolean;
56+
// not used
57+
omitkeys?: ReadonlyArray<string>;
58+
}) {
59+
const sorter = (a: string, b: string) => {
60+
assert(sortkeys instanceof Array, "keysort must be an array");
61+
const aindex = sortkeys.indexOf(a);
62+
const bindex = sortkeys.indexOf(b);
63+
// the sortkeys may not contain all keys.
64+
65+
// if a is not in sortkeys, it should be placed after b
66+
if (aindex === -1) {
67+
return 1;
68+
}
69+
70+
// if b is not in sortkeys, it should be placed after a
71+
if (bindex === -1) {
72+
return -1;
73+
}
74+
75+
// if both are not in sortkeys, they should be placed in the order of appearance
76+
if (aindex === -1 && bindex === -1) {
77+
return 0;
78+
}
79+
80+
// if both are in sortkeys, they should be placed in the order of sortkeys
81+
return aindex - bindex;
82+
};
83+
3784
return (
3885
<JSONTree
39-
data={props.data}
40-
theme={theme}
41-
hideRoot={props.hideRoot}
86+
data={data}
87+
theme={{
88+
...(theme as object),
89+
...(backgroundColor ? { base00: backgroundColor } : {}),
90+
tree: ({ style }) => ({
91+
style: {
92+
...style,
93+
fontFamily: "Monaco, monospace",
94+
fontSize: 14,
95+
},
96+
}),
97+
}}
98+
invertTheme={false}
99+
hideRoot={hideRoot}
100+
sortObjectKeys={typeof sortkeys === "boolean" ? sortkeys : sorter}
101+
shouldExpandNode={(keypath, data, level) => {
102+
if (level === 0) {
103+
return expandRoot;
104+
}
105+
if (expandMaxLevel > 0 && level > expandMaxLevel) {
106+
return false;
107+
}
108+
if (keypath[keypath.length - 1] === "parent") {
109+
return expandParent;
110+
}
111+
return true;
112+
}}
42113
getItemString={(type, data, itemType, itemString) => {
43114
return (
44115
<span>
@@ -85,7 +156,7 @@ export function WidgetTree(props: {
85156
return (
86157
<JSONTree
87158
data={props.data}
88-
theme={theme}
159+
theme={monokai}
89160
hideRoot={props.hideRoot}
90161
getItemString={(type, data: WidgetDataLike, itemType, itemString) => {
91162
return (

‎editor-packages/editor-devtools/components/visualization/node-visualization/control.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React, { useState } from "react";
2+
import styled from "@emotion/styled";
3+
import { GearIcon, Cross1Icon } from "@radix-ui/react-icons";
4+
import { IconToggleButton } from "@code-editor/ui";
5+
6+
type Props = {
7+
layout: string;
8+
orientation: string;
9+
linkType: string;
10+
stepPercent: number;
11+
setLayout: (layout: string) => void;
12+
setOrientation: (orientation: string) => void;
13+
setLinkType: (linkType: string) => void;
14+
setStepPercent: (percent: number) => void;
15+
};
16+
17+
export default function LinkControls({
18+
layout,
19+
orientation,
20+
linkType,
21+
stepPercent,
22+
setLayout,
23+
setOrientation,
24+
setLinkType,
25+
setStepPercent,
26+
}: Props) {
27+
const [isExpanded, setIsExpanded] = useState(false);
28+
29+
return (
30+
<ControlContainer data-expanded={isExpanded}>
31+
<div
32+
className="controls"
33+
style={{
34+
display: isExpanded ? undefined : "none",
35+
}}
36+
>
37+
<div className="control">
38+
<label>layout</label>
39+
<select
40+
onClick={(e) => e.stopPropagation()}
41+
onChange={(e) => setLayout(e.target.value)}
42+
value={layout}
43+
>
44+
<option value="cartesian">cartesian</option>
45+
<option value="polar">polar</option>
46+
</select>
47+
</div>
48+
<div className="control">
49+
<label>orientation</label>
50+
<select
51+
onClick={(e) => e.stopPropagation()}
52+
onChange={(e) => setOrientation(e.target.value)}
53+
value={orientation}
54+
disabled={layout === "polar"}
55+
>
56+
<option value="vertical">vertical</option>
57+
<option value="horizontal">horizontal</option>
58+
</select>
59+
</div>
60+
<div className="control">
61+
<label>link</label>
62+
<select
63+
onClick={(e) => e.stopPropagation()}
64+
onChange={(e) => setLinkType(e.target.value)}
65+
value={linkType}
66+
>
67+
<option value="diagonal">diagonal</option>
68+
<option value="step">step</option>
69+
<option value="curve">curve</option>
70+
<option value="line">line</option>
71+
</select>
72+
</div>
73+
{linkType === "step" && layout !== "polar" && (
74+
<div className="control">
75+
<label>step</label>
76+
<input
77+
onClick={(e) => e.stopPropagation()}
78+
type="range"
79+
min={0}
80+
max={1}
81+
step={0.1}
82+
onChange={(e) => setStepPercent(Number(e.target.value))}
83+
value={stepPercent}
84+
disabled={linkType !== "step" || layout === "polar"}
85+
/>
86+
</div>
87+
)}
88+
</div>
89+
<div style={{ marginLeft: 16 }}>
90+
<IconToggleButton
91+
on={<Cross1Icon />}
92+
off={<GearIcon />}
93+
onChange={setIsExpanded}
94+
/>
95+
</div>
96+
</ControlContainer>
97+
);
98+
}
99+
100+
const ControlContainer = styled.div`
101+
position: absolute;
102+
top: 16px;
103+
right: 16px;
104+
105+
display: flex;
106+
padding: 16px;
107+
108+
border-radius: 4px;
109+
border: 1px solid rgba(255, 255, 255, 0.1);
110+
background-color: rgba(0, 0, 0, 0.5);
111+
backdrop-filter: blur(16px);
112+
font-size: 10px;
113+
color: white;
114+
115+
&[data-expanded="false"] {
116+
border: none;
117+
background-color: transparent;
118+
}
119+
120+
.controls {
121+
display: flex;
122+
align-items: center;
123+
justify-content: center;
124+
gap: 8px;
125+
}
126+
127+
.control {
128+
display: flex;
129+
flex-direction: column;
130+
align-items: flex-start;
131+
gap: 4px;
132+
}
133+
`;

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { ComponentType } from "react";
2+
import {
3+
LinkHorizontal,
4+
LinkVertical,
5+
LinkRadial,
6+
LinkHorizontalStep,
7+
LinkVerticalStep,
8+
LinkRadialStep,
9+
LinkHorizontalCurve,
10+
LinkVerticalCurve,
11+
LinkRadialCurve,
12+
LinkHorizontalLine,
13+
LinkVerticalLine,
14+
LinkRadialLine,
15+
} from "@visx/shape";
16+
17+
export default function getLinkComponent({
18+
layout,
19+
linkType,
20+
orientation,
21+
}: {
22+
layout: string;
23+
linkType: string;
24+
orientation: string;
25+
}): ComponentType<any> {
26+
let LinkComponent: ComponentType<any>;
27+
28+
if (layout === "polar") {
29+
if (linkType === "step") {
30+
LinkComponent = LinkRadialStep;
31+
} else if (linkType === "curve") {
32+
LinkComponent = LinkRadialCurve;
33+
} else if (linkType === "line") {
34+
LinkComponent = LinkRadialLine;
35+
} else {
36+
LinkComponent = LinkRadial;
37+
}
38+
} else if (orientation === "vertical") {
39+
if (linkType === "step") {
40+
LinkComponent = LinkVerticalStep;
41+
} else if (linkType === "curve") {
42+
LinkComponent = LinkVerticalCurve;
43+
} else if (linkType === "line") {
44+
LinkComponent = LinkVerticalLine;
45+
} else {
46+
LinkComponent = LinkVertical;
47+
}
48+
} else if (linkType === "step") {
49+
LinkComponent = LinkHorizontalStep;
50+
} else if (linkType === "curve") {
51+
LinkComponent = LinkHorizontalCurve;
52+
} else if (linkType === "line") {
53+
LinkComponent = LinkHorizontalLine;
54+
} else {
55+
LinkComponent = LinkHorizontal;
56+
}
57+
return LinkComponent;
58+
}

0 commit comments

Comments
 (0)