angular-three 3.7.0 → 4.0.0-next.1

package/lib/types.d.ts

@@ -1,91 +1,88 @@
-import { ElementRef, Signal } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Camera, Clock, EventDispatcher, Intersection, Object3D, OrthographicCamera, PerspectiveCamera, Ray, Raycaster, Scene, Vector2, Vector3, WebGLRenderer, WebGLRendererParameters, WebGLShadowMap } from 'three';
-import { NgtObject3DNode } from './three-types';
-import { NgtSignalStore } from './utils/signal-store';
-export type NgtProperties<T> = {
-    [K in keyof T as T[K] extends (...args: Array<any>) => any ? never : K]: T[K];
-};
+import type { ElementRef, Signal } from '@angular/core';
+import type { Observable } from 'rxjs';
+import type * as THREE from 'three';
+import type { NgtProperties, NgtThreeElement, NgtVector3 } from './three-types';
+import type { SignalState } from './utils/signal-state';
+export type NgtArguments<T> = T extends NgtConstructorRepresentation ? T extends typeof THREE.Color ? [r: number, g: number, b: number] | [color: THREE.ColorRepresentation] : ConstructorParameters<T> : any[];
+export type NgtConstructorRepresentation<T = any> = new (...args: any[]) => T;
 export type NgtAnyRecord = Record<string, any>;
 export type NgtNullish<T> = T | null | undefined;
