angular-three-soba 3.7.0 → 4.0.0-next.2

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

@@ -1,20 +1,22 @@
 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 { pick, injectStore, extend, injectBeforeRender, hasListener, NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtArgs, getEmitter, omit, getInstanceState, is, 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 * as THREE from 'three';
+import { Group, MeshBasicMaterial, Mesh, BoxGeometry, Sprite, SpriteMaterial, ConeGeometry, CylinderGeometry, PlaneGeometry, SphereGeometry } from 'three';
+import * as i1 from 'angular-three-soba/misc';
+import { NgtsHTMLDeclarations, 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();
+const dummy = new THREE.Object3D();
+const matrix = new THREE.Matrix4();
+const [q1, q2] = [new THREE.Quaternion(), new THREE.Quaternion()];
+const target = new THREE.Vector3();
+const targetPosition = new THREE.Vector3();
 class NgtsGizmoHelperContent {
     static ngTemplateContextGuard(_, ctx) {
         return true;
@@ -38,33 +40,29 @@ class NgtsGizmoHelper {
         this.renderPriority = pick(this.options, 'renderPriority');
         this.margin = pick(this.options, 'margin');
         this.alignment = pick(this.options, 'alignment');
-        this.scene = new Scene();
+        this.scene = new THREE.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()];
+            const [width, [marginX]] = [this.store.size.width(), 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()];
+            const [height, [marginY]] = [this.store.size.height(), 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);
+        this.focusPoint = new THREE.Vector3(0, 0, 0);
+        this.defaultUp = new THREE.Vector3(0, 0, 0);
         extend({ Group });
         effect(() => {
             this.updateDefaultUpEffect();
@@ -76,7 +74,11 @@ class NgtsGizmoHelper {
             ];
             if (!virtualCamera || !gizmo)
                 return;
-            const [defaultControls, mainCamera, invalidate] = [this.defaultControls(), this.mainCamera(), this.invalidate()];
+            const [defaultControls, mainCamera, invalidate] = [
+                this.store.snapshot.controls,
+                this.store.snapshot.camera,
+                this.store.snapshot.invalidate,
+            ];
             // Animate step
             if (this.animating) {
                 if (q1.angleTo(q2) < 0.01) {
@@ -112,7 +114,11 @@ class NgtsGizmoHelper {
         });
     }
     tweenCamera(direction) {
-        const [defaultControls, invalidate, mainCamera] = [this.defaultControls(), this.invalidate(), this.mainCamera()];
+        const [defaultControls, invalidate, mainCamera] = [
+            this.store.snapshot.controls,
+            this.store.snapshot.invalidate,
+            this.store.snapshot.camera,
+        ];
         this.animating = true;
         if (defaultControls) {
             this.focusPoint = this.isCameraControls(defaultControls)
@@ -129,7 +135,7 @@ class NgtsGizmoHelper {
         invalidate();
     }
     updateDefaultUpEffect() {
-        const mainCamera = this.mainCamera();
+        const mainCamera = this.store.camera();
         this.defaultUp.copy(mainCamera.up);
     }
     isOrbitControls(controls) {
@@ -144,22 +150,21 @@ class NgtsGizmoHelper {
 
 		<ngt-portal
 			[container]="scene"
-			[autoRender]="true"
-			[autoRenderPriority]="_renderPriority"
+			[autoRender]="_renderPriority"
 			[state]="{ events: { priority: _renderPriority + 1 } }"
 		>
-			<ng-template portalContent let-injector="injector" let-container="container">
+			<ng-template portalContent let-injector="injector">
 				<ngts-orthographic-camera [options]="{ makeDefault: true, position: [0, 0, 200] }" />
 				<ngt-group #gizmo [position]="[x(), y(), 0]">
 					<ng-container
 						[ngTemplateOutlet]="content()"
-						[ngTemplateOutletContext]="{ container, injector }"
+						[ngTemplateOutletContext]="{ container: scene, 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 }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state"] }, { kind: "directive", type: NgtPortalAutoRender, selector: "ngt-portal[autoRender]", inputs: ["autoRender"] }, { 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: "19.0.6", ngImport: i0, type: NgtsGizmoHelper, decorators: [{
             type: Component,
@@ -170,16 +175,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 
 		<ngt-portal
 			[container]="scene"
-			[autoRender]="true"
-			[autoRenderPriority]="_renderPriority"
+			[autoRender]="_renderPriority"
 			[state]="{ events: { priority: _renderPriority + 1 } }"
 		>
-			<ng-template portalContent let-injector="injector" let-container="container">
+			<ng-template portalContent let-injector="injector">
 				<ngts-orthographic-camera [options]="{ makeDefault: true, position: [0, 0, 200] }" />
 				<ngt-group #gizmo [position]="[x(), y(), 0]">
 					<ng-container
 						[ngTemplateOutlet]="content()"
-						[ngTemplateOutletContext]="{ container, injector }"
+						[ngTemplateOutletContext]="{ container: scene, injector }"
 						[ngTemplateOutletInjector]="injector"
 					/>
 				</ngt-group>
@@ -188,7 +192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
+                    imports: [NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
                 }]
         }], ctorParameters: () => [] });
 
@@ -216,7 +220,6 @@ class FaceMaterial {
         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(() => {
@@ -227,7 +230,7 @@ class FaceMaterial {
                 this.color(),
                 this.textColor(),
                 this.strokeColor(),
-                this.gl(),
+                this.store.gl(),
             ];
             const canvas = this.document.createElement('canvas');
             canvas.width = 128;
@@ -241,7 +244,7 @@ class FaceMaterial {
             context.textAlign = 'center';
             context.fillStyle = textColor;
             context.fillText(faces[index].toUpperCase(), 64, 76);
-            const texture = new CanvasTexture(canvas);
+            const texture = new THREE.CanvasTexture(canvas);
             texture.anisotropy = gl.capabilities.getMaxAnisotropy() || 1;
             return texture;
         });
@@ -253,7 +256,7 @@ class FaceMaterial {
 			[attach]="['material', index()]"
 			[map]="texture()"
 			[color]="materialColor()"
-			[transparent]="true"
+			transparent
 			[opacity]="opacity()"
 		/>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -267,7 +270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 			[attach]="['material', index()]"
 			[map]="texture()"
 			[color]="materialColor()"
-			[transparent]="true"
+			transparent
 			[opacity]="opacity()"
 		/>
 	`,
@@ -429,7 +432,7 @@ class NgtsGizmoViewcube {
         return undefined;
     }
     makePositionVector(xyz) {
-        return new Vector3(...xyz).multiplyScalar(0.38);
+        return new THREE.Vector3(...xyz).multiplyScalar(0.38);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsGizmoViewcube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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: `
@@ -538,14 +541,13 @@ class AxisHead {
         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(),
+                this.store.gl(),
             ];
             const canvas = this.document.createElement('canvas');
             canvas.width = 64;
@@ -562,7 +564,7 @@ class AxisHead {
                 context.fillStyle = labelColor;
                 context.fillText(label, 32, 41);
             }
-            const texture = new CanvasTexture(canvas);
+            const texture = new THREE.CanvasTexture(canvas);
             texture.anisotropy = gl.capabilities.getMaxAnisotropy() || 1;
             return texture;
         });
@@ -823,8 +825,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const vec1$1 = new Vector3();
-const vec2$1 = new Vector3();
+const vec1$1 = new THREE.Vector3();
+const vec2$1 = new THREE.Vector3();
 function calculateOffset$1(clickPoint, normal, rayStart, rayDir) {
     const e1 = normal.dot(normal);
     const e2 = normal.dot(clickPoint) - normal.dot(rayStart);
@@ -843,18 +845,17 @@ function calculateOffset$1(clickPoint, normal, rayStart, rayDir) {
         .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();
+const upV$1 = new THREE.Vector3(0, 1, 0);
+const offsetMatrix$1 = new THREE.Matrix4();
 class NgtsAxisArrow {
     constructor() {
-        this.DoubleSide = DoubleSide;
+        this.DoubleSide = THREE.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;
@@ -865,8 +866,8 @@ class NgtsAxisArrow {
         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);
+            const quaternion = new THREE.Quaternion().setFromUnitVectors(upV$1, this.direction().clone().normalize());
+            return new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
         });
         extend({ Group, Mesh, ConeGeometry, CylinderGeometry, MeshBasicMaterial });
     }
@@ -875,7 +876,7 @@ class NgtsAxisArrow {
             this.groupRef().nativeElement,
             this.direction(),
             this.axis(),
-            this.controls(),
+            this.store.controls(),
             this.annotationRef()?.nativeElement,
         ];
         if (annotation) {
@@ -883,30 +884,31 @@ class NgtsAxisArrow {
             annotation.style.display = 'block';
         }
         event.stopPropagation();
-        const rotation = new Matrix4().extractRotation(group.matrixWorld);
-        const origin = new Vector3().setFromMatrixPosition(group.matrixWorld);
+        const rotation = new THREE.Matrix4().extractRotation(group.matrixWorld);
+        const origin = new THREE.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) {
+        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()];
+        const [annotation, controls] = [
+            this.annotationRef()?.nativeElement,
+            this.store.controls(),
+        ];
         if (annotation) {
             annotation.style.display = 'none';
         }
         event.stopPropagation();
         this.clickInfo = null;
         this.pivotControls.onDragEnd();
-        if (controls) {
+        if (controls)
             controls.enabled = true;
-        }
         // @ts-expect-error - setPointerCapture is not in the type definition
         event.target.releasePointerCapture(event.pointerId);
     }
@@ -957,7 +959,7 @@ class NgtsAxisArrow {
 					<ngts-html [options]="{ position: [0, -coneLength(), 0] }">
 						<div
 							#annotation
-							ngtsHTMLContent
+							htmlContent
 							style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap;"
 							[class]="pivotControls.annotationsClass()"
 						></div>
@@ -994,18 +996,18 @@ class NgtsAxisArrow {
 				<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"
+						transparent
+						polygonOffset
 						[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 }); }
+	`, 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: i1.NgtsHTML, selector: "ngts-html", inputs: ["options"] }, { kind: "component", type: i1.NgtsHTMLContent, selector: "div[htmlContent]", inputs: ["htmlContent"], outputs: ["occluded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsAxisArrow, decorators: [{
             type: Component,
@@ -1025,7 +1027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 					<ngts-html [options]="{ position: [0, -coneLength(), 0] }">
 						<div
 							#annotation
-							ngtsHTMLContent
+							htmlContent
 							style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap;"
 							[class]="pivotControls.annotationsClass()"
 						></div>
@@ -1062,11 +1064,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 				<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"
+						transparent
+						polygonOffset
 						[depthTest]="pivotControls.depthTest()"
 						[color]="color()"
 						[opacity]="pivotControls.opacity()"
-						[polygonOffset]="true"
 						[polygonOffsetFactor]="-10"
 						[fog]="false"
 					/>
@@ -1076,12 +1078,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtArgs, NgtsLine, NgtsHTML, NgtsHTMLContent],
+                    imports: [NgtArgs, NgtsLine, NgtsHTMLDeclarations],
                 }]
         }], ctorParameters: () => [] });
 
-const clickDir = new Vector3();
-const intersectionDir = new Vector3();
+const clickDir = new THREE.Vector3();
+const intersectionDir = new THREE.Vector3();
 function toDegrees(radians) {
     return (radians * 180) / Math.PI;
 }
@@ -1116,13 +1118,13 @@ function minimizeAngle(angle) {
     }
     return result;
 }
-const rotMatrix = new Matrix4();
-const posNew = new Vector3();
-const ray$1 = new Ray();
-const intersection$1 = new Vector3();
+const rotMatrix = new THREE.Matrix4();
+const posNew = new THREE.Vector3();
+const ray$1 = new THREE.Ray();
+const intersection$1 = new THREE.Vector3();
 class NgtsAxisRotator {
     constructor() {
-        this.DoubleSide = DoubleSide;
+        this.DoubleSide = THREE.DoubleSide;
         this.dir1 = input.required();
         this.dir2 = input.required();
         this.axis = input.required();
@@ -1130,7 +1132,6 @@ class NgtsAxisRotator {
         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;
@@ -1138,7 +1139,7 @@ class NgtsAxisRotator {
         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));
+            return new THREE.Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
         });
         this.r = computed(() => (this.pivotControls.fixed() ? 0.65 : this.pivotControls.scale() * 0.65));
         this.arc = computed(() => {
@@ -1146,7 +1147,7 @@ class NgtsAxisRotator {
             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));
+                points.push(new THREE.Vector3(Math.cos(angle) * this.r(), Math.sin(angle) * this.r(), 0));
             }
             return points;
         });
@@ -1157,7 +1158,7 @@ class NgtsAxisRotator {
             this.annotationRef()?.nativeElement,
             this.groupRef().nativeElement,
             this.axis(),
-            this.controls(),
+            this.store.controls(),
         ];
         if (annotation) {
             annotation.innerText = `${toDegrees(this.angle).toFixed(0)}º`;
@@ -1165,16 +1166,15 @@ class NgtsAxisRotator {
         }
         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);
+        const origin = new THREE.Vector3().setFromMatrixPosition(group.matrixWorld);
+        const e1 = new THREE.Vector3().setFromMatrixColumn(group.matrixWorld, 0).normalize();
+        const e2 = new THREE.Vector3().setFromMatrixColumn(group.matrixWorld, 1).normalize();
+        const normal = new THREE.Vector3().setFromMatrixColumn(group.matrixWorld, 2).normalize();
+        const plane = new THREE.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) {
+        if (controls)
             controls.enabled = false;
-        }
         // @ts-expect-error - setPointerCapture is not a function on PointerEvent
         event.target.setPointerCapture(event.pointerId);
     }
@@ -1221,16 +1221,18 @@ class NgtsAxisRotator {
         }
     }
     onPointerUp(event) {
-        const [annotation, controls] = [this.annotationRef()?.nativeElement, this.controls()];
+        const [annotation, controls] = [
+            this.annotationRef()?.nativeElement,
+            this.store.controls(),
+        ];
         if (annotation) {
             annotation.style.display = 'none';
         }
         event.stopPropagation();
         this.clickInfo = null;
         this.pivotControls.onDragEnd();
-        if (controls) {
+        if (controls)
             controls.enabled = true;
-        }
         // @ts-expect-error - releasePointerCapture is not a function on PointerEvent
         event.target.releasePointerCapture(event.pointerId);
     }
@@ -1253,7 +1255,7 @@ class NgtsAxisRotator {
 				<ngts-html [options]="{ position: [r(), r(), 0] }">
 					<div
 						#annotation
-						ngtsHTMLContent
+						htmlContent
 						style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap"
 						[class]="pivotControls.annotationsClass()"
 					></div>
@@ -1281,7 +1283,7 @@ class NgtsAxisRotator {
 				}"
 			/>
 		</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 }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }, { kind: "component", type: i1.NgtsHTML, selector: "ngts-html", inputs: ["options"] }, { kind: "component", type: i1.NgtsHTMLContent, selector: "div[htmlContent]", inputs: ["htmlContent"], outputs: ["occluded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsAxisRotator, decorators: [{
             type: Component,
@@ -1301,7 +1303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 				<ngts-html [options]="{ position: [r(), r(), 0] }">
 					<div
 						#annotation
-						ngtsHTMLContent
+						htmlContent
 						style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap"
 						[class]="pivotControls.annotationsClass()"
 					></div>
@@ -1332,7 +1334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtsLine, NgtsHTML, NgtsHTMLContent],
+                    imports: [NgtsLine, NgtsHTMLDeclarations],
                 }]
         }], ctorParameters: () => [] });
 
@@ -1354,12 +1356,12 @@ function decomposeIntoBasis(e1, e2, offset) {
     const x = (c1 - y * b1) / a1;
     return [x, y];
 }
-const ray = new Ray();
-const intersection = new Vector3();
-const offsetMatrix = new Matrix4();
+const ray = new THREE.Ray();
+const intersection = new THREE.Vector3();
+const offsetMatrix = new THREE.Matrix4();
 class NgtsPlaneSlider {
     constructor() {
-        this.DoubleSide = DoubleSide;
+        this.DoubleSide = THREE.DoubleSide;
         this.dir1 = input.required();
         this.dir2 = input.required();
         this.axis = input.required();
@@ -1367,7 +1369,6 @@ class NgtsPlaneSlider {
         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;
@@ -1375,7 +1376,7 @@ class NgtsPlaneSlider {
         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));
+            return new THREE.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));
@@ -1383,11 +1384,11 @@ class NgtsPlaneSlider {
         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),
+                new THREE.Vector3(0, 0, 0),
+                new THREE.Vector3(0, length, 0),
+                new THREE.Vector3(length, length, 0),
+                new THREE.Vector3(length, 0, 0),
+                new THREE.Vector3(0, 0, 0),
             ];
         });
         extend({ Group, Mesh, PlaneGeometry, MeshBasicMaterial });
@@ -1397,7 +1398,7 @@ class NgtsPlaneSlider {
             this.annotationRef()?.nativeElement,
             this.axis(),
             this.groupRef().nativeElement,
-            this.controls(),
+            this.store.controls(),
         ];
         if (annotation) {
             annotation.innerText = `${this.pivotControls.translation[(axis + 1) % 3].toFixed(2)}, ${this.pivotControls.translation[(axis + 2) % 3].toFixed(2)}`;
@@ -1405,18 +1406,17 @@ class NgtsPlaneSlider {
         }
         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);
+        const origin = new THREE.Vector3().setFromMatrixPosition(group.matrixWorld);
+        const e1 = new THREE.Vector3().setFromMatrixColumn(group.matrixWorld, 0).normalize();
+        const e2 = new THREE.Vector3().setFromMatrixColumn(group.matrixWorld, 1).normalize();
+        const normal = new THREE.Vector3().setFromMatrixColumn(group.matrixWorld, 2).normalize();
+        const plane = new THREE.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) {
+        if (controls)
             controls.enabled = false;
-        }
         // @ts-expect-error - setPointerCapture is not defined on ThreeEvent
         event.target.setPointerCapture(event.pointerId);
     }
@@ -1463,16 +1463,18 @@ class NgtsPlaneSlider {
         }
     }
     onPointerUp(event) {
-        const [annotation, controls] = [this.annotationRef()?.nativeElement, this.controls()];
+        const [annotation, controls] = [
+            this.annotationRef()?.nativeElement,
+            this.store.controls(),
+        ];
         if (annotation) {
             annotation.style.display = 'none';
         }
         event.stopPropagation();
         this.clickInfo = null;
         this.pivotControls.onDragEnd();
-        if (controls) {
+        if (controls)
             controls.enabled = true;
-        }
         // @ts-expect-error - releasePointerCapture is not defined on ThreeEvent
         event.target.releasePointerCapture(event.pointerId);
     }
@@ -1487,7 +1489,7 @@ class NgtsPlaneSlider {
 				<ngts-html [options]="{ position: [0, 0, 0] }">
 					<div
 						#annotation
-						ngtsHTMLContent
+						htmlContent
 						style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap"
 						[class]="pivotControls.annotationsClass()"
 					></div>
@@ -1495,7 +1497,7 @@ class NgtsPlaneSlider {
 			}
 			<ngt-group [position]="[pos1() * 1.7, pos1() * 1.7, 0]">
 				<ngt-mesh
-					[visible]="true"
+					visible
 					[scale]="length()"
 					[userData]="pivotControls.userData()"
 					(pointerdown)="onPointerDown($any($event))"
@@ -1505,10 +1507,10 @@ class NgtsPlaneSlider {
 				>
 					<ngt-plane-geometry />
 					<ngt-mesh-basic-material
-						[transparent]="true"
+						transparent
+						polygonOffset
 						[depthTest]="pivotControls.depthTest()"
 						[color]="color()"
-						[polygonOffset]="true"
 						[polygonOffsetFactor]="-10"
 						[side]="DoubleSide"
 						[fog]="false"
@@ -1531,7 +1533,7 @@ class NgtsPlaneSlider {
 				/>
 			</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 }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: i1.NgtsHTML, selector: "ngts-html", inputs: ["options"] }, { kind: "component", type: i1.NgtsHTMLContent, selector: "div[htmlContent]", inputs: ["htmlContent"], outputs: ["occluded"] }, { kind: "component", type: NgtsLine, selector: "ngts-line", inputs: ["points", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsPlaneSlider, decorators: [{
             type: Component,
@@ -1543,7 +1545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 				<ngts-html [options]="{ position: [0, 0, 0] }">
 					<div
 						#annotation
-						ngtsHTMLContent
+						htmlContent
 						style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap"
 						[class]="pivotControls.annotationsClass()"
 					></div>
@@ -1551,7 +1553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 			}
 			<ngt-group [position]="[pos1() * 1.7, pos1() * 1.7, 0]">
 				<ngt-mesh
-					[visible]="true"
+					visible
 					[scale]="length()"
 					[userData]="pivotControls.userData()"
 					(pointerdown)="onPointerDown($any($event))"
@@ -1561,10 +1563,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 				>
 					<ngt-plane-geometry />
 					<ngt-mesh-basic-material
-						[transparent]="true"
+						transparent
+						polygonOffset
 						[depthTest]="pivotControls.depthTest()"
 						[color]="color()"
-						[polygonOffset]="true"
 						[polygonOffsetFactor]="-10"
 						[side]="DoubleSide"
 						[fog]="false"
@@ -1590,12 +1592,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtsHTML, NgtsHTMLContent, NgtsLine],
+                    imports: [NgtsHTMLDeclarations, NgtsLine],
                 }]
         }], ctorParameters: () => [] });
 
-const vec1 = new Vector3();
-const vec2 = new Vector3();
+const vec1 = new THREE.Vector3();
+const vec2 = new THREE.Vector3();
 function calculateOffset(clickPoint, normal, rayStart, rayDir) {
     const e1 = normal.dot(normal);
     const e2 = normal.dot(clickPoint) - normal.dot(rayStart);
@@ -1614,9 +1616,9 @@ function calculateOffset(clickPoint, normal, rayStart, rayDir) {
         .sub(clickPoint);
     return -vec1.dot(vec2) / vec1.dot(vec1);
 }
-const upV = new Vector3(0, 1, 0);
-const scaleV = new Vector3();
-const scaleMatrix = new Matrix4();
+const upV = new THREE.Vector3(0, 1, 0);
+const scaleV = new THREE.Vector3();
+const scaleMatrix = new THREE.Matrix4();
 class NgtsScalingSphere {
     constructor() {
         this.direction = input.required();
@@ -1626,8 +1628,6 @@ class NgtsScalingSphere {
         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;
@@ -1637,8 +1637,8 @@ class NgtsScalingSphere {
             ? (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);
+            const quaternion = new THREE.Quaternion().setFromUnitVectors(upV, this.direction().clone().normalize());
+            return new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
         });
         this.color = computed(() => this.hovered() ? this.pivotControls.hoveredColor() : this.pivotControls.axisColors()[this.axis()]);
         extend({ Group, Mesh, SphereGeometry, MeshBasicMaterial });
@@ -1646,12 +1646,12 @@ class NgtsScalingSphere {
     onPointerDown(event) {
         const [annotation, controls, fixed, scale, direction, axis, size, group] = [
             this.annotationRef()?.nativeElement,
-            this.controls(),
+            this.store.controls(),
             this.pivotControls.fixed(),
             this.pivotControls.scale(),
             this.direction(),
             this.axis(),
-            this.size(),
+            this.store.size(),
             this.groupRef().nativeElement,
         ];
         if (annotation) {
@@ -1659,9 +1659,9 @@ class NgtsScalingSphere {
             annotation.style.display = 'block';
         }
         event.stopPropagation();
-        const rotation = new Matrix4().extractRotation(group.matrixWorld);
+        const rotation = new THREE.Matrix4().extractRotation(group.matrixWorld);
         const clickPoint = event.point.clone();
-        const origin = new Vector3().setFromMatrixPosition(group.matrixWorld);
+        const origin = new THREE.Vector3().setFromMatrixPosition(group.matrixWorld);
         const dir = direction.clone().applyMatrix4(rotation).normalize();
         const mPLG = group.matrixWorld.clone();
         const mPLGInv = mPLG.clone().invert();
@@ -1670,9 +1670,8 @@ class NgtsScalingSphere {
             : 1;
         this.clickInfo = { clickPoint, dir, mPLG, mPLGInv, offsetMultiplier };
         this.pivotControls.onDragStart({ component: 'Sphere', axis, origin, directions: [dir] });
-        if (controls) {
+        if (controls)
             controls.enabled = false;
-        }
         // @ts-expect-error - setPointerCapture is not in the type definition
         event.target.setPointerCapture(event.pointerId);
     }
@@ -1717,7 +1716,7 @@ class NgtsScalingSphere {
     onPointerUp(event) {
         const [annotation, controls, position, mesh] = [
             this.annotationRef()?.nativeElement,
-            this.controls(),
+            this.store.controls(),
             this.position(),
             this.meshRef().nativeElement,
         ];
@@ -1729,9 +1728,8 @@ class NgtsScalingSphere {
         this.clickInfo = null;
         mesh.position.set(0, position, 0);
         this.pivotControls.onDragEnd();
-        if (controls) {
+        if (controls)
             controls.enabled = true;
-        }
         // @ts-expect-error - releasePointerCapture is not in the type definition
         event.target.releasePointerCapture(event.pointerId);
     }
@@ -1754,7 +1752,7 @@ class NgtsScalingSphere {
 					<ngts-html [options]="{ position: [0, position() / 2, 0] }">
 						<div
 							#annotation
-							ngtsHTMLContent
+							htmlContent
 							style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap;"
 							[class]="pivotControls.annotationsClass()"
 						></div>
@@ -1773,7 +1771,7 @@ class NgtsScalingSphere {
 				</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 }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: i1.NgtsHTML, selector: "ngts-html", inputs: ["options"] }, { kind: "component", type: i1.NgtsHTMLContent, selector: "div[htmlContent]", inputs: ["htmlContent"], outputs: ["occluded"] }, { kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsScalingSphere, decorators: [{
             type: Component,
@@ -1793,7 +1791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 					<ngts-html [options]="{ position: [0, position() / 2, 0] }">
 						<div
 							#annotation
-							ngtsHTMLContent
+							htmlContent
 							style="display: none; background: #151520; color: white; padding: 6px 8px; border-radius: 7px; white-space: nowrap;"
 							[class]="pivotControls.annotationsClass()"
 						></div>
@@ -1815,29 +1813,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgtsHTML, NgtsHTMLContent, NgtArgs],
+                    imports: [NgtsHTMLDeclarations, 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 mL0 = new THREE.Matrix4();
+const mW0 = new THREE.Matrix4();
+const mP = new THREE.Matrix4();
+const mPInv = new THREE.Matrix4();
+const mW = new THREE.Matrix4();
+const mL = new THREE.Matrix4();
+const mL0Inv = new THREE.Matrix4();
+const mdL = new THREE.Matrix4();
+const mG = new THREE.Matrix4();
+const bb = new THREE.Box3();
+const bbObj = new THREE.Box3();
+const vCenter = new THREE.Vector3();
+const vSize = new THREE.Vector3();
+const vAnchorOffset = new THREE.Vector3();
+const vPosition = new THREE.Vector3();
+const vScale = new THREE.Vector3();
+const xDir = new THREE.Vector3(1, 0, 0);
+const yDir = new THREE.Vector3(0, 1, 0);
+const zDir = new THREE.Vector3(0, 0, 1);
 const defaultOptions = {
     enabled: true,
     autoTransform: true,
@@ -1858,7 +1856,6 @@ const defaultOptions = {
     opacity: 1,
     visible: true,
 };
-// TODO: PivotControls is not working properly with control flow
 class NgtsPivotControls {
     constructor() {
         this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
@@ -1892,13 +1889,22 @@ class NgtsPivotControls {
         this.dragStarted = output();
         this.dragEnded = output();
         this.dragged = output();
+        this.autoTransform = pick(this.options, 'autoTransform');
         this.matrix = pick(this.options, 'matrix');
+        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.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');
@@ -1907,15 +1913,6 @@ class NgtsPivotControls {
         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;
@@ -1924,26 +1921,25 @@ class NgtsPivotControls {
         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);
+        this.cameraScale = new THREE.Vector3(1, 1, 1);
+        this.gizmoScale = new THREE.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)
+            const instanceState = getInstanceState(childrenContainer);
+            if (!instanceState)
                 return;
             const [gizmo, offset, invalidate] = [
                 this.gizmoRef().nativeElement,
                 this.offset(),
-                this.invalidate(),
+                this.store.invalidate(),
                 this.options(),
-                [localState.objects(), localState.nonObjects()],
+                [instanceState.objects(), instanceState.nonObjects()],
             ];
             childrenContainer.updateWorldMatrix(true, true);
             mPInv.copy(childrenContainer.matrixWorld).invert();
@@ -1965,13 +1961,13 @@ class NgtsPivotControls {
             vSize.copy(bb.max).sub(bb.min).multiplyScalar(0.5);
             vAnchorOffset
                 .copy(vSize)
-                .multiply(new Vector3(...anchor))
+                .multiply(new THREE.Vector3(...anchor))
                 .add(vCenter);
             vPosition.set(...offset).add(vAnchorOffset);
             gizmo.position.copy(vPosition);
             invalidate();
         });
-        const vec = new Vector3();
+        const vec = new THREE.Vector3();
         injectBeforeRender(({ camera, size, invalidate }) => {
             const [{ fixed, scale, matrix }, gizmo, group] = [
                 this.options(),
@@ -1982,7 +1978,7 @@ class NgtsPivotControls {
                 const sf = calculateScaleFactor(gizmo.getWorldPosition(vec), scale, camera, size);
                 this.cameraScale.setScalar(sf);
             }
-            if (matrix && matrix instanceof Matrix4) {
+            if (is.three(matrix, 'isMatrix4')) {
                 group.matrix = matrix;
             }
             // Update gizmo scale in accordance with matrix changes
@@ -2199,19 +2195,14 @@ class NgtsTransformControls {
         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();
+                camera = this.store.camera();
             }
             let domElement = this.domElement();
             if (!domElement) {
-                domElement = this.events().connected || this.glDomElement();
+                domElement = this.store.events().connected || this.store.gl.domElement();
             }
             return new TransformControls(camera, domElement);
         });
@@ -2237,10 +2228,10 @@ class NgtsTransformControls {
         const group = this.groupRef().nativeElement;
         if (!group)
             return;
-        const localState = getLocalState(group);
-        if (!localState)
+        const instanceState = getInstanceState(group);
+        if (!instanceState)
             return;
-        const [object, controls] = [resolveRef(this.object()), this.controls(), localState.objects()];
+        const [object, controls] = [resolveRef(this.object()), this.controls(), instanceState.objects()];
         if (object) {
             controls.attach(object);
         }
@@ -2250,7 +2241,7 @@ class NgtsTransformControls {
         return () => controls.detach();
     }
     disableDefaultControlsEffect() {
-        const defaultControls = this.defaultControls();
+        const defaultControls = this.store.controls();
         if (!defaultControls)
             return;
         const controls = this.controls();
@@ -2265,7 +2256,7 @@ class NgtsTransformControls {
         };
     }
     setupControlsEventsEffect() {
-        const [controls, invalidate] = [this.controls(), this.invalidate()];
+        const [controls, invalidate] = [this.controls(), this.store.invalidate()];
         const onChange = (event) => {
             invalidate();
             if (!this.change['destroyed']) {