angular-three-soba 3.6.1 → 4.0.0-next.1

package/controls/lib/orbit-controls.d.ts

@@ -1,9 +1,9 @@
 import { NgtVector3 } from 'angular-three';
-import { Camera, Event } from 'three';
+import * as THREE from 'three';
 import { OrbitControls } from 'three-stdlib';
 import * as i0 from "@angular/core";
 export interface NgtsOrbitControlsOptions {
-    camera?: Camera;
+    camera?: THREE.Camera;
     domElement?: HTMLElement;
     target?: NgtVector3;
     makeDefault: boolean;
@@ -13,15 +13,11 @@ export interface NgtsOrbitControlsOptions {
 }
 export declare class NgtsOrbitControls {
     options: import("@angular/core").InputSignalWithTransform<Partial<OrbitControls> & NgtsOrbitControlsOptions, "" | Partial<Partial<OrbitControls> & NgtsOrbitControlsOptions>>;
-    parameters: import("@angular/core").Signal<Omit<Partial<OrbitControls> & NgtsOrbitControlsOptions, "camera" | "makeDefault" | "regress" | "domElement" | "enableDamping" | "keyEvents">>;
-    changed: import("@angular/core").OutputEmitterRef<Event<string, unknown>>;
-    started: import("@angular/core").OutputEmitterRef<Event<string, unknown>>;
-    ended: import("@angular/core").OutputEmitterRef<Event<string, unknown>>;
+    protected parameters: import("@angular/core").Signal<Omit<Partial<OrbitControls> & NgtsOrbitControlsOptions, "domElement" | "enableDamping" | "makeDefault" | "camera" | "regress" | "keyEvents">>;
+    changed: import("@angular/core").OutputEmitterRef<THREE.Event<string, unknown>>;
+    started: import("@angular/core").OutputEmitterRef<THREE.Event<string, unknown>>;
+    ended: import("@angular/core").OutputEmitterRef<THREE.Event<string, unknown>>;
     private store;
-    private invalidate;
-    private performanceRegress;
-    private defaultCamera;
-    private glDomElement;
     private camera;
     private regress;
     private keyEvents;

package/controls/lib/scroll-controls.d.ts

@@ -28,12 +28,6 @@ export declare class NgtsScrollControls {
     options: import("@angular/core").InputSignalWithTransform<NgtsScrollControlsOptions, "" | Partial<NgtsScrollControlsOptions>>;
     private document;
     private store;
-    private gl;
-    private events;
-    private invalidate;
-    private size;
-    private domElement;
-    private target;
     private _el;
     private _fill;
     private _fixed;
@@ -60,19 +54,19 @@ export declare class NgtsScrollControls {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtsScrollControls, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgtsScrollControls, "ngts-scroll-controls", never, { "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "progress": "progressChange"; }, never, ["*"], true, never>;
 }
-export declare class NgtsScrollCanvas {
+export declare class NgtsCanvasScrollContent {
     private host;
     private scrollControls;
     private store;
-    private viewport;
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsScrollCanvas, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtsScrollCanvas, "ngt-group[ngtsScrollCanvas]", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsCanvasScrollContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtsCanvasScrollContent, "ngt-group[canvasScrollContent]", never, {}, {}, never, never, true, never>;
 }
-export declare class NgtsScrollHtml extends NgtHTML {
+export declare class NgtsHTMLScrollContent extends NgtHTML {
     private scrollControls;
-    private size;
+    private store;
+    private host;
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsScrollHtml, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtsScrollHtml, "div[ngtsScrollHTML]", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgtsHTMLScrollContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgtsHTMLScrollContent, "div[htmlScrollContent]", never, {}, {}, never, never, true, never>;
 }

package/fesm2022/angular-three-soba-abstractions.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
 import { input, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, computed, effect, untracked, inject, output, DestroyRef } from '@angular/core';
 import * as i1 from 'angular-three';
-import { omit, extend, injectBeforeRender, injectStore, pick, checkNeedsUpdate, NgtArgs, getLocalState, resolveRef, NgtObjectEvents } from 'angular-three';
+import { omit, extend, injectBeforeRender, injectStore, pick, is, checkNeedsUpdate, NgtArgs, getInstanceState, resolveRef, NgtObjectEvents } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { Group, Quaternion, Vector3, Vector4, Vector2, Color, CatmullRomCurve3, CubicBezierCurve3, EdgesGeometry, CanvasTexture, BackSide, Plane, Mesh, PlaneGeometry, Object3D, Shape, ExtrudeGeometry, QuadraticBezierCurve3 } from 'three';
+import * as THREE from 'three';
+import { Group, CanvasTexture, Mesh, PlaneGeometry, Object3D, ExtrudeGeometry } from 'three';
 import { LineSegments2, Line2, LineMaterial, LineSegmentsGeometry, LineGeometry, toCreasedNormals, TextGeometry, mergeVertices } from 'three-stdlib';
 import { DOCUMENT } from '@angular/common';
 import { GridMaterial } from 'angular-three-soba/shaders';
@@ -24,7 +25,7 @@ class NgtsBillboard {
         this.groupRef = viewChild.required('group');
         this.innerRef = viewChild.required('inner');
         extend({ Group });
-        const q = new Quaternion();
+        const q = new THREE.Quaternion();
         injectBeforeRender(({ camera }) => {
             const [{ follow, lockX, lockY, lockZ }, group, inner] = [
                 this.options(),
@@ -90,26 +91,29 @@ class NgtsLine {
         this.parameters = omit(this.options, ['color', 'vertexColors', 'lineWidth', 'segments', 'linewidth', 'dashed']);
         this.lineRef = viewChild('line');
         this.store = injectStore();
-        this.size = this.store.select('size');
         this.segments = pick(this.options, 'segments');
         this.vertexColors = pick(this.options, 'vertexColors');
         this.dashed = pick(this.options, 'dashed');
         this.color = pick(this.options, 'color');
         this.vertex = computed(() => Boolean(this.vertexColors()));
-        this.resolution = computed(() => [this.size().width, this.size().height]);
+        this.resolution = computed(() => [this.store.size.width(), this.store.size.height()]);
         this.lineWidth = pick(this.options, 'lineWidth');
         this.linewidth = pick(this.options, 'linewidth');
         this.line2 = computed(() => (this.segments() ? new LineSegments2() : new Line2()));
         this.lineMaterial = new LineMaterial();
         this.actualLineWidth = computed(() => this.linewidth() ?? this.lineWidth() ?? 1);
         this.itemSize = computed(() => (this.vertexColors()?.[0]?.length === 4 ? 4 : 3));
+        // other Line components access this
         this.lineGeometry = computed(() => {
             const geom = this.segments() ? new LineSegmentsGeometry() : new LineGeometry();
             const pValues = this.points().map((p) => {
                 const isArray = Array.isArray(p);
-                return p instanceof Vector3 || p instanceof Vector4
+                if (is.three(p, 'isVector3')) {
+                    return [p.x, p.y, p.z];
+                }
+                return is.three(p, 'isVector3') || is.three(p, 'isVector4')
                     ? [p.x, p.y, p.z]
-                    : p instanceof Vector2
+                    : is.three(p, 'isVector2')
                         ? [p.x, p.y, 0]
                         : isArray && p.length === 3
                             ? [p[0], p[1], p[2]]
@@ -120,7 +124,7 @@ class NgtsLine {
             geom.setPositions(pValues.flat());
             const vertexColors = this.vertexColors();
             if (vertexColors) {
-                const cValues = vertexColors.map((c) => (c instanceof Color ? c.toArray() : c));
+                const cValues = vertexColors.map((c) => (is.three(c, 'isColor') ? c.toArray() : c));
                 // @ts-expect-error - flat() isn't defined
                 geom.setColors(cValues.flat(), this.itemSize());
             }
@@ -210,8 +214,8 @@ class NgtsCatmullRomLine {
         this.vertexColors = pick(this.options, 'vertexColors');
         this.curve = computed(() => {
             const [points, closed, curveType, tension] = [this.points(), this.closed(), this.curveType(), this.tension()];
-            const mappedPoints = points.map((pt) => pt instanceof Vector3 ? pt : new Vector3(...pt));
-            return new CatmullRomCurve3(mappedPoints, closed, curveType, tension);
+            const mappedPoints = points.map((pt) => is.three(pt, 'isVector3') ? pt : new THREE.Vector3(...pt));
+            return new THREE.CatmullRomCurve3(mappedPoints, closed, curveType, tension);
         });
         this.segmentedPoints = computed(() => {
             const [curve, segments] = [this.curve(), this.segments()];
@@ -223,7 +227,7 @@ class NgtsCatmullRomLine {
                 return undefined;
             if (vertexColors.length === segments + 1)
                 return vertexColors;
-            const mappedColors = vertexColors.map((color) => color instanceof Color ? color : new Color(...color));
+            const mappedColors = vertexColors.map((color) => is.three(color, 'isColor') ? color : new THREE.Color(...color));
             if (untracked(this.closed))
                 mappedColors.push(mappedColors[0].clone());
             const iColors = [mappedColors[0]];
@@ -275,11 +279,11 @@ class NgtsCubicBezierLine {
         this.segments = pick(this.options, 'segments');
         this.points = computed(() => {
             const [start, end, midA, midB, segments] = [this.start(), this.end(), this.midA(), this.midB(), this.segments()];
-            const startV = start instanceof Vector3 ? start : new Vector3(...start);
-            const endV = end instanceof Vector3 ? end : new Vector3(...end);
-            const midAV = midA instanceof Vector3 ? midA : new Vector3(...midA);
-            const midBV = midB instanceof Vector3 ? midB : new Vector3(...midB);
-            return new CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
+            const startV = is.three(start, 'isVector3') ? start : new THREE.Vector3(...start);
+            const endV = is.three(end, 'isVector3') ? end : new THREE.Vector3(...end);
+            const midAV = is.three(midA, 'isVector3') ? midA : new THREE.Vector3(...midA);
+            const midBV = is.three(midB, 'isVector3') ? midB : new THREE.Vector3(...midB);
+            return new THREE.CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsCubicBezierLine, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -318,7 +322,7 @@ class NgtsEdges {
             const line = this.line().lineRef()?.nativeElement;
             if (!line)
                 return;
-            const lS = getLocalState(line);
+            const lS = getInstanceState(line);
             if (!lS)
                 return;
             const parent = lS.parent();
@@ -333,7 +337,7 @@ class NgtsEdges {
                 return;
             this.memoizedGeometry = geometry;
             this.memoizedThreshold = threshold;
-            const points = new EdgesGeometry(geometry, threshold).attributes['position']
+            const points = new THREE.EdgesGeometry(geometry, threshold).attributes['position']
                 .array;
             line.geometry.setPositions(points);
             checkNeedsUpdate(line.geometry.attributes['instanceStart']);
@@ -376,9 +380,9 @@ class NgtsGradientTexture {
         this.colors = input.required();
         this.options = input(defaultOptions$6, { transform: mergeInputs(defaultOptions$6) });
         this.parameters = omit(this.options, ['size', 'width', 'type', 'innerCircleRadius', 'outerCircleRadius']);
-        this.store = injectStore();
-        this.outputColorSpace = this.store.select('gl', 'outputColorSpace');
         this.document = inject(DOCUMENT);
+        this.store = injectStore();
+        this.outputColorSpace = this.store.gl.outputColorSpace;
         this.canvas = computed(() => {
             const canvas = this.document.createElement('canvas');
             const context = canvas.getContext('2d');
@@ -401,7 +405,7 @@ class NgtsGradientTexture {
                     : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
                 gradient = context.createRadialGradient(canvasCenterX, canvasCenterY, Math.abs(innerCircleRadius), canvasCenterX, canvasCenterY, radius);
             }
-            const tempColor = new Color(); // reuse instance for performance
+            const tempColor = new THREE.Color(); // reuse instance for performance
             let i = stops.length;
             while (i--) {
                 gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle());
@@ -459,7 +463,7 @@ const defaultOptions$5 = {
     fadeDistance: 100,
     fadeStrength: 1,
     fadeFrom: 1,
-    side: BackSide,
+    side: THREE.BackSide,
 };
 class NgtsGrid {
     constructor() {
@@ -480,13 +484,36 @@ class NgtsGrid {
             'side',
         ]);
         this.meshRef = viewChild.required('mesh');
-        this.plane = new Plane();
-        this.upVector = new Vector3(0, 1, 0);
-        this.zeroVector = new Vector3(0, 0, 0);
+        this.plane = new THREE.Plane();
+        this.upVector = new THREE.Vector3(0, 1, 0);
+        this.zeroVector = new THREE.Vector3(0, 0, 0);
         this.planeArgs = pick(this.options, 'planeArgs');
         this.side = pick(this.options, 'side');
+        this.cellSize = pick(this.options, 'cellSize');
+        this.sectionSize = pick(this.options, 'sectionSize');
+        this.cellColor = pick(this.options, 'cellColor');
+        this.sectionColor = pick(this.options, 'sectionColor');
+        this.cellThickness = pick(this.options, 'cellThickness');
+        this.sectionThickness = pick(this.options, 'sectionThickness');
+        this.fadeDistance = pick(this.options, 'fadeDistance');
+        this.fadeStrength = pick(this.options, 'fadeStrength');
+        this.fadeFrom = pick(this.options, 'fadeFrom');
+        this.infiniteGrid = pick(this.options, 'infiniteGrid');
+        this.followCamera = pick(this.options, 'followCamera');
         this.uniforms = computed(() => {
-            const { cellSize, sectionSize, cellColor, sectionColor, cellThickness, sectionThickness, fadeDistance, fadeStrength, fadeFrom, infiniteGrid, followCamera, } = this.options();
+            const [cellSize, sectionSize, cellColor, sectionColor, cellThickness, sectionThickness, fadeDistance, fadeStrength, fadeFrom, infiniteGrid, followCamera,] = [
+                this.cellSize(),
+                this.sectionSize(),
+                this.cellColor(),
+                this.sectionColor(),
+                this.cellThickness(),
+                this.sectionThickness(),
+                this.fadeDistance(),
+                this.fadeStrength(),
+                this.fadeFrom(),
+                this.infiniteGrid(),
+                this.followCamera(),
+            ];
             return {
                 cellSize,
                 sectionSize,
@@ -545,7 +572,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 function injectHelper(object, helperConstructor, { injector, args = () => [], } = {}) {
     return assertInjector(injectHelper, injector, () => {
         const store = injectStore();
-        const scene = store.select('scene');
         const helper = computed(() => {
             const maybeObject3D = object();
             if (!maybeObject3D)
@@ -561,10 +587,10 @@ function injectHelper(object, helperConstructor, { injector, args = () => [], }
             const currentHelper = helper();
             if (!currentHelper)
                 return;
-            const _scene = scene();
-            _scene.add(currentHelper);
+            const scene = store.scene();
+            scene.add(currentHelper);
             onCleanup(() => {
-                _scene.remove(currentHelper);
+                scene.remove(currentHelper);
                 currentHelper.dispose?.();
             });
         });
@@ -585,10 +611,10 @@ class NgtsHelper {
             const helper = this.helperRef().nativeElement;
             if (!helper)
                 return;
-            const localState = getLocalState(helper);
-            if (!localState)
+            const instanceState = getInstanceState(helper);
+            if (!instanceState)
                 return;
-            return localState.parent();
+            return instanceState.parent();
         });
         this.helper = injectHelper(this.parent, this.type, { args: this.options });
         extend({ Object3D });
@@ -622,8 +648,8 @@ class NgtsPrismGeometry {
         this.parameters = computed(() => ({ ...this.options(), depth: this.options().height }));
         this.shape = computed(() => {
             const vertices = this.vertices();
-            const interpolatedVertices = vertices.map((v) => (v instanceof Vector2 ? v : new Vector2(...v)));
-            return new Shape(interpolatedVertices);
+            const interpolatedVertices = vertices.map((v) => is.three(v, 'isVector2') ? v : new THREE.Vector2(...v));
+            return new THREE.Shape(interpolatedVertices);
         });
         this.geometryRef = viewChild('geometry');
         extend({ ExtrudeGeometry });
@@ -664,7 +690,7 @@ class NgtsQuadraticBezierLine {
         this.segments = pick(this.options, 'segments');
         this.line = viewChild.required(NgtsLine);
         this.points = computed(() => this.getPoints(this.start(), this.end(), this.mid(), this.segments()));
-        this.curve = new QuadraticBezierCurve3();
+        this.curve = new THREE.QuadraticBezierCurve3();
     }
     setPoints(start, end, mid) {
         const points = this.getPoints(start, end, mid);
@@ -673,15 +699,15 @@ class NgtsQuadraticBezierLine {
             geometry.setPositions(points.map((p) => p.toArray()).flat());
     }
     getPoints(start, end, mid, segments = 20) {
-        if (start instanceof Vector3)
+        if (is.three(start, 'isVector3'))
             this.curve.v0.copy(start);
         else
             this.curve.v0.set(...start);
-        if (end instanceof Vector3)
+        if (is.three(end, 'isVector3'))
             this.curve.v2.copy(end);
         else
             this.curve.v2.set(...end);
-        if (mid instanceof Vector3) {
+        if (is.three(mid, 'isVector3')) {
             this.curve.v1.copy(mid);
         }
         else if (Array.isArray(mid)) {
@@ -691,7 +717,7 @@ class NgtsQuadraticBezierLine {
             this.curve.v1.copy(this.curve.v0
                 .clone()
                 .add(this.curve.v2.clone().sub(this.curve.v0))
-                .add(new Vector3(0, this.curve.v0.y - this.curve.v2.y, 0)));
+                .add(new THREE.Vector3(0, this.curve.v0.y - this.curve.v2.y, 0)));
         }
         return this.curve.getPoints(segments);
     }
@@ -718,7 +744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 
 const eps = 0.00001;
 function createShape(width, height, radius0) {
-    const shape = new Shape();
+    const shape = new THREE.Shape();
     const radius = radius0 - eps;
     shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
     shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
@@ -763,7 +789,7 @@ class NgtsRoundedBox {
             const [width, height, radius] = [this.width(), this.height(), this.radius()];
             return createShape(width, height, radius);
         });
-        this.params = computed(() => {
+        this.geometryParameters = computed(() => {
             const [depth, radius, smoothness, bevelSegments, steps] = [
                 this.depth(),
                 this.radius(),
@@ -783,10 +809,7 @@ class NgtsRoundedBox {
         });
         extend({ ExtrudeGeometry, Mesh });
         const objectEvents = inject(NgtObjectEvents, { host: true });
-        effect(() => {
-            const mesh = this.meshRef().nativeElement;
-            objectEvents.ngtObjectEvents.set(mesh);
-        });
+        objectEvents.ngtObjectEvents.set(this.meshRef);
         effect(() => {
             const geometry = this.geometryRef()?.nativeElement;
             if (!geometry)
@@ -798,7 +821,7 @@ class NgtsRoundedBox {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsRoundedBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: NgtsRoundedBox, isStandalone: true, selector: "ngts-rounded-box", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }, { propertyName: "geometryRef", first: true, predicate: ["geometry"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.NgtObjectEvents, outputs: ["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"] }], ngImport: i0, template: `
 		<ngt-mesh #mesh [parameters]="parameters()">
-			<ngt-extrude-geometry #geometry *args="[shape(), params()]" />
+			<ngt-extrude-geometry #geometry *args="[shape(), geometryParameters()]" />
 			<ng-content />
 		</ngt-mesh>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -809,7 +832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     selector: 'ngts-rounded-box',
                     template: `
 		<ngt-mesh #mesh [parameters]="parameters()">
-			<ngt-extrude-geometry #geometry *args="[shape(), params()]" />
+			<ngt-extrude-geometry #geometry *args="[shape(), geometryParameters()]" />
 			<ng-content />
 		</ngt-mesh>
 	`,
@@ -852,7 +875,6 @@ class NgtsText {
         this.parameters = omit(this.options, ['font', 'fontSize', 'sdfGlyphSize', 'anchorX', 'anchorY', 'characters']);
         this.synced = output();
         this.store = injectStore();
-        this.invalidate = this.store.select('invalidate');
         this.characters = pick(this.options, 'characters');
         this.font = pick(this.options, 'font');
         this.anchorX = pick(this.options, 'anchorX');
@@ -864,13 +886,13 @@ class NgtsText {
             this.troikaMesh.dispose();
         });
         effect(() => {
-            const [font, characters, invalidate] = [this.font(), this.characters(), this.invalidate()];
+            const [font, characters, invalidate] = [this.font(), this.characters(), this.store.invalidate()];
             if (font) {
                 preloadFont({ font, characters }, () => invalidate());
             }
         });
         effect(() => {
-            const [invalidate] = [this.invalidate(), this.text(), this.options()];
+            const [invalidate] = [this.store.invalidate(), this.text(), this.options()];
             this.troikaMesh.sync(() => {
                 invalidate();
                 this.synced.emit(this.troikaMesh);
@@ -964,9 +986,10 @@ class NgtsText3D {
             'curveSegments',
         ]);
         this.textArgs = computed(() => {
-            const [text, font, textOptions] = [this.text(), this.loadedFont(), this.textOptions()];
+            const font = this.loadedFont();
             if (!font)
                 return null;
+            const [text, textOptions] = [this.text(), this.textOptions()];
             return [text, { font, ...textOptions }];
         });
         extend({ Mesh, TextGeometry });