angular-three-soba 4.0.0-next.96 → 4.0.0-next.97

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

@@ -2,7 +2,7 @@ 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 * as i1 from 'angular-three';
-import { pick, injectStore, extend, injectBeforeRender, hasListener, NgtPortalAutoRender, NgtPortal, NgtArgs, getEmitter, omit, getInstanceState, is, resolveRef } from 'angular-three';
+import { pick, injectStore, extend, injectBeforeRender, hasListener, NgtPortalAutoRender, NgtPortal, injectObjectEvents, NgtArgs, getEmitter, omit, getInstanceState, is, resolveRef } from 'angular-three';
 import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import * as THREE from 'three';
@@ -289,11 +289,23 @@ class FaceCube {
     constructor() {
         this.options = input({});
         this.onClick = input();
+        this.meshRef = viewChild.required('mesh');
         this.gizmoHelper = inject(NgtsGizmoHelperImpl);
         this.hover = signal(-1);
         this.count = Array.from({ length: 6 });
         this.Math = Math;
         extend({ Mesh, BoxGeometry });
+        // TODO: (chau) remove this when event binding syntax no longer trigger cdr
+        injectObjectEvents(this.meshRef, {
+            pointerout: (ev) => {
+                ev.stopPropagation();
+                this.hover.set(-1);
+            },
+            pointermove: (ev) => {
+                ev.stopPropagation();
+                ev.faceIndex != null && this.hover.set(Math.floor(ev.faceIndex / 2));
+            },
+        });
     }
     internalOnClick(event) {
         const onClick = this.onClick();
@@ -305,12 +317,8 @@ class FaceCube {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FaceCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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)="$any($event).stopPropagation(); hover.set(-1)"
-			(pointermove)="$any($event).stopPropagation(); hover.set(Math.floor($any($event).faceIndex / 2))"
-			(click)="internalOnClick($any($event))"
-		>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-mesh #mesh (click)="internalOnClick($any($event))">
 			<ngt-box-geometry />
 			@for (face of count; track $index) {
 				<viewcube-face-material [index]="$index" [hover]="hover() === $index" [options]="options()" />
@@ -323,11 +331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             args: [{
                     selector: 'viewcube-face-cube',
                     template: `
-		<ngt-mesh
-			(pointerout)="$any($event).stopPropagation(); hover.set(-1)"
-			(pointermove)="$any($event).stopPropagation(); hover.set(Math.floor($any($event).faceIndex / 2))"
-			(click)="internalOnClick($any($event))"
-		>
+		<ngt-mesh #mesh (click)="internalOnClick($any($event))">
 			<ngt-box-geometry />
 			@for (face of count; track $index) {
 				<viewcube-face-material [index]="$index" [hover]="hover() === $index" [options]="options()" />
@@ -351,10 +355,22 @@ class EdgeCube {
             },
         });
         this.onClick = input();
+        this.meshRef = viewChild.required('mesh');
         this.gizmoHelper = inject(NgtsGizmoHelperImpl);
         this.hover = signal(false);
         this.color = computed(() => (this.hover() ? this.hoverColor() : 'white'));
         extend({ Mesh, BoxGeometry, MeshBasicMaterial });
+        // TODO: (chau) remove this when event binding syntax no longer trigger cdr
+        injectObjectEvents(this.meshRef, {
+            pointerout: (ev) => {
+                ev.stopPropagation();
+                this.hover.set(false);
+            },
+            pointerover: (ev) => {
+                ev.stopPropagation();
+                this.hover.set(true);
+            },
+        });
     }
     internalOnClick(event) {
         const onClick = this.onClick();
@@ -366,14 +382,8 @@ class EdgeCube {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EdgeCube, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", 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)="$any($event).stopPropagation(); hover.set(false)"
-			(pointerover)="$any($event).stopPropagation(); hover.set(true)"
-			(click)="internalOnClick($any($event))"
-		>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.1", 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 } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-mesh #mesh [scale]="1.01" [position]="position()" (click)="internalOnClick($any($event))">
 			<ngt-mesh-basic-material transparent [opacity]="0.6" [color]="color()" [visible]="hover()" />
 			<ngt-box-geometry *args="dimensions()" />
 		</ngt-mesh>
@@ -384,13 +394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             args: [{
                     selector: 'viewcube-edge-cube',
                     template: `
-		<ngt-mesh
-			[scale]="1.01"
-			[position]="position()"
-			(pointerout)="$any($event).stopPropagation(); hover.set(false)"
-			(pointerover)="$any($event).stopPropagation(); hover.set(true)"
-			(click)="internalOnClick($any($event))"
-		>
+		<ngt-mesh #mesh [scale]="1.01" [position]="position()" (click)="internalOnClick($any($event))">
 			<ngt-mesh-basic-material transparent [opacity]="0.6" [color]="color()" [visible]="hover()" />
 			<ngt-box-geometry *args="dimensions()" />
 		</ngt-mesh>
@@ -545,6 +549,7 @@ class AxisHead {
         this.disabled = input(false);
         this.font = input('18px Inter var, Arial, sans-serif');
         this.onClick = input();
+        this.spriteRef = viewChild.required('sprite');
         this.document = inject(DOCUMENT);
         this.gizmoHelper = inject(NgtsGizmoHelperImpl);
         this.store = injectStore();
@@ -578,6 +583,12 @@ class AxisHead {
         this.active = signal(false);
         this.scale = computed(() => (this.label() ? 1 : 0.75) * (this.active() ? 1.2 : 1) * this.axisHeadScale());
         extend({ Sprite, SpriteMaterial });
+        // TODO: (chau) remove this when event binding syntax no longer trigger cdr
+        injectObjectEvents(this.spriteRef, {
+            pointerover: this.onPointerOver.bind(this),
+            pointerout: this.onPointerOut.bind(this),
+            pointerdown: this.onPointerDown.bind(this),
+        });
     }
     onPointerOver(event) {
         if (this.disabled())
@@ -603,14 +614,8 @@ class AxisHead {
         this.gizmoHelper.tweenCamera(event.object.position);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AxisHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", 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))"
-		>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.1", 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 } }, viewQueries: [{ propertyName: "spriteRef", first: true, predicate: ["sprite"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-sprite #sprite [scale]="scale()" [position]="position()">
 			<ngt-sprite-material
 				[map]="texture()"
 				[alphaTest]="0.3"
@@ -625,13 +630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             args: [{
                     selector: 'viewport-axis-head',
                     template: `
-		<ngt-sprite
-			[scale]="scale()"
-			[position]="position()"
-			(pointerover)="onPointerOver($any($event))"
-			(pointerout)="onPointerOut($any($event))"
-			(pointerdown)="onPointerDown($any($event))"
-		>
+		<ngt-sprite #sprite [scale]="scale()" [position]="position()">
 			<ngt-sprite-material
 				[map]="texture()"
 				[alphaTest]="0.3"
@@ -868,6 +867,7 @@ class NgtsAxisArrow {
         this.direction = input.required();
         this.axis = input.required();
         this.groupRef = viewChild.required('group');
+        this.innerGroupRef = viewChild.required('innerGroup');
         this.annotationRef = viewChild('annotation', { read: ElementRef });
         this.pivotControls = inject(NgtsPivotControls);
         this.store = injectStore();
@@ -885,6 +885,13 @@ class NgtsAxisArrow {
             return new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
         });
         extend({ Group, Mesh, ConeGeometry, CylinderGeometry, MeshBasicMaterial });
+        // TODO: (chau) remove this when event binding syntax no longer trigger cdr
+        injectObjectEvents(this.innerGroupRef, {
+            pointerdown: this.onPointerDown.bind(this),
+            pointermove: this.onPointerMove.bind(this),
+            pointerup: this.onPointerUp.bind(this),
+            pointerout: this.onPointerOut.bind(this),
+        });
     }
     onPointerDown(event) {
         const [group, direction, axis, controls, annotation] = [
@@ -960,16 +967,9 @@ class NgtsAxisArrow {
         this.hovered.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtsAxisArrow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: "innerGroupRef", first: true, predicate: ["innerGroup"], 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))"
-			>
+			<ngt-group #innerGroup [matrix]="matrixL()" [matrixAutoUpdate]="false">
 				@if (pivotControls.annotations()) {
 					<ngts-html [options]="{ position: [0, -coneLength(), 0] }">
 						<div
@@ -1034,14 +1034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     selector: 'ngts-axis-arrow',
                     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))"
-			>
+			<ngt-group #innerGroup [matrix]="matrixL()" [matrixAutoUpdate]="false">
 				@if (pivotControls.annotations()) {
 					<ngts-html [options]="{ position: [0, -coneLength(), 0] }">
 						<div
@@ -1175,6 +1168,13 @@ class NgtsAxisRotator {
             return points;
         });
         extend({ Group });
+        // TODO: (chau) remove this when event binding syntax no longer trigger cdr
+        injectObjectEvents(this.groupRef, {
+            pointerdown: this.onPointerDown.bind(this),
+            pointermove: this.onPointerMove.bind(this),
+            pointerup: this.onPointerUp.bind(this),
+            pointerout: this.onPointerOut.bind(this),
+        });
     }
     onPointerDown(event) {
         const [annotation, group, axis, controls] = [
@@ -1265,15 +1265,7 @@ class NgtsAxisRotator {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtsAxisRotator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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))"
-		>
+		<ngt-group #group [matrix]="matrixL()" [matrixAutoUpdate]="false">
 			@if (pivotControls.annotations()) {
 				<ngts-html [options]="{ position: [r(), r(), 0] }">
 					<div
@@ -1317,15 +1309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             args: [{
                     selector: 'ngts-axis-rotator',
                     template: `
-		<ngt-group
-			#group
-			[matrix]="matrixL()"
-			[matrixAutoUpdate]="false"
-			(pointerdown)="onPointerDown($any($event))"
-			(pointermove)="onPointerMove($any($event))"
-			(pointerup)="onPointerUp($any($event))"
-			(pointerout)="onPointerOut($any($event))"
-		>
+		<ngt-group #group [matrix]="matrixL()" [matrixAutoUpdate]="false">
 			@if (pivotControls.annotations()) {
 				<ngts-html [options]="{ position: [r(), r(), 0] }">
 					<div
@@ -1397,6 +1381,7 @@ class NgtsPlaneSlider {
         this.dir2 = input.required();
         this.axis = input.required();
         this.groupRef = viewChild.required('group');
+        this.meshRef = viewChild.required('mesh');
         this.annotationRef = viewChild('annotation', { read: ElementRef });
         this.pivotControls = inject(NgtsPivotControls);
         this.store = injectStore();
@@ -1423,6 +1408,13 @@ class NgtsPlaneSlider {
             ];
         });
         extend({ Group, Mesh, PlaneGeometry, MeshBasicMaterial });
+        // TODO: (chau) remove this when event binding syntax no longer trigger cdr
+        injectObjectEvents(this.meshRef, {
+            pointerdown: this.onPointerDown.bind(this),
+            pointermove: this.onPointerMove.bind(this),
+            pointerup: this.onPointerUp.bind(this),
+            pointerout: this.onPointerOut.bind(this),
+        });
     }
     onPointerDown(event) {
         const [annotation, axis, group, controls] = [
@@ -1514,7 +1506,7 @@ class NgtsPlaneSlider {
         this.hovered.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtsPlaneSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: "meshRef", first: true, predicate: ["mesh"], 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] }">
@@ -1527,15 +1519,7 @@ class NgtsPlaneSlider {
 				</ngts-html>
 			}
 			<ngt-group [position]="[pos1() * 1.7, pos1() * 1.7, 0]">
-				<ngt-mesh
-					visible
-					[scale]="length()"
-					[userData]="pivotControls.userData()"
-					(pointerdown)="onPointerDown($any($event))"
-					(pointermove)="onPointerMove($any($event))"
-					(pointerup)="onPointerUp($any($event))"
-					(pointerout)="onPointerOut($any($event))"
-				>
+				<ngt-mesh #mesh visible [scale]="length()" [userData]="pivotControls.userData()">
 					<ngt-plane-geometry />
 					<ngt-mesh-basic-material
 						transparent
@@ -1583,15 +1567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 				</ngts-html>
 			}
 			<ngt-group [position]="[pos1() * 1.7, pos1() * 1.7, 0]">
-				<ngt-mesh
-					visible
-					[scale]="length()"
-					[userData]="pivotControls.userData()"
-					(pointerdown)="onPointerDown($any($event))"
-					(pointermove)="onPointerMove($any($event))"
-					(pointerup)="onPointerUp($any($event))"
-					(pointerout)="onPointerOut($any($event))"
-				>
+				<ngt-mesh #mesh visible [scale]="length()" [userData]="pivotControls.userData()">
 					<ngt-plane-geometry />
 					<ngt-mesh-basic-material
 						transparent
@@ -1653,6 +1629,7 @@ class NgtsScalingSphere {
         this.direction = input.required();
         this.axis = input.required();
         this.groupRef = viewChild.required('group');
+        this.innerGroupRef = viewChild.required('innerGroup');
         this.annotationRef = viewChild('annotation', { read: ElementRef });
         this.meshRef = viewChild.required('mesh');
         this.pivotControls = inject(NgtsPivotControls);
@@ -1671,6 +1648,13 @@ class NgtsScalingSphere {
         });
         this.color = computed(() => this.hovered() ? this.pivotControls.hoveredColor() : this.pivotControls.axisColors()[this.axis()]);
         extend({ Group, Mesh, SphereGeometry, MeshBasicMaterial });
+        // TODO: (chau) remove this when event binding syntax no longer trigger cdr
+        injectObjectEvents(this.innerGroupRef, {
+            pointerdown: this.onPointerDown.bind(this),
+            pointermove: this.onPointerMove.bind(this),
+            pointerup: this.onPointerUp.bind(this),
+            pointerout: this.onPointerOut.bind(this),
+        });
     }
     onPointerDown(event) {
         const [annotation, controls, fixed, scale, direction, axis, size, group] = [
@@ -1767,16 +1751,9 @@ class NgtsScalingSphere {
         this.hovered.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtsScalingSphere, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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: "innerGroupRef", first: true, predicate: ["innerGroup"], 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))"
-			>
+			<ngt-group #innerGroup [matrix]="matrixL()" [matrixAutoUpdate]="false">
 				@if (pivotControls.annotations()) {
 					<ngts-html [options]="{ position: [0, position() / 2, 0] }">
 						<div
@@ -1813,14 +1790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     selector: 'ngts-scaling-sphere',
                     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))"
-			>
+			<ngt-group #innerGroup [matrix]="matrixL()" [matrixAutoUpdate]="false">
 				@if (pivotControls.annotations()) {
 					<ngts-html [options]="{ position: [0, position() / 2, 0] }">
 						<div
@@ -2247,19 +2217,19 @@ class NgtsTransformControls {
         });
         extend({ Group });
         effect((onCleanup) => {
-            const cleanup = this.attachControlsEffect();
+            const cleanup = this.updateDefaultControlsEffect();
             onCleanup(() => cleanup?.());
         });
         effect((onCleanup) => {
-            const cleanup = this.disableDefaultControlsEffect();
+            const cleanup = this.attachControlsEffect();
             onCleanup(() => cleanup?.());
         });
         effect((onCleanup) => {
-            const cleanup = this.setupControlsEventsEffect();
+            const cleanup = this.disableDefaultControlsEffect();
             onCleanup(() => cleanup?.());
         });
         effect((onCleanup) => {
-            const cleanup = this.updateDefaultControlsEffect();
+            const cleanup = this.setupControlsEventsEffect();
             onCleanup(() => cleanup?.());
         });
     }