Skip to content

Commit 358798b

Browse files
softmarshmallowsoftmarshmallow
committed
add debug view inspector
1 parent f7b0033 commit 358798b

2 files changed

Lines changed: 191 additions & 7 deletions

File tree

‎editor/scaffolds/inspector/inspector-debug.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { useCallback, useState } from "react";
2+
import styled from "@emotion/styled";
3+
import { EditorPropertyThemeProvider, one } from "@editor-ui/property";
4+
import { InfoSection } from "./section-info";
5+
import { LayoutSection } from "./section-layout";
6+
import { ColorsSection } from "./section-colors";
7+
import { TypographySection } from "./section-typography";
8+
import { useTargetContainer } from "hooks/use-target-node";
9+
import {
10+
HorizontalHierarchyTreeVisualization,
11+
JsonTree,
12+
} from "@code-editor/devtools";
13+
import useMeasure from "react-use-measure";
14+
15+
const figma_json_sortkeys = [
16+
// essential
17+
"id",
18+
"name",
19+
"type",
20+
// geometry
21+
"x",
22+
"y",
23+
"width",
24+
"height",
25+
// hierarchical
26+
"parent",
27+
"children",
28+
// appearance
29+
"visible",
30+
"opacity",
31+
"blendMode",
32+
"isMask",
33+
// fills, strokes, effects
34+
"fills",
35+
"strokes",
36+
"strokeStyleId",
37+
"strokeWeight",
38+
"strokeMiterLimit",
39+
"strokeAlign",
40+
"strokeCap",
41+
"strokeJoin",
42+
"dashPattern",
43+
"effects",
44+
"effectStyleId",
45+
];
46+
47+
export function DebugInspector() {
48+
const [ref, { width }] = useMeasure();
49+
const { target } = useTargetContainer();
50+
// target
51+
52+
return (
53+
<div ref={ref}>
54+
<EditorPropertyThemeProvider theme={one.dark}>
55+
<InfoSection />
56+
<GraphInspectionSection>
57+
<h5>document - api-response</h5>
58+
<JsonTree
59+
sortkeys={figma_json_sortkeys}
60+
backgroundColor="transparent"
61+
data={{}}
62+
/>
63+
</GraphInspectionSection>
64+
<GraphInspectionSection>
65+
<h5>document - mapped</h5>
66+
<JsonTree
67+
sortkeys={figma_json_sortkeys}
68+
backgroundColor="transparent"
69+
data={{}}
70+
/>
71+
</GraphInspectionSection>
72+
<GraphInspectionSection>
73+
<h5>token - figma-to-reflect</h5>
74+
<JsonTree
75+
sortkeys={figma_json_sortkeys}
76+
backgroundColor="transparent"
77+
data={target}
78+
/>
79+
</GraphInspectionSection>
80+
<GraphInspectionSection>
81+
<h5>widget - widget-tree</h5>
82+
<JsonTree
83+
sortkeys={figma_json_sortkeys}
84+
backgroundColor="transparent"
85+
data={{}}
86+
/>
87+
</GraphInspectionSection>
88+
<GraphInspectionSection>
89+
<h5>widget - framework-dedicated</h5>
90+
<JsonTree
91+
sortkeys={figma_json_sortkeys}
92+
backgroundColor="transparent"
93+
data={{}}
94+
/>
95+
</GraphInspectionSection>
96+
<GraphInspectionSection>
97+
<h5>graph</h5>
98+
{target && (
99+
<div data-no-padding>
100+
<HorizontalHierarchyTreeVisualization
101+
width={width}
102+
height={400}
103+
tree={target}
104+
/>
105+
</div>
106+
)}
107+
</GraphInspectionSection>
108+
<LayoutSection />
109+
<TypographySection />
110+
<ColorsSection />
111+
</EditorPropertyThemeProvider>
112+
</div>
113+
);
114+
}
115+
116+
function GraphInspectionSection({ children }: React.PropsWithChildren<{}>) {
117+
return <Section>{children}</Section>;
118+
}
119+
120+
const Section = styled.section`
121+
display: flex;
122+
flex-direction: column;
123+
124+
margin: 16px 0;
125+
126+
h1,
127+
h2,
128+
h3,
129+
h4,
130+
h5,
131+
h6 {
132+
cursor: default;
133+
color: white;
134+
margin: 0;
135+
padding: 0;
136+
font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro",
137+
monospace;
138+
}
139+
140+
/* apply padding to top level elements */
141+
> * {
142+
padding: 14px;
143+
}
144+
145+
* {
146+
&[data-no-padding="true"] {
147+
padding: 0;
148+
}
149+
}
150+
151+
&:hover {
152+
background-color: rgba(255, 255, 255, 0.05);
153+
}
154+
155+
transition: background-color 0.2s ease-in-out;
156+
`;

