@remotion/paths 3.2.11

package/dist/helpers/bezier.d.ts

@@ -0,0 +1,26 @@
+import type { Point } from './types';
+export declare const makeBezier: ({ ax, ay, bx, by, cx, cy, dx, dy, }: {
+    ax: number;
+    ay: number;
+    bx: number;
+    by: number;
+    cx: number;
+    cy: number;
+    dx: number | null;
+    dy: number | null;
+}) => {
+    getPointAtLength: (len: number) => Point;
+    getPropertiesAtLength: (len: number) => {
+        x: number;
+        y: number;
+        tangentX: number;
+        tangentY: number;
+    };
+    getTangentAtLength: (len: number) => Point;
+    getTotalLength: () => number;
+    getC: () => {
+        x: number;
+        y: number;
+    };
+    getD: () => Point;
+};

package/dist/helpers/bezier.js

@@ -0,0 +1,82 @@
+"use strict";
+// Copied from: https://github.com/rveciana/svg-path-properties
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeBezier = void 0;
+const bezier_functions_1 = require("./bezier-functions");
+const makeBezier = ({ ax, ay, bx, by, cx, cy, dx, dy, }) => {
+    let d;
+    let getArcLength;
+    let getPoint;
+    let getDerivative;
+    const a = { x: ax, y: ay };
+    const b = { x: bx, y: by };
+    const c = { x: cx, y: cy };
+    if (dx !== null && dy !== null) {
+        getArcLength = bezier_functions_1.getCubicArcLength;
+        getPoint = bezier_functions_1.cubicPoint;
+        getDerivative = bezier_functions_1.cubicDerivative;
+        d = { x: dx, y: dy };
+    }
+    else {
+        getArcLength = bezier_functions_1.getQuadraticArcLength;
+        getPoint = bezier_functions_1.quadraticPoint;
+        getDerivative = bezier_functions_1.quadraticDerivative;
+        d = { x: 0, y: 0 };
+    }
+    const length = getArcLength([a.x, b.x, c.x, d.x], [a.y, b.y, c.y, d.y], 1);
+    const getTotalLength = () => {
+        return length;
+    };
+    const getPointAtLength = (len) => {
+        const xs = [a.x, b.x, c.x, d.x];
+        const xy = [a.y, b.y, c.y, d.y];
+        const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
+        return getPoint(xs, xy, t);
+    };
+    const getTangentAtLength = (len) => {
+        const xs = [a.x, b.x, c.x, d.x];
+        const xy = [a.y, b.y, c.y, d.y];
+        const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
+        const derivative = getDerivative(xs, xy, t);
+        const mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
+        let tangent;
+        if (mdl > 0) {
+            tangent = { x: derivative.x / mdl, y: derivative.y / mdl };
+        }
+        else {
+            tangent = { x: 0, y: 0 };
+        }
+        return tangent;
+    };
+    const getPropertiesAtLength = (len) => {
+        const xs = [a.x, b.x, c.x, d.x];
+        const xy = [a.y, b.y, c.y, d.y];
+        const t = (0, bezier_functions_1.t2length)(len, len, (i) => getArcLength(xs, xy, i));
+        const derivative = getDerivative(xs, xy, t);
+        const mdl = Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
+        let tangent;
+        if (mdl > 0) {
+            tangent = { x: derivative.x / mdl, y: derivative.y / mdl };
+        }
+        else {
+            tangent = { x: 0, y: 0 };
+        }
+        const point = getPoint(xs, xy, t);
+        return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
+    };
+    const getC = () => {
+        return c;
+    };
+    const getD = () => {
+        return d;
+    };
+    return {
+        getPointAtLength,
+        getPropertiesAtLength,
+        getTangentAtLength,
+        getTotalLength,
+        getC,
+        getD,
+    };
+};
+exports.makeBezier = makeBezier;

package/dist/helpers/construct.d.ts

@@ -0,0 +1,7 @@
+import type { Point, Properties } from './types';
+export declare const construct: (string: string) => {
+    initial_point: Point | null;
+    length: number;
+    partial_lengths: number[];
+    functions: (Properties | null)[];
+};

package/dist/helpers/construct.js

