Skip to content

Commit 13e69aa

Browse files
nartcnartc
committed
chore: more clean up
1 parent 7276467 commit 13e69aa

File tree

14 files changed

+104
-110
lines changed

14 files changed

+104
-110
lines changed

‎apps/example/src/app/scene/blue-scene.component.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, ViewChild } from '@angular/core';
22
import { injectBeforeRender, NgtStore } from 'angular-three';
3+
import { CursorPointer } from './cursor';
34

45
@Component({
56
standalone: true,
67
template: `
78
<ngt-spot-light [position]="5" />
89
<ngt-point-light [position]="-5" />
910
10-
<ngt-mesh #cube>
11+
<ngt-mesh #cube cursorPointer (pointerover)="hovered = true" (pointerout)="hovered = false">
1112
<ngt-icosahedron-geometry />
12-
<ngt-mesh-standard-material color="blue" />
13+
<ngt-mesh-standard-material [color]="hovered ? 'green' : 'blue'" />
1314
</ngt-mesh>
1415
`,
16+
imports: [CursorPointer],
1517
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1618
})
1719
export default class BlueScene {
1820
@ViewChild('cube', { static: true }) cube!: ElementRef<THREE.Mesh>;
1921

2022
readonly store = inject(NgtStore);
2123

24+
hovered = false;
25+
2226
constructor() {
2327
injectBeforeRender(({ clock }) => {
2428
this.cube.nativeElement.rotation.x = clock.elapsedTime;
2529
this.cube.nativeElement.rotation.y = clock.elapsedTime;
2630
});
27-
console.log(this.store.get('scene'));
31+
console.log('blue instantiated', this.store.get('scene'));
2832
}
2933

3034
ngOnDestroy() {

‎apps/example/src/app/scene/cursor.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { DOCUMENT } from '@angular/common';
2+
import { Directive, ElementRef, inject, OnInit, Renderer2 } from '@angular/core';
3+
import { getLocalState, injectNgtDestroy } from 'angular-three';
4+
5+
@Directive({ selector: 'ngt-mesh[cursorPointer]', standalone: true })
6+
export class CursorPointer implements OnInit {
7+
private readonly elementRef = inject(ElementRef) as ElementRef<THREE.Mesh>;
8+
private readonly renderer = inject(Renderer2);
9+
private readonly document = inject(DOCUMENT);
10+
private pointerOver?: () => void;
11+
private pointerOut?: () => void;
12+
13+
constructor() {
14+
injectNgtDestroy(() => {
15+
this.pointerOver?.();
16+
this.pointerOut?.();
17+
});
18+
}
19+
20+
ngOnInit() {
21+
const localState = getLocalState(this.elementRef.nativeElement);
22+
23+
if (localState.eventCount) {
24+
const originalPointerOver = localState.handlers.pointerover;
25+
this.pointerOver = this.renderer.listen(this.elementRef.nativeElement, 'pointerover', (event) => {
26+
this.document.body.style.cursor = 'pointer';
27+
originalPointerOver?.(event);
28+
});
29+
30+
const originalPointerOut = localState.handlers.pointerout;
31+
this.pointerOut = this.renderer.listen(this.elementRef.nativeElement, 'pointerout', (event) => {
32+
this.document.body.style.cursor = 'auto';
33+
originalPointerOut?.(event);
34+
});
35+
}
36+
}
37+
}

‎apps/example/src/app/scene/red-scene.component.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, ViewChild } from '@angular/core';
22
import { injectBeforeRender, NgtStore } from 'angular-three';
3+
import { CursorPointer } from './cursor';
34

45
@Component({
56
standalone: true,
67
template: `
78
<ngt-point-light [position]="5" />
89
<ngt-spot-light [position]="-5" />
910
10-
<ngt-mesh #cube>
11+
<ngt-mesh #cube cursorPointer (pointerover)="hovered = true" (pointerout)="hovered = false">
1112
<ngt-box-geometry />
12-
<ngt-mesh-standard-material color="red" />
13+
<ngt-mesh-standard-material [color]="hovered ? 'yellow' : 'red'" />
1314
</ngt-mesh>
1415
`,
16+
imports: [CursorPointer],
1517
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1618
})
1719
export default class RedScene {
1820
@ViewChild('cube', { static: true }) cube!: ElementRef<THREE.Mesh>;
1921

2022
readonly store = inject(NgtStore);
2123

24+
hovered = false;
25+
2226
constructor() {
2327
injectBeforeRender(({ clock }) => {
2428
this.cube.nativeElement.rotation.x = clock.elapsedTime;
2529
this.cube.nativeElement.rotation.y = clock.elapsedTime;
2630
});
27-
console.log(this.store.get('scene'));
31+
console.log('red instantiated', this.store.get('scene'));
2832
}
2933

3034
ngOnDestroy() {

‎libs/angular-three/src/lib/canvas.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ export class NgtCanvas extends NgtRxStore<NgtCanvasInputs> implements OnInit, On
7171
});
7272
}
7373

