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

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

@@ -0,0 +1,1043 @@
+import { NgTemplateOutlet, DOCUMENT, NgFor, NgIf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, computed, effect, TemplateRef, Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, ContentChild, Directive, inject, signal } from '@angular/core';
+import { extend, createInjectionToken, signalStore, injectNgtRef, injectNgtStore, injectBeforeRender, NgtPortal, NgtPortalContent, NgtArgs, NgtRepeat } from 'angular-three';
+import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
+import * as THREE from 'three';
+import { Group, Quaternion, Matrix4, Vector3, Object3D, Mesh, BoxGeometry, MeshBasicMaterial, MeshLambertMaterial, CanvasTexture, AmbientLight, PointLight, Sprite, SpriteMaterial } from 'three';
+import 'three-stdlib';
+
+const isOrbitControls = (controls) => {
+    return 'minPolarAngle' in controls;
+};
+extend({ Group });
+const [injectNgtsGizmoHelperApi, provideNgtsGizmoHelperApi] = createInjectionToken((gizmoHelper) => gizmoHelper.api, { isRoot: false, deps: [forwardRef(() => NgtsGizmoHelper)] });
+class NgtsGizmoHelper {
+    set _alignment(alignment) {
+        this.inputs.set({ alignment });
+    }
+    set _margin(margin) {
+        this.inputs.set({ margin });
+    }
+    set _renderPriority(renderPriority) {
+        this.inputs.set({ renderPriority });
+    }
+    set _autoClear(autoClear) {
+        this.inputs.set({ autoClear });
+    }
+    constructor() {
+        this.inputs = signalStore({
+            alignment: 'bottom-right',
+            margin: [80, 80],
+            renderPriority: 1,
+        });
+        this.gizmoRef = injectNgtRef();
+        this.update = new EventEmitter();
+        this.store = injectNgtStore();
+        this.mainCamera = this.store.select('camera');
+        // @ts-expect-error
+        this.defaultControls = this.store.select('controls');
+        this.invalidate = this.store.select('invalidate');
+        this.size = this.store.select('size');
+        this.animating = false;
+        this.q1 = new Quaternion();
+        this.q2 = new Quaternion();
+        this.turnRate = 2 * Math.PI; // turn rate in angles per second
+        this.matrix = new Matrix4();
+        this.radius = 0;
+        this.focusPoint = new Vector3(0, 0, 0);
+        this.defaultUp = new Vector3(0, 0, 0);
+        this.target = new Vector3();
+        this.targetPosition = new Vector3();
+        this.dummy = new Object3D();
+        this.margin = this.inputs.select('margin');
+        this.alignment = this.inputs.select('alignment');
+        this.virtualCamRef = injectNgtRef();
+        this.renderPriority = this.inputs.select('renderPriority');
+        this.gizmoPosition = computed(() => {
+            const [{ width, height }, [marginX, marginY], alignment] = [this.size(), this.margin(), this.alignment()];
+            const x = alignment.endsWith('-center')
+                ? 0
+                : alignment.endsWith('-left')
+                    ? -width / 2 + marginX
+                    : width / 2 - marginX;
+            const y = alignment.startsWith('center-')
+                ? 0
+                : alignment.startsWith('top-')
+                    ? height / 2 - marginY
+                    : -height / 2 + marginY;
+            return [x, y, 0];
+        });
+        this.api = {
+            tweenCamera: (direction) => {
+                const [defaultControls, mainCamera, invalidate] = [
+                    this.defaultControls(),
+                    this.mainCamera(),
+                    this.invalidate(),
+                ];
+                this.animating = true;
+                if (defaultControls)
+                    this.focusPoint = defaultControls?.target;
+                this.radius = mainCamera.position.distanceTo(this.target);
+                // Rotate from current camera orientation
+                this.q1.copy(mainCamera.quaternion);
+                // To new current camera orientation
+                this.targetPosition.copy(direction).multiplyScalar(this.radius).add(this.target);
+                this.dummy.lookAt(this.targetPosition);
+                this.dummy.up.copy(mainCamera.up);
+                this.q2.copy(this.dummy.quaternion);
+                invalidate();
+            },
+        };
+        this.trackMainCameraUp();
+        this.beforeRender();
+    }
+    trackMainCameraUp() {
+        effect(() => {
+            const mainCamera = this.mainCamera();
+            this.defaultUp.copy(mainCamera.up);
+        });
+    }
+    beforeRender() {
+        injectBeforeRender(({ delta }) => {
+            const [gizmo, virtualCam, defaultControls, mainCamera, invalidate] = [
+                this.gizmoRef.nativeElement,
+                this.virtualCamRef.nativeElement,
+                this.defaultControls(),
+                this.mainCamera(),
+                this.invalidate(),
+            ];
+            if (gizmo && virtualCam) {
+                // 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.update.observed)
+                            this.update.emit();
+                        else if (defaultControls)
+                            defaultControls.update();
+                        invalidate();
+                    }
+                }
+                // Sync Gizmo with main camera orientation
+                this.matrix.copy(mainCamera.matrix).invert();
+                gizmo.quaternion.setFromRotationMatrix(this.matrix);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoHelper, isStandalone: true, selector: "ngts-gizmo-helper", inputs: { gizmoRef: "gizmoRef", _alignment: ["alignment", "_alignment"], _margin: ["margin", "_margin"], _renderPriority: ["renderPriority", "_renderPriority"], _autoClear: ["autoClear", "_autoClear"] }, outputs: { update: "update" }, providers: [provideNgtsGizmoHelperApi()], queries: [{ propertyName: "content", first: true, predicate: NgtsSobaContent, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+		<ngt-portal [renderPriority]="renderPriority()">
+			<ng-template ngtPortalContent>
+				<ngts-orthographic-camera [makeDefault]="true" [position]="[0, 0, 200]" [cameraRef]="virtualCamRef" />
+				<ngt-group [ref]="gizmoRef" [position]="gizmoPosition()">
+					<ng-container *ngTemplateOutlet="content" />
+				</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: "16.2.2", ngImport: i0, type: NgtsGizmoHelper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-helper',
+                    standalone: true,
+                    template: `
+		<ngt-portal [renderPriority]="renderPriority()">
+			<ng-template ngtPortalContent>
+				<ngts-orthographic-camera [makeDefault]="true" [position]="[0, 0, 200]" [cameraRef]="virtualCamRef" />
+				<ngt-group [ref]="gizmoRef" [position]="gizmoPosition()">
+					<ng-container *ngTemplateOutlet="content" />
+				</ngt-group>
+			</ng-template>
+		</ngt-portal>
+	`,
+                    imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
+                    providers: [provideNgtsGizmoHelperApi()],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { gizmoRef: [{
+                type: Input
+            }], _alignment: [{
+                type: Input,
+                args: [{ alias: 'alignment' }]
+            }], _margin: [{
+                type: Input,
+                args: [{ alias: 'margin' }]
+            }], _renderPriority: [{
+                type: Input,
+                args: [{ alias: 'renderPriority' }]
+            }], _autoClear: [{
+                type: Input,
+                args: [{ alias: 'autoClear' }]
+            }], update: [{
+                type: Output
+            }], content: [{
+                type: ContentChild,
+                args: [NgtsSobaContent, { 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 NgtsGizmoViewcubeInput {
+    constructor() {
+        this.inputs = signalStore({});
+        this.viewcubeClick = new EventEmitter();
+        this.hoverColor = this.inputs.select('hoverColor');
+        this.opacity = this.inputs.select('opacity');
+        this.textColor = this.inputs.select('textColor');
+        this.strokeColor = this.inputs.select('strokeColor');
+        this.faces = this.inputs.select('faces');
+        this.font = this.inputs.select('font');
+        this.color = this.inputs.select('color');
+    }
+    set _opacity(opacity) {
+        this.inputs.set({ opacity });
+    }
+    set _hoverColor(hoverColor) {
+        this.inputs.set({ hoverColor });
+    }
+    set _textColor(textColor) {
+        this.inputs.set({ textColor });
+    }
+    set _strokeColor(strokeColor) {
+        this.inputs.set({ strokeColor });
+    }
+    set _faces(faces) {
+        this.inputs.set({ faces });
+    }
+    set _font(font) {
+        this.inputs.set({ font });
+    }
+    set _color(color) {
+        this.inputs.set({ color });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcubeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoViewcubeInput, inputs: { _opacity: ["opacity", "_opacity"], _hoverColor: ["hoverColor", "_hoverColor"], _textColor: ["textColor", "_textColor"], _strokeColor: ["strokeColor", "_strokeColor"], _faces: ["faces", "_faces"], _font: ["font", "_font"], _color: ["color", "_color"] }, outputs: { viewcubeClick: "viewcubeClick" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcubeInput, decorators: [{
+            type: Directive
+        }], propDecorators: { _opacity: [{
+                type: Input,
+                args: [{ alias: 'opacity' }]
+            }], _hoverColor: [{
+                type: Input,
+                args: [{ alias: 'hoverColor' }]
+            }], _textColor: [{
+                type: Input,
+                args: [{ alias: 'textColor' }]
+            }], _strokeColor: [{
+                type: Input,
+                args: [{ alias: 'strokeColor' }]
+            }], _faces: [{
+                type: Input,
+                args: [{ alias: 'faces' }]
+            }], _font: [{
+                type: Input,
+                args: [{ alias: 'font' }]
+            }], _color: [{
+                type: Input,
+                args: [{ alias: 'color' }]
+            }], viewcubeClick: [{
+                type: Output
+            }] } });
+
+extend({ Mesh, BoxGeometry, MeshBasicMaterial });
+class NgtsGizmoViewcubeEdgeCube {
+    set _dimensions(dimensions) {
+        this.inputs.set({ dimensions });
+    }
+    set _position(position) {
+        this.inputs.set({ position });
+    }
+    constructor() {
+        this.inputs = signalStore();
+        this.gizmoApi = injectNgtsGizmoHelperApi();
+        this.viewcubeInput = inject(NgtsGizmoViewcubeInput);
+        this.hover = signal(false);
+        this.position = this.inputs.select('position');
+        this.dimensions = this.inputs.select('dimensions');
+        this.viewcubeInput.inputs.patch({ hoverColor: colors.hover });
+    }
+    onPointerMove(event) {
+        event.stopPropagation();
+        this.hover.set(true);
+    }
+    onPointerOut(event) {
+        event.stopPropagation();
+        this.hover.set(false);
+    }
+    onClick(event) {
+        if (this.viewcubeInput.viewcubeClick.observed) {
+            this.viewcubeInput.viewcubeClick.emit(event);
+        }
+        else {
+            event.stopPropagation();
+            this.gizmoApi.tweenCamera(this.position());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoViewcubeEdgeCube, isStandalone: true, selector: "ngts-gizmo-viewcube-edge-cube", inputs: { _dimensions: ["dimensions", "_dimensions"], _position: ["position", "_position"] }, ngImport: i0, template: `
+		<ngt-mesh
+			[scale]="1.01"
+			[position]="position()"
+			(pointermove)="onPointerMove($event)"
+			(pointerout)="onPointerOut($event)"
+			(click)="onClick($event)"
+		>
+			<ngt-box-geometry *args="dimensions()" />
+			<ngt-mesh-basic-material
+				[color]="hover() ? viewcubeInput.hoverColor() : 'white'"
+				[transparent]="true"
+				[opacity]="0.6"
+				[visible]="hover()"
+			/>
+		</ngt-mesh>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcubeEdgeCube, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-viewcube-edge-cube',
+                    standalone: true,
+                    template: `
+		<ngt-mesh
+			[scale]="1.01"
+			[position]="position()"
+			(pointermove)="onPointerMove($event)"
+			(pointerout)="onPointerOut($event)"
+			(click)="onClick($event)"
+		>
+			<ngt-box-geometry *args="dimensions()" />
+			<ngt-mesh-basic-material
+				[color]="hover() ? viewcubeInput.hoverColor() : 'white'"
+				[transparent]="true"
+				[opacity]="0.6"
+				[visible]="hover()"
+			/>
+		</ngt-mesh>
+	`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _dimensions: [{
+                type: Input,
+                args: [{ required: true, alias: 'dimensions' }]
+            }], _position: [{
+                type: Input,
+                args: [{ required: true, alias: 'position' }]
+            }] } });
+
+extend({ MeshLambertMaterial, Mesh, BoxGeometry });
+class NgtsGizmoViewcubeFaceMaterial {
+    set _index(index) {
+        this.inputs.set({ index });
+    }
+    set _hover(hover) {
+        this.inputs.set({ hover });
+    }
+    constructor() {
+        this.inputs = signalStore();
+        this.document = inject(DOCUMENT);
+        this.store = injectNgtStore();
+        this.gl = this.store.select('gl');
+        this.viewcubeInput = inject(NgtsGizmoViewcubeInput);
+        this.index = this.inputs.select('index');
+        this.hover = this.inputs.select('hover');
+        this.texture = computed(() => {
+            const [index, color, font, faces, textColor, strokeColor] = [
+                this.index(),
+                this.viewcubeInput.color(),
+                this.viewcubeInput.font(),
+                this.viewcubeInput.faces(),
+                this.viewcubeInput.textColor(),
+                this.viewcubeInput.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);
+        });
+        this.viewcubeInput.inputs.patch({
+            color: colors.bg,
+            font: '20px Inter var, Arial, sans-serif',
+            faces: defaultFaces,
+            hoverColor: colors.hover,
+            textColor: colors.text,
+            strokeColor: colors.stroke,
+            opacity: 1,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoViewcubeFaceMaterial, isStandalone: true, selector: "ngts-gizmo-viewcube-face-material", inputs: { _index: ["index", "_index"], _hover: ["hover", "_hover"] }, ngImport: i0, template: `
+		<ngt-mesh-lambert-material
+			[attach]="['material', index()]"
+			[map]="texture()"
+			[color]="hover() ? viewcubeInput.hoverColor() : viewcubeInput.color()"
+			[opacity]="viewcubeInput.opacity()"
+			[transparent]="true"
+		>
+			<ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
+		</ngt-mesh-lambert-material>
+	`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcubeFaceMaterial, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-viewcube-face-material',
+                    standalone: true,
+                    template: `
+		<ngt-mesh-lambert-material
+			[attach]="['material', index()]"
+			[map]="texture()"
+			[color]="hover() ? viewcubeInput.hoverColor() : viewcubeInput.color()"
+			[opacity]="viewcubeInput.opacity()"
+			[transparent]="true"
+		>
+			<ngt-value [rawValue]="gl().capabilities.getMaxAnisotropy() || 1" attach="map.anisotrophy" />
+		</ngt-mesh-lambert-material>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _index: [{
+                type: Input,
+                args: [{ required: true, alias: 'index' }]
+            }], _hover: [{
+                type: Input,
+                args: [{ required: true, alias: 'hover' }]
+            }] } });
+class NgtsGizmoViewcubeFaceCube {
+    constructor() {
+        this.gizmoApi = injectNgtsGizmoHelperApi();
+        this.viewcubeInput = inject(NgtsGizmoViewcubeInput);
+        this.hover = signal(-1);
+    }
+    onPointerMove(event) {
+        event.stopPropagation();
+        this.hover.set(Math.floor(event.faceIndex / 2));
+    }
+    onPointerOut(event) {
+        event.stopPropagation();
+        this.hover.set(-1);
+    }
+    onClick(event) {
+        if (this.viewcubeInput.viewcubeClick.observed) {
+            this.viewcubeInput.viewcubeClick.emit(event);
+        }
+        else {
+            event.stopPropagation();
+            this.gizmoApi.tweenCamera(event.face.normal);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcubeFaceCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoViewcubeFaceCube, isStandalone: true, selector: "ngts-gizmo-viewcube-face-cube", 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" />
+		</ngt-mesh>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtsGizmoViewcubeFaceMaterial, selector: "ngts-gizmo-viewcube-face-material", inputs: ["index", "hover"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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" />
+		</ngt-mesh>
+	`,
+                    imports: [NgtsGizmoViewcubeFaceMaterial, NgtRepeat],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+extend({ Group, AmbientLight, PointLight });
+class NgtsGizmoViewcube extends NgtsGizmoViewcubeInput {
+    constructor() {
+        super(...arguments);
+        this.edges = edges;
+        this.edgeDimensions = edgeDimensions;
+        this.corners = corners;
+        this.cornerDimensions = cornerDimensions;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcube, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoViewcube, isStandalone: true, selector: "ngts-gizmo-viewcube", providers: [{ provide: NgtsGizmoViewcubeInput, useExisting: NgtsGizmoViewcube }], usesInheritance: true, ngImport: i0, template: `
+		<ngt-group [scale]="60">
+			<ngts-gizmo-viewcube-face-cube />
+
+			<ngts-gizmo-viewcube-edge-cube
+				*ngFor="let edge of edges; let i = index"
+				[position]="edge"
+				[dimensions]="edgeDimensions[i]"
+			/>
+
+			<ngts-gizmo-viewcube-edge-cube
+				*ngFor="let corner of corners"
+				[position]="corner"
+				[dimensions]="cornerDimensions"
+			/>
+
+			<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", inputs: ["dimensions", "position"] }, { kind: "component", type: NgtsGizmoViewcubeFaceCube, selector: "ngts-gizmo-viewcube-face-cube" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewcube, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-viewcube',
+                    standalone: true,
+                    template: `
+		<ngt-group [scale]="60">
+			<ngts-gizmo-viewcube-face-cube />
+
+			<ngts-gizmo-viewcube-edge-cube
+				*ngFor="let edge of edges; let i = index"
+				[position]="edge"
+				[dimensions]="edgeDimensions[i]"
+			/>
+
+			<ngts-gizmo-viewcube-edge-cube
+				*ngFor="let corner of corners"
+				[position]="corner"
+				[dimensions]="cornerDimensions"
+			/>
+
+			<ngt-ambient-light [intensity]="0.5" />
+			<ngt-point-light [position]="10" [intensity]="0.5" />
+		</ngt-group>
+	`,
+                    imports: [NgtsGizmoViewcubeEdgeCube, NgtsGizmoViewcubeFaceCube, NgFor],
+                    providers: [{ provide: NgtsGizmoViewcubeInput, useExisting: NgtsGizmoViewcube }],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+extend({ Group, Mesh, BoxGeometry, MeshBasicMaterial, Sprite, SpriteMaterial });
+class NgtsGizmoViewportAxis {
+    constructor() {
+        this.inputs = signalStore({ scale: [0.8, 0.05, 0.05] });
+        this.rotation = this.inputs.select('rotation');
+        this.color = this.inputs.select('color');
+        this.scale = this.inputs.select('scale');
+    }
+    set _color(color) {
+        this.inputs.set({ color });
+    }
+    set _rotation(rotation) {
+        this.inputs.set({ rotation });
+    }
+    set _scale(scale) {
+        this.inputs.set({ scale });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewportAxis, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoViewportAxis, isStandalone: true, selector: "ngts-gizmo-viewport-axis", inputs: { _color: ["color", "_color"], _rotation: ["rotation", "_rotation"], _scale: ["scale", "_scale"] }, ngImport: i0, template: `
+		<ngt-group [rotation]="rotation()">
+			<ngt-mesh [position]="[0.4, 0, 0]">
+				<ngt-box-geometry *args="scale()" />
+				<ngt-mesh-basic-material [color]="color()" [toneMapped]="false" />
+			</ngt-mesh>
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewportAxis, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-viewport-axis',
+                    standalone: true,
+                    template: `
+		<ngt-group [rotation]="rotation()">
+			<ngt-mesh [position]="[0.4, 0, 0]">
+				<ngt-box-geometry *args="scale()" />
+				<ngt-mesh-basic-material [color]="color()" [toneMapped]="false" />
+			</ngt-mesh>
+		</ngt-group>
+	`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { _color: [{
+                type: Input,
+                args: [{ required: true, alias: 'color' }]
+            }], _rotation: [{
+                type: Input,
+                args: [{ required: true, alias: 'rotation' }]
+            }], _scale: [{
+                type: Input,
+                args: [{ alias: 'scale' }]
+            }] } });
+class NgtsGizmoViewportAxisHead {
+    constructor() {
+        this.inputs = signalStore({ axisHeadScale: 1 });
+        this.document = inject(DOCUMENT);
+        this.store = injectNgtStore();
+        this.capabilities = this.store.select('gl', 'capabilities');
+        this.active = signal(false);
+        this.arcStyle = this.inputs.select('arcStyle');
+        this.labelColor = this.inputs.select('labelColor');
+        this.font = this.inputs.select('font');
+        this.axisHeadScale = this.inputs.select('axisHeadScale');
+        this.label = this.inputs.select('label');
+        this.texture = computed(() => {
+            const [arcStyle, labelColor, font, label] = [this.arcStyle(), this.labelColor(), this.font(), this.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.scale = computed(() => {
+            const [active, axisHeadScale, label] = [this.active(), this.axisHeadScale(), this.label()];
+            return (label ? 1 : 0.75) * (active ? 1.2 : 1) * axisHeadScale;
+        });
+    }
+    set _arcStyle(arcStyle) {
+        this.inputs.set({ arcStyle });
+    }
+    set _label(label) {
+        this.inputs.set({ label });
+    }
+    set _labelColor(labelColor) {
+        this.inputs.set({ labelColor });
+    }
+    set _axisHeadScale(axisHeadScale) {
+        this.inputs.set({ axisHeadScale });
+    }
+    set _disabled(disabled) {
+        this.inputs.set({ disabled });
+    }
+    set _font(font) {
+        this.inputs.set({ font });
+    }
+    onPointerOver(event) {
+        if (!this.inputs.get('disabled')) {
+            event.stopPropagation();
+            this.active.set(true);
+        }
+    }
+    onPointerOut(event) {
+        if (!this.inputs.get('disabled')) {
+            if (this.viewportClickEmitter?.observed) {
+                this.viewportClickEmitter.emit(event);
+            }
+            else {
+                event.stopPropagation();
+                this.active.set(false);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewportAxisHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoViewportAxisHead, isStandalone: true, selector: "ngts-gizmo-viewport-axis-head", inputs: { _arcStyle: ["arcStyle", "_arcStyle"], _label: ["label", "_label"], _labelColor: ["labelColor", "_labelColor"], _axisHeadScale: ["axisHeadScale", "_axisHeadScale"], _disabled: ["disabled", "_disabled"], _font: ["font", "_font"], viewportClickEmitter: "viewportClickEmitter" }, ngImport: i0, template: `
+		<ngt-sprite
+			ngtCompound
+			[scale]="scale()"
+			(pointerover)="onPointerOver($event)"
+			(pointerout)="onPointerOut($event)"
+		>
+			<ngt-sprite-material
+				[map]="texture()"
+				[opacity]="label() ? 1 : 0.75"
+				[alphaTest]="0.3"
+				[toneMapped]="false"
+			>
+				<ngt-value [rawValue]="capabilities().getMaxAnisotropy() || 1" attach="map.anisotropy" />
+			</ngt-sprite-material>
+		</ngt-sprite>
+	`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewportAxisHead, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-viewport-axis-head',
+                    standalone: true,
+                    template: `
+		<ngt-sprite
+			ngtCompound
+			[scale]="scale()"
+			(pointerover)="onPointerOver($event)"
+			(pointerout)="onPointerOut($event)"
+		>
+			<ngt-sprite-material
+				[map]="texture()"
+				[opacity]="label() ? 1 : 0.75"
+				[alphaTest]="0.3"
+				[toneMapped]="false"
+			>
+				<ngt-value [rawValue]="capabilities().getMaxAnisotropy() || 1" attach="map.anisotropy" />
+			</ngt-sprite-material>
+		</ngt-sprite>
+	`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { _arcStyle: [{
+                type: Input,
+                args: [{ alias: 'arcStyle' }]
+            }], _label: [{
+                type: Input,
+                args: [{ alias: 'label' }]
+            }], _labelColor: [{
+                type: Input,
+                args: [{ alias: 'labelColor' }]
+            }], _axisHeadScale: [{
+                type: Input,
+                args: [{ alias: 'axisHeadScale' }]
+            }], _disabled: [{
+                type: Input,
+                args: [{ alias: 'disabled' }]
+            }], _font: [{
+                type: Input,
+                args: [{ alias: 'font' }]
+            }], viewportClickEmitter: [{
+                type: Input
+            }] } });
+
+extend({ Group, AmbientLight, PointLight });
+class NgtsGizmoViewport {
+    constructor() {
+        this.inputs = signalStore({
+            font: '18px Inter var, Arial, sans-serif',
+            axisColors: ['#ff2060', '#20df80', '#2080ff'],
+            axisHeadScale: 1,
+            labels: ['X', 'Y', 'Z'],
+            labelColor: '#000',
+        });
+        this.gizmoApi = injectNgtsGizmoHelperApi();
+        this.Math = Math;
+        this.viewportClick = new EventEmitter();
+        this.axisColors = this.inputs.select('axisColors');
+        this.axisScale = this.inputs.select('axisScale');
+        this.labels = this.inputs.select('labels');
+        this.axisHeadScale = this.inputs.select('axisHeadScale');
+        this.labelColor = this.inputs.select('labelColor');
+        this.hideNegativeAxes = this.inputs.select('hideNegativeAxes');
+        this.hideAxisHeads = this.inputs.select('hideAxisHeads');
+        this.disabled = this.inputs.select('disabled');
+        this.font = this.inputs.select('font');
+    }
+    set _axisColors(axisColors) {
+        this.inputs.set({ axisColors });
+    }
+    set _axisScale(axisScale) {
+        this.inputs.set({ axisScale });
+    }
+    set _labels(labels) {
+        this.inputs.set({ labels });
+    }
+    set _axisHeadScale(axisHeadScale) {
+        this.inputs.set({ axisHeadScale });
+    }
+    set _labelColor(labelColor) {
+        this.inputs.set({ labelColor });
+    }
+    set _hideNegativeAxes(hideNegativeAxes) {
+        this.inputs.set({ hideNegativeAxes });
+    }
+    set _hideAxisHeads(hideAxisHeads) {
+        this.inputs.set({ hideAxisHeads });
+    }
+    set _disabled(disabled) {
+        this.inputs.set({ disabled });
+    }
+    set _font(font) {
+        this.inputs.set({ font });
+    }
+    onPointerDown(event) {
+        if (!this.inputs.get('disabled')) {
+            event.stopPropagation();
+            this.gizmoApi.tweenCamera(event.object.position);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsGizmoViewport, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsGizmoViewport, isStandalone: true, selector: "ngts-gizmo-viewport", inputs: { _axisColors: ["axisColors", "_axisColors"], _axisScale: ["axisScale", "_axisScale"], _labels: ["labels", "_labels"], _axisHeadScale: ["axisHeadScale", "_axisHeadScale"], _labelColor: ["labelColor", "_labelColor"], _hideNegativeAxes: ["hideNegativeAxes", "_hideNegativeAxes"], _hideAxisHeads: ["hideAxisHeads", "_hideAxisHeads"], _disabled: ["disabled", "_disabled"], _font: ["font", "_font"] }, outputs: { viewportClick: "viewportClick" }, ngImport: i0, template: `
+		<ngt-group ngtCompound [scale]="40">
+			<ngts-gizmo-viewport-axis [color]="axisColors()[0]" [rotation]="[0, 0, 0]" [scale]="axisScale()" />
+			<ngts-gizmo-viewport-axis
+				[color]="axisColors()[1]"
+				[rotation]="[0, 0, Math.PI / 2]"
+				[scale]="axisScale()"
+			/>
+			<ngts-gizmo-viewport-axis
+				[color]="axisColors()[2]"
+				[rotation]="[0, -Math.PI / 2, 0]"
+				[scale]="axisScale()"
+			/>
+			<ng-container *ngIf="!hideAxisHeads()">
+				<ngts-gizmo-viewport-axis-head
+					[arcStyle]="axisColors()[0]"
+					[position]="[1, 0, 0]"
+					[label]="labels()[0]"
+					[font]="font()"
+					[disabled]="disabled()"
+					[labelColor]="labelColor()"
+					[viewportClickEmitter]="viewportClick"
+					[axisHeadScale]="axisHeadScale()"
+					(pointerdown)="onPointerDown($any($event))"
+				/>
+				<ngts-gizmo-viewport-axis-head
+					[arcStyle]="axisColors()[1]"
+					[position]="[0, 1, 0]"
+					[label]="labels()[1]"
+					[font]="font()"
+					[disabled]="disabled()"
+					[labelColor]="labelColor()"
+					[viewportClickEmitter]="viewportClick"
+					[axisHeadScale]="axisHeadScale()"
+					(pointerdown)="onPointerDown($any($event))"
+				/>
+				<ngts-gizmo-viewport-axis-head
+					[arcStyle]="axisColors()[2]"
+					[position]="[0, 0, 1]"
+					[label]="labels()[2]"
+					[font]="font()"
+					[disabled]="disabled()"
+					[labelColor]="labelColor()"
+					[viewportClickEmitter]="viewportClick"
+					[axisHeadScale]="axisHeadScale()"
+					(pointerdown)="onPointerDown($any($event))"
+				/>
+				<ng-container *ngIf="!hideNegativeAxes()">
+					<ngts-gizmo-viewport-axis-head
+						[arcStyle]="axisColors()[0]"
+						[position]="[-1, 0, 0]"
+						[font]="font()"
+						[disabled]="disabled()"
+						[labelColor]="labelColor()"
+						[viewportClickEmitter]="viewportClick"
+						[axisHeadScale]="axisHeadScale()"
+						(pointerdown)="onPointerDown($any($event))"
+					/>
+					<ngts-gizmo-viewport-axis-head
+						[arcStyle]="axisColors()[1]"
+						[position]="[0, -1, 0]"
+						[font]="font()"
+						[disabled]="disabled()"
+						[labelColor]="labelColor()"
+						[viewportClickEmitter]="viewportClick"
+						[axisHeadScale]="axisHeadScale()"
+						(pointerdown)="onPointerDown($any($event))"
+					/>
+					<ngts-gizmo-viewport-axis-head
+						[arcStyle]="axisColors()[2]"
+						[position]="[0, 0, -1]"
+						[font]="font()"
+						[disabled]="disabled()"
+						[labelColor]="labelColor()"
+						[viewportClickEmitter]="viewportClick"
+						[axisHeadScale]="axisHeadScale()"
+						(pointerdown)="onPointerDown($any($event))"
+					/>
+				</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", inputs: ["color", "rotation", "scale"] }, { kind: "component", type: NgtsGizmoViewportAxisHead, selector: "ngts-gizmo-viewport-axis-head", inputs: ["arcStyle", "label", "labelColor", "axisHeadScale", "disabled", "font", "viewportClickEmitter"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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]="axisColors()[0]" [rotation]="[0, 0, 0]" [scale]="axisScale()" />
+			<ngts-gizmo-viewport-axis
+				[color]="axisColors()[1]"
+				[rotation]="[0, 0, Math.PI / 2]"
+				[scale]="axisScale()"
+			/>
+			<ngts-gizmo-viewport-axis
+				[color]="axisColors()[2]"
+				[rotation]="[0, -Math.PI / 2, 0]"
+				[scale]="axisScale()"
+			/>
+			<ng-container *ngIf="!hideAxisHeads()">
+				<ngts-gizmo-viewport-axis-head
+					[arcStyle]="axisColors()[0]"
+					[position]="[1, 0, 0]"
+					[label]="labels()[0]"
+					[font]="font()"
+					[disabled]="disabled()"
+					[labelColor]="labelColor()"
+					[viewportClickEmitter]="viewportClick"
+					[axisHeadScale]="axisHeadScale()"
+					(pointerdown)="onPointerDown($any($event))"
+				/>
+				<ngts-gizmo-viewport-axis-head
+					[arcStyle]="axisColors()[1]"
+					[position]="[0, 1, 0]"
+					[label]="labels()[1]"
+					[font]="font()"
+					[disabled]="disabled()"
+					[labelColor]="labelColor()"
+					[viewportClickEmitter]="viewportClick"
+					[axisHeadScale]="axisHeadScale()"
+					(pointerdown)="onPointerDown($any($event))"
+				/>
+				<ngts-gizmo-viewport-axis-head
+					[arcStyle]="axisColors()[2]"
+					[position]="[0, 0, 1]"
+					[label]="labels()[2]"
+					[font]="font()"
+					[disabled]="disabled()"
+					[labelColor]="labelColor()"
+					[viewportClickEmitter]="viewportClick"
+					[axisHeadScale]="axisHeadScale()"
+					(pointerdown)="onPointerDown($any($event))"
+				/>
+				<ng-container *ngIf="!hideNegativeAxes()">
+					<ngts-gizmo-viewport-axis-head
+						[arcStyle]="axisColors()[0]"
+						[position]="[-1, 0, 0]"
+						[font]="font()"
+						[disabled]="disabled()"
+						[labelColor]="labelColor()"
+						[viewportClickEmitter]="viewportClick"
+						[axisHeadScale]="axisHeadScale()"
+						(pointerdown)="onPointerDown($any($event))"
+					/>
+					<ngts-gizmo-viewport-axis-head
+						[arcStyle]="axisColors()[1]"
+						[position]="[0, -1, 0]"
+						[font]="font()"
+						[disabled]="disabled()"
+						[labelColor]="labelColor()"
+						[viewportClickEmitter]="viewportClick"
+						[axisHeadScale]="axisHeadScale()"
+						(pointerdown)="onPointerDown($any($event))"
+					/>
+					<ngts-gizmo-viewport-axis-head
+						[arcStyle]="axisColors()[2]"
+						[position]="[0, 0, -1]"
+						[font]="font()"
+						[disabled]="disabled()"
+						[labelColor]="labelColor()"
+						[viewportClickEmitter]="viewportClick"
+						[axisHeadScale]="axisHeadScale()"
+						(pointerdown)="onPointerDown($any($event))"
+					/>
+				</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,
+                args: [{ alias: 'axisColors' }]
+            }], _axisScale: [{
+                type: Input,
+                args: [{ alias: 'axisScale' }]
+            }], _labels: [{
+                type: Input,
+                args: [{ alias: 'labels' }]
+            }], _axisHeadScale: [{
+                type: Input,
+                args: [{ alias: 'axisHeadScale' }]
+            }], _labelColor: [{
+                type: Input,
+                args: [{ alias: 'labelColor' }]
+            }], _hideNegativeAxes: [{
+                type: Input,
+                args: [{ alias: 'hideNegativeAxes' }]
+            }], _hideAxisHeads: [{
+                type: Input,
+                args: [{ alias: 'hideAxisHeads' }]
+            }], _disabled: [{
+                type: Input,
+                args: [{ alias: 'disabled' }]
+            }], _font: [{
+                type: Input,
+                args: [{ alias: 'font' }]
+            }], viewportClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgtsGizmoHelper, NgtsGizmoViewcube, NgtsGizmoViewport, injectNgtsGizmoHelperApi, provideNgtsGizmoHelperApi };
+//# sourceMappingURL=angular-three-soba-gizmos.mjs.map