@leafer-in/motion-path 1.0.6-rc1
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 -0
- package/README.md +1 -0
- package/dist/motion-path.cjs +317 -0
- package/dist/motion-path.esm.js +313 -0
- package/dist/motion-path.esm.min.js +1 -0
- package/dist/motion-path.js +321 -0
- package/dist/motion-path.min.cjs +1 -0
- package/dist/motion-path.min.js +1 -0
- package/package.json +37 -0
- package/src/HighBezierHelper.ts +50 -0
- package/src/HighCurveHelper.ts +212 -0
- package/src/decorator.ts +12 -0
- package/src/index.ts +103 -0
- package/types/index.d.ts +20 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023-present, Chao (Leafer) Wan
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
|
13
|
+
all copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
21
|
+
THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# @leafer-in/motion-path
|
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var draw = require('@leafer-ui/draw');
|
|
4
|
+
|
|
5
|
+
const gaussNodes = [0.1488743389, 0.4333953941, 0.6794095682, 0.8650633666, 0.9739065285];
|
|
6
|
+
const gaussWeights = [0.2955242247, 0.2692667193, 0.2190863625, 0.1494513491, 0.0666713443];
|
|
7
|
+
const { sqrt } = Math;
|
|
8
|
+
const HighBezierHelper = {
|
|
9
|
+
getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY) {
|
|
10
|
+
let distance = 0, t1, t2, d1X, d1Y, d2X, d2Y;
|
|
11
|
+
for (let i = 0; i < gaussNodes.length; i++) {
|
|
12
|
+
t1 = 0.5 * (1 + gaussNodes[i]);
|
|
13
|
+
t2 = 0.5 * (1 - gaussNodes[i]);
|
|
14
|
+
d1X = getDerivative(t1, fromX, x1, x2, toX);
|
|
15
|
+
d1Y = getDerivative(t1, fromY, y1, y2, toY);
|
|
16
|
+
d2X = getDerivative(t2, fromX, x1, x2, toX);
|
|
17
|
+
d2Y = getDerivative(t2, fromY, y1, y2, toY);
|
|
18
|
+
distance += gaussWeights[i] * (sqrt(d1X * d1X + d1Y * d1Y) + sqrt(d2X * d2X + d2Y * d2Y));
|
|
19
|
+
}
|
|
20
|
+
return distance * 0.5;
|
|
21
|
+
},
|
|
22
|
+
getDerivative(t, fromV, v1, v2, toV) {
|
|
23
|
+
const o = 1 - t;
|
|
24
|
+
return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
|
|
25
|
+
},
|
|
26
|
+
cut(data, t, fromX, fromY, x1, y1, x2, y2, toX, toY) {
|
|
27
|
+
const o = 1 - t;
|
|
28
|
+
const ax = o * fromX + t * x1, ay = o * fromY + t * y1;
|
|
29
|
+
const mbx = o * x1 + t * x2, mby = o * y1 + t * y2;
|
|
30
|
+
const mcx = o * x2 + t * toX, mcy = o * y2 + t * toY;
|
|
31
|
+
const bx = o * ax + t * mbx, by = o * ay + t * mby;
|
|
32
|
+
const mbcx = o * mbx + t * mcx, mbcy = o * mby + t * mcy;
|
|
33
|
+
const cx = o * bx + t * mbcx, cy = o * by + t * mbcy;
|
|
34
|
+
data.push(draw.PathCommandMap.C, ax, ay, bx, by, cx, cy);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
const { getDerivative } = HighBezierHelper;
|
|
38
|
+
|
|
39
|
+
const { M, L, C, Z } = draw.PathCommandMap;
|
|
40
|
+
const tempPoint = {}, tempFrom = {};
|
|
41
|
+
const HighCurveHelper = {
|
|
42
|
+
transform(data, matrix) {
|
|
43
|
+
let i = 0, command;
|
|
44
|
+
const len = data.length;
|
|
45
|
+
while (i < len) {
|
|
46
|
+
command = data[i];
|
|
47
|
+
switch (command) {
|
|
48
|
+
case M:
|
|
49
|
+
case L:
|
|
50
|
+
HighCurveHelper.transformPoints(data, matrix, i, 1);
|
|
51
|
+
i += 3;
|
|
52
|
+
break;
|
|
53
|
+
case C:
|
|
54
|
+
HighCurveHelper.transformPoints(data, matrix, i, 3);
|
|
55
|
+
i += 7;
|
|
56
|
+
break;
|
|
57
|
+
case Z:
|
|
58
|
+
i += 1;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
transformPoints(data, matrix, start, pointCount) {
|
|
63
|
+
for (let i = start + 1, end = i + pointCount * 2; i < end; i += 2) {
|
|
64
|
+
tempPoint.x = data[i];
|
|
65
|
+
tempPoint.y = data[i + 1];
|
|
66
|
+
draw.MatrixHelper.toOuterPoint(matrix, tempPoint);
|
|
67
|
+
data[i] = tempPoint.x;
|
|
68
|
+
data[i + 1] = tempPoint.y;
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
getMotionPathData(data) {
|
|
72
|
+
let total = 0, distance, segments = [];
|
|
73
|
+
let i = 0, x = 0, y = 0, toX, toY, command;
|
|
74
|
+
const len = data.length;
|
|
75
|
+
while (i < len) {
|
|
76
|
+
command = data[i];
|
|
77
|
+
switch (command) {
|
|
78
|
+
case M:
|
|
79
|
+
case L:
|
|
80
|
+
toX = data[i + 1];
|
|
81
|
+
toY = data[i + 2];
|
|
82
|
+
distance = (command === L && i > 0) ? draw.PointHelper.getDistanceFrom(x, y, toX, toY) : 0;
|
|
83
|
+
x = toX;
|
|
84
|
+
y = toY;
|
|
85
|
+
i += 3;
|
|
86
|
+
break;
|
|
87
|
+
case C:
|
|
88
|
+
toX = data[i + 5];
|
|
89
|
+
toY = data[i + 6];
|
|
90
|
+
distance = HighBezierHelper.getDistance(x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], toX, toY);
|
|
91
|
+
x = toX;
|
|
92
|
+
y = toY;
|
|
93
|
+
i += 7;
|
|
94
|
+
break;
|
|
95
|
+
case Z:
|
|
96
|
+
i += 1;
|
|
97
|
+
default:
|
|
98
|
+
distance = 0;
|
|
99
|
+
}
|
|
100
|
+
segments.push(distance);
|
|
101
|
+
total += distance;
|
|
102
|
+
}
|
|
103
|
+
return { total, segments, data };
|
|
104
|
+
},
|
|
105
|
+
getDistancePoint(distanceData, motionDistance) {
|
|
106
|
+
const { segments, data } = distanceData;
|
|
107
|
+
motionDistance = draw.UnitConvert.number(motionDistance, distanceData.total);
|
|
108
|
+
let total = 0, distance, to = {};
|
|
109
|
+
let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
|
|
110
|
+
const len = data.length;
|
|
111
|
+
while (i < len) {
|
|
112
|
+
command = data[i];
|
|
113
|
+
switch (command) {
|
|
114
|
+
case M:
|
|
115
|
+
case L:
|
|
116
|
+
toX = data[i + 1];
|
|
117
|
+
toY = data[i + 2];
|
|
118
|
+
distance = segments[index];
|
|
119
|
+
if (total + distance > motionDistance || !distanceData.total) {
|
|
120
|
+
if (!i)
|
|
121
|
+
x = toX, y = toY;
|
|
122
|
+
tempFrom.x = x;
|
|
123
|
+
tempFrom.y = y;
|
|
124
|
+
to.x = toX;
|
|
125
|
+
to.y = toY;
|
|
126
|
+
draw.PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
|
|
127
|
+
to.rotation = draw.PointHelper.getAngle(tempFrom, to);
|
|
128
|
+
return to;
|
|
129
|
+
}
|
|
130
|
+
x = toX;
|
|
131
|
+
y = toY;
|
|
132
|
+
i += 3;
|
|
133
|
+
break;
|
|
134
|
+
case C:
|
|
135
|
+
toX = data[i + 5];
|
|
136
|
+
toY = data[i + 6];
|
|
137
|
+
distance = segments[index];
|
|
138
|
+
if (total + distance > motionDistance) {
|
|
139
|
+
const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
|
|
140
|
+
motionDistance -= total;
|
|
141
|
+
draw.BezierHelper.getPointAndSet(motionDistance / distance, x, y, x1, y1, x2, y2, toX, toY, to);
|
|
142
|
+
draw.BezierHelper.getPointAndSet(Math.max(0, motionDistance - 0.1) / distance, x, y, x1, y1, x2, y2, toX, toY, tempFrom);
|
|
143
|
+
to.rotation = draw.PointHelper.getAngle(tempFrom, to);
|
|
144
|
+
return to;
|
|
145
|
+
}
|
|
146
|
+
x = toX;
|
|
147
|
+
y = toY;
|
|
148
|
+
i += 7;
|
|
149
|
+
break;
|
|
150
|
+
case Z:
|
|
151
|
+
i += 1;
|
|
152
|
+
default:
|
|
153
|
+
distance = 0;
|
|
154
|
+
}
|
|
155
|
+
index++;
|
|
156
|
+
total += distance;
|
|
157
|
+
}
|
|
158
|
+
return to;
|
|
159
|
+
},
|
|
160
|
+
getDistancePath(distanceData, motionDistance) {
|
|
161
|
+
const { segments, data } = distanceData, path = [];
|
|
162
|
+
motionDistance = draw.UnitConvert.number(motionDistance, distanceData.total);
|
|
163
|
+
let total = 0, distance, to = {};
|
|
164
|
+
let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
|
|
165
|
+
const len = data.length;
|
|
166
|
+
while (i < len) {
|
|
167
|
+
command = data[i];
|
|
168
|
+
switch (command) {
|
|
169
|
+
case M:
|
|
170
|
+
case L:
|
|
171
|
+
toX = data[i + 1];
|
|
172
|
+
toY = data[i + 2];
|
|
173
|
+
distance = segments[index];
|
|
174
|
+
if (total + distance > motionDistance || !distanceData.total) {
|
|
175
|
+
if (!i)
|
|
176
|
+
x = toX, y = toY;
|
|
177
|
+
tempFrom.x = x;
|
|
178
|
+
tempFrom.y = y;
|
|
179
|
+
to.x = toX;
|
|
180
|
+
to.y = toY;
|
|
181
|
+
draw.PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
|
|
182
|
+
path.push(command, to.x, to.y);
|
|
183
|
+
return path;
|
|
184
|
+
}
|
|
185
|
+
x = toX;
|
|
186
|
+
y = toY;
|
|
187
|
+
i += 3;
|
|
188
|
+
path.push(command, x, y);
|
|
189
|
+
break;
|
|
190
|
+
case C:
|
|
191
|
+
const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
|
|
192
|
+
toX = data[i + 5];
|
|
193
|
+
toY = data[i + 6];
|
|
194
|
+
distance = segments[index];
|
|
195
|
+
if (total + distance > motionDistance) {
|
|
196
|
+
HighBezierHelper.cut(path, (motionDistance - total) / distance, x, y, x1, y1, x2, y2, toX, toY);
|
|
197
|
+
return path;
|
|
198
|
+
}
|
|
199
|
+
x = toX;
|
|
200
|
+
y = toY;
|
|
201
|
+
i += 7;
|
|
202
|
+
path.push(command, x1, y1, x2, y2, toX, toY);
|
|
203
|
+
break;
|
|
204
|
+
case Z:
|
|
205
|
+
i += 1;
|
|
206
|
+
path.push(command);
|
|
207
|
+
default:
|
|
208
|
+
distance = 0;
|
|
209
|
+
}
|
|
210
|
+
index++;
|
|
211
|
+
total += distance;
|
|
212
|
+
}
|
|
213
|
+
return path;
|
|
214
|
+
}
|
|
215
|
+
};
|
|
216
|
+
|
|
217
|
+
function motionPathType(defaultValue) {
|
|
218
|
+
return draw.decorateLeafAttr(defaultValue, (key) => draw.attr({
|
|
219
|
+
set(value) {
|
|
220
|
+
this.__setAttr(key, value);
|
|
221
|
+
this.__hasMotionPath = this.motionPath || !draw.isNull(this.motion);
|
|
222
|
+
this.__layout.matrixChanged || this.__layout.matrixChange();
|
|
223
|
+
}
|
|
224
|
+
}));
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
draw.Transition.register('motion', function (from, to, t, target) {
|
|
228
|
+
if (!from)
|
|
229
|
+
from = 0;
|
|
230
|
+
else if (typeof from === 'object')
|
|
231
|
+
from = draw.UnitConvert.number(from, target.getMotionTotal());
|
|
232
|
+
if (!to)
|
|
233
|
+
to = 0;
|
|
234
|
+
else if (typeof to === 'object')
|
|
235
|
+
to = draw.UnitConvert.number(to, target.getMotionTotal());
|
|
236
|
+
return draw.Transition.number(from, to, t);
|
|
237
|
+
});
|
|
238
|
+
const ui = draw.UI.prototype;
|
|
239
|
+
motionPathType()(ui, 'motionPath');
|
|
240
|
+
motionPathType()(ui, 'motion');
|
|
241
|
+
motionPathType(true)(ui, 'motionRotation');
|
|
242
|
+
ui.getMotionPathData = function () {
|
|
243
|
+
const { parent } = this;
|
|
244
|
+
if (!this.motionPath && parent) {
|
|
245
|
+
const { children } = parent;
|
|
246
|
+
for (let i = 0; i < children.length; i++) {
|
|
247
|
+
if (children[i].motionPath)
|
|
248
|
+
return children[i].getMotionPathData();
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
const data = this.__;
|
|
252
|
+
if (data.__pathForMotion)
|
|
253
|
+
return data.__pathForMotion;
|
|
254
|
+
return data.__pathForMotion = HighCurveHelper.getMotionPathData(this.getPath(true, true));
|
|
255
|
+
};
|
|
256
|
+
ui.getMotionPoint = function (motionDistance) {
|
|
257
|
+
const data = this.getMotionPathData();
|
|
258
|
+
const point = HighCurveHelper.getDistancePoint(data, motionDistance);
|
|
259
|
+
draw.MatrixHelper.toOuterPoint(this.localTransform, point);
|
|
260
|
+
return point;
|
|
261
|
+
};
|
|
262
|
+
ui.getMotionTotal = function () {
|
|
263
|
+
return this.getMotionPathData().total;
|
|
264
|
+
};
|
|
265
|
+
ui.__updateMotionPath = function () {
|
|
266
|
+
const data = this.__;
|
|
267
|
+
if (this.__layout.resized && data.__pathForMotion)
|
|
268
|
+
data.__pathForMotion = undefined;
|
|
269
|
+
if (this.motionPath) {
|
|
270
|
+
let child;
|
|
271
|
+
const { children } = this.parent;
|
|
272
|
+
for (let i = 0; i < children.length; i++) {
|
|
273
|
+
child = children[i];
|
|
274
|
+
if (!draw.isNull(child.motion))
|
|
275
|
+
updateMotion(child);
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
else {
|
|
279
|
+
updateMotion(this);
|
|
280
|
+
}
|
|
281
|
+
};
|
|
282
|
+
function updateMotion(leaf) {
|
|
283
|
+
const { motion, motionRotation } = leaf;
|
|
284
|
+
if (draw.isNull(motion))
|
|
285
|
+
return;
|
|
286
|
+
if (leaf.motionPath) {
|
|
287
|
+
const data = leaf.getMotionPathData();
|
|
288
|
+
if (data.total)
|
|
289
|
+
leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion);
|
|
290
|
+
}
|
|
291
|
+
else {
|
|
292
|
+
let child;
|
|
293
|
+
const { children } = leaf.parent;
|
|
294
|
+
for (let i = 0; i < children.length; i++) {
|
|
295
|
+
child = children[i];
|
|
296
|
+
if (child.motionPath) {
|
|
297
|
+
const data = child.getMotionPathData();
|
|
298
|
+
if (!data.total)
|
|
299
|
+
return;
|
|
300
|
+
const point = child.getMotionPoint(motion);
|
|
301
|
+
if (motionRotation === false)
|
|
302
|
+
delete point.rotation;
|
|
303
|
+
else {
|
|
304
|
+
point.rotation += child.rotation;
|
|
305
|
+
if (typeof motionRotation === 'number')
|
|
306
|
+
point.rotation += motionRotation;
|
|
307
|
+
}
|
|
308
|
+
leaf.set(point);
|
|
309
|
+
break;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
exports.HighBezierHelper = HighBezierHelper;
|
|
316
|
+
exports.HighCurveHelper = HighCurveHelper;
|
|
317
|
+
exports.motionPathType = motionPathType;
|
|
@@ -0,0 +1,313 @@
|
|
|
1
|
+
import { PathCommandMap, MatrixHelper, PointHelper, UnitConvert, BezierHelper, decorateLeafAttr, attr, isNull, Transition, UI } from '@leafer-ui/draw';
|
|
2
|
+
|
|
3
|
+
const gaussNodes = [0.1488743389, 0.4333953941, 0.6794095682, 0.8650633666, 0.9739065285];
|
|
4
|
+
const gaussWeights = [0.2955242247, 0.2692667193, 0.2190863625, 0.1494513491, 0.0666713443];
|
|
5
|
+
const { sqrt } = Math;
|
|
6
|
+
const HighBezierHelper = {
|
|
7
|
+
getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY) {
|
|
8
|
+
let distance = 0, t1, t2, d1X, d1Y, d2X, d2Y;
|
|
9
|
+
for (let i = 0; i < gaussNodes.length; i++) {
|
|
10
|
+
t1 = 0.5 * (1 + gaussNodes[i]);
|
|
11
|
+
t2 = 0.5 * (1 - gaussNodes[i]);
|
|
12
|
+
d1X = getDerivative(t1, fromX, x1, x2, toX);
|
|
13
|
+
d1Y = getDerivative(t1, fromY, y1, y2, toY);
|
|
14
|
+
d2X = getDerivative(t2, fromX, x1, x2, toX);
|
|
15
|
+
d2Y = getDerivative(t2, fromY, y1, y2, toY);
|
|
16
|
+
distance += gaussWeights[i] * (sqrt(d1X * d1X + d1Y * d1Y) + sqrt(d2X * d2X + d2Y * d2Y));
|
|
17
|
+
}
|
|
18
|
+
return distance * 0.5;
|
|
19
|
+
},
|
|
20
|
+
getDerivative(t, fromV, v1, v2, toV) {
|
|
21
|
+
const o = 1 - t;
|
|
22
|
+
return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
|
|
23
|
+
},
|
|
24
|
+
cut(data, t, fromX, fromY, x1, y1, x2, y2, toX, toY) {
|
|
25
|
+
const o = 1 - t;
|
|
26
|
+
const ax = o * fromX + t * x1, ay = o * fromY + t * y1;
|
|
27
|
+
const mbx = o * x1 + t * x2, mby = o * y1 + t * y2;
|
|
28
|
+
const mcx = o * x2 + t * toX, mcy = o * y2 + t * toY;
|
|
29
|
+
const bx = o * ax + t * mbx, by = o * ay + t * mby;
|
|
30
|
+
const mbcx = o * mbx + t * mcx, mbcy = o * mby + t * mcy;
|
|
31
|
+
const cx = o * bx + t * mbcx, cy = o * by + t * mbcy;
|
|
32
|
+
data.push(PathCommandMap.C, ax, ay, bx, by, cx, cy);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
const { getDerivative } = HighBezierHelper;
|
|
36
|
+
|
|
37
|
+
const { M, L, C, Z } = PathCommandMap;
|
|
38
|
+
const tempPoint = {}, tempFrom = {};
|
|
39
|
+
const HighCurveHelper = {
|
|
40
|
+
transform(data, matrix) {
|
|
41
|
+
let i = 0, command;
|
|
42
|
+
const len = data.length;
|
|
43
|
+
while (i < len) {
|
|
44
|
+
command = data[i];
|
|
45
|
+
switch (command) {
|
|
46
|
+
case M:
|
|
47
|
+
case L:
|
|
48
|
+
HighCurveHelper.transformPoints(data, matrix, i, 1);
|
|
49
|
+
i += 3;
|
|
50
|
+
break;
|
|
51
|
+
case C:
|
|
52
|
+
HighCurveHelper.transformPoints(data, matrix, i, 3);
|
|
53
|
+
i += 7;
|
|
54
|
+
break;
|
|
55
|
+
case Z:
|
|
56
|
+
i += 1;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
transformPoints(data, matrix, start, pointCount) {
|
|
61
|
+
for (let i = start + 1, end = i + pointCount * 2; i < end; i += 2) {
|
|
62
|
+
tempPoint.x = data[i];
|
|
63
|
+
tempPoint.y = data[i + 1];
|
|
64
|
+
MatrixHelper.toOuterPoint(matrix, tempPoint);
|
|
65
|
+
data[i] = tempPoint.x;
|
|
66
|
+
data[i + 1] = tempPoint.y;
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
getMotionPathData(data) {
|
|
70
|
+
let total = 0, distance, segments = [];
|
|
71
|
+
let i = 0, x = 0, y = 0, toX, toY, command;
|
|
72
|
+
const len = data.length;
|
|
73
|
+
while (i < len) {
|
|
74
|
+
command = data[i];
|
|
75
|
+
switch (command) {
|
|
76
|
+
case M:
|
|
77
|
+
case L:
|
|
78
|
+
toX = data[i + 1];
|
|
79
|
+
toY = data[i + 2];
|
|
80
|
+
distance = (command === L && i > 0) ? PointHelper.getDistanceFrom(x, y, toX, toY) : 0;
|
|
81
|
+
x = toX;
|
|
82
|
+
y = toY;
|
|
83
|
+
i += 3;
|
|
84
|
+
break;
|
|
85
|
+
case C:
|
|
86
|
+
toX = data[i + 5];
|
|
87
|
+
toY = data[i + 6];
|
|
88
|
+
distance = HighBezierHelper.getDistance(x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], toX, toY);
|
|
89
|
+
x = toX;
|
|
90
|
+
y = toY;
|
|
91
|
+
i += 7;
|
|
92
|
+
break;
|
|
93
|
+
case Z:
|
|
94
|
+
i += 1;
|
|
95
|
+
default:
|
|
96
|
+
distance = 0;
|
|
97
|
+
}
|
|
98
|
+
segments.push(distance);
|
|
99
|
+
total += distance;
|
|
100
|
+
}
|
|
101
|
+
return { total, segments, data };
|
|
102
|
+
},
|
|
103
|
+
getDistancePoint(distanceData, motionDistance) {
|
|
104
|
+
const { segments, data } = distanceData;
|
|
105
|
+
motionDistance = UnitConvert.number(motionDistance, distanceData.total);
|
|
106
|
+
let total = 0, distance, to = {};
|
|
107
|
+
let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
|
|
108
|
+
const len = data.length;
|
|
109
|
+
while (i < len) {
|
|
110
|
+
command = data[i];
|
|
111
|
+
switch (command) {
|
|
112
|
+
case M:
|
|
113
|
+
case L:
|
|
114
|
+
toX = data[i + 1];
|
|
115
|
+
toY = data[i + 2];
|
|
116
|
+
distance = segments[index];
|
|
117
|
+
if (total + distance > motionDistance || !distanceData.total) {
|
|
118
|
+
if (!i)
|
|
119
|
+
x = toX, y = toY;
|
|
120
|
+
tempFrom.x = x;
|
|
121
|
+
tempFrom.y = y;
|
|
122
|
+
to.x = toX;
|
|
123
|
+
to.y = toY;
|
|
124
|
+
PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
|
|
125
|
+
to.rotation = PointHelper.getAngle(tempFrom, to);
|
|
126
|
+
return to;
|
|
127
|
+
}
|
|
128
|
+
x = toX;
|
|
129
|
+
y = toY;
|
|
130
|
+
i += 3;
|
|
131
|
+
break;
|
|
132
|
+
case C:
|
|
133
|
+
toX = data[i + 5];
|
|
134
|
+
toY = data[i + 6];
|
|
135
|
+
distance = segments[index];
|
|
136
|
+
if (total + distance > motionDistance) {
|
|
137
|
+
const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
|
|
138
|
+
motionDistance -= total;
|
|
139
|
+
BezierHelper.getPointAndSet(motionDistance / distance, x, y, x1, y1, x2, y2, toX, toY, to);
|
|
140
|
+
BezierHelper.getPointAndSet(Math.max(0, motionDistance - 0.1) / distance, x, y, x1, y1, x2, y2, toX, toY, tempFrom);
|
|
141
|
+
to.rotation = PointHelper.getAngle(tempFrom, to);
|
|
142
|
+
return to;
|
|
143
|
+
}
|
|
144
|
+
x = toX;
|
|
145
|
+
y = toY;
|
|
146
|
+
i += 7;
|
|
147
|
+
break;
|
|
148
|
+
case Z:
|
|
149
|
+
i += 1;
|
|
150
|
+
default:
|
|
151
|
+
distance = 0;
|
|
152
|
+
}
|
|
153
|
+
index++;
|
|
154
|
+
total += distance;
|
|
155
|
+
}
|
|
156
|
+
return to;
|
|
157
|
+
},
|
|
158
|
+
getDistancePath(distanceData, motionDistance) {
|
|
159
|
+
const { segments, data } = distanceData, path = [];
|
|
160
|
+
motionDistance = UnitConvert.number(motionDistance, distanceData.total);
|
|
161
|
+
let total = 0, distance, to = {};
|
|
162
|
+
let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
|
|
163
|
+
const len = data.length;
|
|
164
|
+
while (i < len) {
|
|
165
|
+
command = data[i];
|
|
166
|
+
switch (command) {
|
|
167
|
+
case M:
|
|
168
|
+
case L:
|
|
169
|
+
toX = data[i + 1];
|
|
170
|
+
toY = data[i + 2];
|
|
171
|
+
distance = segments[index];
|
|
172
|
+
if (total + distance > motionDistance || !distanceData.total) {
|
|
173
|
+
if (!i)
|
|
174
|
+
x = toX, y = toY;
|
|
175
|
+
tempFrom.x = x;
|
|
176
|
+
tempFrom.y = y;
|
|
177
|
+
to.x = toX;
|
|
178
|
+
to.y = toY;
|
|
179
|
+
PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
|
|
180
|
+
path.push(command, to.x, to.y);
|
|
181
|
+
return path;
|
|
182
|
+
}
|
|
183
|
+
x = toX;
|
|
184
|
+
y = toY;
|
|
185
|
+
i += 3;
|
|
186
|
+
path.push(command, x, y);
|
|
187
|
+
break;
|
|
188
|
+
case C:
|
|
189
|
+
const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
|
|
190
|
+
toX = data[i + 5];
|
|
191
|
+
toY = data[i + 6];
|
|
192
|
+
distance = segments[index];
|
|
193
|
+
if (total + distance > motionDistance) {
|
|
194
|
+
HighBezierHelper.cut(path, (motionDistance - total) / distance, x, y, x1, y1, x2, y2, toX, toY);
|
|
195
|
+
return path;
|
|
196
|
+
}
|
|
197
|
+
x = toX;
|
|
198
|
+
y = toY;
|
|
199
|
+
i += 7;
|
|
200
|
+
path.push(command, x1, y1, x2, y2, toX, toY);
|
|
201
|
+
break;
|
|
202
|
+
case Z:
|
|
203
|
+
i += 1;
|
|
204
|
+
path.push(command);
|
|
205
|
+
default:
|
|
206
|
+
distance = 0;
|
|
207
|
+
}
|
|
208
|
+
index++;
|
|
209
|
+
total += distance;
|
|
210
|
+
}
|
|
211
|
+
return path;
|
|
212
|
+
}
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
function motionPathType(defaultValue) {
|
|
216
|
+
return decorateLeafAttr(defaultValue, (key) => attr({
|
|
217
|
+
set(value) {
|
|
218
|
+
this.__setAttr(key, value);
|
|
219
|
+
this.__hasMotionPath = this.motionPath || !isNull(this.motion);
|
|
220
|
+
this.__layout.matrixChanged || this.__layout.matrixChange();
|
|
221
|
+
}
|
|
222
|
+
}));
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
Transition.register('motion', function (from, to, t, target) {
|
|
226
|
+
if (!from)
|
|
227
|
+
from = 0;
|
|
228
|
+
else if (typeof from === 'object')
|
|
229
|
+
from = UnitConvert.number(from, target.getMotionTotal());
|
|
230
|
+
if (!to)
|
|
231
|
+
to = 0;
|
|
232
|
+
else if (typeof to === 'object')
|
|
233
|
+
to = UnitConvert.number(to, target.getMotionTotal());
|
|
234
|
+
return Transition.number(from, to, t);
|
|
235
|
+
});
|
|
236
|
+
const ui = UI.prototype;
|
|
237
|
+
motionPathType()(ui, 'motionPath');
|
|
238
|
+
motionPathType()(ui, 'motion');
|
|
239
|
+
motionPathType(true)(ui, 'motionRotation');
|
|
240
|
+
ui.getMotionPathData = function () {
|
|
241
|
+
const { parent } = this;
|
|
242
|
+
if (!this.motionPath && parent) {
|
|
243
|
+
const { children } = parent;
|
|
244
|
+
for (let i = 0; i < children.length; i++) {
|
|
245
|
+
if (children[i].motionPath)
|
|
246
|
+
return children[i].getMotionPathData();
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
const data = this.__;
|
|
250
|
+
if (data.__pathForMotion)
|
|
251
|
+
return data.__pathForMotion;
|
|
252
|
+
return data.__pathForMotion = HighCurveHelper.getMotionPathData(this.getPath(true, true));
|
|
253
|
+
};
|
|
254
|
+
ui.getMotionPoint = function (motionDistance) {
|
|
255
|
+
const data = this.getMotionPathData();
|
|
256
|
+
const point = HighCurveHelper.getDistancePoint(data, motionDistance);
|
|
257
|
+
MatrixHelper.toOuterPoint(this.localTransform, point);
|
|
258
|
+
return point;
|
|
259
|
+
};
|
|
260
|
+
ui.getMotionTotal = function () {
|
|
261
|
+
return this.getMotionPathData().total;
|
|
262
|
+
};
|
|
263
|
+
ui.__updateMotionPath = function () {
|
|
264
|
+
const data = this.__;
|
|
265
|
+
if (this.__layout.resized && data.__pathForMotion)
|
|
266
|
+
data.__pathForMotion = undefined;
|
|
267
|
+
if (this.motionPath) {
|
|
268
|
+
let child;
|
|
269
|
+
const { children } = this.parent;
|
|
270
|
+
for (let i = 0; i < children.length; i++) {
|
|
271
|
+
child = children[i];
|
|
272
|
+
if (!isNull(child.motion))
|
|
273
|
+
updateMotion(child);
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
else {
|
|
277
|
+
updateMotion(this);
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
function updateMotion(leaf) {
|
|
281
|
+
const { motion, motionRotation } = leaf;
|
|
282
|
+
if (isNull(motion))
|
|
283
|
+
return;
|
|
284
|
+
if (leaf.motionPath) {
|
|
285
|
+
const data = leaf.getMotionPathData();
|
|
286
|
+
if (data.total)
|
|
287
|
+
leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion);
|
|
288
|
+
}
|
|
289
|
+
else {
|
|
290
|
+
let child;
|
|
291
|
+
const { children } = leaf.parent;
|
|
292
|
+
for (let i = 0; i < children.length; i++) {
|
|
293
|
+
child = children[i];
|
|
294
|
+
if (child.motionPath) {
|
|
295
|
+
const data = child.getMotionPathData();
|
|
296
|
+
if (!data.total)
|
|
297
|
+
return;
|
|
298
|
+
const point = child.getMotionPoint(motion);
|
|
299
|
+
if (motionRotation === false)
|
|
300
|
+
delete point.rotation;
|
|
301
|
+
else {
|
|
302
|
+
point.rotation += child.rotation;
|
|
303
|
+
if (typeof motionRotation === 'number')
|
|
304
|
+
point.rotation += motionRotation;
|
|
305
|
+
}
|
|
306
|
+
leaf.set(point);
|
|
307
|
+
break;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
export { HighBezierHelper, HighCurveHelper, motionPathType };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{PathCommandMap as t,MatrixHelper as o,PointHelper as e,UnitConvert as n,BezierHelper as a,decorateLeafAttr as i,attr as r,isNull as s,Transition as h,UI as c}from"@leafer-ui/draw";const l=[.1488743389,.4333953941,.6794095682,.8650633666,.9739065285],u=[.2955242247,.2692667193,.2190863625,.1494513491,.0666713443],{sqrt:g}=Math,f={getDistance(t,o,e,n,a,i,r,s){let h,c,f,P,_,p,M=0;for(let D=0;D<l.length;D++)h=.5*(1+l[D]),c=.5*(1-l[D]),f=m(h,t,e,a,r),P=m(h,o,n,i,s),_=m(c,t,e,a,r),p=m(c,o,n,i,s),M+=u[D]*(g(f*f+P*P)+g(_*_+p*p));return.5*M},getDerivative(t,o,e,n,a){const i=1-t;return 3*i*i*(e-o)+6*i*t*(n-e)+3*t*t*(a-n)},cut(o,e,n,a,i,r,s,h,c,l){const u=1-e,g=u*n+e*i,f=u*a+e*r,m=u*i+e*s,P=u*r+e*h,_=u*g+e*m,p=u*f+e*P,M=u*_+e*(u*m+e*(u*s+e*c)),D=u*p+e*(u*P+e*(u*h+e*l));o.push(t.C,g,f,_,p,M,D)}},{getDerivative:m}=f,{M:P,L:_,C:p,Z:M}=t,D={},d={},b={transform(t,o){let e,n=0;const a=t.length;for(;n<a;)switch(e=t[n],e){case P:case _:b.transformPoints(t,o,n,1),n+=3;break;case p:b.transformPoints(t,o,n,3),n+=7;break;case M:n+=1}},transformPoints(t,e,n,a){for(let i=n+1,r=i+2*a;i<r;i+=2)D.x=t[i],D.y=t[i+1],o.toOuterPoint(e,D),t[i]=D.x,t[i+1]=D.y},getMotionPathData(t){let o,n,a,i,r=0,s=[],h=0,c=0,l=0;const u=t.length;for(;h<u;){switch(i=t[h],i){case P:case _:n=t[h+1],a=t[h+2],o=i===_&&h>0?e.getDistanceFrom(c,l,n,a):0,c=n,l=a,h+=3;break;case p:n=t[h+5],a=t[h+6],o=f.getDistance(c,l,t[h+1],t[h+2],t[h+3],t[h+4],n,a),c=n,l=a,h+=7;break;case M:h+=1;default:o=0}s.push(o),r+=o}return{total:r,segments:s,data:t}},getDistancePoint(t,o){const{segments:i,data:r}=t;o=n.number(o,t.total);let s,h,c,l,u=0,g={},f=0,m=0,D=0,b=0;const y=r.length;for(;f<y;){switch(l=r[f],l){case P:case _:if(h=r[f+1],c=r[f+2],s=i[m],u+s>o||!t.total)return f||(D=h,b=c),d.x=D,d.y=b,g.x=h,g.y=c,e.getDistancePoint(d,g,o-u,!0),g.rotation=e.getAngle(d,g),g;D=h,b=c,f+=3;break;case p:if(h=r[f+5],c=r[f+6],s=i[m],u+s>o){const t=r[f+1],n=r[f+2],i=r[f+3],l=r[f+4];return o-=u,a.getPointAndSet(o/s,D,b,t,n,i,l,h,c,g),a.getPointAndSet(Math.max(0,o-.1)/s,D,b,t,n,i,l,h,c,d),g.rotation=e.getAngle(d,g),g}D=h,b=c,f+=7;break;case M:f+=1;default:s=0}m++,u+=s}return g},getDistancePath(t,o){const{segments:a,data:i}=t,r=[];o=n.number(o,t.total);let s,h,c,l,u=0,g={},m=0,D=0,b=0,y=0;const x=i.length;for(;m<x;){switch(l=i[m],l){case P:case _:if(h=i[m+1],c=i[m+2],s=a[D],u+s>o||!t.total)return m||(b=h,y=c),d.x=b,d.y=y,g.x=h,g.y=c,e.getDistancePoint(d,g,o-u,!0),r.push(l,g.x,g.y),r;b=h,y=c,m+=3,r.push(l,b,y);break;case p:const n=i[m+1],x=i[m+2],k=i[m+3],F=i[m+4];if(h=i[m+5],c=i[m+6],s=a[D],u+s>o)return f.cut(r,(o-u)/s,b,y,n,x,k,F,h,c),r;b=h,y=c,m+=7,r.push(l,n,x,k,F,h,c);break;case M:m+=1,r.push(l);default:s=0}D++,u+=s}return r}};function y(t){return i(t,(t=>r({set(o){this.__setAttr(t,o),this.__hasMotionPath=this.motionPath||!s(this.motion),this.__layout.matrixChanged||this.__layout.matrixChange()}})))}h.register("motion",(function(t,o,e,a){return t?"object"==typeof t&&(t=n.number(t,a.getMotionTotal())):t=0,o?"object"==typeof o&&(o=n.number(o,a.getMotionTotal())):o=0,h.number(t,o,e)}));const x=c.prototype;function k(t){const{motion:o,motionRotation:e}=t;if(!s(o))if(t.motionPath){const e=t.getMotionPathData();e.total&&(t.__.__pathForRender=b.getDistancePath(e,o))}else{let n;const{children:a}=t.parent;for(let i=0;i<a.length;i++)if(n=a[i],n.motionPath){if(!n.getMotionPathData().total)return;const a=n.getMotionPoint(o);!1===e?delete a.rotation:(a.rotation+=n.rotation,"number"==typeof e&&(a.rotation+=e)),t.set(a);break}}}y()(x,"motionPath"),y()(x,"motion"),y(!0)(x,"motionRotation"),x.getMotionPathData=function(){const{parent:t}=this;if(!this.motionPath&&t){const{children:o}=t;for(let t=0;t<o.length;t++)if(o[t].motionPath)return o[t].getMotionPathData()}const o=this.__;return o.__pathForMotion?o.__pathForMotion:o.__pathForMotion=b.getMotionPathData(this.getPath(!0,!0))},x.getMotionPoint=function(t){const e=this.getMotionPathData(),n=b.getDistancePoint(e,t);return o.toOuterPoint(this.localTransform,n),n},x.getMotionTotal=function(){return this.getMotionPathData().total},x.__updateMotionPath=function(){const t=this.__;if(this.__layout.resized&&t.__pathForMotion&&(t.__pathForMotion=void 0),this.motionPath){let t;const{children:o}=this.parent;for(let e=0;e<o.length;e++)t=o[e],s(t.motion)||k(t)}else k(this)};export{f as HighBezierHelper,b as HighCurveHelper,y as motionPathType};
|