move all types to types

Author: nartc

libs/core/src/index.ts

@@ -1,17 +1,16 @@
 export * from './lib/canvas';
 export * from './lib/directives/args';
-export { NgtCamera, NgtComputeFunction, NgtDomEvent, NgtEventHandlers, NgtThreeEvent } from './lib/events';
 export * from './lib/html';
 export * from './lib/instance';
 export * from './lib/loader';
-export { addAfterEffect, addEffect, addTail } from './lib/loop';
-export { NgtPortal, NgtPortalContent } from './lib/portal';
+export * from './lib/loop';
+export * from './lib/portal';
 export * from './lib/renderer';
-export { injectCanvasRootInitializer } from './lib/roots';
+export * from './lib/roots';
 export * from './lib/routed-scene';
 export * from './lib/store';
 export * from './lib/utils/apply-props';
-export { createAttachFunction } from './lib/utils/attach';
+export * from './lib/utils/attach';
 export * from './lib/utils/before-render';
 export * from './lib/utils/is';
 export * from './lib/utils/make';

libs/core/src/lib/canvas.ts

@@ -23,93 +23,14 @@ import {
 import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { NgxResize, provideResizeOptions, ResizeOptions, ResizeResult } from 'ngxtension/resize';
-import {
-	Camera,
-	OrthographicCamera,
-	PerspectiveCamera,
-	Raycaster,
-	Scene,
-	Vector3,
-	WebGLRenderer,
-	WebGLRendererParameters,
-	WebGLShadowMap,
-} from 'three';
+import { Raycaster, Scene, Vector3 } from 'three';
 import { createPointerEvents } from './dom/events';
-import { NgtCamera, NgtDomEvent, NgtEventManager } from './events';
 import { provideNgtRenderer } from './renderer';
-import { injectCanvasRootInitializer, NgtCanvasConfigurator, NgtCanvasElement } from './roots';
+import { injectCanvasRootInitializer, NgtCanvasConfigurator } from './roots';
 import { NgtRoutedScene } from './routed-scene';
-import { injectStore, NgtDpr, NgtPerformance, NgtRendererLike, NgtSize, NgtState, provideStore } from './store';
-import { NgtObject3DNode } from './three-types';
-import { NgtProperties } from './types';
+import { injectStore, provideStore } from './store';
+import { NgtCanvasOptions, NgtDomEvent, NgtDpr, NgtGLOptions, NgtPerformance, NgtSize, NgtState } from './types';
 import { is } from './utils/is';
-import { NgtSignalStore } from './utils/signal-store';
-
-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']>;
-}
 
 @Component({
 	selector: 'ngt-canvas',
@@ -292,3 +213,5 @@ export class NgtCanvas {
 		});
 	}
 }
+
+export const injectRoot = injectCanvasRootInitializer;

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

