@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,471 +1,471 @@
|
|
|
1
|
-
import {Vector2} from '@twick/core';
|
|
2
|
-
import type {CurveProfile} from './CurveProfile';
|
|
3
|
-
import {LineSegment} from './LineSegment';
|
|
4
|
-
import {getPointAtDistance} from './getPointAtDistance';
|
|
5
|
-
import {getPolylineProfile} from './getPolylineProfile';
|
|
6
|
-
|
|
7
|
-
// Based on kute.js svgMorph plugin
|
|
8
|
-
|
|
9
|
-
interface SubcurveProfile extends CurveProfile {
|
|
10
|
-
closed: boolean;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
interface PolygonProfile {
|
|
14
|
-
/**
|
|
15
|
-
* If path closed, first point and last point must be equal
|
|
16
|
-
*/
|
|
17
|
-
points: Vector2[];
|
|
18
|
-
closed: boolean;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Split segments of polygon until distance between adjacent point is less than or equal maxLength. This function mutate original points.
|
|
23
|
-
* @param points - Polygon points
|
|
24
|
-
* @param maxLength - max distance between two point
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
function bisect(points: Vector2[], maxLength: number) {
|
|
28
|
-
for (let i = 0; i < points.length - 1; i++) {
|
|
29
|
-
const a = points[i];
|
|
30
|
-
let b = points[i + 1];
|
|
31
|
-
while (a.sub(b).magnitude > maxLength) {
|
|
32
|
-
b = Vector2.lerp(a, b, 0.5);
|
|
33
|
-
points.splice(i + 1, 0, b);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Convert curve which only contain LineSegment into polygon.
|
|
40
|
-
* @param curve - curve to convert. curve must contain 1 subpath
|
|
41
|
-
* @param maxLength - max distance between two point
|
|
42
|
-
* @returns - null if curve contain segment other than LineSegment
|
|
43
|
-
*/
|
|
44
|
-
|
|
45
|
-
function exactPolygonPoints(
|
|
46
|
-
curve: SubcurveProfile,
|
|
47
|
-
maxLength: number,
|
|
48
|
-
): Vector2[] | null {
|
|
49
|
-
const points: Vector2[] = [];
|
|
50
|
-
|
|
51
|
-
let endPoint: Vector2 | null = null;
|
|
52
|
-
for (const segment of curve.segments) {
|
|
53
|
-
if (!(segment instanceof LineSegment)) return null;
|
|
54
|
-
|
|
55
|
-
points.push(segment.from);
|
|
56
|
-
|
|
57
|
-
endPoint = segment.to;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
if (endPoint) points.push(endPoint);
|
|
61
|
-
|
|
62
|
-
if (!Number.isNaN(maxLength) && maxLength > 0) {
|
|
63
|
-
bisect(points, maxLength);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
return points;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Calculate area of polygon
|
|
71
|
-
* @param points - polygon points
|
|
72
|
-
* @returns - area of polygon
|
|
73
|
-
*/
|
|
74
|
-
|
|
75
|
-
function polygonArea(points: Vector2[]) {
|
|
76
|
-
return (
|
|
77
|
-
points.reduce((area, a, i) => {
|
|
78
|
-
const b = points[(i + 1) % points.length];
|
|
79
|
-
return area + (a.y * b.x - a.x * b.y);
|
|
80
|
-
}, 0) / 2
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* Convert curve into polygon by sampling curve profile
|
|
86
|
-
* @param curve - curve to convert. curve must contain only 1 subpath
|
|
87
|
-
* @param maxLength - max distance between point
|
|
88
|
-
* @returns - always return polygon points
|
|
89
|
-
*/
|
|
90
|
-
|
|
91
|
-
function approximatePolygonPoints(
|
|
92
|
-
curve: SubcurveProfile,
|
|
93
|
-
maxLength: number,
|
|
94
|
-
): Vector2[] {
|
|
95
|
-
const points: Vector2[] = [];
|
|
96
|
-
|
|
97
|
-
let numPoints = 3;
|
|
98
|
-
if (!Number.isNaN(maxLength) && maxLength > 0) {
|
|
99
|
-
numPoints = Math.max(numPoints, Math.ceil(curve.arcLength / maxLength));
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
for (let i = 0; i < numPoints; i += 1) {
|
|
103
|
-
const point = getPointAtDistance(
|
|
104
|
-
curve,
|
|
105
|
-
curve.arcLength * (i / (numPoints - 1)),
|
|
106
|
-
);
|
|
107
|
-
points.push(point.position);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
if (polygonArea(points) > 0) points.reverse();
|
|
111
|
-
|
|
112
|
-
return points;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/**
|
|
116
|
-
* Split curve into subpaths
|
|
117
|
-
* @param curve - curve to split
|
|
118
|
-
* @returns - subpaths of curve
|
|
119
|
-
*/
|
|
120
|
-
|
|
121
|
-
function splitCurve(curve: CurveProfile) {
|
|
122
|
-
if (curve.segments.length === 0) return [];
|
|
123
|
-
|
|
124
|
-
let current: SubcurveProfile = {
|
|
125
|
-
arcLength: 0,
|
|
126
|
-
minSin: 0,
|
|
127
|
-
segments: [],
|
|
128
|
-
closed: false,
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
let endPoint: Vector2 | null = null;
|
|
132
|
-
|
|
133
|
-
const composite: SubcurveProfile[] = [current];
|
|
134
|
-
|
|
135
|
-
for (const segment of curve.segments) {
|
|
136
|
-
const start = segment.getPoint(0).position;
|
|
137
|
-
|
|
138
|
-
if (endPoint && !start.equals(endPoint)) {
|
|
139
|
-
current = {
|
|
140
|
-
arcLength: 0,
|
|
141
|
-
minSin: 0,
|
|
142
|
-
segments: [],
|
|
143
|
-
closed: false,
|
|
144
|
-
};
|
|
145
|
-
composite.push(current);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
current.segments.push(segment);
|
|
149
|
-
current.arcLength += segment.arcLength;
|
|
150
|
-
endPoint = segment.getPoint(1).position;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
for (const sub of composite) {
|
|
154
|
-
sub.closed = sub.segments[0]
|
|
155
|
-
.getPoint(0)
|
|
156
|
-
.position.equals(
|
|
157
|
-
sub.segments[sub.segments.length - 1].getPoint(1).position,
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
return composite;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
/**
|
|
165
|
-
* Convert curve into polygon use best possible method
|
|
166
|
-
* @param curve - curve to convert
|
|
167
|
-
* @param maxLength - max distance between two point
|
|
168
|
-
* @returns - polgon points
|
|
169
|
-
*/
|
|
170
|
-
|
|
171
|
-
function subcurveToPolygon(
|
|
172
|
-
curve: SubcurveProfile,
|
|
173
|
-
maxLength: number,
|
|
174
|
-
): PolygonProfile {
|
|
175
|
-
const points =
|
|
176
|
-
exactPolygonPoints(curve, maxLength) ||
|
|
177
|
-
approximatePolygonPoints(curve, maxLength);
|
|
178
|
-
return {
|
|
179
|
-
points: [...points],
|
|
180
|
-
closed: curve.closed,
|
|
181
|
-
};
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
/**
|
|
185
|
-
* Calculate polygon perimeter
|
|
186
|
-
* @param points - polygon points
|
|
187
|
-
* @returns - perimeter of polygon
|
|
188
|
-
*/
|
|
189
|
-
|
|
190
|
-
export function polygonLength(points: Vector2[]) {
|
|
191
|
-
return points.reduce((length, point, i) => {
|
|
192
|
-
if (i) return length + points[i - 1].sub(point).magnitude;
|
|
193
|
-
return 0;
|
|
194
|
-
}, 0);
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/**s
|
|
198
|
-
* Sample additional points for polygon to better match its pair. This will mutate original points.
|
|
199
|
-
* @param points - polygon points
|
|
200
|
-
* @param numPoints - number of points to be added
|
|
201
|
-
*/
|
|
202
|
-
|
|
203
|
-
function addPoints(points: Vector2[], numPoints: number) {
|
|
204
|
-
const desiredLength = points.length + numPoints;
|
|
205
|
-
const step = polygonLength(points) / numPoints;
|
|
206
|
-
|
|
207
|
-
let i = 0;
|
|
208
|
-
let cursor = 0;
|
|
209
|
-
let insertAt = step / 2;
|
|
210
|
-
|
|
211
|
-
while (points.length < desiredLength) {
|
|
212
|
-
const a = points[i];
|
|
213
|
-
const b = points[(i + 1) % points.length];
|
|
214
|
-
const length = a.sub(b).magnitude;
|
|
215
|
-
|
|
216
|
-
if (insertAt <= cursor + length) {
|
|
217
|
-
points.splice(
|
|
218
|
-
i + 1,
|
|
219
|
-
0,
|
|
220
|
-
length
|
|
221
|
-
? Vector2.lerp(a, b, (insertAt - cursor) / length)
|
|
222
|
-
: new Vector2(a),
|
|
223
|
-
);
|
|
224
|
-
insertAt += step;
|
|
225
|
-
} else {
|
|
226
|
-
cursor += length;
|
|
227
|
-
i += 1;
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
/**
|
|
233
|
-
* Calculate total moving point distance when morphing between polygon points
|
|
234
|
-
* @param points - first polygon points
|
|
235
|
-
* @param reference - second polygon points
|
|
236
|
-
* @param offset - offset for first polygon points
|
|
237
|
-
* @returns
|
|
238
|
-
*/
|
|
239
|
-
|
|
240
|
-
export function calculateLerpDistance(
|
|
241
|
-
points: Vector2[],
|
|
242
|
-
reference: Vector2[],
|
|
243
|
-
offset: number,
|
|
244
|
-
) {
|
|
245
|
-
const len = points.length;
|
|
246
|
-
let sumOfSquares = 0;
|
|
247
|
-
|
|
248
|
-
for (let i = 0; i < reference.length; i += 1) {
|
|
249
|
-
const a = points[(offset + i) % len];
|
|
250
|
-
const b = reference[i];
|
|
251
|
-
sumOfSquares += a.sub(b).squaredMagnitude;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
return sumOfSquares;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
/**
|
|
258
|
-
* Rotate polygon in order to minimize moving points.
|
|
259
|
-
* @param polygon - polygon to be rotated
|
|
260
|
-
* @param reference - polygon to be reference
|
|
261
|
-
*/
|
|
262
|
-
|
|
263
|
-
function rotatePolygon(polygon: PolygonProfile, reference: PolygonProfile) {
|
|
264
|
-
const {points, closed} = polygon;
|
|
265
|
-
const len = points.length;
|
|
266
|
-
|
|
267
|
-
if (!closed) {
|
|
268
|
-
const originalDistance = calculateLerpDistance(points, reference.points, 0);
|
|
269
|
-
const reversedPoints = [...points].reverse();
|
|
270
|
-
const reversedDistance = calculateLerpDistance(
|
|
271
|
-
reversedPoints,
|
|
272
|
-
reference.points,
|
|
273
|
-
0,
|
|
274
|
-
);
|
|
275
|
-
if (reversedDistance < originalDistance) polygon.points = reversedPoints;
|
|
276
|
-
} else {
|
|
277
|
-
let minDistance = Infinity;
|
|
278
|
-
let bestOffset = 0;
|
|
279
|
-
const last = points.pop();
|
|
280
|
-
|
|
281
|
-
// Closed polygon first point must equal last point
|
|
282
|
-
// When we rotate polygon, first point is changed which mean last point also must changed
|
|
283
|
-
// When we remove last point, calculateLerpDistance will assume last point is equal first point
|
|
284
|
-
// Proof:
|
|
285
|
-
// len = points.length = reference.length - 1
|
|
286
|
-
// When i = 0:
|
|
287
|
-
// (offset + i) % len = offset % len
|
|
288
|
-
// When i = reference.length - 1 or i = len
|
|
289
|
-
// (offset + i) % len = (offset + len) % len = offset % len
|
|
290
|
-
|
|
291
|
-
for (let offset = 0; offset < len; offset += 1) {
|
|
292
|
-
const distance = calculateLerpDistance(points, reference.points, offset);
|
|
293
|
-
if (distance < minDistance) {
|
|
294
|
-
minDistance = distance;
|
|
295
|
-
bestOffset = offset;
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
if (last) points.push(last);
|
|
300
|
-
|
|
301
|
-
if (bestOffset) {
|
|
302
|
-
points.pop();
|
|
303
|
-
const spliced = points.splice(0, bestOffset);
|
|
304
|
-
points.splice(points.length, 0, ...spliced);
|
|
305
|
-
points.push(points[0]);
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
/**
|
|
311
|
-
* Round polygon's points coordinate to a specified amount of decimal
|
|
312
|
-
* @param points - polygon point to be rounded
|
|
313
|
-
* @param round - amount of decimal
|
|
314
|
-
* @returns - new polygon point
|
|
315
|
-
*/
|
|
316
|
-
|
|
317
|
-
function roundPolygon(
|
|
318
|
-
{points, ...rest}: PolygonProfile,
|
|
319
|
-
round: number,
|
|
320
|
-
): PolygonProfile {
|
|
321
|
-
const pow = round >= 1 ? 10 ** round : 1;
|
|
322
|
-
return {
|
|
323
|
-
points: points.map(point => {
|
|
324
|
-
const [x, y] = [point.x, point.y].map(n => Math.round(n * pow) / pow);
|
|
325
|
-
return new Vector2(x, y);
|
|
326
|
-
}),
|
|
327
|
-
...rest,
|
|
328
|
-
};
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
/**
|
|
332
|
-
* Create two polygon to tween between sub curve/path
|
|
333
|
-
* @param from - source curve
|
|
334
|
-
* @param to - targe curve
|
|
335
|
-
* @param precision - desired distance between two point
|
|
336
|
-
* @param round - amount of decimal when rounding
|
|
337
|
-
* @returns two polygon ready to tween
|
|
338
|
-
*/
|
|
339
|
-
|
|
340
|
-
function getSubcurveInterpolationPolygon(
|
|
341
|
-
from: SubcurveProfile,
|
|
342
|
-
to: SubcurveProfile,
|
|
343
|
-
precision: number,
|
|
344
|
-
round: number,
|
|
345
|
-
) {
|
|
346
|
-
const morphPrecision = precision;
|
|
347
|
-
const fromRing = subcurveToPolygon(from, morphPrecision);
|
|
348
|
-
const toRing = subcurveToPolygon(to, morphPrecision);
|
|
349
|
-
|
|
350
|
-
const diff = fromRing.points.length - toRing.points.length;
|
|
351
|
-
|
|
352
|
-
addPoints(fromRing.points, diff < 0 ? diff * -1 : 0);
|
|
353
|
-
addPoints(toRing.points, diff > 0 ? diff : 0);
|
|
354
|
-
|
|
355
|
-
if (!from.closed && to.closed) rotatePolygon(toRing, fromRing);
|
|
356
|
-
else rotatePolygon(fromRing, toRing);
|
|
357
|
-
|
|
358
|
-
return {
|
|
359
|
-
from: roundPolygon(fromRing, round),
|
|
360
|
-
to: roundPolygon(toRing, round),
|
|
361
|
-
};
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
/**
|
|
365
|
-
* Make two sub curve list have equal length
|
|
366
|
-
* @param subcurves - List to add
|
|
367
|
-
* @param reference - Reference list
|
|
368
|
-
*/
|
|
369
|
-
|
|
370
|
-
function balanceSubcurves(
|
|
371
|
-
subcurves: SubcurveProfile[],
|
|
372
|
-
reference: SubcurveProfile[],
|
|
373
|
-
) {
|
|
374
|
-
for (let i = subcurves.length; i < reference.length; i++) {
|
|
375
|
-
const point = reference[i].segments[0].getPoint(0).position;
|
|
376
|
-
subcurves.push({
|
|
377
|
-
arcLength: 0,
|
|
378
|
-
closed: false,
|
|
379
|
-
minSin: 0,
|
|
380
|
-
segments: [new LineSegment(point, point)],
|
|
381
|
-
});
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
/**
|
|
386
|
-
* Create two polygon to tween between curve
|
|
387
|
-
* @param from - source curve
|
|
388
|
-
* @param to - targe curve
|
|
389
|
-
* @param precision - desired distance between two point
|
|
390
|
-
* @param round - amount of decimal when rounding
|
|
391
|
-
* @returns list that contain list of polygon before and after tween
|
|
392
|
-
*/
|
|
393
|
-
|
|
394
|
-
function getInterpolationPolygon(
|
|
395
|
-
from: CurveProfile,
|
|
396
|
-
to: CurveProfile,
|
|
397
|
-
precision: number,
|
|
398
|
-
round: number,
|
|
399
|
-
) {
|
|
400
|
-
const fromSub = splitCurve(from);
|
|
401
|
-
const toSub = splitCurve(to);
|
|
402
|
-
|
|
403
|
-
if (fromSub.length < toSub.length) balanceSubcurves(fromSub, toSub);
|
|
404
|
-
else balanceSubcurves(toSub, fromSub);
|
|
405
|
-
|
|
406
|
-
return fromSub.map((sub, i) =>
|
|
407
|
-
getSubcurveInterpolationPolygon(sub, toSub[i], precision, round),
|
|
408
|
-
);
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
/**
|
|
412
|
-
* Add curve into another curve
|
|
413
|
-
* @param target - target curve
|
|
414
|
-
* @param source - curve to add
|
|
415
|
-
*/
|
|
416
|
-
|
|
417
|
-
function addCurveToCurve(target: CurveProfile, source: CurveProfile) {
|
|
418
|
-
const {segments, arcLength, minSin} = source;
|
|
419
|
-
target.segments.push(...segments);
|
|
420
|
-
target.arcLength += arcLength;
|
|
421
|
-
target.minSin = Math.min(target.minSin, minSin);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
/**
|
|
425
|
-
* Interpolate between two polygon points.
|
|
426
|
-
* @param from - source polygon points
|
|
427
|
-
* @param to - target polygon points
|
|
428
|
-
* @param value - interpolation progress
|
|
429
|
-
* @returns - new polygon points
|
|
430
|
-
*/
|
|
431
|
-
|
|
432
|
-
export function polygonPointsLerp(
|
|
433
|
-
from: Vector2[],
|
|
434
|
-
to: Vector2[],
|
|
435
|
-
value: number,
|
|
436
|
-
): Vector2[] {
|
|
437
|
-
const points: Vector2[] = [];
|
|
438
|
-
if (value === 0) return [...from];
|
|
439
|
-
if (value === 1) return [...to];
|
|
440
|
-
|
|
441
|
-
for (let i = 0; i < from.length; i++) {
|
|
442
|
-
const a = from[i];
|
|
443
|
-
const b = to[i];
|
|
444
|
-
points.push(Vector2.lerp(a, b, value));
|
|
445
|
-
}
|
|
446
|
-
return points;
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
/**
|
|
450
|
-
* Create interpolator to tween between two curve
|
|
451
|
-
* @param a - source curve
|
|
452
|
-
* @param b - target curve
|
|
453
|
-
* @returns - curve interpolator
|
|
454
|
-
*/
|
|
455
|
-
|
|
456
|
-
export function createCurveProfileLerp(a: CurveProfile, b: CurveProfile) {
|
|
457
|
-
const interpolations = getInterpolationPolygon(a, b, 5, 4);
|
|
458
|
-
|
|
459
|
-
return (progress: number) => {
|
|
460
|
-
const curve: CurveProfile = {
|
|
461
|
-
segments: [],
|
|
462
|
-
arcLength: 0,
|
|
463
|
-
minSin: 1,
|
|
464
|
-
};
|
|
465
|
-
for (const {from, to} of interpolations) {
|
|
466
|
-
const points = polygonPointsLerp(from.points, to.points, progress);
|
|
467
|
-
addCurveToCurve(curve, getPolylineProfile(points, 0, false));
|
|
468
|
-
}
|
|
469
|
-
return curve;
|
|
470
|
-
};
|
|
471
|
-
}
|
|
1
|
+
import {Vector2} from '@twick/core';
|
|
2
|
+
import type {CurveProfile} from './CurveProfile';
|
|
3
|
+
import {LineSegment} from './LineSegment';
|
|
4
|
+
import {getPointAtDistance} from './getPointAtDistance';
|
|
5
|
+
import {getPolylineProfile} from './getPolylineProfile';
|
|
6
|
+
|
|
7
|
+
// Based on kute.js svgMorph plugin
|
|
8
|
+
|
|
9
|
+
interface SubcurveProfile extends CurveProfile {
|
|
10
|
+
closed: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface PolygonProfile {
|
|
14
|
+
/**
|
|
15
|
+
* If path closed, first point and last point must be equal
|
|
16
|
+
*/
|
|
17
|
+
points: Vector2[];
|
|
18
|
+
closed: boolean;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Split segments of polygon until distance between adjacent point is less than or equal maxLength. This function mutate original points.
|
|
23
|
+
* @param points - Polygon points
|
|
24
|
+
* @param maxLength - max distance between two point
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
function bisect(points: Vector2[], maxLength: number) {
|
|
28
|
+
for (let i = 0; i < points.length - 1; i++) {
|
|
29
|
+
const a = points[i];
|
|
30
|
+
let b = points[i + 1];
|
|
31
|
+
while (a.sub(b).magnitude > maxLength) {
|
|
32
|
+
b = Vector2.lerp(a, b, 0.5);
|
|
33
|
+
points.splice(i + 1, 0, b);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Convert curve which only contain LineSegment into polygon.
|
|
40
|
+
* @param curve - curve to convert. curve must contain 1 subpath
|
|
41
|
+
* @param maxLength - max distance between two point
|
|
42
|
+
* @returns - null if curve contain segment other than LineSegment
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
function exactPolygonPoints(
|
|
46
|
+
curve: SubcurveProfile,
|
|
47
|
+
maxLength: number,
|
|
48
|
+
): Vector2[] | null {
|
|
49
|
+
const points: Vector2[] = [];
|
|
50
|
+
|
|
51
|
+
let endPoint: Vector2 | null = null;
|
|
52
|
+
for (const segment of curve.segments) {
|
|
53
|
+
if (!(segment instanceof LineSegment)) return null;
|
|
54
|
+
|
|
55
|
+
points.push(segment.from);
|
|
56
|
+
|
|
57
|
+
endPoint = segment.to;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if (endPoint) points.push(endPoint);
|
|
61
|
+
|
|
62
|
+
if (!Number.isNaN(maxLength) && maxLength > 0) {
|
|
63
|
+
bisect(points, maxLength);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
return points;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Calculate area of polygon
|
|
71
|
+
* @param points - polygon points
|
|
72
|
+
* @returns - area of polygon
|
|
73
|
+
*/
|
|
74
|
+
|
|
75
|
+
function polygonArea(points: Vector2[]) {
|
|
76
|
+
return (
|
|
77
|
+
points.reduce((area, a, i) => {
|
|
78
|
+
const b = points[(i + 1) % points.length];
|
|
79
|
+
return area + (a.y * b.x - a.x * b.y);
|
|
80
|
+
}, 0) / 2
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Convert curve into polygon by sampling curve profile
|
|
86
|
+
* @param curve - curve to convert. curve must contain only 1 subpath
|
|
87
|
+
* @param maxLength - max distance between point
|
|
88
|
+
* @returns - always return polygon points
|
|
89
|
+
*/
|
|
90
|
+
|
|
91
|
+
function approximatePolygonPoints(
|
|
92
|
+
curve: SubcurveProfile,
|
|
93
|
+
maxLength: number,
|
|
94
|
+
): Vector2[] {
|
|
95
|
+
const points: Vector2[] = [];
|
|
96
|
+
|
|
97
|
+
let numPoints = 3;
|
|
98
|
+
if (!Number.isNaN(maxLength) && maxLength > 0) {
|
|
99
|
+
numPoints = Math.max(numPoints, Math.ceil(curve.arcLength / maxLength));
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
for (let i = 0; i < numPoints; i += 1) {
|
|
103
|
+
const point = getPointAtDistance(
|
|
104
|
+
curve,
|
|
105
|
+
curve.arcLength * (i / (numPoints - 1)),
|
|
106
|
+
);
|
|
107
|
+
points.push(point.position);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
if (polygonArea(points) > 0) points.reverse();
|
|
111
|
+
|
|
112
|
+
return points;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Split curve into subpaths
|
|
117
|
+
* @param curve - curve to split
|
|
118
|
+
* @returns - subpaths of curve
|
|
119
|
+
*/
|
|
120
|
+
|
|
121
|
+
function splitCurve(curve: CurveProfile) {
|
|
122
|
+
if (curve.segments.length === 0) return [];
|
|
123
|
+
|
|
124
|
+
let current: SubcurveProfile = {
|
|
125
|
+
arcLength: 0,
|
|
126
|
+
minSin: 0,
|
|
127
|
+
segments: [],
|
|
128
|
+
closed: false,
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
let endPoint: Vector2 | null = null;
|
|
132
|
+
|
|
133
|
+
const composite: SubcurveProfile[] = [current];
|
|
134
|
+
|
|
135
|
+
for (const segment of curve.segments) {
|
|
136
|
+
const start = segment.getPoint(0).position;
|
|
137
|
+
|
|
138
|
+
if (endPoint && !start.equals(endPoint)) {
|
|
139
|
+
current = {
|
|
140
|
+
arcLength: 0,
|
|
141
|
+
minSin: 0,
|
|
142
|
+
segments: [],
|
|
143
|
+
closed: false,
|
|
144
|
+
};
|
|
145
|
+
composite.push(current);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
current.segments.push(segment);
|
|
149
|
+
current.arcLength += segment.arcLength;
|
|
150
|
+
endPoint = segment.getPoint(1).position;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
for (const sub of composite) {
|
|
154
|
+
sub.closed = sub.segments[0]
|
|
155
|
+
.getPoint(0)
|
|
156
|
+
.position.equals(
|
|
157
|
+
sub.segments[sub.segments.length - 1].getPoint(1).position,
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
return composite;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* Convert curve into polygon use best possible method
|
|
166
|
+
* @param curve - curve to convert
|
|
167
|
+
* @param maxLength - max distance between two point
|
|
168
|
+
* @returns - polgon points
|
|
169
|
+
*/
|
|
170
|
+
|
|
171
|
+
function subcurveToPolygon(
|
|
172
|
+
curve: SubcurveProfile,
|
|
173
|
+
maxLength: number,
|
|
174
|
+
): PolygonProfile {
|
|
175
|
+
const points =
|
|
176
|
+
exactPolygonPoints(curve, maxLength) ||
|
|
177
|
+
approximatePolygonPoints(curve, maxLength);
|
|
178
|
+
return {
|
|
179
|
+
points: [...points],
|
|
180
|
+
closed: curve.closed,
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/**
|
|
185
|
+
* Calculate polygon perimeter
|
|
186
|
+
* @param points - polygon points
|
|
187
|
+
* @returns - perimeter of polygon
|
|
188
|
+
*/
|
|
189
|
+
|
|
190
|
+
export function polygonLength(points: Vector2[]) {
|
|
191
|
+
return points.reduce((length, point, i) => {
|
|
192
|
+
if (i) return length + points[i - 1].sub(point).magnitude;
|
|
193
|
+
return 0;
|
|
194
|
+
}, 0);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/**s
|
|
198
|
+
* Sample additional points for polygon to better match its pair. This will mutate original points.
|
|
199
|
+
* @param points - polygon points
|
|
200
|
+
* @param numPoints - number of points to be added
|
|
201
|
+
*/
|
|
202
|
+
|
|
203
|
+
function addPoints(points: Vector2[], numPoints: number) {
|
|
204
|
+
const desiredLength = points.length + numPoints;
|
|
205
|
+
const step = polygonLength(points) / numPoints;
|
|
206
|
+
|
|
207
|
+
let i = 0;
|
|
208
|
+
let cursor = 0;
|
|
209
|
+
let insertAt = step / 2;
|
|
210
|
+
|
|
211
|
+
while (points.length < desiredLength) {
|
|
212
|
+
const a = points[i];
|
|
213
|
+
const b = points[(i + 1) % points.length];
|
|
214
|
+
const length = a.sub(b).magnitude;
|
|
215
|
+
|
|
216
|
+
if (insertAt <= cursor + length) {
|
|
217
|
+
points.splice(
|
|
218
|
+
i + 1,
|
|
219
|
+
0,
|
|
220
|
+
length
|
|
221
|
+
? Vector2.lerp(a, b, (insertAt - cursor) / length)
|
|
222
|
+
: new Vector2(a),
|
|
223
|
+
);
|
|
224
|
+
insertAt += step;
|
|
225
|
+
} else {
|
|
226
|
+
cursor += length;
|
|
227
|
+
i += 1;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/**
|
|
233
|
+
* Calculate total moving point distance when morphing between polygon points
|
|
234
|
+
* @param points - first polygon points
|
|
235
|
+
* @param reference - second polygon points
|
|
236
|
+
* @param offset - offset for first polygon points
|
|
237
|
+
* @returns
|
|
238
|
+
*/
|
|
239
|
+
|
|
240
|
+
export function calculateLerpDistance(
|
|
241
|
+
points: Vector2[],
|
|
242
|
+
reference: Vector2[],
|
|
243
|
+
offset: number,
|
|
244
|
+
) {
|
|
245
|
+
const len = points.length;
|
|
246
|
+
let sumOfSquares = 0;
|
|
247
|
+
|
|
248
|
+
for (let i = 0; i < reference.length; i += 1) {
|
|
249
|
+
const a = points[(offset + i) % len];
|
|
250
|
+
const b = reference[i];
|
|
251
|
+
sumOfSquares += a.sub(b).squaredMagnitude;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
return sumOfSquares;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/**
|
|
258
|
+
* Rotate polygon in order to minimize moving points.
|
|
259
|
+
* @param polygon - polygon to be rotated
|
|
260
|
+
* @param reference - polygon to be reference
|
|
261
|
+
*/
|
|
262
|
+
|
|
263
|
+
function rotatePolygon(polygon: PolygonProfile, reference: PolygonProfile) {
|
|
264
|
+
const {points, closed} = polygon;
|
|
265
|
+
const len = points.length;
|
|
266
|
+
|
|
267
|
+
if (!closed) {
|
|
268
|
+
const originalDistance = calculateLerpDistance(points, reference.points, 0);
|
|
269
|
+
const reversedPoints = [...points].reverse();
|
|
270
|
+
const reversedDistance = calculateLerpDistance(
|
|
271
|
+
reversedPoints,
|
|
272
|
+
reference.points,
|
|
273
|
+
0,
|
|
274
|
+
);
|
|
275
|
+
if (reversedDistance < originalDistance) polygon.points = reversedPoints;
|
|
276
|
+
} else {
|
|
277
|
+
let minDistance = Infinity;
|
|
278
|
+
let bestOffset = 0;
|
|
279
|
+
const last = points.pop();
|
|
280
|
+
|
|
281
|
+
// Closed polygon first point must equal last point
|
|
282
|
+
// When we rotate polygon, first point is changed which mean last point also must changed
|
|
283
|
+
// When we remove last point, calculateLerpDistance will assume last point is equal first point
|
|
284
|
+
// Proof:
|
|
285
|
+
// len = points.length = reference.length - 1
|
|
286
|
+
// When i = 0:
|
|
287
|
+
// (offset + i) % len = offset % len
|
|
288
|
+
// When i = reference.length - 1 or i = len
|
|
289
|
+
// (offset + i) % len = (offset + len) % len = offset % len
|
|
290
|
+
|
|
291
|
+
for (let offset = 0; offset < len; offset += 1) {
|
|
292
|
+
const distance = calculateLerpDistance(points, reference.points, offset);
|
|
293
|
+
if (distance < minDistance) {
|
|
294
|
+
minDistance = distance;
|
|
295
|
+
bestOffset = offset;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
if (last) points.push(last);
|
|
300
|
+
|
|
301
|
+
if (bestOffset) {
|
|
302
|
+
points.pop();
|
|
303
|
+
const spliced = points.splice(0, bestOffset);
|
|
304
|
+
points.splice(points.length, 0, ...spliced);
|
|
305
|
+
points.push(points[0]);
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/**
|
|
311
|
+
* Round polygon's points coordinate to a specified amount of decimal
|
|
312
|
+
* @param points - polygon point to be rounded
|
|
313
|
+
* @param round - amount of decimal
|
|
314
|
+
* @returns - new polygon point
|
|
315
|
+
*/
|
|
316
|
+
|
|
317
|
+
function roundPolygon(
|
|
318
|
+
{points, ...rest}: PolygonProfile,
|
|
319
|
+
round: number,
|
|
320
|
+
): PolygonProfile {
|
|
321
|
+
const pow = round >= 1 ? 10 ** round : 1;
|
|
322
|
+
return {
|
|
323
|
+
points: points.map(point => {
|
|
324
|
+
const [x, y] = [point.x, point.y].map(n => Math.round(n * pow) / pow);
|
|
325
|
+
return new Vector2(x, y);
|
|
326
|
+
}),
|
|
327
|
+
...rest,
|
|
328
|
+
};
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* Create two polygon to tween between sub curve/path
|
|
333
|
+
* @param from - source curve
|
|
334
|
+
* @param to - targe curve
|
|
335
|
+
* @param precision - desired distance between two point
|
|
336
|
+
* @param round - amount of decimal when rounding
|
|
337
|
+
* @returns two polygon ready to tween
|
|
338
|
+
*/
|
|
339
|
+
|
|
340
|
+
function getSubcurveInterpolationPolygon(
|
|
341
|
+
from: SubcurveProfile,
|
|
342
|
+
to: SubcurveProfile,
|
|
343
|
+
precision: number,
|
|
344
|
+
round: number,
|
|
345
|
+
) {
|
|
346
|
+
const morphPrecision = precision;
|
|
347
|
+
const fromRing = subcurveToPolygon(from, morphPrecision);
|
|
348
|
+
const toRing = subcurveToPolygon(to, morphPrecision);
|
|
349
|
+
|
|
350
|
+
const diff = fromRing.points.length - toRing.points.length;
|
|
351
|
+
|
|
352
|
+
addPoints(fromRing.points, diff < 0 ? diff * -1 : 0);
|
|
353
|
+
addPoints(toRing.points, diff > 0 ? diff : 0);
|
|
354
|
+
|
|
355
|
+
if (!from.closed && to.closed) rotatePolygon(toRing, fromRing);
|
|
356
|
+
else rotatePolygon(fromRing, toRing);
|
|
357
|
+
|
|
358
|
+
return {
|
|
359
|
+
from: roundPolygon(fromRing, round),
|
|
360
|
+
to: roundPolygon(toRing, round),
|
|
361
|
+
};
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
/**
|
|
365
|
+
* Make two sub curve list have equal length
|
|
366
|
+
* @param subcurves - List to add
|
|
367
|
+
* @param reference - Reference list
|
|
368
|
+
*/
|
|
369
|
+
|
|
370
|
+
function balanceSubcurves(
|
|
371
|
+
subcurves: SubcurveProfile[],
|
|
372
|
+
reference: SubcurveProfile[],
|
|
373
|
+
) {
|
|
374
|
+
for (let i = subcurves.length; i < reference.length; i++) {
|
|
375
|
+
const point = reference[i].segments[0].getPoint(0).position;
|
|
376
|
+
subcurves.push({
|
|
377
|
+
arcLength: 0,
|
|
378
|
+
closed: false,
|
|
379
|
+
minSin: 0,
|
|
380
|
+
segments: [new LineSegment(point, point)],
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
/**
|
|
386
|
+
* Create two polygon to tween between curve
|
|
387
|
+
* @param from - source curve
|
|
388
|
+
* @param to - targe curve
|
|
389
|
+
* @param precision - desired distance between two point
|
|
390
|
+
* @param round - amount of decimal when rounding
|
|
391
|
+
* @returns list that contain list of polygon before and after tween
|
|
392
|
+
*/
|
|
393
|
+
|
|
394
|
+
function getInterpolationPolygon(
|
|
395
|
+
from: CurveProfile,
|
|
396
|
+
to: CurveProfile,
|
|
397
|
+
precision: number,
|
|
398
|
+
round: number,
|
|
399
|
+
) {
|
|
400
|
+
const fromSub = splitCurve(from);
|
|
401
|
+
const toSub = splitCurve(to);
|
|
402
|
+
|
|
403
|
+
if (fromSub.length < toSub.length) balanceSubcurves(fromSub, toSub);
|
|
404
|
+
else balanceSubcurves(toSub, fromSub);
|
|
405
|
+
|
|
406
|
+
return fromSub.map((sub, i) =>
|
|
407
|
+
getSubcurveInterpolationPolygon(sub, toSub[i], precision, round),
|
|
408
|
+
);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/**
|
|
412
|
+
* Add curve into another curve
|
|
413
|
+
* @param target - target curve
|
|
414
|
+
* @param source - curve to add
|
|
415
|
+
*/
|
|
416
|
+
|
|
417
|
+
function addCurveToCurve(target: CurveProfile, source: CurveProfile) {
|
|
418
|
+
const {segments, arcLength, minSin} = source;
|
|
419
|
+
target.segments.push(...segments);
|
|
420
|
+
target.arcLength += arcLength;
|
|
421
|
+
target.minSin = Math.min(target.minSin, minSin);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/**
|
|
425
|
+
* Interpolate between two polygon points.
|
|
426
|
+
* @param from - source polygon points
|
|
427
|
+
* @param to - target polygon points
|
|
428
|
+
* @param value - interpolation progress
|
|
429
|
+
* @returns - new polygon points
|
|
430
|
+
*/
|
|
431
|
+
|
|
432
|
+
export function polygonPointsLerp(
|
|
433
|
+
from: Vector2[],
|
|
434
|
+
to: Vector2[],
|
|
435
|
+
value: number,
|
|
436
|
+
): Vector2[] {
|
|
437
|
+
const points: Vector2[] = [];
|
|
438
|
+
if (value === 0) return [...from];
|
|
439
|
+
if (value === 1) return [...to];
|
|
440
|
+
|
|
441
|
+
for (let i = 0; i < from.length; i++) {
|
|
442
|
+
const a = from[i];
|
|
443
|
+
const b = to[i];
|
|
444
|
+
points.push(Vector2.lerp(a, b, value));
|
|
445
|
+
}
|
|
446
|
+
return points;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
/**
|
|
450
|
+
* Create interpolator to tween between two curve
|
|
451
|
+
* @param a - source curve
|
|
452
|
+
* @param b - target curve
|
|
453
|
+
* @returns - curve interpolator
|
|
454
|
+
*/
|
|
455
|
+
|
|
456
|
+
export function createCurveProfileLerp(a: CurveProfile, b: CurveProfile) {
|
|
457
|
+
const interpolations = getInterpolationPolygon(a, b, 5, 4);
|
|
458
|
+
|
|
459
|
+
return (progress: number) => {
|
|
460
|
+
const curve: CurveProfile = {
|
|
461
|
+
segments: [],
|
|
462
|
+
arcLength: 0,
|
|
463
|
+
minSin: 1,
|
|
464
|
+
};
|
|
465
|
+
for (const {from, to} of interpolations) {
|
|
466
|
+
const points = polygonPointsLerp(from.points, to.points, progress);
|
|
467
|
+
addCurveToCurve(curve, getPolylineProfile(points, 0, false));
|
|
468
|
+
}
|
|
469
|
+
return curve;
|
|
470
|
+
};
|
|
471
|
+
}
|