@@ -0,0 +1,309 @@
+"use strict";
+// Copied from: https://github.com/rveciana/svg-path-properties
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.construct = void 0;
+const arc_1 = require("./arc");
+const bezier_1 = require("./bezier");
+const linear_1 = require("./linear");
+const parse_1 = __importDefault(require("./parse"));
+const construct = (string) => {
+    let length = 0;
+    const partial_lengths = [];
+    const functions = [];
+    let initial_point = null;
+    const parsed = (0, parse_1.default)(string);
+    let cur = [0, 0];
+    let prev_point = [0, 0];
+    let curve;
+    let ringStart = [0, 0];
+    for (let i = 0; i < parsed.length; i++) {
+        // moveTo
+        if (parsed[i][0] === 'M') {
+            cur = [parsed[i][1], parsed[i][2]];
+            ringStart = [cur[0], cur[1]];
+            functions.push(null);
+            if (i === 0) {
+                initial_point = { x: parsed[i][1], y: parsed[i][2] };
+            }
+        }
+        else if (parsed[i][0] === 'm') {
+            cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
+            ringStart = [cur[0], cur[1]];
+            functions.push(null);
+            // lineTo
+        }
+        else if (parsed[i][0] === 'L') {
+            length += Math.sqrt((cur[0] - parsed[i][1]) ** 2 + (cur[1] - parsed[i][2]) ** 2);
+            functions.push((0, linear_1.makeLinearPosition)(cur[0], parsed[i][1], cur[1], parsed[i][2]));
+            cur = [parsed[i][1], parsed[i][2]];
+        }
+        else if (parsed[i][0] === 'l') {
+            length += Math.sqrt(parsed[i][1] ** 2 + parsed[i][2] ** 2);
+            functions.push((0, linear_1.makeLinearPosition)(cur[0], parsed[i][1] + cur[0], cur[1], parsed[i][2] + cur[1]));
+            cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
+        }
+        else if (parsed[i][0] === 'H') {
+            length += Math.abs(cur[0] - parsed[i][1]);
+            functions.push((0, linear_1.makeLinearPosition)(cur[0], parsed[i][1], cur[1], cur[1]));
+            cur[0] = parsed[i][1];
+        }
+        else if (parsed[i][0] === 'h') {
+            length += Math.abs(parsed[i][1]);
+            functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0] + parsed[i][1], cur[1], cur[1]));
+            cur[0] = parsed[i][1] + cur[0];
+        }
+        else if (parsed[i][0] === 'V') {
+            length += Math.abs(cur[1] - parsed[i][1]);
+            functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], parsed[i][1]));
+            cur[1] = parsed[i][1];
+        }
+        else if (parsed[i][0] === 'v') {
+            length += Math.abs(parsed[i][1]);
+            functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], cur[1] + parsed[i][1]));
+            cur[1] = parsed[i][1] + cur[1];
+            // Close path
+        }
+        else if (parsed[i][0] === 'z' || parsed[i][0] === 'Z') {
+            length += Math.sqrt((ringStart[0] - cur[0]) ** 2 + (ringStart[1] - cur[1]) ** 2);
+            functions.push((0, linear_1.makeLinearPosition)(cur[0], ringStart[0], cur[1], ringStart[1]));
+            cur = [ringStart[0], ringStart[1]];
+            // Cubic Bezier curves
+        }
+        else if (parsed[i][0] === 'C') {
+            curve = (0, bezier_1.makeBezier)({
+                ax: cur[0],
+                ay: cur[1],
+                bx: parsed[i][1],
+                by: parsed[i][2],
+                cx: parsed[i][3],
+                cy: parsed[i][4],
+                dx: parsed[i][5],
+                dy: parsed[i][6],
+            });
+            length += curve.getTotalLength();
+            cur = [parsed[i][5], parsed[i][6]];
+            functions.push(curve);
+        }
+        else if (parsed[i][0] === 'c') {
+            curve = (0, bezier_1.makeBezier)({
+                ax: cur[0],
+                ay: cur[1],
+                bx: cur[0] + parsed[i][1],
+                by: cur[1] + parsed[i][2],
+                cx: cur[0] + parsed[i][3],
+                cy: cur[1] + parsed[i][4],
+                dx: cur[0] + parsed[i][5],
+                dy: cur[1] + parsed[i][6],
+            });
+            if (curve.getTotalLength() > 0) {
+                length += curve.getTotalLength();
+                functions.push(curve);
+                cur = [parsed[i][5] + cur[0], parsed[i][6] + cur[1]];
+            }
+            else {
+                functions.push((0, linear_1.makeLinearPosition)(cur[0], cur[0], cur[1], cur[1]));
+            }
+        }
+        else if (parsed[i][0] === 'S') {
+            if (i > 0 && ['C', 'c', 'S', 's'].indexOf(parsed[i - 1][0]) > -1) {
+                if (curve) {
+                    const c = curve.getC();
+                    curve = (0, bezier_1.makeBezier)({
+                        ax: cur[0],
+                        ay: cur[1],
+                        bx: 2 * cur[0] - c.x,
+                        by: 2 * cur[1] - c.y,
+                        cx: parsed[i][1],
+                        cy: parsed[i][2],
+                        dx: parsed[i][3],
+                        dy: parsed[i][4],
+                    });
+                }
+            }
+            else {
+                curve = (0, bezier_1.makeBezier)({
+                    ax: cur[0],
+                    ay: cur[1],
+                    bx: cur[0],
+                    by: cur[1],
+                    cx: parsed[i][1],
+                    cy: parsed[i][2],
+                    dx: parsed[i][3],
+                    dy: parsed[i][4],
+                });
+            }
+            if (curve) {
+                length += curve.getTotalLength();
+                cur = [parsed[i][3], parsed[i][4]];
+                functions.push(curve);
+            }
+        }
+        else if (parsed[i][0] === 's') {
+            // 240 225
+            if (i > 0 && ['C', 'c', 'S', 's'].indexOf(parsed[i - 1][0]) > -1) {
+                if (curve) {
+                    const c = curve.getC();
+                    const d = curve.getD();
+                    curve = (0, bezier_1.makeBezier)({
+                        ax: cur[0],
+                        ay: cur[1],
+                        bx: cur[0] + d.x - c.x,
+                        by: cur[1] + d.y - c.y,
+                        cx: cur[0] + parsed[i][1],
+                        cy: cur[1] + parsed[i][2],
+                        dx: cur[0] + parsed[i][3],
+                        dy: cur[1] + parsed[i][4],
+                    });
+                }
+            }
+            else {
+                curve = (0, bezier_1.makeBezier)({
+                    ax: cur[0],
+                    ay: cur[1],
+                    bx: cur[0],
+                    by: cur[1],
+                    cx: cur[0] + parsed[i][1],
+                    cy: cur[1] + parsed[i][2],
+                    dx: cur[0] + parsed[i][3],
+                    dy: cur[1] + parsed[i][4],
+                });
+            }
+            if (curve) {
+                length += curve.getTotalLength();
+                cur = [parsed[i][3] + cur[0], parsed[i][4] + cur[1]];
+                functions.push(curve);
+            }
+        }
+        // Quadratic Bezier curves
+        else if (parsed[i][0] === 'Q') {
+            if (cur[0] === parsed[i][1] && cur[1] === parsed[i][2]) {
+                const linearCurve = (0, linear_1.makeLinearPosition)(parsed[i][1], parsed[i][3], parsed[i][2], parsed[i][4]);
+                length += linearCurve.getTotalLength();
+                functions.push(linearCurve);
+            }
+            else {
+                curve = (0, bezier_1.makeBezier)({
+                    ax: cur[0],
+                    ay: cur[1],
+                    bx: parsed[i][1],
+                    by: parsed[i][2],
+                    cx: parsed[i][3],
+                    cy: parsed[i][4],
+                    dx: null,
+                    dy: null,
+                });
+                length += curve.getTotalLength();
+                functions.push(curve);
+            }
+            cur = [parsed[i][3], parsed[i][4]];
+            prev_point = [parsed[i][1], parsed[i][2]];
+        }
+        else if (parsed[i][0] === 'q') {
+            if (parsed[i][1] === 0 && parsed[i][2] === 0) {
+                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]);
+                length += linearCurve.getTotalLength();
+                functions.push(linearCurve);
+            }
+            else {
+                curve = (0, bezier_1.makeBezier)({
+                    ax: cur[0],
+                    ay: cur[1],
+                    bx: cur[0] + parsed[i][1],
+                    by: cur[1] + parsed[i][2],
+                    cx: cur[0] + parsed[i][3],
+                    cy: cur[1] + parsed[i][4],
+                    dx: null,
+                    dy: null,
+                });
+                length += curve.getTotalLength();
+                functions.push(curve);
+            }
+            prev_point = [cur[0] + parsed[i][1], cur[1] + parsed[i][2]];
+            cur = [parsed[i][3] + cur[0], parsed[i][4] + cur[1]];
+        }
+        else if (parsed[i][0] === 'T') {
+            if (i > 0 && ['Q', 'q', 'T', 't'].indexOf(parsed[i - 1][0]) > -1) {
+                curve = (0, bezier_1.makeBezier)({
+                    ax: cur[0],
+                    ay: cur[1],
+                    bx: 2 * cur[0] - prev_point[0],
+                    by: 2 * cur[1] - prev_point[1],
+                    cx: parsed[i][1],
+                    cy: parsed[i][2],
+                    dx: null,
+                    dy: null,
+                });
+                functions.push(curve);
+                length += curve.getTotalLength();
+            }
+            else {
+                const linearCurve = (0, linear_1.makeLinearPosition)(cur[0], parsed[i][1], cur[1], parsed[i][2]);
+                functions.push(linearCurve);
+                length += linearCurve.getTotalLength();
+            }
+            prev_point = [2 * cur[0] - prev_point[0], 2 * cur[1] - prev_point[1]];
+            cur = [parsed[i][1], parsed[i][2]];
+        }
+        else if (parsed[i][0] === 't') {
+            if (i > 0 && ['Q', 'q', 'T', 't'].indexOf(parsed[i - 1][0]) > -1) {
+                curve = (0, bezier_1.makeBezier)({
+                    ax: cur[0],
+                    ay: cur[1],
+                    bx: 2 * cur[0] - prev_point[0],
+                    by: 2 * cur[1] - prev_point[1],
+                    cx: cur[0] + parsed[i][1],
+                    cy: cur[1] + parsed[i][2],
+                    dx: null,
+                    dy: null,
+                });
+                length += curve.getTotalLength();
+                functions.push(curve);
+            }
+            else {
+                const linearCurve = (0, linear_1.makeLinearPosition)(cur[0], cur[0] + parsed[i][1], cur[1], cur[1] + parsed[i][2]);
+                length += linearCurve.getTotalLength();
+                functions.push(linearCurve);
+            }
+            prev_point = [2 * cur[0] - prev_point[0], 2 * cur[1] - prev_point[1]];
+            cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
+        }
+        else if (parsed[i][0] === 'A') {
+            const arcCurve = (0, arc_1.makeArc)({
+                x0: cur[0],
+                y0: cur[1],
+                rx: parsed[i][1],
+                ry: parsed[i][2],
+                xAxisRotate: parsed[i][3],
+                LargeArcFlag: parsed[i][4] === 1,
+                SweepFlag: parsed[i][5] === 1,
+                x1: parsed[i][6],
+                y1: parsed[i][7],
+            });
+            length += arcCurve.getTotalLength();
+            cur = [parsed[i][6], parsed[i][7]];
+            functions.push(arcCurve);
+        }
+        else if (parsed[i][0] === 'a') {
+            const arcCurve = (0, arc_1.makeArc)({
+                x0: cur[0],
+                y0: cur[1],
+                rx: parsed[i][1],
+                ry: parsed[i][2],
+                xAxisRotate: parsed[i][3],
+                LargeArcFlag: parsed[i][4] === 1,
+                SweepFlag: parsed[i][5] === 1,
+                x1: cur[0] + parsed[i][6],
+                y1: cur[1] + parsed[i][7],
+            });
+            length += arcCurve.getTotalLength();
+            cur = [cur[0] + parsed[i][6], cur[1] + parsed[i][7]];
+            functions.push(arcCurve);
+        }
+        partial_lengths.push(length);
+    }
+    return { initial_point, length, partial_lengths, functions };
+};
+exports.construct = construct;

