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

Commit 4aeea20

Browse files
vojtatomvojtatom
authored
Merge pull request #13 from MetacityTools/dev
Loading screen + coloring
2 parents 0b539dd + 653e2e1 commit 4aeea20

File tree

15 files changed

+401
-175
lines changed

15 files changed

+401
-175
lines changed

‎example/App.css‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,37 @@ html, body {
99
height: 100vh;
1010
}
1111

12-
.colormap {
13-
position: absolute;
14-
top: 1rem;
15-
left: 1rem;
16-
background: rgba(255, 255, 255, 0.8);
17-
padding: 0.5rem;
12+
13+
#legend {
14+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
1815
border-radius: 0.5rem;
16+
padding: 0 1em;
17+
}
18+
19+
#legend h2 {
20+
line-height: 1rem;
21+
font-size: 1em;
22+
margin: 1em 0 1em;
23+
padding: 0;
24+
}
25+
26+
#legend #colormap {
27+
width: 100%;
28+
height: 0.5rem;
29+
margin: 0;
30+
border-radius: 0.25rem;
31+
background: linear-gradient(to right,
32+
#0088FF,
33+
#FF0088);
34+
}
35+
36+
#legend #labels {
37+
display: flex;
38+
flex-direction: row;
39+
justify-content: space-between;
40+
font-size: 0.8em;
1941
}
42+
43+
#legend #labels div {
44+
margin: 0.5em 0;
45+
}

‎example/App.tsx‎

Lines changed: 112 additions & 67 deletions
Large diffs are not rendered by default.

‎example/main.tsx‎

Lines changed: 2 additions & 2 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>
7+
<React.StrictMode>
88
<App />
9-
//</React.StrictMode>
9+
</React.StrictMode>
1010
)
1111

‎metacitygl/components/layer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export interface MetacityLayerProps {
55
context?: GraphicsContext;
66
enableTimeline?: boolean;
77
enableUI?: boolean;
8+
onLoaded?: CallableFunction;
89
}

‎metacitygl/components/metacitygl.tsx‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,27 @@ import { GraphicsContext } from "../graphics/context";
44
import { Timeline } from "./timeline";
55
import { MetacityLabel } from "./label";
66
import { MetacityLayerProps } from "./layer";
7-
7+
import { Utils } from "../metacitygl";
88

99
interface MetacityGLProps {
1010
background?: number;
1111
children?: React.ReactNode | React.ReactNode[];
1212
target?: [number, number, number];
1313
position?: [number, number, number];
14+
invertColors?: boolean;
1415
}
1516

1617
export function MetacityGL(props: MetacityGLProps) {
1718
const [context, setContext] = React.useState<GraphicsContext>();
1819
const canvasRef = React.useRef<HTMLCanvasElement>(null);
1920
const containerRef = React.useRef<HTMLDivElement>(null);
21+
const LoaderRef = React.useRef<HTMLDivElement>(null);
2022
const [hoverId, setHoverId] = React.useState<number|null>(0);
2123
const [metadataHover, setMetadataHover] = React.useState<any>(0);
2224
const [hoverLocation, setHoverLocation] = React.useState<{ x: number, y: number }|null>(null);
2325
const children = React.Children.toArray(props.children);
26+
let layersLoaded = 0;
27+
const color = props.background ? Utils.Color.colorHexToStr(props.background) : "#000000";
2428

2529
const [enableTimeline, setEnableTimeline] = React.useState<boolean>(false);
2630
const [enableUI, setEnableUI] = React.useState<boolean>(false);
@@ -52,9 +56,16 @@ export function MetacityGL(props: MetacityGLProps) {
5256
//TODO ideally calculate near and far to fit
5357
}, 20);
5458
});
59+
60+
//Does not work in strict mode
61+
//return () => {
62+
// window.location.reload();
63+
//};
5564
}
5665
}, [canvasRef, containerRef]);
5766

67+
68+
5869
const onMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
5970
//TODO implement hover
6071
const x = e.clientX;
@@ -100,13 +111,51 @@ export function MetacityGL(props: MetacityGLProps) {
100111
context.updateSize();
101112
};
102113

114+
const onLoaded = () => {
115+
layersLoaded += 1;
116+
console.log("loaded", layersLoaded);
117+
118+
if (LoaderRef.current) {
119+
const container = LoaderRef.current.children[0]
120+
container.childNodes.forEach((child, index) => {
121+
if (index < layersLoaded) {
122+
(child as HTMLElement).classList.add("loaded");
123+
}
124+
});
125+
}
126+
127+
128+
if (layersLoaded === children.length) {
129+
setTimeout(() => {
130+
if (LoaderRef.current) {
131+
LoaderRef.current.style.opacity = "0";
132+
133+
setTimeout(() => {
134+
if (LoaderRef.current) {
135+
LoaderRef.current.style.display = "none";
136+
}
137+
}, 200);
138+
}
139+
}, 500);
140+
}
141+
};
103142

