@remotion/paths 4.0.0-esm.17 → 4.0.0-newpathfunctions.13

package/dist/get-bounding-box.d.ts

@@ -0,0 +1,2 @@
+import type { BoundingBox } from './helpers/types';
+export declare const getBoundingBox: (d: string) => BoundingBox;

package/dist/get-bounding-box.js

@@ -0,0 +1,164 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoundingBox = void 0;
+const normalize_path_1 = require("./normalize-path");
+const unarc_1 = require("./unarc");
+const unshort_1 = require("./unshort");
+// Precision for consider cubic polynom as quadratic one
+const CBEZIER_MINMAX_EPSILON = 0.00000001;
+// https://github.com/kpym/SVGPathy/blob/acd1a50c626b36d81969f6e98e8602e128ba4302/lib/box.js#L89
+function minmaxQ(A) {
+    const min = Math.min(A[0], A[2]);
+    const max = Math.max(A[0], A[2]);
+    if (A[1] > A[0] ? A[2] >= A[1] : A[2] <= A[1]) {
+        // if no extremum in ]0,1[
+        return [min, max];
+    }
+    // check if the extremum E is min or max
+    const E = (A[0] * A[2] - A[1] * A[1]) / (A[0] - 2 * A[1] + A[2]);
+    return E < min ? [E, max] : [min, E];
+}
+// https://github.com/kpym/SVGPathy/blob/acd1a50c626b36d81969f6e98e8602e128ba4302/lib/box.js#L127
+function minmaxC(A) {
+    const K = A[0] - 3 * A[1] + 3 * A[2] - A[3];
+    // if the polynomial is (almost) quadratic and not cubic
+    if (Math.abs(K) < CBEZIER_MINMAX_EPSILON) {
+        if (A[0] === A[3] && A[0] === A[1]) {
+            // no curve, point targeting same location
+            return [A[0], A[3]];
+        }
+        return minmaxQ([
+            A[0],
+            -0.5 * A[0] + 1.5 * A[1],
+            A[0] - 3 * A[1] + 3 * A[2],
+        ]);
+    }
+    // the reduced discriminant of the derivative
+    const T = -A[0] * A[2] +
+        A[0] * A[3] -
+        A[1] * A[2] -
+        A[1] * A[3] +
+        A[1] * A[1] +
+        A[2] * A[2];
+    // if the polynomial is monotone in [0,1]
+    if (T <= 0) {
+        return [Math.min(A[0], A[3]), Math.max(A[0], A[3])];
+    }
+    const S = Math.sqrt(T);
+    // potential extrema
+    let min = Math.min(A[0], A[3]);
+    let max = Math.max(A[0], A[3]);
+    const L = A[0] - 2 * A[1] + A[2];
+    // check local extrema
+    for (let R = (L + S) / K, i = 1; i <= 2; R = (L - S) / K, i++) {
+        if (R > 0 && R < 1) {
+            // if the extrema is for R in [0,1]
+            const Q = A[0] * (1 - R) * (1 - R) * (1 - R) +
+                A[1] * 3 * (1 - R) * (1 - R) * R +
+                A[2] * 3 * (1 - R) * R * R +
+                A[3] * R * R * R;
+            if (Q < min) {
+                min = Q;
+            }
+            if (Q > max) {
+                max = Q;
+            }
+        }
+    }
+    return [min, max];
+}
+const getBoundingBox = (d) => {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    const abs = (0, normalize_path_1.normalizePath)(d);
+    const unarced = (0, unarc_1.unarc)(abs);
+    const unshortened = (0, unshort_1.unshort)(unarced);
+    let x = 0;
+    let y = 0;
+    for (const seg of unshortened) {
+        switch (seg[0]) {
+            case 'M':
+            case 'L': {
+                if (minX > seg[1]) {
+                    minX = seg[1];
+                }
+                if (minY > seg[2]) {
+                    minY = seg[2];
+                }
+                if (maxX < seg[1]) {
+                    maxX = seg[1];
+                }
+                if (maxY < seg[2]) {
+                    maxY = seg[2];
+                }
+                x = seg[1];
+                y = seg[2];
+                break;
+            }
+            case 'V': {
+                if (minY > seg[1]) {
+                    minY = seg[1];
+                }
+                if (maxY < seg[1]) {
+                    maxY = seg[1];
+                }
+                y = seg[1];
+                break;
+            }
+            case 'H': {
+                if (minX > seg[1]) {
+                    minX = seg[1];
+                }
+                if (maxX < seg[1]) {
+                    maxX = seg[1];
+                }
+                x = seg[1];
+                break;
+            }
+            case 'C': {
+                const cxMinMax = minmaxC([x, seg[1], seg[3], seg[5]]);
+                if (minX > cxMinMax[0]) {
+                    minX = cxMinMax[0];
+                }
+                if (maxX < cxMinMax[1]) {
+                    maxX = cxMinMax[1];
+                }
+                const cyMinMax = minmaxC([y, seg[2], seg[4], seg[6]]);
+                if (minY > cyMinMax[0]) {
+                    minY = cyMinMax[0];
+                }
+                if (maxY < cyMinMax[1]) {
+                    maxY = cyMinMax[1];
+                }
+                x = seg[5];
+                y = seg[6];
+                break;
+            }
+            case 'Q': {
+                const qxMinMax = minmaxQ([x, seg[1], seg[3]]);
+                if (minX > qxMinMax[0]) {
+                    minX = qxMinMax[0];
+                }
+                if (maxX < qxMinMax[1]) {
+                    maxX = qxMinMax[1];
+                }
+                const qyMinMax = minmaxQ([y, seg[2], seg[4]]);
+                if (minY > qyMinMax[0]) {
+                    minY = qyMinMax[0];
+                }
+                if (maxY < qyMinMax[1]) {
+                    maxY = qyMinMax[1];
+                }
+                x = seg[3];
+                y = seg[4];
+                break;
+            }
+            default:
+                throw new Error(`Unknown instruction ${seg[0]}`);
+        }
+    }
+    return { x1: minX, y1: minY, x2: maxX, y2: maxY };
+};
+exports.getBoundingBox = getBoundingBox;

