Skip to content

Commit adac197

Browse files
Chau TranChau Tran
Chau Tran
authored and
Chau Tran
committed
fix(core): adjust all selects
1 parent 9b16937 commit adac197

File tree

24 files changed

+369
-175
lines changed

24 files changed

+369
-175
lines changed

‎libs/angular-three/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@ export * from './lib/utils/instance';
2020
export * from './lib/utils/is';
2121
export * from './lib/utils/make';
2222
export * from './lib/utils/safe-detect-changes';
23+
export * from './lib/utils/signal';
2324
export * from './lib/utils/update';

‎libs/angular-three/src/lib/stores/store.ts

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,9 @@ export class NgtStore extends NgtSignalStore<NgtState> {
105105
if (state.performance.current !== state.performance.min)
106106
setPerformanceCurrent(state.performance.min);
107107
// go back to upper bound
108-
performanceTimeout = setTimeout(
109-
() => setPerformanceCurrent(this.get('performance', 'max') || 1),
110-
state.performance.debounce
111-
);
108+
performanceTimeout = setTimeout(() => {
109+
setPerformanceCurrent(this.get('performance', 'max') || 1);
110+
}, state.performance.debounce);
112111
},
113112
},
114113
size: { width: 0, height: 0, top: 0, left: 0 },
@@ -425,14 +424,11 @@ export class NgtStore extends NgtSignalStore<NgtState> {
425424
let oldDpr = state.viewport.dpr;
426425
let oldCamera = state.camera;
427426

428-
const triggers = computed(() => {
429-
return {
430-
camera: this.select('camera')(),
431-
size: this.select('size')(),
432-
viewport: this.select('viewport')(),
433-
gl: this.get('gl'),
434-
};
435-
});
427+
const camera = this.select('camera');
428+
const size = this.select('size');
429+
const viewport = this.select('viewport');
430+
431+
const triggers = computed(() => ({ camera: camera(), size: size(), viewport: viewport(), gl: this.get('gl') }));
436432

437433
effect(
438434
() => {

‎libs/soba/abstractions/src/catmull-rom-line/catmull-rom-line.ts

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -63,26 +63,27 @@ export class NgtsCatmullRomLine extends NgtsLineInputs {
6363
this.set({ segments });
6464
}
6565

66+
readonly #points = this.select('points');
67+
readonly #closed = this.select('closed');
68+
readonly #curveType = this.select('curveType');
69+
readonly #tension = this.select('tension');
70+
6671
readonly #curve = computed(() => {
67-
const points = this.select('points');
68-
const closed = this.select('closed');
69-
const curveType = this.select('curveType');
70-
const tension = this.select('tension');
71-
const mappedPoints = points().map((p) =>
72+
const mappedPoints = this.#points().map((p) =>
7273
p instanceof THREE.Vector3 ? p : new THREE.Vector3(...(p as [number, number, number]))
7374
);
74-
return new CatmullRomCurve3(mappedPoints, closed(), curveType(), tension());
75+
return new CatmullRomCurve3(mappedPoints, this.#closed(), this.#curveType(), this.#tension());
7576
});
7677

78+
readonly #segments = this.select('segments');
7779
readonly segmentedPoints = computed(() => {
7880
const curve = this.#curve();
79-
const segments = this.select('segments');
80-
return curve.getPoints(segments() as number);
81+
return curve.getPoints(this.#segments() as number);
8182
});
8283

8384
readonly interpolatedVertexColors = computed(() => {
8485
const vertexColors = this.select('vertexColors')();
85-
const segments = this.select('segments')() as number;
86+
const segments = this.#segments() as number;
8687

8788
if (!vertexColors || vertexColors.length < 2) return undefined;
8889
if (vertexColors.length === segments + 1) return vertexColors;

‎libs/soba/abstractions/src/line/line-input.ts

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -60,35 +60,33 @@ export abstract class NgtsLineInputs extends NgtSignalStore<NgtsLineState> {
6060
this.set({ worldUnits });
6161
}
6262

63-
readonly lineParameters = computed(() => {
64-
const color = this.select('color');
65-
const vertexColors = this.select('vertexColors');
66-
const resolution = this.select('resolution');
67-
const linewidth = this.select('lineWidth');
68-
const alphaToCoverage = this.select('alphaToCoverage');
69-
const dashed = this.select('dashed');
70-
const dashScale = this.select('dashScale');
71-
const dashSize = this.select('dashSize');
72-
const dashOffset = this.select('dashOffset');
73-
const gapSize = this.select('gapSize');
74-
const wireframe = this.select('wireframe');
75-
const worldUnits = this.select('worldUnits');
76-
77-
return {
78-
color: color(),
79-
vertexColors: vertexColors(),
80-
resolution: resolution(),
81-
linewidth: linewidth(),
82-
alphaToCoverage: alphaToCoverage(),
83-
dashed: dashed(),
84-
dashScale: dashScale(),
85-
dashSize: dashSize(),
86-
dashOffset: dashOffset(),
87-
gapSize: gapSize(),
88-
wireframe: wireframe(),
89-
worldUnits: worldUnits(),
90-
};
91-
});
63+
readonly #color = this.select('color');
64+
readonly #vertexColors = this.select('vertexColors');
65+
readonly #resolution = this.select('resolution');
66+
readonly #linewidth = this.select('lineWidth');
67+
readonly #alphaToCoverage = this.select('alphaToCoverage');
68+
readonly #dashed = this.select('dashed');
69+
readonly #dashScale = this.select('dashScale');
70+
readonly #dashSize = this.select('dashSize');
71+
readonly #dashOffset = this.select('dashOffset');
72+
readonly #gapSize = this.select('gapSize');
73+
readonly #wireframe = this.select('wireframe');
74+
readonly #worldUnits = this.select('worldUnits');
75+
76+
readonly lineParameters = computed(() => ({
77+
color: this.#color(),
78+
vertexColors: this.#vertexColors(),
79+
resolution: this.#resolution(),
80+
linewidth: this.#linewidth(),
81+
alphaToCoverage: this.#alphaToCoverage(),
82+
dashed: this.#dashed(),
83+
dashScale: this.#dashScale(),
84+
dashSize: this.#dashSize(),
85+
dashOffset: this.#dashOffset(),
86+
gapSize: this.#gapSize(),
87+
wireframe: this.#wireframe(),
88+
worldUnits: this.#worldUnits(),
89+
}));
9290

9391
constructor() {
9492
super({ color: 'black' });

‎libs/soba/abstractions/src/line/line.ts

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,16 @@ export class NgtsLine extends NgtsLineInputs {
5151
}
5252

5353
readonly #store = inject(NgtStore);
54+
readonly #size = this.#store.select('size');
5455

55-
readonly #resolution = computed(() => {
56-
const size = this.#store.select('size');
57-
const resolution = this.select('resolution');
58-
return resolution() ? resolution() : [size().width, size().height];
59-
});
56+
readonly #lineResolution = this.select('resolution');
57+
readonly #resolution = computed(() =>
58+
this.#lineResolution() ? this.#lineResolution() : [this.#size().width, this.#size().height]
59+
);
6060

61-
readonly #pointValues = computed(() => {
62-
const points = this.select('points');
63-
return points().map((p) => {
61+
readonly #points = this.select('points');
62+
readonly #pointValues = computed(() =>
63+
this.#points().map((p) => {
6464
const isArray = Array.isArray(p);
6565
return p instanceof THREE.Vector3
6666
? [p.x, p.y, p.z]
@@ -71,19 +71,20 @@ export class NgtsLine extends NgtsLineInputs {
7171
: isArray && p.length === 2
7272
? [p[0], p[1], 0]
7373
: p;
74-
});
75-
});
76-
readonly #vertexColors = computed(() => {
77-
const vertexColors = this.select('vertexColors');
78-
return (vertexColors() || []).map((c) => (c instanceof THREE.Color ? c.toArray() : c));
79-
});
74+
})
75+
);
76+
77+
readonly #vertexColors = this.select('vertexColors');
78+
readonly #vertexColorValues = computed(() =>
79+
(this.#vertexColors() || []).map((c) => (c instanceof THREE.Color ? c.toArray() : c))
80+
);
8081