104143
return (
105144
<div className="MetacityGLContainer">
106145
<div className="RenderingAreaContainer">
107146
<div className="CanvasContainer" ref={containerRef}>
147+
<div id="loader" className={(props.invertColors ? " invert" : "")} ref={LoaderRef} style={{
148+
backgroundColor: color,
149+
}}>
150+
<div id="loadingBalls">
151+
{ children.map((_, index) =>
152+
<div className={"loadingBlob"} key={index} style={{ animationDelay: `${Math.random()}s`}}/>
153+
) }
154+
</div>
155+
156+
<div id="loadingName">Loading &#x2022; Metacity Tools</div></div>
108157
<canvas ref={canvasRef} onPointerMove={onMove}></canvas>
109-
({hoverId != null &&
158+
{hoverId != null &&
110159
<div
111160
className="hoverDialog"
112161
style={{
@@ -118,7 +167,7 @@ export function MetacityGL(props: MetacityGLProps) {
118167
>
119168
<pre>{JSON.stringify(metadataHover, null, 2) }</pre>
120169
</div>
121-
})
170+
}
122171
</div>
123172
{ enableTimeline && <Timeline context={context}/> }
124173
</div>
@@ -127,7 +176,7 @@ export function MetacityGL(props: MetacityGLProps) {
127176
}}>
128177
{children.map((child, index) => {
129178
if (React.isValidElement<MetacityLayerProps>(child)) {
130-
return React.cloneElement(child, { context: context });
179+
return React.cloneElement(child, { context: context, onLoaded });
131180
}
132181
})}
133182
<MetacityLabel context={context}/>

‎metacitygl/components/style.css‎

Lines changed: 86 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
.MetacityGLSidebar {
2727
min-width: 20rem;
2828
background: rgba(0, 0, 0, 0.95);
29-
border-radius: 1rem;
29+
border-radius: 3px;
3030
font-size: 1em;
3131
color: #fff;
3232
overflow: auto;
@@ -83,12 +83,12 @@ input[type="range"]:focus {
8383

8484
input[type="range"]::-webkit-slider-runnable-track {
8585
background-color: #333;
86-
height: 2rem;
86+
height: 1rem;
8787
}
8888

8989
input[type="range"]::-moz-range-track {
9090
background-color: #333;
91-
height: 2rem;
91+
height: 1rem;
9292
}
9393

9494
/* slider thumb */
@@ -97,7 +97,7 @@ input[type="range"]::-webkit-slider-thumb {
9797
appearance: none;
9898
/*custom styles*/
9999
background-color: #AAA;
100-
height: 2rem;
100+
height: 1rem;
101101
width: 1rem;
102102
}
103103

@@ -107,17 +107,13 @@ input[type="range"]::-moz-range-thumb {
107107
border-radius: 0;
108108
/*custom styles*/
109109
background-color: #AAA;
110-
height: 2rem;
110+
height: 1rem;
111111
width: 1rem;
112112
}
113113

114-
input[type="range"]:focus::-webkit-slider-thumb {
114+
input[type="range"]:focus::-webkit-slider-thumb {}
115115

116-
}
117-
118-
input[type="range"]:focus::-moz-range-thumb {
119-
120-
}
116+
input[type="range"]:focus::-moz-range-thumb {}
121117

122118

123119
select.speed {
@@ -181,4 +177,83 @@ button.appButton {
181177

182178
button.appButton:hover {
183179
background: #666;
180+
}
181+
182+
#loader {
183+
width: 100%;
184+
height: 100%;
185+
position: absolute;
186+
z-index: 200;
187+
display: flex;
188+
flex-direction: column;
189+
align-items: center;
190+
justify-content: center;
191+
192+
193+
transition: all 0.2s ease;
194+
}
195+
196+
#loadingBalls {
197+
display: flex;
198+
flex-direction: row;
199+
scale: 0.5;
200+
}
201+
202+
.loadingBlob {
203+
width: 50px;
204+
height: 50px;
205+
border-radius: 3px;
206+
background: #FFF;
207+
animation-name: bounce;
208+
animation-duration: 1.5s;
209+
animation-iteration-count: infinite;
210+
display: flex;
211+
align-items: center;
212+
justify-content: center;
213+
text-transform: uppercase;
214+
transition: all 0.5s ease;
215+
}
216+
217+
.invert .loadingBlob {
218+
background: #000;
219+
}
220+
221+
.invert .loaded {
222+
background: #00FF00;
223+
}
224+
225+
@keyframes bounce {
226+
0% { transform: scale(1,1) translateY(0);
227+
-webkit-transform: scale(1,1) translateY(0); }
228+
15% { transform: scale(1.3,.6) translateY(10px);
229+
-webkit-transform: scale(1.3,.6) translateY(10px); }
230+
17% { transform: scale(1,1) translateY(0px);
231+
-webkit-transform: scale(1,1) translateY(0px); }
232+
25% { transform: scale(.8,1.6) translateY(-60px);
233+
-webkit-transform: scale(.8,1.6) translateY(-60px); }
234+
35% { transform: scale(.9,1.1) translateY(-100px);
235+
-webkit-transform: scale(.9,1.1) translateY(-100px); }
236+
42% { transform: scale(1.2,1) translateY(-90px);
237+
-webkit-transform: scale(1.2,1) translateY(-90px); }
238+
56% { transform: scale(1,1) translateY(0);
239+
-webkit-transform: scale(1,1) translateY(0); }
240+
58% { transform: scale(1.1,.8) translateY(5px);
241+
-webkit-transform: scale(1.1,.8) translateY(5px); }
242+
63% { transform: scale(1,1) translateY(-7px);
243+
-webkit-transform: scale(1,1) translateY(-7px); }
244+
68% { transform: scale(1,1) translateY(0);
245+
-webkit-transform: scale(1,1) translateY(0); }
246+
}
247+
248+
#loadingName {
249+
font-weight: 400;
250+
/*border-top: 2px dotted rgba(255, 255, 255, 0.1);*/
251+
min-width: 100px;
252+
font-size: 0.8em;
253+
color: rgba(255, 255, 255, 0.5);
254+
text-align: center;
255+
}
256+
257+
.invert #loadingName {
258+
color: rgba(0, 0, 0, 0.5);
184259
}

‎metacitygl/extensions/gtlf/loader.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ export class GLTFLoader {
1212

1313
load(data: GLTFLoaderInput, callback: (output: GLTFLoaderOutput) => void) {
1414
this.workerPool.process({
15-
pointInstanceModel: data.pointInstanceModel
15+
pointInstanceModel: data.pointInstanceModel,
16+
baseURI: window.location.origin
1617
}, callback);
1718
}
1819
}

‎metacitygl/extensions/gtlf/types.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ export interface GLTFLoaderInput {
22
pointInstanceModel: string;
33
}
44

5-
export interface GLTFWorkerInput extends GLTFLoaderInput {}
5+
export interface GLTFWorkerInput extends GLTFLoaderInput {
6+
baseURI: string;
7+
}
68

79
export interface GLTFLoaderOutput {
810
positions: Float32Array;

‎metacitygl/extensions/gtlf/worker.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ declare var self: any;
44

55
//eslint-disable-next-line no-restricted-globals
66
self.onmessage = async (message: MessageEvent) => {
7-
const { pointInstanceModel } = message.data;
8-
const data = await Utils.loadGLTF(pointInstanceModel);
7+
const { pointInstanceModel, baseURI } = message.data;
8+
const url = new URL(pointInstanceModel, baseURI).href;
9+
const data = await Utils.loadGLTF(url);
910

1011
//eslint-disable-next-line no-restricted-globals
1112
const transferable = [data.positions.buffer, data.dots.buffer];

‎metacitygl/extensions/metacity/layers/tree.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,23 @@ export class TreeLayer extends Layer {
1616
this.treeConfig = props.tree;
1717
}
1818

19-
setup() {
19+
setup(onLoaded: CallableFunction) {
2020
if (!this.context)
2121
return;
2222

23+
let init = false;
2324
this.treeWorker = new TreeWorker();
2425
this.treeWorker.onmessage = (event) => {
2526
const data = event.data as TreeWorkerOutput;
2627
this.updateView(data);
28+
29+
if (!init) {
30+
init = true;
31+
onLoaded();
32+
}
2733
};
2834

35+
console.log("TreeLayer setup");
2936
this.treeWorker.postMessage({
3037
api: this.api,
3138
color: this.color,
@@ -73,8 +80,19 @@ export class TreeLayer extends Layer {
7380
{
7481
const model = MetacityGL.Graphics.Models.TreeModel.create(data as MetacityGL.Utils.Types.TreeData);
7582
this.treeModel = model;
83+
model.uniforms = {
84+
grayscale: 0
85+
};
7686
this.context.add(model);
7787
}
7888
}
7989
}
90+
91+
setGrayscale(value: number) {
92+
if(this.treeModel) {
93+
this.treeModel.uniforms = {
94+
grayscale: value
95+
};
96+
}
97+
}
8098
}

0 commit comments

Comments
 (0)