@remotion/paths 3.2.11

package/dist/get-reversed-path.js

@@ -0,0 +1,159 @@
+"use strict";
+/**
+ * https://github.com/Pomax/svg-path-reverse
+ *
+ * This code is in the public domain, except in jurisdictions that do
+ * not recognise the public domain, where this code is MIT licensed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reversePath = void 0;
+const normalize_path_1 = require("./normalize-path");
+/**
+ * Normalise an SVG path to absolute coordinates
+ * and full commands, rather than relative coordinates
+ * and/or shortcut commands.
+ */
+/**
+ * Reverse an SVG path.
+ * As long as the input path is normalised, this is actually really
+ * simple to do. As all pathing commands are symmetrical, meaning
+ * that they render the same when you reverse the coordinate order,
+ * the grand trick here is to reverse the path (making sure to keep
+ * coordinates ordered pairwise) and shift the operators left by
+ * one or two coordinate pairs depending on the operator:
+ *
+ *   - Z is removed (after noting it existed),
+ *   - L moves to 2 spots earlier (skipping one coordinate),
+ *   - Q moves to 2 spots earlier (skipping one coordinate),
+ *   - C moves to 4 spots earlier (skipping two coordinates)
+ *       and its arguments get reversed,
+ *   - the path start becomes M.
+ *   - the path end becomes Z iff it was there to begin with.
+ */
+function reverseNormalizedPath(normalized) {
+    const terms = normalized.trim().split(' ');
+    let term;
+    const tlen = terms.length;
+    const tlen1 = tlen - 1;
+    let t;
+    const reversed = [];
+    let x;
+    let y;
+    let pair;
+    let pairs;
+    let shift;
+    const matcher = /[QAZLCM]/;
+    const closed = terms.slice(-1)[0].toUpperCase() === 'Z';
+    for (t = 0; t < tlen; t++) {
+        term = terms[t];
+        // Is this an operator? If it is, run through its
+        // argument list, which we know is fixed length.
+        if (matcher.test(term)) {
+            // Arc processing relies on not-just-coordinates
+            if (term === 'A') {
+                reversed.push(terms[t + 5] === '0' ? '1' : '0');
+                reversed.push(terms[t + 4]);
+                reversed.push(terms[t + 3]);
+                reversed.push(terms[t + 2]);
+                reversed.push(terms[t + 1]);
+                reversed.push(term);
+                reversed.push(terms[t + 7]);
+                reversed.push(terms[t + 6]);
+                t += 7;
+                continue;
+            }
+            // how many coordinate pairs do we need to read,
+            // and by how many pairs should this operator be
+            // shifted left?
+            else if (term === 'C') {
+                pairs = 3;
+                shift = 2;
+            }
+            else if (term === 'Q') {
+                pairs = 2;
+                shift = 1;
+            }
+            else if (term === 'L') {
+                pairs = 1;
+                shift = 1;
+            }
+            else if (term === 'M') {
+                pairs = 1;
+                shift = 0;
+            }
+            else {
+                continue;
+            }
+            // do the argument reading and operator shifting
+            if (pairs === shift) {
+                reversed.push(term);
+            }
+            for (pair = 0; pair < pairs; pair++) {
+                if (pair === shift) {
+                    reversed.push(term);
+                }
+                x = terms[++t];
+                y = terms[++t];
+                reversed.push(y);
+                reversed.push(x);
+            }
+        }
+        // the code has been set up so that every time we
+        // iterate because of the for() operation, the term
+        // we see is a pathing operator, not a number. As
+        // such, if we get to this "else" the path is malformed.
+        else {
+            const pre = terms.slice(Math.max(t - 3, 0), 3).join(' ');
+            const post = terms.slice(t + 1, Math.min(t + 4, tlen1)).join(' ');
+            const range = pre + ' [' + term + '] ' + post;
+            throw new Error('Error while trying to reverse normalized SVG path, at position ' +
+                t +
+                ' (' +
+                range +
+                ').\n' +
+                "Either the path is not normalised, or it's malformed.");
+        }
+    }
+    reversed.push('M');
+    // generating the reversed path string involves
+    // running through our transformed terms in reverse.
+    let revstring = '';
+    const rlen1 = reversed.length - 1;
+    let r;
+    for (r = rlen1; r > 0; r--) {
+        revstring += reversed[r] + ' ';
+    }
+    if (closed)
+        revstring += 'Z';
+    revstring = revstring.replace(/M M/g, 'Z M');
+    return revstring;
+}
+/**
+ * This is the function that you'll actually want to
+ * make use of, because it lets you reverse individual
+ * subpaths in some <path> "d" attribute.
+ */
+const reversePath = (_path, _subpath) => {
+    const subpath = _subpath !== null && _subpath !== void 0 ? _subpath : false;
+    const path = (0, normalize_path_1.normalizePath)(_path);
+    let paths = path.replace(/M/g, '|M').split('|');
+    let revpath;
+    paths.splice(0, 1);
+    if (subpath !== false && subpath >= paths.length) {
+        return path;
+    }
+    if (subpath === false) {
+        paths = paths.map((spath) => {
+            return reverseNormalizedPath(spath.trim());
+        });
+    }
+    else {
+        const spath = paths[subpath];
+        if (spath) {
+            revpath = reverseNormalizedPath(spath.trim());
+            paths[subpath] = revpath;
+        }
+    }
+    return paths.join(' ').replace(/ +/g, ' ').trim();
+};
+exports.reversePath = reversePath;