package/dist/helpers/get-part-at-length.d.ts

@@ -0,0 +1,4 @@
+export declare const getPartAtLength: (p: string, fractionLength: number) => {
+    fraction: number;
+    i: number;
+};

package/dist/helpers/get-part-at-length.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPartAtLength = void 0;
+const construct_1 = require("./construct");
+const getPartAtLength = (p, fractionLength) => {
+    const constructed = (0, construct_1.construct)(p);
+    if (fractionLength < 0) {
+        fractionLength = 0;
+    }
+    else if (fractionLength > constructed.length) {
+        fractionLength = constructed.length;
+    }
+    let i = constructed.partial_lengths.length - 1;
+    while (constructed.partial_lengths[i] >= fractionLength && i > 0) {
+        i--;
+    }
+    i++;
+    return { fraction: fractionLength - constructed.partial_lengths[i - 1], i };
+};
+exports.getPartAtLength = getPartAtLength;

package/dist/helpers/linear.d.ts

@@ -0,0 +1,7 @@
+import type { Point, PointProperties } from './types';
+export declare const makeLinearPosition: (x0: number, x1: number, y0: number, y1: number) => {
+    getTotalLength: () => number;
+    getPointAtLength: (pos: number) => Point;
+    getTangentAtLength: () => Point;
+    getPropertiesAtLength: () => PointProperties;
+};

