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

package/dist/helpers/remove-a-s-t-curves.js

@@ -0,0 +1,271 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeATSHVInstructions = void 0;
+const iterate_1 = require("./iterate");
+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 arcToCircle({ x1, y1, x2, y2, largeArcFlag, sweepFlag, 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,
+        largeArcFlag,
+        sweepFlag,
+        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;
+    });
+}
+// Requires path to be normalized
+const removeATSHVInstructions = (segments) => {
+    return (0, iterate_1.iterateOverSegments)({
+        segments,
+        iterate: ({ segment, prevSegment, x, y, cpX, cpY }) => {
+            if (segment.type === 'H') {
+                return [{ type: 'L', x: segment.x, y }];
+            }
+            if (segment.type === 'V') {
+                return [{ type: 'L', x, y: segment.y }];
+            }
+            if (segment.type === 'A') {
+                const nextX = segment.x;
+                const nextY = segment.y;
+                const new_segments = arcToCircle({
+                    x1: x,
+                    y1: y,
+                    x2: nextX,
+                    y2: nextY,
+                    largeArcFlag: segment.largeArcFlag,
+                    sweepFlag: segment.sweepFlag,
+                    rx: segment.rx,
+                    ry: segment.ry,
+                    phi: segment.xAxisRotation,
+                });
+                // 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 [
+                        {
+                            type: 'L',
+                            x: segment.x,
+                            y: segment.y,
+                        },
+                    ];
+                }
+                const result = new_segments.map((_s) => {
+                    return {
+                        type: 'C',
+                        cp1x: _s[2],
+                        cp1y: _s[3],
+                        cp2x: _s[4],
+                        cp2y: _s[5],
+                        x: _s[6],
+                        y: _s[7],
+                    };
+                });
+                return result;
+            }
+            if (segment.type === 'T') {
+                let prevControlX = 0;
+                let prevControlY = 0;
+                if (prevSegment &&
+                    (prevSegment.type === 'Q' || prevSegment.type === 'T')) {
+                    prevControlX = cpX;
+                    prevControlY = cpY;
+                }
+                else {
+                    prevControlX = x;
+                    prevControlY = y;
+                }
+                // New first control point is reflection of previous second control point
+                const vectorX = prevControlX - x;
+                const vectorY = prevControlY - y;
+                const newControlX = x - vectorX;
+                const newControlY = y - vectorY;
+                return [
+                    {
+                        type: 'Q',
+                        cpx: newControlX,
+                        cpy: newControlY,
+                        x: segment.x,
+                        y: segment.y,
+                    },
+                ];
+            }
+            if (segment.type === 'S') {
+                let prevControlX = 0;
+                let prevControlY = 0;
+                if (prevSegment && prevSegment.type === 'C') {
+                    prevControlX = prevSegment.cp2x;
+                    prevControlY = prevSegment.cp2y;
+                }
+                else if (prevSegment && prevSegment.type === 'S') {
+                    prevControlX = prevSegment.cpx;
+                    prevControlY = prevSegment.cpy;
+                }
+                else {
+                    prevControlX = x;
+                    prevControlY = y;
+                }
+                // New first control point is reflection of previous second control point
+                const vectorX = prevControlX - x;
+                const vectorY = prevControlY - y;
+                const newControlX = x - vectorX;
+                const newControlY = y - vectorY;
+                return [
+                    {
+                        type: 'C',
+                        cp1x: newControlX,
+                        cp1y: newControlY,
+                        cp2x: segment.cpx,
+                        cp2y: segment.cpy,
+                        x: segment.x,
+                        y: segment.y,
+                    },
+                ];
+            }
+            return [segment];
+        },
+    });
+};
+exports.removeATSHVInstructions = removeATSHVInstructions;
+function get_arc_center({ x1, y1, x2, y2, largeArcFlag, sweepFlag, 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) * (largeArcFlag === sweepFlag ? -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 (sweepFlag === false && delta_theta > 0) {
+        delta_theta -= TAU;
+    }
+    if (sweepFlag === true && 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/helpers/split-curve.d.ts

@@ -23,7 +23,7 @@ export declare const typeMap: {
     a: string[];
     z: never[];
 };
-export declare type Command = {
+export type Command = {
     x2?: number | undefined;
     y2?: number | undefined;
     x1?: number | undefined;

package/dist/helpers/types.d.ts

@@ -14,9 +14,116 @@ export interface Point {
     x: number;
     y: number;
 }
-export declare type PointArray = [number, number];
+export type PointArray = [number, number];
 export interface PointProperties {
     tangentX: number;
     tangentY: number;
 }
-export declare type pathOrders = 'a' | 'c' | 'h' | 'l' | 'm' | 'q' | 's' | 't' | 'v' | 'z';
+export type BoundingBox = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    viewBox: string;
+    width: number;
+    height: number;
+};
+export type ReducedInstruction = {
+    type: 'M';
+    x: number;
+    y: number;
+} | {
+    type: 'L';
+    x: number;
+    y: number;
+} | {
+    type: 'C';
+    cp1x: number;
+    cp1y: number;
+    cp2x: number;
+    cp2y: number;
+    x: number;
+    y: number;
+} | {
+    type: 'Q';
+    cpx: number;
+    cpy: number;
+    x: number;
+    y: number;
+} | {
+    type: 'Z';
+};
+export type AbsoluteInstruction = ReducedInstruction | {
+    type: 'A';
+    rx: number;
+    ry: number;
+    xAxisRotation: number;
+    largeArcFlag: boolean;
+    sweepFlag: boolean;
+    x: number;
+    y: number;
+} | {
+    type: 'S';
+    cpx: number;
+    cpy: number;
+    x: number;
+    y: number;
+} | {
+    type: 'T';
+    x: number;
+    y: number;
+} | {
+    type: 'H';
+    x: number;
+} | {
+    type: 'V';
+    y: number;
+};
+export type Instruction = AbsoluteInstruction | {
+    type: 'm';
+    dx: number;
+    dy: number;
+} | {
+    type: 'l';
+    dx: number;
+    dy: number;
+} | {
+    type: 'h';
+    dx: number;
+} | {
+    type: 'v';
+    dy: number;
+} | {
+    type: 'c';
+    cp1dx: number;
+    cp1dy: number;
+    cp2dx: number;
+    cp2dy: number;
+    dx: number;
+    dy: number;
+} | {
+    type: 's';
+    cpdx: number;
+    cpdy: number;
+    dx: number;
+    dy: number;
+} | {
+    type: 'q';
+    cpdx: number;
+    cpdy: number;
+    dx: number;
+    dy: number;
+} | {
+    type: 't';
+    dx: number;
+    dy: number;
+} | {
+    type: 'a';
+    rx: number;
+    ry: number;
+    xAxisRotation: number;
+    largeArcFlag: boolean;
+    sweepFlag: boolean;
+    dx: number;
+    dy: number;
+};

package/dist/index.d.ts

@@ -1,10 +1,18 @@
 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 { AbsoluteInstruction, BoundingBox, Instruction, Part, ReducedInstruction, } from './helpers/types';
 export { interpolatePath } from './interpolate-path';
 export { normalizePath } from './normalize-path';
+export { parsePath } from './parse-path';
+export { reduceInstructions } from './reduce-instructions';
+export { resetPath } from './reset-path';
 export { reversePath } from './reverse-path';
+export { scalePath } from './scale-path';
+export { serializeInstructions } from './serialize-instructions';
+export { translatePath } from './translate-path';
+export { warpPath, WarpPathFn } from './warp-path';

package/dist/index.js

@@ -1,21 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reversePath = exports.normalizePath = exports.interpolatePath = exports.getTangentAtLength = exports.getPointAtLength = exports.getParts = exports.getLength = exports.extendViewBox = exports.evolvePath = void 0;
+exports.warpPath = exports.translatePath = exports.serializeInstructions = exports.scalePath = exports.reversePath = exports.resetPath = exports.reduceInstructions = exports.parsePath = exports.normalizePath = exports.interpolatePath = exports.getTangentAtLength = exports.getSubpaths = exports.getPointAtLength = 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");
-Object.defineProperty(exports, "getParts", { enumerable: true, get: function () { return get_parts_1.getParts; } });
 var get_point_at_length_1 = require("./get-point-at-length");
 Object.defineProperty(exports, "getPointAtLength", { enumerable: true, get: function () { return get_point_at_length_1.getPointAtLength; } });
+var get_subpaths_1 = require("./get-subpaths");
+Object.defineProperty(exports, "getSubpaths", { enumerable: true, get: function () { return get_subpaths_1.getSubpaths; } });
 var get_tangent_at_length_1 = require("./get-tangent-at-length");
 Object.defineProperty(exports, "getTangentAtLength", { enumerable: true, get: function () { return get_tangent_at_length_1.getTangentAtLength; } });
 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 parse_path_1 = require("./parse-path");
+Object.defineProperty(exports, "parsePath", { enumerable: true, get: function () { return parse_path_1.parsePath; } });
+var reduce_instructions_1 = require("./reduce-instructions");
+Object.defineProperty(exports, "reduceInstructions", { enumerable: true, get: function () { return reduce_instructions_1.reduceInstructions; } });
+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 scale_path_1 = require("./scale-path");
+Object.defineProperty(exports, "scalePath", { enumerable: true, get: function () { return scale_path_1.scalePath; } });
+var serialize_instructions_1 = require("./serialize-instructions");
+Object.defineProperty(exports, "serializeInstructions", { enumerable: true, get: function () { return serialize_instructions_1.serializeInstructions; } });
+var translate_path_1 = require("./translate-path");
+Object.defineProperty(exports, "translatePath", { enumerable: true, get: function () { return translate_path_1.translatePath; } });
+var warp_path_1 = require("./warp-path");
+Object.defineProperty(exports, "warpPath", { enumerable: true, get: function () { return warp_path_1.warpPath; } });

package/dist/interpolate-path.d.ts

@@ -1,8 +1,8 @@
 /**
- * Interpolates between two SVG paths.
+ * @description Interpolates between two SVG paths.
  * @param {number} value A number - 0 means first path, 1 means second path, any other values will be interpolated
  * @param {string} firstPath The first valid SVG path
  * @param {string} secondPath The second valid SVG path
- * @link https://remotion.dev/docs/paths/interpolate-path
+ * @see [Documentation](https://remotion.dev/docs/paths/interpolate-path)
  */
 export declare const interpolatePath: (value: number, firstPath: string, secondPath: string) => string;

package/dist/interpolate-path.js

@@ -332,11 +332,11 @@ function interpolatePathCommands(aCommandsInput, bCommandsInput) {
     };
 }
 /**
- * Interpolates between two SVG paths.
+ * @description Interpolates between two SVG paths.
  * @param {number} value A number - 0 means first path, 1 means second path, any other values will be interpolated
  * @param {string} firstPath The first valid SVG path
  * @param {string} secondPath The second valid SVG path
- * @link https://remotion.dev/docs/paths/interpolate-path
+ * @see [Documentation](https://remotion.dev/docs/paths/interpolate-path)
  */
 const interpolatePath = (value, firstPath, secondPath) => {
     // at 1 return the final value without the extensions used during interpolation

package/dist/normalize-path.d.ts

@@ -1,6 +1,8 @@
+import type { AbsoluteInstruction, Instruction } from './helpers/types';
 /**
- * Removes all relative coordinates from an SVG path and converts them into absolute coordinates.
+ * @description Removes all relative coordinates from an SVG path and converts them into absolute coordinates.
  * @param {string} path A valid SVG path
- * @link https://remotion.dev/docs/paths/normalize-path
+ * @see [Documentation](https://remotion.dev/docs/paths/normalize-path)
  */
 export declare const normalizePath: (path: string) => string;
+export declare const normalizeInstructions: (instructions: Instruction[]) => AbsoluteInstruction[];