wip

Author: Chau Tran

libs/core/src/index.ts

@@ -1 +0,0 @@
-export * from './lib/core/core.component';

libs/core/src/lib/core/core.component.spec.ts

@@ -0,0 +1,9 @@
+import { createInjectionToken } from './utils';
+
+const catalogue: Record<string, new (...args: any[]) => any> = {};
+
+export function extend(objects: object): void {
+    Object.assign(catalogue, objects);
+}
+
+export const [injectNgtCatalogue, provideNgtCatalogue, NGT_CATALOGUE] = createInjectionToken(() => catalogue);

libs/core/src/lib/core/core.component.ts

@@ -0,0 +1,105 @@
+import type { NgtCameraManual, NgtState } from './store';
+import type { NgtProperties } from './types';
+import type { NgtSignalStore } from './utils';
+
+export const supportedDomEvents = [
+    'click',
+    'contextmenu',
+    'dblclick',
+    'pointerup',
+    'pointerdown',
+    'pointerover',
+    'pointerout',
+    'pointerenter',
+    'pointerleave',
+    'pointermove',
+    'pointermissed',
+    'pointercancel',
+    'wheel',
+] as const;
+
+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 NgtPointerCaptureTarget = {
+    intersection: NgtIntersection;
+    target: Element;
+};
+
+export type NgtFilterFunction = (items: THREE.Intersection[], store: NgtSignalStore<NgtState>) => THREE.Intersection[];
+export type NgtComputeFunction = (
+    event: NgtDomEvent,
+    store: NgtSignalStore<NgtState>,
+    previous?: NgtSignalStore<NgtState>
+) => 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  */
+    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;
+}

libs/core/src/lib/di.ts

@@ -0,0 +1,129 @@
+import { EventEmitter, WritableSignal, signal, untracked } from '@angular/core';
+import { type NgtEventHandlers } from './events';
+import { type NgtState } from './store';
+import type { NgtAnyRecord } from './types';
+import { checkUpdate, signalStore, type NgtSignalStore } from './utils';
+
+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>;
+    // objects and parent are used when children are added with `attach` instead of being added to the Object3D scene graph
+    nonObjects: WritableSignal<NgtInstanceNode[]>;
+    // objects that are Object3D
+    objects: WritableSignal<NgtInstanceNode[]>;
+    // shortcut to add/remove object to list
+    add: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
+    remove: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
+    // native props signal
+    nativeProps: NgtSignalStore<NgtAnyRecord>;
+    // parent based on attach three instance
+    parent: WritableSignal<NgtInstanceNode | null>;
+    // if this THREE instance is a ngt-primitive
+    primitive?: boolean;
+    // if this THREE object has any events bound to it
+    eventCount: number;
+    // list of handlers to handle the events
+    handlers: Partial<NgtEventHandlers>;
+    // previous args
+    args?: unknown[];
+    // 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);
+    // is raw value
+    isRaw?: boolean;
+    // priority for before render
+    priority?: number;
+    // emitter after props update
+    afterUpdate?: EventEmitter<NgtInstanceNode>;
+    // emitter after attaching to parent
+    afterAttach?: EventEmitter<NgtAfterAttach>;
+};
+
+export type NgtInstanceNode<TNode = any> = {
+    __ngt__: NgtInstanceLocalState;
+} & NgtAnyRecord &
+    TNode;
+
+export function getLocalState<TInstance extends object = NgtAnyRecord>(
+    obj: TInstance | undefined
+): NgtInstanceLocalState {
+    if (!obj) return {} as unknown as NgtInstanceLocalState;
+    return (obj as NgtAnyRecord)['__ngt__'] || ({} as NgtInstanceLocalState);
+}
+
+export function invalidateInstance<TInstance extends object>(instance: TInstance) {
+    const state = getLocalState(instance).store?.get();
+    if (state && state.internal.frames === 0) state.invalidate();
+    checkUpdate(instance);
+}
+
+export function prepare<TInstance extends object = NgtAnyRecord>(
+    object: TInstance,
+    localState?: Partial<NgtInstanceLocalState>
+): NgtInstanceNode<TInstance> {
+    const instance = object as unknown as NgtInstanceNode<TInstance>;
+
+    if (localState?.primitive || !instance.__ngt__) {
+        const {
+            objects = signal<NgtInstanceNode[]>([]),
+            nonObjects = signal<NgtInstanceNode[]>([]),
+            ...rest
+        } = localState || {};
+
+        instance.__ngt__ = {
+            previousAttach: null,
+            store: null,
+            parent: signal(null),
+            memoized: {},
+            eventCount: 0,
+            handlers: {},
+            objects,
+            nonObjects,
+            nativeProps: signalStore<NgtAnyRecord>(),
+            add: (object, type) => {
+                untracked(() => {
+                    const current = untracked(instance.__ngt__[type]);
+                    const foundIndex = current.indexOf((obj: NgtInstanceNode) => obj === object);
+                    if (foundIndex > -1) {
+                        // if we add an object with the same reference, then we switch it out
+                        // and update the BehaviorSubject
+                        current.splice(foundIndex, 1, object);
+                        instance.__ngt__[type].set(current);
+                    } else {
+                        instance.__ngt__[type].update((prev) => [...prev, object]);
+                    }
+                    notifyAncestors(untracked(instance.__ngt__.parent));
+                });
+            },
+            remove: (object, type) => {
+                untracked(() => {
+                    instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
+                    notifyAncestors(untracked(instance.__ngt__.parent));
+                });
+            },
+            ...rest,
+        } as NgtInstanceLocalState;
+    }
+
+    return instance;
+}
+
+function notifyAncestors(instance: NgtInstanceNode | null) {
+    if (!instance) return;
+    const localState = getLocalState(instance);
+    if (localState.objects) localState.objects.update((prev) => prev);
+    if (localState.nonObjects) localState.nonObjects.update((prev) => prev);
+    notifyAncestors(untracked(localState.parent));
+}