‎editor/scaffolds/inspector/inspector.tsx‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback, useState } from "react";
22
import styled from "@emotion/styled";
3-
import { EditorState, useEditorState } from "core/states";
3+
import { EditorState, useEditorState, useWorkspaceState } from "core/states";
44
import { colors } from "theme";
55
import { useTargetContainer } from "hooks/use-target-node";
66
import { EditorPropertyThemeProvider, one } from "@editor-ui/property";
@@ -15,10 +15,15 @@ import { Conversations } from "scaffolds/conversations";
1515
import { EditorAppbarFragments } from "components/editor";
1616
import { useDispatch } from "core/dispatch";
1717
import { EffectsSection } from "./section-effects";
18+
import { MixIcon, Cross1Icon } from "@radix-ui/react-icons";
19+
import { DebugInspector } from "./inspector-debug";
20+
import { IconToggleButton } from "@code-editor/ui";
1821

1922
type Tab = "inspect" | "comment";
2023

2124
export function Inspector() {
25+
const { debugMode } = useWorkspaceState();
26+
const [debugView, setDebugView] = useState(false);
2227
const [state] = useEditorState();
2328
const dispatch = useDispatch();
2429

@@ -37,9 +42,20 @@ export function Inspector() {
3742
return (
3843
<InspectorContainer>
3944
<EditorAppbarFragments.RightSidebar flex={0} />
40-
<Tabs selectedTab={tab} onTabChange={switchMode} />
41-
<div style={{ height: 16, flexShrink: 0 }} />
42-
<Body type={tab} />
45+
<div className="header">
46+
<Tabs selectedTab={tab} onTabChange={switchMode} />
47+
{debugMode && (
48+
<IconToggleButton
49+
on={<Cross1Icon color="white" />}
50+
off={<MixIcon color="white" />}
51+
onChange={(value) => {
52+
setDebugView(value);
53+
}}
54+
/>
55+
)}
56+
</div>
57+
{/* <div style={{ height: 16, flexShrink: 0 }} /> */}
58+
<Body type={tab} debug={debugView} />
4359
</InspectorContainer>
4460
);
4561
}
@@ -54,13 +70,13 @@ const __mode = (mode: EditorState["designerMode"]): Tab => {
5470
}
5571
};
5672

57-
function Body({ type }: { type: Tab }) {
73+
function Body({ type, debug }: { type: Tab; debug?: boolean }) {
5874
const { target } = useTargetContainer();
5975

6076
switch (type) {
6177
case "inspect":
6278
if (target) {
63-
return <InspectorBody />;
79+
return <InspectorBody debug={debug} />;
6480
} else {
6581
return <EmptyState />;
6682
}
@@ -73,7 +89,11 @@ function ConversationsBody() {
7389
return <Conversations />;
7490
}
7591

76-
function InspectorBody() {
92+
function InspectorBody({ debug }: { debug?: boolean }) {
93+
if (debug) {
94+
return <DebugInspector />;
95+
}
96+
7797
return (
7898
<EditorPropertyThemeProvider theme={one.dark}>
7999
<InfoSection />
@@ -196,5 +216,13 @@ const InspectorContainer = styled.div`
196216
flex-direction: column;
197217
height: 100%;
198218
background-color: ${colors.color_editor_bg_on_dark};
219+
220+
.header {
221+
display: flex;
222+
align-items: center;
223+
justify-content: space-between;
224+
padding: 16px 0;
225+
padding-right: 16px;
226+
}
199227
`;
200228
/* background-color: ${(props) => props.theme.colors.background}; */

0 commit comments

Comments
 (0)