@leafer-in/motion-path 1.8.0 → 1.9.1
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/dist/motion-path.cjs +198 -186
- package/dist/motion-path.esm.js +195 -185
- package/dist/motion-path.esm.min.js +1 -1
- package/dist/motion-path.esm.min.js.map +1 -1
- package/dist/motion-path.js +174 -193
- package/dist/motion-path.min.cjs +1 -1
- package/dist/motion-path.min.cjs.map +1 -1
- package/dist/motion-path.min.js +1 -1
- package/dist/motion-path.min.js.map +1 -1
- package/package.json +4 -4
- package/src/index.ts +7 -9
package/dist/motion-path.cjs
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
|
-
var draw = require(
|
|
3
|
+
var draw = require("@leafer-ui/draw");
|
|
4
|
+
|
|
5
|
+
const gaussNodes = [ .1488743389, .4333953941, .6794095682, .8650633666, .9739065285 ];
|
|
6
|
+
|
|
7
|
+
const gaussWeights = [ .2955242247, .2692667193, .2190863625, .1494513491, .0666713443 ];
|
|
8
|
+
|
|
9
|
+
const {sqrt: sqrt} = Math;
|
|
10
|
+
|
|
11
|
+
const {getDerivative: getDerivative} = draw.BezierHelper;
|
|
4
12
|
|
|
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 { getDerivative } = draw.BezierHelper;
|
|
9
13
|
const HighBezierHelper = {
|
|
10
14
|
getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY, t = 1) {
|
|
11
15
|
let distance = 0, t1, t2, d1X, d1Y, d2X, d2Y, half = t / 2;
|
|
@@ -27,10 +31,8 @@ const HighBezierHelper = {
|
|
|
27
31
|
},
|
|
28
32
|
getT(distance, totalDistance, fromX, fromY, x1, y1, x2, y2, toX, toY, precision = 1) {
|
|
29
33
|
let low = 0, high = 1, middle = distance / totalDistance, realPrecision = precision / totalDistance / 3;
|
|
30
|
-
if (middle >= 1)
|
|
31
|
-
|
|
32
|
-
if (middle <= 0)
|
|
33
|
-
return 0;
|
|
34
|
+
if (middle >= 1) return 1;
|
|
35
|
+
if (middle <= 0) return 0;
|
|
34
36
|
while (high - low > realPrecision) {
|
|
35
37
|
getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY, middle) < distance ? low = middle : high = middle;
|
|
36
38
|
middle = (low + high) / 2;
|
|
@@ -48,10 +50,13 @@ const HighBezierHelper = {
|
|
|
48
50
|
data.push(draw.PathCommandMap.C, ax, ay, bx, by, cx, cy);
|
|
49
51
|
}
|
|
50
52
|
};
|
|
51
|
-
const { getDistance } = HighBezierHelper;
|
|
52
53
|
|
|
53
|
-
const {
|
|
54
|
+
const {getDistance: getDistance} = HighBezierHelper;
|
|
55
|
+
|
|
56
|
+
const {M: M, L: L, C: C, Z: Z} = draw.PathCommandMap;
|
|
57
|
+
|
|
54
58
|
const tempPoint = {}, tempFrom = {};
|
|
59
|
+
|
|
55
60
|
const HighCurveHelper = {
|
|
56
61
|
transform(data, matrix) {
|
|
57
62
|
let i = 0, command;
|
|
@@ -59,17 +64,19 @@ const HighCurveHelper = {
|
|
|
59
64
|
while (i < len) {
|
|
60
65
|
command = data[i];
|
|
61
66
|
switch (command) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
67
|
+
case M:
|
|
68
|
+
case L:
|
|
69
|
+
HighCurveHelper.transformPoints(data, matrix, i, 1);
|
|
70
|
+
i += 3;
|
|
71
|
+
break;
|
|
72
|
+
|
|
73
|
+
case C:
|
|
74
|
+
HighCurveHelper.transformPoints(data, matrix, i, 3);
|
|
75
|
+
i += 7;
|
|
76
|
+
break;
|
|
77
|
+
|
|
78
|
+
case Z:
|
|
79
|
+
i += 1;
|
|
73
80
|
}
|
|
74
81
|
}
|
|
75
82
|
},
|
|
@@ -89,35 +96,42 @@ const HighCurveHelper = {
|
|
|
89
96
|
while (i < len) {
|
|
90
97
|
command = data[i];
|
|
91
98
|
switch (command) {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
99
|
+
case M:
|
|
100
|
+
case L:
|
|
101
|
+
toX = data[i + 1];
|
|
102
|
+
toY = data[i + 2];
|
|
103
|
+
distance = command === L && i > 0 ? draw.PointHelper.getDistanceFrom(x, y, toX, toY) : 0;
|
|
104
|
+
x = toX;
|
|
105
|
+
y = toY;
|
|
106
|
+
i += 3;
|
|
107
|
+
break;
|
|
108
|
+
|
|
109
|
+
case C:
|
|
110
|
+
toX = data[i + 5];
|
|
111
|
+
toY = data[i + 6];
|
|
112
|
+
distance = HighBezierHelper.getDistance(x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], toX, toY);
|
|
113
|
+
x = toX;
|
|
114
|
+
y = toY;
|
|
115
|
+
i += 7;
|
|
116
|
+
break;
|
|
117
|
+
|
|
118
|
+
case Z:
|
|
119
|
+
i += 1;
|
|
120
|
+
|
|
121
|
+
default:
|
|
122
|
+
distance = 0;
|
|
113
123
|
}
|
|
114
124
|
segments.push(distance);
|
|
115
125
|
total += distance;
|
|
116
126
|
}
|
|
117
|
-
return {
|
|
127
|
+
return {
|
|
128
|
+
total: total,
|
|
129
|
+
segments: segments,
|
|
130
|
+
data: data
|
|
131
|
+
};
|
|
118
132
|
},
|
|
119
133
|
getDistancePoint(distanceData, motionDistance, motionPrecision) {
|
|
120
|
-
const { segments, data } = distanceData;
|
|
134
|
+
const {segments: segments, data: data} = distanceData;
|
|
121
135
|
motionDistance = draw.UnitConvert.number(motionDistance, distanceData.total);
|
|
122
136
|
let total = 0, distance, to = {};
|
|
123
137
|
let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
|
|
@@ -126,45 +140,47 @@ const HighCurveHelper = {
|
|
|
126
140
|
while (i < len) {
|
|
127
141
|
command = data[i];
|
|
128
142
|
switch (command) {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
143
|
+
case M:
|
|
144
|
+
case L:
|
|
145
|
+
toX = data[i + 1];
|
|
146
|
+
toY = data[i + 2];
|
|
147
|
+
distance = segments[index];
|
|
148
|
+
if (total + distance >= motionDistance || !distanceData.total) {
|
|
149
|
+
if (!i) x = toX, y = toY;
|
|
150
|
+
tempFrom.x = x;
|
|
151
|
+
tempFrom.y = y;
|
|
152
|
+
to.x = toX;
|
|
153
|
+
to.y = toY;
|
|
154
|
+
draw.PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
|
|
155
|
+
to.rotation = draw.PointHelper.getAngle(tempFrom, to);
|
|
156
|
+
return to;
|
|
157
|
+
}
|
|
158
|
+
x = toX;
|
|
159
|
+
y = toY;
|
|
160
|
+
i += 3;
|
|
161
|
+
break;
|
|
162
|
+
|
|
163
|
+
case C:
|
|
164
|
+
toX = data[i + 5];
|
|
165
|
+
toY = data[i + 6];
|
|
166
|
+
distance = segments[index];
|
|
167
|
+
if (total + distance >= motionDistance) {
|
|
168
|
+
x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
|
|
169
|
+
t = HighBezierHelper.getT(motionDistance - total, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
|
|
170
|
+
draw.BezierHelper.getPointAndSet(t, x, y, x1, y1, x2, y2, toX, toY, to);
|
|
171
|
+
to.rotation = HighBezierHelper.getRotation(t, x, y, x1, y1, x2, y2, toX, toY);
|
|
172
|
+
return to;
|
|
173
|
+
}
|
|
174
|
+
x = toX;
|
|
175
|
+
y = toY;
|
|
176
|
+
i += 7;
|
|
177
|
+
break;
|
|
178
|
+
|
|
179
|
+
case Z:
|
|
180
|
+
i += 1;
|
|
181
|
+
|
|
182
|
+
default:
|
|
183
|
+
distance = 0;
|
|
168
184
|
}
|
|
169
185
|
index++;
|
|
170
186
|
total += distance;
|
|
@@ -172,7 +188,7 @@ const HighCurveHelper = {
|
|
|
172
188
|
return to;
|
|
173
189
|
},
|
|
174
190
|
getDistancePath(distanceData, motionDistance, motionPrecision) {
|
|
175
|
-
const { segments, data } = distanceData, path = [];
|
|
191
|
+
const {segments: segments, data: data} = distanceData, path = [];
|
|
176
192
|
motionDistance = draw.UnitConvert.number(motionDistance, distanceData.total);
|
|
177
193
|
let total = 0, distance, to = {};
|
|
178
194
|
let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
|
|
@@ -181,47 +197,49 @@ const HighCurveHelper = {
|
|
|
181
197
|
while (i < len) {
|
|
182
198
|
command = data[i];
|
|
183
199
|
switch (command) {
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
200
|
+
case M:
|
|
201
|
+
case L:
|
|
202
|
+
toX = data[i + 1];
|
|
203
|
+
toY = data[i + 2];
|
|
204
|
+
distance = segments[index];
|
|
205
|
+
if (total + distance >= motionDistance || !distanceData.total) {
|
|
206
|
+
if (!i) x = toX, y = toY;
|
|
207
|
+
tempFrom.x = x;
|
|
208
|
+
tempFrom.y = y;
|
|
209
|
+
to.x = toX;
|
|
210
|
+
to.y = toY;
|
|
211
|
+
draw.PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
|
|
212
|
+
path.push(command, to.x, to.y);
|
|
213
|
+
return path;
|
|
214
|
+
}
|
|
215
|
+
x = toX;
|
|
216
|
+
y = toY;
|
|
217
|
+
i += 3;
|
|
218
|
+
path.push(command, x, y);
|
|
219
|
+
break;
|
|
220
|
+
|
|
221
|
+
case C:
|
|
222
|
+
x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
|
|
223
|
+
toX = data[i + 5];
|
|
224
|
+
toY = data[i + 6];
|
|
225
|
+
distance = segments[index];
|
|
226
|
+
if (total + distance >= motionDistance) {
|
|
227
|
+
t = HighBezierHelper.getT(motionDistance - total, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
|
|
228
|
+
HighBezierHelper.cut(path, t, x, y, x1, y1, x2, y2, toX, toY);
|
|
229
|
+
return path;
|
|
230
|
+
}
|
|
231
|
+
x = toX;
|
|
232
|
+
y = toY;
|
|
233
|
+
i += 7;
|
|
234
|
+
path.push(command, x1, y1, x2, y2, toX, toY);
|
|
235
|
+
break;
|
|
236
|
+
|
|
237
|
+
case Z:
|
|
238
|
+
i += 1;
|
|
239
|
+
path.push(command);
|
|
240
|
+
|
|
241
|
+
default:
|
|
242
|
+
distance = 0;
|
|
225
243
|
}
|
|
226
244
|
index++;
|
|
227
245
|
total += distance;
|
|
@@ -231,7 +249,7 @@ const HighCurveHelper = {
|
|
|
231
249
|
};
|
|
232
250
|
|
|
233
251
|
function motionPathType(defaultValue) {
|
|
234
|
-
return draw.decorateLeafAttr(defaultValue,
|
|
252
|
+
return draw.decorateLeafAttr(defaultValue, key => draw.attr({
|
|
235
253
|
set(value) {
|
|
236
254
|
this.__setAttr(key, value);
|
|
237
255
|
this.__hasMotionPath = this.motionPath || !draw.isNull(this.motion);
|
|
@@ -240,108 +258,102 @@ function motionPathType(defaultValue) {
|
|
|
240
258
|
}));
|
|
241
259
|
}
|
|
242
260
|
|
|
243
|
-
draw.Plugin.add(
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
if (!to)
|
|
250
|
-
to = 0;
|
|
251
|
-
else if (typeof to === 'object')
|
|
252
|
-
to = draw.UnitConvert.number(to, target.getMotionTotal());
|
|
253
|
-
return draw.Transition.number(from, to, t);
|
|
261
|
+
draw.Plugin.add("motion-path");
|
|
262
|
+
|
|
263
|
+
draw.Transition.register("motion", function(from, to, t, target) {
|
|
264
|
+
if (draw.isObject(from)) from = draw.UnitConvert.number(from, target.getMotionTotal());
|
|
265
|
+
if (draw.isObject(to)) to = draw.UnitConvert.number(to, target.getMotionTotal());
|
|
266
|
+
return draw.Transition.number(from || 0, to || 0, t);
|
|
254
267
|
});
|
|
255
|
-
|
|
268
|
+
|
|
269
|
+
draw.Transition.register("motionRotation", function(from, to, t) {
|
|
256
270
|
return draw.Transition.number(from, to, t);
|
|
257
271
|
});
|
|
272
|
+
|
|
258
273
|
const ui = draw.UI.prototype;
|
|
259
|
-
|
|
260
|
-
const {
|
|
261
|
-
|
|
262
|
-
draw.
|
|
263
|
-
|
|
264
|
-
draw.UI.addAttr(
|
|
265
|
-
|
|
274
|
+
|
|
275
|
+
const {updateMatrix: updateMatrix, updateAllMatrix: updateAllMatrix} = draw.LeafHelper;
|
|
276
|
+
|
|
277
|
+
const {updateBounds: updateBounds} = draw.BranchHelper;
|
|
278
|
+
|
|
279
|
+
draw.UI.addAttr("motionPath", undefined, motionPathType);
|
|
280
|
+
|
|
281
|
+
draw.UI.addAttr("motionPrecision", 1, motionPathType);
|
|
282
|
+
|
|
283
|
+
draw.UI.addAttr("motion", undefined, motionPathType);
|
|
284
|
+
|
|
285
|
+
draw.UI.addAttr("motionRotation", true, motionPathType);
|
|
286
|
+
|
|
287
|
+
ui.getMotionPathData = function() {
|
|
266
288
|
return getMotionPathData(getMotionPath(this));
|
|
267
289
|
};
|
|
268
|
-
|
|
290
|
+
|
|
291
|
+
ui.getMotionPoint = function(motionDistance) {
|
|
269
292
|
const path = getMotionPath(this);
|
|
270
293
|
const data = getMotionPathData(path);
|
|
271
|
-
if (!data.total)
|
|
272
|
-
return {};
|
|
294
|
+
if (!data.total) return {};
|
|
273
295
|
const point = HighCurveHelper.getDistancePoint(data, motionDistance, path.motionPrecision);
|
|
274
296
|
draw.MatrixHelper.toOuterPoint(path.localTransform, point);
|
|
275
|
-
const { motionRotation
|
|
276
|
-
if (motionRotation === false)
|
|
277
|
-
delete point.rotation;
|
|
278
|
-
else if (typeof motionRotation === 'number')
|
|
279
|
-
point.rotation += motionRotation;
|
|
297
|
+
const {motionRotation: motionRotation} = this;
|
|
298
|
+
if (motionRotation === false) delete point.rotation; else if (draw.isNumber(motionRotation)) point.rotation += motionRotation;
|
|
280
299
|
return point;
|
|
281
300
|
};
|
|
282
|
-
|
|
301
|
+
|
|
302
|
+
ui.getMotionTotal = function() {
|
|
283
303
|
return this.getMotionPathData().total;
|
|
284
304
|
};
|
|
285
|
-
|
|
305
|
+
|
|
306
|
+
ui.__updateMotionPath = function() {
|
|
286
307
|
const data = this.__;
|
|
287
|
-
if (this.__layout.resized && data.__pathForMotion)
|
|
288
|
-
data.__pathForMotion = undefined;
|
|
308
|
+
if (this.__layout.resized && data.__pathForMotion) data.__pathForMotion = undefined;
|
|
289
309
|
if (this.motionPath) {
|
|
290
310
|
let child;
|
|
291
|
-
const { children
|
|
311
|
+
const {children: children} = this.parent;
|
|
292
312
|
for (let i = 0; i < children.length; i++) {
|
|
293
313
|
child = children[i];
|
|
294
314
|
if (!draw.isNull(child.motion) && !child.__layout.matrixChanged) {
|
|
295
|
-
if (child !== this)
|
|
296
|
-
child.__extraUpdate();
|
|
315
|
+
if (child !== this) child.__extraUpdate();
|
|
297
316
|
updateMotion(child);
|
|
298
317
|
}
|
|
299
318
|
}
|
|
300
|
-
}
|
|
301
|
-
else
|
|
302
|
-
updateMotion(this);
|
|
319
|
+
} else updateMotion(this);
|
|
303
320
|
};
|
|
321
|
+
|
|
304
322
|
function updateMotion(leaf) {
|
|
305
|
-
const { motion, leaferIsCreated } = leaf;
|
|
306
|
-
if (draw.isNull(motion))
|
|
307
|
-
|
|
308
|
-
if (leaferIsCreated)
|
|
309
|
-
leaf.leafer.created = false;
|
|
323
|
+
const {motion: motion, leaferIsCreated: leaferIsCreated} = leaf;
|
|
324
|
+
if (draw.isNull(motion)) return;
|
|
325
|
+
if (leaferIsCreated) leaf.leafer.created = false;
|
|
310
326
|
if (leaf.motionPath) {
|
|
311
327
|
const data = getMotionPathData(leaf);
|
|
312
|
-
if (data.total)
|
|
313
|
-
|
|
314
|
-
}
|
|
315
|
-
else {
|
|
328
|
+
if (data.total) leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion, leaf.motionPrecision);
|
|
329
|
+
} else {
|
|
316
330
|
leaf.set(leaf.getMotionPoint(motion));
|
|
317
331
|
if (!leaf.__hasAutoLayout) {
|
|
318
|
-
if (leaf.isBranch)
|
|
319
|
-
updateAllMatrix(leaf), updateBounds(leaf, leaf);
|
|
320
|
-
else
|
|
321
|
-
updateMatrix(leaf);
|
|
332
|
+
if (leaf.isBranch) updateAllMatrix(leaf), updateBounds(leaf, leaf); else updateMatrix(leaf);
|
|
322
333
|
}
|
|
323
334
|
}
|
|
324
|
-
if (leaferIsCreated)
|
|
325
|
-
leaf.leafer.created = true;
|
|
335
|
+
if (leaferIsCreated) leaf.leafer.created = true;
|
|
326
336
|
}
|
|
337
|
+
|
|
327
338
|
function getMotionPath(leaf) {
|
|
328
|
-
const { parent
|
|
339
|
+
const {parent: parent} = leaf;
|
|
329
340
|
if (!leaf.motionPath && parent) {
|
|
330
|
-
const { children
|
|
341
|
+
const {children: children} = parent;
|
|
331
342
|
for (let i = 0; i < children.length; i++) {
|
|
332
|
-
if (children[i].motionPath)
|
|
333
|
-
return children[i];
|
|
343
|
+
if (children[i].motionPath) return children[i];
|
|
334
344
|
}
|
|
335
345
|
}
|
|
336
346
|
return leaf;
|
|
337
347
|
}
|
|
348
|
+
|
|
338
349
|
function getMotionPathData(leaf) {
|
|
339
350
|
const data = leaf.__;
|
|
340
|
-
if (data.__pathForMotion)
|
|
341
|
-
return data.__pathForMotion;
|
|
351
|
+
if (data.__pathForMotion) return data.__pathForMotion;
|
|
342
352
|
return data.__pathForMotion = HighCurveHelper.getMotionPathData(leaf.getPath(true, true));
|
|
343
353
|
}
|
|
344
354
|
|
|
345
355
|
exports.HighBezierHelper = HighBezierHelper;
|
|
356
|
+
|
|
346
357
|
exports.HighCurveHelper = HighCurveHelper;
|
|
358
|
+
|
|
347
359
|
exports.motionPathType = motionPathType;
|