@remotion/paths 4.0.189 → 4.0.191
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.
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* List of params for each command type in a path `d` attribute
|
|
3
|
+
*/
|
|
4
|
+
export declare const typeMap: {
|
|
5
|
+
M: string[];
|
|
6
|
+
L: string[];
|
|
7
|
+
H: string[];
|
|
8
|
+
V: string[];
|
|
9
|
+
C: string[];
|
|
10
|
+
S: string[];
|
|
11
|
+
Q: string[];
|
|
12
|
+
T: string[];
|
|
13
|
+
A: string[];
|
|
14
|
+
Z: never[];
|
|
15
|
+
m: string[];
|
|
16
|
+
l: string[];
|
|
17
|
+
h: string[];
|
|
18
|
+
v: string[];
|
|
19
|
+
c: string[];
|
|
20
|
+
s: string[];
|
|
21
|
+
q: string[];
|
|
22
|
+
t: string[];
|
|
23
|
+
a: string[];
|
|
24
|
+
z: never[];
|
|
25
|
+
};
|
|
26
|
+
export type Command = {
|
|
27
|
+
x2?: number | undefined;
|
|
28
|
+
y2?: number | undefined;
|
|
29
|
+
x1?: number | undefined;
|
|
30
|
+
y1?: number | undefined;
|
|
31
|
+
x?: number;
|
|
32
|
+
y?: number;
|
|
33
|
+
xAxisRotate?: number;
|
|
34
|
+
largeArcFlag?: boolean;
|
|
35
|
+
sweepFlag?: boolean;
|
|
36
|
+
type: keyof typeof typeMap;
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* Convert command objects to arrays of points, run de Casteljau's algorithm on it
|
|
40
|
+
* to split into to the desired number of segments.
|
|
41
|
+
*
|
|
42
|
+
* @param {Object} commandStart The start command object
|
|
43
|
+
* @param {Object} commandEnd The end command object
|
|
44
|
+
* @param {Number} segmentCount The number of segments to create
|
|
45
|
+
* @return {Object[]} An array of commands representing the segments in sequence
|
|
46
|
+
*/
|
|
47
|
+
export declare const splitCurve: (commandStart: Command, commandEnd: Command, segmentCount: number) => Command[];
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/*
|
|
3
|
+
|
|
4
|
+
Copied and adapted from https://github.com/pbeshai/d3-interpolate-path:
|
|
5
|
+
Copyright 2016, Peter Beshai
|
|
6
|
+
All rights reserved.
|
|
7
|
+
|
|
8
|
+
Redistribution and use in source and binary forms, with or without modification,
|
|
9
|
+
are permitted provided that the following conditions are met:
|
|
10
|
+
|
|
11
|
+
* Redistributions of source code must retain the above copyright notice, this
|
|
12
|
+
list of conditions and the following disclaimer.
|
|
13
|
+
|
|
14
|
+
* Redistributions in binary form must reproduce the above copyright notice,
|
|
15
|
+
this list of conditions and the following disclaimer in the documentation
|
|
16
|
+
and/or other materials provided with the distribution.
|
|
17
|
+
|
|
18
|
+
* Neither the name of the author nor the names of contributors may be used to
|
|
19
|
+
endorse or promote products derived from this software without specific prior
|
|
20
|
+
written permission.
|
|
21
|
+
|
|
22
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
|
23
|
+
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
|
24
|
+
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
25
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
|
|
26
|
+
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
|
27
|
+
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
|
28
|
+
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
|
29
|
+
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
30
|
+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
|
31
|
+
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
32
|
+
|
|
33
|
+
*/
|
|
34
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
35
|
+
exports.splitCurve = exports.typeMap = void 0;
|
|
36
|
+
/**
|
|
37
|
+
* de Casteljau's algorithm for drawing and splitting bezier curves.
|
|
38
|
+
* Inspired by https://pomax.github.io/bezierinfo/
|
|
39
|
+
*
|
|
40
|
+
* @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
|
|
41
|
+
* The original segment to split.
|
|
42
|
+
* @param {Number} t Where to split the curve (value between [0, 1])
|
|
43
|
+
* @return {Object} An object { left, right } where left is the segment from 0..t and
|
|
44
|
+
* right is the segment from t..1.
|
|
45
|
+
*/
|
|
46
|
+
function decasteljau(points, t) {
|
|
47
|
+
const left = [];
|
|
48
|
+
const right = [];
|
|
49
|
+
function decasteljauRecurse(_points, _t) {
|
|
50
|
+
if (_points.length === 1) {
|
|
51
|
+
left.push(_points[0]);
|
|
52
|
+
right.push(_points[0]);
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
const newPoints = Array(_points.length - 1);
|
|
56
|
+
for (let i = 0; i < newPoints.length; i++) {
|
|
57
|
+
if (i === 0) {
|
|
58
|
+
left.push(_points[0]);
|
|
59
|
+
}
|
|
60
|
+
if (i === newPoints.length - 1) {
|
|
61
|
+
right.push(_points[i + 1]);
|
|
62
|
+
}
|
|
63
|
+
newPoints[i] = [
|
|
64
|
+
(1 - _t) * _points[i][0] + _t * _points[i + 1][0],
|
|
65
|
+
(1 - _t) * _points[i][1] + _t * _points[i + 1][1],
|
|
66
|
+
];
|
|
67
|
+
}
|
|
68
|
+
decasteljauRecurse(newPoints, _t);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
if (points.length) {
|
|
72
|
+
decasteljauRecurse(points, t);
|
|
73
|
+
}
|
|
74
|
+
return { left, right: right.reverse() };
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* List of params for each command type in a path `d` attribute
|
|
78
|
+
*/
|
|
79
|
+
exports.typeMap = {
|
|
80
|
+
M: ['x', 'y'],
|
|
81
|
+
L: ['x', 'y'],
|
|
82
|
+
H: ['x'],
|
|
83
|
+
V: ['y'],
|
|
84
|
+
C: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
|
|
85
|
+
S: ['x2', 'y2', 'x', 'y'],
|
|
86
|
+
Q: ['x1', 'y1', 'x', 'y'],
|
|
87
|
+
T: ['x', 'y'],
|
|
88
|
+
A: ['rx', 'ry', 'xAxisRotation', 'largeArcFlag', 'sweepFlag', 'x', 'y'],
|
|
89
|
+
Z: [],
|
|
90
|
+
m: ['x', 'y'],
|
|
91
|
+
l: ['x', 'y'],
|
|
92
|
+
h: ['x'],
|
|
93
|
+
v: ['y'],
|
|
94
|
+
c: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
|
|
95
|
+
s: ['x2', 'y2', 'x', 'y'],
|
|
96
|
+
q: ['x1', 'y1', 'x', 'y'],
|
|
97
|
+
t: ['x', 'y'],
|
|
98
|
+
a: ['rx', 'ry', 'xAxisRotation', 'largeArcFlag', 'sweepFlag', 'x', 'y'],
|
|
99
|
+
z: [],
|
|
100
|
+
};
|
|
101
|
+
/**
|
|
102
|
+
* Convert segments represented as points back into a command object
|
|
103
|
+
*
|
|
104
|
+
* @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
|
|
105
|
+
* Represents a segment
|
|
106
|
+
* @return {Object} A command object representing the segment.
|
|
107
|
+
*/
|
|
108
|
+
function pointsToCommand(points) {
|
|
109
|
+
let x2;
|
|
110
|
+
let y2;
|
|
111
|
+
let x1;
|
|
112
|
+
let y1;
|
|
113
|
+
if (points.length === 4) {
|
|
114
|
+
x2 = points[2][0];
|
|
115
|
+
y2 = points[2][1];
|
|
116
|
+
}
|
|
117
|
+
if (points.length >= 3) {
|
|
118
|
+
x1 = points[1][0];
|
|
119
|
+
y1 = points[1][1];
|
|
120
|
+
}
|
|
121
|
+
const x = points[points.length - 1][0];
|
|
122
|
+
const y = points[points.length - 1][1];
|
|
123
|
+
let type = 'L';
|
|
124
|
+
if (points.length === 4) {
|
|
125
|
+
// start, control1, control2, end
|
|
126
|
+
type = 'C';
|
|
127
|
+
}
|
|
128
|
+
else if (points.length === 3) {
|
|
129
|
+
// start, control, end
|
|
130
|
+
type = 'Q';
|
|
131
|
+
}
|
|
132
|
+
return { x2, y2, x1, y1, x, y, type };
|
|
133
|
+
}
|
|
134
|
+
/**
|
|
135
|
+
* Runs de Casteljau's algorithm enough times to produce the desired number of segments.
|
|
136
|
+
*
|
|
137
|
+
* @param {Number[][]} points Array of [x,y] points for de Casteljau (the initial segment to split)
|
|
138
|
+
* @param {Number} segmentCount Number of segments to split the original into
|
|
139
|
+
* @return {Number[][][]} Array of segments
|
|
140
|
+
*/
|
|
141
|
+
function splitCurveAsPoints(points, segmentCount) {
|
|
142
|
+
segmentCount = segmentCount || 2;
|
|
143
|
+
const segments = [];
|
|
144
|
+
let remainingCurve = points;
|
|
145
|
+
const tIncrement = 1 / segmentCount;
|
|
146
|
+
// x-----x-----x-----x
|
|
147
|
+
// t= 0.33 0.66 1
|
|
148
|
+
// x-----o-----------x
|
|
149
|
+
// r= 0.33
|
|
150
|
+
// x-----o-----x
|
|
151
|
+
// r= 0.5 (0.33 / (1 - 0.33)) === tIncrement / (1 - (tIncrement * (i - 1))
|
|
152
|
+
// x-----x-----x-----x----x
|
|
153
|
+
// t= 0.25 0.5 0.75 1
|
|
154
|
+
// x-----o----------------x
|
|
155
|
+
// r= 0.25
|
|
156
|
+
// x-----o----------x
|
|
157
|
+
// r= 0.33 (0.25 / (1 - 0.25))
|
|
158
|
+
// x-----o----x
|
|
159
|
+
// r= 0.5 (0.25 / (1 - 0.5))
|
|
160
|
+
for (let i = 0; i < segmentCount - 1; i++) {
|
|
161
|
+
const tRelative = tIncrement / (1 - tIncrement * i);
|
|
162
|
+
const split = decasteljau(remainingCurve, tRelative);
|
|
163
|
+
segments.push(split.left);
|
|
164
|
+
remainingCurve = split.right;
|
|
165
|
+
}
|
|
166
|
+
// last segment is just to the end from the last point
|
|
167
|
+
segments.push(remainingCurve);
|
|
168
|
+
return segments;
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Convert command objects to arrays of points, run de Casteljau's algorithm on it
|
|
172
|
+
* to split into to the desired number of segments.
|
|
173
|
+
*
|
|
174
|
+
* @param {Object} commandStart The start command object
|
|
175
|
+
* @param {Object} commandEnd The end command object
|
|
176
|
+
* @param {Number} segmentCount The number of segments to create
|
|
177
|
+
* @return {Object[]} An array of commands representing the segments in sequence
|
|
178
|
+
*/
|
|
179
|
+
const splitCurve = (commandStart, commandEnd, segmentCount) => {
|
|
180
|
+
const points = [[commandStart.x, commandStart.y]];
|
|
181
|
+
if (commandEnd.x1 !== null && commandEnd.x1 !== undefined) {
|
|
182
|
+
points.push([commandEnd.x1, commandEnd.y1]);
|
|
183
|
+
}
|
|
184
|
+
if (commandEnd.x2 !== null && commandEnd.x2 !== undefined) {
|
|
185
|
+
points.push([commandEnd.x2, commandEnd.y2]);
|
|
186
|
+
}
|
|
187
|
+
points.push([commandEnd.x, commandEnd.y]);
|
|
188
|
+
return splitCurveAsPoints(points, segmentCount).map(pointsToCommand);
|
|
189
|
+
};
|
|
190
|
+
exports.splitCurve = splitCurve;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description Interpolates between two SVG paths.
|
|
3
|
+
* @param {number} value A number - 0 means first path, 1 means second path, any other values will be interpolated
|
|
4
|
+
* @param {string} firstPath The first valid SVG path
|
|
5
|
+
* @param {string} secondPath The second valid SVG path
|
|
6
|
+
* @see [Documentation](https://remotion.dev/docs/paths/interpolate-path)
|
|
7
|
+
*/
|
|
8
|
+
export declare const interpolatePath: (value: number, firstPath: string, secondPath: string) => string;
|
|
@@ -0,0 +1,366 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/*
|
|
3
|
+
|
|
4
|
+
Copied and adapted from https://github.com/pbeshai/d3-interpolate-path:
|
|
5
|
+
Copyright 2016, Peter Beshai
|
|
6
|
+
All rights reserved.
|
|
7
|
+
|
|
8
|
+
Redistribution and use in source and binary forms, with or without modification,
|
|
9
|
+
are permitted provided that the following conditions are met:
|
|
10
|
+
|
|
11
|
+
* Redistributions of source code must retain the above copyright notice, this
|
|
12
|
+
list of conditions and the following disclaimer.
|
|
13
|
+
|
|
14
|
+
* Redistributions in binary form must reproduce the above copyright notice,
|
|
15
|
+
this list of conditions and the following disclaimer in the documentation
|
|
16
|
+
and/or other materials provided with the distribution.
|
|
17
|
+
|
|
18
|
+
* Neither the name of the author nor the names of contributors may be used to
|
|
19
|
+
endorse or promote products derived from this software without specific prior
|
|
20
|
+
written permission.
|
|
21
|
+
|
|
22
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
|
23
|
+
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
|
24
|
+
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
25
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
|
|
26
|
+
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
|
27
|
+
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
|
28
|
+
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
|
29
|
+
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
30
|
+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
|
31
|
+
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
32
|
+
|
|
33
|
+
*/
|
|
34
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
35
|
+
exports.interpolatePath = void 0;
|
|
36
|
+
const split_curve_1 = require("./helpers/split-curve");
|
|
37
|
+
const commandTokenRegex = /[MLCSTQAHVZmlcstqahv]|-?[\d.e+-]+/g;
|
|
38
|
+
function arrayOfLength(length, value) {
|
|
39
|
+
const array = Array(length);
|
|
40
|
+
for (let i = 0; i < length; i++) {
|
|
41
|
+
array[i] = value;
|
|
42
|
+
}
|
|
43
|
+
return array;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Converts a command object to a string to be used in a `d` attribute
|
|
47
|
+
* @param {Object} command A command object
|
|
48
|
+
* @return {String} The string for the `d` attribute
|
|
49
|
+
*/
|
|
50
|
+
function commandToString(command) {
|
|
51
|
+
return `${command.type} ${split_curve_1.typeMap[command.type]
|
|
52
|
+
.map((p) => command[p])
|
|
53
|
+
.join(' ')}`;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Converts command A to have the same type as command B.
|
|
57
|
+
*
|
|
58
|
+
* e.g., L0,5 -> C0,5,0,5,0,5
|
|
59
|
+
*
|
|
60
|
+
* Uses these rules:
|
|
61
|
+
* x1 <- x
|
|
62
|
+
* x2 <- x
|
|
63
|
+
* y1 <- y
|
|
64
|
+
* y2 <- y
|
|
65
|
+
* rx <- 0
|
|
66
|
+
* ry <- 0
|
|
67
|
+
* xAxisRotation <- read from B
|
|
68
|
+
* largeArcFlag <- read from B
|
|
69
|
+
* sweepflag <- read from B
|
|
70
|
+
*
|
|
71
|
+
* @param {Object} aCommand Command object from path `d` attribute
|
|
72
|
+
* @param {Object} bCommand Command object from path `d` attribute to match against
|
|
73
|
+
* @return {Object} aCommand converted to type of bCommand
|
|
74
|
+
*/
|
|
75
|
+
function convertToSameType(aCommand, bCommand) {
|
|
76
|
+
const conversionMap = {
|
|
77
|
+
x1: 'x',
|
|
78
|
+
y1: 'y',
|
|
79
|
+
x2: 'x',
|
|
80
|
+
y2: 'y',
|
|
81
|
+
};
|
|
82
|
+
const readFromBKeys = ['xAxisRotation', 'largeArcFlag', 'sweepFlag'];
|
|
83
|
+
// convert (but ignore M types)
|
|
84
|
+
if (aCommand.type !== bCommand.type && bCommand.type.toUpperCase() !== 'M') {
|
|
85
|
+
const aConverted = {
|
|
86
|
+
type: bCommand.type,
|
|
87
|
+
};
|
|
88
|
+
Object.keys(bCommand).forEach((bKey) => {
|
|
89
|
+
const bValue = bCommand[bKey];
|
|
90
|
+
// first read from the A command
|
|
91
|
+
let aValue = aCommand[bKey];
|
|
92
|
+
// if it is one of these values, read from B no matter what
|
|
93
|
+
if (aValue === undefined) {
|
|
94
|
+
if (readFromBKeys.includes(bKey)) {
|
|
95
|
+
aValue = bValue;
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
// if it wasn't in the A command, see if an equivalent was
|
|
99
|
+
if (aValue === undefined &&
|
|
100
|
+
conversionMap[bKey]) {
|
|
101
|
+
aValue =
|
|
102
|
+
aCommand[conversionMap[bKey]];
|
|
103
|
+
}
|
|
104
|
+
// if it doesn't have a converted value, use 0
|
|
105
|
+
if (aValue === undefined) {
|
|
106
|
+
aValue = 0;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
// @ts-expect-error
|
|
111
|
+
aConverted[bKey] = aValue;
|
|
112
|
+
});
|
|
113
|
+
// update the type to match B
|
|
114
|
+
aConverted.type = bCommand.type;
|
|
115
|
+
aCommand = aConverted;
|
|
116
|
+
}
|
|
117
|
+
return aCommand;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Interpolate between command objects commandStart and commandEnd segmentCount times.
|
|
121
|
+
* If the types are L, Q, or C then the curves are split as per de Casteljau's algorithm.
|
|
122
|
+
* Otherwise we just copy commandStart segmentCount - 1 times, finally ending with commandEnd.
|
|
123
|
+
*
|
|
124
|
+
* @param {Object} commandStart Command object at the beginning of the segment
|
|
125
|
+
* @param {Object} commandEnd Command object at the end of the segment
|
|
126
|
+
* @param {Number} segmentCount The number of segments to split this into. If only 1
|
|
127
|
+
* Then [commandEnd] is returned.
|
|
128
|
+
* @return {Object[]} Array of ~segmentCount command objects between commandStart and
|
|
129
|
+
* commandEnd. (Can be segmentCount+1 objects if commandStart is type M).
|
|
130
|
+
*/
|
|
131
|
+
function splitSegment(commandStart, commandEnd, segmentCount) {
|
|
132
|
+
let segments = [];
|
|
133
|
+
// line, quadratic bezier, or cubic bezier
|
|
134
|
+
if (commandEnd.type === 'L' ||
|
|
135
|
+
commandEnd.type === 'Q' ||
|
|
136
|
+
commandEnd.type === 'C') {
|
|
137
|
+
segments = segments.concat((0, split_curve_1.splitCurve)(commandStart, commandEnd, segmentCount));
|
|
138
|
+
// general case - just copy the same point
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
const copyCommand = { ...commandStart };
|
|
142
|
+
// convert M to L
|
|
143
|
+
if (copyCommand.type === 'M') {
|
|
144
|
+
copyCommand.type = 'L';
|
|
145
|
+
}
|
|
146
|
+
segments = segments.concat(arrayOfLength(segmentCount - 1, undefined).map(() => copyCommand));
|
|
147
|
+
segments.push(commandEnd);
|
|
148
|
+
}
|
|
149
|
+
return segments;
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* Extends an array of commandsToExtend to the length of the referenceCommands by
|
|
153
|
+
* splitting segments until the number of commands match. Ensures all the actual
|
|
154
|
+
* points of commandsToExtend are in the extended array.
|
|
155
|
+
*
|
|
156
|
+
* @param {Object[]} commandsToExtend The command object array to extend
|
|
157
|
+
* @param {Object[]} referenceCommands The command object array to match in length
|
|
158
|
+
* @return {Object[]} The extended commandsToExtend array
|
|
159
|
+
*/
|
|
160
|
+
function extend(commandsToExtend, referenceCommands) {
|
|
161
|
+
// compute insertion points:
|
|
162
|
+
// number of segments in the path to extend
|
|
163
|
+
const numSegmentsToExtend = commandsToExtend.length - 1;
|
|
164
|
+
// number of segments in the reference path.
|
|
165
|
+
const numReferenceSegments = referenceCommands.length - 1;
|
|
166
|
+
// this value is always between [0, 1].
|
|
167
|
+
const segmentRatio = numSegmentsToExtend / numReferenceSegments;
|
|
168
|
+
// create a map, mapping segments in referenceCommands to how many points
|
|
169
|
+
// should be added in that segment (should always be >= 1 since we need each
|
|
170
|
+
// point itself).
|
|
171
|
+
// 0 = segment 0-1, 1 = segment 1-2, n-1 = last vertex
|
|
172
|
+
const countPointsPerSegment = arrayOfLength(numReferenceSegments, undefined).reduce((accum, _d, i) => {
|
|
173
|
+
const insertIndex = Math.floor(segmentRatio * i);
|
|
174
|
+
accum[insertIndex] = (accum[insertIndex] || 0) + 1;
|
|
175
|
+
return accum;
|
|
176
|
+
}, []);
|
|
177
|
+
// extend each segment to have the correct number of points for a smooth interpolation
|
|
178
|
+
const extended = countPointsPerSegment.reduce((_extended, segmentCount, i) => {
|
|
179
|
+
// if last command, just add `segmentCount` number of times
|
|
180
|
+
if (i === commandsToExtend.length - 1) {
|
|
181
|
+
const lastCommandCopies = arrayOfLength(segmentCount, {
|
|
182
|
+
...commandsToExtend[commandsToExtend.length - 1],
|
|
183
|
+
});
|
|
184
|
+
// convert M to L
|
|
185
|
+
if (lastCommandCopies[0].type === 'M') {
|
|
186
|
+
lastCommandCopies.forEach((d) => {
|
|
187
|
+
d.type = 'L';
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
return _extended.concat(lastCommandCopies);
|
|
191
|
+
}
|
|
192
|
+
// otherwise, split the segment segmentCount times.
|
|
193
|
+
return _extended.concat(splitSegment(commandsToExtend[i], commandsToExtend[i + 1], segmentCount));
|
|
194
|
+
}, []);
|
|
195
|
+
// add in the very first point since splitSegment only adds in the ones after it
|
|
196
|
+
extended.unshift(commandsToExtend[0]);
|
|
197
|
+
return extended;
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Takes a path `d` string and converts it into an array of command
|
|
201
|
+
* objects. Drops the `Z` character.
|
|
202
|
+
*
|
|
203
|
+
* @param {String|null} d A path `d` string
|
|
204
|
+
*/
|
|
205
|
+
function pathCommandsFromString(d) {
|
|
206
|
+
// split into valid tokens
|
|
207
|
+
const tokens = (d || '').match(commandTokenRegex) || [];
|
|
208
|
+
const commands = [];
|
|
209
|
+
let commandArgs;
|
|
210
|
+
let command;
|
|
211
|
+
// iterate over each token, checking if we are at a new command
|
|
212
|
+
// by presence in the typeMap
|
|
213
|
+
for (let i = 0; i < tokens.length; ++i) {
|
|
214
|
+
commandArgs = split_curve_1.typeMap[tokens[i]];
|
|
215
|
+
// new command found:
|
|
216
|
+
if (commandArgs) {
|
|
217
|
+
command = {
|
|
218
|
+
type: tokens[i],
|
|
219
|
+
};
|
|
220
|
+
// add each of the expected args for this command:
|
|
221
|
+
for (let a = 0; a < commandArgs.length; ++a) {
|
|
222
|
+
// @ts-expect-error
|
|
223
|
+
command[commandArgs[a]] = Number(tokens[i + a + 1]);
|
|
224
|
+
}
|
|
225
|
+
// need to increment our token index appropriately since
|
|
226
|
+
// we consumed token args
|
|
227
|
+
i += commandArgs.length;
|
|
228
|
+
commands.push(command);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
return commands;
|
|
232
|
+
}
|
|
233
|
+
/**
|
|
234
|
+
* Interpolate from A to B by extending A and B during interpolation to have
|
|
235
|
+
* the same number of points. This allows for a smooth transition when they
|
|
236
|
+
* have a different number of points.
|
|
237
|
+
*
|
|
238
|
+
* Ignores the `Z` command in paths unless both A and B end with it.
|
|
239
|
+
*
|
|
240
|
+
* This function works directly with arrays of command objects instead of with
|
|
241
|
+
* path `d` strings (see interpolatePath for working with `d` strings).
|
|
242
|
+
*
|
|
243
|
+
* @param {Object[]} aCommandsInput Array of path commands
|
|
244
|
+
* @param {Object[]} bCommandsInput Array of path commands
|
|
245
|
+
* @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
|
|
246
|
+
*/
|
|
247
|
+
function interpolatePathCommands(aCommandsInput, bCommandsInput) {
|
|
248
|
+
// make a copy so we don't mess with the input arrays
|
|
249
|
+
let aCommands = aCommandsInput === null || aCommandsInput === undefined
|
|
250
|
+
? []
|
|
251
|
+
: aCommandsInput.slice();
|
|
252
|
+
let bCommands = bCommandsInput === null || bCommandsInput === undefined
|
|
253
|
+
? []
|
|
254
|
+
: bCommandsInput.slice();
|
|
255
|
+
// both input sets are empty, so we don't interpolate
|
|
256
|
+
if (!aCommands.length && !bCommands.length) {
|
|
257
|
+
return function () {
|
|
258
|
+
return [];
|
|
259
|
+
};
|
|
260
|
+
}
|
|
261
|
+
// do we add Z during interpolation? yes if both have it. (we'd expect both to have it or not)
|
|
262
|
+
const addZ = (aCommands.length === 0 || aCommands[aCommands.length - 1].type === 'Z') &&
|
|
263
|
+
(bCommands.length === 0 || bCommands[bCommands.length - 1].type === 'Z');
|
|
264
|
+
// we temporarily remove Z
|
|
265
|
+
if (aCommands.length > 0 && aCommands[aCommands.length - 1].type === 'Z') {
|
|
266
|
+
aCommands.pop();
|
|
267
|
+
}
|
|
268
|
+
if (bCommands.length > 0 && bCommands[bCommands.length - 1].type === 'Z') {
|
|
269
|
+
bCommands.pop();
|
|
270
|
+
}
|
|
271
|
+
// if A is empty, treat it as if it used to contain just the first point
|
|
272
|
+
// of B. This makes it so the line extends out of from that first point.
|
|
273
|
+
if (!aCommands.length) {
|
|
274
|
+
aCommands.push(bCommands[0]);
|
|
275
|
+
// otherwise if B is empty, treat it as if it contains the first point
|
|
276
|
+
// of A. This makes it so the line retracts into the first point.
|
|
277
|
+
}
|
|
278
|
+
else if (!bCommands.length) {
|
|
279
|
+
bCommands.push(aCommands[0]);
|
|
280
|
+
}
|
|
281
|
+
// extend to match equal size
|
|
282
|
+
const numPointsToExtend = Math.abs(bCommands.length - aCommands.length);
|
|
283
|
+
if (numPointsToExtend !== 0) {
|
|
284
|
+
// B has more points than A, so add points to A before interpolating
|
|
285
|
+
if (bCommands.length > aCommands.length) {
|
|
286
|
+
aCommands = extend(aCommands, bCommands);
|
|
287
|
+
// else if A has more points than B, add more points to B
|
|
288
|
+
}
|
|
289
|
+
else if (bCommands.length < aCommands.length) {
|
|
290
|
+
bCommands = extend(bCommands, aCommands);
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
// commands have same length now.
|
|
294
|
+
// convert commands in A to the same type as those in B
|
|
295
|
+
aCommands = aCommands.map((aCommand, i) => convertToSameType(aCommand, bCommands[i]));
|
|
296
|
+
// create mutable interpolated command objects
|
|
297
|
+
const interpolatedCommands = aCommands.map((aCommand) => ({ ...aCommand }));
|
|
298
|
+
if (addZ) {
|
|
299
|
+
interpolatedCommands.push({ type: 'Z' });
|
|
300
|
+
aCommands.push({ type: 'Z' }); // required for when returning at t == 0
|
|
301
|
+
}
|
|
302
|
+
return function (t) {
|
|
303
|
+
// at 1 return the final value without the extensions used during interpolation
|
|
304
|
+
if (t === 1) {
|
|
305
|
+
return bCommandsInput === null || bCommandsInput === undefined
|
|
306
|
+
? []
|
|
307
|
+
: bCommandsInput;
|
|
308
|
+
}
|
|
309
|
+
// work with aCommands directly since interpolatedCommands are mutated
|
|
310
|
+
if (t === 0) {
|
|
311
|
+
return aCommands;
|
|
312
|
+
}
|
|
313
|
+
// interpolate the commands using the mutable interpolated command objs
|
|
314
|
+
for (let i = 0; i < interpolatedCommands.length; ++i) {
|
|
315
|
+
// if (interpolatedCommands[i].type === 'Z') continue;
|
|
316
|
+
const aCommand = aCommands[i];
|
|
317
|
+
const bCommand = bCommands[i];
|
|
318
|
+
const interpolatedCommand = interpolatedCommands[i];
|
|
319
|
+
for (const arg of split_curve_1.typeMap[interpolatedCommand.type]) {
|
|
320
|
+
// @ts-expect-error
|
|
321
|
+
interpolatedCommand[arg] =
|
|
322
|
+
(1 - t) * aCommand[arg] +
|
|
323
|
+
t * bCommand[arg];
|
|
324
|
+
// do not use floats for flags (#27), round to integer
|
|
325
|
+
if (arg === 'largeArcFlag' || arg === 'sweepFlag') {
|
|
326
|
+
// @ts-expect-error
|
|
327
|
+
interpolatedCommand[arg] = Math.round(interpolatedCommand[arg]);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
return interpolatedCommands;
|
|
332
|
+
};
|
|
333
|
+
}
|
|
334
|
+
/**
|
|
335
|
+
* @description Interpolates between two SVG paths.
|
|
336
|
+
* @param {number} value A number - 0 means first path, 1 means second path, any other values will be interpolated
|
|
337
|
+
* @param {string} firstPath The first valid SVG path
|
|
338
|
+
* @param {string} secondPath The second valid SVG path
|
|
339
|
+
* @see [Documentation](https://remotion.dev/docs/paths/interpolate-path)
|
|
340
|
+
*/
|
|
341
|
+
const interpolatePath = (value, firstPath, secondPath) => {
|
|
342
|
+
// at 1 return the final value without the extensions used during interpolation
|
|
343
|
+
if (value === 1) {
|
|
344
|
+
return secondPath;
|
|
345
|
+
}
|
|
346
|
+
if (value === 0) {
|
|
347
|
+
return firstPath;
|
|
348
|
+
}
|
|
349
|
+
const aCommands = pathCommandsFromString(firstPath);
|
|
350
|
+
if (aCommands.length === 0) {
|
|
351
|
+
throw new TypeError(`SVG Path "${firstPath}" is not valid`);
|
|
352
|
+
}
|
|
353
|
+
const bCommands = pathCommandsFromString(secondPath);
|
|
354
|
+
if (bCommands.length === 0) {
|
|
355
|
+
throw new TypeError(`SVG Path "${secondPath}" is not valid`);
|
|
356
|
+
}
|
|
357
|
+
const commandInterpolator = interpolatePathCommands(aCommands, bCommands);
|
|
358
|
+
const interpolatedCommands = commandInterpolator(value);
|
|
359
|
+
// convert to a string (fastest concat: https://jsperf.com/join-concat/150)
|
|
360
|
+
return interpolatedCommands
|
|
361
|
+
.map((c) => {
|
|
362
|
+
return commandToString(c);
|
|
363
|
+
})
|
|
364
|
+
.join(' ');
|
|
365
|
+
};
|
|
366
|
+
exports.interpolatePath = interpolatePath;
|
package/package.json
CHANGED