package/dist/get-tangent-at-length.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Gets tangent values x and y of a point which is on an SVG path
+ * @param {string} path A valid SVG path
+ * @param {number} length The length at which the tangent should be sampled
+ * @link https://remotion.dev/docs/paths/get-tangent-at-length
+ */
+export declare const getTangentAtLength: (path: string, length: number) => import("./helpers/types").Point;

package/dist/get-tangent-at-length.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTangentAtLength = void 0;
+const construct_1 = require("./helpers/construct");
+const get_part_at_length_1 = require("./helpers/get-part-at-length");
+/**
+ * Gets tangent values x and y of a point which is on an SVG path
+ * @param {string} path A valid SVG path
+ * @param {number} length The length at which the tangent should be sampled
+ * @link https://remotion.dev/docs/paths/get-tangent-at-length
+ */
+const getTangentAtLength = (path, length) => {
+    const constructed = (0, construct_1.construct)(path);
+    const fractionPart = (0, get_part_at_length_1.getPartAtLength)(path, length);
+    const functionAtPart = constructed.functions[fractionPart.i];
+    if (functionAtPart) {
+        return functionAtPart.getTangentAtLength(fractionPart.fraction);
+    }
+    if (constructed.initial_point) {
+        return { x: 0, y: 0 };
+    }
+    throw new Error('Wrong function at this part.');
+};
+exports.getTangentAtLength = getTangentAtLength;

package/dist/helpers/arc.d.ts

@@ -0,0 +1,12 @@
+import type { Properties } from './types';
+export declare const makeArc: ({ x0, y0, rx, ry, xAxisRotate, LargeArcFlag, SweepFlag, x1, y1, }: {
+    x0: number;
+    y0: number;
+    rx: number;
+    ry: number;
+    xAxisRotate: number;
+    LargeArcFlag: boolean;
+    SweepFlag: boolean;
+    x1: number;
+    y1: number;
+}) => Properties;

package/dist/helpers/arc.js