package/dist/helpers/types.d.ts

@@ -20,3 +20,9 @@ export interface PointProperties {
     tangentY: number;
 }
 export declare type pathOrders = 'a' | 'c' | 'h' | 'l' | 'm' | 'q' | 's' | 't' | 'v' | 'z';
+export declare type BoundingBox = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 export { evolvePath } from './evolve-path';
 export { extendViewBox } from './extend-viewbox';
+export { getBoundingBox } from './get-bounding-box';
 export { getLength } from './get-length';
 export { getParts } from './get-parts';
 export { getPointAtLength } from './get-point-at-length';
 export { getSubpaths } from './get-subpaths';
 export { getTangentAtLength } from './get-tangent-at-length';
-export { Part } from './helpers/types';
+export { BoundingBox, Part } from './helpers/types';
 export { interpolatePath } from './interpolate-path';
 export { normalizePath } from './normalize-path';
+export { resetPath } from './reset-path';
 export { reversePath } from './reverse-path';
 export { translatePath } from './translate-path';

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translatePath = exports.reversePath = exports.normalizePath = exports.interpolatePath = exports.getTangentAtLength = exports.getSubpaths = exports.getPointAtLength = exports.getParts = exports.getLength = exports.extendViewBox = exports.evolvePath = void 0;
+exports.translatePath = exports.reversePath = exports.resetPath = exports.normalizePath = exports.interpolatePath = exports.getTangentAtLength = exports.getSubpaths = exports.getPointAtLength = exports.getParts = exports.getLength = exports.getBoundingBox = exports.extendViewBox = exports.evolvePath = void 0;
 var evolve_path_1 = require("./evolve-path");
 Object.defineProperty(exports, "evolvePath", { enumerable: true, get: function () { return evolve_path_1.evolvePath; } });
 var extend_viewbox_1 = require("./extend-viewbox");
 Object.defineProperty(exports, "extendViewBox", { enumerable: true, get: function () { return extend_viewbox_1.extendViewBox; } });
+var get_bounding_box_1 = require("./get-bounding-box");
+Object.defineProperty(exports, "getBoundingBox", { enumerable: true, get: function () { return get_bounding_box_1.getBoundingBox; } });
 var get_length_1 = require("./get-length");
 Object.defineProperty(exports, "getLength", { enumerable: true, get: function () { return get_length_1.getLength; } });
 var get_parts_1 = require("./get-parts");
@@ -19,6 +21,8 @@ var interpolate_path_1 = require("./interpolate-path");
 Object.defineProperty(exports, "interpolatePath", { enumerable: true, get: function () { return interpolate_path_1.interpolatePath; } });
 var normalize_path_1 = require("./normalize-path");
 Object.defineProperty(exports, "normalizePath", { enumerable: true, get: function () { return normalize_path_1.normalizePath; } });