package/dist/helpers/linear.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeLinearPosition = void 0;
+const makeLinearPosition = (x0, x1, y0, y1) => {
+    const getTotalLength = () => {
+        return Math.sqrt((x0 - x1) ** 2 + (y0 - y1) ** 2);
+    };
+    const getPointAtLength = (pos) => {
+        let fraction = pos / Math.sqrt((x0 - x1) ** 2 + (y0 - y1) ** 2);
+        fraction = Number.isNaN(fraction) ? 1 : fraction;
+        const newDeltaX = (x1 - x0) * fraction;
+        const newDeltaY = (y1 - y0) * fraction;
+        return { x: x0 + newDeltaX, y: y0 + newDeltaY };
+    };
+    const getTangentAtLength = () => {
+        const module = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
+        return { x: (x1 - x0) / module, y: (y1 - y0) / module };
+    };
+    const getPropertiesAtLength = () => {
+        const tangent = getTangentAtLength();
+        return { tangentX: tangent.x, tangentY: tangent.y };
+    };
+    return {
+        getTotalLength,
+        getPointAtLength,
+        getTangentAtLength,
+        getPropertiesAtLength,
+    };
+};
+exports.makeLinearPosition = makeLinearPosition;

package/dist/helpers/parse.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (path: string) => [string, ...number[]][];
+export default _default;

