refactor(core): clean up renderer

Author: nartc

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

@@ -15,7 +15,7 @@ import * as THREE from 'three';
 	template: `
 		@if (true) {
 			<ngt-mesh [position]="position()">
-				<ngt-box-geometry *args="[0.5, 0.5, 0.5]" />
+				<ngt-box-geometry *args="[0.5, 0.5, 0.5]" (attached)="onAttach($event)" />
 
 				<ng-content>
 					<ngt-mesh-normal-material />
@@ -51,18 +51,11 @@ export class ConditionBox {
 	imports: [NgtArgs],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'(document:dblclick)': 'onDocumentDblClick($event)',
-	},
 })
 export class Box {
 	position = input<NgtVector3>(0);
 	color = input('turquoise');
 
-	onDocumentDblClick(event: MouseEvent) {
-		console.log('in box document dbl click', event);
-	}
-
 	onAttach(event: any) {
 		console.log('in box', event);
 	}

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

@@ -27,6 +27,7 @@ import {
 	injectCanvasRootInitializer,
 	injectStore,
 	is,
+	NGT_STORE,
 	NgtCamera,
 	NgtCameraParameters,
 	NgtCanvasConfigurator,
@@ -40,7 +41,7 @@ import {
 	NgtSize,
 	NgtState,
 	NgtVector3,
-	provideStore,
+	storeFactory,
 } from 'angular-three';
 import { NgxResize, provideResizeOptions, ResizeOptions, ResizeResult } from 'ngxtension/resize';
 import * as THREE from 'three';
@@ -73,7 +74,7 @@ export class NgtCanvasContent {
 			emitInitialResult: true,
 			debounce: { scroll: 50, resize: 0 },
 		} as ResizeOptions),
-		provideStore(),
+		{ provide: NGT_STORE, useFactory: storeFactory },
 	],
 	host: {
 		style: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;',

libs/core/src/lib/portal.ts

@@ -21,6 +21,7 @@ import { SPECIAL_INTERNAL_ADD_COMMENT_FLAG } from './renderer/constants';
 import { injectStore, NGT_STORE } from './store';
 import type { NgtComputeFunction, NgtEventManager, NgtSize, NgtState, NgtViewport } from './types';
 import { is } from './utils/is';
+import { makeId } from './utils/make';
 import { omit, pick } from './utils/parameters';
 import { signalState, SignalState } from './utils/signal-state';
 import { updateCamera } from './utils/update';
@@ -63,7 +64,8 @@ function mergeState(
 	events?: NgtPortalState['events'],
 	size?: NgtSize,
 ) {
-	const previousState = previousRoot.snapshot;
+	// we never want to spread the id
+	const { id: _, ...previousState } = previousRoot.snapshot;
 	const state = store.snapshot;
 
 	let viewport: Omit<NgtViewport, 'dpr' | 'initialDpr'> | undefined = undefined;
@@ -105,7 +107,7 @@ function mergeState(
 		{
 			provide: NGT_STORE,
 			useFactory: (previousStore: SignalState<NgtState>) => {
-				const store = signalState({} as NgtState);
+				const store = signalState({ id: makeId() } as NgtState);
 				store.update(mergeState(previousStore, store, null!, new THREE.Vector2(), new THREE.Raycaster()));
 				return store;
 			},
@@ -134,7 +136,7 @@ export class NgtPortal {
 
 	constructor() {
 		effect(() => {
-			let [container, prevState] = [this.container(), this.previousStore()];
+			let [container] = [this.container(), this.previousStore()];
 
 			const [size, events, restState] = [untracked(this.size), untracked(this.events), untracked(this.restState)];
 

libs/core/src/lib/renderer/constants.ts

@@ -1,7 +1,8 @@
 export const NGT_RENDERER_NODE_FLAG = '__ngt_renderer__';
-export const CANVAS_CONTENT_FLAG = '__ngt_renderer_canvas_content_flag__';
+export const CANVAS_CONTENT_FLAG = '__ngt_renderer_canvas_content__';
 export const SPECIAL_INTERNAL_ADD_COMMENT_FLAG = '__ngt_renderer_add_comment__';
 export const SPECIAL_INTERNAL_SET_PARENT_COMMENT_FLAG = '__ngt_renderer_set_parent_comment__';
 export const NGT_MANUAL_INJECTED_STORE = '__ngt_manual_injected_store__';
+export const NGT_GET_NODE_ATTRIBUTE_FLAG = '__ngt_get_node_attribute__';
 
 export const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'disposed'];