Skip to content

Commit 441a5f0

Browse files
nartcnartc
committed
refactor(soba): update abstractions with new renderer
1 parent 6cf56c3 commit 441a5f0

File tree

12 files changed

+78
-49
lines changed

12 files changed

+78
-49
lines changed

‎apps/docs/astro.config.mjs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,14 @@ export default defineConfig({
6868
plugins: [includeContentPlugin()],
6969
},
7070
integrations: [
71-
analogjsangular(),
71+
analogjsangular({
72+
vite: {
73+
transformFilter: (_, id) => {
74+
// we only transform files in components/scenes
75+
return id.includes('components/scenes');
76+
},
77+
},
78+
}),
7279
starlight({
7380
title: 'Angular Three',
7481
plugins: [

‎libs/soba/abstractions/src/lib/billboard.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
} from '@angular/core';
99
import { extend, injectBeforeRender, NgtThreeElements, omit } from 'angular-three';
1010
import { mergeInputs } from 'ngxtension/inject-inputs';
11-
import { Group, Quaternion } from 'three';
11+
import * as THREE from 'three';
12+
import { Group } from 'three';
1213

1314
export interface NgtsBillboardOptions extends Partial<NgtThreeElements['ngt-group']> {
1415
follow?: boolean;
@@ -38,15 +39,15 @@ const defaultOptions: NgtsBillboardOptions = {
3839
})
3940
export class NgtsBillboard {
4041
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
41-
parameters = omit(this.options, ['follow', 'lockX', 'lockY', 'lockZ']);
42+
protected parameters = omit(this.options, ['follow', 'lockX', 'lockY', 'lockZ']);
4243

4344
groupRef = viewChild.required<ElementRef<Group>>('group');
4445
innerRef = viewChild.required<ElementRef<Group>>('inner');
4546

4647
constructor() {
4748
extend({ Group });
4849

49-
const q = new Quaternion();
50+
const q = new THREE.Quaternion();
5051
injectBeforeRender(({ camera }) => {
5152
const [{ follow, lockX, lockY, lockZ }, group, inner] = [
5253
this.options(),

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ChangeDetectionStrategy, Component, computed, input, untracked, viewChild } from '@angular/core';
2-
import { omit, pick } from 'angular-three';
2+
import { is, omit, pick } from 'angular-three';
33
import { mergeInputs } from 'ngxtension/inject-inputs';
44
import * as THREE from 'three';
55
import { NgtsLine, NgtsLineOptions } from './line';
@@ -32,7 +32,7 @@ const defaultOptions: NgtsCatmullRomLineOptions = {
3232
export class NgtsCatmullRomLine {
3333
points = input.required<Array<THREE.Vector3 | [number, number, number]>>();
3434
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
35-
parameters = omit(this.options, ['curveType', 'tension', 'segments', 'closed', 'vertexColors']);
35+
private parameters = omit(this.options, ['curveType', 'tension', 'segments', 'closed', 'vertexColors']);
3636

3737
line = viewChild.required(NgtsLine);
3838

@@ -46,13 +46,13 @@ export class NgtsCatmullRomLine {
4646
const [points, closed, curveType, tension] = [this.points(), this.closed(), this.curveType(), this.tension()];
4747

4848
const mappedPoints = points.map((pt) =>
49-
(pt as THREE.Vector3).isVector3 ? (pt as THREE.Vector3) : new THREE.Vector3(...(pt as [number, number, number])),
49+
is.three<THREE.Vector3>(pt, 'isVector3') ? pt : new THREE.Vector3(...(pt as [number, number, number])),
5050
);
5151

5252
return new THREE.CatmullRomCurve3(mappedPoints, closed, curveType, tension);
5353
});
5454

55-
segmentedPoints = computed(() => {
55+
protected segmentedPoints = computed(() => {
5656
const [curve, segments] = [this.curve(), this.segments()];
5757
return curve.getPoints(segments);
5858
});
@@ -64,7 +64,7 @@ export class NgtsCatmullRomLine {
6464
if (vertexColors.length === segments + 1) return vertexColors;
6565

6666
const mappedColors = vertexColors.map((color) =>
67-
(color as THREE.Color).isColor ? (color as THREE.Color) : new THREE.Color(...(color as [number, number, number])),
67+
is.three<THREE.Color>(color, 'isColor') ? color : new THREE.Color(...(color as [number, number, number])),
6868
);
6969
if (untracked(this.closed)) mappedColors.push(mappedColors[0].clone());
7070

@@ -80,5 +80,5 @@ export class NgtsCatmullRomLine {
8080
return iColors;
8181
});
8282

83-
lineOptions = computed(() => ({ ...this.parameters(), vertexColors: this.interpolatedVertexColors() }));
83+
protected lineOptions = computed(() => ({ ...this.parameters(), vertexColors: this.interpolatedVertexColors() }));
8484
}

‎libs/soba/abstractions/src/lib/cubic-bezier-line.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@ export class NgtsCubicBezierLine {
2929
midA = input.required<THREE.Vector3 | [number, number, number]>();
3030
midB = input.required<THREE.Vector3 | [number, number, number]>();
3131
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
32-
parameters = omit(this.options, ['segments']);
32+
protected parameters = omit(this.options, ['segments']);
3333

3434
line = viewChild.required(NgtsLine);
3535

3636
private segments = pick(this.options, 'segments');
3737

38-
points = computed(() => {
38+
protected points = computed(() => {
3939
const [start, end, midA, midB, segments] = [this.start(), this.end(), this.midA(), this.midB(), this.segments()];
4040
const startV = is.three<THREE.Vector3>(start, 'isVector3') ? start : new THREE.Vector3(...start);
4141
const endV = is.three<THREE.Vector3>(end, 'isVector3') ? end : new THREE.Vector3(...end);

‎libs/soba/abstractions/src/lib/gradient-texture.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ export class NgtsGradientTexture {
5050
stops = input.required<Array<number>>();
5151
colors = input.required<Array<THREE.ColorRepresentation>>();
5252
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
53-
parameters = omit(this.options, ['size', 'width', 'type', 'innerCircleRadius', 'outerCircleRadius']);
53+
protected parameters = omit(this.options, ['size', 'width', 'type', 'innerCircleRadius', 'outerCircleRadius']);
5454

55-
private store = injectStore();
56-
outputColorSpace = this.store.gl.outputColorSpace;
5755
private document = inject(DOCUMENT);
56+
private store = injectStore();
57+
protected outputColorSpace = this.store.gl.outputColorSpace;
5858

59-
canvas = computed(() => {
59+
protected canvas = computed(() => {
6060
const canvas = this.document.createElement('canvas');
6161
const context = canvas.getContext('2d')!;
6262
const [{ width, size, type, outerCircleRadius, innerCircleRadius }, stops, colors] = [

‎libs/soba/abstractions/src/lib/grid.ts

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const defaultOptions: Partial<NgtThreeElements['ngt-mesh']> &
4747
})
4848
export class NgtsGrid {
4949
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
50-
parameters = omit(this.options, [
50+
protected parameters = omit(this.options, [
5151
'planeArgs',
5252
'cellSize',
5353
'cellThickness',
@@ -69,10 +69,23 @@ export class NgtsGrid {
6969
private upVector = new THREE.Vector3(0, 1, 0);
7070
private zeroVector = new THREE.Vector3(0, 0, 0);
7171

72-
planeArgs = pick(this.options, 'planeArgs');
73-
side = pick(this.options, 'side');
74-
uniforms = computed(() => {
75-
const {
72+
protected planeArgs = pick(this.options, 'planeArgs');
73+
protected side = pick(this.options, 'side');
74+
75+
private cellSize = pick(this.options, 'cellSize');
76+
private sectionSize = pick(this.options, 'sectionSize');
77+
private cellColor = pick(this.options, 'cellColor');
78+
private sectionColor = pick(this.options, 'sectionColor');
79+
private cellThickness = pick(this.options, 'cellThickness');
80+
private sectionThickness = pick(this.options, 'sectionThickness');
81+
private fadeDistance = pick(this.options, 'fadeDistance');
82+
private fadeStrength = pick(this.options, 'fadeStrength');
83+
private fadeFrom = pick(this.options, 'fadeFrom');
84+
private infiniteGrid = pick(this.options, 'infiniteGrid');
85+
private followCamera = pick(this.options, 'followCamera');
86+
87+
protected uniforms = computed(() => {
88+
const [
7689
cellSize,
7790
sectionSize,
7891
cellColor,
@@ -84,7 +97,20 @@ export class NgtsGrid {
8497
fadeFrom,
8598
infiniteGrid,
8699
followCamera,
87-
} = this.options();
100+
] = [
101+
this.cellSize(),
102+
this.sectionSize(),
103+
this.cellColor(),
104+
this.sectionColor(),
105+
this.cellThickness(),
106+
this.sectionThickness(),
107+
this.fadeDistance(),
108+
this.fadeStrength(),
109+
this.fadeFrom(),
110+
this.infiniteGrid(),
111+
this.followCamera(),
112+
];
113+
88114
return {
89115
cellSize,
90116
sectionSize,

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,30 +69,30 @@ export class NgtsLine {
6969
points =
7070
input.required<Array<THREE.Vector3 | THREE.Vector2 | [number, number, number] | [number, number] | number>>();
7171
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
72-
parameters = omit(this.options, ['color', 'vertexColors', 'lineWidth', 'segments', 'linewidth', 'dashed']);
72+
protected parameters = omit(this.options, ['color', 'vertexColors', 'lineWidth', 'segments', 'linewidth', 'dashed']);
7373

7474
lineRef = viewChild<ElementRef<Line2 | LineSegments2>>('line');
7575

7676
private store = injectStore();
77-
private size = this.store.size;
7877

7978
private segments = pick(this.options, 'segments');
8079
private vertexColors = pick(this.options, 'vertexColors');
8180

8281
protected dashed = pick(this.options, 'dashed');
8382
protected color = pick(this.options, 'color');
8483
protected vertex = computed(() => Boolean(this.vertexColors()));
85-
protected resolution = computed(() => [this.size().width, this.size().height]);
84+
protected resolution = computed(() => [this.store.size.width(), this.store.size.height()]);
8685

8786
private lineWidth = pick(this.options, 'lineWidth');
8887
private linewidth = pick(this.options, 'linewidth');
8988

90-
line2 = computed(() => (this.segments() ? new LineSegments2() : new Line2()));
91-
lineMaterial = new LineMaterial();
89+
protected line2 = computed(() => (this.segments() ? new LineSegments2() : new Line2()));
90+
protected lineMaterial = new LineMaterial();
9291

9392
protected actualLineWidth = computed(() => this.linewidth() ?? this.lineWidth() ?? 1);
9493
protected itemSize = computed(() => ((this.vertexColors()?.[0] as number[] | undefined)?.length === 4 ? 4 : 3));
9594

95+
// other Line components access this
9696
lineGeometry = computed(() => {
9797
const geom = this.segments() ? new LineSegmentsGeometry() : new LineGeometry();
9898
const pValues = this.points().map((p) => {

‎libs/soba/abstractions/src/lib/prism-geometry.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ export class NgtsPrismGeometry {
3838
vertices = input.required<Array<THREE.Vector2 | [number, number]>>();
3939
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
4040

41-
parameters = computed(() => ({ ...this.options(), depth: this.options().height }));
42-
shape = computed(() => {
41+
protected parameters = computed(() => ({ ...this.options(), depth: this.options().height }));
42+
protected shape = computed(() => {
4343
const vertices = this.vertices();
4444
const interpolatedVertices = vertices.map((v) =>
4545
is.three<THREE.Vector2>(v, 'isVector2') ? v : new THREE.Vector2(...v),

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@ export class NgtsQuadraticBezierLine {
2828
end = input<THREE.Vector3 | [number, number, number]>([0, 0, 0]);
2929
mid = input<THREE.Vector3 | [number, number, number]>();
3030
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
31-
parameters = omit(this.options, ['segments']);
31+
protected parameters = omit(this.options, ['segments']);
3232

3333
private segments = pick(this.options, 'segments');
3434

3535
line = viewChild.required(NgtsLine);
3636

37-
points = computed(() => this.getPoints(this.start(), this.end(), this.mid(), this.segments()));
37+
protected points = computed(() => this.getPoints(this.start(), this.end(), this.mid(), this.segments()));
3838

3939
private curve = new THREE.QuadraticBezierCurve3();
4040

‎libs/soba/abstractions/src/lib/rounded-box.ts

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const defaultOptions: NgtsRoundedBoxOptions = {
5454
selector: 'ngts-rounded-box',
5555
template: `
5656
<ngt-mesh #mesh [parameters]="parameters()">
57-
<ngt-extrude-geometry #geometry *args="[shape(), params()]" />
57+
<ngt-extrude-geometry #geometry *args="[shape(), geometryParameters()]" />
5858
<ng-content />
5959
</ngt-mesh>
6060
`,
@@ -84,7 +84,7 @@ const defaultOptions: NgtsRoundedBoxOptions = {
8484
})
8585
export class NgtsRoundedBox {
8686
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
87-
parameters = omit(this.options, [
87+
protected parameters = omit(this.options, [
8888
'width',
8989
'height',
9090
'depth',
@@ -111,7 +111,7 @@ export class NgtsRoundedBox {
111111
const [width, height, radius] = [this.width(), this.height(), this.radius()];
112112
return createShape(width, height, radius);
113113
});
114-
protected params = computed(() => {
114+
protected geometryParameters = computed(() => {
115115
const [depth, radius, smoothness, bevelSegments, steps] = [
116116
this.depth(),
117117
this.radius(),
@@ -135,11 +135,7 @@ export class NgtsRoundedBox {
135135
extend({ ExtrudeGeometry, Mesh });
136136

137137
const objectEvents = inject(NgtObjectEvents, { host: true });
138-
139-
effect(() => {
140-
const mesh = this.meshRef().nativeElement;
141-
objectEvents.ngtObjectEvents.set(mesh);
142-
});
138+
objectEvents.ngtObjectEvents.set(this.meshRef);
143139

144140
effect(() => {
145141
const geometry = this.geometryRef()?.nativeElement;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export class NgtsText3D {
8181
'curveSegments',
8282
]);
8383

84-
textArgs = computed(() => {
84+
protected textArgs = computed(() => {
8585
const font = this.loadedFont();
8686
if (!font) return null;
8787

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -77,20 +77,19 @@ const defaultOptions: NgtsTextOptions = {
7777
export class NgtsText {
7878
text = input.required<string>();
7979
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
80-
parameters = omit(this.options, ['font', 'fontSize', 'sdfGlyphSize', 'anchorX', 'anchorY', 'characters']);
80+
protected parameters = omit(this.options, ['font', 'fontSize', 'sdfGlyphSize', 'anchorX', 'anchorY', 'characters']);
8181

8282
synced = output<Text>();
8383

8484
private store = injectStore();
85-
private invalidate = this.store.invalidate;
8685

8786
private characters = pick(this.options, 'characters');
8887

89-
font = pick(this.options, 'font');
90-
anchorX = pick(this.options, 'anchorX');
91-
anchorY = pick(this.options, 'anchorY');
92-
sdfGlyphSize = pick(this.options, 'sdfGlyphSize');
93-
fontSize = pick(this.options, 'fontSize');
88+
protected font = pick(this.options, 'font');
89+
protected anchorX = pick(this.options, 'anchorX');
90+
protected anchorY = pick(this.options, 'anchorY');
91+
protected sdfGlyphSize = pick(this.options, 'sdfGlyphSize');
92+
protected fontSize = pick(this.options, 'fontSize');
9493

9594
troikaMesh = new Text();
9695

@@ -100,14 +99,14 @@ export class NgtsText {
10099
});
101100

102101
effect(() => {
103-
const [font, characters, invalidate] = [this.font(), this.characters(), this.invalidate()];
102+
const [font, characters, invalidate] = [this.font(), this.characters(), this.store.invalidate()];
104103
if (font) {
105104
preloadFont({ font, characters }, () => invalidate());
106105
}
107106
});
108107

109108
effect(() => {
110-
const [invalidate] = [this.invalidate(), this.text(), this.options()];
109+
const [invalidate] = [this.store.invalidate(), this.text(), this.options()];
111110
this.troikaMesh.sync(() => {
112111
invalidate();
113112
this.synced.emit(this.troikaMesh);

0 commit comments

Comments
 (0)