package/dist/helpers/parse.js

@@ -0,0 +1,49 @@
+"use strict";
+// Copied from: https://github.com/rveciana/svg-path-properties
+Object.defineProperty(exports, "__esModule", { value: true });
+const length = {
+    a: 7,
+    c: 6,
+    h: 1,
+    l: 2,
+    m: 2,
+    q: 4,
+    s: 4,
+    t: 2,
+    v: 1,
+    z: 0,
+};
+const segmentRegExp = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
+const numberRegExp = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;
+exports.default = (path) => {
+    const segments = (path && path.length > 0 ? path : 'M0,0').match(segmentRegExp);
+    if (!segments) {
+        throw new Error(`No path elements found in string ${path}`);
+    }
+    return segments.reduce((segmentsArray, segmentString) => {
+        let command = segmentString.charAt(0);
+        let type = command.toLowerCase();
+        const args = parseValues(segmentString.substr(1));
+        // overloaded moveTo
+        if (type === 'm' && args.length > 2) {
+            segmentsArray.push([command, ...args.splice(0, 2)]);
+            type = 'l';
+            command = command === 'm' ? 'l' : 'L';
+        }
+        while (args.length >= 0) {
+            if (args.length === length[type]) {
+                segmentsArray.push([command, ...args.splice(0, length[type])]);
+                break;
+            }
+            if (args.length < length[type]) {
+                throw new Error(`Malformed path data: "${command}" must have ${length[type]} elements and has ${args.length}: ${segmentString}`);
+            }
+            segmentsArray.push([command, ...args.splice(0, length[type])]);
+        }
+        return segmentsArray;
+    }, []);
+};
+const parseValues = (args) => {
+    const numbers = args.match(numberRegExp);
+    return numbers ? numbers.map(Number) : [];
+};

package/dist/helpers/split-curve.d.ts

@@ -0,0 +1,47 @@
+/**
+ * List of params for each command type in a path `d` attribute
+ */
+export declare const typeMap: {
+    M: string[];
+    L: string[];
+    H: string[];
+    V: string[];
+    C: string[];
+    S: string[];
+    Q: string[];
+    T: string[];
+    A: string[];
+    Z: never[];
+    m: string[];
+    l: string[];
+    h: string[];
+    v: string[];
+    c: string[];
+    s: string[];
+    q: string[];
+    t: string[];
+    a: string[];
+    z: never[];
+};
+export declare type Command = {
+    x2?: number | undefined;
+    y2?: number | undefined;
+    x1?: number | undefined;
+    y1?: number | undefined;
+    x?: number;
+    y?: number;
+    xAxisRotate?: number;
+    largeArcFlag?: boolean;
+    sweepFlag?: boolean;
+    type: keyof typeof typeMap;
+};
+/**
+ * Convert command objects to arrays of points, run de Casteljau's algorithm on it
+ * to split into to the desired number of segments.
+ *
+ * @param {Object} commandStart The start command object
+ * @param {Object} commandEnd The end command object
+ * @param {Number} segmentCount The number of segments to create
+ * @return {Object[]} An array of commands representing the segments in sequence
+ */
+export declare const splitCurve: (commandStart: Command, commandEnd: Command, segmentCount: number) => Command[];