Skip to content

Commit d4e5840

Browse files
Chau TranChau Tran
Chau Tran
authored and
Chau Tran
committed
feat(soba): migrate cubic bezier line
1 parent b68eaa0 commit d4e5840

File tree

3 files changed

+122
-49
lines changed

3 files changed

+122
-49
lines changed

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Component, Input, computed } from '@angular/core';
2+
import { injectNgtRef } from 'angular-three';
3+
import * as THREE from 'three';
4+
import type { Line2 } from 'three-stdlib';
5+
import { NgtsLine } from '../line/line';
6+
import { NgtsLineInputs } from '../line/line-input';
7+
8+
declare module '../line/line-input' {
9+
interface NgtsLineState {
10+
start: THREE.Vector3 | [number, number, number];
11+
end: THREE.Vector3 | [number, number, number];
12+
midA: THREE.Vector3 | [number, number, number];
13+
midB: THREE.Vector3 | [number, number, number];
14+
}
15+
}
16+
17+
@Component({
18+
selector: 'ngts-cubic-bezier-line',
19+
standalone: true,
20+
template: `
21+
<ngts-line
22+
[lineRef]="lineRef"
23+
[points]="points()"
24+
[color]="lineParameters().color"
25+
[vertexColors]="lineParameters().vertexColors"
26+
[resolution]="lineParameters().resolution"
27+
[lineWidth]="lineParameters().linewidth"
28+
[alphaToCoverage]="lineParameters().alphaToCoverage"
29+
[dashed]="lineParameters().dashed"
30+
[dashScale]="lineParameters().dashScale"
31+
[dashSize]="lineParameters().dashSize"
32+
[dashOffset]="lineParameters().dashOffset"
33+
[gapSize]="lineParameters().gapSize"
34+
[wireframe]="lineParameters().wireframe"
35+
[worldUnits]="lineParameters().worldUnits"
36+
/>
37+
`,
38+
imports: [NgtsLine],
39+
})
40+
export class NgtsCubicBezierLine extends NgtsLineInputs {
41+
@Input() lineRef = injectNgtRef<Line2>();
42+
43+
@Input({ required: true }) set start(start: THREE.Vector3 | [number, number, number]) {
44+
this.set({ start });
45+
}
46+
47+
@Input({ required: true }) set end(end: THREE.Vector3 | [number, number, number]) {
48+
this.set({ end });
49+
}
50+
51+
@Input({ required: true }) set midA(midA: THREE.Vector3 | [number, number, number]) {
52+
this.set({ midA });
53+
}
54+
55+
@Input({ required: true }) set midB(midB: THREE.Vector3 | [number, number, number]) {
56+
this.set({ midB });
57+
}
58+
59+
@Input() set segments(segments: number) {
60+
this.set({ segments });
61+
}
62+
63+
readonly points = computed(() => {
64+
const start = this.select('start')();
65+
const end = this.select('end')();
66+
const midA = this.select('midA')();
67+
const midB = this.select('midB')();
68+
const segments = this.select('segments')() as number;
69+
70+
const startV = start instanceof THREE.Vector3 ? start : new THREE.Vector3(...start);
71+
const endV = end instanceof THREE.Vector3 ? end : new THREE.Vector3(...end);
72+
const midAV = midA instanceof THREE.Vector3 ? midA : new THREE.Vector3(...midA);
73+
const midBV = midB instanceof THREE.Vector3 ? midB : new THREE.Vector3(...midB);
74+
return new THREE.CubicBezierCurve3(startV, midAV, midBV, endV).getPoints(segments);
75+
});
76+
77+
constructor() {
78+
super();
79+
this.set({ segments: 10 });
80+
}
81+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './billboard/billboard';
2+
export * from './cubic-bezier-line/cubic-bezier-line';
23
export * from './line/line';
34
export * from './quadratic-bezier-line/quadratic-bezier-line';
45
export * from './text-3d/text-3d';

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

Lines changed: 40 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
22
import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
3-
import { NgtsLine, NgtsQuadraticBezierLine } from 'angular-three-soba/abstractions';
3+
import { NgtsCubicBezierLine, NgtsLine, NgtsQuadraticBezierLine } from 'angular-three-soba/abstractions';
44
import { NgtsOrbitControls } from 'angular-three-soba/controls';
55
import * as THREE from 'three';
66
import { GeometryUtils } from 'three-stdlib';
@@ -103,35 +103,35 @@ class QuadraticBezierLineStory {
103103
@Input() end = defaultQuadraticBezier.end;
104104
@Input() segments = defaultQuadraticBezier.segments;
105105
}
106-
//
107-
// @Component({
108-
// standalone: true,
109-
// template: `
110-
// <ngts-cubic-bezier-line
111-
// [start]="start"
112-
// [end]="end"
113-
// [midA]="midA"
114-
// [midB]="midB"
115-
// [segments]="segments"
116-
// [color]="color"
117-
// [lineWidth]="lineWidth"
118-
// [dashed]="dashed"
119-
// />
120-
// <ngts-orbit-controls [zoomSpeed]="0.5" />
121-
// `,
122-
// imports: [NgtsCubicBezierLine, NgtsOrbitControls],
123-
// schemas: [CUSTOM_ELEMENTS_SCHEMA],
124-
// })
125-
// class CubicBezierLineStory {
126-
// @Input() color = 'red';
127-
// @Input() lineWidth = 3;
128-
// @Input() dashed = false;
129-
// @Input() start = defaultCubicBezier.start;
130-
// @Input() end = defaultCubicBezier.end;
131-
// @Input() midA = defaultCubicBezier.midA;
132-
// @Input() midB = defaultCubicBezier.midB;
133-
// @Input() segments = defaultCubicBezier.segments;
134-
// }
106+
107+
@Component({
108+
standalone: true,
109+
template: `
110+
<ngts-cubic-bezier-line
111+
[start]="start"
112+
[end]="end"
113+
[midA]="midA"
114+
[midB]="midB"
115+
[segments]="segments"
116+
[color]="color"
117+
[lineWidth]="lineWidth"
118+
[dashed]="dashed"
119+
/>
120+
<ngts-orbit-controls [zoomSpeed]="0.5" />
121+
`,
122+
imports: [NgtsCubicBezierLine, NgtsOrbitControls],
123+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
124+
})
125+
class CubicBezierLineStory {
126+
@Input() color = 'red';
127+
@Input() lineWidth = 3;
128+
@Input() dashed = false;
129+
@Input() start = defaultCubicBezier.start;
130+
@Input() end = defaultCubicBezier.end;
131+
@Input() midA = defaultCubicBezier.midA;
132+
@Input() midB = defaultCubicBezier.midB;
133+
@Input() segments = defaultCubicBezier.segments;
134+
}
135135

136136
@Component({
137137
standalone: true,
@@ -189,25 +189,16 @@ export const VertexColors: StoryObj = {
189189
args: { color: 'red', dashed: false, lineWidth: 3 },
190190
};
191191

192-
// export const CubicBezierLine: StoryObj = {
193-
// render: (args) => ({
194-
// props: {
195-
// story: CubicBezierLineStory,
196-
// options: makeCanvasOptions({ camera: { position: [0, 0, 17] }, controls: false }),
197-
// inputs: args,
198-
// },
199-
// template: `
200-
// <storybook-setup [story]="story" [options]="options" [inputs]="inputs" />
201-
// `,
202-
// }),
203-
// args: {
204-
// ...defaultCubicBezier,
205-
// color: 'red',
206-
// lineWidth: 3,
207-
// dashed: false,
208-
// },
209-
// };
210-
//
192+
export const CubicBezierLine: StoryObj = {
193+
render: makeRenderFunction(CubicBezierLineStory, { camera: { position: [0, 0, 17] }, controls: false }),
194+
args: {
195+
...defaultCubicBezier,
196+
color: 'red',
197+
lineWidth: 3,
198+
dashed: false,
199+
},
200+
};
201+
211202
export const QuadraticBezierLine: StoryObj = {
212203
render: makeRenderFunction(QuadraticBezierLineStory, { camera: { position: [0, 0, 17] }, controls: false }),
213204
args: {

0 commit comments

Comments
 (0)