Skip to content

Commit 992dcc8

Browse files
nartcnartc
committed
chore(soba): add a unique attribute to ngtsHtmlContent directive
1 parent 57c0568 commit 992dcc8

File tree

11 files changed

+139
-25
lines changed

11 files changed

+139
-25
lines changed

‎apps/kitchen-sink/src/app/soba/basic/experience.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,15 @@ import {
1010
input,
1111
signal,
1212
} from '@angular/core';
13-
import { NgtArgs, extend } from 'angular-three';
13+
import { NgtArgs } from 'angular-three';
1414
import { NgtpBloom, NgtpEffectComposer, NgtpGlitch } from 'angular-three-postprocessing';
1515
import { NgtsOrbitControls } from 'angular-three-soba/controls';
1616
import { injectGLTF } from 'angular-three-soba/loaders';
1717
import { NgtsAnimation, injectAnimations } from 'angular-three-soba/misc';
1818
import { injectMatcapTexture } from 'angular-three-soba/staging';
19-
import * as THREE from 'three';
2019
import { Bone, Group, MeshStandardMaterial, Object3D, SkinnedMesh } from 'three';
2120
import { GLTF } from 'three-stdlib';
2221

23-
extend(THREE);
24-
2522
export const selectedAction = signal('Strut');
2623
export const bloom = signal(false);
2724
export const glitch = signal(false);

‎apps/kitchen-sink/src/app/soba/decal/experience.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
Signal,
99
viewChild,
1010
} from '@angular/core';
11-
import { extend, injectBeforeRender, NgtArgs } from 'angular-three';
11+
import { injectBeforeRender, NgtArgs } from 'angular-three';
1212
import { NgtsText } from 'angular-three-soba/abstractions';
1313
import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
1414
import { NgtsOrbitControls } from 'angular-three-soba/controls';
@@ -21,11 +21,8 @@ import {
2121
NgtsRenderTexture,
2222
NgtsRenderTextureContent,
2323
} from 'angular-three-soba/staging';
24-
import * as THREE from 'three';
2524
import { Mesh } from 'three';
2625

