angular-three 2.0.0-beta.2 → 2.0.0-beta.21

package/lib/renderer/store.d.ts

@@ -1,27 +1,29 @@
-import { type Injector } from '@angular/core';
-import type { NgtInjectedRef } from '../di/ref';
-import { NgtStore } from '../stores/store';
+import { InjectionToken, Injector } from '@angular/core';
+import type { NgtRef } from '../ref';
+import { type NgtState } from '../store';
 import type { NgtAnyRecord } from '../types';
-import { NgtRendererClassId } from './enums';
-export type NgtRendererRootState = {
-    store: NgtStore;
+import type { NgtSignalStore } from '../utils/signal-store';
+import { NgtRendererClassId } from './utils';
+export declare const NGT_COMPOUND_PREFIXES: InjectionToken<string[]>;
+type NgtRendererRootState = {
+    store: NgtSignalStore<NgtState>;
     compoundPrefixes: string[];
     document: Document;
     portals: Array<NgtRendererNode>;
 };
-export type NgtQueueOp = [type: 'op' | 'cleanUp', op: () => void, done?: true];
+type NgtQueueOp = [type: 'op' | 'cleanUp', op: () => void, done?: true];
 export type NgtRendererState = [
     type: 'three' | 'compound' | 'portal' | 'comment' | 'dom',
     parent: NgtRendererNode | null,
-    injectedParent: NgtRendererNode | NgtInjectedRef<NgtRendererNode> | null,
+    injectedParent: NgtRef<NgtRendererNode> | null,
     children: NgtRendererNode[],
     destroyed: boolean,
-    compound: [applyFirst: boolean, props: Record<string, any>],
+    compound: [applyFirst: boolean, props: NgtAnyRecord],
     compoundParent: NgtRendererNode,
     compounded: NgtRendererNode,
     queueOps: Set<NgtQueueOp>,
-    attributes: Record<string, any>,
-    properties: Record<string, any>,
+    attributes: NgtAnyRecord,
+    properties: NgtAnyRecord,
     rawValue: any,
     ref: any,
     portalContainer: NgtRendererNode,
@@ -31,8 +33,8 @@ export type NgtRendererNode = {
     __ngt_renderer__: NgtRendererState;
 };
 export declare class NgtRendererStore {
-    #private;
-    private readonly root;
+    private root;
+    private comments;
     constructor(root: NgtRendererRootState);
     createNode(type: NgtRendererState[NgtRendererClassId.type], node: NgtAnyRecord): NgtAnyRecord & {
         __ngt_renderer__: NgtRendererState;
@@ -54,10 +56,12 @@ export declare class NgtRendererStore {
     getClosestParentWithCompound(node: NgtRendererNode): NgtRendererNode | null | undefined;
     getCreationState(): {
         injectedArgs: any[];
-        injectedParent: string | import("three").Object3D<import("three").Event> | NgtInjectedRef<import("three").Object3D<import("three").Event>> | null;
-        store: NgtStore;
+        injectedParent: string | NgtRef<import("three").Object3D<import("three").Event>> | null;
+        store: NgtSignalStore<NgtState>;
     };
     destroy(node: NgtRendererNode, parent?: NgtRendererNode): void;
+    private updateNativeProps;
     private firstNonInjectedDirective;
     private tryGetPortalStore;
 }
+export {};

package/lib/renderer/utils.d.ts

@@ -1,22 +1,32 @@
 import { ChangeDetectorRef, NgZone } from '@angular/core';
-import { supportedEvents } from '../dom/events';
-import type { NgtEventHandlers, NgtInstanceNode } from '../types';
-export declare const ROUTED_SCENE = "__ngt_renderer_is_routed_scene__";
-export declare const SPECIAL_INTERNAL_ADD_COMMENT = "__ngt_renderer_add_comment__";
-export declare const SPECIAL_DOM_TAG: {
-    readonly NGT_PORTAL: "ngt-portal";
-    readonly NGT_PRIMITIVE: "ngt-primitive";
-    readonly NGT_VALUE: "ngt-value";
-};
-export declare const SPECIAL_PROPERTIES: {
-    readonly COMPOUND: "ngtCompound";
-    readonly RENDER_PRIORITY: "priority";
-    readonly ATTACH: "attach";
-    readonly VALUE: "rawValue";
-    readonly REF: "ref";
-};
+import { type NgtInstanceNode } from '../instance';
+export declare const enum NgtRendererClassId {
+    type = 0,
+    parent = 1,
+    injectedParent = 2,
+    children = 3,
+    destroyed = 4,
+    compound = 5,
+    compoundParent = 6,
+    compounded = 7,
+    queueOps = 8,
+    attributes = 9,
+    properties = 10,
+    rawValue = 11,
+    ref = 12,
+    portalContainer = 13,
+    injectorFactory = 14
+}
+export declare const enum NgtCompoundClassId {
+    applyFirst = 0,
+    props = 1
+}
+export declare const enum NgtQueueOpClassId {
+    type = 0,
+    op = 1,
+    done = 2
+}
 export declare function attachThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode): void;
 export declare function removeThreeChild(parent: NgtInstanceNode, child: NgtInstanceNode, dispose?: boolean): void;
-export declare function processThreeEvent(instance: NgtInstanceNode, priority: number, eventName: string, callback: (event: any) => void, zone: NgZone, cdr: ChangeDetectorRef, targetCdr?: ChangeDetectorRef | null): () => void;
-export declare function eventToHandler(callback: (event: any) => void): (event: Parameters<Exclude<NgtEventHandlers[(typeof supportedEvents)[number]], undefined>>[0]) => void;
 export declare function kebabToPascal(str: string): string;
+export declare function processThreeEvent(instance: NgtInstanceNode, priority: number, eventName: string, callback: (event: any) => void, zone: NgZone, rootCdr: ChangeDetectorRef, targetCdr?: ChangeDetectorRef | null): () => void;

package/lib/roots.d.ts

@@ -0,0 +1,11 @@
+import { type Injector } from '@angular/core';
+import type { NgtCanvasInputs } from './canvas';
+import { type NgtState } from './store';
+import type { NgtSignalStore } from './utils/signal-store';
+export declare const roots: Map<HTMLCanvasElement, NgtSignalStore<NgtState>>;
+export declare function injectCanvasRootInitializer(injector?: Injector): (canvas: HTMLCanvasElement) => {
+    isConfigured: boolean;
+    destroy: (timeout?: number) => void;
+    configure: (inputs: NgtCanvasInputs) => void;
+};
+export type NgtCanvasConfigurator = ReturnType<ReturnType<typeof injectCanvasRootInitializer>>;

package/lib/routed-scene.d.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { Router } from '@angular/router';
-import { ROUTED_SCENE } from './renderer/utils';
+import { ROUTED_SCENE } from './renderer/constants';
 import * as i0 from "@angular/core";
 export declare class NgtRoutedScene {
     static [ROUTED_SCENE]: boolean;

package/lib/store.d.ts

@@ -0,0 +1,143 @@
+/// <reference types="webxr" />
+import { ElementRef, InjectionToken, Injector } from '@angular/core';
+import { type Observable } from 'rxjs';
+import * as THREE from 'three';
+import type { NgtCamera, NgtDomEvent, NgtEventManager, NgtPointerCaptureTarget, NgtThreeEvent } from './events';
+import type { NgtInstanceNode } from './instance';
+import { type NgtLoop } from './loop';
+import { type NgtSignalStore } from './utils/signal-store';
+export type NgtRenderer = {
+    render: (scene: THREE.Scene, camera: THREE.Camera) => any;
+};
+export type NgtCameraManual = NgtCamera & {
+    manual?: boolean;
+};
+export type NgtDpr = number | [min: number, max: number];
+export type NgtSize = {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};
+export type NgtViewport = NgtSize & {
+    /** The initial pixel ratio */
+    initialDpr: number;
+    /** Current pixel ratio */
+    dpr: number;
+    /** size.width / viewport.width */
+    factor: number;
+    /** Camera distance */
+    distance: number;
+    /** Camera aspect ratio: width / height */
+    aspect: number;
+};
+export type NgtPerformance = {
+    /** Current performance normal, between min and max */
+    current: number;
+    /** How low the performance can go, between 0 and max */
+    min: number;
+    /** How high the performance can go, between min and max */
+    max: number;
+    /** Time until current returns to max in ms */
+    debounce: number;
+    /** Sets current to min, puts the system in regression */
+    regress: () => void;
+};
+export type NgtRenderState = NgtState & {
+    delta: number;
+    frame?: XRFrame;
+};
+export type NgtBeforeRenderEvent<TObject extends NgtInstanceNode = NgtInstanceNode> = {
+    state: NgtRenderState;
+    object: TObject;
+};
+export type NgtBeforeRenderRecord = {
+    callback: (state: NgtRenderState) => void;
+    store: NgtSignalStore<NgtState>;
+    priority?: number;
+};
+export type NgtInternalState = {
+    active: boolean;
+    priority: number;
+    frames: number;
+    lastEvent: ElementRef<NgtDomEvent | null>;
+    interaction: THREE.Object3D[];
+    hovered: Map<string, NgtThreeEvent<NgtDomEvent>>;
+    capturedMap: Map<number, Map<THREE.Object3D, NgtPointerCaptureTarget>>;
+    initialClick: [x: number, y: number];
+    initialHits: THREE.Object3D[];
+    subscribers: NgtBeforeRenderRecord[];
+    subscribe: (callback: NgtBeforeRenderRecord['callback'], priority?: number, store?: NgtSignalStore<NgtState>) => () => void;
+};
+export type NgtState = {
+    /** when all building blocks are initialized */
+    ready: boolean;
+    /** The instance of the renderer */
+    gl: THREE.WebGLRenderer;
+    /** Default camera */
+    camera: NgtCameraManual;
+    /** Default scene */
+    scene: THREE.Scene;
+    /** Default raycaster */
+    raycaster: THREE.Raycaster;
+    /** Default clock */
+    clock: THREE.Clock;
+    /** Event layer interface, contains the event handler and the node they're connected to */
+    events: NgtEventManager<any>;
+    /** XR interface */
+    xr: {
+        connect: () => void;
+        disconnect: () => void;
+    };
+    /** Currently used controls */
+    controls: THREE.EventDispatcher | null;
+    /** Normalized event coordinates */
+    pointer: THREE.Vector2;
+    legacy: boolean;
+    /** Shortcut to gl.outputColorSpace = THREE.LinearSRGBColorSpace */
+    linear: boolean;
+    /** Shortcut to gl.toneMapping = NoTonemapping */
+    flat: boolean;
+    /** Render loop flags */
+    frameloop: 'always' | 'demand' | 'never';
+    /** Adaptive performance interface */
+    performance: NgtPerformance;
+    /** Reactive pixel-size of the canvas */
+    size: NgtSize;
+    /** Reactive size of the viewport in threejs units */
+    viewport: NgtViewport & {
+        getCurrentViewport: (camera?: NgtCamera, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: NgtSize) => Omit<NgtViewport, 'dpr' | 'initialDpr'>;
+    };
+    /** Flags the canvas for render, but doesn't render in itself */
+    invalidate: (frames?: number) => void;
+    /** Advance (render) one step */
+    advance: (timestamp: number, runGlobalEffects?: boolean) => void;
+    /** Shortcut to setting the event layer */
+    setEvents: (events: Partial<NgtEventManager<any>>) => void;
+    /**
+     * Shortcut to manual sizing
+     */
+    setSize: (width: number, height: number, top?: number, left?: number) => void;
+    /** Shortcut to manual setting the pixel ratio */
+    setDpr: (dpr: NgtDpr) => void;
+    /** Shortcut to frameloop flags */
+    setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
+    /** When the canvas was clicked but nothing was hit */
+    /** PointerMissed Observable */
+    pointerMissed$: Observable<MouseEvent>;
+    /** If this state model is layerd (via createPortal) then this contains the previous layer */
+    previousRoot: NgtSignalStore<NgtState> | null;
+    /** Internals */
+    internal: NgtInternalState;
+};
+declare function storeFactory(loop: NgtLoop, document: Document, injector: Injector, parent: NgtSignalStore<NgtState> | null): NgtSignalStore<NgtState>;
+export type NgtStore = ReturnType<typeof storeFactory>;
+export declare const NGT_STORE: InjectionToken<NgtSignalStore<NgtState>>;
+export declare const injectNgtStore: {
+    (): NgtSignalStore<NgtState>;
+    (injectOptions: import("@angular/core").InjectOptions & {
+        optional?: false | undefined;
+    }): NgtSignalStore<NgtState>;
+    (injectOptions: import("@angular/core").InjectOptions): NgtSignalStore<NgtState> | null;
+}, provideNgtStore: (value?: NgtSignalStore<NgtState> | undefined) => import("@angular/core").Provider;
+export {};

package/lib/three-types.d.ts

@@ -1,6 +1,8 @@
 import * as THREE from 'three';
-import type { NgtInjectedRef } from './di/ref';
-import type { NgtAfterAttach, NgtAnyRecord, NgtAttachFunction, NgtBeforeRenderEvent, NgtEventHandlers, NgtInstanceNode } from './types';
+import type { NgtEventHandlers } from './events';
+import type { NgtAfterAttach, NgtAttachFunction, NgtInstanceNode } from './instance';
+import type { NgtBeforeRenderEvent } from './store';
+type NoEvent<T> = Omit<T, 'addEventListener' | 'removeEventListener'>;
 export type NgtNonFunctionKeys<T> = {
     [K in keyof T]-?: T[K] extends Function ? never : K;
 }[keyof T];
@@ -24,13 +26,12 @@ export type NgtVector4 = NgtVectorLike<THREE.Vector4>;
 export type NgtLayers = THREE.Layers | Parameters<THREE.Layers['set']>[0];
 export type NgtQuaternion = THREE.Quaternion | Parameters<THREE.Quaternion['set']>;
 export interface NgtNodeEventMap<TOriginal> {
-    afterAttach: NgtAfterAttach<NgtInstanceNode, TOriginal>;
+    afterAttach: NgtAfterAttach<TOriginal, NgtInstanceNode>;
     afterUpdate: TOriginal;
     beforeRender: NgtBeforeRenderEvent<TOriginal>;
 }
 export type NgtNodeElement<TOriginal, TConstructor> = {
     attach: string | string[] | NgtAttachFunction;
-    ref: NgtInjectedRef<TOriginal>;
     addEventListener<TEventKey extends keyof NgtNodeEventMap<TOriginal>>(type: TEventKey, listener: (this: NgtNodeElement<TOriginal, TConstructor>, ev: NgtNodeEventMap<TOriginal>[TEventKey]) => any): void;
     removeEventListener<TEventKey extends keyof NgtNodeEventMap<TOriginal>>(type: TEventKey, listener: (this: NgtNodeElement<TOriginal, TConstructor>, ev: NgtNodeEventMap<TOriginal>[TEventKey]) => any): void;
     __ngt_args__: NgtArgs<TConstructor>;
@@ -51,7 +52,6 @@ export type NgtObject3DNode<TOriginal, TConstructor, TNoEvent = NoEvent<TOrigina
     addEventListener<TEventKey extends keyof NgtObject3DEventsMap>(type: TEventKey, listener: (this: NgtObject3DNode<TOriginal, TConstructor>, ev: NgtObject3DEventsMap[TEventKey]) => any): void;
     removeEventListener<TEventKey extends keyof NgtObject3DEventsMap>(type: TEventKey, listener: (this: NgtObject3DNode<TOriginal, TConstructor>, ev: NgtObject3DEventsMap[TEventKey]) => any): void;
 }>;
-type NoEvent<T> = Omit<T, 'addEventListener' | 'removeEventListener'>;
 export type NgtGeometry<TGeometry extends THREE.BufferGeometry, TConstructor> = NgtNode<TGeometry, TConstructor>;
 export type NgtMaterial<TMaterial extends THREE.Material, TConstructor> = NgtNode<TMaterial, TConstructor>;
 export type NgtLight<T extends THREE.Light, P> = NgtObject3DNode<T, P>;
@@ -117,7 +117,7 @@ export type NgtMeshBasicMaterial = NgtMaterial<THREE.MeshBasicMaterial, [THREE.M
 export type NgtMeshMatcapMaterial = NgtMaterial<THREE.MeshMatcapMaterial, [THREE.MeshMatcapMaterialParameters]>;
 export type NgtLineDashedMaterial = NgtMaterial<THREE.LineDashedMaterial, [THREE.LineDashedMaterialParameters]>;
 export type NgtLineBasicMaterial = NgtMaterial<THREE.LineBasicMaterial, [THREE.LineBasicMaterialParameters]>;
-export type NgtPrimitive = NgtNodeElement<NgtAnyRecord, any>;
+export type NgtPrimitive = NgtNodeElement<any, any>;
 export type NgtValue = NgtNode<{
     rawValue: any;
 }, {}>;

package/lib/types.d.ts

@@ -1,12 +1,7 @@
-/// <reference types="webxr" />
-import type { ElementRef, EventEmitter, WritableSignal } from '@angular/core';
-import * as THREE from 'three';
-import type { NgtSignalStore } from './stores/signal.store';
-import { NgtObject3DNode } from './three-types';
-export type NgtAnyRecord = Record<string, any>;
 export type NgtProperties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;
+export type NgtAnyRecord = Record<string, any>;
 export type NgtEquConfig = {
     /** Compare arrays by reference equality a === b (default), or by shallow equality */
     arrays?: 'reference' | 'shallow';
@@ -15,306 +10,3 @@ export type NgtEquConfig = {
     /** If true the keys in both a and b must match 1:1 (default), if false a's keys must intersect b's */
     strict?: boolean;
 };
-export type NgtDpr = number | [min: number, max: number];
-export type NgtSize = {
-    width: number;
-    height: number;
-    top: number;
-    left: number;
-};
-export type NgtViewport = NgtSize & {
-    /** The initial pixel ratio */
-    initialDpr: number;
-    /** Current pixel ratio */
-    dpr: number;
-    /** size.width / viewport.width */
-    factor: number;
-    /** Camera distance */
-    distance: number;
-    /** Camera aspect ratio: width / height */
-    aspect: number;
-};
-export type NgtPerformance = {
-    /** Current performance normal, between min and max */
-    current: number;
-    /** How low the performance can go, between 0 and max */
-    min: number;
-    /** How high the performance can go, between min and max */
-    max: number;
-    /** Time until current returns to max in ms */
-    debounce: number;
-    /** Sets current to min, puts the system in regression */
-    regress: () => void;
-};
-export type NgtRenderer = {
-    render: (scene: THREE.Scene, camera: THREE.Camera) => any;
-};
-export type NgtCamera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
-export type NgtCameraManual = NgtCamera & {
-    manual?: boolean;
-};
-export type NgtIntersection = THREE.Intersection & {
-    /** The event source (the object which registered the handler) */
-    eventObject: THREE.Object3D;
-};
-export type NgtIntersectionEvent<TSourceEvent> = NgtIntersection & {
-    /** The event source (the object which registered the handler) */
-    eventObject: THREE.Object3D;
-    /** An array of intersections */
-    intersections: NgtIntersection[];
-    /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
-    unprojectedPoint: THREE.Vector3;
-    /** Normalized event coordinates */
-    pointer: THREE.Vector2;
-    /** Delta between first click and this event */
-    delta: number;
-    /** The ray that pierced it */
-    ray: THREE.Ray;
-    /** The camera that was used by the raycaster */
-    camera: NgtCameraManual;
-    /** stopPropagation will stop underlying handlers from firing */
-    stopPropagation: () => void;
-    /** The original host event */
-    nativeEvent: TSourceEvent;
-    /** If the event was stopped by calling stopPropagation */
-    stopped: boolean;
-};
-export type NgtThreeEvent<TEvent> = NgtIntersectionEvent<TEvent> & NgtProperties<TEvent>;
-export type NgtDomEvent = PointerEvent | MouseEvent | WheelEvent;
-export type NgtEventHandlers = {
-    click?: (event: NgtThreeEvent<MouseEvent>) => void;
-    contextmenu?: (event: NgtThreeEvent<MouseEvent>) => void;
-    dblclick?: (event: NgtThreeEvent<MouseEvent>) => void;
-    pointerup?: (event: NgtThreeEvent<PointerEvent>) => void;
-    pointerdown?: (event: NgtThreeEvent<PointerEvent>) => void;
-    pointerover?: (event: NgtThreeEvent<PointerEvent>) => void;
-    pointerout?: (event: NgtThreeEvent<PointerEvent>) => void;
-    pointerenter?: (event: NgtThreeEvent<PointerEvent>) => void;
-    pointerleave?: (event: NgtThreeEvent<PointerEvent>) => void;
-    pointermove?: (event: NgtThreeEvent<PointerEvent>) => void;
-    pointermissed?: (event: MouseEvent) => void;
-    pointercancel?: (event: NgtThreeEvent<PointerEvent>) => void;
-    wheel?: (event: NgtThreeEvent<WheelEvent>) => void;
-};
-export type NgtEvents = {
-    [TEvent in keyof NgtEventHandlers]-?: EventListener;
-};
-export type NgtFilterFunction = (items: THREE.Intersection[], store: NgtSignalStore<NgtState>) => THREE.Intersection[];
-export type NgtComputeFunction = (event: NgtDomEvent, root: NgtSignalStore<NgtState>, previous?: NgtSignalStore<NgtState>) => void;
-export type NgtEventManager<TTarget> = {
-    /** Determines if the event layer is active */
-    enabled: boolean;
-    /** Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer  */
-    priority: number;
-    /** The compute function needs to set up the raycaster and an xy- pointer  */
-    compute?: NgtComputeFunction;
-    /** The filter can re-order or re-structure the intersections  */
-    filter?: NgtFilterFunction;
-    /** The target node the event layer is tied to */
-    connected?: TTarget;
-    /** All the pointer event handlers through which the host forwards native events */
-    handlers?: NgtEvents;
-    /** Allows re-connecting to another target */
-    connect?: (target: TTarget) => void;
-    /** Removes all existing events handlers from the target */
-    disconnect?: () => void;
-    /** Triggers a onPointerMove with the last known event. This can be useful to enable raycasting without
-     *  explicit user interaction, for instance when the camera moves a hoverable object underneath the cursor.
-     */
-    update?: () => void;
-};
-export type NgtPointerCaptureTarget = {
-    intersection: NgtIntersection;
-    target: Element;
-};
-export type NgtRenderState = NgtState & {
-    delta: number;
-    frame?: XRFrame;
-};
-export type NgtBeforeRenderEvent<TObject extends NgtInstanceNode = NgtInstanceNode> = {
-    state: NgtRenderState;
-    object: TObject;
-};
-export type NgtBeforeRenderRecord = {
-    callback: (state: NgtRenderState) => void;
-    store: NgtSignalStore<NgtState>;
-    priority?: number;
-};
-export type NgtInternalState = {
-    active: boolean;
-    priority: number;
-    frames: number;
-    lastEvent: ElementRef<NgtDomEvent | null>;
-    interaction: THREE.Object3D[];
-    hovered: Map<string, NgtThreeEvent<NgtDomEvent>>;
-    subscribers: NgtBeforeRenderRecord[];
-    capturedMap: Map<number, Map<THREE.Object3D, NgtPointerCaptureTarget>>;
-    initialClick: [x: number, y: number];
-    initialHits: THREE.Object3D[];
-    subscribe: (callback: NgtBeforeRenderRecord['callback'], priority?: number, store?: NgtSignalStore<NgtState>) => () => void;
-};
-export type NgtState = {
-    get: NgtSignalStore<NgtState>['get'];
-    set: NgtSignalStore<NgtState>['set'];
-    /** when all building blocks are initialized */
-    ready: boolean;
-    /** The instance of the renderer */
-    gl: THREE.WebGLRenderer;
-    /** Default camera */
-    camera: NgtCameraManual;
-    /** Default scene */
-    scene: THREE.Scene;
-    /** Default raycaster */
-    raycaster: THREE.Raycaster;
-    /** Default clock */
-    clock: THREE.Clock;
-    /** Event layer interface, contains the event handler and the node they're connected to */
-    events: NgtEventManager<any>;
-    /** XR interface */
-    xr: {
-        connect: () => void;
-        disconnect: () => void;
-    };
-    /** Currently used controls */
-    controls: THREE.EventDispatcher | null;
-    /** Normalized event coordinates */
-    pointer: THREE.Vector2;
-    legacy: boolean;
-    /** Shortcut to gl.outputEncoding = LinearEncoding */
-    linear: boolean;
-    /** Shortcut to gl.toneMapping = NoTonemapping */
-    flat: boolean;
-    /** Render loop flags */
-    frameloop: 'always' | 'demand' | 'never';
-    /** Adaptive performance interface */
-    performance: NgtPerformance;
-    /** Reactive pixel-size of the canvas */
-    size: NgtSize;
-    /** Reactive size of the viewport in threejs units */
-    viewport: NgtViewport & {
-        getCurrentViewport: (camera?: NgtCameraManual, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: NgtSize) => Omit<NgtViewport, 'dpr' | 'initialDpr'>;
-    };
-    /** Flags the canvas for render, but doesn't render in itself */
-    invalidate: (frames?: number) => void;
-    /** Advance (render) one step */
-    advance: (timestamp: number, runGlobalEffects?: boolean) => void;
-    /** Shortcut to setting the event layer */
-    setEvents: (events: Partial<NgtEventManager<any>>) => void;
-    /**
-     * Shortcut to manual sizing
-     */
-    setSize: (width: number, height: number, top?: number, left?: number) => void;
-    /** Shortcut to manual setting the pixel ratio */
-    setDpr: (dpr: NgtDpr) => void;
-    /** Shortcut to frameloop flags */
-    setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
-    /** When the canvas was clicked but nothing was hit */
-    onPointerMissed?: (event: MouseEvent) => void;
-    /** If this state model is layerd (via createPortal) then this contains the previous layer */
-    previousStore?: NgtSignalStore<NgtState>;
-    /** Internals */
-    internal: NgtInternalState;
-};
-export type NgtAttachFunction<TChild = any, TParent = any> = (parent: TParent, child: TChild, store: NgtSignalStore<NgtState>) => void | (() => void);
-export type NgtAfterAttach<TParent extends NgtInstanceNode = NgtInstanceNode, TChild extends NgtInstanceNode = NgtInstanceNode> = {
-    parent: TParent;
-    node: TChild;
-};
-export type NgtInstanceLocalState = {
-    /** the state getter of the canvas that the instance is being rendered to */
-    store: NgtSignalStore<NgtState>;
-    nonObjects: WritableSignal<NgtInstanceNode[]>;
-    objects: WritableSignal<NgtInstanceNode[]>;
-    add: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
-    remove: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
-    nativeProps: NgtSignalStore<NgtAnyRecord>;
-    parent: WritableSignal<NgtInstanceNode | null>;
-    primitive?: boolean;
-    eventCount: number;
-    handlers: Partial<NgtEventHandlers>;
-    args?: unknown[];
-    attach?: string[] | NgtAttachFunction;
-    previousAttach?: unknown | (() => void);
-    isRaw?: boolean;
-    priority?: number;
-    afterUpdate?: EventEmitter<NgtInstanceNode>;
-    afterAttach?: EventEmitter<NgtAfterAttach>;
-};
-export type NgtInstanceNode<TNode = any> = {
-    __ngt__: NgtInstanceLocalState;
-} & NgtAnyRecord & TNode;
-export type NgtGLRenderer = {
-    render: (scene: THREE.Scene, camera: THREE.Camera) => void;
-};
-export type NgtGLOptions = NgtGLRenderer | ((canvas: HTMLCanvasElement) => NgtGLRenderer) | Partial<NgtProperties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
-export type NgtObjectMap = {
-    nodes: {
-        [name: string]: THREE.Object3D;
-    };
-    materials: {
-        [name: string]: THREE.Material;
-    };
-    [key: string]: any;
-};
-export type NgtCanvasInputs = {
-    /** A threejs renderer instance or props that go into the default renderer */
-    gl?: NgtGLOptions;
-    size?: NgtSize;
-    /**
-     * Enables shadows (by default PCFsoft). Can accept `gl.shadowMap` options for fine-tuning,
-     * but also strings: 'basic' | 'percentage' | 'soft' | 'variance'.
-     * @see https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap
-     */
-    shadows?: boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>;
-    /**
-     * Disables three r139 color management.
-     * @see https://threejs.org/docs/#manual/en/introduction/Color-management
-     */
-    legacy?: boolean;
-    /** Switch off automatic sRGB encoding and gamma correction */
-    linear?: boolean;
-    /** Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping` */
-    flat?: boolean;
-    /** Creates an orthographic camera */
-    orthographic?: boolean;
-    /**
-     * R3F's render mode. Set to `demand` to only render on state change or `never` to take control.
-     * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
-     */
-    frameloop?: 'always' | 'demand' | 'never';
-    /**
-     * R3F performance options for adaptive performance.
-     * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#movement-regression
-     */
-    performance?: Partial<Omit<NgtPerformance, 'regress'>>;
-    /** Target pixel ratio. Can clamp between a range: `[min, max]` */
-    dpr?: NgtDpr;
-    /** Props that go into the default raycaster */
-    raycaster?: Partial<THREE.Raycaster>;
-    /** A `THREE.Scene` instance or props that go into the default scene */
-    scene?: THREE.Scene | Partial<THREE.Scene>;
-    /** A `Camera` instance or props that go into the default camera */
-    camera?: (NgtCamera | Partial<NgtObject3DNode<THREE.Camera, typeof THREE.Camera> & NgtObject3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> & NgtObject3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>>) & {
-        /** Flags the camera as manual, putting projection into your own hands */
-        manual?: boolean;
-    };
-    /** An R3F event manager to manage elements' pointer events */
-    events?: (store: NgtSignalStore<NgtState>) => NgtEventManager<HTMLElement>;
-    /** The target where events are being subscribed to, default: the div that wraps canvas */
-    eventSource?: HTMLElement | ElementRef<HTMLElement>;
-    /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
-    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
-    /** Default coordinate for the camera to look at */
-    lookAt?: THREE.Vector3 | Parameters<THREE.Vector3['set']>;
-};
-export interface NgtLoader<T> extends THREE.Loader {
-    load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
-    loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<T>;
-}
-export type NgtLoaderProto<T> = new (...args: any) => NgtLoader<T extends unknown ? any : T>;
-export type NgtLoaderReturnType<T, L extends NgtLoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
-export type NgtLoaderExtensions<T extends {
-    prototype: NgtLoaderProto<any>;
-}> = (loader: T['prototype']) => void;
-export type NgtConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
-export type NgtBranchingReturn<T, Parent, Coerced> = NgtConditionalType<T, Parent, Coerced, T>;

package/lib/utils/apply-props.d.ts

@@ -1,2 +1,4 @@
-import type { NgtAnyRecord, NgtInstanceNode } from '../types';
-export declare function applyProps(instance: NgtInstanceNode, props: NgtAnyRecord): NgtInstanceNode;
+import { type NgtInstanceNode } from '../instance';
+import type { NgtAnyRecord } from '../types';
+export declare function diffProps(instance: NgtAnyRecord, props: NgtAnyRecord): [key: string, value: unknown][];
+export declare function applyProps(instance: NgtInstanceNode, props: NgtAnyRecord): any;