Skip to content

Commit b16d477

Browse files
nartcnartc
committed
refactor(soba): update controls with new renderer
1 parent 86ff1a7 commit b16d477

File tree

3 files changed

+71
-80
lines changed

3 files changed

+71
-80
lines changed

‎libs/soba/controls/src/lib/camera-controls.ts

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,7 @@ import {
1010
import { injectBeforeRender, injectStore, NgtArgs, NgtCamera, omit, pick } from 'angular-three';
1111
import CameraControls from 'camera-controls';
1212
import { mergeInputs } from 'ngxtension/inject-inputs';
13-
import {
14-
Box3,
15-
EventDispatcher,
16-
MathUtils,
17-
Matrix4,
18-
Quaternion,
19-
Raycaster,
20-
Sphere,
21-
Spherical,
22-
Vector2,
23-
Vector3,
24-
Vector4,
25-
} from 'three';
13+
import * as THREE from 'three';
2614

2715
export interface NgtsCameraControlsOptions {
2816
camera?: NgtCamera;
@@ -51,26 +39,21 @@ const defaultOptions: Partial<CameraControls> & NgtsCameraControlsOptions = {
5139
})
5240
export class NgtsCameraControls {
5341
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
54-
parameters = omit(this.options, ['makeDefault', 'camera', 'regress', 'domElement']);
42+
protected parameters = omit(this.options, ['makeDefault', 'camera', 'regress', 'domElement']);
5543

5644
changed = output<any>();
5745
started = output<any>();
5846
ended = output<any>();
5947

6048
private store = injectStore();
61-
private invalidate = this.store.select('invalidate');
62-
private performanceRegress = this.store.select('performance', 'regress');
63-
private defaultCamera = this.store.select('camera');
64-
private glDomElement = this.store.select('gl', 'domElement');
65-
private eventsElement = this.store.select('events', 'connected');
6649

6750
private camera = pick(this.options, 'camera');
6851
private regress = pick(this.options, 'regress');
6952
private domElement = pick(this.options, 'domElement');
7053
private makeDefault = pick(this.options, 'makeDefault');
7154

7255
controls = computed(() => {
73-
const [camera, defaultCamera] = [this.camera(), this.defaultCamera()];
56+
const [camera, defaultCamera] = [this.camera(), this.store.camera()];
7457
return new CameraControls(camera || defaultCamera);
7558
});
7659

@@ -79,16 +62,16 @@ export class NgtsCameraControls {
7962
// see https://github.com/yomotsu/camera-controls#important
8063
CameraControls.install({
8164
THREE: {
82-
Box3,
83-
MathUtils: { clamp: MathUtils.clamp },
84-
Matrix4,
85-
Quaternion,
86-
Raycaster,
87-
Sphere,
88-
Spherical,
89-
Vector2,
90-
Vector3,
91-
Vector4,
65+
Box3: THREE.Box3,
66+
MathUtils: { clamp: THREE.MathUtils.clamp },
67+
Matrix4: THREE.Matrix4,
68+
Quaternion: THREE.Quaternion,
69+
Raycaster: THREE.Raycaster,
70+
Sphere: THREE.Sphere,
71+
Spherical: THREE.Spherical,
72+
Vector2: THREE.Vector2,
73+
Vector3: THREE.Vector3,
74+
Vector4: THREE.Vector4,
9275
},
9376
});
9477

@@ -98,7 +81,7 @@ export class NgtsCameraControls {
9881

9982
const controls = this.controls();
10083
const oldControls = this.store.snapshot.controls;
101-
this.store.update({ controls: controls as unknown as EventDispatcher });
84+
this.store.update({ controls: controls as unknown as THREE.EventDispatcher });
10285
onCleanup(() => void this.store.update({ controls: oldControls }));
10386
});
10487

@@ -115,8 +98,8 @@ export class NgtsCameraControls {
11598
effect((onCleanup) => {
11699
const [domElement, eventsElement, glDomElement, controls] = [
117100
this.domElement(),
118-
this.eventsElement(),
119-
this.glDomElement(),
101+
this.store.events.connected?.(),
102+
this.store.gl.domElement(),
120103
this.controls(),
121104
];
122105
controls.connect(domElement || eventsElement || glDomElement);
@@ -127,7 +110,11 @@ export class NgtsCameraControls {
127110
const controls = this.controls();
128111
if (!controls) return;
129112

130-
const [regress, performanceRegress, invalidate] = [this.regress(), this.performanceRegress(), this.invalidate()];
113+
const [regress, performanceRegress, invalidate] = [
114+
this.regress(),
115+
this.store.performance.regress(),
116+
this.store.invalidate(),
117+
];
131118

132119
const callback = (e: any) => {
133120
invalidate();

‎libs/soba/controls/src/lib/orbit-controls.ts

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, input, output } from '@angular/core';
22
import { injectBeforeRender, injectStore, NgtArgs, NgtCamera, NgtVector3, omit, pick } from 'angular-three';
33
import { mergeInputs } from 'ngxtension/inject-inputs';
4-
import { Camera, Event } from 'three';
4+
import * as THREE from 'three';
55
import { OrbitControls } from 'three-stdlib';
66

77
export interface NgtsOrbitControlsOptions {
8-
camera?: Camera;
8+
camera?: THREE.Camera;
99
domElement?: HTMLElement;
1010
target?: NgtVector3;
1111
makeDefault: boolean;
@@ -33,17 +33,20 @@ const defaultOptions: Partial<OrbitControls> & NgtsOrbitControlsOptions = {
3333
})
3434
export class NgtsOrbitControls {
3535
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
36-
parameters = omit(this.options, ['makeDefault', 'camera', 'regress', 'domElement', 'keyEvents', 'enableDamping']);
37-
38-
changed = output<Event>();
39-
started = output<Event>();
40-
ended = output<Event>();
36+
protected parameters = omit(this.options, [
37+
'makeDefault',
38+
'camera',
39+
'regress',
40+
'domElement',
41+
'keyEvents',
42+
'enableDamping',
43+
]);
44+
45+
changed = output<THREE.Event>();
46+
started = output<THREE.Event>();
47+
ended = output<THREE.Event>();
4148

4249
private store = injectStore();
43-
private invalidate = this.store.select('invalidate');
44-
private performanceRegress = this.store.select('performance', 'regress');
45-
private defaultCamera = this.store.select('camera');
46-
private glDomElement = this.store.select('gl', 'domElement');
4750

4851
private camera = pick(this.options, 'camera');
4952
private regress = pick(this.options, 'regress');
@@ -52,7 +55,7 @@ export class NgtsOrbitControls {
5255
private makeDefault = pick(this.options, 'makeDefault');
5356

5457
controls = computed(() => {
55-
const [camera, defaultCamera] = [this.camera(), this.defaultCamera()];
58+
const [camera, defaultCamera] = [this.camera(), this.store.camera()];
5659
const controlsCamera = camera || defaultCamera;
5760
return new OrbitControls(controlsCamera as NgtCamera);
5861
});
@@ -77,20 +80,22 @@ export class NgtsOrbitControls {
7780
const controls = this.controls();
7881
if (!controls) return;
7982

80-
const oldControls = this.store.get('controls');
83+
const oldControls = this.store.snapshot.controls;
8184
this.store.update({ controls });
8285
onCleanup(() => void this.store.update({ controls: oldControls }));
8386
});
8487

8588
effect((onCleanup) => {
86-
const [keyEvents, domElement, controls] = [
89+
const controls = this.controls();
90+
if (!controls) return;
91+
92+
const [keyEvents, domElement] = [
8793
this.keyEvents(),
88-
this.domElement() || this.store.get('events', 'connected') || this.glDomElement(),
89-
this.controls(),
90-
this.invalidate(),
94+
this.domElement() || this.store.snapshot.events.connected || this.store.gl.domElement(),
95+
this.store.invalidate(),
9196
this.regress(),
9297
];
93-
if (!controls) return;
98+
9499
if (keyEvents) {
95100
controls.connect(keyEvents === true ? domElement : keyEvents);
96101
} else {
@@ -103,9 +108,13 @@ export class NgtsOrbitControls {
103108
const controls = this.controls();
104109
if (!controls) return;
105110

106-
const [invalidate, performanceRegress, regress] = [this.invalidate(), this.performanceRegress(), this.regress()];
111+
const [invalidate, performanceRegress, regress] = [
112+
this.store.invalidate(),
113+
this.store.performance.regress(),
114+
this.regress(),
115+
];
107116

108-
const changeCallback: (e: Event) => void = (e) => {
117+
const changeCallback: (e: THREE.Event) => void = (e) => {
109118
invalidate();
110119
if (regress) performanceRegress();
111120
this.changed.emit(e);

‎libs/soba/controls/src/lib/scroll-controls.ts

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
import { injectBeforeRender, injectStore, NgtHTML, pick, provideHTMLDomElement } from 'angular-three';
1414
import { easing } from 'maath';
1515
import { mergeInputs } from 'ngxtension/inject-inputs';
16-
import { Group } from 'three';
16+
import * as THREE from 'three';
1717

1818
export interface NgtsScrollControlsOptions {
1919
/** Precision, default 0.00001 */
@@ -65,13 +65,6 @@ export class NgtsScrollControls {
6565

6666
private document = inject(DOCUMENT);
6767
private store = injectStore();
68-
private gl = this.store.select('gl');
69-
private events = this.store.select('events');
70-
private invalidate = this.store.select('invalidate');
71-
private size = this.store.select('size');
72-
73-
private domElement = pick(this.gl, 'domElement');
74-
private target = pick(this.domElement, 'parentNode');
7568

7669
private _el = this.document.createElement('div');
7770
private _fill = this.document.createElement('div');
@@ -82,6 +75,7 @@ export class NgtsScrollControls {
8275
private enabled = pick(this.options, 'enabled');
8376
private infinite = pick(this.options, 'infinite');
8477
private maxSpeed = pick(this.options, 'maxSpeed');
78+
8579
eps = pick(this.options, 'eps');
8680
horizontal = pick(this.options, 'horizontal');
8781
pages = pick(this.options, 'pages');
@@ -93,7 +87,7 @@ export class NgtsScrollControls {
9387

9488
constructor() {
9589
effect((onCleanup) => {
96-
const target = this.target();
90+
const target = this.store.gl.domElement.parentNode();
9791
if (!target) return;
9892

9993
const parent = target as HTMLElement;
@@ -106,8 +100,8 @@ export class NgtsScrollControls {
106100
this.fixed,
107101
untracked(this.style),
108102
untracked(this.prepend),
109-
untracked(this.domElement),
110-
untracked(this.events),
103+
this.store.snapshot.gl.domElement,
104+
this.store.snapshot.events,
111105
];
112106

113107
el.style.position = 'absolute';
@@ -165,13 +159,13 @@ export class NgtsScrollControls {
165159
});
166160

167161
effect((onCleanup) => {
168-
const [el, events] = [this.el, this.events()];
162+
const [el, events] = [this.el, this.store.events()];
169163
if (!events.connected || events.connected !== el) return;
170164

171165
const [size, infinite, invalidate, horizontal, enabled] = [
172-
this.size(),
166+
this.store.size(),
173167
this.infinite(),
174-
this.invalidate(),
168+
this.store.invalidate(),
175169
this.horizontal(),
176170
this.enabled(),
177171
];
@@ -237,7 +231,7 @@ export class NgtsScrollControls {
237231
undefined,
238232
this.eps(),
239233
);
240-
if (this.delta > this.eps()) this.invalidate()();
234+
if (this.delta > this.eps()) this.store.invalidate()();
241235
});
242236
}
243237

@@ -270,45 +264,46 @@ export class NgtsScrollControls {
270264
}
271265
}
272266

273-
@Directive({ selector: 'ngt-group[ngtsScrollCanvas]' })
274-
export class NgtsScrollCanvas {
275-
private host = inject<ElementRef<Group>>(ElementRef);
267+
@Directive({ selector: 'ngt-group[canvasScrollContent]' })
268+
export class NgtsCanvasScrollContent {
269+
private host = inject<ElementRef<THREE.Group>>(ElementRef);
276270
private scrollControls = inject(NgtsScrollControls);
277271
private store = injectStore();
278-
private viewport = this.store.select('viewport');
279272

280273
constructor() {
281274
injectBeforeRender(() => {
282275
const group = this.host.nativeElement;
283276

284277
group.position.x = this.scrollControls.horizontal()
285-
? -this.viewport().width * (this.scrollControls.pages() - 1) * this.scrollControls.offset
278+
? -this.store.snapshot.viewport.width * (this.scrollControls.pages() - 1) * this.scrollControls.offset
286279
: 0;
287280
group.position.y = this.scrollControls.horizontal()
288281
? 0
289-
: this.viewport().height * (this.scrollControls.pages() - 1) * this.scrollControls.offset;
282+
: this.store.snapshot.viewport.height * (this.scrollControls.pages() - 1) * this.scrollControls.offset;
290283
});
291284
}
292285
}
293286

294287
@Directive({
295-
selector: 'div[ngtsScrollHTML]',
288+
selector: 'div[htmlScrollContent]',
296289
host: { style: 'position: absolute; top: 0; left: 0; will-change: transform;' },
297290
providers: [provideHTMLDomElement([NgtsScrollControls], (scrollControls) => scrollControls.fixed)],
298291
})
299-
export class NgtsScrollHtml extends NgtHTML {
292+
export class NgtsHTMLScrollContent extends NgtHTML {
300293
private scrollControls = inject(NgtsScrollControls);
301-
private size = this.store.select('size');
294+
private store = injectStore();
295+
private host = inject<ElementRef<HTMLDivElement>>(ElementRef);
302296

303297
constructor() {
304298
super();
299+
305300
injectBeforeRender(() => {
306301
if (this.scrollControls.delta > this.scrollControls.eps()) {
307302
this.host.nativeElement.style.transform = `translate3d(${
308303
this.scrollControls.horizontal()
309-
? -this.size().width * (this.scrollControls.pages() - 1) * this.scrollControls.offset
304+
? -this.store.snapshot.size.width * (this.scrollControls.pages() - 1) * this.scrollControls.offset
310305
: 0
311-
}px,${this.scrollControls.horizontal() ? 0 : this.size().height * (this.scrollControls.pages() - 1) * -this.scrollControls.offset}px,0)`;
306+
}px,${this.scrollControls.horizontal() ? 0 : this.store.snapshot.size.height * (this.scrollControls.pages() - 1) * -this.scrollControls.offset}px,0)`;
312307
}
313308
});
314309
}

0 commit comments

Comments
 (0)