angular-three-soba 1.13.0 → 2.0.0-beta.2

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

@@ -1,2045 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Directive, inject, InjectionToken, EventEmitter, TemplateRef, Output, ContentChild } from '@angular/core';
-import { extend, NgtRxStore, injectNgtRef, NgtStore, startWithUndefined, NgtArgs, NgtPortal, NgtPortalContent, NgtRepeat, NgtPush } from 'angular-three';
-import * as THREE from 'three';
-import { Group, CatmullRomCurve3, LineSegments, LineBasicMaterial, 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 { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
-import { RxActionFactory } from '@rx-angular/state/actions';
-import { Text, preloadFont } from 'troika-three-text';
-
-extend({ Group });
-class NgtsBillboard extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.billboardRef = injectNgtRef();
-    }
-    set follow(follow) {
-        this.set({ follow });
-    }
-    set lockX(lockX) {
-        this.set({ lockX });
-    }
-    set lockY(lockY) {
-        this.set({ lockY });
-    }
-    set lockZ(lockZ) {
-        this.set({ lockZ });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ follow: true, lockX: false, lockY: false, lockZ: false });
-    }
-    onBeforeRender({ state, object }) {
-        const { follow, lockX, lockY, lockZ } = this.get();
-        if (!follow)
-            return;
-        // save prev rotation in case we're locking axises
-        const prevRotation = object.rotation.clone();
-        // always face the camera
-        state.camera.getWorldQuaternion(object.quaternion);
-        // readjust any axis that is locked
-        if (lockX)
-            object.rotation.x = prevRotation.x;
-        if (lockY)
-            object.rotation.y = prevRotation.y;
-        if (lockZ)
-            object.rotation.z = prevRotation.z;
-    }
-}
-NgtsBillboard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsBillboard, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsBillboard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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))">
-            <ng-content />
-        </ngt-group>
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsBillboard, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-billboard',
-                    standalone: true,
-                    template: `
-        <ngt-group ngtCompound [ref]="billboardRef" (beforeRender)="onBeforeRender($any($event))">
-            <ng-content />
-        </ngt-group>
-    `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { billboardRef: [{
-                type: Input
-            }], follow: [{
-                type: Input
-            }], lockX: [{
-                type: Input
-            }], lockY: [{
-                type: Input
-            }], lockZ: [{
-                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.2.5", ngImport: i0, type: NgtsLineInput, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtsLineInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", 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.2.5", 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.2.5", ngImport: i0, type: NgtsLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsLine, isStandalone: true, selector: "ngts-line[points]", inputs: { lineRef: "lineRef", points: "points", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[line]" [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>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsLine, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-line[points]',
-                    standalone: true,
-                    template: `
-        <ngt-primitive *args="[line]" [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>
-    `,
-                    imports: [NgtArgs],
-                    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.2.5", ngImport: i0, type: NgtsCatmullRomLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsCatmullRomLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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.2.5", 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.2.5", ngImport: i0, type: NgtsCubicBezierLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsCubicBezierLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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.2.5", 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
-            }] } });
-
-extend({ LineSegments, LineBasicMaterial });
-class NgtsEdges extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.edgesRef = injectNgtRef();
-        this.withChildren = false;
-        this.noop = () => null;
-    }
-    set threshold(threshold) {
-        this.set({ threshold });
-    }
-    set color(color) {
-        this.set({ color });
-    }
-    set geometry(geometry) {
-        this.set({ geometry });
-    }
-    set userData(userData) {
-        this.set({ userData });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            threshold: 15,
-            color: 'black',
-            userData: {},
-        });
-    }
-    ngOnInit() {
-        this.setupGeometry();
-    }
-    setupGeometry() {
-        this.hold(this.edgesRef.$, (segments) => {
-            const parent = segments.parent;
-            if (parent) {
-                const geom = this.get('geometry') || parent.geometry;
-                const threshold = this.get('threshold');
-                if (geom !== segments.userData['currentGeom'] || threshold !== segments.userData['currentThreshold']) {
-                    segments.userData['currentGeom'] = geom;
-                    segments.userData['currentThreshold'] = threshold;
-                    segments.geometry = new THREE.EdgesGeometry(geom, threshold);
-                }
-            }
-        });
-    }
-}
-NgtsEdges.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsEdges, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsEdges.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsEdges, isStandalone: true, selector: "ngts-edges", inputs: { edgesRef: "edgesRef", threshold: "threshold", color: "color", geometry: "geometry", userData: "userData", withChildren: "withChildren" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-line-segments [ref]="edgesRef" [raycast]="noop" ngtCompound>
-            <ng-container *ngIf="withChildren; else noChildren">
-                <ng-content />
-            </ng-container>
-            <ng-template #noChildren>
-                <ngt-line-basic-material [color]="color" />
-            </ng-template>
-        </ngt-line-segments>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsEdges, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-edges',
-                    standalone: true,
-                    template: `
-        <ngt-line-segments [ref]="edgesRef" [raycast]="noop" ngtCompound>
-            <ng-container *ngIf="withChildren; else noChildren">
-                <ng-content />
-            </ng-container>
-            <ng-template #noChildren>
-                <ngt-line-basic-material [color]="color" />
-            </ng-template>
-        </ngt-line-segments>
-    `,
-                    imports: [NgIf],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { edgesRef: [{
-                type: Input
-            }], threshold: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], geometry: [{
-                type: Input
-            }], userData: [{
-                type: Input
-            }], withChildren: [{
-                type: Input
-            }] } });
-
-const isOrbitControls = (controls) => {
-    return 'minPolarAngle' in controls;
-};
-const NGTS_GIZMO_HELPER_API = new InjectionToken('NgtsGizmoHelper API');
-function gizmoHelperApiFactory(gizmo) {
-    const store = inject(NgtStore);
-    return {
-        tweenCamera: (direction) => {
-            const { controls, camera, invalidate } = store.get();
-            const defaultControls = controls;
-            gizmo.animating = true;
-            if (defaultControls)
-                gizmo.focusPoint = defaultControls.target;
-            gizmo.radius = camera.position.distanceTo(gizmo.target);
-            // rotate from current camera orientation
-            gizmo.q1.copy(camera.quaternion);
-            // to new current camera orientation
-            gizmo.targetPosition.copy(direction).multiplyScalar(gizmo.radius).add(gizmo.target);
-            gizmo.dummy.lookAt(gizmo.targetPosition);
-            gizmo.q2.copy(gizmo.dummy.quaternion);
-            invalidate();
-        },
-    };
-}
-extend({ Group });
-class NgtsGizmoHelperContent {
-}
-NgtsGizmoHelperContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoHelperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtsGizmoHelperContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoHelperContent, isStandalone: true, selector: "ng-template[ngtsGizmoHelperContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoHelperContent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[ngtsGizmoHelperContent]',
-                    standalone: true,
-                }]
-        }] });
-class NgtsGizmoHelper extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.store = inject(NgtStore);
-        this.gizmoRef = injectNgtRef();
-        this.virtualCameraRef = injectNgtRef();
-        this.animating = false;
-        this.radius = 0;
-        this.focusPoint = new Vector3(0, 0, 0);
-        this.q1 = new Quaternion();
-        this.q2 = new Quaternion();
-        this.target = new Vector3();
-        this.targetPosition = new Vector3();
-        this.dummy = new Object3D();
-        this.defaultUp = new Vector3(0, 0, 0);
-        this.turnRate = 2 * Math.PI; // turn rate in angles per sec
-        this.matrix = new Matrix4();
-        this.updated = new EventEmitter();
-    }
-    set alignment(alignment) {
-        this.set({ alignment });
-    }
-    set margin(margin) {
-        this.set({ margin });
-    }
-    set renderPriority(renderPriority) {
-        this.set({ renderPriority });
-    }
-    set autoClear(autoClear) {
-        this.set({ autoClear });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ alignment: 'bottom-right', margin: [80, 80], renderPriority: 1 });
-    }
-    ngOnInit() {
-        this.updateDefaultUp();
-        this.setGizmoPosition();
-    }
-    onBeforeRender(delta) {
-        if (this.virtualCameraRef.nativeElement && this.gizmoRef.nativeElement) {
-            const { controls, camera: mainCamera, invalidate } = this.store.get();
-            const defaultControls = controls;
-            // Animate step
-            if (this.animating) {
-                if (this.q1.angleTo(this.q2) < 0.01) {
-                    this.animating = false;
-                    // Orbit controls uses UP vector as the orbit axes,
-                    // so we need to reset it after the animation is done
-                    // moving it around for the controls to work correctly
-                    if (isOrbitControls(defaultControls)) {
-                        mainCamera.up.copy(this.defaultUp);
-                    }
-                }
-                else {
-                    const step = delta * this.turnRate;
-                    // animate position by doing a slerp and then scaling the position on the unit sphere
-                    this.q1.rotateTowards(this.q2, step);
-                    // animate orientation
-                    mainCamera.position
-                        .set(0, 0, 1)
-                        .applyQuaternion(this.q1)
-                        .multiplyScalar(this.radius)
-                        .add(this.focusPoint);
-                    mainCamera.up.set(0, 1, 0).applyQuaternion(this.q1).normalize();
-                    mainCamera.quaternion.copy(this.q1);
-                    if (this.updated.observed)
-                        this.updated.emit();
-                    else if (defaultControls) {
-                        defaultControls.update();
-                    }
-                    invalidate();
-                }
-            }
-            // Sync Gizmo with main camera orientation
-            this.matrix.copy(mainCamera.matrix).invert();
-            this.gizmoRef.nativeElement.quaternion.setFromRotationMatrix(this.matrix);
-        }
-    }
-    setGizmoPosition() {
-        this.connect('gizmoPosition', combineLatest([
-            this.store.select('size'),
-            combineLatest({
-                alignment: this.select('alignment'),
-                margin: this.select('margin'),
-            }),
-        ]).pipe(map(([size, { alignment, margin }]) => {
-            const [marginX, marginY] = margin;
-            const x = alignment.endsWith('-center')
-                ? 0
-                : alignment.endsWith('-left')
-                    ? -size.width / 2 + marginX
-                    : size.width / 2 - marginX;
-            const y = alignment.startsWith('center-')
-                ? 0
-                : alignment.startsWith('top-')
-                    ? size.height / 2 - marginY
-                    : -size.height / 2 + marginY;
-            return [x, y, 0];
-        })));
-    }
-    updateDefaultUp() {
-        this.hold(this.store.select('camera'), (camera) => {
-            this.defaultUp.copy(camera.up);
-        });
-    }
-}
-NgtsGizmoHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoHelper, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsGizmoHelper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoHelper, isStandalone: true, selector: "ngts-gizmo-helper", inputs: { alignment: "alignment", margin: "margin", renderPriority: "renderPriority", autoClear: "autoClear" }, outputs: { updated: "updated" }, providers: [{ provide: NGTS_GIZMO_HELPER_API, useFactory: gizmoHelperApiFactory, deps: [NgtsGizmoHelper] }], queries: [{ propertyName: "gizmoHelperContent", first: true, predicate: NgtsGizmoHelperContent, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-portal [renderPriority]="get('renderPriority')">
-            <ng-template ngtPortalContent>
-                <ngts-orthographic-camera
-                    [cameraRef]="virtualCameraRef"
-                    [makeDefault]="true"
-                    [position]="[0, 0, 200]"
-                />
-                <ngt-group
-                    [ref]="gizmoRef"
-                    [position]="get('gizmoPosition')"
-                    (beforeRender)="onBeforeRender($any($event).state.delta)"
-                >
-                    <ng-container *ngTemplateOutlet="gizmoHelperContent" />
-                </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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoHelper, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-helper',
-                    standalone: true,
-                    template: `
-        <ngt-portal [renderPriority]="get('renderPriority')">
-            <ng-template ngtPortalContent>
-                <ngts-orthographic-camera
-                    [cameraRef]="virtualCameraRef"
-                    [makeDefault]="true"
-                    [position]="[0, 0, 200]"
-                />
-                <ngt-group
-                    [ref]="gizmoRef"
-                    [position]="get('gizmoPosition')"
-                    (beforeRender)="onBeforeRender($any($event).state.delta)"
-                >
-                    <ng-container *ngTemplateOutlet="gizmoHelperContent" />
-                </ngt-group>
-            </ng-template>
-        </ngt-portal>
-    `,
-                    imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
-                    providers: [{ provide: NGTS_GIZMO_HELPER_API, useFactory: gizmoHelperApiFactory, deps: [NgtsGizmoHelper] }],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { alignment: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], renderPriority: [{
-                type: Input
-            }], autoClear: [{
-                type: Input
-            }], updated: [{
-                type: Output
-            }], gizmoHelperContent: [{
-                type: ContentChild,
-                args: [NgtsGizmoHelperContent, { static: true, read: TemplateRef }]
-            }] } });
-
-const colors = { bg: '#f0f0f0', hover: '#999', text: 'black', stroke: 'black' };
-const defaultFaces = ['Right', 'Left', 'Top', 'Bottom', 'Front', 'Back'];
-const makePositionVector = (xyz) => new THREE.Vector3(...xyz).multiplyScalar(0.38);
-const corners = [
-    [1, 1, 1],
-    [1, 1, -1],
-    [1, -1, 1],
-    [1, -1, -1],
-    [-1, 1, 1],
-    [-1, 1, -1],
-    [-1, -1, 1],
-    [-1, -1, -1],
-].map(makePositionVector);
-const cornerDimensions = [0.25, 0.25, 0.25];
-const edges = [
-    [1, 1, 0],
-    [1, 0, 1],
-    [1, 0, -1],
-    [1, -1, 0],
-    [0, 1, 1],
-    [0, 1, -1],
-    [0, -1, 1],
-    [0, -1, -1],
-    [-1, 1, 0],
-    [-1, 0, 1],
-    [-1, 0, -1],
-    [-1, -1, 0],
-].map(makePositionVector);
-const edgeDimensions = edges.map((edge) => edge.toArray().map((axis) => (axis == 0 ? 0.5 : 0.25)));
-
-class NgtsGizmoViewcubeInputs extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.store = inject(NgtStore);
-    }
-    set opacity(opacity) {
-        this.set({ opacity });
-    }
-    set hoverColor(hoverColor) {
-        this.set({ hoverColor });
-    }
-    set textColor(textColor) {
-        this.set({ textColor });
-    }
-    set strokeColor(strokeColor) {
-        this.set({ strokeColor });
-    }
-    set faces(faces) {
-        this.set({ faces });
-    }
-    set clickEmitter(clickEmitter) {
-        this.set({ clickEmitter });
-    }
-}
-NgtsGizmoViewcubeInputs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcubeInputs, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtsGizmoViewcubeInputs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoViewcubeInputs, inputs: { opacity: "opacity", hoverColor: "hoverColor", textColor: "textColor", strokeColor: "strokeColor", faces: "faces", clickEmitter: "clickEmitter" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcubeInputs, decorators: [{
-            type: Directive
-        }], propDecorators: { opacity: [{
-                type: Input
-            }], hoverColor: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], strokeColor: [{
-                type: Input
-            }], faces: [{
-                type: Input
-            }], clickEmitter: [{
-                type: Input
-            }] } });
-
-extend({ Mesh, BoxGeometry, MeshBasicMaterial });
-class NgtsGizmoViewcubeEdgeCube extends NgtsGizmoViewcubeInputs {
-    constructor() {
-        super(...arguments);
-        this.gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.hover = false;
-    }
-    set dimensions(dimensions) {
-        this.set({ dimensions });
-    }
-    set position(position) {
-        this.set({ position });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ hoverColor: colors.hover });
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        this.hover = true;
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hover = false;
-    }
-    onClick(event) {
-        if (this.get('clickEmitter')?.observed) {
-            this.get('clickEmitter').emit(event);
-        }
-        else {
-            event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(this.get('position'));
-        }
-    }
-}
-NgtsGizmoViewcubeEdgeCube.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsGizmoViewcubeEdgeCube.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoViewcubeEdgeCube, isStandalone: true, selector: "ngts-gizmo-viewcube-edge-cube[dimensions][position]", inputs: { dimensions: "dimensions", position: "position" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh
-            [scale]="1.01"
-            [position]="get('position')"
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
-        >
-            <ngt-box-geometry *args="get('dimensions')" />
-            <ngt-mesh-basic-material
-                [color]="hover ? get('hoverColor') : 'white'"
-                [transparent]="true"
-                [opacity]="0.6"
-                [visible]="hover"
-            />
-        </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube-edge-cube[dimensions][position]',
-                    standalone: true,
-                    template: `
-        <ngt-mesh
-            [scale]="1.01"
-            [position]="get('position')"
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
-        >
-            <ngt-box-geometry *args="get('dimensions')" />
-            <ngt-mesh-basic-material
-                [color]="hover ? get('hoverColor') : 'white'"
-                [transparent]="true"
-                [opacity]="0.6"
-                [visible]="hover"
-            />
-        </ngt-mesh>
-    `,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { dimensions: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
-
-extend({ MeshLambertMaterial, Mesh, BoxGeometry });
-class NgtsGizmoViewcubeFaceMaterial extends NgtsGizmoViewcubeInputs {
-    constructor() {
-        super(...arguments);
-        this.document = inject(DOCUMENT);
-    }
-    set index(index) {
-        this.set({ index });
-    }
-    set hover(hover) {
-        this.set({ hover });
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set color(color) {
-        this.set({ color });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            font: '20px Inter var, Arial, sans-serif',
-            faces: defaultFaces,
-            color: colors.bg,
-            hoverColor: colors.hover,
-            textColor: colors.text,
-            strokeColor: colors.stroke,
-            opacity: 1,
-        });
-        this.connect('texture', this.select(['index', 'faces', 'color', 'font', 'textColor', 'strokeColor'], ({ index, faces, color, font, textColor, strokeColor }) => {
-            const canvas = this.document.createElement('canvas');
-            canvas.width = 128;
-            canvas.height = 128;
-            const context = canvas.getContext('2d');
-            context.fillStyle = color;
-            context.fillRect(0, 0, canvas.width, canvas.height);
-            context.strokeStyle = strokeColor;
-            context.strokeRect(0, 0, canvas.width, canvas.height);
-            context.font = font;
-            context.textAlign = 'center';
-            context.fillStyle = textColor;
-            context.fillText(faces[index].toUpperCase(), 64, 76);
-            return new CanvasTexture(canvas);
-        }));
-    }
-}
-NgtsGizmoViewcubeFaceMaterial.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsGizmoViewcubeFaceMaterial.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoViewcubeFaceMaterial, isStandalone: true, selector: "ngts-gizmo-viewcube-face-material[hover][index]", inputs: { index: "index", hover: "hover", font: "font", color: "color" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh-lambert-material
-            [attach]="['material', get('index')]"
-            [map]="get('texture')"
-            [color]="get('hover') ? get('hoverColor') : get('color')"
-            [opacity]="get('opacity')"
-            [transparent]="true"
-        >
-            <ngt-value [rawValue]="store.get('gl').outputEncoding" attach="map.encoding" />
-            <ngt-value [rawValue]="store.get('gl').capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
-        </ngt-mesh-lambert-material>
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube-face-material[hover][index]',
-                    standalone: true,
-                    template: `
-        <ngt-mesh-lambert-material
-            [attach]="['material', get('index')]"
-            [map]="get('texture')"
-            [color]="get('hover') ? get('hoverColor') : get('color')"
-            [opacity]="get('opacity')"
-            [transparent]="true"
-        >
-            <ngt-value [rawValue]="store.get('gl').outputEncoding" attach="map.encoding" />
-            <ngt-value [rawValue]="store.get('gl').capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
-        </ngt-mesh-lambert-material>
-    `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { index: [{
-                type: Input
-            }], hover: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-class NgtsGizmoViewcubeFaceCube extends NgtsGizmoViewcubeInputs {
-    constructor() {
-        super(...arguments);
-        this.gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.hover = -1;
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set color(color) {
-        this.set({ color });
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        this.hover = Math.floor(event.faceIndex / 2);
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hover = -1;
-    }
-    onClick(event) {
-        if (this.get('clickEmitter')?.observed) {
-            this.get('clickEmitter').emit(event);
-        }
-        else {
-            event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(event.face.normal);
-        }
-    }
-}
-NgtsGizmoViewcubeFaceCube.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsGizmoViewcubeFaceCube.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoViewcubeFaceCube, isStandalone: true, selector: "ngts-gizmo-viewcube-face-cube", inputs: { font: "font", color: "color" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
-        >
-            <ngt-box-geometry />
-            <ngts-gizmo-viewcube-face-material
-                *ngFor="let i; repeat: 6"
-                [hover]="hover === i"
-                [index]="i"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-            />
-        </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewcubeFaceMaterial, selector: "ngts-gizmo-viewcube-face-material[hover][index]", inputs: ["index", "hover", "font", "color"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube-face-cube',
-                    standalone: true,
-                    template: `
-        <ngt-mesh
-            (pointermove)="onPointerMove($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-            (click)="onClick($any($event))"
-        >
-            <ngt-box-geometry />
-            <ngts-gizmo-viewcube-face-material
-                *ngFor="let i; repeat: 6"
-                [hover]="hover === i"
-                [index]="i"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-            />
-        </ngt-mesh>
-    `,
-                    imports: [NgtsGizmoViewcubeFaceMaterial, NgtRepeat],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { font: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-extend({ Group, AmbientLight, PointLight });
-class NgtsGizmoViewcube extends NgtsGizmoViewcubeInputs {
-    constructor() {
-        super(...arguments);
-        this.edges = edges;
-        this.edgeDimensions = edgeDimensions;
-        this.corners = corners;
-        this.cornerDimensions = cornerDimensions;
-        this.clicked = new EventEmitter();
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set color(color) {
-        this.set({ color });
-    }
-}
-NgtsGizmoViewcube.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcube, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsGizmoViewcube.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoViewcube, isStandalone: true, selector: "ngts-gizmo-viewcube", inputs: { font: "font", color: "color" }, outputs: { clicked: "clicked" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group [scale]="60">
-            <ngts-gizmo-viewcube-face-cube
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
-            />
-
-            <ngts-gizmo-viewcube-edge-cube
-                *ngFor="let edge of edges; let i = index"
-                [position]="edge"
-                [dimensions]="edgeDimensions[i]"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
-            />
-
-            <ngts-gizmo-viewcube-edge-cube
-                *ngFor="let corner of corners"
-                [position]="corner"
-                [dimensions]="cornerDimensions"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
-            />
-
-            <ngt-ambient-light [intensity]="0.5" />
-            <ngt-point-light [position]="10" [intensity]="0.5" />
-        </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewcubeEdgeCube, selector: "ngts-gizmo-viewcube-edge-cube[dimensions][position]", inputs: ["dimensions", "position"] }, { kind: "component", type: NgtsGizmoViewcubeFaceCube, selector: "ngts-gizmo-viewcube-face-cube", inputs: ["font", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewcube, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewcube',
-                    standalone: true,
-                    template: `
-        <ngt-group [scale]="60">
-            <ngts-gizmo-viewcube-face-cube
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
-            />
-
-            <ngts-gizmo-viewcube-edge-cube
-                *ngFor="let edge of edges; let i = index"
-                [position]="edge"
-                [dimensions]="edgeDimensions[i]"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
-            />
-
-            <ngts-gizmo-viewcube-edge-cube
-                *ngFor="let corner of corners"
-                [position]="corner"
-                [dimensions]="cornerDimensions"
-                [font]="get('font')"
-                [color]="get('color')"
-                [opacity]="get('opacity')"
-                [hoverColor]="get('hoverColor')"
-                [textColor]="get('textColor')"
-                [strokeColor]="get('strokeColor')"
-                [faces]="get('faces')"
-                [clickEmitter]="clicked"
-            />
-
-            <ngt-ambient-light [intensity]="0.5" />
-            <ngt-point-light [position]="10" [intensity]="0.5" />
-        </ngt-group>
-    `,
-                    imports: [NgtsGizmoViewcubeEdgeCube, NgtsGizmoViewcubeFaceCube, NgFor],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { font: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
-
-extend({ Group, Mesh, BoxGeometry, MeshBasicMaterial, Sprite, SpriteMaterial });
-class NgtsGizmoViewportAxis extends NgtRxStore {
-    set color(color) {
-        this.set({ color });
-    }
-    set rotation(rotation) {
-        this.set({ rotation });
-    }
-    set scale(scale) {
-        this.set({ scale: scale === undefined ? this.get('scale') : scale });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ scale: [0.8, 0.05, 0.05] });
-    }
-}
-NgtsGizmoViewportAxis.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewportAxis, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsGizmoViewportAxis.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoViewportAxis, isStandalone: true, selector: "ngts-gizmo-viewport-axis[color][rotation]", inputs: { color: "color", rotation: "rotation", scale: "scale" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group [rotation]="get('rotation')">
-            <ngt-mesh [position]="[0.4, 0, 0]">
-                <ngt-box-geometry *args="get('scale')" />
-                <ngt-mesh-basic-material [color]="get('color')" [toneMapped]="false" />
-            </ngt-mesh>
-        </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewportAxis, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewport-axis[color][rotation]',
-                    standalone: true,
-                    template: `
-        <ngt-group [rotation]="get('rotation')">
-            <ngt-mesh [position]="[0.4, 0, 0]">
-                <ngt-box-geometry *args="get('scale')" />
-                <ngt-mesh-basic-material [color]="get('color')" [toneMapped]="false" />
-            </ngt-mesh>
-        </ngt-group>
-    `,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], rotation: [{
-                type: Input
-            }], scale: [{
-                type: Input
-            }] } });
-class NgtsGizmoViewportAxisHead extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.document = inject(DOCUMENT);
-        this.store = inject(NgtStore);
-        this.gl = this.store.get('gl');
-    }
-    set arcStyle(arcStyle) {
-        this.set({ arcStyle });
-    }
-    set label(label) {
-        this.set({ label });
-    }
-    set labelColor(labelColor) {
-        this.set({ labelColor });
-    }
-    set axisHeadScale(axisHeadScale) {
-        this.set({ axisHeadScale });
-    }
-    set disabled(disabled) {
-        this.set({ disabled });
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set clickEmitter(clickEmitter) {
-        this.set({ clickEmitter });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ axisHeadScale: 1, active: false });
-        this.connect('texture', combineLatest([
-            this.select('arcStyle'),
-            this.select('labelColor'),
-            this.select('font'),
-            this.select('label').pipe(startWithUndefined()),
-        ]).pipe(map(([arcStyle, labelColor, font, label]) => {
-            const canvas = this.document.createElement('canvas');
-            canvas.width = 64;
-            canvas.height = 64;
-            const context = canvas.getContext('2d');
-            context.beginPath();
-            context.arc(32, 32, 16, 0, 2 * Math.PI);
-            context.closePath();
-            context.fillStyle = arcStyle;
-            context.fill();
-            if (label) {
-                context.font = font;
-                context.textAlign = 'center';
-                context.fillStyle = labelColor;
-                context.fillText(label, 32, 41);
-            }
-            return new CanvasTexture(canvas);
-        })));
-        this.connect('scale', combineLatest([
-            this.select('active'),
-            this.select('axisHeadScale'),
-            this.select('label').pipe(startWithUndefined()),
-        ]).pipe(map(([active, axisHeadScale, label]) => (label ? 1 : 0.75) * (active ? 1.2 : 1) * axisHeadScale)));
-    }
-    onPointerOver(event) {
-        if (!this.get('disabled')) {
-            event.stopPropagation();
-            this.set({ active: true });
-        }
-    }
-    onPointerOut(event) {
-        if (!this.get('disabled')) {
-            if (this.get('clickEmitter')?.observed) {
-                this.get('clickEmitter').emit(event);
-            }
-            else {
-                event.stopPropagation();
-                this.set({ active: false });
-            }
-        }
-    }
-}
-NgtsGizmoViewportAxisHead.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewportAxisHead, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsGizmoViewportAxisHead.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoViewportAxisHead, isStandalone: true, selector: "ngts-gizmo-viewport-axis-head", inputs: { arcStyle: "arcStyle", label: "label", labelColor: "labelColor", axisHeadScale: "axisHeadScale", disabled: "disabled", font: "font", clickEmitter: "clickEmitter" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-sprite
-            ngtCompound
-            [scale]="get('scale')"
-            (pointerover)="onPointerOver($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-        >
-            <ngt-sprite-material
-                [map]="get('texture')"
-                [opacity]="get('label') ? 1 : 0.75"
-                [alphaTest]="0.3"
-                [toneMapped]="false"
-            >
-                <ngt-value [rawValue]="gl.outputEncoding" attach="map.encoding" />
-                <ngt-value [rawValue]="gl.capabilities.getMaxAnisotropy() || 1" attach="map.anisotropy" />
-            </ngt-sprite-material>
-        </ngt-sprite>
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewportAxisHead, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewport-axis-head',
-                    standalone: true,
-                    template: `
-        <ngt-sprite
-            ngtCompound
-            [scale]="get('scale')"
-            (pointerover)="onPointerOver($any($event))"
-            (pointerout)="onPointerOut($any($event))"
-        >
-            <ngt-sprite-material
-                [map]="get('texture')"
-                [opacity]="get('label') ? 1 : 0.75"
-                [alphaTest]="0.3"
-                [toneMapped]="false"
-            >
-                <ngt-value [rawValue]="gl.outputEncoding" attach="map.encoding" />
-                <ngt-value [rawValue]="gl.capabilities.getMaxAnisotropy() || 1" attach="map.anisotropy" />
-            </ngt-sprite-material>
-        </ngt-sprite>
-    `,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { arcStyle: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], labelColor: [{
-                type: Input
-            }], axisHeadScale: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], clickEmitter: [{
-                type: Input
-            }] } });
-
-extend({ Group, AmbientLight, PointLight });
-class NgtsGizmoViewport extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.gizmoHelperApi = inject(NGTS_GIZMO_HELPER_API);
-        this.Math = Math;
-        this.clicked = new EventEmitter();
-    }
-    set axisColors(axisColors) {
-        this.set({ axisColors });
-    }
-    set axisScale(axisScale) {
-        this.set({ axisScale });
-    }
-    set labels(labels) {
-        this.set({ labels });
-    }
-    set axisHeadScale(axisHeadScale) {
-        this.set({ axisHeadScale });
-    }
-    set labelColor(labelColor) {
-        this.set({ labelColor });
-    }
-    set hideNegativeAxes(hideNegativeAxes) {
-        this.set({ hideNegativeAxes });
-    }
-    set hideAxisHeads(hideAxisHeads) {
-        this.set({ hideAxisHeads });
-    }
-    set disabled(disabled) {
-        this.set({ disabled });
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            font: '18px Inter var, Arial, sans-serif',
-            axisColors: ['#ff2060', '#20df80', '#2080ff'],
-            axisHeadScale: 1,
-            labels: ['X', 'Y', 'Z'],
-            labelColor: '#000',
-        });
-    }
-    onPointerDown(event) {
-        if (!this.get('disabled')) {
-            event.stopPropagation();
-            this.gizmoHelperApi.tweenCamera(event.object.position);
-        }
-    }
-}
-NgtsGizmoViewport.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewport, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsGizmoViewport.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsGizmoViewport, isStandalone: true, selector: "ngts-gizmo-viewport", inputs: { axisColors: "axisColors", axisScale: "axisScale", labels: "labels", axisHeadScale: "axisHeadScale", labelColor: "labelColor", hideNegativeAxes: "hideNegativeAxes", hideAxisHeads: "hideAxisHeads", disabled: "disabled", font: "font" }, outputs: { clicked: "clicked" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [scale]="40">
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[0]"
-                [rotation]="[0, 0, 0]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[1]"
-                [rotation]="[0, 0, Math.PI / 2]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[2]"
-                [rotation]="[0, -Math.PI / 2, 0]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ng-container *ngIf="!get('hideAxisHeads')">
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[0]"
-                    [position]="[1, 0, 0]"
-                    [label]="get('labels')[0]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[1]"
-                    [position]="[0, 1, 0]"
-                    [label]="get('labels')[1]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[2]"
-                    [position]="[0, 0, 1]"
-                    [label]="get('labels')[2]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ng-container *ngIf="!get('hideNegativeAxes')">
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[0]"
-                        [position]="[-1, 0, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[1]"
-                        [position]="[0, -1, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[2]"
-                        [position]="[0, 0, -1]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                </ng-container>
-            </ng-container>
-            <ngt-ambient-light intensity="0.5"></ngt-ambient-light>
-            <ngt-point-light position="10" intensity="0.5"></ngt-point-light>
-        </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewportAxis, selector: "ngts-gizmo-viewport-axis[color][rotation]", inputs: ["color", "rotation", "scale"] }, { kind: "component", type: NgtsGizmoViewportAxisHead, selector: "ngts-gizmo-viewport-axis-head", inputs: ["arcStyle", "label", "labelColor", "axisHeadScale", "disabled", "font", "clickEmitter"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsGizmoViewport, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-gizmo-viewport',
-                    standalone: true,
-                    template: `
-        <ngt-group ngtCompound [scale]="40">
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[0]"
-                [rotation]="[0, 0, 0]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[1]"
-                [rotation]="[0, 0, Math.PI / 2]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ngts-gizmo-viewport-axis
-                [color]="get('axisColors')[2]"
-                [rotation]="[0, -Math.PI / 2, 0]"
-                [scale]="get('axisScale')"
-            ></ngts-gizmo-viewport-axis>
-            <ng-container *ngIf="!get('hideAxisHeads')">
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[0]"
-                    [position]="[1, 0, 0]"
-                    [label]="get('labels')[0]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[1]"
-                    [position]="[0, 1, 0]"
-                    [label]="get('labels')[1]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ngts-gizmo-viewport-axis-head
-                    [arcStyle]="get('axisColors')[2]"
-                    [position]="[0, 0, 1]"
-                    [label]="get('labels')[2]"
-                    [font]="get('font')"
-                    [disabled]="get('disabled')"
-                    [labelColor]="get('labelColor')"
-                    [clickEmitter]="clicked"
-                    [axisHeadScale]="get('axisHeadScale')"
-                    (pointerdown)="onPointerDown($any($event))"
-                ></ngts-gizmo-viewport-axis-head>
-                <ng-container *ngIf="!get('hideNegativeAxes')">
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[0]"
-                        [position]="[-1, 0, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[1]"
-                        [position]="[0, -1, 0]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                    <ngts-gizmo-viewport-axis-head
-                        [arcStyle]="get('axisColors')[2]"
-                        [position]="[0, 0, -1]"
-                        [font]="get('font')"
-                        [disabled]="get('disabled')"
-                        [labelColor]="get('labelColor')"
-                        [clickEmitter]="clicked"
-                        [axisHeadScale]="get('axisHeadScale')"
-                        (pointerdown)="onPointerDown($any($event))"
-                    ></ngts-gizmo-viewport-axis-head>
-                </ng-container>
-            </ng-container>
-            <ngt-ambient-light intensity="0.5"></ngt-ambient-light>
-            <ngt-point-light position="10" intensity="0.5"></ngt-point-light>
-        </ngt-group>
-    `,
-                    imports: [NgtsGizmoViewportAxis, NgtsGizmoViewportAxisHead, NgIf],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { axisColors: [{
-                type: Input
-            }], axisScale: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }], axisHeadScale: [{
-                type: Input
-            }], labelColor: [{
-                type: Input
-            }], hideNegativeAxes: [{
-                type: Input
-            }], hideAxisHeads: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], clicked: [{
-                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.2.5", ngImport: i0, type: NgtsQuadraticBezierLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsQuadraticBezierLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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.2.5", 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() {
-        super(...arguments);
-        this.font$ = this.select('font').pipe(switchMap((font) => {
-            if (typeof font === 'string')
-                return fetch(font).then((res) => res.json());
-            return of(font);
-        }), map((fontData) => new FontLoader().parse(fontData)));
-        this.geometryArgs$ = combineLatest([
-            this.font$,
-            this.select('text'),
-            this.select('size'),
-            this.select('height'),
-            this.select('bevelThickness'),
-            this.select('bevelSize'),
-            this.select('bevelEnabled'),
-            this.select('bevelSegments'),
-            this.select('bevelOffset'),
-            this.select('curveSegments'),
-            this.select('letterSpacing'),
-            this.select('lineHeight'),
-        ]).pipe(map(([font, text, size, height, bevelThickness, bevelSize, bevelEnabled, bevelSegments, bevelOffset, curveSegments, letterSpacing, lineHeight,]) => [
-            text,
-            {
-                font,
-                size,
-                height,
-                bevelThickness,
-                bevelSize,
-                bevelSegments,
-                bevelEnabled,
-                bevelOffset,
-                curveSegments,
-                letterSpacing,
-                lineHeight,
-            },
-        ]));
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set text(text) {
-        this.set({ text });
-    }
-    set bevelEnabled(bevelEnabled) {
-        this.set({ bevelEnabled });
-    }
-    set bevelOffset(bevelOffset) {
-        this.set({ bevelOffset });
-    }
-    set bevelSize(bevelSize) {
-        this.set({ bevelSize });
-    }
-    set bevelThickness(bevelThickness) {
-        this.set({ bevelThickness });
-    }
-    set curveSegments(curveSegments) {
-        this.set({ curveSegments });
-    }
-    set bevelSegments(bevelSegments) {
-        this.set({ bevelSegments });
-    }
-    set height(height) {
-        this.set({ height });
-    }
-    set size(size) {
-        this.set({ size });
-    }
-    set lineHeight(lineHeight) {
-        this.set({ lineHeight });
-    }
-    set letterSpacing(letterSpacing) {
-        this.set({ letterSpacing });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            letterSpacing: 0,
-            lineHeight: 1,
-            size: 1,
-            height: 0.2,
-            bevelThickness: 0.1,
-            bevelSize: 0.01,
-            bevelEnabled: false,
-            bevelOffset: 0,
-            bevelSegments: 4,
-            curveSegments: 8,
-        });
-    }
-}
-NgtsText3D.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsText3D, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsText3D.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: NgtsText3D, isStandalone: true, selector: "ngts-text-3d[font]", inputs: { font: "font", text: "text", bevelEnabled: "bevelEnabled", bevelOffset: "bevelOffset", bevelSize: "bevelSize", bevelThickness: "bevelThickness", curveSegments: "curveSegments", bevelSegments: "bevelSegments", height: "height", size: "size", lineHeight: "lineHeight", letterSpacing: "letterSpacing" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh ngtCompound>
-            <ngt-text-geometry *args="geometryArgs$ | ngtPush : null" />
-            <ng-content />
-        </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsText3D, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-text-3d[font]',
-                    standalone: true,
-                    template: `
-        <ngt-mesh ngtCompound>
-            <ngt-text-geometry *args="geometryArgs$ | ngtPush : null" />
-            <ng-content />
-        </ngt-mesh>
-    `,
-                    imports: [NgtArgs, NgtPush],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { font: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], bevelEnabled: [{
-                type: Input
-            }], bevelOffset: [{
-                type: Input
-            }], bevelSize: [{
-                type: Input
-            }], bevelThickness: [{
-                type: Input
-            }], curveSegments: [{
-                type: Input
-            }], bevelSegments: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], lineHeight: [{
-                type: Input
-            }], letterSpacing: [{
-                type: Input
-            }] } });
-
-class NgtsText extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.textRef = injectNgtRef();
-        this.sync = new EventEmitter();
-        this.store = inject(NgtStore);
-        this.troikaText = new Text();
-    }
-    set text(text) {
-        this.set({ text });
-    }
-    set characters(characters) {
-        this.set({ characters });
-    }
-    set font(font) {
-        this.set({ font });
-    }
-    set anchorX(anchorX) {
-        this.set({ anchorX });
-    }
-    set anchorY(anchorY) {
-        this.set({ anchorY });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ anchorX: 'center', anchorY: 'middle', text: '' });
-    }
-    ngOnInit() {
-        this.preloadFont();
-        this.syncText();
-    }
-    ngOnDestroy() {
-        this.troikaText.dispose();
-        super.ngOnDestroy();
-    }
-    preloadFont() {
-        const { font, characters } = this.get();
-        if (font && characters) {
-            preloadFont({ font, characters });
-        }
-    }
-    syncText() {
-        this.hold(this.select(), () => {
-            const invalidate = this.store.get('invalidate');
-            this.troikaText.sync(() => {
-                invalidate();
-                if (this.sync.observed)
-                    this.sync.next(this.troikaText);
-            });
-        });
-    }
-}
-NgtsText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsText, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtsText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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: `
-        <ng-container>
-            <ngt-primitive
-                ngtCompound
-                *args="[troikaText]"
-                [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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: NgtsText, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-text[text]',
-                    standalone: true,
-                    template: `
-        <ng-container>
-            <ngt-primitive
-                ngtCompound
-                *args="[troikaText]"
-                [ref]="textRef"
-                [text]="get('text')"
-                [anchorX]="get('anchorX')"
-                [anchorY]="get('anchorY')"
-                [font]="get('font')"
-            >
-                <ng-content />
-            </ngt-primitive>
-        </ng-container>
-    `,
-                    imports: [NgtArgs],
-                    providers: [RxActionFactory],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { textRef: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], characters: [{
-                type: Input
-            }], font: [{
-                type: Input
-            }], anchorX: [{
-                type: Input
-            }], anchorY: [{
-                type: Input
-            }], sync: [{
-                type: Output
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NGTS_GIZMO_HELPER_API, NgtsBillboard, NgtsCatmullRomLine, NgtsCubicBezierLine, NgtsEdges, NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsLine, NgtsQuadraticBezierLine, NgtsText, NgtsText3D };
-//# sourceMappingURL=angular-three-soba-abstractions.mjs.map