74-
@HostBinding('class.ngt-canvas') readonly hostClass = true;
75-
@HostBinding('style.pointerEvents') get pointerEvents() {
74+
@HostBinding('class.ngt-canvas') readonly hbClass = true;
75+
@HostBinding('style.pointerEvents') get hbPointerEvents() {
7676
return this.get('eventSource') !== this.host.nativeElement ? 'none' : 'auto';
7777
}
7878

@@ -209,9 +209,7 @@ export class NgtCanvas extends NgtRxStore<NgtCanvasInputs> implements OnInit, On
209209
}
210210

211211
// emit created event if observed
212-
if (this.created.observed) {
213-
this.created.emit(this.store.get());
214-
}
212+
if (this.created.observed) this.created.emit(this.store.get());
215213

216214
// render
217215
if (this.glRef) this.glRef.destroy();
@@ -246,7 +244,7 @@ export class NgtCanvas extends NgtRxStore<NgtCanvasInputs> implements OnInit, On
246244
const originalDetectChanges = this.cdr.detectChanges.bind(this.cdr);
247245
this.cdr.detectChanges = () => {
248246
originalDetectChanges();
249-
safeDetectChanges(this.glRef?.changeDetectorRef);
247+
safeDetectChanges(this.glRef?.changeDetectorRef);
250248
};
251249
}
252250

