@remotion/paths 4.0.164 → 4.0.166

package/dist/debug-path.d.ts

@@ -0,0 +1,6 @@
+type DebugInstruction = {
+    d: string;
+    color: string;
+};
+export declare const debugPath: (d: string) => DebugInstruction[];
+export {};

package/dist/debug-path.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debugPath = void 0;
+const normalize_path_1 = require("./normalize-path");
+const parse_path_1 = require("./parse-path");
+const serialize_instructions_1 = require("./serialize-instructions");
+const debugPath = (d) => {
+    const instructions = (0, normalize_path_1.normalizeInstructions)((0, parse_path_1.parsePath)(d));
+    return instructions
+        .map((inst, i) => {
+        if (inst.type === 'Z') {
+            return null;
+        }
+        if (inst.type === 'H' || inst.type === 'V') {
+            return null;
+        }
+        const topLeft = [inst.x - 5, inst.y - 5];
+        const topRight = [inst.x + 5, inst.y - 5];
+        const bottomLeft = [inst.x - 5, inst.y + 5];
+        const bottomRight = [inst.x + 5, inst.y + 5];
+        const triangle = [
+            {
+                type: 'M',
+                x: topLeft[0],
+                y: topLeft[1],
+            },
+            {
+                type: 'L',
+                x: topRight[0],
+                y: topRight[1],
+            },
+            {
+                type: 'L',
+                x: bottomRight[0],
+                y: bottomRight[1],
+            },
+            {
+                type: 'L',
+                x: bottomLeft[0],
+                y: bottomLeft[1],
+            },
+            {
+                type: 'Z',
+            },
+        ];
+        return {
+            d: (0, serialize_instructions_1.serializeInstructions)(triangle),
+            color: i === instructions.length - 1
+                ? 'red'
+                : inst.type === 'M'
+                    ? 'blue'
+                    : 'green',
+        };
+    })
+        .filter(Boolean);
+};
+exports.debugPath = debugPath;

package/dist/get-end-position.d.ts

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

package/dist/get-end-position.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEndPosition = void 0;
+const getEndPosition = (instructions) => {
+    let x = 0;
+    let y = 0;
+    let moveX = 0;
+    let moveY = 0;
+    for (let i = 0; i < instructions.length; i++) {
+        const instruction = instructions[i];
+        if (instruction.type === 'M') {
+            moveX = instruction.x;
+            moveY = instruction.y;
+        }
+        else if (instruction.type === 'm') {
+            moveX += instruction.dx;
+            moveY += instruction.dy;
+        }
+        if (instruction.type === 'A' ||
+            instruction.type === 'C' ||
+            instruction.type === 'L' ||
+            instruction.type === 'M' ||
+            instruction.type === 'Q' ||
+            instruction.type === 'S' ||
+            instruction.type === 'T') {
+            x = instruction.x;
+            y = instruction.y;
+            continue;
+        }
+        if (instruction.type === 'a' ||
+            instruction.type === 'c' ||
+            instruction.type === 'l' ||
+            instruction.type === 'm' ||
+            instruction.type === 'q' ||
+            instruction.type === 's' ||
+            instruction.type === 't') {
+            x += instruction.dx;
+            y += instruction.dy;
+            continue;
+        }
+        if (instruction.type === 'H') {
+            x = instruction.x;
+            continue;
+        }
+        if (instruction.type === 'V') {
+            y = instruction.y;
+            continue;
+        }
+        if (instruction.type === 'Z') {
+            x = moveX;
+            y = moveY;
+            continue;
+        }
+        if (instruction.type === 'h') {
+            x += instruction.dx;
+            continue;
+        }
+        if (instruction.type === 'v') {
+            y += instruction.dy;
+            continue;
+        }
+        // @ts-expect-error
+        throw new Error('Unknown instruction type: ' + instruction.type);
+    }
+    return {
+        x,
+        y,
+    };
+};
+exports.getEndPosition = getEndPosition;

package/dist/helpers/types.d.ts

@@ -16,10 +16,6 @@ export interface Point {
     y: number;
 }
 export type PointArray = [number, number];
