angular-three-soba 2.0.0-beta.26 → 2.0.0-beta.261

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

@@ -1,1043 +0,0 @@
-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