82+
readonly #segments = this.select('segments');
8183
readonly lineGeometry = computed(() => {
82-
const segments = this.select('segments');
8384
const pointValues = this.#pointValues();
84-
const vertexColors = this.#vertexColors();
85+
const vertexColors = this.#vertexColorValues();
8586

86-
const geometry = segments() ? new LineSegmentsGeometry() : new LineGeometry();
87+
const geometry = this.#segments() ? new LineSegmentsGeometry() : new LineGeometry();
8788
geometry.setPositions(pointValues.flat());
8889

8990
if (vertexColors.length) {
@@ -93,10 +94,7 @@ export class NgtsLine extends NgtsLineInputs {
9394
return geometry;
9495
});
9596
readonly lineMaterial = new LineMaterial();
96-
readonly line = computed(() => {
97-
const segments = this.select('segments');
98-
return segments() ? new LineSegments2() : new Line2();
99-
});
97+
readonly line = computed(() => (this.#segments() ? new LineSegments2() : new Line2()));
10098

10199
readonly lineMaterialParameters = computed(() => {
102100
const parameters = this.lineParameters();
@@ -123,8 +121,8 @@ export class NgtsLine extends NgtsLineInputs {
123121
}
124122

125123
#computeLineDistances() {
124+
const points = this.select('points');
126125
const trigger = computed(() => {
127-
const points = this.select('points');
128126
const lineGeometry = this.lineGeometry();
129127
const line = this.lineRef.nativeElement;
130128
const children = this.lineRef.children('nonObjects');

‎libs/soba/abstractions/src/quadratic-bezier-line/quadratic-bezier-line.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,13 @@ export class NgtsQuadraticBezierLine extends NgtsLineInputs {
5959
this.set({ segments });
6060
}
6161

62-
readonly points = computed(() => {
63-
const start = this.select('start');
64-
const end = this.select('end');
65-
const mid = this.select('mid');
66-
const segments = this.select('segments');
67-
return this.#getPoints(start(), end(), mid(), segments() as number);
68-
});
62+
readonly #start = this.select('start');
63+
readonly #end = this.select('end');
64+
readonly #mid = this.select('mid');
65+
readonly #segments = this.select('segments');
66+
readonly points = computed(() =>
67+
this.#getPoints(this.#start(), this.#end(), this.#mid(), this.#segments() as number)
68+
);
6969

7070
constructor() {
7171
super();

‎libs/soba/abstractions/src/text-3d/text-3d.ts

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -131,36 +131,35 @@ export class NgtsText3D extends NgtSignalStore<NgtsText3DState> {
131131
)
132132
);
133133

134+
readonly #text = this.select('text');
135+
readonly #size = this.select('size');
136+
readonly #height = this.select('height');
137+
readonly #bevelThickness = this.select('bevelThickness');
138+
readonly #bevelSize = this.select('bevelSize');
139+
readonly #bevelEnabled = this.select('bevelEnabled');
140+
readonly #bevelSegments = this.select('bevelSegments');
141+
readonly #bevelOffset = this.select('bevelOffset');
142+
readonly #curveSegments = this.select('curveSegments');
143+
readonly #letterSpacing = this.select('letterSpacing');
144+
readonly #lineHeight = this.select('lineHeight');
134145
readonly geometryArgs = computed(() => {
135146
const fontData = this.#fontData();
136147
if (!fontData) return null;
137148

138-
const text = this.select('text');
139-
const size = this.select('size');
140-
const height = this.select('height');
141-
const bevelThickness = this.select('bevelThickness');
142-
const bevelSize = this.select('bevelSize');
143-
const bevelEnabled = this.select('bevelEnabled');
144-
const bevelSegments = this.select('bevelSegments');
145-
const bevelOffset = this.select('bevelOffset');
146-
const curveSegments = this.select('curveSegments');
147-
const letterSpacing = this.select('letterSpacing');
148-
const lineHeight = this.select('lineHeight');
149-
150149
return [
151-
text(),
150+
this.#text(),
152151
{
153152
font: fontData,
154-
size: size(),
155-
height: height(),
156-
bevelThickness: bevelThickness(),
157-
bevelSize: bevelSize(),
158-
bevelSegments: bevelSegments(),
159-
bevelEnabled: bevelEnabled(),
160-
bevelOffset: bevelOffset(),
161-
curveSegments: curveSegments(),
162-
letterSpacing: letterSpacing(),
163-
lineHeight: lineHeight(),
153+
size: this.#size(),
154+
height: this.#height(),
155+
bevelThickness: this.#bevelThickness(),
156+
bevelSize: this.#bevelSize(),
157+
bevelSegments: this.#bevelSegments(),
158+
bevelEnabled: this.#bevelEnabled(),
159+
bevelOffset: this.#bevelOffset(),
160+
curveSegments: this.#curveSegments(),
161+
letterSpacing: this.#letterSpacing(),
162+
lineHeight: this.#lineHeight(),
164163
},
165164
] as const;
166165
});

‎libs/soba/abstractions/src/text/text.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -228,11 +228,9 @@ export class NgtsText extends NgtSignalStore<NgtsTextState> {
228228
}
229229

230230
#preloadFont() {
231-
const trigger = computed(() => {
232-
const font = this.select('font');
233-
const characters = this.select('characters');
234-
return { font: font(), characters: characters() };
235-
});
231+
const font = this.select('font');
232+
const characters = this.select('characters');
233+
const trigger = computed(() => ({ font: font(), characters: characters() }));
236234

237235
effect(() => {
238236
const { font, characters } = trigger();
@@ -242,8 +240,9 @@ export class NgtsText extends NgtSignalStore<NgtsTextState> {
242240
}
243241

244242
#syncText() {
243+
const state = this.select();
245244
effect(() => {
246-
this.select()();
245+
state();
247246
const invalidate = this.#store.get('invalidate');
248247
this.troikaText.sync(() => {
249248
invalidate();

‎libs/soba/cameras/src/camera/camera.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,8 @@ export abstract class NgtsCamera<TCamera extends NgtCamera> extends NgtSignalSto
3535
@Input() cameraRef = injectNgtRef<TCamera>();
3636

3737
protected readonly store = inject(NgtStore);
38-
readonly fboRef = injectNgtsFBO(() => {
39-
const resolution = this.select('resolution');
40-
return { width: resolution() };
41-
});
38+
readonly #resolution = this.select('resolution');
39+
readonly fboRef = injectNgtsFBO(() => ({ width: this.#resolution() }));
4240

4341
constructor() {
4442
super({ resolution: 256, frames: Infinity, makeDefault: false, manual: false });
@@ -47,10 +45,10 @@ export abstract class NgtsCamera<TCamera extends NgtCamera> extends NgtSignalSto
4745
}
4846

4947
#setDefaultCamera() {
48+
const makeDefault = this.select('makeDefault');
5049
effect(
5150
(onCleanup) => {
5251
const camera = this.cameraRef.nativeElement;
53-
const makeDefault = this.select('makeDefault');
5452
if (camera && makeDefault()) {
5553
const { camera: oldCamera } = this.store.get();
5654
this.store.set({ camera });
@@ -62,9 +60,9 @@ export abstract class NgtsCamera<TCamera extends NgtCamera> extends NgtSignalSto
6260
}
6361

6462
#updateProjectionMatrix() {
63+
const manual = this.select('manual');
6564
effect(() => {
6665
const camera = this.cameraRef.nativeElement;
67-
const manual = this.select('manual');
6866
if (!manual() && camera) camera.updateProjectionMatrix();
6967
});
7068
}

‎libs/soba/cameras/src/orthographic-camera/orthographic-camera.ts

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -59,29 +59,16 @@ export class NgtsOrthographicCamera extends NgtsCamera<THREE.OrthographicCamera>
5959
this.set({ bottom });
6060
}
6161

62-
readonly cameraLeft = computed(() => {
63-
const left = this.select('left');
64-
const size = this.store.select('size');
65-
return left() || size().width / -2;
66-
});
62+
readonly #left = this.select('left');
63+
readonly #right = this.select('right');
64+
readonly #top = this.select('top');
65+
readonly #bottom = this.select('bottom');
66+
readonly #size = this.store.select('size');
6767

68-
readonly cameraRight = computed(() => {
69-
const right = this.select('right');
70-
const size = this.store.select('size');
71-
return right() || size().width / 2;
72-
});
73-
74-
readonly cameraTop = computed(() => {
75-
const top = this.select('top');
76-
const size = this.store.select('size');
77-
return top() || size().height / 2;
78-
});
79-
80-
readonly cameraBottom = computed(() => {
81-
const bottom = this.select('bottom');
82-
const size = this.store.select('size');
83-
return bottom() || size().height / -2;
84-
});
68+
readonly cameraLeft = computed(() => this.#left() || this.#size().width / -2);
69+
readonly cameraRight = computed(() => this.#right() || this.#size().width / 2);
70+
readonly cameraTop = computed(() => this.#top() || this.#size().height / 2);
71+
readonly cameraBottom = computed(() => this.#bottom() || this.#size().height / -2);
8572

8673
constructor() {
8774
super();

0 commit comments

Comments
 (0)