angular-three-soba 2.0.0-beta.8 → 2.0.0

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

@@ -1,83 +1,182 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, computed, effect, Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output } from '@angular/core';
-import { signalStore, injectNgtRef, injectNgtStore, injectBeforeRender, NgtArgs } from 'angular-three';
+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 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 { 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';
 
-class NgtsOrbitControls {
-    set _camera(camera) {
-        this.inputs.set({ camera });
-    }
-    set _domElement(domElement) {
-        this.inputs.set({ domElement });
-    }
-    set _makeDefault(makeDefault) {
-        this.inputs.set({ makeDefault });
-    }
-    set _regress(regress) {
-        this.inputs.set({ regress });
-    }
-    set _target(target) {
-        this.inputs.set({ target });
-    }
-    set _enableDamping(enableDamping) {
-        this.inputs.set({ enableDamping });
-    }
-    set _keyEvents(keyEvents) {
-        this.inputs.set({ keyEvents });
+const defaultOptions$3 = {
+    makeDefault: false,
+    events: false,
+    regress: false,
+};
+class NgtsCameraControls {
+    constructor() {
+        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
+        this.parameters = omit(this.options, ['makeDefault', 'camera', 'regress', 'domElement']);
+        this.changed = output();
+        this.started = output();
+        this.ended = output();
+        this.store = injectStore();
+        this.invalidate = this.store.select('invalidate');
+        this.performanceRegress = this.store.select('performance', 'regress');
+        this.defaultCamera = this.store.select('camera');
+        this.glDomElement = this.store.select('gl', 'domElement');
+        this.eventsElement = this.store.select('events', 'connected');
+        this.camera = pick(this.options, 'camera');
+        this.regress = pick(this.options, 'regress');
+        this.domElement = pick(this.options, 'domElement');
+        this.makeDefault = pick(this.options, 'makeDefault');
+        this.controls = computed(() => {
+            const [camera, defaultCamera] = [this.camera(), this.defaultCamera()];
+            return new CameraControls(camera || defaultCamera);
+        });
+        // to allow for tree shaking, we only import the subset of THREE that is used by camera-controls
+        // see https://github.com/yomotsu/camera-controls#important
+        CameraControls.install({
+            THREE: {
+                Box3,
+                MathUtils: { clamp: MathUtils.clamp },
+                Matrix4,
+                Quaternion,
+                Raycaster,
+                Sphere,
+                Spherical,
+                Vector2,
+                Vector3,
+                Vector4,
+            },
+        });
+        extend({ CameraControls });
+        injectBeforeRender(({ delta }) => {
+            const controls = this.controls();
+            if (controls?.enabled) {
+                controls.update(delta);
+            }
+        }, { priority: -1 });
+        effect((onCleanup) => {
+            const [domElement, eventsElement, glDomElement, controls] = [
+                this.domElement(),
+                this.eventsElement(),
+                this.glDomElement(),
+                this.controls(),
+            ];
+            controls.connect(domElement || eventsElement || glDomElement);
+            onCleanup(() => controls.disconnect());
+        });
+        effect((onCleanup) => {
+            const [controls, regress, performanceRegress, invalidate] = [
+                this.controls(),
+                this.regress(),
+                this.performanceRegress(),
+                this.invalidate(),
+            ];
+            const callback = (e) => {
+                invalidate();
+                if (regress)
+                    performanceRegress();
+                this.changed.emit(e);
+            };
+            const startCallback = this.started.emit.bind(this.started);
+            const endCallback = this.ended.emit.bind(this.ended);
+            controls.addEventListener('update', callback);
+            controls.addEventListener('controlstart', startCallback);
+            controls.addEventListener('controlend', endCallback);
+            controls.addEventListener('control', callback);
+            controls.addEventListener('transitionstart', callback);
+            controls.addEventListener('wake', callback);
+            onCleanup(() => {
+                controls.removeEventListener('update', callback);
+                controls.removeEventListener('controlstart', startCallback);
+                controls.removeEventListener('controlend', endCallback);
+                controls.removeEventListener('control', callback);
+                controls.removeEventListener('transitionstart', callback);
+                controls.removeEventListener('wake', callback);
+            });
+        });
+        effect((onCleanup) => {
+            const [controls, makeDefault] = [this.controls(), this.makeDefault()];
+            if (makeDefault) {
+                const oldControls = this.store.snapshot.controls;
+                this.store.update({ controls: controls });
+                onCleanup(() => void this.store.update({ controls: oldControls }));
+            }
+        });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCameraControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsCameraControls, isStandalone: true, selector: "ngts-camera-controls", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", started: "started", ended: "ended" }, ngImport: i0, template: `
+		<ngt-primitive *args="[controls()]" [parameters]="parameters()">
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ 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: NgtsCameraControls, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-camera-controls',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[controls()]" [parameters]="parameters()">
+			<ng-content />
+		</ngt-primitive>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [NgtArgs],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+
+const defaultOptions$2 = {
+    enableDamping: true,
+    regress: false,
+    makeDefault: false,
+    keyEvents: false,
+};
+class NgtsOrbitControls {
     constructor() {
-        this.inputs = signalStore({
-            enableDamping: true,
-            regress: false,
-            makeDefault: false,
-            keyEvents: false,
-        });
-        this.controlsRef = injectNgtRef();
-        this.change = new EventEmitter();
-        this.start = new EventEmitter();
-        this.end = new EventEmitter();
-        this.store = injectNgtStore();
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.parameters = omit(this.options, ['makeDefault', 'camera', 'regress', 'domElement', 'keyEvents', 'enableDamping']);
+        this.changed = output();
+        this.started = output();
+        this.ended = output();
+        this.store = injectStore();
         this.invalidate = this.store.select('invalidate');
         this.performanceRegress = this.store.select('performance', 'regress');
         this.defaultCamera = this.store.select('camera');
         this.glDomElement = this.store.select('gl', 'domElement');
-        this.regress = this.inputs.select('regress');
-        this.camera = this.inputs.select('camera');
-        this.domElement = this.inputs.select('domElement');
-        this.keyEvents = this.inputs.select('keyEvents');
-        this.makeDefault = this.inputs.select('makeDefault');
-        this.args = computed(() => [this.controlsRef.nativeElement]);
-        this.enableDamping = this.inputs.select('enableDamping');
+        this.camera = pick(this.options, 'camera');
+        this.regress = pick(this.options, 'regress');
+        this.keyEvents = pick(this.options, 'keyEvents');
+        this.domElement = pick(this.options, 'domElement');
+        this.makeDefault = pick(this.options, 'makeDefault');
+        this.controls = computed(() => {
+            const [camera, defaultCamera] = [this.camera(), this.defaultCamera()];
+            const controlsCamera = camera || defaultCamera;
+            return new OrbitControls(controlsCamera);
+        });
+        this.enableDamping = pick(this.options, 'enableDamping');
         injectBeforeRender(() => {
-            const controls = this.controlsRef.nativeElement;
-            if (controls && controls.enabled) {
+            const controls = this.controls();
+            if (controls?.enabled) {
                 controls.update();
             }
         }, { priority: -1 });
-        this.setControls();
         this.connectElement();
         this.makeControlsDefault();
         this.setEvents();
     }
-    setControls() {
-        effect(() => {
-            const [camera, defaultCamera, controls] = [
-                this.camera(),
-                this.defaultCamera(),
-                this.controlsRef.nativeElement,
-            ];
-            const controlsCamera = camera || defaultCamera;
-            if (!controls || controls.object !== controlsCamera) {
-                this.controlsRef.nativeElement = new OrbitControls(controlsCamera);
-            }
-        });
-    }
     connectElement() {
         effect((onCleanup) => {
             const [keyEvents, domElement, controls] = [
                 this.keyEvents(),
                 this.domElement() || this.store.get('events', 'connected') || this.glDomElement(),
-                this.controlsRef.nativeElement,
+                this.controls(),
                 this.invalidate(),
                 this.regress(),
             ];
@@ -94,20 +193,20 @@ class NgtsOrbitControls {
     }
     makeControlsDefault() {
         effect((onCleanup) => {
-            const [controls, makeDefault] = [this.controlsRef.nativeElement, this.makeDefault()];
+            const [controls, makeDefault] = [this.controls(), this.makeDefault()];
             if (!controls)
                 return;
             if (makeDefault) {
                 const oldControls = this.store.get('controls');
-                this.store.set({ controls });
-                onCleanup(() => void this.store.set({ controls: oldControls }));
+                this.store.update({ controls });
+                onCleanup(() => void this.store.update({ controls: oldControls }));
             }
         });
     }
     setEvents() {
         effect((onCleanup) => {
             const [controls, invalidate, performanceRegress, regress] = [
-                this.controlsRef.nativeElement,
+                this.controls(),
                 this.invalidate(),
                 this.performanceRegress(),
                 this.regress(),
@@ -118,71 +217,1639 @@ class NgtsOrbitControls {
                 invalidate();
                 if (regress)
                     performanceRegress();
-                if (this.change.observed)
-                    this.change.emit(e);
+                this.changed.emit(e);
             };
-            const startCallback = this.start.observed ? this.start.emit.bind(this.start) : null;
-            const endCallback = this.end.observed ? this.end.emit.bind(this.end) : null;
+            const startCallback = this.started.emit.bind(this.started);
+            const endCallback = this.ended.emit.bind(this.ended);
+            // @ts-expect-error - type error from three-stdlib
             controls.addEventListener('change', changeCallback);
-            if (startCallback)
-                controls.addEventListener('start', startCallback);
-            if (endCallback)
-                controls.addEventListener('end', endCallback);
+            // @ts-expect-error - type error from three-stdlib
+            controls.addEventListener('start', startCallback);
+            // @ts-expect-error - type error from three-stdlib
+            controls.addEventListener('end', endCallback);
             onCleanup(() => {
+                // @ts-expect-error - type error from three-stdlib
                 controls.removeEventListener('change', changeCallback);
-                if (startCallback)
-                    controls.removeEventListener('start', startCallback);
-                if (endCallback)
-                    controls.removeEventListener('end', endCallback);
+                // @ts-expect-error - type error from three-stdlib
+                controls.removeEventListener('start', startCallback);
+                // @ts-expect-error - type error from three-stdlib
+                controls.removeEventListener('end', endCallback);
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsOrbitControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsOrbitControls, isStandalone: true, selector: "ngts-orbit-controls", inputs: { controlsRef: "controlsRef", _camera: ["camera", "_camera"], _domElement: ["domElement", "_domElement"], _makeDefault: ["makeDefault", "_makeDefault"], _regress: ["regress", "_regress"], _target: ["target", "_target"], _enableDamping: ["enableDamping", "_enableDamping"], _keyEvents: ["keyEvents", "_keyEvents"] }, outputs: { change: "change", start: "start", end: "end" }, ngImport: i0, template: ` <ngt-primitive *args="args()" ngtCompound [enableDamping]="enableDamping()" /> `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsOrbitControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsOrbitControls, isStandalone: true, selector: "ngts-orbit-controls", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", started: "started", ended: "ended" }, ngImport: i0, template: `
+		<ngt-primitive *args="[controls()]" [parameters]="parameters()" [enableDamping]="enableDamping()">
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsOrbitControls, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsOrbitControls, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-orbit-controls',
                     standalone: true,
-                    template: ` <ngt-primitive *args="args()" ngtCompound [enableDamping]="enableDamping()" /> `,
+                    template: `
+		<ngt-primitive *args="[controls()]" [parameters]="parameters()" [enableDamping]="enableDamping()">
+			<ng-content />
+		</ngt-primitive>
+	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { controlsRef: [{
-                type: Input
-            }], _camera: [{
-                type: Input,
-                args: [{ alias: 'camera' }]
-            }], _domElement: [{
-                type: Input,
-                args: [{ alias: 'domElement' }]
-            }], _makeDefault: [{
-                type: Input,
-                args: [{ alias: 'makeDefault' }]
-            }], _regress: [{
-                type: Input,
-                args: [{ alias: 'regress' }]
-            }], _target: [{
-                type: Input,
-                args: [{ alias: 'target' }]
-            }], _enableDamping: [{
-                type: Input,
-                args: [{ alias: 'enableDamping' }]
-            }], _keyEvents: [{
-                type: Input,
-                args: [{ alias: 'keyEvents' }]
-            }], change: [{
-                type: Output
-            }], start: [{
-                type: Output
-            }], end: [{
-                type: Output
-            }] } });
+        }], 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,
+    infinite: false,
+    pages: 1,
+    distance: 1,
+    damping: 0.25,
+    maxSpeed: Infinity,
+    prepend: false,
+    enabled: true,
+    style: {},
+};
+class NgtsScrollControls {
+    constructor() {
+        this.progress = model(0);
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.document = inject(DOCUMENT);
+        this.store = injectStore();
+        this.gl = this.store.select('gl');
+        this.events = this.store.select('events');
+        this.invalidate = this.store.select('invalidate');
+        this.size = this.store.select('size');
+        this.domElement = pick(this.gl, 'domElement');
+        this.target = pick(this.domElement, 'parentNode');
+        this._el = this.document.createElement('div');
+        this._fill = this.document.createElement('div');
+        this._fixed = this.document.createElement('div');
+        this.style = pick(this.options, 'style');
+        this.prepend = pick(this.options, 'prepend');
+        this.enabled = pick(this.options, 'enabled');
+        this.infinite = pick(this.options, 'infinite');
+        this.maxSpeed = pick(this.options, 'maxSpeed');
+        this.eps = pick(this.options, 'eps');
+        this.horizontal = pick(this.options, 'horizontal');
+        this.pages = pick(this.options, 'pages');
+        this.distance = pick(this.options, 'distance');
+        this.damping = pick(this.options, 'damping');
+        this.scroll = 0;
+        this.offset = 0;
+        this.delta = 0;
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const target = this.target();
+                if (!target)
+                    return;
+                const parent = target;
+                const [pages, distance, horizontal, el, fill, fixed, style, prepend, domElement, events] = [
+                    this.pages(),
+                    this.distance(),
+                    this.horizontal(),
+                    this.el,
+                    this.fill,
+                    this.fixed,
+                    untracked(this.style),
+                    untracked(this.prepend),
+                    untracked(this.domElement),
+                    untracked(this.events),
+                ];
+                el.style.position = 'absolute';
+                el.style.width = '100%';
+                el.style.height = '100%';
+                el.style[horizontal ? 'overflowX' : 'overflowY'] = 'auto';
+                el.style[horizontal ? 'overflowY' : 'overflowX'] = 'hidden';
+                el.style.top = '0px';
+                el.style.left = '0px';
+                for (const key in style) {
+                    el.style[key] = style[key];
+                }
+                fixed.style.position = 'sticky';
+                fixed.style.top = '0px';
+                fixed.style.left = '0px';
+                fixed.style.width = '100%';
+                fixed.style.height = '100%';
+                fixed.style.overflow = 'hidden';
+                el.appendChild(fixed);
+                fill.style.height = horizontal ? '100%' : `${pages * distance * 100}%`;
+                fill.style.width = horizontal ? `${pages * distance * 100}%` : '100%';
+                fill.style.pointerEvents = 'none';
+                el.appendChild(fill);
+                if (prepend)
+                    parent.prepend(el);
+                else
+                    parent.appendChild(el);
+                // Init scroll one pixel in to allow upward/leftward scroll
+                el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
+                const oldTarget = (events.connected || domElement);
+                requestAnimationFrame(() => events.connect?.(el));
+                const oldCompute = events.compute?.bind(events);
+                this.store.snapshot.setEvents({
+                    compute(event, store) {
+                        const state = store.snapshot;
+                        // we are using boundingClientRect because we could not rely on target.offsetTop as canvas could be positioned anywhere in dom
+                        const { left, top } = parent.getBoundingClientRect();
+                        const offsetX = event.clientX - left;
+                        const offsetY = event.clientY - top;
+                        state.pointer.set((offsetX / state.size.width) * 2 - 1, -(offsetY / state.size.height) * 2 + 1);
+                        state.raycaster.setFromCamera(state.pointer, state.camera);
+                    },
+                });
+                return () => {
+                    parent.removeChild(el);
+                    this.store.snapshot.setEvents({ compute: oldCompute });
+                    events.connect?.(oldTarget);
+                };
+            });
+            autoEffect(() => {
+                const [el, events, size, infinite, invalidate, horizontal, enabled] = [
+                    this.el,
+                    this.events(),
+                    this.size(),
+                    this.infinite(),
+                    this.invalidate(),
+                    this.horizontal(),
+                    this.enabled(),
+                ];
+                if (events.connected !== el)
+                    return;
+                const containerLength = size[horizontal ? 'width' : 'height'];
+                const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight'];
+                const scrollThreshold = scrollLength - containerLength;
+                let current = 0;
+                let disableScroll = true;
+                let firstRun = true;
+                const onScroll = () => {
+                    // Prevent first scroll because it is indirectly caused by the one pixel offset
+                    if (!enabled || firstRun)
+                        return;
+                    invalidate();
+                    current = el[horizontal ? 'scrollLeft' : 'scrollTop'];
+                    this.scroll = current / scrollThreshold;
+                    if (infinite) {
+                        if (!disableScroll) {
+                            if (current >= scrollThreshold) {
+                                const damp = 1 - this.offset;
+                                el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
+                                this.scroll = this.offset = -damp;
+                                disableScroll = true;
+                            }
+                            else if (current <= 0) {
+                                const damp = 1 + this.offset;
+                                el[horizontal ? 'scrollLeft' : 'scrollTop'] = scrollLength;
+                                this.scroll = this.offset = damp;
+                                disableScroll = true;
+                            }
+                        }
+                        if (disableScroll)
+                            setTimeout(() => (disableScroll = false), 40);
+                    }
+                    untracked(() => {
+                        this.progress.set(this.scroll);
+                    });
+                };
+                el.addEventListener('scroll', onScroll, { passive: true });
+                requestAnimationFrame(() => (firstRun = false));
+                const onWheel = (e) => (el[horizontal ? 'scrollLeft' : 'scrollTop'] += e.deltaY / 2);
+                if (horizontal)
+                    el.addEventListener('wheel', onWheel, { passive: true });
+                return () => {
+                    el.removeEventListener('scroll', onScroll);
+                    if (horizontal)
+                        el.removeEventListener('wheel', onWheel);
+                };
+            });
+        });
+        let last = 0;
+        injectBeforeRender(({ delta }) => {
+            last = this.offset;
+            easing.damp(this, 'offset', this.scroll, this.damping(), delta, this.maxSpeed(), undefined, this.eps());
+            easing.damp(this, 'delta', Math.abs(last - this.offset), this.damping(), delta, this.maxSpeed(), undefined, this.eps());
+            if (this.delta > this.eps())
+                this.invalidate()();
+        });
+    }
+    get el() {
+        return this._el;
+    }
+    get fill() {
+        return this._fill;
+    }
+    get fixed() {
+        return this._fixed;
+    }
+    range(from, distance, margin = 0) {
+        const start = from - margin;
+        const end = start + distance + margin * 2;
+        return this.offset < start ? 0 : this.offset > end ? 1 : (this.offset - start) / (end - start);
+    }
+    curve(from, distance, margin = 0) {
+        return Math.sin(this.range(from, distance, margin) * Math.PI);
+    }
+    visible(from, distance, margin = 0) {
+        const start = from - margin;
+        const end = start + distance + margin * 2;
+        return this.offset >= start && this.offset <= end;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsScrollControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsScrollControls, isStandalone: true, selector: "ngts-scroll-controls", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { progress: "progressChange" }, ngImport: i0, template: `
+		<ng-content />
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsScrollControls, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-scroll-controls',
+                    standalone: true,
+                    template: `
+		<ng-content />
+	`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+class NgtsScrollCanvas {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.scrollControls = inject(NgtsScrollControls);
+        this.store = injectStore();
+        this.viewport = this.store.select('viewport');
+        injectBeforeRender(() => {
+            const group = this.host.nativeElement;
+            group.position.x = this.scrollControls.horizontal()
+                ? -this.viewport().width * (this.scrollControls.pages() - 1) * this.scrollControls.offset
+                : 0;
+            group.position.y = this.scrollControls.horizontal()
+                ? 0
+                : this.viewport().height * (this.scrollControls.pages() - 1) * this.scrollControls.offset;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsScrollCanvas, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: NgtsScrollCanvas, isStandalone: true, selector: "ngt-group[ngtsScrollCanvas]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsScrollCanvas, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ngt-group[ngtsScrollCanvas]', standalone: true }]
+        }], ctorParameters: () => [] });
+class NgtsScrollHtml extends NgtHTML {
+    constructor() {
+        super();
+        this.scrollControls = inject(NgtsScrollControls);
+        this.size = this.store.select('size');
+        injectBeforeRender(() => {
+            if (this.scrollControls.delta > this.scrollControls.eps()) {
+                this.host.nativeElement.style.transform = `translate3d(${this.scrollControls.horizontal()
+                    ? -this.size().width * (this.scrollControls.pages() - 1) * this.scrollControls.offset
+                    : 0}px,${this.scrollControls.horizontal() ? 0 : this.size().height * (this.scrollControls.pages() - 1) * -this.scrollControls.offset}px,0)`;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsScrollHtml, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: NgtsScrollHtml, isStandalone: true, selector: "div[ngtsScrollHTML]", host: { styleAttribute: "position: absolute; top: 0; left: 0; will-change: transform;" }, providers: [provideHTMLDomElement([NgtsScrollControls], (scrollControls) => scrollControls.fixed)], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsScrollHtml, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[ngtsScrollHTML]',
+                    standalone: true,
+                    host: { style: 'position: absolute; top: 0; left: 0; will-change: transform;' },
+                    providers: [provideHTMLDomElement([NgtsScrollControls], (scrollControls) => scrollControls.fixed)],
+                }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsOrbitControls };
+export { NgtsCameraControls, NgtsOrbitControls, NgtsPivotControls, NgtsScrollCanvas, NgtsScrollControls, NgtsScrollHtml };
 //# sourceMappingURL=angular-three-soba-controls.mjs.map