27-
extend(THREE);
28-
2926
@Component({
3027
selector: 'app-dodecahedron',
3128
standalone: true,

‎apps/kitchen-sink/src/app/soba/html-chart/experience.ts

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import {
2+
afterNextRender,
3+
ChangeDetectionStrategy,
4+
Component,
5+
CUSTOM_ELEMENTS_SCHEMA,
6+
effect,
7+
ElementRef,
8+
inject,
9+
Injector,
10+
viewChild,
11+
} from '@angular/core';
12+
import { NgtArgs, NgtHTML } from 'angular-three';
13+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
14+
import { NgtsHTML, NgtsHTMLContent } from 'angular-three-soba/misc';
15+
16+
declare const Chart: any;
17+
18+
@Component({
19+
selector: 'app-chart-container',
20+
standalone: true,
21+
template: `
22+
<canvas #chartContainer></canvas>
23+
`,
24+
host: {
25+
class: 'block w-[320px]',
26+
},
27+
changeDetection: ChangeDetectionStrategy.OnPush,
28+
})
29+
export class ChartContainer extends NgtHTML {
30+
chartContainer = viewChild.required<ElementRef<HTMLCanvasElement>>('chartContainer');
31+
data = Array.from({ length: 6 }, () => Math.random() * 100);
32+
33+
constructor() {
34+
super();
35+
// NOTE: I'm doing this dirty because I am lazy.
36+
const injector = inject(Injector);
37+
afterNextRender(() => {
38+
const chart = new Chart(this.chartContainer().nativeElement, {
39+
type: 'bar',
40+
data: {
41+
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
42+
datasets: [{ label: '# of Votes', data: this.data, borderWidth: 1 }],
43+
},
44+
options: { scales: { y: { beginAtZero: true } } },
45+
});
46+
47+
effect(
48+
(onCleanup) => {
49+
const id = setInterval(() => {
50+
// randomize the data
51+
this.data.forEach((_, index) => {
52+
this.data[index] = Math.random() * 100;
53+
});
54+
chart.update();
55+
}, 1000);
56+
onCleanup(() => clearInterval(id));
57+
},
58+
{ injector },
59+
);
60+
});
61+
}
62+
}
63+
64+
@Component({
65+
standalone: true,
66+
template: `
67+
<ngt-color attach="background" *args="['#f78b3d']" />
68+
69+
<ngt-ambient-light />
70+
<ngt-directional-light [intensity]="2 * Math.PI" [position]="3" />
71+
72+
<ngt-mesh>
73+
<ngt-box-geometry *args="[8.5, 4, 0.5]" />
74+
<ngt-mesh-toon-material color="#fbb03b" />
75+
76+
<ngts-html [options]="{ occlude: true, transform: true, position: [0, 0, 0.3] }">
77+
<div [ngts-html-content]="{ distanceFactor: 0 }">
78+
<app-chart-container />
79+
</div>
80+
</ngts-html>
81+
</ngt-mesh>
82+
83+
<ngts-orbit-controls [options]="{ autoRotate: true }" />
84+
`,
85+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
86+
changeDetection: ChangeDetectionStrategy.OnPush,
87+
imports: [NgtArgs, NgtsOrbitControls, NgtsHTML, NgtsHTMLContent, ChartContainer],
88+
})
89+
export class Experience {
90+
protected readonly Math = Math;
91+
}

‎apps/kitchen-sink/src/app/soba/html-chart/html-chart.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { DOCUMENT } from '@angular/common';
2+
import { afterNextRender, ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
3+
import { NgtCanvas } from 'angular-three';
4+
import { Experience } from './experience';
5+
6+
@Component({
7+
standalone: true,
8+
template: `
9+
<ngt-canvas [sceneGraph]="sceneGraph" [camera]="{ position: [0, 0, 10] }" />
10+
`,
11+
changeDetection: ChangeDetectionStrategy.OnPush,
12+
host: { class: 'html-chart-soba' },
13+
imports: [NgtCanvas],
14+
})
15+
export default class HtmlChart {
16+
sceneGraph = Experience;
17+
18+
constructor() {
19+
const document = inject(DOCUMENT);
20+
let script: HTMLScriptElement | undefined = undefined;
21+
22+
afterNextRender(() => {
23+
script = document.createElement('script');
24+
script.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js';
25+
document.head.appendChild(script);
26+
});
27+
28+
inject(DestroyRef).onDestroy(() => {
29+
script?.remove();
30+
});
31+
}
32+
}

‎apps/kitchen-sink/src/app/soba/hud/experience.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,13 @@ import {
99
signal,
1010
viewChild,
1111
} from '@angular/core';
12-
import { NgtArgs, NgtPortal, NgtPortalContent, extend, injectBeforeRender, injectStore } from 'angular-three';
12+
import { NgtArgs, NgtPortal, NgtPortalContent, injectBeforeRender, injectStore } from 'angular-three';
1313
import { NgtsText } from 'angular-three-soba/abstractions';
1414
import { NgtsOrthographicCamera, NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
1515
import { NgtsOrbitControls } from 'angular-three-soba/controls';
1616
import { NgtsEnvironment, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
17-
import * as THREE from 'three';
1817
import { Matrix4, Mesh, Scene } from 'three';
1918

20-
extend(THREE);
21-
2219
@Component({
2320
selector: 'app-torus',
2421
standalone: true,

‎apps/kitchen-sink/src/app/soba/lod/experience.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
2-
import { extend, NgtEuler, NgtVector3 } from 'angular-three';
2+
import { NgtEuler, NgtVector3 } from 'angular-three';
33
import { NgtsOrbitControls } from 'angular-three-soba/controls';
44
import { injectGLTF } from 'angular-three-soba/loaders';
55
import { NgtsBakeShadows } from 'angular-three-soba/misc';
66
import { NgtsDetailed } from 'angular-three-soba/performances';
77
import { NgtsEnvironment } from 'angular-three-soba/staging';
8-
import * as THREE from 'three';
98
import { Mesh, MeshStandardMaterial } from 'three';
109
import { GLTF } from 'three-stdlib';
1110

12-
extend(THREE);
13-
1411
const positions = [...Array(800)].map(() => ({
1512
position: [40 - Math.random() * 80, 40 - Math.random() * 80, 40 - Math.random() * 80],
1613
rotation: [Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2],

‎apps/kitchen-sink/src/app/soba/render-texture/experience.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,13 @@ import {
88
signal,
99
viewChild,
1010
} from '@angular/core';
11-
import { NgtArgs, extend, injectBeforeRender } from 'angular-three';
11+
import { NgtArgs, injectBeforeRender } from 'angular-three';
1212
import { NgtsText } from 'angular-three-soba/abstractions';
1313
import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
1414
import { NgtsOrbitControls } from 'angular-three-soba/controls';
1515
import { NgtsContactShadows, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
16-
import * as THREE from 'three';
1716
import { Mesh } from 'three';
1817

19-
extend(THREE);
20-
2118
@Component({
2219
selector: 'app-dodecahedron',
2320
standalone: true,

‎apps/kitchen-sink/src/app/soba/shaky/experience.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
2-
import { extend, injectBeforeRender, injectStore, NgtArgs } from 'angular-three';
2+
import { injectBeforeRender, injectStore, NgtArgs } from 'angular-three';
33
import { NgtsOrbitControls } from 'angular-three-soba/controls';
44
import { NgtsCameraShake, NgtsEnvironment } from 'angular-three-soba/staging';
5-
import * as THREE from 'three';
65
import { Group, Vector3 } from 'three';
76
import { RectAreaLightUniformsLib } from 'three-stdlib';
87
import { Model } from './model';
98

10-
extend(THREE);
11-
129
RectAreaLightUniformsLib.init();
1310

1411
@Component({

‎apps/kitchen-sink/src/app/soba/soba.routes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ const routes: Routes = [
2525
path: 'decal',
2626
loadComponent: () => import('./decal/decal'),
2727
},
28+
{
29+
path: 'html-chart',
30+
loadComponent: () => import('./html-chart/html-chart'),
31+
},
2832
{
2933
path: '',
3034
redirectTo: 'basic',

‎apps/kitchen-sink/src/app/soba/soba.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
22
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
3+
import { extend } from 'angular-three';
4+
import * as THREE from 'three';
5+
6+
extend(THREE);
37

48
@Component({
59
standalone: true,
@@ -29,5 +33,5 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
2933
host: { class: 'soba' },
3034
})
3135
export default class Soba {
32-
examples = ['basic', 'hud', 'render-texture', 'shaky', 'lod', 'decal'];
36+
examples = ['basic', 'hud', 'render-texture', 'shaky', 'lod', 'decal', 'html-chart'];
3337
}

‎libs/soba/misc/src/lib/html/html-content.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ const defaultHtmlContentOptions: NgtsHTMLContentOptions = {
109109
`,
110110
changeDetection: ChangeDetectionStrategy.OnPush,
111111
imports: [NgTemplateOutlet],
112+
host: { 'data-ngts-html-content': '' },
112113
})
113114
export class NgtsHTMLContent extends NgtHTML {
114115
options = input(defaultHtmlContentOptions, {

0 commit comments

Comments
 (0)