@twick/2d 0.14.0 → 1.14.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/editor/editor/tsconfig.build.tsbuildinfo +1 -1
- package/lib/components/Audio.d.ts.map +1 -1
- package/lib/components/Audio.js +33 -3
- package/lib/components/CodeBlock.d.ts +1 -1
- package/lib/components/Img.js +23 -23
- package/lib/components/Line.js +31 -31
- package/lib/components/Media.d.ts +6 -0
- package/lib/components/Media.d.ts.map +1 -1
- package/lib/components/Media.js +277 -61
- package/lib/components/Node.d.ts +1 -1
- package/lib/components/Path.d.ts +1 -1
- package/lib/components/SVG.d.ts +1 -1
- package/lib/components/Shape.d.ts +1 -1
- package/lib/components/Spline.js +25 -25
- package/lib/components/Video.d.ts +0 -1
- package/lib/components/Video.d.ts.map +1 -1
- package/lib/components/Video.js +70 -65
- package/lib/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +4 -5
- package/src/editor/NodeInspectorConfig.tsx +76 -76
- package/src/editor/PreviewOverlayConfig.tsx +67 -67
- package/src/editor/Provider.tsx +93 -93
- package/src/editor/SceneGraphTabConfig.tsx +81 -81
- package/src/editor/icons/CircleIcon.tsx +7 -7
- package/src/editor/icons/CodeBlockIcon.tsx +8 -8
- package/src/editor/icons/CurveIcon.tsx +7 -7
- package/src/editor/icons/GridIcon.tsx +7 -7
- package/src/editor/icons/IconMap.ts +35 -35
- package/src/editor/icons/ImgIcon.tsx +8 -8
- package/src/editor/icons/LayoutIcon.tsx +9 -9
- package/src/editor/icons/LineIcon.tsx +7 -7
- package/src/editor/icons/NodeIcon.tsx +7 -7
- package/src/editor/icons/RayIcon.tsx +7 -7
- package/src/editor/icons/RectIcon.tsx +7 -7
- package/src/editor/icons/ShapeIcon.tsx +7 -7
- package/src/editor/icons/TxtIcon.tsx +8 -8
- package/src/editor/icons/VideoIcon.tsx +7 -7
- package/src/editor/icons/View2DIcon.tsx +10 -10
- package/src/editor/index.ts +17 -17
- package/src/editor/tree/DetachedRoot.tsx +23 -23
- package/src/editor/tree/NodeElement.tsx +74 -74
- package/src/editor/tree/TreeElement.tsx +72 -72
- package/src/editor/tree/TreeRoot.tsx +10 -10
- package/src/editor/tree/ViewRoot.tsx +20 -20
- package/src/editor/tree/index.module.scss +38 -38
- package/src/editor/tree/index.ts +3 -3
- package/src/editor/tsconfig.build.json +5 -5
- package/src/editor/tsconfig.json +12 -12
- package/src/editor/tsdoc.json +4 -4
- package/src/editor/vite-env.d.ts +1 -1
- package/src/lib/code/CodeCursor.ts +445 -445
- package/src/lib/code/CodeDiffer.ts +78 -78
- package/src/lib/code/CodeFragment.ts +97 -97
- package/src/lib/code/CodeHighlighter.ts +75 -75
- package/src/lib/code/CodeMetrics.ts +47 -47
- package/src/lib/code/CodeRange.test.ts +74 -74
- package/src/lib/code/CodeRange.ts +216 -216
- package/src/lib/code/CodeScope.ts +101 -101
- package/src/lib/code/CodeSelection.ts +24 -24
- package/src/lib/code/CodeSignal.ts +327 -327
- package/src/lib/code/CodeTokenizer.ts +54 -54
- package/src/lib/code/DefaultHighlightStyle.ts +98 -98
- package/src/lib/code/LezerHighlighter.ts +113 -113
- package/src/lib/code/diff.test.ts +311 -311
- package/src/lib/code/diff.ts +319 -319
- package/src/lib/code/extractRange.ts +126 -126
- package/src/lib/code/index.ts +13 -13
- package/src/lib/components/Audio.ts +168 -131
- package/src/lib/components/Bezier.ts +105 -105
- package/src/lib/components/Circle.ts +266 -266
- package/src/lib/components/Code.ts +526 -526
- package/src/lib/components/CodeBlock.ts +576 -576
- package/src/lib/components/CubicBezier.ts +112 -112
- package/src/lib/components/Curve.ts +455 -455
- package/src/lib/components/Grid.ts +135 -135
- package/src/lib/components/Icon.ts +96 -96
- package/src/lib/components/Img.ts +319 -319
- package/src/lib/components/Knot.ts +157 -157
- package/src/lib/components/Latex.ts +122 -122
- package/src/lib/components/Layout.ts +1092 -1092
- package/src/lib/components/Line.ts +429 -429
- package/src/lib/components/Media.ts +576 -346
- package/src/lib/components/Node.ts +1940 -1940
- package/src/lib/components/Path.ts +137 -137
- package/src/lib/components/Polygon.ts +171 -171
- package/src/lib/components/QuadBezier.ts +100 -100
- package/src/lib/components/Ray.ts +125 -125
- package/src/lib/components/Rect.ts +187 -187
- package/src/lib/components/Rive.ts +156 -156
- package/src/lib/components/SVG.ts +797 -797
- package/src/lib/components/Shape.ts +143 -143
- package/src/lib/components/Spline.ts +344 -344
- package/src/lib/components/Txt.test.tsx +81 -81
- package/src/lib/components/Txt.ts +203 -203
- package/src/lib/components/TxtLeaf.ts +205 -205
- package/src/lib/components/Video.ts +461 -462
- package/src/lib/components/View2D.ts +98 -98
- package/src/lib/components/__tests__/children.test.tsx +142 -142
- package/src/lib/components/__tests__/clone.test.tsx +126 -126
- package/src/lib/components/__tests__/generatorTest.ts +28 -28
- package/src/lib/components/__tests__/mockScene2D.ts +45 -45
- package/src/lib/components/__tests__/query.test.tsx +122 -122
- package/src/lib/components/__tests__/state.test.tsx +60 -60
- package/src/lib/components/index.ts +28 -28
- package/src/lib/components/types.ts +35 -35
- package/src/lib/curves/ArcSegment.ts +159 -159
- package/src/lib/curves/CircleSegment.ts +77 -77
- package/src/lib/curves/CubicBezierSegment.ts +78 -78
- package/src/lib/curves/CurveDrawingInfo.ts +11 -11
- package/src/lib/curves/CurvePoint.ts +15 -15
- package/src/lib/curves/CurveProfile.ts +7 -7
- package/src/lib/curves/KnotInfo.ts +10 -10
- package/src/lib/curves/LineSegment.ts +62 -62
- package/src/lib/curves/Polynomial.ts +355 -355
- package/src/lib/curves/Polynomial2D.ts +62 -62
- package/src/lib/curves/PolynomialSegment.ts +124 -124
- package/src/lib/curves/QuadBezierSegment.ts +64 -64
- package/src/lib/curves/Segment.ts +17 -17
- package/src/lib/curves/UniformPolynomialCurveSampler.ts +94 -94
- package/src/lib/curves/createCurveProfileLerp.ts +471 -471
- package/src/lib/curves/getBezierSplineProfile.ts +223 -223
- package/src/lib/curves/getCircleProfile.ts +86 -86
- package/src/lib/curves/getPathProfile.ts +178 -178
- package/src/lib/curves/getPointAtDistance.ts +21 -21
- package/src/lib/curves/getPolylineProfile.test.ts +21 -21
- package/src/lib/curves/getPolylineProfile.ts +89 -89
- package/src/lib/curves/getRectProfile.ts +139 -139
- package/src/lib/curves/index.ts +16 -16
- package/src/lib/decorators/canvasStyleSignal.ts +16 -16
- package/src/lib/decorators/colorSignal.ts +9 -9
- package/src/lib/decorators/compound.ts +72 -72
- package/src/lib/decorators/computed.ts +18 -18
- package/src/lib/decorators/defaultStyle.ts +18 -18
- package/src/lib/decorators/filtersSignal.ts +136 -136
- package/src/lib/decorators/index.ts +10 -10
- package/src/lib/decorators/initializers.ts +32 -32
- package/src/lib/decorators/nodeName.ts +13 -13
- package/src/lib/decorators/signal.test.ts +90 -90
- package/src/lib/decorators/signal.ts +345 -345
- package/src/lib/decorators/spacingSignal.ts +15 -15
- package/src/lib/decorators/vector2Signal.ts +30 -30
- package/src/lib/globals.d.ts +2 -2
- package/src/lib/index.ts +8 -8
- package/src/lib/jsx-dev-runtime.ts +2 -2
- package/src/lib/jsx-runtime.ts +46 -46
- package/src/lib/parse-svg-path.d.ts +14 -14
- package/src/lib/partials/Filter.ts +180 -180
- package/src/lib/partials/Gradient.ts +102 -102
- package/src/lib/partials/Pattern.ts +34 -34
- package/src/lib/partials/ShaderConfig.ts +117 -117
- package/src/lib/partials/index.ts +4 -4
- package/src/lib/partials/types.ts +58 -58
- package/src/lib/scenes/Scene2D.ts +242 -242
- package/src/lib/scenes/index.ts +3 -3
- package/src/lib/scenes/makeScene2D.ts +16 -16
- package/src/lib/scenes/useScene2D.ts +6 -6
- package/src/lib/tsconfig.build.json +5 -5
- package/src/lib/tsconfig.json +10 -10
- package/src/lib/tsdoc.json +4 -4
- package/src/lib/utils/CanvasUtils.ts +306 -306
- package/src/lib/utils/diff.test.ts +453 -453
- package/src/lib/utils/diff.ts +148 -148
- package/src/lib/utils/index.ts +2 -2
- package/src/lib/utils/is.ts +11 -11
- package/src/lib/utils/makeSignalExtensions.ts +30 -30
- package/src/lib/utils/video/declarations.d.ts +1 -1
- package/src/lib/utils/video/ffmpeg-client.ts +50 -50
- package/src/lib/utils/video/mp4-parser-manager.ts +72 -72
- package/src/lib/utils/video/parser/index.ts +1 -1
- package/src/lib/utils/video/parser/parser.ts +257 -257
- package/src/lib/utils/video/parser/sampler.ts +72 -72
- package/src/lib/utils/video/parser/segment.ts +302 -302
- package/src/lib/utils/video/parser/sink.ts +29 -29
- package/src/lib/utils/video/parser/utils.ts +31 -31
- package/src/tsconfig.base.json +19 -19
- package/src/tsconfig.build.json +8 -8
- package/src/tsconfig.json +5 -5
- package/tsconfig.project.json +7 -7
- package/lib/components/utils/waitUntil.d.ts +0 -7
- package/lib/components/utils/waitUntil.d.ts.map +0 -1
- package/lib/components/utils/waitUntil.js +0 -15
- package/lib/utils/waitUntil.d.ts +0 -7
- package/lib/utils/waitUntil.d.ts.map +0 -1
- package/lib/utils/waitUntil.js +0 -15
- package/src/lib/utils/waitUntil.ts +0 -18
|
@@ -1,178 +1,178 @@
|
|
|
1
|
-
import {Vector2, clamp} from '@twick/core';
|
|
2
|
-
import type {PathCommand} from 'parse-svg-path';
|
|
3
|
-
import parse from 'parse-svg-path';
|
|
4
|
-
import {ArcSegment} from './ArcSegment';
|
|
5
|
-
import {CubicBezierSegment} from './CubicBezierSegment';
|
|
6
|
-
import type {CurveProfile} from './CurveProfile';
|
|
7
|
-
import {LineSegment} from './LineSegment';
|
|
8
|
-
import {QuadBezierSegment} from './QuadBezierSegment';
|
|
9
|
-
import type {Segment} from './Segment';
|
|
10
|
-
|
|
11
|
-
function addSegmentToProfile(profile: CurveProfile, segment: Segment) {
|
|
12
|
-
profile.segments.push(segment);
|
|
13
|
-
profile.arcLength += segment.arcLength;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function getArg(command: PathCommand, argumentIndex: number) {
|
|
17
|
-
return command[argumentIndex + 1] as number;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function getVector2(command: PathCommand, argumentIndex: number) {
|
|
21
|
-
return new Vector2(
|
|
22
|
-
command[argumentIndex + 1] as number,
|
|
23
|
-
command[argumentIndex + 2] as number,
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function getPoint(
|
|
28
|
-
command: PathCommand,
|
|
29
|
-
argumentIndex: number,
|
|
30
|
-
isRelative: boolean,
|
|
31
|
-
currentPoint: Vector2,
|
|
32
|
-
) {
|
|
33
|
-
const point = getVector2(command, argumentIndex);
|
|
34
|
-
return isRelative ? currentPoint.add(point) : point;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function reflectControlPoint(control: Vector2, currentPoint: Vector2) {
|
|
38
|
-
return currentPoint.add(currentPoint.sub(control));
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function updateMinSin(profile: CurveProfile) {
|
|
42
|
-
for (let i = 0; i < profile.segments.length; i++) {
|
|
43
|
-
const segmentA = profile.segments[i];
|
|
44
|
-
const segmentB = profile.segments[(i + 1) % profile.segments.length];
|
|
45
|
-
|
|
46
|
-
// In cubic bezier this equal p2.sub(p3)
|
|
47
|
-
const startVector = segmentA.getPoint(1).tangent.scale(-1);
|
|
48
|
-
// In cubic bezier this equal p1.sub(p0)
|
|
49
|
-
const endVector = segmentB.getPoint(0).tangent;
|
|
50
|
-
const dot = startVector.dot(endVector);
|
|
51
|
-
|
|
52
|
-
const angleBetween = Math.acos(clamp(-1, 1, dot));
|
|
53
|
-
const angleSin = Math.sin(angleBetween / 2);
|
|
54
|
-
|
|
55
|
-
profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
export function getPathProfile(data: string): CurveProfile {
|
|
60
|
-
const profile: CurveProfile = {
|
|
61
|
-
segments: [],
|
|
62
|
-
arcLength: 0,
|
|
63
|
-
minSin: 1,
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
const segments = parse(data);
|
|
67
|
-
let currentPoint = new Vector2(0, 0);
|
|
68
|
-
let firstPoint: Vector2 | null = null;
|
|
69
|
-
|
|
70
|
-
for (const segment of segments) {
|
|
71
|
-
const command = segment[0].toLowerCase();
|
|
72
|
-
const isRelative = segment[0] === command;
|
|
73
|
-
|
|
74
|
-
if (command === 'm') {
|
|
75
|
-
currentPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
76
|
-
firstPoint = currentPoint;
|
|
77
|
-
} else if (command === 'l') {
|
|
78
|
-
const nextPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
79
|
-
addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
|
|
80
|
-
currentPoint = nextPoint;
|
|
81
|
-
} else if (command === 'h') {
|
|
82
|
-
const x = getArg(segment, 0);
|
|
83
|
-
const nextPoint = isRelative
|
|
84
|
-
? currentPoint.addX(x)
|
|
85
|
-
: new Vector2(x, currentPoint.y);
|
|
86
|
-
addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
|
|
87
|
-
currentPoint = nextPoint;
|
|
88
|
-
} else if (command === 'v') {
|
|
89
|
-
const y = getArg(segment, 0);
|
|
90
|
-
const nextPoint = isRelative
|
|
91
|
-
? currentPoint.addY(y)
|
|
92
|
-
: new Vector2(currentPoint.x, y);
|
|
93
|
-
addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
|
|
94
|
-
currentPoint = nextPoint;
|
|
95
|
-
} else if (command === 'q') {
|
|
96
|
-
const controlPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
97
|
-
const nextPoint = getPoint(segment, 2, isRelative, currentPoint);
|
|
98
|
-
addSegmentToProfile(
|
|
99
|
-
profile,
|
|
100
|
-
new QuadBezierSegment(currentPoint, controlPoint, nextPoint),
|
|
101
|
-
);
|
|
102
|
-
currentPoint = nextPoint;
|
|
103
|
-
} else if (command === 't') {
|
|
104
|
-
const lastSegment = profile.segments.at(-1);
|
|
105
|
-
const controlPoint =
|
|
106
|
-
lastSegment instanceof QuadBezierSegment
|
|
107
|
-
? reflectControlPoint(lastSegment.p1, currentPoint)
|
|
108
|
-
: currentPoint;
|
|
109
|
-
|
|
110
|
-
const nextPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
111
|
-
addSegmentToProfile(
|
|
112
|
-
profile,
|
|
113
|
-
new QuadBezierSegment(currentPoint, controlPoint, nextPoint),
|
|
114
|
-
);
|
|
115
|
-
currentPoint = nextPoint;
|
|
116
|
-
} else if (command === 'c') {
|
|
117
|
-
const startControlPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
118
|
-
const endControlPoint = getPoint(segment, 2, isRelative, currentPoint);
|
|
119
|
-
const nextPoint = getPoint(segment, 4, isRelative, currentPoint);
|
|
120
|
-
addSegmentToProfile(
|
|
121
|
-
profile,
|
|
122
|
-
new CubicBezierSegment(
|
|
123
|
-
currentPoint,
|
|
124
|
-
startControlPoint,
|
|
125
|
-
endControlPoint,
|
|
126
|
-
nextPoint,
|
|
127
|
-
),
|
|
128
|
-
);
|
|
129
|
-
currentPoint = nextPoint;
|
|
130
|
-
} else if (command === 's') {
|
|
131
|
-
const lastSegment = profile.segments.at(-1);
|
|
132
|
-
const startControlPoint =
|
|
133
|
-
lastSegment instanceof CubicBezierSegment
|
|
134
|
-
? reflectControlPoint(lastSegment.p2, currentPoint)
|
|
135
|
-
: currentPoint;
|
|
136
|
-
|
|
137
|
-
const endControlPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
138
|
-
const nextPoint = getPoint(segment, 2, isRelative, currentPoint);
|
|
139
|
-
addSegmentToProfile(
|
|
140
|
-
profile,
|
|
141
|
-
new CubicBezierSegment(
|
|
142
|
-
currentPoint,
|
|
143
|
-
startControlPoint,
|
|
144
|
-
endControlPoint,
|
|
145
|
-
nextPoint,
|
|
146
|
-
),
|
|
147
|
-
);
|
|
148
|
-
currentPoint = nextPoint;
|
|
149
|
-
} else if (command === 'a') {
|
|
150
|
-
const radius = getVector2(segment, 0);
|
|
151
|
-
const angle = getArg(segment, 2);
|
|
152
|
-
const largeArcFlag = getArg(segment, 3);
|
|
153
|
-
const sweepFlag = getArg(segment, 4);
|
|
154
|
-
const nextPoint = getPoint(segment, 5, isRelative, currentPoint);
|
|
155
|
-
addSegmentToProfile(
|
|
156
|
-
profile,
|
|
157
|
-
new ArcSegment(
|
|
158
|
-
currentPoint,
|
|
159
|
-
radius,
|
|
160
|
-
angle,
|
|
161
|
-
largeArcFlag,
|
|
162
|
-
sweepFlag,
|
|
163
|
-
nextPoint,
|
|
164
|
-
),
|
|
165
|
-
);
|
|
166
|
-
currentPoint = nextPoint;
|
|
167
|
-
} else if (command === 'z') {
|
|
168
|
-
if (!firstPoint) continue;
|
|
169
|
-
if (currentPoint.equals(firstPoint)) continue;
|
|
170
|
-
|
|
171
|
-
addSegmentToProfile(profile, new LineSegment(currentPoint, firstPoint));
|
|
172
|
-
currentPoint = firstPoint;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
updateMinSin(profile);
|
|
176
|
-
|
|
177
|
-
return profile;
|
|
178
|
-
}
|
|
1
|
+
import {Vector2, clamp} from '@twick/core';
|
|
2
|
+
import type {PathCommand} from 'parse-svg-path';
|
|
3
|
+
import parse from 'parse-svg-path';
|
|
4
|
+
import {ArcSegment} from './ArcSegment';
|
|
5
|
+
import {CubicBezierSegment} from './CubicBezierSegment';
|
|
6
|
+
import type {CurveProfile} from './CurveProfile';
|
|
7
|
+
import {LineSegment} from './LineSegment';
|
|
8
|
+
import {QuadBezierSegment} from './QuadBezierSegment';
|
|
9
|
+
import type {Segment} from './Segment';
|
|
10
|
+
|
|
11
|
+
function addSegmentToProfile(profile: CurveProfile, segment: Segment) {
|
|
12
|
+
profile.segments.push(segment);
|
|
13
|
+
profile.arcLength += segment.arcLength;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function getArg(command: PathCommand, argumentIndex: number) {
|
|
17
|
+
return command[argumentIndex + 1] as number;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function getVector2(command: PathCommand, argumentIndex: number) {
|
|
21
|
+
return new Vector2(
|
|
22
|
+
command[argumentIndex + 1] as number,
|
|
23
|
+
command[argumentIndex + 2] as number,
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function getPoint(
|
|
28
|
+
command: PathCommand,
|
|
29
|
+
argumentIndex: number,
|
|
30
|
+
isRelative: boolean,
|
|
31
|
+
currentPoint: Vector2,
|
|
32
|
+
) {
|
|
33
|
+
const point = getVector2(command, argumentIndex);
|
|
34
|
+
return isRelative ? currentPoint.add(point) : point;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function reflectControlPoint(control: Vector2, currentPoint: Vector2) {
|
|
38
|
+
return currentPoint.add(currentPoint.sub(control));
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function updateMinSin(profile: CurveProfile) {
|
|
42
|
+
for (let i = 0; i < profile.segments.length; i++) {
|
|
43
|
+
const segmentA = profile.segments[i];
|
|
44
|
+
const segmentB = profile.segments[(i + 1) % profile.segments.length];
|
|
45
|
+
|
|
46
|
+
// In cubic bezier this equal p2.sub(p3)
|
|
47
|
+
const startVector = segmentA.getPoint(1).tangent.scale(-1);
|
|
48
|
+
// In cubic bezier this equal p1.sub(p0)
|
|
49
|
+
const endVector = segmentB.getPoint(0).tangent;
|
|
50
|
+
const dot = startVector.dot(endVector);
|
|
51
|
+
|
|
52
|
+
const angleBetween = Math.acos(clamp(-1, 1, dot));
|
|
53
|
+
const angleSin = Math.sin(angleBetween / 2);
|
|
54
|
+
|
|
55
|
+
profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export function getPathProfile(data: string): CurveProfile {
|
|
60
|
+
const profile: CurveProfile = {
|
|
61
|
+
segments: [],
|
|
62
|
+
arcLength: 0,
|
|
63
|
+
minSin: 1,
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
const segments = parse(data);
|
|
67
|
+
let currentPoint = new Vector2(0, 0);
|
|
68
|
+
let firstPoint: Vector2 | null = null;
|
|
69
|
+
|
|
70
|
+
for (const segment of segments) {
|
|
71
|
+
const command = segment[0].toLowerCase();
|
|
72
|
+
const isRelative = segment[0] === command;
|
|
73
|
+
|
|
74
|
+
if (command === 'm') {
|
|
75
|
+
currentPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
76
|
+
firstPoint = currentPoint;
|
|
77
|
+
} else if (command === 'l') {
|
|
78
|
+
const nextPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
79
|
+
addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
|
|
80
|
+
currentPoint = nextPoint;
|
|
81
|
+
} else if (command === 'h') {
|
|
82
|
+
const x = getArg(segment, 0);
|
|
83
|
+
const nextPoint = isRelative
|
|
84
|
+
? currentPoint.addX(x)
|
|
85
|
+
: new Vector2(x, currentPoint.y);
|
|
86
|
+
addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
|
|
87
|
+
currentPoint = nextPoint;
|
|
88
|
+
} else if (command === 'v') {
|
|
89
|
+
const y = getArg(segment, 0);
|
|
90
|
+
const nextPoint = isRelative
|
|
91
|
+
? currentPoint.addY(y)
|
|
92
|
+
: new Vector2(currentPoint.x, y);
|
|
93
|
+
addSegmentToProfile(profile, new LineSegment(currentPoint, nextPoint));
|
|
94
|
+
currentPoint = nextPoint;
|
|
95
|
+
} else if (command === 'q') {
|
|
96
|
+
const controlPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
97
|
+
const nextPoint = getPoint(segment, 2, isRelative, currentPoint);
|
|
98
|
+
addSegmentToProfile(
|
|
99
|
+
profile,
|
|
100
|
+
new QuadBezierSegment(currentPoint, controlPoint, nextPoint),
|
|
101
|
+
);
|
|
102
|
+
currentPoint = nextPoint;
|
|
103
|
+
} else if (command === 't') {
|
|
104
|
+
const lastSegment = profile.segments.at(-1);
|
|
105
|
+
const controlPoint =
|
|
106
|
+
lastSegment instanceof QuadBezierSegment
|
|
107
|
+
? reflectControlPoint(lastSegment.p1, currentPoint)
|
|
108
|
+
: currentPoint;
|
|
109
|
+
|
|
110
|
+
const nextPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
111
|
+
addSegmentToProfile(
|
|
112
|
+
profile,
|
|
113
|
+
new QuadBezierSegment(currentPoint, controlPoint, nextPoint),
|
|
114
|
+
);
|
|
115
|
+
currentPoint = nextPoint;
|
|
116
|
+
} else if (command === 'c') {
|
|
117
|
+
const startControlPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
118
|
+
const endControlPoint = getPoint(segment, 2, isRelative, currentPoint);
|
|
119
|
+
const nextPoint = getPoint(segment, 4, isRelative, currentPoint);
|
|
120
|
+
addSegmentToProfile(
|
|
121
|
+
profile,
|
|
122
|
+
new CubicBezierSegment(
|
|
123
|
+
currentPoint,
|
|
124
|
+
startControlPoint,
|
|
125
|
+
endControlPoint,
|
|
126
|
+
nextPoint,
|
|
127
|
+
),
|
|
128
|
+
);
|
|
129
|
+
currentPoint = nextPoint;
|
|
130
|
+
} else if (command === 's') {
|
|
131
|
+
const lastSegment = profile.segments.at(-1);
|
|
132
|
+
const startControlPoint =
|
|
133
|
+
lastSegment instanceof CubicBezierSegment
|
|
134
|
+
? reflectControlPoint(lastSegment.p2, currentPoint)
|
|
135
|
+
: currentPoint;
|
|
136
|
+
|
|
137
|
+
const endControlPoint = getPoint(segment, 0, isRelative, currentPoint);
|
|
138
|
+
const nextPoint = getPoint(segment, 2, isRelative, currentPoint);
|
|
139
|
+
addSegmentToProfile(
|
|
140
|
+
profile,
|
|
141
|
+
new CubicBezierSegment(
|
|
142
|
+
currentPoint,
|
|
143
|
+
startControlPoint,
|
|
144
|
+
endControlPoint,
|
|
145
|
+
nextPoint,
|
|
146
|
+
),
|
|
147
|
+
);
|
|
148
|
+
currentPoint = nextPoint;
|
|
149
|
+
} else if (command === 'a') {
|
|
150
|
+
const radius = getVector2(segment, 0);
|
|
151
|
+
const angle = getArg(segment, 2);
|
|
152
|
+
const largeArcFlag = getArg(segment, 3);
|
|
153
|
+
const sweepFlag = getArg(segment, 4);
|
|
154
|
+
const nextPoint = getPoint(segment, 5, isRelative, currentPoint);
|
|
155
|
+
addSegmentToProfile(
|
|
156
|
+
profile,
|
|
157
|
+
new ArcSegment(
|
|
158
|
+
currentPoint,
|
|
159
|
+
radius,
|
|
160
|
+
angle,
|
|
161
|
+
largeArcFlag,
|
|
162
|
+
sweepFlag,
|
|
163
|
+
nextPoint,
|
|
164
|
+
),
|
|
165
|
+
);
|
|
166
|
+
currentPoint = nextPoint;
|
|
167
|
+
} else if (command === 'z') {
|
|
168
|
+
if (!firstPoint) continue;
|
|
169
|
+
if (currentPoint.equals(firstPoint)) continue;
|
|
170
|
+
|
|
171
|
+
addSegmentToProfile(profile, new LineSegment(currentPoint, firstPoint));
|
|
172
|
+
currentPoint = firstPoint;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
updateMinSin(profile);
|
|
176
|
+
|
|
177
|
+
return profile;
|
|
178
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import {Vector2, clamp} from '@twick/core';
|
|
2
|
-
import type {CurvePoint} from './CurvePoint';
|
|
3
|
-
import type {CurveProfile} from './CurveProfile';
|
|
4
|
-
|
|
5
|
-
export function getPointAtDistance(
|
|
6
|
-
profile: CurveProfile,
|
|
7
|
-
distance: number,
|
|
8
|
-
): CurvePoint {
|
|
9
|
-
const clamped = clamp(0, profile.arcLength, distance);
|
|
10
|
-
let length = 0;
|
|
11
|
-
for (const segment of profile.segments) {
|
|
12
|
-
const previousLength = length;
|
|
13
|
-
length += segment.arcLength;
|
|
14
|
-
if (length >= clamped) {
|
|
15
|
-
const relative = (clamped - previousLength) / segment.arcLength;
|
|
16
|
-
return segment.getPoint(clamp(0, 1, relative));
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
return {position: Vector2.zero, tangent: Vector2.up, normal: Vector2.up};
|
|
21
|
-
}
|
|
1
|
+
import {Vector2, clamp} from '@twick/core';
|
|
2
|
+
import type {CurvePoint} from './CurvePoint';
|
|
3
|
+
import type {CurveProfile} from './CurveProfile';
|
|
4
|
+
|
|
5
|
+
export function getPointAtDistance(
|
|
6
|
+
profile: CurveProfile,
|
|
7
|
+
distance: number,
|
|
8
|
+
): CurvePoint {
|
|
9
|
+
const clamped = clamp(0, profile.arcLength, distance);
|
|
10
|
+
let length = 0;
|
|
11
|
+
for (const segment of profile.segments) {
|
|
12
|
+
const previousLength = length;
|
|
13
|
+
length += segment.arcLength;
|
|
14
|
+
if (length >= clamped) {
|
|
15
|
+
const relative = (clamped - previousLength) / segment.arcLength;
|
|
16
|
+
return segment.getPoint(clamp(0, 1, relative));
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return {position: Vector2.zero, tangent: Vector2.up, normal: Vector2.up};
|
|
21
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import {Vector2} from '@twick/core';
|
|
2
|
-
import {describe, expect, test} from 'vitest';
|
|
3
|
-
import {getPolylineProfile} from './getPolylineProfile';
|
|
4
|
-
|
|
5
|
-
describe('getPolylineProfile', () => {
|
|
6
|
-
test('Correct arc length', () => {
|
|
7
|
-
const profile = getPolylineProfile(
|
|
8
|
-
[
|
|
9
|
-
Vector2.zero,
|
|
10
|
-
Vector2.zero,
|
|
11
|
-
new Vector2(100, 0),
|
|
12
|
-
new Vector2(100, 100),
|
|
13
|
-
new Vector2(0, 100),
|
|
14
|
-
],
|
|
15
|
-
0,
|
|
16
|
-
true,
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
expect(profile.arcLength).toBe(400);
|
|
20
|
-
});
|
|
21
|
-
});
|
|
1
|
+
import {Vector2} from '@twick/core';
|
|
2
|
+
import {describe, expect, test} from 'vitest';
|
|
3
|
+
import {getPolylineProfile} from './getPolylineProfile';
|
|
4
|
+
|
|
5
|
+
describe('getPolylineProfile', () => {
|
|
6
|
+
test('Correct arc length', () => {
|
|
7
|
+
const profile = getPolylineProfile(
|
|
8
|
+
[
|
|
9
|
+
Vector2.zero,
|
|
10
|
+
Vector2.zero,
|
|
11
|
+
new Vector2(100, 0),
|
|
12
|
+
new Vector2(100, 100),
|
|
13
|
+
new Vector2(0, 100),
|
|
14
|
+
],
|
|
15
|
+
0,
|
|
16
|
+
true,
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
expect(profile.arcLength).toBe(400);
|
|
20
|
+
});
|
|
21
|
+
});
|
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
import type {Vector2} from '@twick/core';
|
|
2
|
-
import {clamp} from '@twick/core';
|
|
3
|
-
import {CircleSegment} from './CircleSegment';
|
|
4
|
-
import type {CurveProfile} from './CurveProfile';
|
|
5
|
-
import {LineSegment} from './LineSegment';
|
|
6
|
-
|
|
7
|
-
export function getPolylineProfile(
|
|
8
|
-
points: readonly Vector2[],
|
|
9
|
-
radius: number,
|
|
10
|
-
closed: boolean,
|
|
11
|
-
): CurveProfile {
|
|
12
|
-
const profile: CurveProfile = {
|
|
13
|
-
arcLength: 0,
|
|
14
|
-
segments: [],
|
|
15
|
-
minSin: 1,
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
if (points.length === 0) {
|
|
19
|
-
return profile;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
if (closed) {
|
|
23
|
-
const middle = points[0].add(points[points.length - 1]).scale(0.5);
|
|
24
|
-
points = [middle, ...points, middle];
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
let last = points[0];
|
|
28
|
-
for (let i = 2; i < points.length; i++) {
|
|
29
|
-
const start = points[i - 2];
|
|
30
|
-
const center = points[i - 1];
|
|
31
|
-
const end = points[i];
|
|
32
|
-
|
|
33
|
-
const centerToStart = start.sub(center);
|
|
34
|
-
const centerToEnd = end.sub(center);
|
|
35
|
-
const startVector = centerToStart.normalized.safe;
|
|
36
|
-
const endVector = centerToEnd.normalized.safe;
|
|
37
|
-
const angleBetween = Math.acos(clamp(-1, 1, startVector.dot(endVector)));
|
|
38
|
-
const angleTan = Math.tan(angleBetween / 2);
|
|
39
|
-
const angleSin = Math.sin(angleBetween / 2);
|
|
40
|
-
|
|
41
|
-
const safeRadius = Math.min(
|
|
42
|
-
radius,
|
|
43
|
-
angleTan * centerToStart.magnitude * (i === 2 ? 1 : 0.5),
|
|
44
|
-
angleTan * centerToEnd.magnitude * (i === points.length - 1 ? 1 : 0.5),
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
const circleOffsetDistance = angleSin === 0 ? 0 : safeRadius / angleSin;
|
|
48
|
-
const pointOffsetDistance = angleTan === 0 ? 0 : safeRadius / angleTan;
|
|
49
|
-
const circleDistance = startVector
|
|
50
|
-
.add(endVector)
|
|
51
|
-
.scale(1 / 2)
|
|
52
|
-
.normalized.safe.scale(circleOffsetDistance)
|
|
53
|
-
.add(center);
|
|
54
|
-
|
|
55
|
-
const counter = startVector.perpendicular.dot(endVector) < 0;
|
|
56
|
-
const line = new LineSegment(
|
|
57
|
-
last,
|
|
58
|
-
center.add(startVector.scale(pointOffsetDistance)),
|
|
59
|
-
);
|
|
60
|
-
const circle = new CircleSegment(
|
|
61
|
-
circleDistance,
|
|
62
|
-
safeRadius,
|
|
63
|
-
startVector.perpendicular.scale(counter ? 1 : -1),
|
|
64
|
-
endVector.perpendicular.scale(counter ? -1 : 1),
|
|
65
|
-
counter,
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
if (line.arcLength > 0) {
|
|
69
|
-
profile.segments.push(line);
|
|
70
|
-
profile.arcLength += line.arcLength;
|
|
71
|
-
}
|
|
72
|
-
if (circle.arcLength > 0) {
|
|
73
|
-
profile.segments.push(circle);
|
|
74
|
-
profile.arcLength += circle.arcLength;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
|
|
78
|
-
|
|
79
|
-
last = center.add(endVector.scale(pointOffsetDistance));
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
const line = new LineSegment(last, points[points.length - 1]);
|
|
83
|
-
if (line.arcLength > 0) {
|
|
84
|
-
profile.segments.push(line);
|
|
85
|
-
profile.arcLength += line.arcLength;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
return profile;
|
|
89
|
-
}
|
|
1
|
+
import type {Vector2} from '@twick/core';
|
|
2
|
+
import {clamp} from '@twick/core';
|
|
3
|
+
import {CircleSegment} from './CircleSegment';
|
|
4
|
+
import type {CurveProfile} from './CurveProfile';
|
|
5
|
+
import {LineSegment} from './LineSegment';
|
|
6
|
+
|
|
7
|
+
export function getPolylineProfile(
|
|
8
|
+
points: readonly Vector2[],
|
|
9
|
+
radius: number,
|
|
10
|
+
closed: boolean,
|
|
11
|
+
): CurveProfile {
|
|
12
|
+
const profile: CurveProfile = {
|
|
13
|
+
arcLength: 0,
|
|
14
|
+
segments: [],
|
|
15
|
+
minSin: 1,
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
if (points.length === 0) {
|
|
19
|
+
return profile;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
if (closed) {
|
|
23
|
+
const middle = points[0].add(points[points.length - 1]).scale(0.5);
|
|
24
|
+
points = [middle, ...points, middle];
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
let last = points[0];
|
|
28
|
+
for (let i = 2; i < points.length; i++) {
|
|
29
|
+
const start = points[i - 2];
|
|
30
|
+
const center = points[i - 1];
|
|
31
|
+
const end = points[i];
|
|
32
|
+
|
|
33
|
+
const centerToStart = start.sub(center);
|
|
34
|
+
const centerToEnd = end.sub(center);
|
|
35
|
+
const startVector = centerToStart.normalized.safe;
|
|
36
|
+
const endVector = centerToEnd.normalized.safe;
|
|
37
|
+
const angleBetween = Math.acos(clamp(-1, 1, startVector.dot(endVector)));
|
|
38
|
+
const angleTan = Math.tan(angleBetween / 2);
|
|
39
|
+
const angleSin = Math.sin(angleBetween / 2);
|
|
40
|
+
|
|
41
|
+
const safeRadius = Math.min(
|
|
42
|
+
radius,
|
|
43
|
+
angleTan * centerToStart.magnitude * (i === 2 ? 1 : 0.5),
|
|
44
|
+
angleTan * centerToEnd.magnitude * (i === points.length - 1 ? 1 : 0.5),
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
const circleOffsetDistance = angleSin === 0 ? 0 : safeRadius / angleSin;
|
|
48
|
+
const pointOffsetDistance = angleTan === 0 ? 0 : safeRadius / angleTan;
|
|
49
|
+
const circleDistance = startVector
|
|
50
|
+
.add(endVector)
|
|
51
|
+
.scale(1 / 2)
|
|
52
|
+
.normalized.safe.scale(circleOffsetDistance)
|
|
53
|
+
.add(center);
|
|
54
|
+
|
|
55
|
+
const counter = startVector.perpendicular.dot(endVector) < 0;
|
|
56
|
+
const line = new LineSegment(
|
|
57
|
+
last,
|
|
58
|
+
center.add(startVector.scale(pointOffsetDistance)),
|
|
59
|
+
);
|
|
60
|
+
const circle = new CircleSegment(
|
|
61
|
+
circleDistance,
|
|
62
|
+
safeRadius,
|
|
63
|
+
startVector.perpendicular.scale(counter ? 1 : -1),
|
|
64
|
+
endVector.perpendicular.scale(counter ? -1 : 1),
|
|
65
|
+
counter,
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
if (line.arcLength > 0) {
|
|
69
|
+
profile.segments.push(line);
|
|
70
|
+
profile.arcLength += line.arcLength;
|
|
71
|
+
}
|
|
72
|
+
if (circle.arcLength > 0) {
|
|
73
|
+
profile.segments.push(circle);
|
|
74
|
+
profile.arcLength += circle.arcLength;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
|
|
78
|
+
|
|
79
|
+
last = center.add(endVector.scale(pointOffsetDistance));
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const line = new LineSegment(last, points[points.length - 1]);
|
|
83
|
+
if (line.arcLength > 0) {
|
|
84
|
+
profile.segments.push(line);
|
|
85
|
+
profile.arcLength += line.arcLength;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
return profile;
|
|
89
|
+
}
|