angular-three-soba 1.3.2 → 1.4.0

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

@@ -0,0 +1,1428 @@
+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 * 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 { 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';
+
+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(event) {
+        const { follow, lockX, lockY, lockZ } = this.get();
+        if (!follow)
+            return;
+        // save prev rotation in case we're locking axises
+        const prevRotation = event.object.rotation.clone();
+        // always face the camera
+        event.object.quaternion.copy(event.state.camera.quaternion);
+        // readjust any axis that is locked
+        if (lockX)
+            event.object.rotation.x = prevRotation.x;
+        if (lockY)
+            event.object.rotation.y = prevRotation.y;
+        if (lockZ)
+            event.object.rotation.z = prevRotation.z;
+    }
+}
+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))">
+            <ng-content />
+        </ngt-group>
+    `, isInline: true });
+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))">
+            <ng-content />
+        </ngt-group>
+    `,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { billboardRef: [{
+                type: Input
+            }], follow: [{
+                type: Input
+            }], lockX: [{
+                type: Input
+            }], lockY: [{
+                type: Input
+            }], lockZ: [{
+                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.1.3", ngImport: i0, type: NgtsGizmoHelperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtsGizmoHelperContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: NgtsGizmoHelperContent, isStandalone: true, selector: "ng-template[ngtsGizmoHelperContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", 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'), this.select(selectSlice(['alignment', '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.1.3", ngImport: i0, type: NgtsGizmoHelper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsGizmoHelper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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.1.3", ngImport: i0, type: NgtsGizmoViewcubeInputs, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtsGizmoViewcubeInputs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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.1.3", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsGizmoViewcubeEdgeCube.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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.1.3", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsGizmoViewcubeFaceMaterial.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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.1.3", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsGizmoViewcubeFaceCube.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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.1.3", ngImport: i0, type: NgtsGizmoViewcube, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsGizmoViewcube.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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.1.3", ngImport: i0, type: NgtsGizmoViewportAxis, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsGizmoViewportAxis.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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.1.3", ngImport: i0, type: NgtsGizmoViewportAxisHead, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsGizmoViewportAxisHead.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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.1.3", ngImport: i0, type: NgtsGizmoViewport, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsGizmoViewport.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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
+            }] } });
+
+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.1.3", ngImport: i0, type: NgtsText3D, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsText3D.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", 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.1.3", 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() {
+        if (!this.textRef.nativeElement)
+            this.textRef.nativeElement = this.troikaText;
+        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.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"] }] });
+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>
+    `,
+                    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, NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsText, NgtsText3D };
+//# sourceMappingURL=angular-three-soba-abstractions.mjs.map