Skip to content
This repository was archived by the owner on Jun 14, 2023. It is now read-only.

Commit 8cf300c

Browse files
vojtatomvojtatom
committed
Enable sidebar
1 parent 549d08a commit 8cf300c

File tree

9 files changed

+61
-20
lines changed

9 files changed

+61
-20
lines changed

‎example/App.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React from 'react'
22
import './App.css'
33
import { MetacityGL } from '../metacitygl/metacitygl';
4+
import { ExampleLayer } from './layer';
45

56
function App() {
67

78
return (
89
<MetacityGL>
9-
TODO
10+
<ExampleLayer
11+
enableUI
12+
/>
1013
</MetacityGL>
1114
)
1215
}

‎example/layer.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { MetacityLayerProps } from "../metacitygl/metacitygl";
3+
4+
5+
interface ExampleLayerProps extends MetacityLayerProps {
6+
7+
}
8+
9+
10+
export function ExampleLayer(props: ExampleLayerProps) {
11+
return (
12+
null
13+
);
14+
}

‎example/main.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import App from './App'
44

55

66
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7-
<React.StrictMode>
8-
<App />
9-
</React.StrictMode>
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>
1010
)
1111

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vite + React + TS</title>
6+
<title>Metacity</title>
77
</head>
88
<body>
99
<div id="root"></div>

‎metacitygl/components/label.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import { Graphics } from "../metacitygl";
23

34
interface MetacityLabelProps {

‎metacitygl/components/layer.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { GraphicsContext } from "../graphics";
2+
3+
4+
export interface MetacityLayerProps {
5+
context?: GraphicsContext;
6+
enableTimeline?: boolean;
7+
enableUI?: boolean;
8+
}

‎metacitygl/components/metacitygl.tsx‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,14 @@ import "./style.css"
33
import { GraphicsContext } from "../graphics/context";
44
import { Timeline } from "./timeline";
55
import { MetacityLabel } from "./label";
6+
import { MetacityLayerProps } from "./layer";
67

78

89
interface MetacityGLProps {
910
background?: number;
1011
children?: React.ReactNode | React.ReactNode[];
1112
}
1213

13-
14-
interface ChildProps {
15-
context: GraphicsContext;
16-
}
17-
18-
1914
export function MetacityGL(props: MetacityGLProps) {
2015
const [context, setContext] = React.useState<GraphicsContext>();
2116
const canvasRef = React.useRef<HTMLCanvasElement>(null);
@@ -25,6 +20,9 @@ export function MetacityGL(props: MetacityGLProps) {
2520
const [hoverLocation, setHoverLocation] = React.useState<{ x: number, y: number }|null>(null);
2621
const children = React.Children.toArray(props.children);
2722

23+
const [enableTimeline, setEnableTimeline] = React.useState<boolean>(false);
24+
const [enableUI, setEnableUI] = React.useState<boolean>(false);
25+
2826
React.useEffect(() => {
2927
const canvas = canvasRef.current;
3028
const container = containerRef.current;
@@ -67,6 +65,21 @@ export function MetacityGL(props: MetacityGLProps) {
6765
}
6866
};
6967

68+
React.useEffect(() => {
69+
for (let child of children) {
70+
if (React.isValidElement(child)) {
71+
const childProps = child.props as MetacityLayerProps;
72+
if (childProps.enableTimeline) {
73+
setEnableTimeline(true);
74+
}
75+
if (childProps.enableUI) {
76+
setEnableUI(true);
77+
}
78+
}
79+
}
80+
}, [children]);
81+
82+
7083

7184

7285
window.onresize = () => {
@@ -88,22 +101,21 @@ export function MetacityGL(props: MetacityGLProps) {
88101
left: hoverLocation?.x,
89102
top: hoverLocation?.y,
90103
}}
91-
92104
>
93105
<pre>{JSON.stringify(metadataHover, null, 2) }</pre>
94106
</div>
95107
})
96108
</div>
97-
<Timeline context={context}/>
109+
{ enableTimeline && <Timeline context={context}/> }
98110
</div>
99-
<div className="MetacityGLSidebar">
111+
{ enableUI && <div className="MetacityGLSidebar">
100112
{children.map((child, index) => {
101-
if (React.isValidElement<ChildProps>(child)) {
113+
if (React.isValidElement<MetacityLayerProps>(child)) {
102114
return React.cloneElement(child, { context: context });
103115
}
104116
})}
105117
<MetacityLabel context={context}/>
106-
</div>
118+
</div> }
107119
</div>
108120
);
109121
}

‎metacitygl/components/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88

99
.RenderingAreaContainer {
10-
width: calc(100% - 20rem);
10+
width: 100%;
1111
height: 100%;
1212
overflow: hidden;
1313
display: flex;
@@ -24,7 +24,7 @@
2424
}
2525

2626
.MetacityGLSidebar {
27-
width: 20rem;
27+
min-width: 20rem;
2828
background: rgba(0, 0, 0, 0.95);
2929
font-size: 1em;
3030
color: #fff;

‎metacitygl/metacitygl.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@ import * as Graphics from "./graphics";
22
import * as Utils from './utils';
33
import { MetacityGL } from "./components/metacitygl";
44
import { Grid } from "./components/grid";
5-
import { Timeline } from "./components/timeline";
5+
import { MetacityLayerProps } from "./components/layer";
66

77

88
export {
99
Graphics,
1010
Utils,
1111
MetacityGL,
1212
Grid,
13-
Timeline,
13+
}
14+
15+
export type {
16+
MetacityLayerProps,
1417
}

0 commit comments

Comments
 (0)