@@ -0,0 +1,226 @@
+"use strict";
+// Copied from: https://github.com/rveciana/svg-path-properties
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeArc = void 0;
+const makeArc = ({ x0, y0, rx, ry, xAxisRotate, LargeArcFlag, SweepFlag, x1, y1, }) => {
+    const lengthProperties = approximateArcLengthOfCurve(300, (t) => {
+        return pointOnEllipticalArc({
+            p0: { x: x0, y: y0 },
+            rx,
+            ry,
+            xAxisRotation: xAxisRotate,
+            largeArcFlag: LargeArcFlag,
+            sweepFlag: SweepFlag,
+            p1: { x: x1, y: y1 },
+            t,
+        });
+    });
+    const length = lengthProperties.arcLength;
+    const getTotalLength = () => {
+        return length;
+    };
+    const getPointAtLength = (fractionLength) => {
+        if (fractionLength < 0) {
+            fractionLength = 0;
+        }
+        else if (fractionLength > length) {
+            fractionLength = length;
+        }
+        const position = pointOnEllipticalArc({
+            p0: { x: x0, y: y0 },
+            rx,
+            ry,
+            xAxisRotation: xAxisRotate,
+            largeArcFlag: LargeArcFlag,
+            sweepFlag: SweepFlag,
+            p1: { x: x1, y: y1 },
+            t: fractionLength / length,
+        });
+        return { x: position.x, y: position.y };
+    };
+    const getTangentAtLength = (fractionLength) => {
+        if (fractionLength < 0) {
+            fractionLength = 0;
+        }
+        else if (fractionLength > length) {
+            fractionLength = length;
+        }
+        const point_dist = 0.05; // needs testing
+        const p1 = getPointAtLength(fractionLength);
+        let p2;
+        if (fractionLength < 0) {
+            fractionLength = 0;
+        }
+        else if (fractionLength > length) {
+            fractionLength = length;
+        }
+        if (fractionLength < length - point_dist) {
+            p2 = getPointAtLength(fractionLength + point_dist);
+        }
+        else {
+            p2 = getPointAtLength(fractionLength - point_dist);
+        }
+        const xDist = p2.x - p1.x;
+        const yDist = p2.y - p1.y;
+        const dist = Math.sqrt(xDist * xDist + yDist * yDist);
+        if (fractionLength < length - point_dist) {
+            return { x: -xDist / dist, y: -yDist / dist };
+        }
+        return { x: xDist / dist, y: yDist / dist };
+    };
+    return {
+        getPointAtLength,
+        getTangentAtLength,
+        getTotalLength,
+    };
+};
+exports.makeArc = makeArc;
+const pointOnEllipticalArc = ({ p0, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, p1, t, }) => {
+    // In accordance to: http://www.w3.org/TR/SVG/implnote.html#ArcOutOfRangeParameters
+    rx = Math.abs(rx);
+    ry = Math.abs(ry);
+    xAxisRotation = mod(xAxisRotation, 360);
+    const xAxisRotationRadians = toRadians(xAxisRotation);
+    // If the endpoints are identical, then this is equivalent to omitting the elliptical arc segment entirely.
+    if (p0.x === p1.x && p0.y === p1.y) {
+        return { x: p0.x, y: p0.y, ellipticalArcAngle: 0 }; // Check if angle is correct
+    }
+    // If rx = 0 or ry = 0 then this arc is treated as a straight line segment joining the endpoints.
+    if (rx === 0 || ry === 0) {
+        // return this.pointOnLine(p0, p1, t);
+        return { x: 0, y: 0, ellipticalArcAngle: 0 }; // Check if angle is correct
+    }
+    // Following "Conversion from endpoint to center parameterization"
+    // http://www.w3.org/TR/SVG/implnote.html#ArcConversionEndpointToCenter
+    // Step #1: Compute transformedPoint
+    const dx = (p0.x - p1.x) / 2;
+    const dy = (p0.y - p1.y) / 2;
+    const transformedPoint = {
+        x: Math.cos(xAxisRotationRadians) * dx + Math.sin(xAxisRotationRadians) * dy,
+        y: -Math.sin(xAxisRotationRadians) * dx +
+            Math.cos(xAxisRotationRadians) * dy,
+    };
+    // Ensure radii are large enough
+    const radiiCheck = transformedPoint.x ** 2 / rx ** 2 + transformedPoint.y ** 2 / ry ** 2;
+    if (radiiCheck > 1) {
+        rx *= Math.sqrt(radiiCheck);
+        ry *= Math.sqrt(radiiCheck);
+    }
+    // Step #2: Compute transformedCenter
+    const cSquareNumerator = rx ** 2 * ry ** 2 -
+        rx ** 2 * transformedPoint.y ** 2 -
+        ry ** 2 * transformedPoint.x ** 2;
+    const cSquareRootDenom = rx ** 2 * transformedPoint.y ** 2 + ry ** 2 * transformedPoint.x ** 2;
+    let cRadicand = cSquareNumerator / cSquareRootDenom;
+    // Make sure this never drops below zero because of precision
+    cRadicand = cRadicand < 0 ? 0 : cRadicand;
+    const cCoef = (largeArcFlag === sweepFlag ? -1 : 1) * Math.sqrt(cRadicand);
+    const transformedCenter = {
+        x: cCoef * ((rx * transformedPoint.y) / ry),
+        y: cCoef * (-(ry * transformedPoint.x) / rx),
+    };
+    // Step #3: Compute center
+    const center = {
+        x: Math.cos(xAxisRotationRadians) * transformedCenter.x -
+            Math.sin(xAxisRotationRadians) * transformedCenter.y +
+            (p0.x + p1.x) / 2,
+        y: Math.sin(xAxisRotationRadians) * transformedCenter.x +
+            Math.cos(xAxisRotationRadians) * transformedCenter.y +
+            (p0.y + p1.y) / 2,
+    };
+    // Step #4: Compute start/sweep angles
+    // Start angle of the elliptical arc prior to the stretch and rotate operations.
+    // Difference between the start and end angles
+    const startVector = {
+        x: (transformedPoint.x - transformedCenter.x) / rx,
+        y: (transformedPoint.y - transformedCenter.y) / ry,
+    };
+    const startAngle = angleBetween({
+        x: 1,
+        y: 0,
+    }, startVector);
+    const endVector = {
+        x: (-transformedPoint.x - transformedCenter.x) / rx,
+        y: (-transformedPoint.y - transformedCenter.y) / ry,
+    };
+    let sweepAngle = angleBetween(startVector, endVector);
+    if (!sweepFlag && sweepAngle > 0) {
+        sweepAngle -= 2 * Math.PI;
+    }
+    else if (sweepFlag && sweepAngle < 0) {
+        sweepAngle += 2 * Math.PI;
+    }
+    // We use % instead of `mod(..)` because we want it to be -360deg to 360deg(but actually in radians)
+    sweepAngle %= 2 * Math.PI;
+    // From http://www.w3.org/TR/SVG/implnote.html#ArcParameterizationAlternatives
+    const angle = startAngle + sweepAngle * t;
+    const ellipseComponentX = rx * Math.cos(angle);
+    const ellipseComponentY = ry * Math.sin(angle);
+    const point = {
+        x: Math.cos(xAxisRotationRadians) * ellipseComponentX -
+            Math.sin(xAxisRotationRadians) * ellipseComponentY +
+            center.x,
+        y: Math.sin(xAxisRotationRadians) * ellipseComponentX +
+            Math.cos(xAxisRotationRadians) * ellipseComponentY +
+            center.y,
+        ellipticalArcStartAngle: startAngle,
+        ellipticalArcEndAngle: startAngle + sweepAngle,
+        ellipticalArcAngle: angle,
+        ellipticalArcCenter: center,
+        resultantRx: rx,
+        resultantRy: ry,
+    };
+    return point;
+};
+const approximateArcLengthOfCurve = (resolution, pointOnCurveFunc) => {
+    // Resolution is the number of segments we use
+    resolution = resolution ? resolution : 500;
+    let resultantArcLength = 0;
+    const arcLengthMap = [];
+    const approximationLines = [];
+    let prevPoint = pointOnCurveFunc(0);
+    let nextPoint;
+    for (let i = 0; i < resolution; i++) {
+        const t = clamp(i * (1 / resolution), 0, 1);
+        nextPoint = pointOnCurveFunc(t);
+        resultantArcLength += distance(prevPoint, nextPoint);
+        approximationLines.push([prevPoint, nextPoint]);
+        arcLengthMap.push({
+            t,
+            arcLength: resultantArcLength,
+        });
+        prevPoint = nextPoint;
+    }
+    // Last stretch to the endpoint
+    nextPoint = pointOnCurveFunc(1);
+    approximationLines.push([prevPoint, nextPoint]);
+    resultantArcLength += distance(prevPoint, nextPoint);
+    arcLengthMap.push({
+        t: 1,
+        arcLength: resultantArcLength,
+    });
+    return {
+        arcLength: resultantArcLength,
+        arcLengthMap,
+        approximationLines,
+    };
+};
+const mod = (x, m) => {
+    return ((x % m) + m) % m;
+};
+const toRadians = (angle) => {
+    return angle * (Math.PI / 180);
+};
+const distance = (p0, p1) => {
+    return Math.sqrt((p1.x - p0.x) ** 2 + (p1.y - p0.y) ** 2);
+};
+const clamp = (val, min, max) => {
+    return Math.min(Math.max(val, min), max);
+};
+const angleBetween = (v0, v1) => {
+    const p = v0.x * v1.x + v0.y * v1.y;
+    const n = Math.sqrt((v0.x ** 2 + v0.y ** 2) * (v1.x ** 2 + v1.y ** 2));
+    const sign = v0.x * v1.y - v0.y * v1.x < 0 ? -1 : 1;
+    const angle = sign * Math.acos(p / n);
+    return angle;
+};

