@remotion/paths 4.0.0-webhook.27 → 4.1.0-alpha1

package/LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2022 JonnyBurger
+Copyright (c) 2023 JonnyBurger
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -9,10 +9,9 @@ A package providing utility functions for dealing with SVG paths. This package c
 
 No dependencies are needed, meaning this package can be used independently of Remotion.
 
-## API
+## API
 
 - [`getLength()`](https://remotion.dev/docs/paths/get-length)
-- [`getParts()`](https://remotion.dev/docs/paths/get-parts)
 - [`getPointAtLength()`](https://remotion.dev/docs/paths/get-point-at-length)
 - [`getTangentAtLength()`](https://remotion.dev/docs/paths/get-tangent-at-length)
 - [`reversePath()`](https://remotion.dev/docs/paths/reverse-path)

package/dist/evolve-path.d.ts

@@ -1,8 +1,8 @@
 /**
- * Animates an SVG from being invisible to it's full length.
+ * @description Animates an SVG from being invisible to it's full length.
  * @param {string} path A valid SVG path
  * @param {number} progress The first valid SVG path
- * @link https://remotion.dev/docs/paths/evolve-path
+ * @see [Documentation](https://remotion.dev/docs/paths/evolve-path)
  */
 export declare const evolvePath: (progress: number, path: string) => {
     strokeDasharray: string;

package/dist/evolve-path.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.evolvePath = void 0;
 const get_length_1 = require("./get-length");
 /**
- * Animates an SVG from being invisible to it's full length.
+ * @description Animates an SVG from being invisible to it's full length.
  * @param {string} path A valid SVG path
  * @param {number} progress The first valid SVG path
- * @link https://remotion.dev/docs/paths/evolve-path
+ * @see [Documentation](https://remotion.dev/docs/paths/evolve-path)
  */
 const evolvePath = (progress, path) => {
     const length = (0, get_length_1.getLength)(path);

package/dist/extend-viewbox.d.ts

@@ -1,6 +1,6 @@
 /**
- * Extends a viewbox in all directions by a scale factor.
+ * @description Extends a viewbox in all directions by a scale factor.
  * @param {string} currentViewBox A valid SVG viewBox
- * @link https://remotion.dev/docs/paths/extend-viewbox
+ * @see [Documentation](https://remotion.dev/docs/paths/extend-viewbox)
  */
 export declare const extendViewBox: (currentViewBox: string, scale: number) => string;

package/dist/extend-viewbox.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extendViewBox = void 0;
 /**
- * Extends a viewbox in all directions by a scale factor.
+ * @description Extends a viewbox in all directions by a scale factor.
  * @param {string} currentViewBox A valid SVG viewBox
- * @link https://remotion.dev/docs/paths/extend-viewbox
+ * @see [Documentation](https://remotion.dev/docs/paths/extend-viewbox)
  */
 const extendViewBox = (currentViewBox, scale) => {
     const relativeScale = scale - 1;

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

@@ -0,0 +1,8 @@
+import type { BoundingBox, ReducedInstruction } from './helpers/types';
+/**
+ * @description Returns the bounding box of the given path, suitable for calculating the viewBox value that you need to pass to an SVG.
+ * @param {string} d
+ * @see [Documentation](https://www.remotion.dev/docs/paths/get-bounding-box)
+ */
+export declare const getBoundingBox: (d: string) => BoundingBox;
+export declare const getBoundingBoxFromInstructions: (instructions: ReducedInstruction[]) => BoundingBox;

package/dist/get-bounding-box.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoundingBoxFromInstructions = exports.getBoundingBox = void 0;
+const remove_a_s_t_curves_1 = require("./helpers/remove-a-s-t-curves");
+const normalize_path_1 = require("./normalize-path");
+const parse_path_1 = require("./parse-path");
+// 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];
+}
+/**
+ * @description Returns the bounding box of the given path, suitable for calculating the viewBox value that you need to pass to an SVG.
+ * @param {string} d
+ * @see [Documentation](https://www.remotion.dev/docs/paths/get-bounding-box)
+ */
+const getBoundingBox = (d) => {
+    const parsed = (0, parse_path_1.parsePath)(d);
+    const unarced = (0, remove_a_s_t_curves_1.removeATSHVInstructions)((0, normalize_path_1.normalizeInstructions)(parsed));
+    return (0, exports.getBoundingBoxFromInstructions)(unarced);
+};
+exports.getBoundingBox = getBoundingBox;
+const getBoundingBoxFromInstructions = (instructions) => {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let x = 0;
+    let y = 0;
+    let lastMoveX = 0;
+    let lastMoveY = 0;
+    for (const seg of instructions) {
+        switch (seg.type) {
+            case 'M': {
+                lastMoveX = seg.x;
+                lastMoveY = seg.y;
+                if (minX > seg.x) {
+                    minX = seg.x;
+                }
+                if (minY > seg.y) {
+                    minY = seg.y;
+                }
+                if (maxX < seg.x) {
+                    maxX = seg.x;
+                }
+                if (maxY < seg.y) {
+                    maxY = seg.y;
+                }
+                x = seg.x;
+                y = seg.y;
+                break;
+            }
+            case 'L': {
+                if (minX > seg.x) {
+                    minX = seg.x;
+                }
+                if (minY > seg.y) {
+                    minY = seg.y;
+                }
+                if (maxX < seg.x) {
+                    maxX = seg.x;
+                }
+                if (maxY < seg.y) {
+                    maxY = seg.y;
+                }
+                x = seg.x;
+                y = seg.y;
+                break;
+            }
+            case 'C': {
+                const cxMinMax = minmaxC([x, seg.cp1x, seg.cp2x, seg.x]);
+                if (minX > cxMinMax[0]) {
+                    minX = cxMinMax[0];
+                }
+                if (maxX < cxMinMax[1]) {
+                    maxX = cxMinMax[1];
+                }
+                const cyMinMax = minmaxC([y, seg.cp1y, seg.cp2y, seg.y]);
+                if (minY > cyMinMax[0]) {
+                    minY = cyMinMax[0];
+                }
+                if (maxY < cyMinMax[1]) {
+                    maxY = cyMinMax[1];
+                }
+                x = seg.x;
+                y = seg.y;
+                break;
+            }
+            case 'Q': {
+                const qxMinMax = minmaxQ([x, seg.cpx, seg.x]);
+                if (minX > qxMinMax[0]) {
+                    minX = qxMinMax[0];
+                }
+                if (maxX < qxMinMax[1]) {
+                    maxX = qxMinMax[1];
+                }
+                const qyMinMax = minmaxQ([y, seg.cpy, seg.y]);
+                if (minY > qyMinMax[0]) {
+                    minY = qyMinMax[0];
+                }
+                if (maxY < qyMinMax[1]) {
+                    maxY = qyMinMax[1];
+                }
+                x = seg.x;
+                y = seg.y;
+                break;
+            }
+            case 'Z':
+                x = lastMoveX;
+                y = lastMoveY;
+                break;
+            default:
+                // @ts-expect-error
+                throw new Error(`Unknown instruction ${seg.type}`);
+        }
+    }
+    return {
+        x1: minX,
+        y1: minY,
+        x2: maxX,
+        y2: maxY,
+        viewBox: `${minX} ${minY} ${maxX - minX} ${maxY - minY}`,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+};
+exports.getBoundingBoxFromInstructions = getBoundingBoxFromInstructions;

package/dist/get-length.d.ts

@@ -1,6 +1,6 @@
 /**
- * Gets the length of an SVG path.
+ * @description Gets the length of an SVG path.
  * @param {string} path A valid SVG path
- * @link https://remotion.dev/docs/paths/get-length
+ * @see [Documentation](https://remotion.dev/docs/paths/get-length)
  */
 export declare const getLength: (path: string) => number;

package/dist/get-length.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLength = void 0;
 const construct_1 = require("./helpers/construct");
 /**
- * Gets the length of an SVG path.
+ * @description Gets the length of an SVG path.
  * @param {string} path A valid SVG path
- * @link https://remotion.dev/docs/paths/get-length
+ * @see [Documentation](https://remotion.dev/docs/paths/get-length)
  */
 const getLength = (path) => {
     const constructucted = (0, construct_1.construct)(path);

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

@@ -1,7 +1,7 @@
 /**
- * Gets the coordinates of a point which is on an SVG path.
+ * @description Gets the coordinates of a point which is on an SVG path.
  * @param {string} path A valid SVG path
  * @param {number} length The length at which the point should be sampled
- * @link https://remotion.dev/docs/paths/get-point-at-length
+ * @see [Documentation](https://remotion.dev/docs/paths/get-point-at-length)
  */
 export declare const getPointAtLength: (path: string, length: number) => import("./helpers/types").Point;

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

@@ -4,10 +4,10 @@ exports.getPointAtLength = void 0;
 const construct_1 = require("./helpers/construct");
 const get_part_at_length_1 = require("./helpers/get-part-at-length");
 /**
- * Gets the coordinates of a point which is on an SVG path.
+ * @description Gets the coordinates of a point which is on an SVG path.
  * @param {string} path A valid SVG path
  * @param {number} length The length at which the point should be sampled
- * @link https://remotion.dev/docs/paths/get-point-at-length
+ * @see [Documentation](https://remotion.dev/docs/paths/get-point-at-length)
  */
 const getPointAtLength = (path, length) => {
     const constructed = (0, construct_1.construct)(path);

package/dist/get-subpaths.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @description Splits a valid SVG path into it's parts.
+ * @param {string} path A valid SVG path
+ * @see [Documentation](https://remotion.dev/docs/paths/get-subpaths)
+ */
+export declare const getSubpaths: (path: string) => string[];

package/dist/get-subpaths.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSubpaths = void 0;
+const construct_1 = require("./helpers/construct");
+const parse_path_1 = require("./parse-path");
+const serialize_instructions_1 = require("./serialize-instructions");
+/**
+ * @description Splits a valid SVG path into it's parts.
+ * @param {string} path A valid SVG path
+ * @see [Documentation](https://remotion.dev/docs/paths/get-subpaths)
+ */
+const getSubpaths = (path) => {
+    const parsed = (0, parse_path_1.parsePath)(path);
+    const { segments } = (0, construct_1.constructFromInstructions)(parsed);
+    return segments.map((seg) => {
+        return (0, serialize_instructions_1.serializeInstructions)(seg);
+    });
+};
+exports.getSubpaths = getSubpaths;

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

@@ -1,7 +1,7 @@
 /**
- * Gets tangent values x and y of a point which is on an SVG path
+ * @description 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
+ * @see [Documentation](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

@@ -4,10 +4,10 @@ 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
+ * @description 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
+ * @see [Documentation](https://remotion.dev/docs/paths/get-tangent-at-length)
  */
 const getTangentAtLength = (path, length) => {
     const constructed = (0, construct_1.construct)(path);

package/dist/helpers/construct.d.ts

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