angular-three-soba 2.1.0 → 2.2.1

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

@@ -1,24 +1,22 @@
 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, 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 { 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();
@@ -109,14 +107,14 @@ class NgtsCameraControls {
             }
         });
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCameraControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCameraControls, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-camera-controls',
@@ -132,7 +130,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 +138,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();
@@ -237,14 +235,14 @@ class NgtsOrbitControls {
             });
         });
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsOrbitControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", 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: "18.2.0", ngImport: i0, type: NgtsOrbitControls, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsOrbitControls, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-orbit-controls',
@@ -259,1333 +257,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,
@@ -1626,129 +297,124 @@ class NgtsScrollControls {
         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);
-                };
+        effect((onCleanup) => {
+            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);
+                },
+            });
+            onCleanup(() => {
+                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)
+        });
+        effect((onCleanup) => {
+            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;
-                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;
-                            }
+                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 (disableScroll)
+                        setTimeout(() => (disableScroll = false), 40);
+                }
+                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 });
+            onCleanup(() => {
+                el.removeEventListener('scroll', onScroll);
                 if (horizontal)
-                    el.addEventListener('wheel', onWheel, { passive: true });
-                return () => {
-                    el.removeEventListener('scroll', onScroll);
-                    if (horizontal)
-                        el.removeEventListener('wheel', onWheel);
-                };
+                    el.removeEventListener('wheel', onWheel);
             });
         });
         let last = 0;
@@ -1782,12 +448,12 @@ class NgtsScrollControls {
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsScrollControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsScrollControls, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-scroll-controls',
@@ -1814,10 +480,10 @@ class NgtsScrollCanvas {
                 : 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsScrollCanvas, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsScrollCanvas, decorators: [{
             type: Directive,
             args: [{ selector: 'ngt-group[ngtsScrollCanvas]', standalone: true }]
         }], ctorParameters: () => [] });
@@ -1834,10 +500,10 @@ class NgtsScrollHtml extends NgtHTML {
             }
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsScrollHtml, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsScrollHtml, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[ngtsScrollHTML]',
@@ -1847,6 +513,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.
  */