angular-three-soba 1.4.0 → 1.6.0-beta.0

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

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, InjectionToken, inject, Directive, EventEmitter, TemplateRef, Output, ContentChild } from '@angular/core';
-import { extend, NgtRxStore, injectNgtRef, NgtStore, NgtPortal, NgtPortalContent, NgtArgs, NgtRepeat, startWithUndefined, NgtPush } from 'angular-three';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Directive, inject, InjectionToken, EventEmitter, TemplateRef, Output, ContentChild } from '@angular/core';
+import { extend, NgtRxStore, injectNgtRef, NgtRef, NgtStore, startWithUndefined, NgtArgs, NgtPortal, NgtPortalContent, NgtRepeat, NgtPush } from 'angular-three';
 import * as THREE from 'three';
-import { Group, Vector3, Quaternion, Object3D, Matrix4, Mesh, BoxGeometry, MeshBasicMaterial, MeshLambertMaterial, CanvasTexture, AmbientLight, PointLight, Sprite, SpriteMaterial } from 'three';
-import { NgTemplateOutlet, DOCUMENT, NgFor, NgIf } from '@angular/common';
+import { Group, CatmullRomCurve3, Vector3, Quaternion, Object3D, Matrix4, Mesh, BoxGeometry, MeshBasicMaterial, MeshLambertMaterial, CanvasTexture, AmbientLight, PointLight, Sprite, SpriteMaterial } from 'three';
+import { combineLatest, map, switchMap, of } from 'rxjs';
+import { LineMaterial, LineSegmentsGeometry, LineGeometry, LineSegments2, Line2, TextGeometry, FontLoader } from 'three-stdlib';
+import { NgIf, NgTemplateOutlet, DOCUMENT, NgFor } from '@angular/common';
 import { selectSlice } from '@rx-angular/state';
 import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
-import { combineLatest, map, switchMap, of } from 'rxjs';
-import { TextGeometry, FontLoader } from 'three-stdlib';
 import { RxActionFactory } from '@rx-angular/state/actions';
 import { Text, preloadFont } from 'troika-three-text';
 
@@ -52,20 +52,21 @@ class NgtsBillboard extends NgtRxStore {
 }
 NgtsBillboard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsBillboard, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsBillboard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { billboardRef: "billboardRef", follow: "follow", lockX: "lockX", lockY: "lockY", lockZ: "lockZ" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="billboardRef" (beforeRender)="onBeforeRender($any($event))">
+        <ngt-group ngtCompound *ref="billboardRef" (beforeRender)="onBeforeRender($any($event))">
             <ng-content />
         </ngt-group>
-    `, isInline: true });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsBillboard, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-billboard',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="billboardRef" (beforeRender)="onBeforeRender($any($event))">
+        <ngt-group ngtCompound *ref="billboardRef" (beforeRender)="onBeforeRender($any($event))">
             <ng-content />
         </ngt-group>
     `,
+                    imports: [NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { billboardRef: [{
@@ -80,6 +81,409 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                 type: Input
             }] } });
 
