@remotion/paths 4.0.49 → 4.0.51

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.
@@ -221,6 +221,7 @@ const makeArc = ({ x0, y0, rx, ry, xAxisRotate, LargeArcFlag, SweepFlag, x1, y1,
221
221
  getPointAtLength,
222
222
  getTangentAtLength,
223
223
  getTotalLength,
224
+ type: 'arc',
224
225
  };
225
226
  };
226
227
  exports.makeArc = makeArc;
@@ -1,6 +1,10 @@
1
1
  import type { Point } from './types';
2
2
  export declare const cubicPoint: (xs: number[], ys: number[], t: number) => Point;
3
- export declare const getCubicArcLength: (xs: number[], ys: number[], t: number) => number;
3
+ export declare const getCubicArcLength: ({ sx, sy, t, }: {
4
+ sx: number[];
5
+ sy: number[];
6
+ t: number;
7
+ }) => number;
4
8
  export declare const quadraticPoint: (xs: number[], ys: number[], t: number) => Point;
5
9
  export declare const cubicDerivative: (xs: number[], ys: number[], t: number) => Point;
6
10
  export declare const getQuadraticArcLength: (xs: number[], ys: number[], t: number) => number;
@@ -8,4 +12,8 @@ export declare const quadraticDerivative: (xs: number[], ys: number[], t: number
8
12
  x: number;
9
13
  y: number;
10
14
  };
11
- export declare const t2length: (length: number, totalLength: number, func: (t: number) => number) => number;
15
+ export declare const t2length: ({ length, totalLength, func, }: {
16
+ length: number;
17
+ totalLength: number;
18
+ func: (t: number) => number;
19
+ }) => number;
@@ -46,14 +46,14 @@ function bFunc(xs, ys, t) {
46
46
  const combined = xbase * xbase + ybase * ybase;
47
47
  return Math.sqrt(combined);
48
48
  }
49
- const getCubicArcLength = (xs, ys, t) => {
49
+ const getCubicArcLength = ({ sx, sy, t, }) => {
50
50
  let correctedT;
51
51
  const n = 20;
52
52
  const z = t / 2;
53
53
  let sum = 0;
54
54
  for (let i = 0; i < n; i++) {
55
55
  correctedT = z * bezier_values_1.tValues[n][i] + z;
56
- sum += bezier_values_1.cValues[n][i] * bFunc(xs, ys, correctedT);
56
+ sum += bezier_values_1.cValues[n][i] * bFunc(sx, sy, correctedT);
57
57
  }
58
58
  return z * sum;
59
59
  };
@@ -102,7 +102,7 @@ const quadraticDerivative = (xs, ys, t) => {
102
102
  };
103
103
  };
104
104
  exports.quadraticDerivative = quadraticDerivative;
