angular-three-soba 2.1.0 → 2.2.1

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

@@ -0,0 +1,2318 @@
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, input, output, contentChild, TemplateRef, viewChild, computed, effect, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, signal, ElementRef } from '@angular/core';
+import { pick, injectStore, extend, injectBeforeRender, hasListener, NgtPortal, NgtPortalContent, NgtArgs, getEmitter, omit, getLocalState, resolveRef } from 'angular-three';
+import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { Object3D, Matrix4, Quaternion, Vector3, Scene, Group, CanvasTexture, MeshBasicMaterial, Mesh, BoxGeometry, Sprite, SpriteMaterial, DoubleSide, ConeGeometry, CylinderGeometry, Ray, Plane, PlaneGeometry, SphereGeometry, Box3 } from 'three';
+import { NgtsHTML, NgtsHTMLContent, calculateScaleFactor } from 'angular-three-soba/misc';
+import { NgtsLine } from 'angular-three-soba/abstractions';
+import { TransformControls } from 'three-stdlib';
+
+const turnRate = 2 * Math.PI; // turn rate in angles per second
+const dummy = new Object3D();
+const matrix = new Matrix4();
+const [q1, q2] = [new Quaternion(), new Quaternion()];
+const target = new Vector3();
+const targetPosition = new Vector3();
+class NgtsGizmoHelperContent {
+    static ngTemplateContextGuard(_, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGizmoHelperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: NgtsGizmoHelperContent, isStandalone: true, selector: "ng-template[gizmoHelperContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGizmoHelperContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[gizmoHelperContent]', standalone: true }]
+        }] });
+const defaultOptions$2 = {
+    alignment: 'bottom-right',
+    margin: [80, 80],
+    renderPriority: 1,
+};
+class NgtsGizmoHelper {
+    constructor() {
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.update = output();
+        this.renderPriority = pick(this.options, 'renderPriority');
+        this.margin = pick(this.options, 'margin');
+        this.alignment = pick(this.options, 'alignment');
+        this.scene = new Scene();
+        this.content = contentChild.required(NgtsGizmoHelperContent, { read: TemplateRef });
+        this.gizmoRef = viewChild('gizmo');
+        this.virtualCameraRef = viewChild(NgtsOrthographicCamera);
+        this.store = injectStore();
+        this.size = this.store.select('size');
+        this.mainCamera = this.store.select('camera');
+        this.defaultControls = this.store.select('controls');
+        this.invalidate = this.store.select('invalidate');
+        this.x = computed(() => {
+            const alignment = this.alignment();
+            if (alignment.endsWith('-center'))
+                return 0;
+            const [{ width }, [marginX]] = [this.size(), this.margin()];
+            return alignment.endsWith('-left') ? -width / 2 + marginX : width / 2 - marginX;
+        });
+        this.y = computed(() => {
+            const alignment = this.alignment();
+            if (alignment.startsWith('center-'))
+                return 0;
+            const [{ height }, [marginY]] = [this.size(), this.margin()];
+            return alignment.startsWith('top-') ? height / 2 - marginY : -height / 2 + marginY;
+        });
+        this.animating = false;
+        this.radius = 0;
+        this.focusPoint = new Vector3(0, 0, 0);
+        this.defaultUp = new Vector3(0, 0, 0);
+        extend({ Group });
+        effect(() => {
+            this.updateDefaultUpEffect();
+        });
+        injectBeforeRender(({ delta }) => {
+            const [virtualCamera, gizmo] = [
+                this.virtualCameraRef()?.cameraRef()?.nativeElement,
+                this.gizmoRef()?.nativeElement,
+            ];
+            if (!virtualCamera || !gizmo)
+                return;
+            const [defaultControls, mainCamera, invalidate] = [this.defaultControls(), this.mainCamera(), this.invalidate()];
+            // Animate step
+            if (this.animating) {
+                if (q1.angleTo(q2) < 0.01) {
+                    this.animating = false;
+                    // Orbit controls uses UP vector as the orbit axes,
+                    // so we need to reset it after the animation is done
+                    // moving it around for the controls to work correctly
+                    if (this.isOrbitControls(defaultControls)) {
+                        mainCamera.up.copy(this.defaultUp);
+                    }
+                }
+                else {
+                    const step = delta * turnRate;
+                    // animate position by doing a slerp and then scaling the position on the unit sphere
+                    q1.rotateTowards(q2, step);
+                    // animate orientation
+                    mainCamera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(this.radius).add(this.focusPoint);
+                    mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize();
+                    mainCamera.quaternion.copy(q1);
+                    if (this.isCameraControls(defaultControls)) {
+                        void defaultControls.setPosition(mainCamera.position.x, mainCamera.position.y, mainCamera.position.z);
+                    }
+                    if (hasListener(this.update))
+                        this.update.emit();
+                    else if (defaultControls)
+                        defaultControls.update(delta);
+                    invalidate();
+                }
+            }
+            // Sync Gizmo with main camera orientation
+            matrix.copy(mainCamera.matrix).invert();
+            gizmo.quaternion.setFromRotationMatrix(matrix);
+        });
+    }
+    tweenCamera(direction) {
+        const [defaultControls, invalidate, mainCamera] = [this.defaultControls(), this.invalidate(), this.mainCamera()];
+        this.animating = true;
+        if (defaultControls) {
+            this.focusPoint = this.isCameraControls(defaultControls)
+                ? defaultControls.getTarget(this.focusPoint)
+                : defaultControls.target;
+        }
+        this.radius = mainCamera.position.distanceTo(target);
+        // Rotate from current camera orientation
+        q1.copy(mainCamera.quaternion);
+        // To new current camera orientation
+        targetPosition.copy(direction).multiplyScalar(this.radius).add(target);
+        dummy.lookAt(targetPosition);
+        q2.copy(dummy.quaternion);
+        invalidate();
+    }
+    updateDefaultUpEffect() {
+        const mainCamera = this.mainCamera();
+        this.defaultUp.copy(mainCamera.up);
+    }
+    isOrbitControls(controls) {
+        return 'minPolarAngle' in controls;
+    }
+    isCameraControls(controls) {
+        return 'getTarget' in controls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGizmoHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsGizmoHelper, isStandalone: true, selector: "ngts-gizmo-helper", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { update: "update" }, queries: [{ propertyName: "content", first: true, predicate: NgtsGizmoHelperContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "gizmoRef", first: true, predicate: ["gizmo"], descendants: true, isSignal: true }, { propertyName: "virtualCameraRef", first: true, predicate: NgtsOrthographicCamera, descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-portal
+			[container]="scene"
+			[autoRender]="true"
+			[autoRenderPriority]="renderPriority()"
+			[state]="{ events: { priority: renderPriority() + 1 } }"
+		>
+			<ng-template portalContent let-injector="injector" let-container="container">
+				<ngts-orthographic-camera [options]="{ makeDefault: true, position: [0, 0, 200] }" />
+				<ngt-group #gizmo [position]="[x(), y(), 0]">
+					<ng-container
+						[ngTemplateOutlet]="content()"
+						[ngTemplateOutletContext]="{ container, injector }"
+						[ngTemplateOutletInjector]="injector"
+					/>
+				</ngt-group>
+			</ng-template>
+		</ngt-portal>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[portalContent]" }, { kind: "component", type: NgtsOrthographicCamera, selector: "ngts-orthographic-camera", inputs: ["options"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGizmoHelper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-helper',
+                    standalone: true,
+                    template: `
+		<ngt-portal
+			[container]="scene"
+			[autoRender]="true"
+			[autoRenderPriority]="renderPriority()"
+			[state]="{ events: { priority: renderPriority() + 1 } }"
+		>
+			<ng-template portalContent let-injector="injector" let-container="container">
+				<ngts-orthographic-camera [options]="{ makeDefault: true, position: [0, 0, 200] }" />
+				<ngt-group #gizmo [position]="[x(), y(), 0]">
+					<ng-container
+						[ngTemplateOutlet]="content()"
+						[ngTemplateOutletContext]="{ container, injector }"
+						[ngTemplateOutletInjector]="injector"
+					/>
+				</ngt-group>
+			</ng-template>
+		</ngt-portal>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
+                }]
+        }], ctorParameters: () => [] });
+
+const colors = { bg: '#f0f0f0', hover: '#999', text: 'black', stroke: 'black' };
+const defaultFaces = ['Right', 'Left', 'Top', 'Bottom', 'Front', 'Back'];
+const defaultFaceMaterialOptions = {
+    font: '20px Inter var, Arial, sans-serif',
+    faces: defaultFaces,
+    color: colors.bg,
+    hoverColor: colors.hover,
+    textColor: colors.text,
+    strokeColor: colors.stroke,
+    opacity: 1,
+};
+class FaceMaterial {
+    constructor() {
+        this.hover = input.required();
+        this.index = input.required();
+        this.options = input(defaultFaceMaterialOptions, { transform: mergeInputs(defaultFaceMaterialOptions) });
+        this.faces = pick(this.options, 'faces');
+        this.font = pick(this.options, 'font');
+        this.color = pick(this.options, 'color');
+        this.textColor = pick(this.options, 'textColor');
+        this.strokeColor = pick(this.options, 'strokeColor');
+        this.hoverColor = pick(this.options, 'hoverColor');
+        this.document = inject(DOCUMENT);
+        this.store = injectStore();
+        this.gl = this.store.select('gl');
+        this.opacity = pick(this.options, 'opacity');
+        this.materialColor = computed(() => (this.hover() ? this.hoverColor() : 'white'));
+        this.texture = computed(() => {
+            const [index, faces, font, color, textColor, strokeColor, gl] = [
+                this.index(),
+                this.faces(),
+                this.font(),
+                this.color(),
+                this.textColor(),
+                this.strokeColor(),
+                this.gl(),
+            ];
+            const canvas = this.document.createElement('canvas');
+            canvas.width = 128;
+            canvas.height = 128;
+            const context = canvas.getContext('2d');
+            context.fillStyle = color;
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            context.strokeStyle = strokeColor;
+            context.strokeRect(0, 0, canvas.width, canvas.height);
+            context.font = font;
+            context.textAlign = 'center';
+            context.fillStyle = textColor;
+            context.fillText(faces[index].toUpperCase(), 64, 76);
+            const texture = new CanvasTexture(canvas);
+            texture.anisotropy = gl.capabilities.getMaxAnisotropy() || 1;
+            return texture;
+        });
+        extend({ MeshBasicMaterial });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FaceMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: FaceMaterial, isStandalone: true, selector: "viewcube-face-material", inputs: { hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-mesh-basic-material
+			[attach]="['material', index()]"
+			[map]="texture()"
+			[color]="materialColor()"
+			[transparent]="true"
+			[opacity]="opacity()"
+		/>
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FaceMaterial, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'viewcube-face-material',
+                    standalone: true,
+                    template: `
+		<ngt-mesh-basic-material
+			[attach]="['material', index()]"
+			[map]="texture()"
+			[color]="materialColor()"
+			[transparent]="true"
+			[opacity]="opacity()"
+		/>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+class FaceCube {
+    constructor() {
+        this.options = input({});
+        this.onClick = input();
+        this.gizmoHelper = inject(NgtsGizmoHelper);
+        this.hover = signal(-1);
+        this.count = Array.from({ length: 6 });
+        this.Math = Math;
+        extend({ Mesh, BoxGeometry });
+    }
+    internalOnClick(event) {
+        const onClick = this.onClick();
+        if (onClick)
+            onClick(event);
+        else {
+            event.stopPropagation();
+            this.gizmoHelper.tweenCamera(event.face.normal);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FaceCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: FaceCube, isStandalone: true, selector: "viewcube-face-cube", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, onClick: { classPropertyName: "onClick", publicName: "onClick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-mesh
+			(pointerout)="$event.stopPropagation(); hover.set(-1)"
+			(pointermove)="$event.stopPropagation(); hover.set(Math.floor($any($event).faceIndex / 2))"
+			(click)="internalOnClick($any($event))"
+		>
+			<ngt-box-geometry />
+			@for (face of count; track $index) {
+				<viewcube-face-material [index]="$index" [hover]="hover() === $index" [options]="options()" />
+			}
+		</ngt-mesh>
+	`, isInline: true, dependencies: [{ kind: "component", type: FaceMaterial, selector: "viewcube-face-material", inputs: ["hover", "index", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FaceCube, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'viewcube-face-cube',
+                    standalone: true,
+                    template: `
+		<ngt-mesh
+			(pointerout)="$event.stopPropagation(); hover.set(-1)"
+			(pointermove)="$event.stopPropagation(); hover.set(Math.floor($any($event).faceIndex / 2))"
+			(click)="internalOnClick($any($event))"
+		>
+			<ngt-box-geometry />
+			@for (face of count; track $index) {
+				<viewcube-face-material [index]="$index" [hover]="hover() === $index" [options]="options()" />
+			}
+		</ngt-mesh>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FaceMaterial],
+                }]
+        }], ctorParameters: () => [] });
+class EdgeCube {
+    constructor() {
+        this.dimensions = input.required();
+        this.position = input.required();
+        this.hoverColor = input(colors.hover, {
+            transform: (value) => {
+                if (value === undefined)
+                    return colors.hover;
+                return value;
+            },
+        });
+        this.onClick = input();
+        this.gizmoHelper = inject(NgtsGizmoHelper);
+        this.hover = signal(false);
+        this.color = computed(() => (this.hover() ? this.hoverColor() : 'white'));
+        extend({ Mesh, BoxGeometry, MeshBasicMaterial });
+    }
+    internalOnClick(event) {
+        const onClick = this.onClick();
+        if (onClick)
+            onClick(event);
+        else {
+            event.stopPropagation();
+            this.gizmoHelper.tweenCamera(this.position());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: EdgeCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: EdgeCube, isStandalone: true, selector: "viewcube-edge-cube", inputs: { dimensions: { classPropertyName: "dimensions", publicName: "dimensions", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, onClick: { classPropertyName: "onClick", publicName: "onClick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-mesh
+			[scale]="1.01"
+			[position]="position()"
+			(pointerout)="$event.stopPropagation(); hover.set(false)"
+			(pointerover)="$event.stopPropagation(); hover.set(true)"
+			(click)="internalOnClick($any($event))"
+		>
+			<ngt-mesh-basic-material [transparent]="true" [opacity]="0.6" [color]="color()" [visible]="hover()" />
+			<ngt-box-geometry *args="dimensions()" />
+		</ngt-mesh>
+	`, 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.4", ngImport: i0, type: EdgeCube, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'viewcube-edge-cube',
+                    standalone: true,
+                    template: `
+		<ngt-mesh
+			[scale]="1.01"
+			[position]="position()"
+			(pointerout)="$event.stopPropagation(); hover.set(false)"
+			(pointerover)="$event.stopPropagation(); hover.set(true)"
+			(click)="internalOnClick($any($event))"
+		>
+			<ngt-mesh-basic-material [transparent]="true" [opacity]="0.6" [color]="color()" [visible]="hover()" />
+			<ngt-box-geometry *args="dimensions()" />
+		</ngt-mesh>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
+                }]
+        }], ctorParameters: () => [] });
+class NgtsGizmoViewcube {
+    constructor() {
+        this.options = input({});
+        this.click = output();
+        this.hoverColor = pick(this.options, 'hoverColor');
+        this.corners = [
+            [1, 1, 1],
+            [1, 1, -1],
+            [1, -1, 1],
+            [1, -1, -1],
+            [-1, 1, 1],
+            [-1, 1, -1],
+            [-1, -1, 1],
+            [-1, -1, -1],
+        ].map(this.makePositionVector);
+        this.cornerDimensions = [0.25, 0.25, 0.25];
+        this.edges = [
+            [1, 1, 0],
+            [1, 0, 1],
+            [1, 0, -1],
+            [1, -1, 0],
+            [0, 1, 1],
+            [0, 1, -1],
+            [0, -1, 1],
+            [0, -1, -1],
+            [-1, 1, 0],
+            [-1, 0, 1],
+            [-1, 0, -1],
+            [-1, -1, 0],
+        ].map(this.makePositionVector);
+        this.edgeDimensions = this.edges.map((edge) => edge.toArray().map((axis) => (axis == 0 ? 0.5 : 0.25)));
+        extend({ Group });
+    }
+    get onClick() {
+        if (hasListener(this.click))
+            return getEmitter(this.click);
+        return undefined;
+    }
+    makePositionVector(xyz) {
+        return new Vector3(...xyz).multiplyScalar(0.38);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGizmoViewcube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsGizmoViewcube, isStandalone: true, selector: "ngts-gizmo-viewcube", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: `
+		<ngt-group [scale]="60">
+			<viewcube-face-cube [options]="options()" [onClick]="onClick" />
+			@for (edge of edges; track $index) {
+				<viewcube-edge-cube
+					[position]="edge"
+					[dimensions]="edgeDimensions[$index]"
+					[onClick]="onClick"
+					[hoverColor]="hoverColor()"
+				/>
+			}
+			@for (corner of corners; track $index) {
+				<viewcube-edge-cube
+					[position]="corner"
+					[dimensions]="cornerDimensions"
+					[onClick]="onClick"
+					[hoverColor]="hoverColor()"
+				/>
+			}
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "component", type: FaceCube, selector: "viewcube-face-cube", inputs: ["options", "onClick"] }, { kind: "component", type: EdgeCube, selector: "viewcube-edge-cube", inputs: ["dimensions", "position", "hoverColor", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGizmoViewcube, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-viewcube',
+                    standalone: true,
+                    template: `
+		<ngt-group [scale]="60">
+			<viewcube-face-cube [options]="options()" [onClick]="onClick" />
+			@for (edge of edges; track $index) {
+				<viewcube-edge-cube
+					[position]="edge"
+					[dimensions]="edgeDimensions[$index]"
+					[onClick]="onClick"
+					[hoverColor]="hoverColor()"
+				/>
+			}
+			@for (corner of corners; track $index) {
+				<viewcube-edge-cube
+					[position]="corner"
+					[dimensions]="cornerDimensions"
+					[onClick]="onClick"
+					[hoverColor]="hoverColor()"
+				/>
+			}
+		</ngt-group>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FaceCube, EdgeCube],
+                }]
+        }], ctorParameters: () => [] });
+
+class Axis {
+    constructor() {
+        this.scale = input([0.8, 0.05, 0.05], {
+            transform: (value) => {
+                if (value === undefined)
+                    return [0.8, 0.05, 0.05];
+                return value;
+            },
+        });
+        this.color = input();
+        this.rotation = input([0, 0, 0]);
+        extend({ Group, Mesh, BoxGeometry, MeshBasicMaterial });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: Axis, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: Axis, isStandalone: true, selector: "viewport-axis", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-group [rotation]="rotation()">
+			<ngt-mesh [position]="[0.4, 0, 0]">
+				<ngt-box-geometry *args="scale()" />
+				<ngt-mesh-basic-material [color]="color()" [toneMapped]="false" />
+			</ngt-mesh>
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: Axis, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'viewport-axis',
+                    standalone: true,
+                    template: `
+		<ngt-group [rotation]="rotation()">
+			<ngt-mesh [position]="[0.4, 0, 0]">
+				<ngt-box-geometry *args="scale()" />
+				<ngt-mesh-basic-material [color]="color()" [toneMapped]="false" />
+			</ngt-mesh>
+		</ngt-group>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
+                }]
+        }], ctorParameters: () => [] });
+class AxisHead {
+    constructor() {
+        this.arcStyle = input.required();
+        this.position = input.required();
+        this.label = input();
+        this.labelColor = input('#000');
+        this.axisHeadScale = input(1);
+        this.disabled = input(false);
+        this.font = input('18px Inter var, Arial, sans-serif');
+        this.onClick = input();
+        this.document = inject(DOCUMENT);
+        this.gizmoHelper = inject(NgtsGizmoHelper);
+        this.store = injectStore();
+        this.gl = this.store.select('gl');
+        this.texture = computed(() => {
+            const [arcStyle, label, labelColor, font, gl] = [
+                this.arcStyle(),
+                this.label(),
+                this.labelColor(),
+                this.font(),
+                this.gl(),
+            ];
+            const canvas = this.document.createElement('canvas');
+            canvas.width = 64;
+            canvas.height = 64;
+            const context = canvas.getContext('2d');
+            context.beginPath();
+            context.arc(32, 32, 16, 0, 2 * Math.PI);
+            context.closePath();
+            context.fillStyle = arcStyle;
+            context.fill();
+            if (label) {
+                context.font = font;
+                context.textAlign = 'center';
+                context.fillStyle = labelColor;
+                context.fillText(label, 32, 41);
+            }
+            const texture = new CanvasTexture(canvas);
+            texture.anisotropy = gl.capabilities.getMaxAnisotropy() || 1;
+            return texture;
+        });
+        this.active = signal(false);
+        this.scale = computed(() => (this.label() ? 1 : 0.75) * (this.active() ? 1.2 : 1) * this.axisHeadScale());
+        extend({ Sprite, SpriteMaterial });
+    }
+    onPointerOver(event) {
+        if (this.disabled())
+            return;
+        event.stopPropagation();
+        this.active.set(true);
+    }
+    onPointerOut(event) {
+        if (this.disabled())
+            return;
+        const onClick = this.onClick();
+        if (onClick)
+            onClick(event);
+        else {
+            event.stopPropagation();
+            this.active.set(false);
+        }
+    }
+    onPointerDown(event) {
+        if (this.disabled())
+            return;
+        event.stopPropagation();
+        this.gizmoHelper.tweenCamera(event.object.position);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AxisHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: AxisHead, isStandalone: true, selector: "viewport-axis-head", inputs: { arcStyle: { classPropertyName: "arcStyle", publicName: "arcStyle", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, axisHeadScale: { classPropertyName: "axisHeadScale", publicName: "axisHeadScale", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, onClick: { classPropertyName: "onClick", publicName: "onClick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-sprite
+			[scale]="scale()"
+			[position]="position()"
+			(pointerover)="onPointerOver($any($event))"
+			(pointerout)="onPointerOut($any($event))"
+			(pointerdown)="onPointerDown($any($event))"
+		>
+			<ngt-sprite-material [map]="texture()" [alphaTest]="0.3" [opacity]="label() ? 1 : 0.75" [toneMapped]="false" />
+		</ngt-sprite>
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AxisHead, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'viewport-axis-head',
+                    standalone: true,
+                    template: `
+		<ngt-sprite
+			[scale]="scale()"
+			[position]="position()"
+			(pointerover)="onPointerOver($any($event))"
+			(pointerout)="onPointerOut($any($event))"
+			(pointerdown)="onPointerDown($any($event))"
+		>
+			<ngt-sprite-material [map]="texture()" [alphaTest]="0.3" [opacity]="label() ? 1 : 0.75" [toneMapped]="false" />
+		</ngt-sprite>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+const defaultOptions$1 = {
+    axisColors: ['#ff2060', '#20df80', '#2080ff'],
+    labels: ['X', 'Y', 'Z'],
+    axisHeadScale: 1,
+    labelColor: '#000',
+    hideNegativeAxes: false,
+    hideAxisHeads: false,
+    disabled: false,
+    font: '18px Inter var, Arial, sans-serif',
+};
+class NgtsGizmoViewport {
+    constructor() {
+        this.Math = Math;
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.parameters = omit(this.options, [
+            'axisColors',
+            'axisScale',
+            'labels',
+            'axisHeadScale',
+            'labelColor',
+            'hideNegativeAxes',
+            'hideAxisHeads',
+            'disabled',
+            'font',
+        ]);
+        this.click = output();
+        this.axisColors = pick(this.options, 'axisColors');
+        this.axisScale = pick(this.options, 'axisScale');
+        this.hideAxisHeads = pick(this.options, 'hideAxisHeads');
+        this.hideNegativeAxes = pick(this.options, 'hideNegativeAxes');
+        this.labels = pick(this.options, 'labels');
+        this.axisHeadScale = pick(this.options, 'axisHeadScale');
+        this.labelColor = pick(this.options, 'labelColor');
+        this.disabled = pick(this.options, 'disabled');
+        this.font = pick(this.options, 'font');
+        extend({ Group });
+    }
+    get onClick() {
+        if (hasListener(this.click))
+            return getEmitter(this.click);
+        return undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGizmoViewport, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsGizmoViewport, isStandalone: true, selector: "ngts-gizmo-viewport", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: `
+		<ngt-group [scale]="40" [parameters]="parameters()">
+			<viewport-axis [color]="axisColors()[0]" [rotation]="[0, 0, 0]" [scale]="axisScale()" />
+			<viewport-axis [color]="axisColors()[1]" [rotation]="[0, 0, Math.PI / 2]" [scale]="axisScale()" />
+			<viewport-axis [color]="axisColors()[2]" [rotation]="[0, -Math.PI / 2, 0]" [scale]="axisScale()" />
+
+			@if (!hideAxisHeads()) {
+				<viewport-axis-head
+					[arcStyle]="axisColors()[0]"
+					[position]="[1, 0, 0]"
+					[label]="labels()[0]"
+					[labelColor]="labelColor()"
+					[axisHeadScale]="axisHeadScale()"
+					[disabled]="disabled()"
+					[font]="font()"
+					[onClick]="onClick"
+				/>
+				<viewport-axis-head
+					[arcStyle]="axisColors()[1]"
+					[position]="[0, 1, 0]"
+					[label]="labels()[1]"
+					[labelColor]="labelColor()"
+					[axisHeadScale]="axisHeadScale()"
+					[disabled]="disabled()"
+					[font]="font()"
+					[onClick]="onClick"
+				/>
+				<viewport-axis-head
+					[arcStyle]="axisColors()[2]"
+					[position]="[0, 0, 1]"
+					[label]="labels()[2]"
+					[labelColor]="labelColor()"
+					[axisHeadScale]="axisHeadScale()"
+					[disabled]="disabled()"
+					[font]="font()"
+					[onClick]="onClick"
+				/>
+
+				@if (!hideNegativeAxes()) {
+					<viewport-axis-head
+						[arcStyle]="axisColors()[0]"
+						[position]="[-1, 0, 0]"
+						[axisHeadScale]="axisHeadScale()"
+						[disabled]="disabled()"
+						[onClick]="onClick"
+					/>
+					<viewport-axis-head
+						[arcStyle]="axisColors()[1]"
+						[position]="[0, -1, 0]"
+						[axisHeadScale]="axisHeadScale()"
+						[disabled]="disabled()"
+						[onClick]="onClick"
+					/>
+					<viewport-axis-head
+						[arcStyle]="axisColors()[2]"
+						[position]="[0, 0, -1]"
+						[axisHeadScale]="axisHeadScale()"
+						[disabled]="disabled()"
+						[onClick]="onClick"
+					/>
+				}
+			}
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "component", type: Axis, selector: "viewport-axis", inputs: ["scale", "color", "rotation"] }, { kind: "component", type: AxisHead, selector: "viewport-axis-head", inputs: ["arcStyle", "position", "label", "labelColor", "axisHeadScale", "disabled", "font", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsGizmoViewport, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-gizmo-viewport',
+                    standalone: true,
+                    template: `
+		<ngt-group [scale]="40" [parameters]="parameters()">
+			<viewport-axis [color]="axisColors()[0]" [rotation]="[0, 0, 0]" [scale]="axisScale()" />
+			<viewport-axis [color]="axisColors()[1]" [rotation]="[0, 0, Math.PI / 2]" [scale]="axisScale()" />
+			<viewport-axis [color]="axisColors()[2]" [rotation]="[0, -Math.PI / 2, 0]" [scale]="axisScale()" />
+
+			@if (!hideAxisHeads()) {
+				<viewport-axis-head
+					[arcStyle]="axisColors()[0]"
+					[position]="[1, 0, 0]"
+					[label]="labels()[0]"
+					[labelColor]="labelColor()"
+					[axisHeadScale]="axisHeadScale()"
+					[disabled]="disabled()"
+					[font]="font()"
+					[onClick]="onClick"
+				/>
+				<viewport-axis-head
+					[arcStyle]="axisColors()[1]"
+					[position]="[0, 1, 0]"
+					[label]="labels()[1]"
+					[labelColor]="labelColor()"
+					[axisHeadScale]="axisHeadScale()"
+					[disabled]="disabled()"
+					[font]="font()"
+					[onClick]="onClick"
+				/>
+				<viewport-axis-head
+					[arcStyle]="axisColors()[2]"
+					[position]="[0, 0, 1]"
+					[label]="labels()[2]"
+					[labelColor]="labelColor()"
+					[axisHeadScale]="axisHeadScale()"
+					[disabled]="disabled()"
+					[font]="font()"
+					[onClick]="onClick"
+				/>
+
+				@if (!hideNegativeAxes()) {
+					<viewport-axis-head
+						[arcStyle]="axisColors()[0]"
+						[position]="[-1, 0, 0]"
+						[axisHeadScale]="axisHeadScale()"
+						[disabled]="disabled()"
+						[onClick]="onClick"
+					/>
+					<viewport-axis-head
+						[arcStyle]="axisColors()[1]"
+						[position]="[0, -1, 0]"
+						[axisHeadScale]="axisHeadScale()"
+						[disabled]="disabled()"
+						[onClick]="onClick"
+					/>
+					<viewport-axis-head
+						[arcStyle]="axisColors()[2]"
+						[position]="[0, 0, -1]"
+						[axisHeadScale]="axisHeadScale()"
+						[disabled]="disabled()"
+						[onClick]="onClick"
+					/>
+				}
+			}
+		</ngt-group>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [Axis, AxisHead],
+                }]
+        }], 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.4", ngImport: i0, type: NgtsAxisArrow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", 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.4", 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.4", ngImport: i0, type: NgtsAxisRotator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", 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.4", 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.4", ngImport: i0, type: NgtsPlaneSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", 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.4", 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.4", ngImport: i0, type: NgtsScalingSphere, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", 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.4", 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 = {
+    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,
+};
+// TODO: PivotControls is not working properly with control flow
+class NgtsPivotControls {
+    constructor() {
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        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 });
+        effect(() => {
+            const anchor = this.anchor();
+            if (!anchor)
+                return;
+            const childrenContainer = this.childrenRef().nativeElement;
+            const localState = getLocalState(childrenContainer);
+            if (!localState)
+                return;
+            const [gizmo, offset, invalidate] = [
+                this.gizmoRef().nativeElement,
+                this.offset(),
+                this.invalidate(),
+                this.options(),
+                [localState.objects(), localState.nonObjects()],
+            ];
+            childrenContainer.updateWorldMatrix(true, true);
+            mPInv.copy(childrenContainer.matrixWorld).invert();
+            bb.makeEmpty();
+            childrenContainer.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.4", ngImport: i0, type: NgtsPivotControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", 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.4", 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: () => [] });
+
+class NgtsTransformControls {
+    constructor() {
+        this.object = input(null);
+        this.options = input({});
+        this.parameters = omit(this.options, [
+            'enabled',
+            'axis',
+            'mode',
+            'translationSnap',
+            'rotationSnap',
+            'scaleSnap',
+            'space',
+            'size',
+            'showX',
+            'showY',
+            'showZ',
+            'domElement',
+            'makeDefault',
+            'camera',
+        ]);
+        this.controlsOptions = pick(this.options, [
+            'enabled',
+            'axis',
+            'mode',
+            'translationSnap',
+            'rotationSnap',
+            'scaleSnap',
+            'space',
+            'size',
+            'showX',
+            'showY',
+            'showZ',
+        ]);
+        this.camera = pick(this.options, 'camera');
+        this.domElement = pick(this.options, 'domElement');
+        this.makeDefault = pick(this.options, 'makeDefault');
+        this.change = output();
+        this.mouseDown = output();
+        this.mouseUp = output();
+        this.objectChange = output();
+        this.groupRef = viewChild.required('group');
+        this.store = injectStore();
+        this.glDomElement = this.store.select('gl', 'domElement');
+        this.defaultCamera = this.store.select('camera');
+        this.events = this.store.select('events');
+        this.defaultControls = this.store.select('controls');
+        this.invalidate = this.store.select('invalidate');
+        this.controls = computed(() => {
+            let camera = this.camera();
+            if (!camera) {
+                camera = this.defaultCamera();
+            }
+            let domElement = this.domElement();
+            if (!domElement) {
+                domElement = this.events().connected || this.glDomElement();
+            }
+            return new TransformControls(camera, domElement);
+        });
+        extend({ Group });
+        effect((onCleanup) => {
+            const cleanup = this.attachControlsEffect();
+            onCleanup(() => cleanup?.());
+        });
+        effect((onCleanup) => {
+            const cleanup = this.disableDefaultControlsEffect();
+            onCleanup(() => cleanup?.());
+        });
+        effect((onCleanup) => {
+            const cleanup = this.setupControlsEventsEffect();
+            onCleanup(() => cleanup?.());
+        });
+        effect((onCleanup) => {
+            const cleanup = this.updateDefaultControlsEffect();
+            onCleanup(() => cleanup?.());
+        });
+    }
+    attachControlsEffect() {
+        const group = this.groupRef().nativeElement;
+        if (!group)
+            return;
+        const localState = getLocalState(group);
+        if (!localState)
+            return;
+        const [object, controls] = [resolveRef(this.object()), this.controls(), localState.objects()];
+        if (object) {
+            controls.attach(object);
+        }
+        else {
+            controls.attach(group);
+        }
+        return () => controls.detach();
+    }
+    disableDefaultControlsEffect() {
+        const defaultControls = this.defaultControls();
+        if (!defaultControls)
+            return;
+        const controls = this.controls();
+        const callback = (event) => {
+            defaultControls.enabled = !event.value;
+        };
+        // @ts-expect-error - three-stdlib types are not up-to-date
+        controls.addEventListener('dragging-changed', callback);
+        return () => {
+            // @ts-expect-error - three-stdlib types are not up-to-date
+            controls.removeEventListener('dragging-changed', callback);
+        };
+    }
+    setupControlsEventsEffect() {
+        const [controls, invalidate] = [this.controls(), this.invalidate()];
+        const onChange = (event) => {
+            invalidate();
+            if (!this.change['destroyed']) {
+                this.change.emit(event);
+            }
+        };
+        const onMouseDown = this.mouseDown.emit.bind(this.mouseDown);
+        const onMouseUp = this.mouseUp.emit.bind(this.mouseUp);
+        const onObjectChange = this.objectChange.emit.bind(this.objectChange);
+        // @ts-expect-error - three-stdlib types are not up-to-date
+        controls.addEventListener('change', onChange);
+        // @ts-expect-error - three-stdlib types are not up-to-date
+        controls.addEventListener('mouseDown', onMouseDown);
+        // @ts-expect-error - three-stdlib types are not up-to-date
+        controls.addEventListener('mouseUp', onMouseUp);
+        // @ts-expect-error - three-stdlib types are not up-to-date
+        controls.addEventListener('objectChange', onObjectChange);
+        return () => {
+            // @ts-expect-error - three-stdlib types are not up-to-date
+            controls.removeEventListener('change', onChange);
+            // @ts-expect-error - three-stdlib types are not up-to-date
+            controls.removeEventListener('mouseDown', onMouseDown);
+            // @ts-expect-error - three-stdlib types are not up-to-date
+            controls.removeEventListener('mouseUp', onMouseUp);
+            // @ts-expect-error - three-stdlib types are not up-to-date
+            controls.removeEventListener('objectChange', onObjectChange);
+        };
+    }
+    updateDefaultControlsEffect() {
+        const [controls, makeDefault] = [this.controls(), this.makeDefault()];
+        if (!makeDefault)
+            return;
+        const oldControls = this.store.snapshot.controls;
+        this.store.update({ controls });
+        return () => this.store.update(() => ({ controls: oldControls }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsTransformControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsTransformControls, isStandalone: true, selector: "ngts-transform-controls", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", mouseDown: "mouseDown", mouseUp: "mouseUp", objectChange: "objectChange" }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-primitive *args="[controls()]" [parameters]="controlsOptions()" />
+
+		<ngt-group #group [parameters]="parameters()">
+			<ng-content />
+		</ngt-group>
+	`, 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.4", ngImport: i0, type: NgtsTransformControls, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-transform-controls',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[controls()]" [parameters]="controlsOptions()" />
+
+		<ngt-group #group [parameters]="parameters()">
+			<ng-content />
+		</ngt-group>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsPivotControls, NgtsTransformControls };
+//# sourceMappingURL=angular-three-soba-gizmos.mjs.map