+var reset_path_1 = require("./reset-path");
+Object.defineProperty(exports, "resetPath", { enumerable: true, get: function () { return reset_path_1.resetPath; } });
 var reverse_path_1 = require("./reverse-path");
 Object.defineProperty(exports, "reversePath", { enumerable: true, get: function () { return reverse_path_1.reversePath; } });
 var translate_path_1 = require("./translate-path");

package/dist/reset-path.d.ts

@@ -0,0 +1 @@
+export declare const resetPath: (d: string) => string;

package/dist/reset-path.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetPath = void 0;
+const get_bounding_box_1 = require("./get-bounding-box");
+const translate_path_1 = require("./translate-path");
+const resetPath = (d) => {
+    const box = (0, get_bounding_box_1.getBoundingBox)(d);
+    return (0, translate_path_1.translatePath)(d, -box.x1, -box.y1);
+};
+exports.resetPath = resetPath;

package/dist/translate-path.js

@@ -4,7 +4,7 @@ exports.translatePath = void 0;
 const parse_1 = require("./helpers/parse");
 const serialize = (path) => {
     return path.reduce((str, seg) => {
-        return (str + ' ' + seg[0] + ' ' + seg.slice(1).join(',')).trim();
+        return (str + ' ' + seg[0] + ' ' + seg.slice(1).join(' ')).trim();
     }, '');
 };
 const translateSegments = (path, x, y) => {

package/dist/unarc.d.ts

@@ -0,0 +1,2 @@
+import type { Instruction } from './helpers/parse';
+export declare const unarc: (d: string) => Instruction[];

package/dist/unarc.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unarc = void 0;
+const parse_1 = require("./helpers/parse");
+const TAU = Math.PI * 2;
+function approximate_unit_arc(theta1, delta_theta) {
+    const alpha = (4 / 3) * Math.tan(delta_theta / 4);
+    const x1 = Math.cos(theta1);
+    const y1 = Math.sin(theta1);
+    const x2 = Math.cos(theta1 + delta_theta);
+    const y2 = Math.sin(theta1 + delta_theta);
+    return [
+        x1,
+        y1,
+        x1 - y1 * alpha,
+        y1 + x1 * alpha,
+        x2 + y2 * alpha,
+        y2 - x2 * alpha,
+        x2,
+        y2,
+    ];
+}
+function a2c({ x1, y1, x2, y2, fa, fs, rx, ry, phi, }) {
+    const sin_phi = Math.sin((phi * TAU) / 360);
+    const cos_phi = Math.cos((phi * TAU) / 360);
+    // Make sure radii are valid
+    //
+    const x1p = (cos_phi * (x1 - x2)) / 2 + (sin_phi * (y1 - y2)) / 2;
+    const y1p = (-sin_phi * (x1 - x2)) / 2 + (cos_phi * (y1 - y2)) / 2;
+    if (x1p === 0 && y1p === 0) {
+        // we're asked to draw line to itself
+        return [];
+    }
+    if (rx === 0 || ry === 0) {
+        // one of the radii is zero
+        return [];
+    }
+    // Compensate out-of-range radii
+    //
+    rx = Math.abs(rx);
+    ry = Math.abs(ry);
+    const lambda = (x1p * x1p) / (rx * rx) + (y1p * y1p) / (ry * ry);
+    if (lambda > 1) {
+        rx *= Math.sqrt(lambda);
+        ry *= Math.sqrt(lambda);
+    }
+    // Get center parameters (cx, cy, theta1, delta_theta)
+    //
+    const cc = get_arc_center({ x1, y1, x2, y2, fa, fs, rx, ry, sin_phi, cos_phi });
+    const result = [];
+    let theta1 = cc[2];
+    let delta_theta = cc[3];
+    // Split an arc to multiple segments, so each segment
+    // will be less than τ/4 (= 90°)
+    //
+    const segments = Math.max(Math.ceil(Math.abs(delta_theta) / (TAU / 4)), 1);
+    delta_theta /= segments;
+    for (let i = 0; i < segments; i++) {
+        result.push(approximate_unit_arc(theta1, delta_theta));
+        theta1 += delta_theta;
+    }
+    // We have a bezier approximation of a unit circle,
+    // now need to transform back to the original ellipse
+    //
+    return result.map((curve) => {
+        for (let i = 0; i < curve.length; i += 2) {
+            let x = curve[i + 0];
+            let y = curve[i + 1];
+            // scale
+            x *= rx;
+            y *= ry;
+            // rotate
+            const xp = cos_phi * x - sin_phi * y;
+            const yp = sin_phi * x + cos_phi * y;
+            // translate
+            curve[i + 0] = xp + cc[0];
+            curve[i + 1] = yp + cc[1];
+        }
+        return curve;
+    });
+}
+const unarc = (d) => {
+    const segments = (0, parse_1.parsePath)(d);
+    let x = 0;
+    let y = 0;
+    const newSegments = segments.map((s) => {
+        switch (s[0]) {
+            case 'M':
+            case 'L': {
+                x = s[1];
+                y = s[2];
+                return [s];
+            }
+            case 'A': {
+                const nextX = s[6];
+                const nextY = s[7];
+                const new_segments = a2c({
+                    x1: x,
+                    y1: y,
+                    x2: nextX,
+                    y2: nextY,
+                    fa: s[4],
+                    fs: s[5],
+                    rx: s[1],
+                    ry: s[2],
+                    phi: s[3],
+                });
+                // Degenerated arcs can be ignored by renderer, but should not be dropped
+                // to avoid collisions with `S A S` and so on. Replace with empty line.
+                if (new_segments.length === 0) {
+                    return [['L', s[6], s[7]]];
+                }
+                const result = [];
+                new_segments.forEach((_s) => {
+                    result.push(['C', _s[2], _s[3], _s[4], _s[5], _s[6], _s[7]]);
+                });
+                return result;
+            }
+            case 'V': {
+                y = s[1];
+                return [s];
+            }
+            case 'H': {
+                x = s[1];
+                return [s];
+            }
+            case 'C': {
+                x = s[5];
+                y = s[6];
+                return [s];
+            }
+            case 'Q': {
+                x = s[3];
+                y = s[4];
+                return [s];
+            }
+            default:
+                throw new Error(`Unexpected instruction ${s[0]}`);
+        }
+    });
+    const flatted = newSegments.flat(1);
+    return flatted;
+};
+exports.unarc = unarc;
+function get_arc_center({ x1, y1, x2, y2, fa, fs, rx, ry, sin_phi, cos_phi, }) {
+    // Step 1.
+    //
+    // Moving an ellipse so origin will be the middlepoint between our two
+    // points. After that, rotate it to line up ellipse axes with coordinate
+    // axes.
+    //
+    const x1p = (cos_phi * (x1 - x2)) / 2 + (sin_phi * (y1 - y2)) / 2;
+    const y1p = (-sin_phi * (x1 - x2)) / 2 + (cos_phi * (y1 - y2)) / 2;
+    const rx_sq = rx * rx;
+    const ry_sq = ry * ry;
+    const x1p_sq = x1p * x1p;
+    const y1p_sq = y1p * y1p;
+    // Step 2.
+    //
+    // Compute coordinates of the centre of this ellipse (cx', cy')
+    // in the new coordinate system.
+    //
+    let radicant = rx_sq * ry_sq - rx_sq * y1p_sq - ry_sq * x1p_sq;
+    if (radicant < 0) {
+        // due to rounding errors it might be e.g. -1.3877787807814457e-17
+        radicant = 0;
+    }
+    radicant /= rx_sq * y1p_sq + ry_sq * x1p_sq;
+    radicant = Math.sqrt(radicant) * (fa === fs ? -1 : 1);
+    const cxp = ((radicant * rx) / ry) * y1p;
+    const cyp = ((radicant * -ry) / rx) * x1p;
+    // Step 3.
+    //
+    // Transform back to get centre coordinates (cx, cy) in the original
+    // coordinate system.
+    //
+    const cx = cos_phi * cxp - sin_phi * cyp + (x1 + x2) / 2;
+    const cy = sin_phi * cxp + cos_phi * cyp + (y1 + y2) / 2;
+    // Step 4.
+    //
+    // Compute angles (theta1, delta_theta).
+    //
+    const v1x = (x1p - cxp) / rx;
+    const v1y = (y1p - cyp) / ry;
+    const v2x = (-x1p - cxp) / rx;
+    const v2y = (-y1p - cyp) / ry;
+    const theta1 = unit_vector_angle(1, 0, v1x, v1y);
+    let delta_theta = unit_vector_angle(v1x, v1y, v2x, v2y);
+    if (fs === 0 && delta_theta > 0) {
+        delta_theta -= TAU;
+    }
+    if (fs === 1 && delta_theta < 0) {
+        delta_theta += TAU;
+    }
+    return [cx, cy, theta1, delta_theta];
+}
+function unit_vector_angle(ux, uy, vx, vy) {
+    const sign = ux * vy - uy * vx < 0 ? -1 : 1;
+    let dot = ux * vx + uy * vy;
+    // Add this to work with arbitrary vectors:
+    // dot /= Math.sqrt(ux * ux + uy * uy) * Math.sqrt(vx * vx + vy * vy);
+    // rounding errors, e.g. -1.0000000000000002 can screw up this
+    if (dot > 1.0) {
+        dot = 1.0;
+    }
+    if (dot < -1.0) {
+        dot = -1.0;
+    }
+    return sign * Math.acos(dot);
+}

package/dist/unshort.d.ts

@@ -0,0 +1,2 @@
+import type { Instruction } from './helpers/parse';
+export declare const unshort: (segments: Instruction[]) => Instruction[];

package/dist/unshort.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unshort = void 0;
+const unshort = function (segments) {
+    let prevControlX = 0;
+    let prevControlY = 0;
+    let curControlX = 0;
+    let curControlY = 0;
+    let x = 0;
+    let y = 0;
+    const newSegments = segments.slice(0);
+    for (let i = 0; i < newSegments.length; i++) {
+        const s = newSegments[i];
+        const name = s[0];
+        switch (s[0]) {
+            case 'M':
+            case 'L': {
+                x = s[1];
+                y = s[2];
+                break;
+            }
+            case 'V': {
+                y = s[1];
+                newSegments[i] = s;
+                break;
+            }
+            case 'H': {
+                x = s[1];
+                newSegments[i] = s;
+                break;
+            }
+            case 'C': {
+                x = s[5];
+                y = s[6];
+                newSegments[i] = s;
+                break;
+            }
+            case 'Q': {
+                x = s[3];
+                y = s[4];
+                newSegments[i] = s;
+                break;
+            }
+            default:
+                throw new Error('Unexpected command: ' + s[0]);
+        }
+        const nameUC = name.toUpperCase();
+        let isRelative;
+        // First command MUST be M|m, it's safe to skip.
+        // Protect from access to [-1] for sure.
+        if (!i) {
+            continue;
+        }
+        if (nameUC === 'T') {
+            // quadratic curve
+            isRelative = name === 't';
+            const prevSegment = newSegments[i - 1];
+            if (prevSegment[0] === 'Q') {
+                prevControlX = prevSegment[1] - x;
+                prevControlY = prevSegment[2] - y;
+            }
+            else if (prevSegment[0] === 'q') {
+                prevControlX = prevSegment[1] - prevSegment[3];
+                prevControlY = prevSegment[2] - prevSegment[4];
+            }
+            else {
+                prevControlX = 0;
+                prevControlY = 0;
+            }
+            curControlX = -prevControlX;
+            curControlY = -prevControlY;
+            if (!isRelative) {
+                curControlX += x;
+                curControlY += y;
+            }
+            newSegments[i] = [
+                isRelative ? 'q' : 'Q',
+                curControlX,
+                curControlY,
+                s[1],
+                s[2],
+            ];
+        }
+        else if (nameUC === 'S') {
+            // cubic curve
+            isRelative = name === 's';
+            const prevSegment = newSegments[i - 1];
+            if (prevSegment[0] === 'C') {
+                prevControlX = prevSegment[3] - x;
+                prevControlY = prevSegment[4] - y;
+            }
+            else if (prevSegment[0] === 'c') {
+                prevControlX = prevSegment[3] - prevSegment[5];
+                prevControlY = prevSegment[4] - prevSegment[6];
+            }
+            else {
+                prevControlX = 0;
+                prevControlY = 0;
+            }
+            curControlX = -prevControlX;
+            curControlY = -prevControlY;
+            if (!isRelative) {
+                curControlX += x;
+                curControlY += y;
+            }
+            newSegments[i] = [
+                isRelative ? 'c' : 'C',
+                curControlX,
+                curControlY,
+                s[1],
+                s[2],
+                s[3],
+                s[4],
+            ];
+        }
+    }
+    return newSegments;
+};
+exports.unshort = unshort;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/paths",
-	"version": "4.0.0-esm.17+da08690d2",
+	"version": "4.0.0-newpathfunctions.13+40cc970bd",
 	"description": "Utility functions for SVG paths",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -35,5 +35,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "da08690d241e1f5d6dde8a8d89f3379a54ec7681"
+	"gitHead": "40cc970bd20f2c9fde0c1644f1c9f33cd47f3dc7"
 }