@@ -1,6 +1,5 @@
-import { createEvents, NgtDomEvent, NgtEventManager, NgtEvents } from '../events';
-import { NgtState } from '../store';
-import { NgtAnyRecord } from '../types';
+import { createEvents } from '../events';
+import { NgtAnyRecord, NgtDomEvent, NgtEventManager, NgtEvents, NgtState } from '../types';
 import { NgtSignalStore } from '../utils/signal-store';
 
 const DOM_EVENTS = {

libs/core/src/lib/events.ts

@@ -1,98 +1,18 @@
 import { Subject } from 'rxjs';
-import { Intersection, Object3D, OrthographicCamera, PerspectiveCamera, Ray, Vector2, Vector3 } from 'three';
+import { Intersection, Object3D, Vector3 } from 'three';
 import { getLocalState } from './instance';
-import { NgtState } from './store';
-import { NgtAnyRecord, NgtProperties } from './types';
+import {
+	NgtAnyRecord,
+	NgtDomEvent,
+	NgtEventHandlers,
+	NgtIntersection,
+	NgtPointerCaptureTarget,
+	NgtState,
+	NgtThreeEvent,
+} from './types';
 import { makeId } from './utils/make';
 import { NgtSignalStore } from './utils/signal-store';
 
-export interface NgtIntersection extends Intersection {
-	/** The event source (the object which registered the handler) */
-	eventObject: Object3D;
-}
-
-export interface NgtIntersectionEvent<TSourceEvent> extends NgtIntersection {
-	/** The event source (the object which registered the handler) */
-	eventObject: Object3D;
-	/** An array of intersections */
-	intersections: NgtIntersection[];
-	/** vec3.set(pointer.x, pointer.y, 0).unproject(camera) */
-	unprojectedPoint: Vector3;
-	/** Normalized event coordinates */
-	pointer: Vector2;
-	/** Delta between first click and this event */
-	delta: number;
-	/** The ray that pierced it */
-	ray: Ray;
-	/** The camera that was used by the raycaster */
-	camera: NgtCamera;
-	/** 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 NgtCamera = OrthographicCamera | PerspectiveCamera;
-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: Intersection[], store: NgtSignalStore<NgtState>) => Intersection[];
-export type NgtComputeFunction = (
-	event: NgtDomEvent,
-	root: NgtSignalStore<NgtState>,
-	previous: NgtSignalStore<NgtState> | null,
-) => 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 interface NgtPointerCaptureTarget {
-	intersection: NgtIntersection;
-	target: Element;
-}
-
 /**
  * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.

libs/core/src/lib/instance.ts

@@ -1,63 +1,7 @@
-import { Signal } from '@angular/core';
-import { NgtEventHandlers } from './events';
-import { NgtState } from './store';
-import { NgtAnyRecord } from './types';
-import { NgtSignalStore, signalStore } from './utils/signal-store';
+import { NgtAnyRecord, NgtInstanceNode, NgtLocalInstanceState, NgtLocalState } from './types';
+import { signalStore } from './utils/signal-store';
 import { checkUpdate } from './utils/update';
 
-export type NgtAttachFunction<TChild = any, TParent = any> = (
-	parent: TParent,
-	child: TChild,
-	store: NgtSignalStore<NgtState>,
-) => void | (() => void);
-
-export interface NgtAfterAttach<
-	TChild extends NgtInstanceNode = NgtInstanceNode,
-	TParent extends NgtInstanceNode = NgtInstanceNode,
-> {
-	parent: TParent;
-	node: TChild;
-}
-
-export interface NgtLocalInstanceState {
-	objects: NgtInstanceNode[];
-	nonObjects: NgtInstanceNode[];
-	parent: NgtInstanceNode | null;
-}
-
-export interface NgtLocalState {
-	/** the store of the canvas that the instance is being rendered to */
-	store: NgtSignalStore<NgtState>;
-	// objects related to this instance
-	instanceStore: NgtSignalStore<NgtLocalInstanceState>;
-	// shortcut to signals
-	parent: Signal<NgtLocalInstanceState['parent']>;
-	objects: Signal<NgtLocalInstanceState['objects']>;
-	nonObjects: Signal<NgtLocalInstanceState['nonObjects']>;
-	// shortcut to add/remove object to list
-	add: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
-	remove: (instance: NgtInstanceNode, type: 'objects' | 'nonObjects') => void;
-	setParent: (parent: NgtInstanceNode | null) => void;
-	// 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>;
-	// 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;
-	onUpdate?: (node: NgtInstanceNode) => void;
-	onAttach?: (afterAttach: NgtAfterAttach) => void;
-}
-
-export type NgtInstanceNode<TNode = any> = { __ngt__: NgtLocalState } & NgtAnyRecord & TNode;
-
 export function getLocalState<TInstance extends object>(obj: TInstance | undefined): NgtLocalState | undefined {
 	if (!obj) return undefined;
 	return (obj as NgtAnyRecord)['__ngt__'];

libs/core/src/lib/loop.ts

@@ -1,9 +1,9 @@
 import { createInjectionToken } from 'ngxtension/create-injection-token';
-import { roots } from './roots';
-import { NgtState } from './store';
+import { NgtCanvasElement, NgtGlobalRenderCallback, NgtState } from './types';
 import { NgtSignalStore } from './utils/signal-store';
 
-export type NgtGlobalRenderCallback = (timeStamp: number) => void;
+export const roots = new Map<NgtCanvasElement, NgtSignalStore<NgtState>>();
+
 type SubItem = { callback: NgtGlobalRenderCallback };
 
 function createSubs(callback: NgtGlobalRenderCallback, subs: Set<SubItem>): () => void {

libs/core/src/lib/portal.ts

@@ -19,10 +19,10 @@ import {
 } from '@angular/core';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { Camera, Object3D, Raycaster, Scene, Vector2, Vector3 } from 'three';
-import { NgtComputeFunction } from './events';
 import { getLocalState, prepare } from './instance';
 import { SPECIAL_INTERNAL_ADD_COMMENT } from './renderer/constants';
-import { injectStore, NgtSize, NgtState, provideStore } from './store';
+import { injectStore, provideStore } from './store';
+import { NgtComputeFunction, NgtSize, NgtState } from './types';
 import { injectBeforeRender } from './utils/before-render';
 import { is } from './utils/is';
 import { signalStore } from './utils/signal-store';

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

@@ -9,9 +9,9 @@ import {
 	makeEnvironmentProviders,
 } from '@angular/core';
 import { NgtArgs } from '../directives/args';
-import { NgtInstanceNode, NgtLocalState, getLocalState, prepare } from '../instance';
-import { NGT_STORE, NgtState, injectStore, provideStore } from '../store';
-import { NgtAnyRecord } from '../types';
+import { getLocalState, prepare } from '../instance';
+import { NGT_STORE, injectStore, provideStore } from '../store';
+import { NgtAnyRecord, NgtInstanceNode, NgtLocalState, NgtState } from '../types';
 import { applyProps } from '../utils/apply-props';
 import { is } from '../utils/is';
 import { NgtSignalStore, signalStore } from '../utils/signal-store';

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

@@ -1,6 +1,7 @@
 import { untracked } from '@angular/core';
 import { removeInteractivity } from '../events';
-import { getLocalState, invalidateInstance, NgtInstanceNode } from '../instance';
+import { getLocalState, invalidateInstance } from '../instance';
+import { NgtInstanceNode } from '../types';
 import { attach, detach } from '../utils/attach';
 import { is } from '../utils/is';
 import { SPECIAL_EVENTS } from './constants';

libs/core/src/lib/roots.ts

@@ -12,23 +12,18 @@ import {
 	VSMShadowMap,
 	Vector3,
 } from 'three';
-import { NgtCanvasOptions } from './canvas';
 import { prepare } from './instance';
-import { injectLoop } from './loop';
-import { NgtSize, NgtState, injectStore } from './store';
-import { NgtAnyRecord, NgtEquConfig } from './types';
+import { injectLoop, roots } from './loop';
+import { injectStore } from './store';
+import { NgtAnyRecord, NgtCanvasElement, NgtCanvasOptions, NgtEquConfig, NgtSize, NgtState } from './types';
 import { applyProps } from './utils/apply-props';
 import { is } from './utils/is';
 import { makeCameraInstance, makeDpr, makeRendererInstance } from './utils/make';
 import { NgtSignalStore } from './utils/signal-store';
 import { checkNeedsUpdate } from './utils/update';
 
-export type NgtCanvasElement = HTMLCanvasElement | OffscreenCanvas;
-
 const shallowLoose = { objects: 'shallow', strict: false } as NgtEquConfig;
 
-export const roots = new Map<NgtCanvasElement, NgtSignalStore<NgtState>>();
-
 export function injectCanvasRootInitializer(injector?: Injector) {
 	return assertInjector(injectCanvasRootInitializer, injector, () => {
 		const injectedStore = injectStore();