Skip to content

Commit 7dc8b02

Browse files
nartcnartc
committed
refactor(soba/gizmos): use injectObjectEvents for all events for optimizing CDR (for now)
1 parent 52a2403 commit 7dc8b02

File tree

7 files changed

+98
-66
lines changed

7 files changed

+98
-66
lines changed

‎libs/soba/gizmos/src/lib/gizmo-helper/gizmo-viewcube.ts‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@ import {
44
Component,
55
computed,
66
CUSTOM_ELEMENTS_SCHEMA,
7+
ElementRef,
78
inject,
89
input,
910
output,
1011
signal,
12+
viewChild,
1113
} from '@angular/core';
1214
import {
1315
extend,
1416
getEmitter,
1517
hasListener,
18+
injectObjectEvents,
1619
injectStore,
1720
NgtArgs,
1821
NgtEventHandlers,
@@ -119,11 +122,7 @@ export class FaceMaterial {
119122
@Component({
120123
selector: 'viewcube-face-cube',
121124
template: `
122-
<ngt-mesh
123-
(pointerout)="$any($event).stopPropagation(); hover.set(-1)"
124-
(pointermove)="$any($event).stopPropagation(); hover.set(Math.floor($any($event).faceIndex / 2))"
125-
(click)="internalOnClick($any($event))"
126-
>
125+
<ngt-mesh #mesh (click)="internalOnClick($any($event))">
127126
<ngt-box-geometry />
128127
@for (face of count; track $index) {
129128
<viewcube-face-material [index]="$index" [hover]="hover() === $index" [options]="options()" />
@@ -138,16 +137,30 @@ export class FaceCube {
138137
options = input({} as Partial<NgtsViewcubeCommonOptions>);
139138
onClick = input<NgtEventHandlers['click']>();
140139

140+
private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
141+
141142
private gizmoHelper = inject(NgtsGizmoHelperImpl);
142143

143144
protected hover = signal(-1);
144145
protected count = Array.from({ length: 6 });
145146

146147
constructor() {
147148
extend({ Mesh, BoxGeometry });
149+
150+
// TODO: (chau) remove this when event binding syntax no longer trigger cdr
151+
injectObjectEvents(this.meshRef, {
152+
pointerout: (ev) => {
153+
ev.stopPropagation();
154+
this.hover.set(-1);
155+
},
156+
pointermove: (ev) => {
157+
ev.stopPropagation();
158+
ev.faceIndex != null && this.hover.set(Math.floor(ev.faceIndex / 2));
159+
},
160+
});
148161
}
149162

150-
internalOnClick(event: NgtThreeEvent<MouseEvent>) {
163+
protected internalOnClick(event: NgtThreeEvent<MouseEvent>) {
151164
const onClick = this.onClick();
152165
if (onClick) onClick(event);
153166
else {
@@ -162,13 +175,7 @@ export class FaceCube {
162175
@Component({
163176
selector: 'viewcube-edge-cube',
164177
template: `
165-
<ngt-mesh
166-
[scale]="1.01"
167-
[position]="position()"
168-
(pointerout)="$any($event).stopPropagation(); hover.set(false)"
169-
(pointerover)="$any($event).stopPropagation(); hover.set(true)"
170-
(click)="internalOnClick($any($event))"
171-
>
178+
<ngt-mesh #mesh [scale]="1.01" [position]="position()" (click)="internalOnClick($any($event))">
172179
<ngt-mesh-basic-material transparent [opacity]="0.6" [color]="color()" [visible]="hover()" />
173180
<ngt-box-geometry *args="dimensions()" />
174181
</ngt-mesh>
@@ -188,16 +195,30 @@ export class EdgeCube {
188195
});
189196
onClick = input<NgtEventHandlers['click']>();
190197

198+
private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
199+
191200
private gizmoHelper = inject(NgtsGizmoHelperImpl);
192201

193202
protected hover = signal(false);
194203
protected color = computed(() => (this.hover() ? this.hoverColor() : 'white'));
195204

196205
constructor() {
197206
extend({ Mesh, BoxGeometry, MeshBasicMaterial });
207+
208+
// TODO: (chau) remove this when event binding syntax no longer trigger cdr
209+
injectObjectEvents(this.meshRef, {
210+
pointerout: (ev) => {
211+
ev.stopPropagation();
212+
this.hover.set(false);
213+
},
214+
pointerover: (ev) => {
215+
ev.stopPropagation();
216+
this.hover.set(true);
217+
},
218+
});
198219
}
199220

200-
internalOnClick(event: NgtThreeEvent<MouseEvent>) {
221+
protected internalOnClick(event: NgtThreeEvent<MouseEvent>) {
201222
const onClick = this.onClick();
202223
if (onClick) onClick(event);
203224
else {

‎libs/soba/gizmos/src/lib/gizmo-helper/gizmo-viewport.ts‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@ import {
44
Component,
55
computed,
66
CUSTOM_ELEMENTS_SCHEMA,
7+
ElementRef,
78
inject,
89
input,
910
output,
1011
signal,
12+
viewChild,
1113
} from '@angular/core';
1214
import {
1315
extend,
1416
getEmitter,
1517
hasListener,
18+
injectObjectEvents,
1619
injectStore,
1720
NgtArgs,
1821
NgtEuler,
@@ -60,13 +63,7 @@ export class Axis {
6063
@Component({
6164
selector: 'viewport-axis-head',
6265
template: `
63-
<ngt-sprite
64-
[scale]="scale()"
65-
[position]="position()"
66-
(pointerover)="onPointerOver($any($event))"
67-
(pointerout)="onPointerOut($any($event))"
68-
(pointerdown)="onPointerDown($any($event))"
69-
>
66+
<ngt-sprite #sprite [scale]="scale()" [position]="position()">
7067
<ngt-sprite-material
7168
[map]="texture()"
7269
[alphaTest]="0.3"
@@ -89,6 +86,8 @@ export class AxisHead {
8986
font = input('18px Inter var, Arial, sans-serif');
9087
onClick = input<NgtEventHandlers['click']>();
9188

89+
private spriteRef = viewChild.required<ElementRef<THREE.Sprite>>('sprite');
90+
9291
private document = inject(DOCUMENT);
9392
private gizmoHelper = inject(NgtsGizmoHelperImpl);
9493
private store = injectStore();
@@ -130,16 +129,23 @@ export class AxisHead {
130129

131130
constructor() {
132131
extend({ Sprite, SpriteMaterial });
132+
133+
// TODO: (chau) remove this when event binding syntax no longer trigger cdr
134+
injectObjectEvents(this.spriteRef, {
135+
pointerover: this.onPointerOver.bind(this),
136+
pointerout: this.onPointerOut.bind(this),
137+
pointerdown: this.onPointerDown.bind(this),
138+
});
133139
}
134140

135-
onPointerOver(event: NgtThreeEvent<PointerEvent>) {
141+
protected onPointerOver(event: NgtThreeEvent<PointerEvent>) {
136142
if (this.disabled()) return;
137143

138144
event.stopPropagation();
139145
this.active.set(true);
140146
}
141147

142-
onPointerOut(event: NgtThreeEvent<PointerEvent>) {
148+
protected onPointerOut(event: NgtThreeEvent<PointerEvent>) {
143149
if (this.disabled()) return;
144150

145151
const onClick = this.onClick();
@@ -150,7 +156,7 @@ export class AxisHead {
150156
}
151157
}
152158

153-
onPointerDown(event: NgtThreeEvent<PointerEvent>) {
159+
protected onPointerDown(event: NgtThreeEvent<PointerEvent>) {
154160
if (this.disabled()) return;
155161
event.stopPropagation();
156162
this.gizmoHelper.tweenCamera(event.object.position);

‎libs/soba/gizmos/src/lib/pivot-controls/axis-arrow.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
signal,
1010
viewChild,
1111
} from '@angular/core';
12-
import { extend, injectStore, NgtArgs, NgtThreeEvent } from 'angular-three';
12+
import { extend, injectObjectEvents, injectStore, NgtArgs, NgtThreeEvent } from 'angular-three';
1313
import { NgtsLine } from 'angular-three-soba/abstractions';
1414
import { NgtsHTML } from 'angular-three-soba/misc';
1515
import * as THREE from 'three';
@@ -51,14 +51,7 @@ const offsetMatrix = new THREE.Matrix4();
5151
selector: 'ngts-axis-arrow',
5252
template: `
5353
<ngt-group #group>
54-
<ngt-group
55-
[matrix]="matrixL()"
56-
[matrixAutoUpdate]="false"
57-
(pointerdown)="onPointerDown($any($event))"
58-
(pointerup)="onPointerUp($any($event))"
59-
(pointermove)="onPointerMove($any($event))"
60-
(pointerout)="onPointerOut($any($event))"
61-
>
54+
<ngt-group #innerGroup [matrix]="matrixL()" [matrixAutoUpdate]="false">
6255
@if (pivotControls.annotations()) {
6356
<ngts-html [options]="{ position: [0, -coneLength(), 0] }">
6457
<div
@@ -127,6 +120,7 @@ export class NgtsAxisArrow {
127120
axis = input.required<0 | 1 | 2>();
128121

129122
private groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
123+
private innerGroupRef = viewChild.required<ElementRef<THREE.Group>>('innerGroup');
130124
private annotationRef = viewChild<'string', ElementRef<HTMLElement>>('annotation', { read: ElementRef });
131125

132126
protected pivotControls = inject(NgtsPivotControls);
@@ -156,6 +150,14 @@ export class NgtsAxisArrow {
156150

157151
constructor() {
158152
extend({ Group, Mesh, ConeGeometry, CylinderGeometry, MeshBasicMaterial });
153+
154+
// TODO: (chau) remove this when event binding syntax no longer trigger cdr
155+
injectObjectEvents(this.innerGroupRef, {
156+
pointerdown: this.onPointerDown.bind(this),
157+
pointermove: this.onPointerMove.bind(this),
158+
pointerup: this.onPointerUp.bind(this),
159+
pointerout: this.onPointerOut.bind(this),
160+
});
159161
}
160162

161163
onPointerDown(event: NgtThreeEvent<PointerEvent>) {

‎libs/soba/gizmos/src/lib/pivot-controls/axis-rotator.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
signal,
1010
viewChild,
1111
} from '@angular/core';
12-
import { extend, injectStore, NgtThreeEvent } from 'angular-three';
12+
import { extend, injectObjectEvents, injectStore, NgtThreeEvent } from 'angular-three';
1313
import { NgtsLine } from 'angular-three-soba/abstractions';
1414
import { NgtsHTML } from 'angular-three-soba/misc';
1515
import * as THREE from 'three';
@@ -76,15 +76,7 @@ const intersection = new THREE.Vector3();
7676
@Component({
7777
selector: 'ngts-axis-rotator',
7878
template: `
79-
<ngt-group
80-
#group
81-
[matrix]="matrixL()"
82-
[matrixAutoUpdate]="false"
83-
(pointerdown)="onPointerDown($any($event))"
84-
(pointermove)="onPointerMove($any($event))"
85-
(pointerup)="onPointerUp($any($event))"
86-
(pointerout)="onPointerOut($any($event))"
87-
>
79+
<ngt-group #group [matrix]="matrixL()" [matrixAutoUpdate]="false">
8880
@if (pivotControls.annotations()) {
8981
<ngts-html [options]="{ position: [r(), r(), 0] }">
9082
<div
@@ -169,6 +161,14 @@ export class NgtsAxisRotator {
169161

170162
constructor() {
171163
extend({ Group });
164+
165+
// TODO: (chau) remove this when event binding syntax no longer trigger cdr
166+
injectObjectEvents(this.groupRef, {
167+
pointerdown: this.onPointerDown.bind(this),
168+
pointermove: this.onPointerMove.bind(this),
169+
pointerup: this.onPointerUp.bind(this),
170+
pointerout: this.onPointerOut.bind(this),
171+
});
172172
}
173173

174174
onPointerDown(event: NgtThreeEvent<PointerEvent>) {

‎libs/soba/gizmos/src/lib/pivot-controls/plane-slider.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
signal,
1010
viewChild,
1111
} from '@angular/core';
12-
import { extend, injectStore, NgtThreeEvent } from 'angular-three';
12+
import { extend, injectObjectEvents, injectStore, NgtThreeEvent } from 'angular-three';
1313
import { NgtsLine } from 'angular-three-soba/abstractions';
1414
import { NgtsHTML } from 'angular-three-soba/misc';
1515
import * as THREE from 'three';
@@ -57,15 +57,7 @@ const offsetMatrix = new THREE.Matrix4();
5757
</ngts-html>
5858
}
5959
<ngt-group [position]="[pos1() * 1.7, pos1() * 1.7, 0]">
60-
<ngt-mesh
61-
visible
62-
[scale]="length()"
63-
[userData]="pivotControls.userData()"
64-
(pointerdown)="onPointerDown($any($event))"
65-
(pointermove)="onPointerMove($any($event))"
66-
(pointerup)="onPointerUp($any($event))"
67-
(pointerout)="onPointerOut($any($event))"
68-
>
60+
<ngt-mesh #mesh visible [scale]="length()" [userData]="pivotControls.userData()">
6961
<ngt-plane-geometry />
7062
<ngt-mesh-basic-material
7163
transparent
@@ -107,6 +99,7 @@ export class NgtsPlaneSlider {
10799
axis = input.required<0 | 1 | 2>();
108100

109101
groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
102+
private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
110103
annotationRef = viewChild<string, ElementRef<HTMLDivElement>>('annotation', { read: ElementRef });
111104

112105
protected pivotControls = inject(NgtsPivotControls);
@@ -142,6 +135,14 @@ export class NgtsPlaneSlider {
142135

143136
constructor() {
144137
extend({ Group, Mesh, PlaneGeometry, MeshBasicMaterial });
138+
139+
// TODO: (chau) remove this when event binding syntax no longer trigger cdr
140+
injectObjectEvents(this.meshRef, {
141+
pointerdown: this.onPointerDown.bind(this),
142+
pointermove: this.onPointerMove.bind(this),
143+
pointerup: this.onPointerUp.bind(this),
144+
pointerout: this.onPointerOut.bind(this),
145+
});
145146
}
146147

147148
onPointerDown(event: NgtThreeEvent<PointerEvent>) {

‎libs/soba/gizmos/src/lib/pivot-controls/scaling-sphere.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
signal,
1010
viewChild,
1111
} from '@angular/core';
12-
import { extend, injectStore, NgtArgs, NgtThreeEvent } from 'angular-three';
12+
import { extend, injectObjectEvents, injectStore, NgtArgs, NgtThreeEvent } from 'angular-three';
1313
import { calculateScaleFactor, NgtsHTML } from 'angular-three-soba/misc';
1414
import * as THREE from 'three';
1515
import { Group, Mesh, MeshBasicMaterial, SphereGeometry } from 'three';
@@ -51,14 +51,7 @@ const scaleMatrix = new THREE.Matrix4();
5151
selector: 'ngts-scaling-sphere',
5252
template: `
5353
<ngt-group #group>
54-
<ngt-group
55-
[matrix]="matrixL()"
56-
[matrixAutoUpdate]="false"
57-
(pointerdown)="onPointerDown($any($event))"
58-
(pointermove)="onPointerMove($any($event))"
59-
(pointerup)="onPointerUp($any($event))"
60-
(pointerout)="onPointerOut($any($event))"
61-
>
54+
<ngt-group #innerGroup [matrix]="matrixL()" [matrixAutoUpdate]="false">
6255
@if (pivotControls.annotations()) {
6356
<ngts-html [options]="{ position: [0, position() / 2, 0] }">
6457
<div
@@ -97,6 +90,7 @@ export class NgtsScalingSphere {
9790
axis = input.required<0 | 1 | 2>();
9891

9992
groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
93+
private innerGroupRef = viewChild.required<ElementRef<THREE.Group>>('innerGroup');
10094
annotationRef = viewChild<string, ElementRef<HTMLDivElement>>('annotation', { read: ElementRef });
10195
meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
10296

@@ -130,6 +124,14 @@ export class NgtsScalingSphere {
130124

131125
constructor() {
132126
extend({ Group, Mesh, SphereGeometry, MeshBasicMaterial });
127+
128+
// TODO: (chau) remove this when event binding syntax no longer trigger cdr
129+
injectObjectEvents(this.innerGroupRef, {
130+
pointerdown: this.onPointerDown.bind(this),
131+
pointermove: this.onPointerMove.bind(this),
132+
pointerup: this.onPointerUp.bind(this),
133+
pointerout: this.onPointerOut.bind(this),
134+
});
133135
}
134136

135137
onPointerDown(event: NgtThreeEvent<PointerEvent>) {

‎libs/soba/gizmos/src/lib/transform-controls.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,19 +125,19 @@ export class NgtsTransformControls {
125125
constructor() {
126126
extend({ Group });
127127
effect((onCleanup) => {
128-
const cleanup = this.attachControlsEffect();
128+
const cleanup = this.updateDefaultControlsEffect();
129129
onCleanup(() => cleanup?.());
130130
});
131131
effect((onCleanup) => {
132-
const cleanup = this.disableDefaultControlsEffect();
132+
const cleanup = this.attachControlsEffect();
133133
onCleanup(() => cleanup?.());
134134
});
135135
effect((onCleanup) => {
136-
const cleanup = this.setupControlsEventsEffect();
136+
const cleanup = this.disableDefaultControlsEffect();
137137
onCleanup(() => cleanup?.());
138138
});
139139
effect((onCleanup) => {
140-
const cleanup = this.updateDefaultControlsEffect();
140+
const cleanup = this.setupControlsEventsEffect();
141141
onCleanup(() => cleanup?.());
142142
});
143143
}

0 commit comments

Comments
 (0)