@remotion/paths 3.2.11
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/.prettierrc.js +14 -0
- package/LICENSE.md +7 -0
- package/README.md +25 -0
- package/dist/arc.d.ts +12 -0
- package/dist/arc.js +231 -0
- package/dist/bezier-functions.d.ts +11 -0
- package/dist/bezier-functions.js +138 -0
- package/dist/bezier-values.d.ts +3 -0
- package/dist/bezier-values.js +693 -0
- package/dist/bezier.d.ts +26 -0
- package/dist/bezier.js +81 -0
- package/dist/construct.d.ts +7 -0
- package/dist/construct.js +308 -0
- package/dist/evolve-path.d.ts +10 -0
- package/dist/evolve-path.js +17 -0
- package/dist/get-length.d.ts +6 -0
- package/dist/get-length.js +15 -0
- package/dist/get-part-at-length.d.ts +4 -0
- package/dist/get-part-at-length.js +20 -0
- package/dist/get-parts.d.ts +7 -0
- package/dist/get-parts.js +31 -0
- package/dist/get-point-at-length.d.ts +7 -0
- package/dist/get-point-at-length.js +24 -0
- package/dist/get-properties-at-length.d.ts +1 -0
- package/dist/get-properties-at-length.js +23 -0
- package/dist/get-reversed-path.d.ts +12 -0
- package/dist/get-reversed-path.js +159 -0
- package/dist/get-tangent-at-length.d.ts +7 -0
- package/dist/get-tangent-at-length.js +24 -0
- package/dist/helpers/arc.d.ts +12 -0
- package/dist/helpers/arc.js +226 -0
- package/dist/helpers/bezier-functions.d.ts +11 -0
- package/dist/helpers/bezier-functions.js +135 -0
- package/dist/helpers/bezier-values.d.ts +3 -0
- package/dist/helpers/bezier-values.js +694 -0
- package/dist/helpers/bezier.d.ts +26 -0
- package/dist/helpers/bezier.js +82 -0
- package/dist/helpers/construct.d.ts +7 -0
- package/dist/helpers/construct.js +309 -0
- package/dist/helpers/get-part-at-length.d.ts +4 -0
- package/dist/helpers/get-part-at-length.js +20 -0
- package/dist/helpers/linear.d.ts +7 -0
- package/dist/helpers/linear.js +30 -0
- package/dist/helpers/parse.d.ts +2 -0
- package/dist/helpers/parse.js +49 -0
- package/dist/helpers/split-curve.d.ts +47 -0
- package/dist/helpers/split-curve.js +190 -0
- package/dist/helpers/types.d.ts +22 -0
- package/dist/helpers/types.js +3 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +19 -0
- package/dist/interpolate-path.d.ts +8 -0
- package/dist/interpolate-path.js +366 -0
- package/dist/linear.d.ts +7 -0
- package/dist/linear.js +31 -0
- package/dist/normalize-path.d.ts +6 -0
- package/dist/normalize-path.js +300 -0
- package/dist/parse.d.ts +2 -0
- package/dist/parse.js +48 -0
- package/dist/reverse-path.d.ts +12 -0
- package/dist/reverse-path.js +148 -0
- package/dist/types.d.ts +26 -0
- package/dist/types.js +2 -0
- package/package.json +39 -0
- package/tsconfig.json +9 -0
package/dist/bezier.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { Point } from './types';
|
|
2
|
+
export declare const makeBezier: ({ ax, ay, bx, by, cx, cy, dx, dy, }: {
|
|
3
|
+
ax: number;
|
|
4
|
+
ay: number;
|
|
5
|
+
bx: number;
|
|
6
|
+
by: number;
|
|
7
|
+
cx: number;
|
|
8
|
+
cy: number;
|
|
9
|
+
dx: number | null;
|
|
10
|
+
dy: number | null;
|
|
11
|
+
}) => {
|
|
12
|
+
getPointAtLength: (len: number) => Point;
|
|
13
|
+
getPropertiesAtLength: (len: number) => {
|
|
14
|
+
x: number;
|
|
15
|
+
y: number;
|
|
16
|
+
tangentX: number;
|
|
17
|
+
tangentY: number;
|
|
18
|
+
};
|
|
19
|
+
getTangentAtLength: (len: number) => Point;
|
|
20
|
+
getTotalLength: () => number;
|
|
21
|
+
getC: () => {
|
|
22
|
+
x: number;
|
|
23
|
+
y: number;
|
|
24
|
+
};
|
|
25
|
+
getD: () => Point;
|
|
26
|
+
};
|
package/dist/bezier.js
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.makeBezier = void 0;
|
|
4
|
+
const bezier_functions_1 = require("./bezier-functions");
|
|
5
|
+
const makeBezier = ({ ax, ay, bx, by, cx, cy, dx, dy, }) => {
|
|
6
|
+
let d;
|
|
7
|
+
let getArcLength;
|
|
8
|
+
let getPoint;
|
|
9
|
+
let getDerivative;
|
|
10
|
+
const a = { x: ax, y: ay };
|
|
11
|
+
const b = { x: bx, y: by };
|
|
12
|
+
const c = { x: cx, y: cy };
|
|
13
|
+
if (dx !== null && dy !== null) {
|
|
14
|
+
getArcLength = bezier_functions_1.getCubicArcLength;
|
|
15
|
+
getPoint = bezier_functions_1.cubicPoint;
|
|
16
|
+
getDerivative = bezier_functions_1.cubicDerivative;
|
|
17
|
+
d = { x: dx, y: dy };
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
getArcLength = bezier_functions_1.getQuadraticArcLength;
|
|
21
|
+
getPoint = bezier_functions_1.quadraticPoint;
|
|
22
|
+
getDerivative = bezier_functions_1.quadraticDerivative;
|
|
23
|
+
d = { x: 0, y: 0 };
|
|
24
|
+
}
|
|
25
|
+
const length = getArcLength([a.x, b.x, c.x, d.x], [a.y, b.y, c.y, d.y], 1);
|
|
26
|
+
const getTotalLength = () => {
|
|
27
|
+
return length;
|
|
28
|
+
};
|
|
29
|
+
const getPointAtLength = (len) => {
|
|
30
|
+
const xs = [a.x, b.x, c.x, d.x];
|
|
31
|
+
const xy = [a.y, b.y, c.y, d.y];
|
|
32
|
+
const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
|
|
33
|
+
return getPoint(xs, xy, t);
|
|
34
|
+
};
|
|
35
|
+
const getTangentAtLength = (len) => {
|
|
36
|
+
const xs = [a.x, b.x, c.x, d.x];
|
|
37
|
+
const xy = [a.y, b.y, c.y, d.y];
|
|
38
|
+
const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
|
|
39
|
+
const derivative = getDerivative(xs, xy, t);
|
|
40
|
+
const mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
|
|
41
|
+
let tangent;
|
|
42
|
+
if (mdl > 0) {
|
|
43
|
+
tangent = { x: derivative.x / mdl, y: derivative.y / mdl };
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
tangent = { x: 0, y: 0 };
|
|
47
|
+
}
|
|
48
|
+
return tangent;
|
|
49
|
+
};
|
|
50
|
+
const getPropertiesAtLength = (len) => {
|
|
51
|
+
const xs = [a.x, b.x, c.x, d.x];
|
|
52
|
+
const xy = [a.y, b.y, c.y, d.y];
|
|
53
|
+
const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
|
|
54
|
+
const derivative = getDerivative(xs, xy, t);
|
|
55
|
+
const mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
|
|
56
|
+
let tangent;
|
|
57
|
+
if (mdl > 0) {
|
|
58
|
+
tangent = { x: derivative.x / mdl, y: derivative.y / mdl };
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
tangent = { x: 0, y: 0 };
|
|
62
|
+
}
|
|
63
|
+
const point = getPoint(xs, xy, t);
|
|
64
|
+
return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
|
|
65
|
+
};
|
|
66
|
+
const getC = () => {
|
|
67
|
+
return c;
|
|
68
|
+
};
|
|
69
|
+
const getD = () => {
|
|
70
|
+
return d;
|
|
71
|
+
};
|
|
72
|
+
return {
|
|
73
|
+
getPointAtLength,
|
|
74
|
+
getPropertiesAtLength,
|
|
75
|
+
getTangentAtLength,
|
|
76
|
+
getTotalLength,
|
|
77
|
+
getC,
|
|
78
|
+
getD,
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
exports.makeBezier = makeBezier;
|
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.construct = void 0;
|
|
7
|
+
const arc_1 = require("./arc");
|
|
8
|
+
const bezier_1 = require("./bezier");
|
|
9
|
+
const linear_1 = require("./linear");
|
|
10
|
+
const parse_1 = __importDefault(require("./parse"));
|
|
11
|
+
const construct = (string) => {
|
|
12
|
+
let length = 0;
|
|
13
|
+
const partial_lengths = [];
|
|
14
|
+
const functions = [];
|
|
15
|
+
let initial_point = null;
|
|
16
|
+
const parsed = (0, parse_1.default)(string);
|
|
17
|
+
let cur = [0, 0];
|
|
18
|
+
let prev_point = [0, 0];
|
|
19
|
+
let curve;
|
|
20
|
+
let ringStart = [0, 0];
|
|
21
|
+
for (let i = 0; i < parsed.length; i++) {
|
|
22
|
+
// moveTo
|
|
23
|
+
if (parsed[i][0] === 'M') {
|
|
24
|
+
cur = [parsed[i][1], parsed[i][2]];
|
|
25
|
+
ringStart = [cur[0], cur[1]];
|
|
26
|
+
functions.push(null);
|
|
27
|
+
if (i === 0) {
|
|
28
|
+
initial_point = { x: parsed[i][1], y: parsed[i][2] };
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
else if (parsed[i][0] === 'm') {
|
|
32
|
+
cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
|
|
33
|
+
ringStart = [cur[0], cur[1]];
|
|
34
|
+
functions.push(null);
|
|
35
|
+
// lineTo
|
|
36
|
+
}
|
|
37
|
+
else if (parsed[i][0] === 'L') {
|
|
38
|
+
length += Math.sqrt((cur[0] - parsed[i][1]) ** 2 + (cur[1] - parsed[i][2]) ** 2);
|
|
39
|
+
functions.push((0, linear_1.makeLinearPosition)(cur[0], parsed[i][1], cur[1], parsed[i][2]));
|
|
40
|
+
cur = [parsed[i][1], parsed[i][2]];
|
|
41
|
+
}
|
|
42
|
+
else if (parsed[i][0] === 'l') {
|
|
43
|
+
length += Math.sqrt(parsed[i][1] ** 2 + parsed[i][2] ** 2);
|
|
44
|
+
functions.push((0, linear_1.makeLinearPosition)(cur[0], parsed[i][1] + cur[0], cur[1], parsed[i][2] + cur[1]));
|
|
45
|
+
cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
|
|
46
|
+
}
|
|
47
|
+
else if (parsed[i][0] === 'H') {
|
|
48
|
+
length += Math.abs(cur[0] - parsed[i][1]);
|
|
49
|
+
functions.push((0, linear_1.makeLinearPosition)(cur[0], parsed[i][1], cur[1], cur[1]));
|
|
50
|
+
cur[0] = parsed[i][1];
|
|
51
|
+
}
|
|
52
|
+
else if (parsed[i][0] === 'h') {
|
|
53
|
+
length += Math.abs(parsed[i][1]);
|
|
54
|
+
functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0] + parsed[i][1], cur[1], cur[1]));
|
|
55
|
+
cur[0] = parsed[i][1] + cur[0];
|
|
56
|
+
}
|
|
57
|
+
else if (parsed[i][0] === 'V') {
|
|
58
|
+
length += Math.abs(cur[1] - parsed[i][1]);
|
|
59
|
+
functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], parsed[i][1]));
|
|
60
|
+
cur[1] = parsed[i][1];
|
|
61
|
+
}
|
|
62
|
+
else if (parsed[i][0] === 'v') {
|
|
63
|
+
length += Math.abs(parsed[i][1]);
|
|
64
|
+
functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], cur[1] + parsed[i][1]));
|
|
65
|
+
cur[1] = parsed[i][1] + cur[1];
|
|
66
|
+
// Close path
|
|
67
|
+
}
|
|
68
|
+
else if (parsed[i][0] === 'z' || parsed[i][0] === 'Z') {
|
|
69
|
+
length += Math.sqrt((ringStart[0] - cur[0]) ** 2 + (ringStart[1] - cur[1]) ** 2);
|
|
70
|
+
functions.push((0, linear_1.makeLinearPosition)(cur[0], ringStart[0], cur[1], ringStart[1]));
|
|
71
|
+
cur = [ringStart[0], ringStart[1]];
|
|
72
|
+
// Cubic Bezier curves
|
|
73
|
+
}
|
|
74
|
+
else if (parsed[i][0] === 'C') {
|
|
75
|
+
curve = (0, bezier_1.makeBezier)({
|
|
76
|
+
ax: cur[0],
|
|
77
|
+
ay: cur[1],
|
|
78
|
+
bx: parsed[i][1],
|
|
79
|
+
by: parsed[i][2],
|
|
80
|
+
cx: parsed[i][3],
|
|
81
|
+
cy: parsed[i][4],
|
|
82
|
+
dx: parsed[i][5],
|
|
83
|
+
dy: parsed[i][6],
|
|
84
|
+
});
|
|
85
|
+
length += curve.getTotalLength();
|
|
86
|
+
cur = [parsed[i][5], parsed[i][6]];
|
|
87
|
+
functions.push(curve);
|
|
88
|
+
}
|
|
89
|
+
else if (parsed[i][0] === 'c') {
|
|
90
|
+
curve = (0, bezier_1.makeBezier)({
|
|
91
|
+
ax: cur[0],
|
|
92
|
+
ay: cur[1],
|
|
93
|
+
bx: cur[0] + parsed[i][1],
|
|
94
|
+
by: cur[1] + parsed[i][2],
|
|
95
|
+
cx: cur[0] + parsed[i][3],
|
|
96
|
+
cy: cur[1] + parsed[i][4],
|
|
97
|
+
dx: cur[0] + parsed[i][5],
|
|
98
|
+
dy: cur[1] + parsed[i][6],
|
|
99
|
+
});
|
|
100
|
+
if (curve.getTotalLength() > 0) {
|
|
101
|
+
length += curve.getTotalLength();
|
|
102
|
+
functions.push(curve);
|
|
103
|
+
cur = [parsed[i][5] + cur[0], parsed[i][6] + cur[1]];
|
|
104
|
+
}
|
|
105
|
+
else {
|
|
106
|
+
functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], cur[1]));
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
else if (parsed[i][0] === 'S') {
|
|
110
|
+
if (i > 0 && ['C', 'c', 'S', 's'].indexOf(parsed[i - 1][0]) > -1) {
|
|
111
|
+
if (curve) {
|
|
112
|
+
const c = curve.getC();
|
|
113
|
+
curve = (0, bezier_1.makeBezier)({
|
|
114
|
+
ax: cur[0],
|
|
115
|
+
ay: cur[1],
|
|
116
|
+
bx: 2 * cur[0] - c.x,
|
|
117
|
+
by: 2 * cur[1] - c.y,
|
|
118
|
+
cx: parsed[i][1],
|
|
119
|
+
cy: parsed[i][2],
|
|
120
|
+
dx: parsed[i][3],
|
|
121
|
+
dy: parsed[i][4],
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
curve = (0, bezier_1.makeBezier)({
|
|
127
|
+
ax: cur[0],
|
|
128
|
+
ay: cur[1],
|
|
129
|
+
bx: cur[0],
|
|
130
|
+
by: cur[1],
|
|
131
|
+
cx: parsed[i][1],
|
|
132
|
+
cy: parsed[i][2],
|
|
133
|
+
dx: parsed[i][3],
|
|
134
|
+
dy: parsed[i][4],
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
if (curve) {
|
|
138
|
+
length += curve.getTotalLength();
|
|
139
|
+
cur = [parsed[i][3], parsed[i][4]];
|
|
140
|
+
functions.push(curve);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
else if (parsed[i][0] === 's') {
|
|
144
|
+
// 240 225
|
|
145
|
+
if (i > 0 && ['C', 'c', 'S', 's'].indexOf(parsed[i - 1][0]) > -1) {
|
|
146
|
+
if (curve) {
|
|
147
|
+
const c = curve.getC();
|
|
148
|
+
const d = curve.getD();
|
|
149
|
+
curve = (0, bezier_1.makeBezier)({
|
|
150
|
+
ax: cur[0],
|
|
151
|
+
ay: cur[1],
|
|
152
|
+
bx: cur[0] + d.x - c.x,
|
|
153
|
+
by: cur[1] + d.y - c.y,
|
|
154
|
+
cx: cur[0] + parsed[i][1],
|
|
155
|
+
cy: cur[1] + parsed[i][2],
|
|
156
|
+
dx: cur[0] + parsed[i][3],
|
|
157
|
+
dy: cur[1] + parsed[i][4],
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
else {
|
|
162
|
+
curve = (0, bezier_1.makeBezier)({
|
|
163
|
+
ax: cur[0],
|
|
164
|
+
ay: cur[1],
|
|
165
|
+
bx: cur[0],
|
|
166
|
+
by: cur[1],
|
|
167
|
+
cx: cur[0] + parsed[i][1],
|
|
168
|
+
cy: cur[1] + parsed[i][2],
|
|
169
|
+
dx: cur[0] + parsed[i][3],
|
|
170
|
+
dy: cur[1] + parsed[i][4],
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
if (curve) {
|
|
174
|
+
length += curve.getTotalLength();
|
|
175
|
+
cur = [parsed[i][3] + cur[0], parsed[i][4] + cur[1]];
|
|
176
|
+
functions.push(curve);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
// Quadratic Bezier curves
|
|
180
|
+
else if (parsed[i][0] === 'Q') {
|
|
181
|
+
if (cur[0] === parsed[i][1] && cur[1] === parsed[i][2]) {
|
|
182
|
+
const linearCurve = (0, linear_1.makeLinearPosition)(parsed[i][1], parsed[i][3], parsed[i][2], parsed[i][4]);
|
|
183
|
+
length += linearCurve.getTotalLength();
|
|
184
|
+
functions.push(linearCurve);
|
|
185
|
+
}
|
|
186
|
+
else {
|
|
187
|
+
curve = (0, bezier_1.makeBezier)({
|
|
188
|
+
ax: cur[0],
|
|
189
|
+
ay: cur[1],
|
|
190
|
+
bx: parsed[i][1],
|
|
191
|
+
by: parsed[i][2],
|
|
192
|
+
cx: parsed[i][3],
|
|
193
|
+
cy: parsed[i][4],
|
|
194
|
+
dx: null,
|
|
195
|
+
dy: null,
|
|
196
|
+
});
|
|
197
|
+
length += curve.getTotalLength();
|
|
198
|
+
functions.push(curve);
|
|
199
|
+
}
|
|
200
|
+
cur = [parsed[i][3], parsed[i][4]];
|
|
201
|
+
prev_point = [parsed[i][1], parsed[i][2]];
|
|
202
|
+
}
|
|
203
|
+
else if (parsed[i][0] === 'q') {
|
|
204
|
+
if (parsed[i][1] === 0 && parsed[i][2] === 0) {
|
|
205
|
+
const linearCurve = (0, linear_1.makeLinearPosition)(cur[0] + parsed[i][1], cur[0] + parsed[i][3], cur[1] + parsed[i][2], cur[1] + parsed[i][4]);
|
|
206
|
+
length += linearCurve.getTotalLength();
|
|
207
|
+
functions.push(linearCurve);
|
|
208
|
+
}
|
|
209
|
+
else {
|
|
210
|
+
curve = (0, bezier_1.makeBezier)({
|
|
211
|
+
ax: cur[0],
|
|
212
|
+
ay: cur[1],
|
|
213
|
+
bx: cur[0] + parsed[i][1],
|
|
214
|
+
by: cur[1] + parsed[i][2],
|
|
215
|
+
cx: cur[0] + parsed[i][3],
|
|
216
|
+
cy: cur[1] + parsed[i][4],
|
|
217
|
+
dx: null,
|
|
218
|
+
dy: null,
|
|
219
|
+
});
|
|
220
|
+
length += curve.getTotalLength();
|
|
221
|
+
functions.push(curve);
|
|
222
|
+
}
|
|
223
|
+
prev_point = [cur[0] + parsed[i][1], cur[1] + parsed[i][2]];
|
|
224
|
+
cur = [parsed[i][3] + cur[0], parsed[i][4] + cur[1]];
|
|
225
|
+
}
|
|
226
|
+
else if (parsed[i][0] === 'T') {
|
|
227
|
+
if (i > 0 && ['Q', 'q', 'T', 't'].indexOf(parsed[i - 1][0]) > -1) {
|
|
228
|
+
curve = (0, bezier_1.makeBezier)({
|
|
229
|
+
ax: cur[0],
|
|
230
|
+
ay: cur[1],
|
|
231
|
+
bx: 2 * cur[0] - prev_point[0],
|
|
232
|
+
by: 2 * cur[1] - prev_point[1],
|
|
233
|
+
cx: parsed[i][1],
|
|
234
|
+
cy: parsed[i][2],
|
|
235
|
+
dx: null,
|
|
236
|
+
dy: null,
|
|
237
|
+
});
|
|
238
|
+
functions.push(curve);
|
|
239
|
+
length += curve.getTotalLength();
|
|
240
|
+
}
|
|
241
|
+
else {
|
|
242
|
+
const linearCurve = (0, linear_1.makeLinearPosition)(cur[0], parsed[i][1], cur[1], parsed[i][2]);
|
|
243
|
+
functions.push(linearCurve);
|
|
244
|
+
length += linearCurve.getTotalLength();
|
|
245
|
+
}
|
|
246
|
+
prev_point = [2 * cur[0] - prev_point[0], 2 * cur[1] - prev_point[1]];
|
|
247
|
+
cur = [parsed[i][1], parsed[i][2]];
|
|
248
|
+
}
|
|
249
|
+
else if (parsed[i][0] === 't') {
|
|
250
|
+
if (i > 0 && ['Q', 'q', 'T', 't'].indexOf(parsed[i - 1][0]) > -1) {
|
|
251
|
+
curve = (0, bezier_1.makeBezier)({
|
|
252
|
+
ax: cur[0],
|
|
253
|
+
ay: cur[1],
|
|
254
|
+
bx: 2 * cur[0] - prev_point[0],
|
|
255
|
+
by: 2 * cur[1] - prev_point[1],
|
|
256
|
+
cx: cur[0] + parsed[i][1],
|
|
257
|
+
cy: cur[1] + parsed[i][2],
|
|
258
|
+
dx: null,
|
|
259
|
+
dy: null,
|
|
260
|
+
});
|
|
261
|
+
length += curve.getTotalLength();
|
|
262
|
+
functions.push(curve);
|
|
263
|
+
}
|
|
264
|
+
else {
|
|
265
|
+
const linearCurve = (0, linear_1.makeLinearPosition)(cur[0], cur[0] + parsed[i][1], cur[1], cur[1] + parsed[i][2]);
|
|
266
|
+
length += linearCurve.getTotalLength();
|
|
267
|
+
functions.push(linearCurve);
|
|
268
|
+
}
|
|
269
|
+
prev_point = [2 * cur[0] - prev_point[0], 2 * cur[1] - prev_point[1]];
|
|
270
|
+
cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
|
|
271
|
+
}
|
|
272
|
+
else if (parsed[i][0] === 'A') {
|
|
273
|
+
const arcCurve = (0, arc_1.makeArc)({
|
|
274
|
+
x0: cur[0],
|
|
275
|
+
y0: cur[1],
|
|
276
|
+
rx: parsed[i][1],
|
|
277
|
+
ry: parsed[i][2],
|
|
278
|
+
xAxisRotate: parsed[i][3],
|
|
279
|
+
LargeArcFlag: parsed[i][4] === 1,
|
|
280
|
+
SweepFlag: parsed[i][5] === 1,
|
|
281
|
+
x1: parsed[i][6],
|
|
282
|
+
y1: parsed[i][7],
|
|
283
|
+
});
|
|
284
|
+
length += arcCurve.getTotalLength();
|
|
285
|
+
cur = [parsed[i][6], parsed[i][7]];
|
|
286
|
+
functions.push(arcCurve);
|
|
287
|
+
}
|
|
288
|
+
else if (parsed[i][0] === 'a') {
|
|
289
|
+
const arcCurve = (0, arc_1.makeArc)({
|
|
290
|
+
x0: cur[0],
|
|
291
|
+
y0: cur[1],
|
|
292
|
+
rx: parsed[i][1],
|
|
293
|
+
ry: parsed[i][2],
|
|
294
|
+
xAxisRotate: parsed[i][3],
|
|
295
|
+
LargeArcFlag: parsed[i][4] === 1,
|
|
296
|
+
SweepFlag: parsed[i][5] === 1,
|
|
297
|
+
x1: cur[0] + parsed[i][6],
|
|
298
|
+
y1: cur[1] + parsed[i][7],
|
|
299
|
+
});
|
|
300
|
+
length += arcCurve.getTotalLength();
|
|
301
|
+
cur = [cur[0] + parsed[i][6], cur[1] + parsed[i][7]];
|
|
302
|
+
functions.push(arcCurve);
|
|
303
|
+
}
|
|
304
|
+
partial_lengths.push(length);
|
|
305
|
+
}
|
|
306
|
+
return { initial_point, length, partial_lengths, functions };
|
|
307
|
+
};
|
|
308
|
+
exports.construct = construct;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Animates an SVG from being invisible to it's full length.
|
|
3
|
+
* @param {string} path A valid SVG path
|
|
4
|
+
* @param {number} progress The first valid SVG path
|
|
5
|
+
* @link https://remotion.dev/docs/paths/evolve-path
|
|
6
|
+
*/
|
|
7
|
+
export declare const evolvePath: (progress: number, path: string) => {
|
|
8
|
+
strokeDasharray: string;
|
|
9
|
+
strokeDashoffset: number;
|
|
10
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.evolvePath = void 0;
|
|
4
|
+
const get_length_1 = require("./get-length");
|
|
5
|
+
/**
|
|
6
|
+
* Animates an SVG from being invisible to it's full length.
|
|
7
|
+
* @param {string} path A valid SVG path
|
|
8
|
+
* @param {number} progress The first valid SVG path
|
|
9
|
+
* @link https://remotion.dev/docs/paths/evolve-path
|
|
10
|
+
*/
|
|
11
|
+
const evolvePath = (progress, path) => {
|
|
12
|
+
const length = (0, get_length_1.getLength)(path);
|
|
13
|
+
const strokeDasharray = `${length} ${length}`;
|
|
14
|
+
const strokeDashoffset = length - progress * length;
|
|
15
|
+
return { strokeDasharray, strokeDashoffset };
|
|
16
|
+
};
|
|
17
|
+
exports.evolvePath = evolvePath;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// Copied from: https://github.com/rveciana/svg-path-properties
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.getLength = void 0;
|
|
5
|
+
const construct_1 = require("./helpers/construct");
|
|
6
|
+
/**
|
|
7
|
+
* Gets the length of an SVG path.
|
|
8
|
+
* @param {string} path A valid SVG path
|
|
9
|
+
* @link https://remotion.dev/docs/paths/get-length
|
|
10
|
+
*/
|
|
11
|
+
const getLength = (path) => {
|
|
12
|
+
const constructucted = (0, construct_1.construct)(path);
|
|
13
|
+
return constructucted.length;
|
|
14
|
+
};
|
|
15
|
+
exports.getLength = getLength;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getPartAtLength = void 0;
|
|
4
|
+
const construct_1 = require("./helpers/construct");
|
|
5
|
+
const getPartAtLength = (p, fractionLength) => {
|
|
6
|
+
const constructed = (0, construct_1.construct)(p);
|
|
7
|
+
if (fractionLength < 0) {
|
|
8
|
+
fractionLength = 0;
|
|
9
|
+
}
|
|
10
|
+
else if (fractionLength > constructed.length) {
|
|
11
|
+
fractionLength = constructed.length;
|
|
12
|
+
}
|
|
13
|
+
let i = constructed.partial_lengths.length - 1;
|
|
14
|
+
while (constructed.partial_lengths[i] >= fractionLength && i > 0) {
|
|
15
|
+
i--;
|
|
16
|
+
}
|
|
17
|
+
i++;
|
|
18
|
+
return { fraction: fractionLength - constructed.partial_lengths[i - 1], i };
|
|
19
|
+
};
|
|
20
|
+
exports.getPartAtLength = getPartAtLength;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getParts = void 0;
|
|
4
|
+
const construct_1 = require("./helpers/construct");
|
|
5
|
+
/**
|
|
6
|
+
* Splits a valid SVG path into it's parts.
|
|
7
|
+
* @param {string} path A valid SVG path
|
|
8
|
+
* @link https://remotion.dev/docs/paths/get-parts
|
|
9
|
+
*/
|
|
10
|
+
const getParts = (path) => {
|
|
11
|
+
const parts = [];
|
|
12
|
+
const constructed = (0, construct_1.construct)(path);
|
|
13
|
+
let i = 0;
|
|
14
|
+
for (const fn of constructed.functions) {
|
|
15
|
+
if (!fn) {
|
|
16
|
+
i++;
|
|
17
|
+
continue;
|
|
18
|
+
}
|
|
19
|
+
const properties = {
|
|
20
|
+
start: fn.getPointAtLength(0),
|
|
21
|
+
end: fn.getPointAtLength(constructed.partial_lengths[i] - constructed.partial_lengths[i - 1]),
|
|
22
|
+
length: constructed.partial_lengths[i] - constructed.partial_lengths[i - 1],
|
|
23
|
+
getPointAtLength: fn.getPointAtLength,
|
|
24
|
+
getTangentAtLength: fn.getTangentAtLength,
|
|
25
|
+
};
|
|
26
|
+
i++;
|
|
27
|
+
parts.push(properties);
|
|
28
|
+
}
|
|
29
|
+
return parts;
|
|
30
|
+
};
|
|
31
|
+
exports.getParts = getParts;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Gets the coordinates of a point which is on an SVG path.
|
|
3
|
+
* @param {string} path A valid SVG path
|
|
4
|
+
* @param {number} length The length at which the point should be sampled
|
|
5
|
+
* @link https://remotion.dev/docs/paths/get-point-at-length
|
|
6
|
+
*/
|
|
7
|
+
export declare const getPointAtLength: (path: string, length: number) => import("./helpers/types").Point;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getPointAtLength = void 0;
|
|
4
|
+
const construct_1 = require("./helpers/construct");
|
|
5
|
+
const get_part_at_length_1 = require("./helpers/get-part-at-length");
|
|
6
|
+
/**
|
|
7
|
+
* Gets the coordinates of a point which is on an SVG path.
|
|
8
|
+
* @param {string} path A valid SVG path
|
|
9
|
+
* @param {number} length The length at which the point should be sampled
|
|
10
|
+
* @link https://remotion.dev/docs/paths/get-point-at-length
|
|
11
|
+
*/
|
|
12
|
+
const getPointAtLength = (path, length) => {
|
|
13
|
+
const constructed = (0, construct_1.construct)(path);
|
|
14
|
+
const fractionPart = (0, get_part_at_length_1.getPartAtLength)(path, length);
|
|
15
|
+
const functionAtPart = constructed.functions[fractionPart.i];
|
|
16
|
+
if (functionAtPart) {
|
|
17
|
+
return functionAtPart.getPointAtLength(fractionPart.fraction);
|
|
18
|
+
}
|
|
19
|
+
if (constructed.initial_point) {
|
|
20
|
+
return constructed.initial_point;
|
|
21
|
+
}
|
|
22
|
+
throw new Error('Wrong function at this part.');
|
|
23
|
+
};
|
|
24
|
+
exports.getPointAtLength = getPointAtLength;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getPropertiesAtLength: (p: string, fractionLength: number) => any;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getPropertiesAtLength = void 0;
|
|
4
|
+
const construct_1 = require("./helpers/construct");
|
|
5
|
+
const get_part_at_length_1 = require("./helpers/get-part-at-length");
|
|
6
|
+
const getPropertiesAtLength = (p, fractionLength) => {
|
|
7
|
+
const constructed = (0, construct_1.construct)(p);
|
|
8
|
+
const fractionPart = (0, get_part_at_length_1.getPartAtLength)(p, fractionLength);
|
|
9
|
+
const functionAtPart = constructed.functions[fractionPart.i];
|
|
10
|
+
if (functionAtPart) {
|
|
11
|
+
return functionAtPart.getPropertiesAtLength(fractionPart.fraction);
|
|
12
|
+
}
|
|
13
|
+
if (constructed.initial_point) {
|
|
14
|
+
return {
|
|
15
|
+
x: constructed.initial_point.x,
|
|
16
|
+
y: constructed.initial_point.y,
|
|
17
|
+
tangentX: 0,
|
|
18
|
+
tangentY: 0,
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
throw new Error('Wrong function at this part.');
|
|
22
|
+
};
|
|
23
|
+
exports.getPropertiesAtLength = getPropertiesAtLength;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* https://github.com/Pomax/svg-path-reverse
|
|
3
|
+
*
|
|
4
|
+
* This code is in the public domain, except in jurisdictions that do
|
|
5
|
+
* not recognise the public domain, where this code is MIT licensed.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* This is the function that you'll actually want to
|
|
9
|
+
* make use of, because it lets you reverse individual
|
|
10
|
+
* subpaths in some <path> "d" attribute.
|
|
11
|
+
*/
|
|
12
|
+
export declare const reversePath: (_path: string, _subpath?: number) => string;
|