+class NgtsLineInput extends NgtRxStore {
+    set vertexColors(vertexColors) {
+        this.set({ vertexColors });
+    }
+    set lineWidth(lineWidth) {
+        this.set({ lineWidth });
+    }
+    set alphaToCoverage(alphaToCoverage) {
+        this.set({ alphaToCoverage });
+    }
+    set color(color) {
+        this.set({ color });
+    }
+    set dashed(dashed) {
+        this.set({ dashed });
+    }
+    set dashScale(dashScale) {
+        this.set({ dashScale });
+    }
+    set dashSize(dashSize) {
+        this.set({ dashSize });
+    }
+    set dashOffset(dashOffset) {
+        this.set({ dashOffset });
+    }
+    set gapSize(gapSize) {
+        this.set({ gapSize });
+    }
+    set resolution(resolution) {
+        this.set({ resolution });
+    }
+    set wireframe(wireframe) {
+        this.set({ wireframe });
+    }
+    set worldUnits(worldUnits) {
+        this.set({ worldUnits });
+    }
+    initialize() {
+        super.initialize();
+        this.set({ color: 'black' });
+    }
+}
+NgtsLineInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsLineInput, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtsLineInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: NgtsLineInput, inputs: { vertexColors: "vertexColors", lineWidth: "lineWidth", alphaToCoverage: "alphaToCoverage", color: "color", dashed: "dashed", dashScale: "dashScale", dashSize: "dashSize", dashOffset: "dashOffset", gapSize: "gapSize", resolution: "resolution", wireframe: "wireframe", worldUnits: "worldUnits" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsLineInput, decorators: [{
+            type: Directive
+        }], propDecorators: { vertexColors: [{
+                type: Input
+            }], lineWidth: [{
+                type: Input
+            }], alphaToCoverage: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], dashed: [{
+                type: Input
+            }], dashScale: [{
+                type: Input
+            }], dashSize: [{
+                type: Input
+            }], dashOffset: [{
+                type: Input
+            }], gapSize: [{
+                type: Input
+            }], resolution: [{
+                type: Input
+            }], wireframe: [{
+                type: Input
+            }], worldUnits: [{
+                type: Input
+            }] } });
+
+class NgtsLine extends NgtsLineInput {
+    constructor() {
+        super(...arguments);
+        this.Boolean = Boolean;
+        this.lineMaterial = new LineMaterial();
+        this.store = inject(NgtStore);
+        this.line = null;
+        this.lineRef = injectNgtRef();
+    }
+    set points(points) {
+        this.set({ points });
+    }
+    set segments(segments) {
+        this.set({ segments });
+    }
+    onAfterAttach({ parent }) {
+        parent.computeLineDistances();
+    }
+    initialize() {
+        super.initialize();
+        this.set({ segments: false });
+        this.connect('lineGeometry', combineLatest([
+            this.select('points'),
+            this.select('segments'),
+            this.select('vertexColors').pipe(startWithUndefined()),
+        ]).pipe(map(([points, segments, vertexColors]) => {
+            const geometry = segments ? new LineSegmentsGeometry() : new LineGeometry();
+            const pValues = points.map((p) => {
+                const isArray = Array.isArray(p);
+                return p instanceof THREE.Vector3
+                    ? [p.x, p.y, p.z]
+                    : p instanceof THREE.Vector2
+                        ? [p.x, p.y, 0]
+                        : isArray && p.length === 3
+                            ? [p[0], p[1], p[2]]
+                            : isArray && p.length === 2
+                                ? [p[0], p[1], 0]
+                                : p;
+            });
+            geometry.setPositions(pValues.flat());
+            if (vertexColors) {
+                const cValues = vertexColors.map((c) => c instanceof THREE.Color ? c.toArray() : c);
+                geometry.setColors(cValues.flat());
+            }
+            return geometry;
+        })));
+    }
+    ngOnInit() {
+        this.connect('materialResolution', combineLatest([this.store.select('size'), this.select('resolution').pipe(startWithUndefined())]).pipe(map(([size, resolution]) => resolution ?? [size.width, size.height])));
+        this.line = this.get('segments') ? new LineSegments2() : new Line2();
+        this.disposeGeometry();
+    }
+    disposeGeometry() {
+        this.effect(this.select('lineGeometry'), (lineGeometry) => {
+            return () => lineGeometry.dispose();
+        });
+    }
+}
+NgtsLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsLine, isStandalone: true, selector: "ngts-line[points]", inputs: { lineRef: "lineRef", points: "points", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
+        <ng-container *args="[line]">
+            <ngt-primitive *ref="lineRef" ngtCompound>
+                <ngt-primitive
+                    *args="[get('lineGeometry')]"
+                    attach="geometry"
+                    (afterAttach)="onAfterAttach($any($event))"
+                />
+                <ngt-primitive
+                    *args="[lineMaterial]"
+                    attach="material"
+                    [color]="get('color')"
+                    [vertexColors]="Boolean(get('vertexColors'))"
+                    [resolution]="get('materialResolution')"
+                    [linewidth]="get('lineWidth')"
+                    [alphaToCoverage]="get('alphaToCoverage')"
+                    [dashed]="get('dashed')"
+                    [dashScale]="get('dashScale') ?? lineMaterial.dashScale"
+                    [dashSize]="get('dashSize') ?? lineMaterial.dashSize"
+                    [dashOffset]="get('dashOffset') ?? lineMaterial.dashOffset"
+                    [gapSize]="get('gapSize') ?? lineMaterial.gapSize"
+                    [wireframe]="get('wireframe') ?? lineMaterial.wireframe"
+                    [worldUnits]="get('worldUnits')"
+                />
+            </ngt-primitive>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsLine, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-line[points]',
+                    standalone: true,
+                    template: `
+        <ng-container *args="[line]">
+            <ngt-primitive *ref="lineRef" ngtCompound>
+                <ngt-primitive
+                    *args="[get('lineGeometry')]"
+                    attach="geometry"
+                    (afterAttach)="onAfterAttach($any($event))"
+                />
+                <ngt-primitive
+                    *args="[lineMaterial]"
+                    attach="material"
+                    [color]="get('color')"
+                    [vertexColors]="Boolean(get('vertexColors'))"
+                    [resolution]="get('materialResolution')"
+                    [linewidth]="get('lineWidth')"
+                    [alphaToCoverage]="get('alphaToCoverage')"
+                    [dashed]="get('dashed')"
+                    [dashScale]="get('dashScale') ?? lineMaterial.dashScale"
+                    [dashSize]="get('dashSize') ?? lineMaterial.dashSize"
+                    [dashOffset]="get('dashOffset') ?? lineMaterial.dashOffset"
+                    [gapSize]="get('gapSize') ?? lineMaterial.gapSize"
+                    [wireframe]="get('wireframe') ?? lineMaterial.wireframe"
+                    [worldUnits]="get('worldUnits')"
+                />
+            </ngt-primitive>
+        </ng-container>
+    `,
+                    imports: [NgtArgs, NgtRef],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { lineRef: [{
+                type: Input
+            }], points: [{
+                type: Input
+            }], segments: [{
+                type: Input
+            }] } });
+
+class NgtsCatmullRomLine extends NgtsLineInput {
+    constructor() {
+        super(...arguments);
+        this.lineRef = injectNgtRef();
+    }
+    set points(points) {
+        this.set({ points });
+    }
+    set closed(closed) {
+        this.set({ closed });
+    }
+    set curveType(curveType) {
+        this.set({ curveType });
+    }
+    set tension(tension) {
+        this.set({ tension });
+    }
+    set segments(segments) {
+        this.set({ segments });
+    }
+    initialize() {
+        super.initialize();
+        this.set({ closed: false, curveType: 'centripetal', tension: 0.5, segments: 64 });
+        this.connect('curve', combineLatest([
+            this.select('points'),
+            this.select('closed'),
+            this.select('curveType'),
+            this.select('tension'),
+        ]).pipe(map(([points, closed, curveType, tension]) => {
+            const mappedPoints = points.map((p) => p instanceof THREE.Vector3 ? p : new THREE.Vector3(...p));
+            return new CatmullRomCurve3(mappedPoints, closed, curveType, tension);
+        })));
+        this.connect('segmentedPoints', combineLatest([this.select('curve'), this.select('segments')]).pipe(map(([curve, segments]) => curve.getPoints(segments))));
+        this.connect('interpolatedVertexColors', combineLatest([this.select('vertexColors').pipe(startWithUndefined()), this.select('segments')]).pipe(map(([vertexColors, segments]) => {
+            if (!vertexColors || vertexColors.length < 2)
+                return undefined;
+            if (vertexColors.length === segments + 1)
+                return vertexColors;
+            const mappedColors = vertexColors.map((color) => color instanceof THREE.Color ? color : new THREE.Color(...color));
+            if (this.get('closed'))
+                mappedColors.push(mappedColors[0].clone());
+            const iColors = [mappedColors[0]];
+            const divisions = segments / (mappedColors.length - 1);
+            for (let i = 0; i < segments; i++) {
+                const alpha = (i % divisions) / divisions;
+                const colorIndex = Math.floor(i / divisions);
+                iColors.push(mappedColors[colorIndex].clone().lerp(mappedColors[colorIndex + 1], alpha));
+            }
+            iColors.push(mappedColors[mappedColors.length - 1]);
+        })));
+    }
+}
+NgtsCatmullRomLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCatmullRomLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsCatmullRomLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsCatmullRomLine, isStandalone: true, selector: "ngts-catmull-rom-line[points]", inputs: { lineRef: "lineRef", points: "points", closed: "closed", curveType: "curveType", tension: "tension", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
+        <ngts-line
+            [lineRef]="lineRef"
+            [points]="get('segmentedPoints')"
+            [color]="get('color')"
+            [vertexColors]="get('interpolatedVertexColors')"
+            [resolution]="get('resolution')"
+            [lineWidth]="get('lineWidth')"
+            [alphaToCoverage]="get('alphaToCoverage')"
+            [dashed]="get('dashed')"
+            [dashScale]="get('dashScale')"
+            [dashOffset]="get('dashOffset')"
+            [dashSize]="get('dashSize')"
+            [gapSize]="get('gapSize')"
+            [wireframe]="get('wireframe')"
+            [worldUnits]="get('worldUnits')"
+        />
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCatmullRomLine, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-catmull-rom-line[points]',
+                    standalone: true,
+                    template: `
+        <ngts-line
+            [lineRef]="lineRef"
+            [points]="get('segmentedPoints')"
+            [color]="get('color')"
+            [vertexColors]="get('interpolatedVertexColors')"
+            [resolution]="get('resolution')"
+            [lineWidth]="get('lineWidth')"
+            [alphaToCoverage]="get('alphaToCoverage')"
+            [dashed]="get('dashed')"
+            [dashScale]="get('dashScale')"
+            [dashOffset]="get('dashOffset')"
+            [dashSize]="get('dashSize')"
+            [gapSize]="get('gapSize')"
+            [wireframe]="get('wireframe')"
+            [worldUnits]="get('worldUnits')"
+        />
+    `,
+                    imports: [NgtsLine],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { lineRef: [{
+                type: Input
+            }], points: [{
+                type: Input
+            }], closed: [{
+                type: Input
+            }], curveType: [{
+                type: Input
+            }], tension: [{
+                type: Input
+            }], segments: [{
+                type: Input
+            }] } });
+
+class NgtsCubicBezierLine extends NgtsLineInput {
+    constructor() {
+        super(...arguments);
+        this.lineRef = injectNgtRef();
+    }
+    set start(start) {
+        this.set({ start });
+    }
+    set end(end) {
+        this.set({ end });
+    }
+    set midA(midA) {
+        this.set({ midA });
+    }
+    set midB(midB) {
+        this.set({ midB });
+    }
+    set segments(segments) {
+        this.set({ segments });
+    }
+    initialize() {
+        super.initialize();
+        this.set({ segments: 10 });
+        this.connect('points', this.select(['start', 'end', 'midA', 'midB', 'segments'], ({ start, end, midA, midB, segments }) => {
+            const startV = start instanceof THREE.Vector3 ? start : new THREE.Vector3(...start);
+            const endV = end instanceof THREE.Vector3 ? end : new THREE.Vector3(...end);
+            const midAV = midA instanceof THREE.Vector3 ? midA : new THREE.Vector3(...midA);
+            const midBV = midB instanceof THREE.Vector3 ? midB : new THREE.Vector3(...midB);
+            return new THREE.CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
+        }));
+    }
+}
+NgtsCubicBezierLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCubicBezierLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsCubicBezierLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsCubicBezierLine, isStandalone: true, selector: "ngts-cubic-bezier-line[start][end][midA][midB]", inputs: { lineRef: "lineRef", start: "start", end: "end", midA: "midA", midB: "midB", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
+        <ngts-line
+            [lineRef]="lineRef"
+            [points]="get('points')"
+            [color]="get('color')"
+            [vertexColors]="get('vertexColors')"
+            [resolution]="get('resolution')"
+            [lineWidth]="get('lineWidth')"
+            [alphaToCoverage]="get('alphaToCoverage')"
+            [dashed]="get('dashed')"
+            [dashScale]="get('dashScale')"
+            [dashSize]="get('dashSize')"
+            [dashOffset]="get('dashOffset')"
+            [gapSize]="get('gapSize')"
+            [wireframe]="get('wireframe')"
+            [worldUnits]="get('worldUnits')"
+        />
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsCubicBezierLine, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-cubic-bezier-line[start][end][midA][midB]',
+                    standalone: true,
+                    template: `
+        <ngts-line
+            [lineRef]="lineRef"
+            [points]="get('points')"
+            [color]="get('color')"
+            [vertexColors]="get('vertexColors')"
+            [resolution]="get('resolution')"
+            [lineWidth]="get('lineWidth')"
+            [alphaToCoverage]="get('alphaToCoverage')"
+            [dashed]="get('dashed')"
+            [dashScale]="get('dashScale')"
+            [dashSize]="get('dashSize')"
+            [dashOffset]="get('dashOffset')"
+            [gapSize]="get('gapSize')"
+            [wireframe]="get('wireframe')"
+            [worldUnits]="get('worldUnits')"
+        />
+    `,
+                    imports: [NgtsLine, NgIf],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { lineRef: [{
+                type: Input
+            }], start: [{
+                type: Input
+            }], end: [{
+                type: Input
+            }], midA: [{
+                type: Input
+            }], midB: [{
+                type: Input
+            }], segments: [{
+                type: Input
+            }] } });
+
 const isOrbitControls = (controls) => {
     return 'minPolarAngle' in controls;
 };
