angular-three-soba 2.0.0 → 2.2.0

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

@@ -1,24 +1,23 @@
 import * as i0 from '@angular/core';
-import { input, output, computed, effect, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, viewChild, ElementRef, inject, signal, afterNextRender, model, untracked, Directive } from '@angular/core';
-import { omit, injectStore, pick, extend, injectBeforeRender, NgtArgs, getLocalState, NgtHTML, provideHTMLDomElement } from 'angular-three';
+import { input, output, computed, effect, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, model, inject, afterNextRender, untracked, ElementRef, Directive } from '@angular/core';
+import { omit, injectStore, pick, extend, injectBeforeRender, NgtArgs, NgtHTML, provideHTMLDomElement } from 'angular-three';
 import CameraControls from 'camera-controls';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { Box3, MathUtils, Matrix4, Quaternion, Raycaster, Sphere, Spherical, Vector2, Vector3, Vector4, DoubleSide, Group, Mesh, ConeGeometry, CylinderGeometry, MeshBasicMaterial, Ray, Plane, PlaneGeometry, SphereGeometry } from 'three';
+import { Box3, MathUtils, Matrix4, Quaternion, Raycaster, Sphere, Spherical, Vector2, Vector3, Vector4 } from 'three';
 import { OrbitControls } from 'three-stdlib';
-import { NgtsHTML, NgtsHTMLContent, calculateScaleFactor } from 'angular-three-soba/misc';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
-import { NgtsLine } from 'angular-three-soba/abstractions';
 import { DOCUMENT } from '@angular/common';
 import { easing } from 'maath';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { NgtsPivotControls as NgtsPivotControls$1 } from 'angular-three-soba/gizmos';
 
