Skip to content

Commit c56b03e

Browse files
nartcnartc
committed
refactor(core): refactor more with no-store renderer
1 parent 18cafe1 commit c56b03e

File tree

17 files changed

+385
-409
lines changed

17 files changed

+385
-409
lines changed

‎apps/kitchen-sink-new/src/app/misc/basic/scene.ts

Lines changed: 117 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Attribute,
23
ChangeDetectionStrategy,
34
Component,
45
CUSTOM_ELEMENTS_SCHEMA,
@@ -7,7 +8,7 @@ import {
78
signal,
89
viewChild,
910
} from '@angular/core';
10-
import { NgtArgs, NgtPortalDeclarations, NgtVector3 } from 'angular-three';
11+
import { injectBeforeRender, injectStore, NgtArgs, NgtPortalDeclarations, NgtVector3 } from 'angular-three';
1112
import * as THREE from 'three';
1213

1314
@Component({
@@ -56,85 +57,133 @@ export class Box {
5657
position = input<NgtVector3>(0);
5758
color = input('turquoise');
5859

60+
constructor(@Attribute('context') context: string) {
61+
const store = injectStore();
62+
console.log({ context, store: store.snapshot.id, previous: store.snapshot.previousRoot });
63+
}
64+
5965
onAttach(event: any) {
6066
console.log('in box', event);
6167
}
6268
}
6369

70+
@Component({
71+
selector: 'app-nested-box',
72+
template: `
73+
<ngt-mesh [position]="position()">
74+
<ngt-box-geometry *args="[0.5, 0.5, 0.5]" />
75+
<ngt-mesh-basic-material [color]="color()" (attached)="onAttach($event)" />
76+
77+
<ng-content>
78+
<app-box context="in nested box in root" [position]="position()" />
79+
</ng-content>
80+
81+
<ng-content select="[data-children]" />
82+
</ngt-mesh>
83+
`,
84+
imports: [NgtArgs, Box],
85+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
86+
changeDetection: ChangeDetectionStrategy.OnPush,
87+
})
88+
export class NestedBox {
89+
position = input<NgtVector3>(0);
90+
color = input('turquoise');
91+
92+
onAttach(event: any) {
93+
console.log('in nested box', event);
94+
}
95+
}
96+
6497
@Component({
6598
selector: 'app-scene',
6699
template: `
67100
<ngt-ambient-light [intensity]="Math.PI" />
101+
<ngt-directional-light [position]="5" [intensity]="Math.PI" />
68102
69103
<ngt-group #group>
104+
<!-- regular old three element -->
70105
<ngt-mesh (pointerover)="color.set('orange')" (pointerout)="color.set('hotpink')">
71106
<ngt-sphere-geometry *args="[0.5, 32, 32]" />
72107
<ngt-mesh-toon-material [color]="color()" (attached)="onAttach($event)" />
73108
</ngt-mesh>
74109
75-
<!--
76-
@if (show()) {
77-
<ngt-mesh [position]="[3, 0, 0]">
78-
<ngt-icosahedron-geometry />
79-
<ngt-mesh-normal-material />
80-
</ngt-mesh>
81-
}
82-
-->
83-
84-
<!--
85-
<app-box [position]="[1, 0, 0]" />
86-
<app-box [position]="[-1, 0, 0]" color="red" />
87-
<app-box [position]="[0, 1, 0]">
88-
<ngt-mesh-standard-material color="green" />
89-
</app-box>
90-
91-
<app-box [position]="[0, -1, 0]" color="purple" />
92-
93-
@if (show()) {
94-
<app-box [position]="[1, 1, 0]">
95-
@if (show()) {
96-
<ngt-mesh-phong-material color="yellow" />
97-
}
98-
</app-box>
99-
}
100-
101-
<app-box [position]="[-1, -1, 0]" color="brown">
102-
<app-box data-children [position]="[-0.5, -0.5, 0]" color="pink" />
103-
</app-box>
104-
105-
<app-box [position]="[-1, 1, 0]">
106-
<ngt-mesh-lambert-material color="orange" />
107-
<app-box data-children [position]="[-0.5, 0.5, 0]" color="skyblue" />
108-
</app-box>
109-
110-
<app-box [position]="[1, -1, 0]">
111-
@if (true) {
112-
<ngt-mesh-normal-material />
113-
}
114-
115-
@if (show()) {
116-
<app-box data-children [position]="[0.5, -0.5, 0]" color="black" />
117-
}
118-
</app-box>
119-
-->
120-
121-
<!--
122-
<app-condition-box [position]="[0, 2, 0]" />
123-
@if (show()) {
124-
<app-condition-box [position]="[0, -2, 0]" />
125-
}
126-
-->
110+
<!-- <app-nested-box [position]="[-3, 0, 0]" />-->
111+
112+
<!-- &lt;!&ndash; three element under condition &ndash;&gt;-->
113+
<!-- @if (show()) {-->
114+
<!-- <ngt-mesh [position]="[3, 0, 0]">-->
115+
<!-- <ngt-icosahedron-geometry />-->
116+
<!-- <ngt-mesh-normal-material />-->
117+
<!-- </ngt-mesh>-->
118+
<!-- }-->
119+
120+
<!-- &lt;!&ndash; component wrapping three elemnent &ndash;&gt;-->
121+
<!-- <app-box [position]="[1, 0, 0]" />-->
122+
123+
<!-- &lt;!&ndash; with input for default content &ndash;&gt;-->
124+
<!-- <app-box [position]="[-1, 0, 0]" color="red" />-->
125+
126+
<!-- &lt;!&ndash; with custom ng content &ndash;&gt;-->
127+
<!-- <app-box [position]="[0, 1, 0]">-->
128+
<!-- <ngt-mesh-standard-material color="green" />-->
129+
<!-- </app-box>-->
130+
131+
<!-- &lt;!&ndash; with property binding for input for default content &ndash;&gt;-->
132+
<!-- <app-box [position]="[0, -1, 0]" [color]="color()" />-->
133+
134+
<!-- &lt;!&ndash; component under condition &ndash;&gt;-->
135+
<!-- @if (show()) {-->
136+
<!-- <app-box [position]="[1, 1, 0]">-->
137+
<!-- @if (show()) {-->
138+
<!-- <ngt-mesh-phong-material color="yellow" />-->
139+
<!-- }-->
140+
<!-- </app-box>-->
141+
<!-- }-->
142+
143+
<!-- &lt;!&ndash; component with component as content &ndash;&gt;-->
144+
<!-- <app-box [position]="[-1, -1, 0]" color="brown" context="in root">-->
145+
<!-- <app-box data-children [position]="[-0.5, -0.5, 0]" color="pink" context="in box content in root" />-->
146+
<!-- </app-box>-->
147+
148+
<!-- &lt;!&ndash; component with both content projection slots &ndash;&gt;-->
149+
<!-- <app-box [position]="[-1, 1, 0]">-->
150+
<!-- <ngt-mesh-lambert-material color="orange" />-->
151+
<!-- <app-box data-children [position]="[-0.5, 0.5, 0]" color="skyblue" />-->
152+
<!-- </app-box>-->
153+
154+
<!-- &lt;!&ndash; component with conditional content slots &ndash;&gt;-->
155+
<!-- <app-box [position]="[1, -1, 0]">-->
156+
<!-- @if (true) {-->
157+
<!-- <ngt-mesh-normal-material />-->
158+
<!-- }-->
159+
160+
<!-- @if (show()) {-->
161+
<!-- <app-box data-children [position]="[0.5, -0.5, 0]" color="black" />-->
162+
<!-- }-->
163+
<!-- </app-box>-->
164+
165+
<!-- &lt;!&ndash; component with conditional template &ndash;&gt;-->
166+
<!-- <app-condition-box [position]="[0, 2, 0]" />-->
167+
168+
<!-- &lt;!&ndash; component with conditional template under condition &ndash;&gt;-->
169+
<!-- @if (show()) {-->
170+
<!-- <app-condition-box [position]="[0, -2, 0]" />-->
171+
<!-- }-->
127172
</ngt-group>
128-
<!--
173+
174+
<!-- portal -->
129175
<ngt-portal [container]="virtualScene">
130176
<ngt-group *portalContent>
131-
<app-box />
132-
<app-condition-box />
177+
<!-- component inside portal -->
178+
<app-box context="in portal" />
179+
180+
@if (show()) {
181+
<app-box context="in portal in condition" />
182+
}
133183
</ngt-group>
134184
</ngt-portal>
135-
-->
136185
`,
137-
imports: [NgtArgs, Box, ConditionBox, NgtPortalDeclarations],
186+
imports: [NgtArgs, Box, ConditionBox, NgtPortalDeclarations, NestedBox],
138187
changeDetection: ChangeDetectionStrategy.OnPush,
139188
schemas: [CUSTOM_ELEMENTS_SCHEMA],
140189
host: {
@@ -153,16 +202,16 @@ export class Scene {
153202
private groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
154203

155204
constructor() {
156-
// setInterval(() => {
157-
// this.show.update((v) => !v);
158-
// this.sphereArgs.update((v) => [v[0] === 0.5 ? 1 : 0.5, v[1], v[2]]);
159-
// }, 2500);
160-
//
161-
// injectBeforeRender(() => {
162-
// const group = this.groupRef().nativeElement;
163-
// group.rotation.x += 0.01;
164-
// group.rotation.y += 0.01;
165-
// });
205+
setInterval(() => {
206+
this.show.update((v) => !v);
207+
this.sphereArgs.update((v) => [v[0] === 0.5 ? 1 : 0.5, v[1], v[2]]);
208+
}, 2500);
209+
210+
injectBeforeRender(({ delta }) => {
211+
const group = this.groupRef().nativeElement;
212+
group.rotation.x += delta;
213+
group.rotation.y += delta;
214+
});
166215
}
167216

168217
onDocumentClick(event: MouseEvent) {

‎libs/core/dom/src/lib/canvas.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export class NgtCanvasContent {
8080
host: {
8181
style: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;',
8282
'[style.pointerEvents]': 'hbPointerEvents()',
83+
ngSkipHydration: 'true',
8384
},
8485
changeDetection: ChangeDetectionStrategy.OnPush,
8586
})

‎libs/core/nativescript/README.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎libs/core/nativescript/ng-package.json

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎libs/core/nativescript/src/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)