@@ -227,7 +631,7 @@ NgtsGizmoHelper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                     [position]="[0, 0, 200]"
                 />
                 <ngt-group
-                    [ref]="gizmoRef"
+                    *ref="gizmoRef"
                     [position]="get('gizmoPosition')"
                     (beforeRender)="onBeforeRender($any($event).state.delta)"
                 >
@@ -235,7 +639,7 @@ NgtsGizmoHelper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 </ngt-group>
             </ng-template>
         </ngt-portal>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "component", type: NgtsOrthographicCamera, selector: "ngts-orthographic-camera", inputs: ["left", "right", "top", "bottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }, { kind: "component", type: NgtsOrthographicCamera, selector: "ngts-orthographic-camera", inputs: ["left", "right", "top", "bottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsGizmoHelper, decorators: [{
             type: Component,
             args: [{
@@ -250,7 +654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                     [position]="[0, 0, 200]"
                 />
                 <ngt-group
-                    [ref]="gizmoRef"
+                    *ref="gizmoRef"
                     [position]="get('gizmoPosition')"
                     (beforeRender)="onBeforeRender($any($event).state.delta)"
                 >
@@ -259,7 +663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
             </ng-template>
         </ngt-portal>
     `,
-                    imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
+                    imports: [NgtPortal, NgtPortalContent, NgtRef, NgtsOrthographicCamera, NgTemplateOutlet],
                     providers: [{ provide: NGTS_GIZMO_HELPER_API, useFactory: gizmoHelperApiFactory, deps: [NgtsGizmoHelper] }],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -1178,6 +1582,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                 type: Output
             }] } });
 
+const v = new THREE.Vector3();
+class NgtsQuadraticBezierLine extends NgtsLineInput {
+    constructor() {
+        super(...arguments);
+        this.curve = new THREE.QuadraticBezierCurve3(undefined, undefined, undefined);
+        this.lineRef = injectNgtRef();
+    }
+    set start(start) {
+        this.set({ start });
+    }
+    set end(end) {
+        this.set({ end });
+    }
+    set mid(mid) {
+        this.set({ mid });
+    }
+    set segments(segments) {
+        this.set({ segments });
+    }
+    initialize() {
+        super.initialize();
+        this.set({ start: [0, 0, 0], end: [0, 0, 0], segments: 20 });
+    }
+    ngOnInit() {
+        this.connect('points', combineLatest([
+            this.select('start'),
+            this.select('end'),
+            this.select('mid').pipe(startWithUndefined()),
+            this.select('segments'),
+        ]).pipe(map(([start, end, mid, segments]) => this.getPoints(start, end, mid, segments))));
+        this.replaceSetPoints();
+    }
+    replaceSetPoints() {
+        this.hold(this.lineRef.$, (line) => {
+            line.setPoints = (start, end, mid) => {
+                const points = this.getPoints(start, end, mid);
+                if (this.lineRef.nativeElement.geometry) {
+                    this.lineRef.nativeElement.geometry.setPositions(points.map((p) => p.toArray()).flat());
+                }
+            };
+        });
+    }
+    getPoints(start, end, mid, segments = 20) {
+        if (start instanceof THREE.Vector3)
+            this.curve.v0.copy(start);
+        else
+            this.curve.v0.set(...start);
+        if (end instanceof THREE.Vector3)
+            this.curve.v2.copy(end);
+        else
+            this.curve.v2.set(...end);
+        if (mid instanceof THREE.Vector3) {
+            this.curve.v1.copy(mid);
+        }
+        else {
+            this.curve.v1.copy(this.curve.v0
+                .clone()
+                .add(this.curve.v2.clone().sub(this.curve.v0))
+                .add(v.set(0, this.curve.v0.y - this.curve.v2.y, 0)));
+        }
+        return this.curve.getPoints(segments);
+    }
+}
+NgtsQuadraticBezierLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsQuadraticBezierLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsQuadraticBezierLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsQuadraticBezierLine, isStandalone: true, selector: "ngts-quadratic-bezier-line", inputs: { lineRef: "lineRef", start: "start", end: "end", mid: "mid", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
+        <ngts-line
+            [lineRef]="lineRef"
+            [points]="get('points')"
+            [color]="get('color')"
+            [vertexColors]="get('vertexColors')"
+            [resolution]="get('resolution')"
+            [lineWidth]="get('lineWidth')"
+            [alphaToCoverage]="get('alphaToCoverage')"
+            [dashed]="get('dashed')"
+            [dashScale]="get('dashScale')"
+            [dashSize]="get('dashSize')"
+            [dashOffset]="get('dashOffset')"
+            [gapSize]="get('gapSize')"
+            [wireframe]="get('wireframe')"
+            [worldUnits]="get('worldUnits')"
+        />
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line[points]", inputs: ["lineRef", "points", "segments"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsQuadraticBezierLine, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-quadratic-bezier-line',
+                    standalone: true,
+                    template: `
+        <ngts-line
+            [lineRef]="lineRef"
+            [points]="get('points')"
+            [color]="get('color')"
+            [vertexColors]="get('vertexColors')"
+            [resolution]="get('resolution')"
+            [lineWidth]="get('lineWidth')"
+            [alphaToCoverage]="get('alphaToCoverage')"
+            [dashed]="get('dashed')"
+            [dashScale]="get('dashScale')"
+            [dashSize]="get('dashSize')"
+            [dashOffset]="get('dashOffset')"
+            [gapSize]="get('gapSize')"
+            [wireframe]="get('wireframe')"
+            [worldUnits]="get('worldUnits')"
+        />
+    `,
+                    imports: [NgtsLine],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { lineRef: [{
+                type: Input
+            }], start: [{
+                type: Input
+            }], end: [{
+                type: Input
+            }], mid: [{
+                type: Input
+            }], segments: [{
+                type: Input
+            }] } });
+
 extend({ Mesh, TextGeometry });
 class NgtsText3D extends NgtRxStore {
     constructor() {
@@ -1344,8 +1868,6 @@ class NgtsText extends NgtRxStore {
         this.set({ anchorX: 'center', anchorY: 'middle', text: '' });
     }
     ngOnInit() {
-        if (!this.textRef.nativeElement)
-            this.textRef.nativeElement = this.troikaText;
         this.preloadFont();
         this.syncText();
     }
@@ -1372,35 +1894,39 @@ class NgtsText extends NgtRxStore {
 }
 NgtsText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsText, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsText, isStandalone: true, selector: "ngts-text[text]", inputs: { textRef: "textRef", text: "text", characters: "characters", font: "font", anchorX: "anchorX", anchorY: "anchorY" }, outputs: { sync: "sync" }, providers: [RxActionFactory], usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive
-            ngtCompound
-            *args="[textRef.nativeElement]"
-            [text]="get('text')"
-            [anchorX]="get('anchorX')"
-            [anchorY]="get('anchorY')"
-            [font]="get('font')"
-        >
-            <ng-content />
-        </ngt-primitive>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+        <ng-container *args="[troikaText]">
+            <ngt-primitive
+                ngtCompound
+                *ref="textRef"
+                [text]="get('text')"
+                [anchorX]="get('anchorX')"
+                [anchorY]="get('anchorY')"
+                [font]="get('font')"
+            >
+                <ng-content />
+            </ngt-primitive>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text[text]',
                     standalone: true,
                     template: `
-        <ngt-primitive
-            ngtCompound
-            *args="[textRef.nativeElement]"
-            [text]="get('text')"
-            [anchorX]="get('anchorX')"
-            [anchorY]="get('anchorY')"
-            [font]="get('font')"
-        >
-            <ng-content />
-        </ngt-primitive>
+        <ng-container *args="[troikaText]">
+            <ngt-primitive
+                ngtCompound
+                *ref="textRef"
+                [text]="get('text')"
+                [anchorX]="get('anchorX')"
+                [anchorY]="get('anchorY')"
+                [font]="get('font')"
+            >
+                <ng-content />
+            </ngt-primitive>
+        </ng-container>
     `,
-                    imports: [NgtArgs],
+                    imports: [NgtArgs, NgtRef],
                     providers: [RxActionFactory],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -1424,5 +1950,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGTS_GIZMO_HELPER_API, NgtsBillboard, NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsText, NgtsText3D };
+export { NGTS_GIZMO_HELPER_API, NgtsBillboard, NgtsCatmullRomLine, NgtsCubicBezierLine, NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsLine, NgtsQuadraticBezierLine, NgtsText, NgtsText3D };
 //# sourceMappingURL=angular-three-soba-abstractions.mjs.map