package/dist/helpers/bezier-functions.d.ts

@@ -0,0 +1,11 @@
+import type { Point } from './types';
+export declare const cubicPoint: (xs: number[], ys: number[], t: number) => Point;
+export declare const cubicDerivative: (xs: number[], ys: number[], t: number) => Point;
+export declare const getCubicArcLength: (xs: number[], ys: number[], t: number) => number;
+export declare const quadraticPoint: (xs: number[], ys: number[], t: number) => Point;
+export declare const getQuadraticArcLength: (xs: number[], ys: number[], t: number) => number;
+export declare const quadraticDerivative: (xs: number[], ys: number[], t: number) => {
+    x: number;
+    y: number;
+};
+export declare const t2length: (length: number, totalLength: number, func: (t: number) => number) => number;

package/dist/helpers/bezier-functions.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.t2length = exports.quadraticDerivative = exports.getQuadraticArcLength = exports.quadraticPoint = exports.getCubicArcLength = exports.cubicDerivative = exports.cubicPoint = void 0;
+const bezier_values_1 = require("./bezier-values");
+const cubicPoint = (xs, ys, t) => {
+    const x = (1 - t) * (1 - t) * (1 - t) * xs[0] +
+        3 * (1 - t) * (1 - t) * t * xs[1] +
+        3 * (1 - t) * t * t * xs[2] +
+        t * t * t * xs[3];
+    const y = (1 - t) * (1 - t) * (1 - t) * ys[0] +
+        3 * (1 - t) * (1 - t) * t * ys[1] +
+        3 * (1 - t) * t * t * ys[2] +
+        t * t * t * ys[3];
+    return { x, y };
+};
+exports.cubicPoint = cubicPoint;
+const cubicDerivative = (xs, ys, t) => {
+    const derivative = (0, exports.quadraticPoint)([3 * (xs[1] - xs[0]), 3 * (xs[2] - xs[1]), 3 * (xs[3] - xs[2])], [3 * (ys[1] - ys[0]), 3 * (ys[2] - ys[1]), 3 * (ys[3] - ys[2])], t);
+    return derivative;
+};
+exports.cubicDerivative = cubicDerivative;
+const getCubicArcLength = (xs, ys, t) => {
+    let correctedT;
+    const n = 20;
+    const z = t / 2;
+    let sum = 0;
+    for (let i = 0; i < n; i++) {
+        correctedT = z * bezier_values_1.tValues[n][i] + z;
+        sum += bezier_values_1.cValues[n][i] * bFunc(xs, ys, correctedT);
+    }
+    return z * sum;
+};
+exports.getCubicArcLength = getCubicArcLength;
+const quadraticPoint = (xs, ys, t) => {
+    const x = (1 - t) * (1 - t) * xs[0] + 2 * (1 - t) * t * xs[1] + t * t * xs[2];
+    const y = (1 - t) * (1 - t) * ys[0] + 2 * (1 - t) * t * ys[1] + t * t * ys[2];
+    return { x, y };
+};
+exports.quadraticPoint = quadraticPoint;
+const getQuadraticArcLength = (xs, ys, t) => {
+    if (t === undefined) {
+        t = 1;
+    }
+    const ax = xs[0] - 2 * xs[1] + xs[2];
+    const ay = ys[0] - 2 * ys[1] + ys[2];
+    const bx = 2 * xs[1] - 2 * xs[0];
+    const by = 2 * ys[1] - 2 * ys[0];
+    const A = 4 * (ax * ax + ay * ay);
+    const B = 4 * (ax * bx + ay * by);
+    const C = bx * bx + by * by;
+    if (A === 0) {
+        return t * Math.sqrt((xs[2] - xs[0]) ** 2 + (ys[2] - ys[0]) ** 2);
+    }
+    const b = B / (2 * A);
+    const c = C / A;
+    const u = t + b;
+    const k = c - b * b;
+    const uuk = u * u + k > 0 ? Math.sqrt(u * u + k) : 0;
+    const bbk = b * b + k > 0 ? Math.sqrt(b * b + k) : 0;
+    const term = b + Math.sqrt(b * b + k) === 0
+        ? 0
+        : k * Math.log(Math.abs((u + uuk) / (b + bbk)));
+    return (Math.sqrt(A) / 2) * (u * uuk - b * bbk + term);
+};
+exports.getQuadraticArcLength = getQuadraticArcLength;
+const quadraticDerivative = (xs, ys, t) => {
+    return {
+        x: (1 - t) * 2 * (xs[1] - xs[0]) + t * 2 * (xs[2] - xs[1]),
+        y: (1 - t) * 2 * (ys[1] - ys[0]) + t * 2 * (ys[2] - ys[1]),
+    };
+};
+exports.quadraticDerivative = quadraticDerivative;
+function bFunc(xs, ys, t) {
+    const xbase = getDerivative(1, t, xs);
+    const ybase = getDerivative(1, t, ys);
+    const combined = xbase * xbase + ybase * ybase;
+    return Math.sqrt(combined);
+}
+/**
+ * Compute the curve derivative (hodograph) at t.
+ */
+const getDerivative = (derivative, t, vs) => {
+    // the derivative of any 't'-less function is zero.
+    const n = vs.length - 1;
+    let value;
+    if (n === 0) {
+        return 0;
+    }
+    // direct values? compute!
+    if (derivative === 0) {
+        value = 0;
+        for (let k = 0; k <= n; k++) {
+            value += bezier_values_1.binomialCoefficients[n][k] * (1 - t) ** (n - k) * t ** k * vs[k];
+        }
+        return value;
+    }
+    // Still some derivative? go down one order, then try
+    // for the lower order curve's.
+    const _vs = new Array(n);
+    for (let k = 0; k < n; k++) {
+        _vs[k] = n * (vs[k + 1] - vs[k]);
+    }
+    return getDerivative(derivative - 1, t, _vs);
+};
+const t2length = (length, totalLength, func) => {
+    let error = 1;
+    let t = length / totalLength;
+    let step = (length - func(t)) / totalLength;
+    let numIterations = 0;
+    while (error > 0.001) {
+        const increasedTLength = func(t + step);
+        const increasedTError = Math.abs(length - increasedTLength) / totalLength;
+        if (increasedTError < error) {
+            error = increasedTError;
+            t += step;
+        }
+        else {
+            const decreasedTLength = func(t - step);
+            const decreasedTError = Math.abs(length - decreasedTLength) / totalLength;
+            if (decreasedTError < error) {
+                error = decreasedTError;
+                t -= step;
+            }
+            else {
+                step /= 2;
+            }
+        }
+        numIterations++;
+        if (numIterations > 500) {
+            break;
+        }
+    }
+    return t;
+};
+exports.t2length = t2length;

package/dist/helpers/bezier-values.d.ts

@@ -0,0 +1,3 @@
+export declare const tValues: number[][];
+export declare const cValues: number[][];
+export declare const binomialCoefficients: number[][];