-export type NgtEquConfig = {
+export interface NgtDisposable {
+    type?: string;
+    dispose?: () => void;
+}
+export interface NgtEquConfig {
     /** Compare arrays by reference equality a === b (default), or by shallow equality */
     arrays?: 'reference' | 'shallow';
     /** Compare objects by reference equality a === b (default), or by shallow equality */
     objects?: 'reference' | 'shallow';
     /** 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 NgtCameraLike = THREE.OrthographicCamera | THREE.PerspectiveCamera;
+export type NgtCamera = NgtCameraLike & {
+    manual?: boolean;
 };
-export type NgtGLOptions = NgtRendererLike | ((canvas: NgtCanvasElement) => NgtRendererLike) | Partial<NgtProperties<WebGLRenderer> | WebGLRendererParameters> | undefined;
-export interface NgtCanvasOptions {
-    /** A threejs renderer instance or props that go into the default renderer */
-    gl?: NgtGLOptions;
-    /** Dimensions to fit the renderer to. Will measure canvas dimensions if omitted */
-    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<WebGLShadowMap>;
-    /**
-     * Disables three r139 color management.
-     * @see https://threejs.org/docs/#manual/en/introduction/Color-management
-     */
-    legacy?: boolean;
-    /** Switch off automatic sRGB color space 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<Raycaster>;
-    /** A `Scene` instance or props that go into the default scene */
-    scene?: Scene | Partial<Scene>;
-    /** A `Camera` instance or props that go into the default camera */
-    camera?: (NgtCamera | Partial<NgtObject3DNode<Camera, typeof Camera> & NgtObject3DNode<PerspectiveCamera, typeof PerspectiveCamera> & NgtObject3DNode<OrthographicCamera, typeof 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?: Vector3 | Parameters<Vector3['set']>;
+export type NgtCameraParameters = Partial<NgtThreeElement<typeof THREE.Camera> & NgtThreeElement<typeof THREE.PerspectiveCamera> & NgtThreeElement<typeof THREE.OrthographicCamera>> & {
+    manual?: boolean;
+};
+export interface NgtRendererLike {
+    render: (scene: THREE.Scene, camera: THREE.Camera) => any;
+}
+export type NgtCanvasElement = HTMLCanvasElement | OffscreenCanvas;
+export type NgtGlobalRenderCallback = (timeStamp: number) => void;
+export type NgtGLOptions = NgtRendererLike | ((canvas: NgtCanvasElement) => NgtRendererLike) | Partial<NgtProperties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
+export type NgtDpr = number | [min: number, max: number];
+export interface NgtSize {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
 }
-export interface NgtIntersection extends Intersection {
+export interface NgtViewport extends 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 NgtShadows = boolean | 'basic' | 'percentage' | 'soft' | 'variance' | Partial<THREE.WebGLShadowMap>;
+export type NgtFrameloop = 'always' | 'demand' | 'never';
+export interface 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 NgtEventPrefix = 'offset' | 'client' | 'page' | 'layer' | 'screen';
+export interface NgtIntersection extends THREE.Intersection {
     /** The event source (the object which registered the handler) */
-    eventObject: Object3D;
+    eventObject: THREE.Object3D;
 }
 export interface NgtIntersectionEvent<TSourceEvent> extends NgtIntersection {
     /** The event source (the object which registered the handler) */
-    eventObject: Object3D;
+    eventObject: THREE.Object3D;
     /** An array of intersections */
     intersections: NgtIntersection[];
     /** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
-    unprojectedPoint: Vector3;
+    unprojectedPoint: THREE.Vector3;
     /** Normalized event coordinates */
-    pointer: Vector2;
+    pointer: THREE.Vector2;
     /** Delta between first click and this event */
     delta: number;
     /** The ray that pierced it */
-    ray: Ray;
+    ray: THREE.Ray;
     /** The camera that was used by the raycaster */
     camera: NgtCamera;
     /** stopPropagation will stop underlying handlers from firing */
@@ -95,10 +92,9 @@ export interface NgtIntersectionEvent<TSourceEvent> extends NgtIntersection {
     /** If the event was stopped by calling stopPropagation */
     stopped: boolean;
 }
-export type NgtCamera = OrthographicCamera | PerspectiveCamera;
 export type NgtThreeEvent<TEvent> = NgtIntersectionEvent<TEvent> & NgtProperties<TEvent>;
 export type NgtDomEvent = PointerEvent | MouseEvent | WheelEvent;
-export type NgtEventHandlers = {
+export interface NgtEventHandlers {
     click?: (event: NgtThreeEvent<MouseEvent>) => void;
     contextmenu?: (event: NgtThreeEvent<MouseEvent>) => void;
     dblclick?: (event: NgtThreeEvent<MouseEvent>) => void;
@@ -112,13 +108,13 @@ export type NgtEventHandlers = {
     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: Intersection[], store: NgtSignalStore<NgtState>) => Intersection[];
-export type NgtComputeFunction = (event: NgtDomEvent, root: NgtSignalStore<NgtState>, previous: NgtSignalStore<NgtState> | null) => void;
-export type NgtEventManager<TTarget> = {
+export type NgtFilterFunction = (items: THREE.Intersection[], store: SignalState<NgtState>) => THREE.Intersection[];
+export type NgtComputeFunction = (event: NgtDomEvent, root: SignalState<NgtState>, previous: SignalState<NgtState> | null) => void;
+export interface 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  */
@@ -139,148 +135,139 @@ export type NgtEventManager<TTarget> = {
      *  explicit user interaction, for instance when the camera moves a hoverable object underneath the cursor.
      */
     update?: () => void;
-};
+}
 export interface NgtPointerCaptureTarget {
     intersection: NgtIntersection;
     target: Element;
 }
-export type NgtAttachFunction<TChild = any, TParent = any> = (parent: TParent, child: TChild, store: NgtSignalStore<NgtState>) => void | (() => void);
-export type NgtAttachable<TChild = any, TParent = any> = NgtAttachFunction<TChild, TParent> | string | (string | number)[];
-export interface NgtAfterAttach<TChild extends NgtInstanceNode = NgtInstanceNode, TParent extends NgtInstanceNode = NgtInstanceNode> {
-    parent: TParent;
-    node: TChild;
-}
-export interface NgtLocalInstanceState {
+export interface NgtInstanceHierarchyState {
     objects: NgtInstanceNode[];
     nonObjects: NgtInstanceNode[];
     parent: NgtInstanceNode | null;
     geometryStamp: number;
 }
-export interface NgtLocalState {
-    /** the store of the canvas that the instance is being rendered to */
-    store: NgtSignalStore<NgtState>;
-    instanceStore: NgtSignalStore<NgtLocalInstanceState>;
-    parent: Signal<NgtLocalInstanceState['parent']>;
-    objects: Signal<NgtLocalInstanceState['objects']>;
-    nonObjects: Signal<NgtLocalInstanceState['nonObjects']>;
+export interface NgtInstanceState<TObject extends NgtAnyRecord = NgtAnyRecord> {
+    /**
+     * The store that the intsance is being rendered with
+     */
+    store: SignalState<NgtState> | null;
+    /**
+     * hierachy store for the instance
+     */
+    hierarchyStore: SignalState<NgtInstanceHierarchyState>;
+    parent: Signal<NgtInstanceHierarchyState['parent']>;
+    objects: Signal<NgtInstanceHierarchyState['objects']>;
+    nonObjects: Signal<NgtInstanceHierarchyState['nonObjects']>;
+    /**
+     * reference back to the object
+     */
+    object: TObject & {
+        __ngt__?: NgtInstanceState<TObject>;
+    };
     add: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
     remove: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
     setParent: (parent: NgtInstanceNode | null) => void;
     updateGeometryStamp: () => void;
-    primitive?: boolean;
+    /**
+     * event count for the instance
+     */
     eventCount: number;
+    /**
+     * handlers for the instance
+     */
     handlers: Partial<NgtEventHandlers>;
+    /**
+     * attach information so that we can detach as well as reset
+     */
     attach?: string[] | NgtAttachFunction;
+    /**
+     * previously attach information so we can reset as well as clean up
+     */
     previousAttach?: unknown | (() => void);
-    isRaw?: boolean;
-    priority?: number;
+    /**
+     * the element tag used to create this instance
+     */
+    type: string;
     onUpdate?: (node: NgtInstanceNode) => void;
     onAttach?: (afterAttach: NgtAfterAttach) => void;
+    setPointerEvent?: <TEvent extends keyof NgtEventHandlers>(eventName: TEvent, callback: NgtEventHandlers[TEvent]) => () => void;
+    addInteraction?: (store?: SignalState<NgtState> | null) => void;
+    removeInteraction?: (store?: SignalState<NgtState> | null) => void;
 }
-export type NgtInstanceNode<TNode = any> = {
-    __ngt__: NgtLocalState;
-} & NgtAnyRecord & TNode;
-export type NgtCanvasElement = HTMLCanvasElement | OffscreenCanvas;
-export type NgtGlobalRenderCallback = (timeStamp: number) => void;
-export type NgtRendererLike = {
-    render: (scene: Scene, camera: 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 NgtInstanceNode<TObject extends NgtAnyRecord = NgtAnyRecord> = TObject & {
+    __ngt__: NgtInstanceState<TObject>;
 };
-export type NgtRenderState = NgtState & {
+export type NgtAttachFunction<TChild = any, TParent = any> = (parent: TParent, child: TChild, store: SignalState<NgtState>) => void | (() => void);
+export type NgtAttachable<TChild = any, TParent = any> = NgtAttachFunction<TChild, TParent> | string | (string | number)[];
+export interface NgtAfterAttach<TChild = NgtInstanceNode, TParent = NgtInstanceNode> {
+    parent: TParent;
+    node: TChild;
+}
+export interface NgtRenderState extends NgtState {
     delta: number;
     frame?: XRFrame;
-};
-export type NgtBeforeRenderEvent<TObject extends NgtInstanceNode = NgtInstanceNode> = {
+}
+export interface NgtBeforeRenderEvent<TObject = NgtInstanceNode> {
     state: NgtRenderState;
     object: TObject;
-};
-export type NgtBeforeRenderRecord = {
+}
+export interface NgtBeforeRenderRecord {
     callback: (state: NgtRenderState) => void;
-    store: NgtSignalStore<NgtState>;
+    store: SignalState<NgtState>;
     priority?: number;
-};
-export type NgtInternalState = {
+}
+export interface NgtXRManager {
+    connect: () => void;
+    disconnect: () => void;
+}
+export interface NgtInternalState {
     active: boolean;
     priority: number;
     frames: number;
     lastEvent: ElementRef<NgtDomEvent | null>;
-    interaction: Object3D[];
+    interaction: THREE.Object3D[];
     hovered: Map<string, NgtThreeEvent<NgtDomEvent>>;
-    capturedMap: Map<number, Map<Object3D, NgtPointerCaptureTarget>>;
+    capturedMap: Map<number, Map<THREE.Object3D, NgtPointerCaptureTarget>>;
     initialClick: [x: number, y: number];
-    initialHits: Object3D[];
+    initialHits: THREE.Object3D[];
     subscribers: NgtBeforeRenderRecord[];
-    subscribe: (callback: NgtBeforeRenderRecord['callback'], priority?: number, store?: NgtSignalStore<NgtState>) => () => void;
-};
-export type NgtState = {
+    subscribe: (callback: NgtBeforeRenderRecord['callback'], priority?: number, store?: SignalState<NgtState>) => () => void;
+}
+export interface NgtState {
+    /** id **/
+    id: string;
     /** The instance of the renderer */
-    gl: WebGLRenderer;
+    gl: THREE.WebGLRenderer;
     /** Default camera */
-    camera: NgtCameraManual;
+    camera: NgtCamera;
     /** Default scene */
-    scene: Scene;
+    scene: THREE.Scene;
     /** Default raycaster */
-    raycaster: Raycaster;
+    raycaster: THREE.Raycaster;
     /** Default clock */
-    clock: 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;
-    };
+    xr: NgtXRManager;
     /** Currently used controls */
-    controls: EventDispatcher | null;
+    controls: THREE.EventDispatcher | null;
     /** Normalized event coordinates */
-    pointer: Vector2;
+    pointer: THREE.Vector2;
     legacy: boolean;
     /** Shortcut to gl.outputColorSpace = LinearSRGBColorSpace */
     linear: boolean;
     /** Shortcut to gl.toneMapping = NoTonemapping */
     flat: boolean;
     /** Render loop flags */
-    frameloop: 'always' | 'demand' | 'never';
+    frameloop: NgtFrameloop;
     /** 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?: Vector3 | Parameters<Vector3['set']>, size?: NgtSize) => Omit<NgtViewport, 'dpr' | 'initialDpr'>;
+        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;
@@ -295,12 +282,31 @@ export type NgtState = {
     /** Shortcut to manual setting the pixel ratio */
     setDpr: (dpr: NgtDpr) => void;
     /** Shortcut to frameloop flags */
-    setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
+    setFrameloop: (frameloop?: NgtFrameloop) => void;
     /** When the canvas was clicked but nothing was hit */
     /** PointerMissed Observable */
     pointerMissed$: Observable<MouseEvent>;
     /** If this state model is layered (via createPortal) then this contains the previous layer */
-    previousRoot: NgtSignalStore<NgtState> | null;
+    previousRoot: SignalState<NgtState> | null;
     /** Internals */
     internal: NgtInternalState;
-};
+}
+export interface NgtCanvasOptions {
+    gl?: NgtGLOptions;
+    size?: NgtSize;
+    shadows?: NgtShadows;
+    legacy?: boolean;
+    linear?: boolean;
+    flat?: boolean;
+    orthographic?: boolean;
+    frameloop?: NgtFrameloop;
+    performance?: Partial<Omit<NgtPerformance, 'regress'>>;
+    dpr?: NgtDpr;
+    raycaster?: Partial<THREE.Raycaster>;
+    scene?: THREE.Scene | Partial<THREE.Scene>;
+    camera?: NgtCamera | NgtCameraParameters;
+    events?: (store: SignalState<NgtState>) => NgtEventManager<HTMLElement>;
+    eventSource?: HTMLElement | ElementRef<HTMLElement>;
+    eventPrefix?: NgtEventPrefix;
+    lookAt?: NgtVector3;
+}

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

@@ -1,3 +1,5 @@
-import { NgtAnyRecord, NgtInstanceNode } from '../types';
+import type { NgtAnyRecord, NgtInstanceState } from '../types';
 export declare const NGT_APPLY_PROPS = "__ngt_apply_props__";
-export declare function applyProps(instance: NgtInstanceNode, props: NgtAnyRecord): any;
+export declare function applyProps<T extends NgtAnyRecord>(instance: NgtInstanceState<T>['object'], props: NgtAnyRecord): T & {
+    __ngt__?: NgtInstanceState<T> | undefined;
+};

package/lib/utils/attach.d.ts

@@ -1,9 +1,9 @@
-import { NgtAnyRecord, NgtAttachFunction, NgtState } from '../types';
-import { NgtSignalStore } from './signal-store';
-export declare function attach(object: NgtAnyRecord, value: unknown, paths?: string[], useApplyProps?: boolean): void;
-export declare function detach(parent: NgtAnyRecord, child: NgtAnyRecord, attachProp: string[] | NgtAttachFunction): void;
+import type { NgtAttachFunction, NgtInstanceNode, NgtState } from '../types';
+import { SignalState } from './signal-state';
+export declare function attach(object: NgtInstanceNode, value: unknown, paths?: string[], useApplyProps?: boolean): void;
+export declare function detach(parent: NgtInstanceNode, child: NgtInstanceNode, attachProp: string[] | NgtAttachFunction): void;
 export declare function createAttachFunction<TChild = any, TParent = any>(cb: (params: {
     parent: TParent;
     child: TChild;
-    store: NgtSignalStore<NgtState>;
+    store: SignalState<NgtState>;
 }) => (() => void) | void): NgtAttachFunction<TChild, TParent>;

package/lib/utils/before-render.d.ts

@@ -1,5 +1,5 @@
 import { Injector } from '@angular/core';
-import { NgtBeforeRenderRecord } from '../types';
+import type { NgtBeforeRenderRecord } from '../types';
 /**
  * `injectBeforeRender` invokes its callback on every frame. Hence, the notion of tracking
  * changes (i.e: signals) does not really matter since we're getting latest values of the things we need on every frame anyway.

package/lib/utils/is.d.ts

@@ -1,19 +1,20 @@
-import { ElementRef } from '@angular/core';
-import { BufferGeometry, Camera, Material, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Texture } from 'three';
-import { NgtEquConfig, NgtInstanceNode, NgtRendererLike } from '../types';
+import type { ElementRef } from '@angular/core';
+import type * as THREE from 'three';
+import type { NgtEquConfig, NgtInstanceNode, NgtRendererLike } from '../types';
 export declare const is: {
     obj: (a: unknown) => a is object;
-    material: (a: unknown) => a is Material;
-    geometry: (a: unknown) => a is BufferGeometry;
-    orthographicCamera: (a: unknown) => a is OrthographicCamera;
-    perspectiveCamera: (a: unknown) => a is PerspectiveCamera;
-    camera: (a: unknown) => a is Camera;
+    material: (a: unknown) => a is THREE.Material;
+    geometry: (a: unknown) => a is THREE.BufferGeometry;
+    orthographicCamera: (a: unknown) => a is THREE.OrthographicCamera;
+    perspectiveCamera: (a: unknown) => a is THREE.PerspectiveCamera;
+    camera: (a: unknown) => a is THREE.Camera;
     renderer: (a: unknown) => boolean;
-    scene: (a: unknown) => a is Scene;
+    scene: (a: unknown) => a is THREE.Scene;
     ref: (a: unknown) => a is ElementRef;
     instance: (a: unknown) => a is NgtInstanceNode;
-    object3D: (a: unknown) => a is Object3D;
-    colorSpaceExist: <T extends NgtRendererLike | Texture | object, P = T extends NgtRendererLike ? {
+    object3D: (a: unknown) => a is THREE.Object3D;
+    three: <TThreeEntity extends object, TKey extends keyof TThreeEntity = keyof TThreeEntity>(a: unknown, isKey: TKey extends `is${infer K}` ? TKey : never) => a is TThreeEntity;
+    colorSpaceExist: <T extends NgtRendererLike | THREE.Texture | object, P = T extends NgtRendererLike ? {
         outputColorSpace: string;
     } : {
         colorSpace: string;

package/lib/utils/make.d.ts

@@ -1,12 +1,12 @@
-import { Material, Object3D, OrthographicCamera, PerspectiveCamera, WebGLRenderer } from 'three';
-import { NgtCanvasElement, NgtDpr, NgtGLOptions, NgtIntersection, NgtSize } from '../types';
+import * as THREE from 'three';
+import type { NgtCanvasElement, NgtDpr, NgtGLOptions, NgtIntersection, NgtSize } from '../types';
 export declare function makeId(event?: NgtIntersection): string;
 export declare function makeDpr(dpr: NgtDpr, window?: Window): number;
-export declare function makeRendererInstance<TCanvas extends NgtCanvasElement>(glOptions: NgtGLOptions, canvas: TCanvas): WebGLRenderer;
-export declare function makeCameraInstance(isOrthographic: boolean, size: NgtSize): OrthographicCamera | PerspectiveCamera;
+export declare function makeRendererInstance<TCanvas extends NgtCanvasElement>(glOptions: NgtGLOptions, canvas: TCanvas): THREE.WebGLRenderer;
+export declare function makeCameraInstance(isOrthographic: boolean, size: NgtSize): THREE.OrthographicCamera | THREE.PerspectiveCamera;
 export type NgtObjectMap = {
-    nodes: Record<string, Object3D<any>>;
-    materials: Record<string, Material>;
+    nodes: Record<string, THREE.Object3D<any>>;
+    materials: Record<string, THREE.Material>;
     [key: string]: any;
 };
-export declare function makeObjectGraph(object: Object3D): NgtObjectMap;
+export declare function makeObjectGraph(object: THREE.Object3D): NgtObjectMap;

package/lib/utils/object-events.d.ts

@@ -1,6 +1,6 @@
 import { ElementRef, Injector } from '@angular/core';
-import { Object3D } from 'three';
-import { NgtEventHandlers, NgtThreeEvent } from '../types';
+import type * as THREE from 'three';
+import type { NgtEventHandlers, NgtThreeEvent } from '../types';
 import * as i0 from "@angular/core";
 export declare class NgtObjectEvents {
     click: import("@angular/core").OutputEmitterRef<NgtThreeEvent<MouseEvent>>;
@@ -16,12 +16,12 @@ export declare class NgtObjectEvents {
     pointermissed: import("@angular/core").OutputEmitterRef<NgtThreeEvent<MouseEvent>>;
     pointercancel: import("@angular/core").OutputEmitterRef<NgtThreeEvent<PointerEvent>>;
     wheel: import("@angular/core").OutputEmitterRef<NgtThreeEvent<WheelEvent>>;
-    ngtObjectEvents: import("@angular/core").ModelSignal<Object3D<import("three").Object3DEventMap> | ElementRef<Object3D<import("three").Object3DEventMap>> | null | undefined>;
+    ngtObjectEvents: import("@angular/core").ModelSignal<THREE.Object3D<THREE.Object3DEventMap> | ElementRef<THREE.Object3D<THREE.Object3DEventMap>> | (() => ElementRef<THREE.Object3D> | THREE.Object3D | null | undefined) | null | undefined>;
     constructor();
     private emitEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtObjectEvents, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgtObjectEvents, "[ngtObjectEvents]", never, { "ngtObjectEvents": { "alias": "ngtObjectEvents"; "required": false; "isSignal": true; }; }, { "click": "click"; "dblclick": "dblclick"; "contextmenu": "contextmenu"; "pointerup": "pointerup"; "pointerdown": "pointerdown"; "pointerover": "pointerover"; "pointerout": "pointerout"; "pointerenter": "pointerenter"; "pointerleave": "pointerleave"; "pointermove": "pointermove"; "pointermissed": "pointermissed"; "pointercancel": "pointercancel"; "wheel": "wheel"; "ngtObjectEvents": "ngtObjectEventsChange"; }, never, never, true, never>;
 }
-export declare function injectObjectEvents(target: () => ElementRef<Object3D> | Object3D | null | undefined, events: NgtEventHandlers, { injector }?: {
+export declare function injectObjectEvents(target: () => ElementRef<THREE.Object3D> | THREE.Object3D | null | undefined, events: NgtEventHandlers, { injector }?: {
     injector?: Injector;
 }): (() => void)[];

package/lib/utils/parameters.d.ts

@@ -1,20 +1,20 @@
-import { Signal } from '@angular/core';
-import { Vector2, Vector3, Vector4 } from 'three';
-import { NgtVector2, NgtVector3, NgtVector4 } from '../three-types';
+import { Signal, ValueEqualityFn } from '@angular/core';
+import * as THREE from 'three';
+import type { NgtVector2, NgtVector3, NgtVector4 } from '../three-types';
 type KeysOfType<TObject extends object, TType> = Exclude<{
     [K in keyof TObject]: TObject[K] extends TType | undefined | null ? K : never;
 }[keyof TObject], undefined>;
-export declare function omit<TObject extends object, TKeys extends (keyof TObject)[]>(objFn: () => TObject, keysToOmit: TKeys): Signal<Omit<TObject, TKeys[number]>>;
-export declare function pick<TObject extends object, TKey extends keyof TObject>(objFn: () => TObject, key: TKey): Signal<TObject[TKey]>;
-export declare function pick<TObject extends object, TKeys extends (keyof TObject)[]>(objFn: () => TObject, keys: TKeys): Signal<Pick<TObject, TKeys[number]>>;
-export declare function merge<TObject extends object>(objFn: () => TObject, toMerge: Partial<TObject>, mode?: 'override' | 'backfill'): Signal<TObject & Partial<TObject>>;
-type NgtVectorComputed<TVector extends Vector2 | Vector3 | Vector4, TNgtVector = TVector extends Vector2 ? NgtVector2 : TVector extends Vector3 ? NgtVector3 : NgtVector4> = {
+export declare function omit<TObject extends object, TKeys extends (keyof TObject)[]>(objFn: () => TObject, keysToOmit: TKeys, equal?: ValueEqualityFn<NoInfer<Omit<TObject, TKeys[number]>>>): Signal<Omit<TObject, TKeys[number]>>;
+export declare function pick<TObject extends object, TKey extends keyof TObject>(objFn: () => TObject, key: TKey, equal?: ValueEqualityFn<NoInfer<TObject[TKey]>>): Signal<TObject[TKey]>;
+export declare function pick<TObject extends object, TKeys extends (keyof TObject)[]>(objFn: () => TObject, keys: TKeys, equal?: ValueEqualityFn<NoInfer<Pick<TObject, TKeys[number]>>>): Signal<Pick<TObject, TKeys[number]>>;
+export declare function merge<TObject extends object>(objFn: () => TObject, toMerge: Partial<TObject>, mode?: 'override' | 'backfill', equal?: ValueEqualityFn<NoInfer<TObject>>): Signal<TObject & Partial<TObject>>;
+type NgtVectorComputed<TVector extends THREE.Vector2 | THREE.Vector3 | THREE.Vector4, TNgtVector = TVector extends THREE.Vector2 ? NgtVector2 : TVector extends THREE.Vector3 ? NgtVector3 : NgtVector4> = {
     (input: Signal<TNgtVector>): Signal<TVector>;
     (input: Signal<TNgtVector>, keepUndefined: true): Signal<TVector | undefined>;
     <TObject extends object>(options: Signal<TObject>, key: KeysOfType<TObject, TNgtVector>): Signal<TVector>;
     <TObject extends object>(options: Signal<TObject>, key: KeysOfType<TObject, TNgtVector>, keepUndefined: true): Signal<TVector | undefined>;
 };
-export declare const vector2: NgtVectorComputed<Vector2, NgtVector2>;
-export declare const vector3: NgtVectorComputed<Vector3, NgtVector3>;
-export declare const vector4: NgtVectorComputed<Vector4, NgtVector4>;
+export declare const vector2: NgtVectorComputed<THREE.Vector2, number | THREE.Vector2 | [x: number, y: number]>;
+export declare const vector3: NgtVectorComputed<THREE.Vector3, number | THREE.Vector3 | [x: number, y: number, z: number]>;
+export declare const vector4: NgtVectorComputed<THREE.Vector4, number | THREE.Vector4 | [x: number, y: number, z: number, w: number]>;
 export {};

package/lib/utils/signal-state.d.ts

@@ -0,0 +1,27 @@
+/** ported from ngrx/signals */
+import { Signal as NgSignal, WritableSignal } from '@angular/core';
+type NonRecord = Iterable<any> | WeakSet<any> | WeakMap<any, any> | Promise<any> | Date | Error | RegExp | ArrayBuffer | DataView | Function;
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type IsRecord<T> = T extends object ? (T extends NonRecord ? false : true) : false;
+type IsUnknownRecord<T> = string extends keyof T ? true : number extends keyof T ? true : false;
+type IsKnownRecord<T> = IsRecord<T> extends true ? (IsUnknownRecord<T> extends true ? false : true) : false;
+declare const STATE_SOURCE: unique symbol;
+type WritableStateSource<State extends object> = {
+    [STATE_SOURCE]: WritableSignal<State>;
+};
+export type PartialStateUpdater<State extends object> = (state: State) => Partial<State>;
+export interface Signal<T> extends NgSignal<T> {
+    name: unknown;
+    length: unknown;
+}
+export type DeepSignal<T> = Signal<T> & (IsKnownRecord<T> extends true ? Readonly<{
+    [K in keyof T]: IsKnownRecord<T[K]> extends true ? DeepSignal<T[K]> : Signal<T[K]>;
+}> : unknown);
+export type SignalState<State extends object> = DeepSignal<State> & WritableStateSource<State> & {
+    update: (...updaters: Array<Partial<Prettify<State>> | PartialStateUpdater<Prettify<State>>>) => void;
+    get snapshot(): State;
+};
+export declare function signalState<State extends object>(initialState: State): SignalState<State>;
+export {};

package/lib/utils/update.d.ts

@@ -1,4 +1,4 @@
-import { NgtCameraManual, NgtSize } from '../types';
+import type { NgtCamera, NgtSize } from '../types';
 export declare function checkNeedsUpdate(value: unknown): void;
 export declare function checkUpdate(value: unknown): void;
-export declare function updateCamera(camera: NgtCameraManual, size: NgtSize): void;
+export declare function updateCamera(camera: NgtCamera, size: NgtSize): void;