-const defaultOptions$3 = {
+const defaultOptions$2 = {
     makeDefault: false,
     events: false,
     regress: false,
 };
 class NgtsCameraControls {
     constructor() {
-        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
         this.parameters = omit(this.options, ['makeDefault', 'camera', 'regress', 'domElement']);
         this.changed = output();
         this.started = output();
@@ -132,7 +131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const defaultOptions$2 = {
+const defaultOptions$1 = {
     enableDamping: true,
     regress: false,
     makeDefault: false,
@@ -140,7 +139,7 @@ const defaultOptions$2 = {
 };
 class NgtsOrbitControls {
     constructor() {
-        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
         this.parameters = omit(this.options, ['makeDefault', 'camera', 'regress', 'domElement', 'keyEvents', 'enableDamping']);
         this.changed = output();
         this.started = output();
@@ -259,1333 +258,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const vec1$1 = new Vector3();
-const vec2$1 = new Vector3();
-function calculateOffset$1(clickPoint, normal, rayStart, rayDir) {
-    const e1 = normal.dot(normal);
-    const e2 = normal.dot(clickPoint) - normal.dot(rayStart);
-    const e3 = normal.dot(rayDir);
-    if (e3 === 0) {
-        return -e2 / e1;
-    }
-    vec1$1
-        .copy(rayDir)
-        .multiplyScalar(e1 / e3)
-        .sub(normal);
-    vec2$1
-        .copy(rayDir)
-        .multiplyScalar(e2 / e3)
-        .add(rayStart)
-        .sub(clickPoint);
-    return -vec1$1.dot(vec2$1) / vec1$1.dot(vec1$1);
-}
-const upV$1 = new Vector3(0, 1, 0);
-const offsetMatrix$1 = new Matrix4();
-class NgtsAxisArrow {
-    constructor() {
-        this.DoubleSide = DoubleSide;
-        this.direction = input.required();
-        this.axis = input.required();
-        this.groupRef = viewChild.required('group');
-        this.annotationRef = viewChild('annotation', { read: ElementRef });
-        this.pivotControls = inject(NgtsPivotControls);
-        this.store = injectStore();
-        this.controls = this.store.select('controls');
-        this.hovered = signal(false);
-        this.clickInfo = null;
-        this.offset0 = 0;
-        this.color = computed(() => this.hovered() ? this.pivotControls.hoveredColor() : this.pivotControls.axisColors()[this.axis()]);
-        this.coneWidth = computed(() => this.pivotControls.fixed()
-            ? (this.pivotControls.lineWidth() / this.pivotControls.scale()) * 1.6
-            : this.pivotControls.scale() / 20);
-        this.coneLength = computed(() => (this.pivotControls.fixed() ? 0.2 : this.pivotControls.scale() / 5));
-        this.cylinderLength = computed(() => this.pivotControls.fixed() ? 1 - this.coneLength() : this.pivotControls.scale() - this.coneLength());
-        this.matrixL = computed(() => {
-            const quaternion = new Quaternion().setFromUnitVectors(upV$1, this.direction().clone().normalize());
-            return new Matrix4().makeRotationFromQuaternion(quaternion);
-        });
-        extend({ Group, Mesh, ConeGeometry, CylinderGeometry, MeshBasicMaterial });
-    }
-    onPointerDown(event) {
-        const [group, direction, axis, controls, annotation] = [
-            this.groupRef().nativeElement,
-            this.direction(),
-            this.axis(),
-            this.controls(),
-            this.annotationRef()?.nativeElement,
-        ];
-        if (annotation) {
-            annotation.innerText = `${this.pivotControls.translation[axis].toFixed(2)}`;
-            annotation.style.display = 'block';
-        }
-        event.stopPropagation();
-        const rotation = new Matrix4().extractRotation(group.matrixWorld);
-        const origin = new Vector3().setFromMatrixPosition(group.matrixWorld);
-        const clickPoint = event.point.clone();
-        const dir = direction.clone().applyMatrix4(rotation).normalize();
-        this.clickInfo = { clickPoint, dir };
-        this.offset0 = this.pivotControls.translation[axis];
-        this.pivotControls.onDragStart({ component: 'Arrow', axis, origin, directions: [dir] });
-        if (controls) {
-            controls.enabled = false;
-        }
-        // @ts-expect-error - setPointerCapture is not in the type definition
-        event.target.setPointerCapture(event.pointerId);
-    }
-    onPointerUp(event) {
-        const [annotation, controls] = [this.annotationRef()?.nativeElement, this.controls()];
-        if (annotation) {
-            annotation.style.display = 'none';
-        }
-        event.stopPropagation();
-        this.clickInfo = null;
-        this.pivotControls.onDragEnd();
-        if (controls) {
-            controls.enabled = true;
-        }
-        // @ts-expect-error - setPointerCapture is not in the type definition
-        event.target.releasePointerCapture(event.pointerId);
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        if (!this.hovered()) {
-            this.hovered.set(true);
-        }
-        if (this.clickInfo) {
-            const { clickPoint, dir } = this.clickInfo;
-            const [translationLimits, annotation, axis] = [
-                this.pivotControls.translationLimits(),
-                this.annotationRef()?.nativeElement,
-                this.axis(),
-            ];
-            const [min, max] = translationLimits?.[axis] || [undefined, undefined];
-            let offset = calculateOffset$1(clickPoint, dir, event.ray.origin, event.ray.direction);
-            if (min !== undefined) {
-                offset = Math.max(offset, min - this.offset0);
-            }
-            if (max !== undefined) {
-                offset = Math.min(offset, max - this.offset0);
-            }
-            this.pivotControls.translation[axis] = this.offset0 + offset;
-            if (annotation) {
-                annotation.innerText = `${this.pivotControls.translation[axis].toFixed(2)}`;
-            }
-            offsetMatrix$1.makeTranslation(dir.x * offset, dir.y * offset, dir.z * offset);
-            this.pivotControls.onDrag(offsetMatrix$1);
-        }
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hovered.set(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAxisArrow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsAxisArrow, isStandalone: true, selector: "ngts-axis-arrow", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: true, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "annotationRef", first: true, predicate: ["annotation"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
-		<ngt-group #group>
-			<ngt-group
-				[matrix]="matrixL()"
-				[matrixAutoUpdate]="false"
-				(pointerdown)="onPointerDown($any($event))"
-				(pointerup)="onPointerUp($any($event))"
-				(pointermove)="onPointerMove($any($event))"
-				(pointerout)="onPointerOut($any($event))"
-			>
-				@if (pivotControls.annotations()) {
-					<ngts-html [options]="{ position: [0, -coneLength(), 0] }">
-						<div
-							#annotation
-							ngtsHTMLContent
-							style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap;"
-							[class]="pivotControls.annotationsClass()"
-						></div>
-					</ngts-html>
-				}
-				<ngt-mesh
-					[visible]="false"
-					[position]="[0, (cylinderLength() + coneLength()) / 2.0, 0]"
-					[userData]="pivotControls.userData()"
-				>
-					<ngt-cylinder-geometry
-						*args="[coneWidth() * 1.4, coneWidth() * 1.4, cylinderLength() + coneLength(), 8, 1]"
-					/>
-				</ngt-mesh>
-
-				<ngts-line
-					[points]="[0, 0, 0, 0, cylinderLength(), 0]"
-					[options]="{
-						raycast: null,
-						side: DoubleSide,
-						polygonOffset: true,
-						polygonOffsetFactor: -10,
-						renderOrder: 1,
-						fog: false,
-						transparent: true,
-						lineWidth: pivotControls.lineWidth(),
-						color: color(),
-						opacity: pivotControls.opacity(),
-						depthTest: pivotControls.depthTest(),
-					}"
-				/>
-
-				<ngt-mesh [raycast]="null" [position]="[0, cylinderLength() + coneLength() / 2.0, 0]" [renderOrder]="500">
-					<ngt-cone-geometry *args="[coneWidth(), coneLength(), 24, 1]" />
-					<ngt-mesh-basic-material
-						[transparent]="true"
-						[depthTest]="pivotControls.depthTest()"
-						[color]="color()"
-						[opacity]="pivotControls.opacity()"
-						[polygonOffset]="true"
-						[polygonOffsetFactor]="-10"
-						[fog]="false"
-					/>
-				</ngt-mesh>
-			</ngt-group>
-		</ngt-group>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }, { kind: "component", type: NgtsHTML, selector: "ngts-html", inputs: ["options"] }, { kind: "component", type: NgtsHTMLContent, selector: "[ngtsHTMLContent]", inputs: ["ngtsHTMLContent"], outputs: ["occluded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAxisArrow, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-axis-arrow',
-                    standalone: true,
-                    template: `
-		<ngt-group #group>
-			<ngt-group
-				[matrix]="matrixL()"
-				[matrixAutoUpdate]="false"
-				(pointerdown)="onPointerDown($any($event))"
-				(pointerup)="onPointerUp($any($event))"
-				(pointermove)="onPointerMove($any($event))"
-				(pointerout)="onPointerOut($any($event))"
-			>
-				@if (pivotControls.annotations()) {
-					<ngts-html [options]="{ position: [0, -coneLength(), 0] }">
-						<div
-							#annotation
-							ngtsHTMLContent
-							style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap;"
-							[class]="pivotControls.annotationsClass()"
-						></div>
-					</ngts-html>
-				}
-				<ngt-mesh
-					[visible]="false"
-					[position]="[0, (cylinderLength() + coneLength()) / 2.0, 0]"
-					[userData]="pivotControls.userData()"
-				>
-					<ngt-cylinder-geometry
-						*args="[coneWidth() * 1.4, coneWidth() * 1.4, cylinderLength() + coneLength(), 8, 1]"
-					/>
-				</ngt-mesh>
-
-				<ngts-line
-					[points]="[0, 0, 0, 0, cylinderLength(), 0]"
-					[options]="{
-						raycast: null,
-						side: DoubleSide,
-						polygonOffset: true,
-						polygonOffsetFactor: -10,
-						renderOrder: 1,
-						fog: false,
-						transparent: true,
-						lineWidth: pivotControls.lineWidth(),
-						color: color(),
-						opacity: pivotControls.opacity(),
-						depthTest: pivotControls.depthTest(),
-					}"
-				/>
-
-				<ngt-mesh [raycast]="null" [position]="[0, cylinderLength() + coneLength() / 2.0, 0]" [renderOrder]="500">
-					<ngt-cone-geometry *args="[coneWidth(), coneLength(), 24, 1]" />
-					<ngt-mesh-basic-material
-						[transparent]="true"
-						[depthTest]="pivotControls.depthTest()"
-						[color]="color()"
-						[opacity]="pivotControls.opacity()"
-						[polygonOffset]="true"
-						[polygonOffsetFactor]="-10"
-						[fog]="false"
-					/>
-				</ngt-mesh>
-			</ngt-group>
-		</ngt-group>
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtArgs, NgtsLine, NgtsHTML, NgtsHTMLContent],
-                }]
-        }], ctorParameters: () => [] });
-
-const clickDir = new Vector3();
-const intersectionDir = new Vector3();
-function toDegrees(radians) {
-    return (radians * 180) / Math.PI;
-}
-function toRadians(degrees) {
-    return (degrees * Math.PI) / 180;
-}
-function calculateAngle(clickPoint, intersectionPoint, origin, e1, e2) {
-    clickDir.copy(clickPoint).sub(origin);
-    intersectionDir.copy(intersectionPoint).sub(origin);
-    const dote1e1 = e1.dot(e1);
-    const dote2e2 = e2.dot(e2);
-    const uClick = clickDir.dot(e1) / dote1e1;
-    const vClick = clickDir.dot(e2) / dote2e2;
-    const uIntersection = intersectionDir.dot(e1) / dote1e1;
-    const vIntersection = intersectionDir.dot(e2) / dote2e2;
-    const angleClick = Math.atan2(vClick, uClick);
-    const angleIntersection = Math.atan2(vIntersection, uIntersection);
-    return angleIntersection - angleClick;
-}
-function fmod(num, denom) {
-    let k = Math.floor(num / denom);
-    k = k < 0 ? k + 1 : k;
-    return num - k * denom;
-}
-function minimizeAngle(angle) {
-    let result = fmod(angle, 2 * Math.PI);
-    if (Math.abs(result) < 1e-6) {
-        return 0.0;
-    }
-    if (result < 0.0) {
-        result += 2 * Math.PI;
-    }
-    return result;
-}
-const rotMatrix = new Matrix4();
-const posNew = new Vector3();
-const ray$1 = new Ray();
-const intersection$1 = new Vector3();
-class NgtsAxisRotator {
-    constructor() {
-        this.DoubleSide = DoubleSide;
-        this.dir1 = input.required();
-        this.dir2 = input.required();
-        this.axis = input.required();
-        this.groupRef = viewChild.required('group');
-        this.annotationRef = viewChild('annotation', { read: ElementRef });
-        this.pivotControls = inject(NgtsPivotControls);
-        this.store = injectStore();
-        this.controls = this.store.select('controls');
-        this.hovered = signal(false);
-        this.angle = 0;
-        this.angle0 = 0;
-        this.clickInfo = null;
-        this.matrixL = computed(() => {
-            const dir1N = this.dir1().clone().normalize();
-            const dir2N = this.dir2().clone().normalize();
-            return new Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
-        });
-        this.r = computed(() => (this.pivotControls.fixed() ? 0.65 : this.pivotControls.scale() * 0.65));
-        this.arc = computed(() => {
-            const segments = 32;
-            const points = [];
-            for (let j = 0; j <= segments; j++) {
-                const angle = (j * (Math.PI / 2)) / segments;
-                points.push(new Vector3(Math.cos(angle) * this.r(), Math.sin(angle) * this.r(), 0));
-            }
-            return points;
-        });
-        extend({ Group });
-    }
-    onPointerDown(event) {
-        const [annotation, group, axis, controls] = [
-            this.annotationRef()?.nativeElement,
-            this.groupRef().nativeElement,
-            this.axis(),
-            this.controls(),
-        ];
-        if (annotation) {
-            annotation.innerText = `${toDegrees(this.angle).toFixed(0)}º`;
-            annotation.style.display = 'block';
-        }
-        event.stopPropagation();
-        const clickPoint = event.point.clone();
-        const origin = new Vector3().setFromMatrixPosition(group.matrixWorld);
-        const e1 = new Vector3().setFromMatrixColumn(group.matrixWorld, 0).normalize();
-        const e2 = new Vector3().setFromMatrixColumn(group.matrixWorld, 1).normalize();
-        const normal = new Vector3().setFromMatrixColumn(group.matrixWorld, 2).normalize();
-        const plane = new Plane().setFromNormalAndCoplanarPoint(normal, origin);
-        this.clickInfo = { clickPoint, origin, e1, e2, normal, plane };
-        this.pivotControls.onDragStart({ component: 'Rotator', axis, origin, directions: [e1, e2, normal] });
-        if (controls) {
-            controls.enabled = false;
-        }
-        // @ts-expect-error - setPointerCapture is not a function on PointerEvent
-        event.target.setPointerCapture(event.pointerId);
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        if (!this.hovered())
-            this.hovered.set(true);
-        if (this.clickInfo) {
-            const { clickPoint, origin, e1, e2, normal, plane } = this.clickInfo;
-            const [rotationLimits, axis, annotation] = [
-                this.pivotControls.rotationLimits(),
-                this.axis(),
-                this.annotationRef()?.nativeElement,
-            ];
-            const [min, max] = rotationLimits?.[axis] || [undefined, undefined];
-            ray$1.copy(event.ray);
-            ray$1.intersectPlane(plane, intersection$1);
-            ray$1.direction.negate();
-            ray$1.intersectPlane(plane, intersection$1);
-            let deltaAngle = calculateAngle(clickPoint, intersection$1, origin, e1, e2);
-            let degrees = toDegrees(deltaAngle);
-            if (event.shiftKey) {
-                degrees = Math.round(degrees / 10) * 10;
-                deltaAngle = toRadians(degrees);
-            }
-            if (min !== undefined && max !== undefined && max - min < 2 * Math.PI) {
-                deltaAngle = minimizeAngle(deltaAngle);
-                deltaAngle = deltaAngle > Math.PI ? deltaAngle - 2 * Math.PI : deltaAngle;
-                deltaAngle = Math.round(deltaAngle / 10) * 10;
-                this.angle = this.angle0 + deltaAngle;
-            }
-            else {
-                this.angle = minimizeAngle(this.angle0 + deltaAngle);
-                this.angle = this.angle > Math.PI ? this.angle - 2 * Math.PI : this.angle;
-            }
-            if (annotation) {
-                degrees = toDegrees(this.angle);
-                annotation.innerText = `${degrees.toFixed(0)}º`;
-            }
-            rotMatrix.makeRotationAxis(normal, deltaAngle);
-            posNew.copy(origin).applyMatrix4(rotMatrix).sub(origin).negate();
-            rotMatrix.setPosition(posNew);
-            this.pivotControls.onDrag(rotMatrix);
-        }
-    }
-    onPointerUp(event) {
-        const [annotation, controls] = [this.annotationRef()?.nativeElement, this.controls()];
-        if (annotation) {
-            annotation.style.display = 'none';
-        }
-        event.stopPropagation();
-        this.clickInfo = null;
-        this.pivotControls.onDragEnd();
-        if (controls) {
-            controls.enabled = true;
-        }
-        // @ts-expect-error - releasePointerCapture is not a function on PointerEvent
-        event.target.releasePointerCapture(event.pointerId);
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hovered.set(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAxisRotator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsAxisRotator, isStandalone: true, selector: "ngts-axis-rotator", inputs: { dir1: { classPropertyName: "dir1", publicName: "dir1", isSignal: true, isRequired: true, transformFunction: null }, dir2: { classPropertyName: "dir2", publicName: "dir2", isSignal: true, isRequired: true, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "annotationRef", first: true, predicate: ["annotation"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
-		<ngt-group
-			#group
-			[matrix]="matrixL()"
-			[matrixAutoUpdate]="false"
-			(pointerdown)="onPointerDown($any($event))"
-			(pointermove)="onPointerMove($any($event))"
-			(pointerup)="onPointerUp($any($event))"
-			(pointerout)="onPointerOut($any($event))"
-		>
-			@if (pivotControls.annotations()) {
-				<ngts-html [options]="{ position: [r(), r(), 0] }">
-					<div
-						#annotation
-						ngtsHTMLContent
-						style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap"
-						[class]="pivotControls.annotationsClass()"
-					></div>
-				</ngts-html>
-			}
-
-			<ngts-line
-				[points]="arc()"
-				[options]="{ lineWidth: pivotControls.lineWidth() * 4, visible: false, userData: pivotControls.userData() }"
-			/>
-
-			<ngts-line
-				[points]="arc()"
-				[options]="{
-					transparent: true,
-					raycast: null,
-					depthTest: pivotControls.depthTest(),
-					lineWidth: pivotControls.lineWidth(),
-					side: DoubleSide,
-					color: hovered() ? pivotControls.hoveredColor() : pivotControls.axisColors()[axis()],
-					opacity: pivotControls.opacity(),
-					polygonOffset: true,
-					polygonOffsetFactor: -10,
-					fog: false,
-				}"
-			/>
-		</ngt-group>
-	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }, { kind: "component", type: NgtsHTML, selector: "ngts-html", inputs: ["options"] }, { kind: "component", type: NgtsHTMLContent, selector: "[ngtsHTMLContent]", inputs: ["ngtsHTMLContent"], outputs: ["occluded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAxisRotator, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-axis-rotator',
-                    standalone: true,
-                    template: `
-		<ngt-group
-			#group
-			[matrix]="matrixL()"
-			[matrixAutoUpdate]="false"
-			(pointerdown)="onPointerDown($any($event))"
-			(pointermove)="onPointerMove($any($event))"
-			(pointerup)="onPointerUp($any($event))"
-			(pointerout)="onPointerOut($any($event))"
-		>
-			@if (pivotControls.annotations()) {
-				<ngts-html [options]="{ position: [r(), r(), 0] }">
-					<div
-						#annotation
-						ngtsHTMLContent
-						style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap"
-						[class]="pivotControls.annotationsClass()"
-					></div>
-				</ngts-html>
-			}
-
-			<ngts-line
-				[points]="arc()"
-				[options]="{ lineWidth: pivotControls.lineWidth() * 4, visible: false, userData: pivotControls.userData() }"
-			/>
-
-			<ngts-line
-				[points]="arc()"
-				[options]="{
-					transparent: true,
-					raycast: null,
-					depthTest: pivotControls.depthTest(),
-					lineWidth: pivotControls.lineWidth(),
-					side: DoubleSide,
-					color: hovered() ? pivotControls.hoveredColor() : pivotControls.axisColors()[axis()],
-					opacity: pivotControls.opacity(),
-					polygonOffset: true,
-					polygonOffsetFactor: -10,
-					fog: false,
-				}"
-			/>
-		</ngt-group>
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtsLine, NgtsHTML, NgtsHTMLContent],
-                }]
-        }], ctorParameters: () => [] });
-
-function decomposeIntoBasis(e1, e2, offset) {
-    const i1 = Math.abs(e1.x) >= Math.abs(e1.y) && Math.abs(e1.x) >= Math.abs(e1.z)
-        ? 0
-        : Math.abs(e1.y) >= Math.abs(e1.x) && Math.abs(e1.y) >= Math.abs(e1.z)
-            ? 1
-            : 2;
-    const e2DegrowthOrder = [0, 1, 2].sort((a, b) => Math.abs(e2.getComponent(b)) - Math.abs(e2.getComponent(a)));
-    const i2 = i1 === e2DegrowthOrder[0] ? e2DegrowthOrder[1] : e2DegrowthOrder[0];
-    const a1 = e1.getComponent(i1);
-    const a2 = e1.getComponent(i2);
-    const b1 = e2.getComponent(i1);
-    const b2 = e2.getComponent(i2);
-    const c1 = offset.getComponent(i1);
-    const c2 = offset.getComponent(i2);
-    const y = (c2 - c1 * (a2 / a1)) / (b2 - b1 * (a2 / a1));
-    const x = (c1 - y * b1) / a1;
-    return [x, y];
-}
-const ray = new Ray();
-const intersection = new Vector3();
-const offsetMatrix = new Matrix4();
-class NgtsPlaneSlider {
-    constructor() {
-        this.DoubleSide = DoubleSide;
-        this.dir1 = input.required();
-        this.dir2 = input.required();
-        this.axis = input.required();
-        this.groupRef = viewChild.required('group');
-        this.annotationRef = viewChild('annotation', { read: ElementRef });
-        this.pivotControls = inject(NgtsPivotControls);
-        this.store = injectStore();
-        this.controls = this.store.select('controls');
-        this.hovered = signal(false);
-        this.clickInfo = null;
-        this.offsetX0 = 0;
-        this.offsetY0 = 0;
-        this.matrixL = computed(() => {
-            const dir1N = this.dir1().clone().normalize();
-            const dir2N = this.dir2().clone().normalize();
-            return new Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
-        });
-        this.pos1 = computed(() => (this.pivotControls.fixed() ? 1 / 7 : this.pivotControls.scale() / 7));
-        this.length = computed(() => (this.pivotControls.fixed() ? 0.225 : this.pivotControls.scale() * 0.225));
-        this.color = computed(() => this.hovered() ? this.pivotControls.hoveredColor() : this.pivotControls.axisColors()[this.axis()]);
-        this.points = computed(() => {
-            const length = this.length();
-            return [
-                new Vector3(0, 0, 0),
-                new Vector3(0, length, 0),
-                new Vector3(length, length, 0),
-                new Vector3(length, 0, 0),
-                new Vector3(0, 0, 0),
-            ];
-        });
-        extend({ Group, Mesh, PlaneGeometry, MeshBasicMaterial });
-    }
-    onPointerDown(event) {
-        const [annotation, axis, group, controls] = [
-            this.annotationRef()?.nativeElement,
-            this.axis(),
-            this.groupRef().nativeElement,
-            this.controls(),
-        ];
-        if (annotation) {
-            annotation.innerText = `${this.pivotControls.translation[(axis + 1) % 3].toFixed(2)}, ${this.pivotControls.translation[(axis + 2) % 3].toFixed(2)}`;
-            annotation.style.display = 'block';
-        }
-        event.stopPropagation();
-        const clickPoint = event.point.clone();
-        const origin = new Vector3().setFromMatrixPosition(group.matrixWorld);
-        const e1 = new Vector3().setFromMatrixColumn(group.matrixWorld, 0).normalize();
-        const e2 = new Vector3().setFromMatrixColumn(group.matrixWorld, 1).normalize();
-        const normal = new Vector3().setFromMatrixColumn(group.matrixWorld, 2).normalize();
-        const plane = new Plane().setFromNormalAndCoplanarPoint(normal, origin);
-        this.clickInfo = { clickPoint, e1, e2, plane };
-        this.offsetX0 = this.pivotControls.translation[(axis + 1) % 3];
-        this.offsetY0 = this.pivotControls.translation[(axis + 2) % 3];
-        this.pivotControls.onDragStart({ component: 'Slider', axis, origin, directions: [e1, e2, normal] });
-        if (controls) {
-            controls.enabled = false;
-        }
-        // @ts-expect-error - setPointerCapture is not defined on ThreeEvent
-        event.target.setPointerCapture(event.pointerId);
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        if (!this.hovered())
-            this.hovered.set(true);
-        if (this.clickInfo) {
-            const { clickPoint, e1, e2, plane } = this.clickInfo;
-            const [translationLimits, axis, annotation] = [
-                this.pivotControls.translationLimits(),
-                this.axis(),
-                this.annotationRef()?.nativeElement,
-            ];
-            const [minX, maxX] = translationLimits?.[(axis + 1) % 3] || [undefined, undefined];
-            const [minY, maxY] = translationLimits?.[(axis + 2) % 3] || [undefined, undefined];
-            ray.copy(event.ray);
-            ray.intersectPlane(plane, intersection);
-            ray.direction.negate();
-            ray.intersectPlane(plane, intersection);
-            intersection.sub(clickPoint);
-            let [offsetX, offsetY] = decomposeIntoBasis(e1, e2, intersection);
-            /* let offsetY = (intersection.y - (intersection.x * e1.y) / e1.x) / (e2.y - (e2.x * e1.y) / e1.x)
-      let offsetX = (intersection.x - offsetY * e2.x) / e1.x */
-            if (minX !== undefined) {
-                offsetX = Math.max(offsetX, minX - this.offsetX0);
-            }
-            if (maxX !== undefined) {
-                offsetX = Math.min(offsetX, maxX - this.offsetX0);
-            }
-            if (minY !== undefined) {
-                offsetY = Math.max(offsetY, minY - this.offsetY0);
-            }
-            if (maxY !== undefined) {
-                offsetY = Math.min(offsetY, maxY - this.offsetY0);
-            }
-            this.pivotControls.translation[(axis + 1) % 3] = this.offsetX0 + offsetX;
-            this.pivotControls.translation[(axis + 2) % 3] = this.offsetY0 + offsetY;
-            if (annotation) {
-                annotation.innerText = `${this.pivotControls.translation[(axis + 1) % 3].toFixed(2)}, ${this.pivotControls.translation[(axis + 2) % 3].toFixed(2)}`;
-            }
-            offsetMatrix.makeTranslation(offsetX * e1.x + offsetY * e2.x, offsetX * e1.y + offsetY * e2.y, offsetX * e1.z + offsetY * e2.z);
-            this.pivotControls.onDrag(offsetMatrix);
-        }
-    }
-    onPointerUp(event) {
-        const [annotation, controls] = [this.annotationRef()?.nativeElement, this.controls()];
-        if (annotation) {
-            annotation.style.display = 'none';
-        }
-        event.stopPropagation();
-        this.clickInfo = null;
-        this.pivotControls.onDragEnd();
-        if (controls) {
-            controls.enabled = true;
-        }
-        // @ts-expect-error - releasePointerCapture is not defined on ThreeEvent
-        event.target.releasePointerCapture(event.pointerId);
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hovered.set(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPlaneSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsPlaneSlider, isStandalone: true, selector: "ngts-plane-slider", inputs: { dir1: { classPropertyName: "dir1", publicName: "dir1", isSignal: true, isRequired: true, transformFunction: null }, dir2: { classPropertyName: "dir2", publicName: "dir2", isSignal: true, isRequired: true, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "annotationRef", first: true, predicate: ["annotation"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
-		<ngt-group #group [matrix]="matrixL()" [matrixAutoUpdate]="false">
-			@if (pivotControls.annotations()) {
-				<ngts-html [options]="{ position: [0, 0, 0] }">
-					<div
-						#annotation
-						ngtsHTMLContent
-						style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap"
-						[class]="pivotControls.annotationsClass()"
-					></div>
-				</ngts-html>
-			}
-			<ngt-group [position]="[pos1() * 1.7, pos1() * 1.7, 0]">
-				<ngt-mesh
-					[visible]="true"
-					[scale]="length()"
-					[userData]="pivotControls.userData()"
-					(pointerdown)="onPointerDown($any($event))"
-					(pointermove)="onPointerMove($any($event))"
-					(pointerup)="onPointerUp($any($event))"
-					(pointerout)="onPointerOut($any($event))"
-				>
-					<ngt-plane-geometry />
-					<ngt-mesh-basic-material
-						[transparent]="true"
-						[depthTest]="pivotControls.depthTest()"
-						[color]="color()"
-						[polygonOffset]="true"
-						[polygonOffsetFactor]="-10"
-						[side]="DoubleSide"
-						[fog]="false"
-					/>
-				</ngt-mesh>
-				<ngts-line
-					[points]="points()"
-					[options]="{
-						position: [-length() / 2, -length() / 2, 0],
-						transparent: true,
-						depthTest: pivotControls.depthTest(),
-						lineWidth: pivotControls.lineWidth(),
-						color: color(),
-						opacity: pivotControls.opacity(),
-						polygonOffset: true,
-						polygonOffsetFactor: -10,
-						userData: pivotControls.userData(),
-						fog: false,
-					}"
-				/>
-			</ngt-group>
-		</ngt-group>
-	`, isInline: true, dependencies: [{ kind: "component", type: NgtsHTML, selector: "ngts-html", inputs: ["options"] }, { kind: "component", type: NgtsHTMLContent, selector: "[ngtsHTMLContent]", inputs: ["ngtsHTMLContent"], outputs: ["occluded"] }, { kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPlaneSlider, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-plane-slider',
-                    standalone: true,
-                    template: `
-		<ngt-group #group [matrix]="matrixL()" [matrixAutoUpdate]="false">
-			@if (pivotControls.annotations()) {
-				<ngts-html [options]="{ position: [0, 0, 0] }">
-					<div
-						#annotation
-						ngtsHTMLContent
-						style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap"
-						[class]="pivotControls.annotationsClass()"
-					></div>
-				</ngts-html>
-			}
-			<ngt-group [position]="[pos1() * 1.7, pos1() * 1.7, 0]">
-				<ngt-mesh
-					[visible]="true"
-					[scale]="length()"
-					[userData]="pivotControls.userData()"
-					(pointerdown)="onPointerDown($any($event))"
-					(pointermove)="onPointerMove($any($event))"
-					(pointerup)="onPointerUp($any($event))"
-					(pointerout)="onPointerOut($any($event))"
-				>
-					<ngt-plane-geometry />
-					<ngt-mesh-basic-material
-						[transparent]="true"
-						[depthTest]="pivotControls.depthTest()"
-						[color]="color()"
-						[polygonOffset]="true"
-						[polygonOffsetFactor]="-10"
-						[side]="DoubleSide"
-						[fog]="false"
-					/>
-				</ngt-mesh>
-				<ngts-line
-					[points]="points()"
-					[options]="{
-						position: [-length() / 2, -length() / 2, 0],
-						transparent: true,
-						depthTest: pivotControls.depthTest(),
-						lineWidth: pivotControls.lineWidth(),
-						color: color(),
-						opacity: pivotControls.opacity(),
-						polygonOffset: true,
-						polygonOffsetFactor: -10,
-						userData: pivotControls.userData(),
-						fog: false,
-					}"
-				/>
-			</ngt-group>
-		</ngt-group>
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtsHTML, NgtsHTMLContent, NgtsLine],
-                }]
-        }], ctorParameters: () => [] });
-
-const vec1 = new Vector3();
-const vec2 = new Vector3();
-function calculateOffset(clickPoint, normal, rayStart, rayDir) {
-    const e1 = normal.dot(normal);
-    const e2 = normal.dot(clickPoint) - normal.dot(rayStart);
-    const e3 = normal.dot(rayDir);
-    if (e3 === 0) {
-        return -e2 / e1;
-    }
-    vec1
-        .copy(rayDir)
-        .multiplyScalar(e1 / e3)
-        .sub(normal);
-    vec2
-        .copy(rayDir)
-        .multiplyScalar(e2 / e3)
-        .add(rayStart)
-        .sub(clickPoint);
-    return -vec1.dot(vec2) / vec1.dot(vec1);
-}
-const upV = new Vector3(0, 1, 0);
-const scaleV = new Vector3();
-const scaleMatrix = new Matrix4();
-class NgtsScalingSphere {
-    constructor() {
-        this.direction = input.required();
-        this.axis = input.required();
-        this.groupRef = viewChild.required('group');
-        this.annotationRef = viewChild('annotation', { read: ElementRef });
-        this.meshRef = viewChild.required('mesh');
-        this.pivotControls = inject(NgtsPivotControls);
-        this.store = injectStore();
-        this.controls = this.store.select('controls');
-        this.size = this.store.select('size');
-        this.hovered = signal(false);
-        this.scale0 = 1;
-        this.scaleCurrent = 1;
-        this.clickInfo = null;
-        this.position = computed(() => (this.pivotControls.fixed() ? 1.2 : 1.2 * this.pivotControls.scale()));
-        this.radius = computed(() => this.pivotControls.fixed()
-            ? (this.pivotControls.lineWidth() / this.pivotControls.scale()) * 1.8
-            : this.pivotControls.scale() / 22.5);
-        this.matrixL = computed(() => {
-            const quaternion = new Quaternion().setFromUnitVectors(upV, this.direction().clone().normalize());
-            return new Matrix4().makeRotationFromQuaternion(quaternion);
-        });
-        this.color = computed(() => this.hovered() ? this.pivotControls.hoveredColor() : this.pivotControls.axisColors()[this.axis()]);
-        extend({ Group, Mesh, SphereGeometry, MeshBasicMaterial });
-    }
-    onPointerDown(event) {
-        const [annotation, controls, fixed, scale, direction, axis, size, group] = [
-            this.annotationRef()?.nativeElement,
-            this.controls(),
-            this.pivotControls.fixed(),
-            this.pivotControls.scale(),
-            this.direction(),
-            this.axis(),
-            this.size(),
-            this.groupRef().nativeElement,
-        ];
-        if (annotation) {
-            annotation.innerText = `${scale.toFixed(2)}`;
-            annotation.style.display = 'block';
-        }
-        event.stopPropagation();
-        const rotation = new Matrix4().extractRotation(group.matrixWorld);
-        const clickPoint = event.point.clone();
-        const origin = new Vector3().setFromMatrixPosition(group.matrixWorld);
-        const dir = direction.clone().applyMatrix4(rotation).normalize();
-        const mPLG = group.matrixWorld.clone();
-        const mPLGInv = mPLG.clone().invert();
-        const offsetMultiplier = fixed
-            ? 1 / calculateScaleFactor(group.getWorldPosition(vec1), scale, event.camera, size)
-            : 1;
-        this.clickInfo = { clickPoint, dir, mPLG, mPLGInv, offsetMultiplier };
-        this.pivotControls.onDragStart({ component: 'Sphere', axis, origin, directions: [dir] });
-        if (controls) {
-            controls.enabled = false;
-        }
-        // @ts-expect-error - setPointerCapture is not in the type definition
-        event.target.setPointerCapture(event.pointerId);
-    }
-    onPointerMove(event) {
-        event.stopPropagation();
-        if (!this.hovered())
-            this.hovered.set(true);
-        if (this.clickInfo) {
-            const { clickPoint, dir, mPLG, mPLGInv, offsetMultiplier } = this.clickInfo;
-            const [scaleLimits, axis, position, annotation, fixed, scale, mesh] = [
-                this.pivotControls.scaleLimits(),
-                this.axis(),
-                this.position(),
-                this.annotationRef()?.nativeElement,
-                this.pivotControls.fixed(),
-                this.pivotControls.scale(),
-                this.meshRef().nativeElement,
-            ];
-            const [min, max] = scaleLimits?.[axis] || [1e-5, undefined]; // always limit the minimal value, since setting it very low might break the transform
-            const offsetW = calculateOffset(clickPoint, dir, event.ray.origin, event.ray.direction);
-            const offsetL = offsetW * offsetMultiplier;
-            const offsetH = fixed ? offsetL : offsetL / scale;
-            let upscale = Math.pow(2, offsetH * 0.2);
-            if (event.shiftKey) {
-                upscale = Math.round(upscale * 10) / 10;
-            }
-            upscale = Math.max(upscale, min / this.scale0);
-            if (max !== undefined) {
-                upscale = Math.min(upscale, max / this.scale0);
-            }
-            this.scaleCurrent = this.scale0 * upscale;
-            mesh.position.set(0, position + offsetL, 0);
-            if (annotation) {
-                annotation.innerText = `${this.scaleCurrent.toFixed(2)}`;
-            }
-            scaleV.set(1, 1, 1);
-            scaleV.setComponent(axis, upscale);
-            scaleMatrix.makeScale(scaleV.x, scaleV.y, scaleV.z).premultiply(mPLG).multiply(mPLGInv);
-            this.pivotControls.onDrag(scaleMatrix);
-        }
-    }
-    onPointerUp(event) {
-        const [annotation, controls, position, mesh] = [
-            this.annotationRef()?.nativeElement,
-            this.controls(),
-            this.position(),
-            this.meshRef().nativeElement,
-        ];
-        if (annotation) {
-            annotation.style.display = 'none';
-        }
-        event.stopPropagation();
-        this.scale0 = this.scaleCurrent;
-        this.clickInfo = null;
-        mesh.position.set(0, position, 0);
-        this.pivotControls.onDragEnd();
-        if (controls) {
-            controls.enabled = true;
-        }
-        // @ts-expect-error - releasePointerCapture is not in the type definition
-        event.target.releasePointerCapture(event.pointerId);
-    }
-    onPointerOut(event) {
-        event.stopPropagation();
-        this.hovered.set(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsScalingSphere, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsScalingSphere, isStandalone: true, selector: "ngts-scaling-sphere", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: true, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "annotationRef", first: true, predicate: ["annotation"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
-		<ngt-group #group>
-			<ngt-group
-				[matrix]="matrixL()"
-				[matrixAutoUpdate]="false"
-				(pointerdown)="onPointerDown($any($event))"
-				(pointermove)="onPointerMove($any($event))"
-				(pointerup)="onPointerUp($any($event))"
-				(pointerout)="onPointerOut($any($event))"
-			>
-				@if (pivotControls.annotations()) {
-					<ngts-html [options]="{ position: [0, position() / 2, 0] }">
-						<div
-							#annotation
-							ngtsHTMLContent
-							style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap;"
-							[class]="pivotControls.annotationsClass()"
-						></div>
-					</ngts-html>
-				}
-				<ngt-mesh #mesh [position]="[0, position(), 0]" [renderOrder]="500" [userData]="pivotControls.userData()">
-					<ngt-sphere-geometry *args="[radius(), 12, 12]" />
-					<ngt-mesh-basic-material
-						[transparent]="true"
-						[depthTest]="pivotControls.depthTest()"
-						[color]="color()"
-						[opacity]="pivotControls.opacity()"
-						[polygonOffset]="true"
-						[polygonOffsetFactor]="-10"
-					/>
-				</ngt-mesh>
-			</ngt-group>
-		</ngt-group>
-	`, isInline: true, dependencies: [{ kind: "component", type: NgtsHTML, selector: "ngts-html", inputs: ["options"] }, { kind: "component", type: NgtsHTMLContent, selector: "[ngtsHTMLContent]", inputs: ["ngtsHTMLContent"], outputs: ["occluded"] }, { kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsScalingSphere, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-scaling-sphere',
-                    standalone: true,
-                    template: `
-		<ngt-group #group>
-			<ngt-group
-				[matrix]="matrixL()"
-				[matrixAutoUpdate]="false"
-				(pointerdown)="onPointerDown($any($event))"
-				(pointermove)="onPointerMove($any($event))"
-				(pointerup)="onPointerUp($any($event))"
-				(pointerout)="onPointerOut($any($event))"
-			>
-				@if (pivotControls.annotations()) {
-					<ngts-html [options]="{ position: [0, position() / 2, 0] }">
-						<div
-							#annotation
-							ngtsHTMLContent
-							style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap;"
-							[class]="pivotControls.annotationsClass()"
-						></div>
-					</ngts-html>
-				}
-				<ngt-mesh #mesh [position]="[0, position(), 0]" [renderOrder]="500" [userData]="pivotControls.userData()">
-					<ngt-sphere-geometry *args="[radius(), 12, 12]" />
-					<ngt-mesh-basic-material
-						[transparent]="true"
-						[depthTest]="pivotControls.depthTest()"
-						[color]="color()"
-						[opacity]="pivotControls.opacity()"
-						[polygonOffset]="true"
-						[polygonOffsetFactor]="-10"
-					/>
-				</ngt-mesh>
-			</ngt-group>
-		</ngt-group>
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtsHTML, NgtsHTMLContent, NgtArgs],
-                }]
-        }], ctorParameters: () => [] });
-
-const mL0 = new Matrix4();
-const mW0 = new Matrix4();
-const mP = new Matrix4();
-const mPInv = new Matrix4();
-const mW = new Matrix4();
-const mL = new Matrix4();
-const mL0Inv = new Matrix4();
-const mdL = new Matrix4();
-const mG = new Matrix4();
-const bb = new Box3();
-const bbObj = new Box3();
-const vCenter = new Vector3();
-const vSize = new Vector3();
-const vAnchorOffset = new Vector3();
-const vPosition = new Vector3();
-const vScale = new Vector3();
-const xDir = new Vector3(1, 0, 0);
-const yDir = new Vector3(0, 1, 0);
-const zDir = new Vector3(0, 0, 1);
-const defaultOptions$1 = {
-    enabled: true,
-    autoTransform: true,
-    disableAxes: false,
-    disableSliders: false,
-    disableRotations: false,
-    disableScaling: false,
-    activeAxes: [true, true, true],
-    offset: [0, 0, 0],
-    rotation: [0, 0, 0],
-    scale: 1,
-    lineWidth: 4,
-    fixed: false,
-    depthTest: true,
-    axisColors: ['#ff2060', '#20df80', '#2080ff'],
-    hoveredColor: '#ffff40',
-    annotations: false,
-    opacity: 1,
-    visible: true,
-};
-class NgtsPivotControls {
-    constructor() {
-        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
-        this.parameters = omit(this.options, [
-            'enabled',
-            'matrix',
-            'autoTransform',
-            'anchor',
-            'disableAxes',
-            'disableSliders',
-            'disableRotations',
-            'disableScaling',
-            'activeAxes',
-            'offset',
-            'rotation',
-            'scale',
-            'lineWidth',
-            'fixed',
-            'translationLimits',
-            'rotationLimits',
-            'scaleLimits',
-            'depthTest',
-            'axisColors',
-            'hoveredColor',
-            'annotations',
-            'annotationsClass',
-            'opacity',
-            'visible',
-            'userData',
-        ]);
-        this.dragStarted = output();
-        this.dragEnded = output();
-        this.dragged = output();
-        this.matrix = pick(this.options, 'matrix');
-        this.annotations = pick(this.options, 'annotations');
-        this.annotationsClass = pick(this.options, 'annotationsClass');
-        this.translationLimits = pick(this.options, 'translationLimits');
-        this.rotationLimits = pick(this.options, 'rotationLimits');
-        this.scaleLimits = pick(this.options, 'scaleLimits');
-        this.autoTransform = pick(this.options, 'autoTransform');
-        this.fixed = pick(this.options, 'fixed');
-        this.hoveredColor = pick(this.options, 'hoveredColor');
-        this.axisColors = pick(this.options, 'axisColors');
-        this.lineWidth = pick(this.options, 'lineWidth');
-        this.scale = pick(this.options, 'scale');
-        this.userData = pick(this.options, 'userData');
-        this.opacity = pick(this.options, 'opacity');
-        this.depthTest = pick(this.options, 'depthTest');
-        this.offset = pick(this.options, 'offset');
-        this.rotation = pick(this.options, 'rotation');
-        this.visible = pick(this.options, 'visible');
-        this.enabled = pick(this.options, 'enabled');
-        this.disableAxes = pick(this.options, 'disableAxes');
-        this.disableSliders = pick(this.options, 'disableSliders');
-        this.disableRotations = pick(this.options, 'disableRotations');
-        this.disableScaling = pick(this.options, 'disableScaling');
-        this.activeAxes = pick(this.options, 'activeAxes');
-        this.xDir = xDir;
-        this.yDir = yDir;
-        this.zDir = zDir;
-        this.parentRef = viewChild.required('parent');
-        this.groupRef = viewChild.required('group');
-        this.gizmoRef = viewChild.required('gizmo');
-        this.childrenRef = viewChild.required('children');
-        this.store = injectStore();
-        this.invalidate = this.store.select('invalidate');
-        this.translation = [0, 0, 0];
-        this.anchor = pick(this.options, 'anchor');
-        this.cameraScale = new Vector3(1, 1, 1);
-        this.gizmoScale = new Vector3(1, 1, 1);
-        extend({ Group });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const anchor = this.anchor();
-                if (!anchor)
-                    return;
-                const children = this.childrenRef().nativeElement;
-                const localState = getLocalState(children);
-                if (!localState)
-                    return;
-                const [gizmo, offset, invalidate] = [
-                    this.gizmoRef().nativeElement,
-                    this.offset(),
-                    this.invalidate(),
-                    this.options(),
-                    localState.objects(),
-                ];
-                children.updateWorldMatrix(true, true);
-                mPInv.copy(children.matrixWorld).invert();
-                bb.makeEmpty();
-                children.traverse((obj) => {
-                    if (!obj.geometry)
-                        return;
-                    if (!obj.geometry.boundingBox)
-                        obj.geometry.computeBoundingBox();
-                    mL.copy(obj.matrixWorld).premultiply(mPInv);
-                    const boundingBox = obj.geometry.boundingBox;
-                    if (boundingBox) {
-                        bbObj.copy(boundingBox);
-                        bbObj.applyMatrix4(mL);
-                        bb.union(bbObj);
-                    }
-                });
-                vCenter.copy(bb.max).add(bb.min).multiplyScalar(0.5);
-                vSize.copy(bb.max).sub(bb.min).multiplyScalar(0.5);
-                vAnchorOffset
-                    .copy(vSize)
-                    .multiply(new Vector3(...anchor))
-                    .add(vCenter);
-                vPosition.set(...offset).add(vAnchorOffset);
-                gizmo.position.copy(vPosition);
-                invalidate();
-            });
-        });
-        const vec = new Vector3();
-        injectBeforeRender(({ camera, size, invalidate }) => {
-            const [{ fixed, scale, matrix }, gizmo, group] = [
-                this.options(),
-                this.gizmoRef().nativeElement,
-                this.groupRef().nativeElement,
-            ];
-            if (fixed) {
-                const sf = calculateScaleFactor(gizmo.getWorldPosition(vec), scale, camera, size);
-                this.cameraScale.setScalar(sf);
-            }
-            if (matrix && matrix instanceof Matrix4) {
-                group.matrix = matrix;
-            }
-            // Update gizmo scale in accordance with matrix changes
-            // Without this, there might be noticeable turbulence if scaling happens fast enough
-            gizmo.updateWorldMatrix(true, true);
-            mG.makeRotationFromEuler(gizmo.rotation).setPosition(gizmo.position).premultiply(group.matrixWorld);
-            this.gizmoScale.setFromMatrixScale(mG);
-            vScale.copy(this.cameraScale).divide(this.gizmoScale);
-            if (Math.abs(gizmo.scale.x - vScale.x) > 1e-4 ||
-                Math.abs(gizmo.scale.y - vScale.y) > 1e-4 ||
-                Math.abs(gizmo.scale.z - vScale.z) > 1e-4) {
-                gizmo.scale.copy(vScale);
-                invalidate();
-            }
-        });
-    }
-    onDragStart(parameters) {
-        const group = this.groupRef().nativeElement;
-        mL0.copy(group.matrix);
-        mW0.copy(group.matrixWorld);
-        this.dragStarted.emit(parameters);
-        this.store.snapshot.invalidate();
-    }
-    onDrag(mdW) {
-        const [parent, group, autoTransform] = [
-            this.parentRef().nativeElement,
-            this.groupRef().nativeElement,
-            this.autoTransform(),
-        ];
-        mP.copy(parent.matrixWorld);
-        mPInv.copy(mP).invert();
-        // After applying the delta
-        mW.copy(mW0).premultiply(mdW);
-        mL.copy(mW).premultiply(mPInv);
-        mL0Inv.copy(mL0).invert();
-        mdL.copy(mL).multiply(mL0Inv);
-        if (autoTransform) {
-            group.matrix.copy(mL);
-        }
-        this.dragged.emit({ l: mL, deltaL: mdL, w: mW, deltaW: mdW });
-        this.store.snapshot.invalidate();
-    }
-    onDragEnd() {
-        this.dragEnded.emit();
-        this.store.snapshot.invalidate();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPivotControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsPivotControls, isStandalone: true, selector: "ngts-pivot-controls", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStarted: "dragStarted", dragEnded: "dragEnded", dragged: "dragged" }, viewQueries: [{ propertyName: "parentRef", first: true, predicate: ["parent"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "gizmoRef", first: true, predicate: ["gizmo"], descendants: true, isSignal: true }, { propertyName: "childrenRef", first: true, predicate: ["children"], descendants: true, isSignal: true }], ngImport: i0, template: `
-		<ngt-group #parent>
-			<ngt-group #group [matrix]="matrix()" [matrixAutoUpdate]="false" [parameters]="parameters()">
-				<ngt-group #gizmo [visible]="visible()" [position]="offset()" [rotation]="rotation()">
-					@if (enabled()) {
-						@if (!disableAxes() && activeAxes()[0]) {
-							<ngts-axis-arrow [axis]="0" [direction]="xDir" />
-						}
-						@if (!disableAxes() && activeAxes()[1]) {
-							<ngts-axis-arrow [axis]="1" [direction]="yDir" />
-						}
-						@if (!disableAxes() && activeAxes()[2]) {
-							<ngts-axis-arrow [axis]="2" [direction]="zDir" />
-						}
-
-						@if (!disableSliders() && activeAxes()[0] && activeAxes()[1]) {
-							<ngts-plane-slider [axis]="2" [dir1]="xDir" [dir2]="yDir" />
-						}
-						@if (!disableSliders() && activeAxes()[0] && activeAxes()[2]) {
-							<ngts-plane-slider [axis]="1" [dir1]="zDir" [dir2]="xDir" />
-						}
-						@if (!disableSliders() && activeAxes()[2] && activeAxes()[1]) {
-							<ngts-plane-slider [axis]="0" [dir1]="yDir" [dir2]="zDir" />
-						}
-
-						@if (!disableRotations() && activeAxes()[0] && activeAxes()[1]) {
-							<ngts-axis-rotator [axis]="2" [dir1]="xDir" [dir2]="yDir" />
-						}
-						@if (!disableRotations() && activeAxes()[0] && activeAxes()[2]) {
-							<ngts-axis-rotator [axis]="1" [dir1]="zDir" [dir2]="xDir" />
-						}
-						@if (!disableRotations() && activeAxes()[2] && activeAxes()[1]) {
-							<ngts-axis-rotator [axis]="0" [dir1]="yDir" [dir2]="zDir" />
-						}
-
-						@if (!disableScaling() && activeAxes()[0]) {
-							<ngts-scaling-sphere [axis]="0" [direction]="xDir" />
-						}
-						@if (!disableScaling() && activeAxes()[1]) {
-							<ngts-scaling-sphere [axis]="1" [direction]="yDir" />
-						}
-						@if (!disableScaling() && activeAxes()[2]) {
-							<ngts-scaling-sphere [axis]="2" [direction]="zDir" />
-						}
-					}
-				</ngt-group>
-				<ngt-group #children>
-					<ng-content />
-				</ngt-group>
-			</ngt-group>
-		</ngt-group>
-	`, isInline: true, dependencies: [{ kind: "component", type: NgtsAxisArrow, selector: "ngts-axis-arrow", inputs: ["direction", "axis"] }, { kind: "component", type: NgtsPlaneSlider, selector: "ngts-plane-slider", inputs: ["dir1", "dir2", "axis"] }, { kind: "component", type: NgtsAxisRotator, selector: "ngts-axis-rotator", inputs: ["dir1", "dir2", "axis"] }, { kind: "component", type: NgtsScalingSphere, selector: "ngts-scaling-sphere", inputs: ["direction", "axis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPivotControls, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-pivot-controls',
-                    standalone: true,
-                    template: `
-		<ngt-group #parent>
-			<ngt-group #group [matrix]="matrix()" [matrixAutoUpdate]="false" [parameters]="parameters()">
-				<ngt-group #gizmo [visible]="visible()" [position]="offset()" [rotation]="rotation()">
-					@if (enabled()) {
-						@if (!disableAxes() && activeAxes()[0]) {
-							<ngts-axis-arrow [axis]="0" [direction]="xDir" />
-						}
-						@if (!disableAxes() && activeAxes()[1]) {
-							<ngts-axis-arrow [axis]="1" [direction]="yDir" />
-						}
-						@if (!disableAxes() && activeAxes()[2]) {
-							<ngts-axis-arrow [axis]="2" [direction]="zDir" />
-						}
-
-						@if (!disableSliders() && activeAxes()[0] && activeAxes()[1]) {
-							<ngts-plane-slider [axis]="2" [dir1]="xDir" [dir2]="yDir" />
-						}
-						@if (!disableSliders() && activeAxes()[0] && activeAxes()[2]) {
-							<ngts-plane-slider [axis]="1" [dir1]="zDir" [dir2]="xDir" />
-						}
-						@if (!disableSliders() && activeAxes()[2] && activeAxes()[1]) {
-							<ngts-plane-slider [axis]="0" [dir1]="yDir" [dir2]="zDir" />
-						}
-
-						@if (!disableRotations() && activeAxes()[0] && activeAxes()[1]) {
-							<ngts-axis-rotator [axis]="2" [dir1]="xDir" [dir2]="yDir" />
-						}
-						@if (!disableRotations() && activeAxes()[0] && activeAxes()[2]) {
-							<ngts-axis-rotator [axis]="1" [dir1]="zDir" [dir2]="xDir" />
-						}
-						@if (!disableRotations() && activeAxes()[2] && activeAxes()[1]) {
-							<ngts-axis-rotator [axis]="0" [dir1]="yDir" [dir2]="zDir" />
-						}
-
-						@if (!disableScaling() && activeAxes()[0]) {
-							<ngts-scaling-sphere [axis]="0" [direction]="xDir" />
-						}
-						@if (!disableScaling() && activeAxes()[1]) {
-							<ngts-scaling-sphere [axis]="1" [direction]="yDir" />
-						}
-						@if (!disableScaling() && activeAxes()[2]) {
-							<ngts-scaling-sphere [axis]="2" [direction]="zDir" />
-						}
-					}
-				</ngt-group>
-				<ngt-group #children>
-					<ng-content />
-				</ngt-group>
-			</ngt-group>
-		</ngt-group>
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtsAxisArrow, NgtsPlaneSlider, NgtsAxisRotator, NgtsScalingSphere],
-                }]
-        }], ctorParameters: () => [] });
-
 const defaultOptions = {
     eps: 0.00001,
     horizontal: false,
@@ -1847,6 +519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * @deprecated Use `NgtsPivotControls` from `angular-three-soba/gizmos` instead.
+ */
+const NgtsPivotControls = NgtsPivotControls$1;
+
 /**
  * Generated bundle index. Do not edit.
  */