-export interface PointProperties {
-    tangentX: number;
-    tangentY: number;
-}
 export type BoundingBox = {
     x1: number;
     y1: number;
@@ -29,15 +25,12 @@ export type BoundingBox = {
     width: number;
     height: number;
 };
-export type ReducedInstruction = {
-    type: 'M';
-    x: number;
-    y: number;
-} | {
+export type LInstruction = {
     type: 'L';
     x: number;
     y: number;
-} | {
+};
+export type CInstruction = {
     type: 'C';
     cp1x: number;
     cp1y: number;
@@ -45,15 +38,23 @@ export type ReducedInstruction = {
     cp2y: number;
     x: number;
     y: number;
-} | {
+};
+export type MInstruction = {
+    type: 'M';
+    x: number;
+    y: number;
+};
+export type QInstruction = {
     type: 'Q';
     cpx: number;
     cpy: number;
     x: number;
     y: number;
-} | {
+};
+export type ZInstruction = {
     type: 'Z';
 };
+export type ReducedInstruction = MInstruction | LInstruction | CInstruction | QInstruction | ZInstruction;
 export type AbsoluteInstruction = ReducedInstruction | {
     type: 'A';
     rx: number;

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { getPointAtLength } from './get-point-at-length';
 export { getSubpaths } from './get-subpaths';
 export { getTangentAtLength } from './get-tangent-at-length';
 export { AbsoluteInstruction, BoundingBox, Instruction, Part, ReducedInstruction, } from './helpers/types';
-export { interpolatePath } from './interpolate-path';
+export { interpolatePath } from './interpolate-path/interpolate-path';
 export { normalizePath } from './normalize-path';
 export { parsePath } from './parse-path';
 export { reduceInstructions } from './reduce-instructions';
@@ -19,4 +19,8 @@ export { translatePath } from './translate-path';
 export { WarpPathFn, warpPath } from './warp-path';
 export declare const PathInternals: {
     getBoundingBoxFromInstructions: (instructions: import("./helpers/types").ReducedInstruction[]) => import("./helpers/types").BoundingBox;
+    debugPath: (d: string) => {
+        d: string;
+        color: string;
+    }[];
 };

package/dist/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PathInternals = 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.getInstructionIndexAtLength = exports.getBoundingBox = exports.extendViewBox = exports.evolvePath = void 0;
 const get_bounding_box_1 = require("./get-bounding-box");
+const debug_path_1 = require("./debug-path");
 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");
@@ -18,7 +19,7 @@ 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");
+var interpolate_path_1 = require("./interpolate-path/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; } });
@@ -40,4 +41,5 @@ var warp_path_1 = require("./warp-path");
 Object.defineProperty(exports, "warpPath", { enumerable: true, get: function () { return warp_path_1.warpPath; } });
 exports.PathInternals = {
     getBoundingBoxFromInstructions: get_bounding_box_1.getBoundingBoxFromInstructions,
+    debugPath: debug_path_1.debugPath,
 };

package/dist/interpolate-path/convert-to-same-instruction-type.d.ts

@@ -0,0 +1,22 @@
+import type { Point, ReducedInstruction } from '../helpers/types';
+/**
+ * Converts command A to have the same type as command B.
+ *
+ * e.g., L0,5 -> C0,5,0,5,0,5
+ *
+ * Uses these rules:
+ * x1 <- x
+ * x2 <- x
+ * y1 <- y
+ * y2 <- y
+ * rx <- 0
+ * ry <- 0
+ * xAxisRotation <- read from B
+ * largeArcFlag <- read from B
+ * sweepflag <- read from B
+ *
+ * @param {Object} aCommand Command object from path `d` attribute
+ * @param {Object} bCommand Command object from path `d` attribute to match against
+ * @return {Object} aCommand converted to type of bCommand
+ */
+export declare function convertToSameInstructionType(aCommand: ReducedInstruction, bCommand: ReducedInstruction, currentPoint: Point): ReducedInstruction;

package/dist/interpolate-path/convert-to-same-instruction-type.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToSameInstructionType = void 0;
+const convertToLCommand = (command) => {
+    if (command.type === 'M' || command.type === 'L' || command.type === 'Z') {
+        throw new Error('unexpected');
+    }
+    return {
+        type: 'L',
+        x: command.x,
+        y: command.y,
+    };
+};
+const convertToCCommand = (command, currentPoint) => {
+    if (command.type === 'M' || command.type === 'C' || command.type === 'Z') {
+        throw new Error('unexpected');
+    }
+    if (command.type === 'L') {
+        return {
+            type: 'C',
+            cp1x: currentPoint.x,
+            cp1y: currentPoint.y,
+            cp2x: command.x,
+            cp2y: command.y,
+            x: command.x,
+            y: command.y,
+        };
+    }
+    if (command.type === 'Q') {
+        return {
+            type: 'C',
+            cp1x: command.cpx,
+            cp1y: command.cpy,
+            cp2x: command.cpx,
+            cp2y: command.cpy,
+            x: command.x,
+            y: command.y,
+        };
+    }
+    throw new Error('all types should be handled');
+};
+const convertToQCommand = (command) => {
+    if (command.type === 'M' || command.type === 'Q' || command.type === 'Z') {
+        throw new Error('unexpected');
+    }
+    if (command.type === 'C') {
+        return {
+            type: 'Q',
+            cpx: command.cp1x,
+            cpy: command.cp1y,
+            x: command.x,
+            y: command.y,
+        };
+    }
+    if (command.type === 'L') {
+        return {
+            type: 'Q',
+            cpx: command.x,
+            cpy: command.y,
+            x: command.x,
+            y: command.y,
+        };
+    }
+    throw new Error('unhandled');
+};
+/**
+ * Converts command A to have the same type as command B.
+ *
+ * e.g., L0,5 -> C0,5,0,5,0,5
+ *
+ * Uses these rules:
+ * x1 <- x
+ * x2 <- x
+ * y1 <- y
+ * y2 <- y
+ * rx <- 0
+ * ry <- 0
+ * xAxisRotation <- read from B
+ * largeArcFlag <- read from B
+ * sweepflag <- read from B
+ *
+ * @param {Object} aCommand Command object from path `d` attribute
+ * @param {Object} bCommand Command object from path `d` attribute to match against
+ * @return {Object} aCommand converted to type of bCommand
+ */
+function convertToSameInstructionType(aCommand, bCommand, currentPoint) {
+    if (aCommand.type === 'M' || bCommand.type === 'M') {
+        return { ...aCommand };
+    }
+    if (aCommand.type === bCommand.type) {
+        return { ...aCommand };
+    }
+    if (bCommand.type === 'C') {
+        return convertToCCommand(aCommand, currentPoint);
+    }
+    if (bCommand.type === 'L') {
+        return convertToLCommand(aCommand);
+    }
+    if (bCommand.type === 'Q') {
+        return convertToQCommand(aCommand);
+    }
+    if (bCommand.type === 'Z') {
+        return {
+            type: 'Z',
+        };
+    }
+    throw new TypeError('unhandled');
+}
+exports.convertToSameInstructionType = convertToSameInstructionType;

package/dist/interpolate-path/de-casteljau.d.ts

@@ -0,0 +1,14 @@
+/**
+ * de Casteljau's algorithm for drawing and splitting bezier curves.
+ * Inspired by https://pomax.github.io/bezierinfo/
+ *
+ * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+ *   The original segment to split.
+ * @param {Number} t Where to split the curve (value between [0, 1])
+ * @return {Object} An object { left, right } where left is the segment from 0..t and
+ *   right is the segment from t..1.
+ */
+export declare function decasteljau(points: number[][], t: number): {
+    left: number[][];
+    right: number[][];
+};

package/dist/interpolate-path/de-casteljau.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decasteljau = void 0;
+/**
+ * de Casteljau's algorithm for drawing and splitting bezier curves.
+ * Inspired by https://pomax.github.io/bezierinfo/
+ *
+ * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+ *   The original segment to split.
+ * @param {Number} t Where to split the curve (value between [0, 1])
+ * @return {Object} An object { left, right } where left is the segment from 0..t and
+ *   right is the segment from t..1.
+ */
+function decasteljau(points, t) {
+    const left = [];
+    const right = [];
+    function decasteljauRecurse(_points, _t) {
+        if (_points.length === 1) {
+            left.push(_points[0]);
+            right.push(_points[0]);
+        }
+        else {
+            const newPoints = Array(_points.length - 1);
+            for (let i = 0; i < newPoints.length; i++) {
+                if (i === 0) {
+                    left.push(_points[0]);
+                }
+                if (i === newPoints.length - 1) {
+                    right.push(_points[i + 1]);
+                }
+                newPoints[i] = [
+                    (1 - _t) * _points[i][0] + _t * _points[i + 1][0],
+                    (1 - _t) * _points[i][1] + _t * _points[i + 1][1],
+                ];
+            }
+            decasteljauRecurse(newPoints, _t);
+        }
+    }
+    if (points.length) {
+        decasteljauRecurse(points, t);
+    }
+    return { left, right: right.reverse() };
+}
+exports.decasteljau = decasteljau;

package/dist/interpolate-path/extend-command.d.ts

@@ -1,4 +1,4 @@
-import type { Command } from './command';
+import type { ReducedInstruction } from '../helpers/types';
 /**
  * Extends an array of commandsToExtend to the length of the referenceCommands by
  * splitting segments until the number of commands match. Ensures all the actual
@@ -8,4 +8,4 @@ import type { Command } from './command';
  * @param {Object[]} referenceCommands The command object array to match in length
  * @return {Object[]} The extended commandsToExtend array
  */
-export declare function extend(commandsToExtend: Command[], referenceCommands: Command[]): Command[];
+export declare function extendInstruction(commandsToExtend: ReducedInstruction[], referenceCommands: ReducedInstruction[]): ReducedInstruction[];

package/dist/interpolate-path/extend-command.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extend = void 0;
-const array_of_length_1 = require("./array-of-length");
+exports.extendInstruction = void 0;
 const split_segment_1 = require("./split-segment");
 /**
  * Extends an array of commandsToExtend to the length of the referenceCommands by
@@ -12,7 +11,7 @@ const split_segment_1 = require("./split-segment");
  * @param {Object[]} referenceCommands The command object array to match in length
  * @return {Object[]} The extended commandsToExtend array
  */
-function extend(commandsToExtend, referenceCommands) {
+function extendInstruction(commandsToExtend, referenceCommands) {
     // compute insertion points:
     // number of segments in the path to extend
     const numSegmentsToExtend = commandsToExtend.length - 1;
@@ -24,7 +23,9 @@ function extend(commandsToExtend, referenceCommands) {
     // should be added in that segment (should always be >= 1 since we need each
     // point itself).
     // 0 = segment 0-1, 1 = segment 1-2, n-1 = last vertex
-    const countPointsPerSegment = (0, array_of_length_1.arrayOfLength)(numReferenceSegments, undefined).reduce((accum, _d, i) => {
+    const countPointsPerSegment = new Array(numReferenceSegments)
+        .fill(undefined)
+        .reduce((accum, _d, i) => {
         const insertIndex = Math.floor(segmentRatio * i);
         accum[insertIndex] = (accum[insertIndex] || 0) + 1;
         return accum;
@@ -33,7 +34,7 @@ function extend(commandsToExtend, referenceCommands) {
     const extended = countPointsPerSegment.reduce((_extended, segmentCount, i) => {
         // if last command, just add `segmentCount` number of times
         if (i === commandsToExtend.length - 1) {
-            const lastCommandCopies = (0, array_of_length_1.arrayOfLength)(segmentCount, {
+            const lastCommandCopies = new Array(segmentCount).fill({
                 ...commandsToExtend[commandsToExtend.length - 1],
             });
             // convert M to L
@@ -45,10 +46,10 @@ function extend(commandsToExtend, referenceCommands) {
             return _extended.concat(lastCommandCopies);
         }
         // otherwise, split the segment segmentCount times.
-        return _extended.concat((0, split_segment_1.splitSegment)(commandsToExtend[i], commandsToExtend[i + 1], segmentCount));
+        return _extended.concat((0, split_segment_1.splitSegmentInstructions)(commandsToExtend[i], commandsToExtend[i + 1], segmentCount));
     }, []);
     // add in the very first point since splitSegment only adds in the ones after it
     extended.unshift(commandsToExtend[0]);
     return extended;
 }
-exports.extend = extend;
+exports.extendInstruction = extendInstruction;

package/dist/interpolate-path/interpolate-commands.d.ts

@@ -0,0 +1,16 @@
+import { type Command } from './command';
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` command in paths unless both A and B end with it.
+ *
+ * This function works directly with arrays of command objects instead of with
+ * path `d` strings (see interpolatePath for working with `d` strings).
+ *
+ * @param {Object[]} aCommandsInput Array of path commands
+ * @param {Object[]} bCommandsInput Array of path commands
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+ */
+export declare function interpolatePathCommands(aCommandsInput: Command[], bCommandsInput: Command[]): (t: number) => Command[];

package/dist/interpolate-path/interpolate-commands.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolatePathCommands = void 0;
+const command_1 = require("./command");
+const convert_to_same_type_1 = require("./convert-to-same-type");
+const extend_command_1 = require("./extend-command");
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` command in paths unless both A and B end with it.
+ *
+ * This function works directly with arrays of command objects instead of with
+ * path `d` strings (see interpolatePath for working with `d` strings).
+ *
+ * @param {Object[]} aCommandsInput Array of path commands
+ * @param {Object[]} bCommandsInput Array of path commands
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+ */
+function interpolatePathCommands(aCommandsInput, bCommandsInput) {
+    // make a copy so we don't mess with the input arrays
+    let aCommands = aCommandsInput === null || aCommandsInput === undefined
+        ? []
+        : aCommandsInput.slice();
+    let bCommands = bCommandsInput === null || bCommandsInput === undefined
+        ? []
+        : bCommandsInput.slice();
+    // both input sets are empty, so we don't interpolate
+    if (!aCommands.length && !bCommands.length) {
+        return function () {
+            return [];
+        };
+    }
+    // do we add Z during interpolation? yes if both have it. (we'd expect both to have it or not)
+    const addZ = (aCommands.length === 0 || aCommands[aCommands.length - 1].type === 'Z') &&
+        (bCommands.length === 0 || bCommands[bCommands.length - 1].type === 'Z');
+    // we temporarily remove Z
+    if (aCommands.length > 0 && aCommands[aCommands.length - 1].type === 'Z') {
+        aCommands.pop();
+    }
+    if (bCommands.length > 0 && bCommands[bCommands.length - 1].type === 'Z') {
+        bCommands.pop();
+    }
+    // if A is empty, treat it as if it used to contain just the first point
+    // of B. This makes it so the line extends out of from that first point.
+    if (!aCommands.length) {
+        aCommands.push(bCommands[0]);
+        // otherwise if B is empty, treat it as if it contains the first point
+        // of A. This makes it so the line retracts into the first point.
+    }
+    else if (!bCommands.length) {
+        bCommands.push(aCommands[0]);
+    }
+    // extend to match equal size
+    const numPointsToExtend = Math.abs(bCommands.length - aCommands.length);
+    if (numPointsToExtend !== 0) {
+        // B has more points than A, so add points to A before interpolating
+        if (bCommands.length > aCommands.length) {
+            aCommands = (0, extend_command_1.extend)(aCommands, bCommands);
+            // else if A has more points than B, add more points to B
+        }
+        else if (bCommands.length < aCommands.length) {
+            bCommands = (0, extend_command_1.extend)(bCommands, aCommands);
+        }
+    }
+    // commands have same length now.
+    // convert commands in A to the same type as those in B
+    aCommands = aCommands.map((aCommand, i) => (0, convert_to_same_type_1.convertToSameType)(aCommand, bCommands[i]));
+    // create mutable interpolated command objects
+    const interpolatedCommands = aCommands.map((aCommand) => ({ ...aCommand }));
+    if (addZ) {
+        interpolatedCommands.push({ type: 'Z' });
+        aCommands.push({ type: 'Z' }); // required for when returning at t == 0
+    }
+    return function (t) {
+        // at 1 return the final value without the extensions used during interpolation
+        if (t === 1) {
+            return bCommandsInput === null || bCommandsInput === undefined
+                ? []
+                : bCommandsInput;
+        }
+        // work with aCommands directly since interpolatedCommands are mutated
+        if (t === 0) {
+            return aCommands;
+        }
+        // interpolate the commands using the mutable interpolated command objs
+        for (let i = 0; i < interpolatedCommands.length; ++i) {
+            // if (interpolatedCommands[i].type === 'Z') continue;
+            const aCommand = aCommands[i];
+            const bCommand = bCommands[i];
+            const interpolatedCommand = interpolatedCommands[i];
+            for (const arg of command_1.typeMap[interpolatedCommand.type]) {
+                // @ts-expect-error
+                interpolatedCommand[arg] =
+                    (1 - t) * aCommand[arg] +
+                        t * bCommand[arg];
+                // do not use floats for flags (#27), round to integer
+                if (arg === 'largeArcFlag' || arg === 'sweepFlag') {
+                    // @ts-expect-error
+                    interpolatedCommand[arg] = Math.round(interpolatedCommand[arg]);
+                }
+            }
+        }
+        return interpolatedCommands;
+    };
+}
+exports.interpolatePathCommands = interpolatePathCommands;

package/dist/interpolate-path/interpolate-instruction-of-same-kind.d.ts

@@ -0,0 +1,2 @@
+import type { CInstruction, LInstruction, MInstruction, QInstruction, ReducedInstruction, ZInstruction } from '../helpers/types';
+export declare const interpolateInstructionOfSameKind: (t: number, first: ReducedInstruction, second: ReducedInstruction) => LInstruction | CInstruction | MInstruction | QInstruction | ZInstruction;