105
- const t2length = (length, totalLength, func) => {
105
+ const t2length = ({ length, totalLength, func, }) => {
106
106
  let error = 1;
107
107
  let t = length / totalLength;
108
108
  let step = (length - func(t)) / totalLength;
@@ -1,26 +1,25 @@
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
- };
1
+ import type { Point, Properties } from './types';
2
+ export declare const makeQuadratic: ({ startX, startY, cpx, cpy, x, y, }: {
3
+ startX: number;
4
+ startY: number;
5
+ cpx: number;
6
+ cpy: number;
7
+ x: number;
8
+ y: number;
9
+ }) => Properties & {
10
+ getC: () => Point;
11
+ getD: () => Point;
12
+ };
13
+ export declare const makeCubic: ({ startX, startY, cp1x, cp1y, cp2x, cp2y, x, y, }: {
14
+ startX: number;
15
+ startY: number;
16
+ cp1x: number;
17
+ cp1y: number;
18
+ cp2x: number;
19
+ cp2y: number;
20
+ x: number;
21
+ y: number;
22
+ }) => Properties & {
23
+ getC: () => Point;
25
24
  getD: () => Point;
26
25
  };
@@ -1,43 +1,35 @@
1
1
  "use strict";
2
2
  // Copied from: https://github.com/rveciana/svg-path-properties
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.makeBezier = void 0;
4
+ exports.makeCubic = exports.makeQuadratic = void 0;
5
5
  const bezier_functions_1 = require("./bezier-functions");
6
- const makeBezier = ({ ax, ay, bx, by, cx, cy, dx, dy, }) => {
7
- let d;
8
- let getArcLength;
9
- let getPoint;
10
- let getDerivative;
11
- const a = { x: ax, y: ay };
12
- const b = { x: bx, y: by };
13
- const c = { x: cx, y: cy };
14
- if (dx !== null && dy !== null) {
15
- getArcLength = bezier_functions_1.getCubicArcLength;
16
- getPoint = bezier_functions_1.cubicPoint;
17
- getDerivative = bezier_functions_1.cubicDerivative;
18
- d = { x: dx, y: dy };
19
- }
20
- else {
21
- getArcLength = bezier_functions_1.getQuadraticArcLength;
22
- getPoint = bezier_functions_1.quadraticPoint;
23
- getDerivative = bezier_functions_1.quadraticDerivative;
24
- d = { x: 0, y: 0 };
25
- }
26
- const length = getArcLength([a.x, b.x, c.x, d.x], [a.y, b.y, c.y, d.y], 1);
6
+ const makeQuadratic = ({ startX, startY, cpx, cpy, x, y, }) => {
7
+ const a = { x: startX, y: startY };
8
+ const b = { x: cpx, y: cpy };
9
+ const c = { x, y };
10
+ const length = (0, bezier_functions_1.getQuadraticArcLength)([a.x, b.x, c.x, 0], [a.y, b.y, c.y, 0], 1);
27
11
  const getTotalLength = () => {
28
12
  return length;
29
13
  };
30
14
  const getPointAtLength = (len) => {
31
- const xs = [a.x, b.x, c.x, d.x];
32
- const xy = [a.y, b.y, c.y, d.y];
33
- const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
34
- return getPoint(xs, xy, t);
15
+ const xs = [a.x, b.x, c.x, 0];
16
+ const xy = [a.y, b.y, c.y, 0];
17
+ const t = (0, bezier_functions_1.t2length)({
18
+ length: len,
19
+ totalLength: length,
20
+ func: (i) => (0, bezier_functions_1.getQuadraticArcLength)(xs, xy, i),
21
+ });
22
+ return (0, bezier_functions_1.quadraticPoint)(xs, xy, t);
35
23
  };
36
24
  const getTangentAtLength = (len) => {
37
- const xs = [a.x, b.x, c.x, d.x];
38
- const xy = [a.y, b.y, c.y, d.y];
39
- const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
40
- const derivative = getDerivative(xs, xy, t);
25
+ const xs = [a.x, b.x, c.x, 0];
26
+ const xy = [a.y, b.y, c.y, 0];
27
+ const t = (0, bezier_functions_1.t2length)({
28
+ length: len,
29
+ totalLength: length,
30
+ func: (i) => (0, bezier_functions_1.getQuadraticArcLength)(xs, xy, i),
31
+ });
32
+ const derivative = (0, bezier_functions_1.quadraticDerivative)(xs, xy, t);
41
33
  const mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
42
34
  let tangent;
43
35
  if (mdl > 0) {
@@ -48,11 +40,53 @@ const makeBezier = ({ ax, ay, bx, by, cx, cy, dx, dy, }) => {
48
40
  }
49
41
  return tangent;
50
42
  };
51
- const getPropertiesAtLength = (len) => {
43
+ const getC = () => {
44
+ return c;
45
+ };
46
+ return {
47
+ getPointAtLength,
48
+ getTangentAtLength,
49
+ getTotalLength,
50
+ getC,
51
+ type: 'quadratic-bezier',
52
+ getD: () => ({ x: 0, y: 0 }),
53
+ };
54
+ };
55
+ exports.makeQuadratic = makeQuadratic;
56
+ const makeCubic = ({ startX, startY, cp1x, cp1y, cp2x, cp2y, x, y, }) => {
57
+ const a = { x: startX, y: startY };
58
+ const b = { x: cp1x, y: cp1y };
59
+ const c = { x: cp2x, y: cp2y };
60
+ const d = { x, y };
61
+ const length = (0, bezier_functions_1.getCubicArcLength)({
62
+ sx: [a.x, b.x, c.x, d.x],
63
+ sy: [a.y, b.y, c.y, d.y],
64
+ t: 1,
65
+ });
66
+ const getTotalLength = () => {
67
+ return length;
68
+ };
69
+ const getPointAtLength = (len) => {
70
+ const sx = [a.x, b.x, c.x, d.x];
71
+ const sy = [a.y, b.y, c.y, d.y];
72
+ const t = (0, bezier_functions_1.t2length)({
73
+ length: len,
74
+ totalLength: length,
75
+ func: (i) => {
76
+ return (0, bezier_functions_1.getCubicArcLength)({ sx, sy, t: i });
77
+ },
78
+ });
79
+ return (0, bezier_functions_1.cubicPoint)(sx, sy, t);
80
+ };
81
+ const getTangentAtLength = (len) => {
52
82
  const xs = [a.x, b.x, c.x, d.x];
53
83
  const xy = [a.y, b.y, c.y, d.y];
54
- const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
55
- const derivative = getDerivative(xs, xy, t);
84
+ const t = (0, bezier_functions_1.t2length)({
85
+ length: len,
86
+ totalLength: length,
87
+ func: (i) => (0, bezier_functions_1.getCubicArcLength)({ sx: xs, sy: xy, t: i }),
88
+ });
89
+ const derivative = (0, bezier_functions_1.cubicDerivative)(xs, xy, t);
56
90
  const mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
57
91
  let tangent;
58
92
  if (mdl > 0) {
@@ -61,8 +95,7 @@ const makeBezier = ({ ax, ay, bx, by, cx, cy, dx, dy, }) => {
61
95
  else {
62
96
  tangent = { x: 0, y: 0 };
63
97
  }
64
- const point = getPoint(xs, xy, t);
65
- return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
98
+ return tangent;
66
99
  };
67
100
  const getC = () => {
68
101
  return c;
@@ -72,11 +105,11 @@ const makeBezier = ({ ax, ay, bx, by, cx, cy, dx, dy, }) => {
72
105
  };
73
106
  return {
74
107
  getPointAtLength,
75
- getPropertiesAtLength,
76
108
  getTangentAtLength,
77
109
  getTotalLength,
78
110
  getC,
79
111
  getD,
112
+ type: 'cubic-bezier',
80
113
  };
81
114
  };
82
- exports.makeBezier = makeBezier;
115
+ exports.makeCubic = makeCubic;
@@ -113,30 +113,30 @@ const constructFromInstructions = (instructions) => {
113
113
  // Cubic Bezier curves
114
114
  }
115
115
  else if (instruction.type === 'C') {
116
- curve = (0, bezier_1.makeBezier)({
117
- ax: cur[0],
118
- ay: cur[1],
119
- bx: instruction.cp1x,
120
- by: instruction.cp1y,
121
- cx: instruction.cp2x,
122
- cy: instruction.cp2y,
123
- dx: instruction.x,
124
- dy: instruction.y,
116
+ curve = (0, bezier_1.makeCubic)({
117
+ startX: cur[0],
118
+ startY: cur[1],
119
+ cp1x: instruction.cp1x,
120
+ cp1y: instruction.cp1y,
121
+ cp2x: instruction.cp2x,
122
+ cp2y: instruction.cp2y,
123
+ x: instruction.x,
124
+ y: instruction.y,
125
125
  });
126
126
  length += curve.getTotalLength();
127
127
  cur = [instruction.x, instruction.y];
128
128
  functions.push(curve);
129
129
  }
130
130
  else if (instruction.type === 'c') {
131
- curve = (0, bezier_1.makeBezier)({
132
- ax: cur[0],
133
- ay: cur[1],
134
- bx: cur[0] + instruction.cp1dx,
135
- by: cur[1] + instruction.cp1dy,
136
- cx: cur[0] + instruction.cp2dx,
137
- cy: cur[1] + instruction.cp2dy,
138
- dx: cur[0] + instruction.dx,
139
- dy: cur[1] + instruction.dy,
131
+ curve = (0, bezier_1.makeCubic)({
132
+ startX: cur[0],
133
+ startY: cur[1],
134
+ cp1x: cur[0] + instruction.cp1dx,
135
+ cp1y: cur[1] + instruction.cp1dy,
136
+ cp2x: cur[0] + instruction.cp2dx,
137
+ cp2y: cur[1] + instruction.cp2dy,
138
+ x: cur[0] + instruction.dx,
139
+ y: cur[1] + instruction.dy,
140
140
  });
141
141
  if (curve.getTotalLength() > 0) {
142
142
  length += curve.getTotalLength();
@@ -156,28 +156,28 @@ const constructFromInstructions = (instructions) => {
156
156
  if (i > 0 && prevWasCurve) {
157
157
  if (curve) {
158
158
  const c = curve.getC();
159
- curve = (0, bezier_1.makeBezier)({
160
- ax: cur[0],
161
- ay: cur[1],
162
- bx: 2 * cur[0] - c.x,
163
- by: 2 * cur[1] - c.y,
164
- cx: instruction.cpx,
165
- cy: instruction.cpy,
166
- dx: instruction.x,
167
- dy: instruction.y,
159
+ curve = (0, bezier_1.makeCubic)({
160
+ startX: cur[0],
161
+ startY: cur[1],
162
+ cp1x: 2 * cur[0] - c.x,
163
+ cp1y: 2 * cur[1] - c.y,
164
+ cp2x: instruction.cpx,
165
+ cp2y: instruction.cpy,
166
+ x: instruction.x,
167
+ y: instruction.y,
168
168
  });
169
169
  }
170
170
  }
171
171
  else {
172
- curve = (0, bezier_1.makeBezier)({
173
- ax: cur[0],
174
- ay: cur[1],
175
- bx: cur[0],
176
- by: cur[1],
177
- cx: instruction.cpx,
178
- cy: instruction.cpy,
179
- dx: instruction.x,
180
- dy: instruction.y,
172
+ curve = (0, bezier_1.makeCubic)({
173
+ startX: cur[0],
174
+ startY: cur[1],
175
+ cp1x: cur[0],
176
+ cp1y: cur[1],
177
+ cp2x: instruction.cpx,
178
+ cp2y: instruction.cpy,
179
+ x: instruction.x,
180
+ y: instruction.y,
181
181
  });
182
182
  }
183
183
  if (curve) {
@@ -196,28 +196,28 @@ const constructFromInstructions = (instructions) => {
196
196
  if (curve) {
197
197
  const c = curve.getC();
198
198
  const d = curve.getD();
199
- curve = (0, bezier_1.makeBezier)({
200
- ax: cur[0],
201
- ay: cur[1],
202
- bx: cur[0] + d.x - c.x,
203
- by: cur[1] + d.y - c.y,
204
- cx: cur[0] + instruction.cpdx,
205
- cy: cur[1] + instruction.cpdy,
206
- dx: cur[0] + instruction.dx,
207
- dy: cur[1] + instruction.dy,
199
+ curve = (0, bezier_1.makeCubic)({
200
+ startX: cur[0],
201
+ startY: cur[1],
202
+ cp1x: cur[0] + d.x - c.x,
203
+ cp1y: cur[1] + d.y - c.y,
204
+ cp2x: cur[0] + instruction.cpdx,
205
+ cp2y: cur[1] + instruction.cpdy,
206
+ x: cur[0] + instruction.dx,
207
+ y: cur[1] + instruction.dy,
208
208
  });
209
209
  }
210
210
  }
211
211
  else {
212
- curve = (0, bezier_1.makeBezier)({
213
- ax: cur[0],
214
- ay: cur[1],
215
- bx: cur[0],
216
- by: cur[1],
217
- cx: cur[0] + instruction.cpdx,
218
- cy: cur[1] + instruction.cpdy,
219
- dx: cur[0] + instruction.dx,
220
- dy: cur[1] + instruction.dy,
212
+ curve = (0, bezier_1.makeCubic)({
213
+ startX: cur[0],
214
+ startY: cur[1],
215
+ cp1x: cur[0],
216
+ cp1y: cur[1],
217
+ cp2x: cur[0] + instruction.cpdx,
218
+ cp2y: cur[1] + instruction.cpdy,
219
+ x: cur[0] + instruction.dx,
220
+ y: cur[1] + instruction.dy,
221
221
  });
222
222
  }
223
223
  if (curve) {
@@ -239,15 +239,13 @@ const constructFromInstructions = (instructions) => {
239
239
  functions.push(linearCurve);
240
240
  }
241
241
  else {
242
- curve = (0, bezier_1.makeBezier)({
243
- ax: cur[0],
244
- ay: cur[1],
245
- bx: instruction.cpx,
246
- by: instruction.cpy,
247
- cx: instruction.x,
248
- cy: instruction.y,
249
- dx: null,
250
- dy: null,
242
+ curve = (0, bezier_1.makeQuadratic)({
243
+ startX: cur[0],
244
+ startY: cur[1],
245
+ cpx: instruction.cpx,
246
+ cpy: instruction.cpy,
247
+ x: instruction.x,
248
+ y: instruction.y,
251
249
  });
252
250
  length += curve.getTotalLength();
253
251
  functions.push(curve);
@@ -267,15 +265,13 @@ const constructFromInstructions = (instructions) => {
267
265
  functions.push(linearCurve);
268
266
  }
269
267
  else {
270
- curve = (0, bezier_1.makeBezier)({
271
- ax: cur[0],
272
- ay: cur[1],
273
- bx: cur[0] + instruction.cpdx,
274
- by: cur[1] + instruction.cpdy,
275
- cx: cur[0] + instruction.dx,
276
- cy: cur[1] + instruction.dy,
277
- dx: null,
278
- dy: null,
268
+ curve = (0, bezier_1.makeQuadratic)({
269
+ startX: cur[0],
270
+ startY: cur[1],
271
+ cpx: cur[0] + instruction.cpdx,
272
+ cpy: cur[1] + instruction.cpdy,
273
+ x: cur[0] + instruction.dx,
274
+ y: cur[1] + instruction.dy,
279
275
  });
280
276
  length += curve.getTotalLength();
281
277
  functions.push(curve);
@@ -290,15 +286,13 @@ const constructFromInstructions = (instructions) => {
290
286
  prev.type === 'T' ||
291
287
  prev.type === 't';
292
288
  if (i > 0 && prevWasQ) {
293
- curve = (0, bezier_1.makeBezier)({
294
- ax: cur[0],
295
- ay: cur[1],
296
- bx: 2 * cur[0] - prev_point[0],
297
- by: 2 * cur[1] - prev_point[1],
298
- cx: instruction.x,
299
- cy: instruction.y,
300
- dx: null,
301
- dy: null,
289
+ curve = (0, bezier_1.makeQuadratic)({
290
+ startX: cur[0],
291
+ startY: cur[1],
292
+ cpx: 2 * cur[0] - prev_point[0],
293
+ cpy: 2 * cur[1] - prev_point[1],
294
+ x: instruction.x,
295
+ y: instruction.y,
302
296
  });
303
297
  functions.push(curve);
304
298
  length += curve.getTotalLength();
@@ -323,15 +317,13 @@ const constructFromInstructions = (instructions) => {
323
317
  prev.type === 'T' ||
324
318
  prev.type === 't';
325
319
  if (i > 0 && prevWasQ) {
326
- curve = (0, bezier_1.makeBezier)({
327
- ax: cur[0],
328
- ay: cur[1],
329
- bx: 2 * cur[0] - prev_point[0],
330
- by: 2 * cur[1] - prev_point[1],
331
- cx: cur[0] + instruction.dx,
332
- cy: cur[1] + instruction.dy,
333
- dx: null,
334
- dy: null,
320
+ curve = (0, bezier_1.makeQuadratic)({
321
+ startX: cur[0],
322
+ startY: cur[1],
323
+ cpx: 2 * cur[0] - prev_point[0],
324
+ cpy: 2 * cur[1] - prev_point[1],
325
+ x: cur[0] + instruction.dx,
326
+ y: cur[1] + instruction.dy,
335
327
  });
336
328
  length += curve.getTotalLength();
337
329
  functions.push(curve);
@@ -1,12 +1,7 @@
1
- import type { Point, PointProperties } from './types';
1
+ import type { Properties } from './types';
2
2
  export declare const makeLinearPosition: ({ x0, x1, y0, y1, }: {
3
3
  x0: number;
4
4
  x1: number;
5
5
  y0: number;
6
6
  y1: number;
7
- }) => {
8
- getTotalLength: () => number;
9
- getPointAtLength: (pos: number) => Point;
10
- getTangentAtLength: () => Point;
11
- getPropertiesAtLength: () => PointProperties;
12
- };
7
+ }) => Properties;
@@ -16,15 +16,11 @@ const makeLinearPosition = ({ x0, x1, y0, y1, }) => {
16
16
  const module = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
17
17
  return { x: (x1 - x0) / module, y: (y1 - y0) / module };
18
18
  };
19
- const getPropertiesAtLength = () => {
20
- const tangent = getTangentAtLength();
21
- return { tangentX: tangent.x, tangentY: tangent.y };
22
- };
23
19
  return {
24
20
  getTotalLength,
25
21
  getPointAtLength,
26
22
  getTangentAtLength,
27
- getPropertiesAtLength,
23
+ type: 'linear',
28
24
  };
29
25
  };
30
26
  exports.makeLinearPosition = makeLinearPosition;
@@ -2,6 +2,7 @@ export interface Properties {
2
2
  getTotalLength(): number;
3
3
  getPointAtLength(pos: number): Point;
4
4
  getTangentAtLength(pos: number): Point;
5
+ type: string;
5
6
  }
6
7
  export interface Part {
7
8
  start: Point;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/paths",
3
- "version": "4.0.49",
3
+ "version": "4.0.51",
4
4
  "description": "Utility functions for SVG paths",
5
5
  "main": "dist/index.js",
6
6
  "sideEffects": false,