‎libs/angular-three/src/lib/di/before-render.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { injectNgtDestroy } from './destroy';
66
export function injectBeforeRender(cb: NgtBeforeRenderRecord['callback'], priority = 0) {
77
try {
88
const store = inject(NgtStore);
9-
const sub = store.get('internal').subscribe((state) => cb(state), priority, store);
9+
const sub = store.get('internal').subscribe(cb, priority, store);
1010
injectNgtDestroy(() => void sub());
1111
return sub;
1212
} catch (e) {

‎libs/angular-three/src/lib/di/ref.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,17 @@ export function injectNgtRef<T>(initialValue: NgtInjectedRef<T> | (T | null) = n
3838
const cdRefs = [] as ChangeDetectorRef[];
3939
const ref$ = new BehaviorSubject<T>(lastValue);
4040

41-
const { destroy$, cdr } = injectNgtDestroy(() => {
42-
ref$.complete();
43-
});
41+
const { destroy$, cdr } = injectNgtDestroy(() => void ref$.complete());
4442

4543
cdRefs.push(cdr);
4644

4745
const obs$ = ref$.asObservable().pipe(distinctUntilChanged(), takeUntil(destroy$));
4846

49-
const subscribe: Subscribe<T> = (callback) => {
50-
return obs$.subscribe((current) => {
47+
const subscribe: Subscribe<T> = (callback) =>
48+
obs$.subscribe((current) => {
5149
callback(current, lastValue);
5250
lastValue = current;
5351
});
54-
};
5552

5653
const useCDR = (cdr: ChangeDetectorRef) => void cdRefs.push(cdr);
5754

‎libs/angular-three/src/lib/directives/args.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ export class NgtArgs extends NgtCommonDirective {
66
private injectedArgs: any[] = [];
77

88
@Input() set args(args: any[] | null) {
9-
if (args == null || !Array.isArray(args)) return;
10-
if (args.length === 1 && args[0] === null) return;
9+
if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null)) return;
1110
this.injected = false;
1211
this.injectedArgs = args;
1312
this.createView();

‎libs/angular-three/src/lib/portal.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,7 @@ export interface NgtPortalInputs {
5353
>;
5454
}
5555

56-
@Directive({
57-
selector: 'ngt-portal-before-render',
58-
standalone: true,
59-
})
56+
@Directive({ selector: '[ngtPortalBeforeRender]', standalone: true })
6057
export class NgtPortalBeforeRender implements OnInit, OnDestroy {
6158
private readonly portalStore = inject(NgtStore);
6259

@@ -113,8 +110,9 @@ export class NgtPortalContent {
113110
standalone: true,
114111
template: `
115112
<ng-container #portalContentAnchor>
116-
<ngt-portal-before-render
113+
<ng-container
117114
*ngIf="autoRender && portalContentRendered"
115+
ngtPortalBeforeRender
118116
[renderPriority]="autoRenderPriority"
119117
[parentScene]="parentScene"
120118
[parentCamera]="parentCamera"

‎libs/angular-three/src/lib/renderer/provider.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,8 @@ export type NgtRendererProviderOptions = {
1010
};
1111

1212
export function provideNgtRenderer({ store, changeDetectorRef, compoundPrefixes = [] }: NgtRendererProviderOptions) {
13-
if (!compoundPrefixes.includes('ngts')) {
14-
compoundPrefixes.push('ngts');
15-
}
16-
17-
if (!compoundPrefixes.includes('ngtp')) {
18-
compoundPrefixes.push('ngtp');
19-
}
13+
if (!compoundPrefixes.includes('ngts')) compoundPrefixes.push('ngts');
14+
if (!compoundPrefixes.includes('ngtp')) compoundPrefixes.push('ngtp');
2015

2116
return makeEnvironmentProviders([
2217
{ provide: RendererFactory2, useClass: NgtRendererFactory },

‎libs/angular-three/src/lib/renderer/renderer.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,18 @@ import { is } from '../utils/is';
1717
import { safeDetectChanges } from '../utils/safe-detect-changes';
1818
import { NGT_COMPOUND_PREFIXES } from './di';
1919
import { NgtRendererClassId } from './enums';
20-
import { NgtRendererNode, NgtRendererState, NgtRendererStore } from './state';
20+
import { NgtRendererNode, NgtRendererState, NgtRendererStore } from './store';
2121
import { attachThreeChild, kebabToPascal, processThreeEvent, removeThreeChild, SPECIAL_DOM_TAG } from './utils';
2222

2323
@Injectable()
2424
export class NgtRendererFactory implements RendererFactory2 {
2525
private readonly delegateRendererFactory = inject(RendererFactory2, { skipSelf: true });
2626
private readonly catalogue = inject(NGT_CATALOGUE);
2727

28-
private rendererMap = new Map<string, Renderer2>();
29-
private routedSet = new Set<string>();
30-
private rendererStore = new NgtRendererStore({
28+
private readonly rendererMap = new Map<string, Renderer2>();
29+
private readonly routedSet = new Set<string>();
30+
// all Renderer instances share the same Store
31+
private readonly rendererStore = new NgtRendererStore({
3132
store: inject(NgtStore),
3233
cdr: inject(ChangeDetectorRef),
3334
portals: [],

0 commit comments

Comments
 (0)