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

package/dist/scale-path.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scalePath = void 0;
+const get_bounding_box_1 = require("./get-bounding-box");
+const parse_path_1 = require("./parse-path");
+const reduce_instructions_1 = require("./reduce-instructions");
+const serialize_instructions_1 = require("./serialize-instructions");
+const translate_path_1 = require("./translate-path");
+/**
+ * @description Allows you to grow or shrink the size of a path.
+ * @param {string} path A valid SVG path
+ * @param {string} d
+ * @param {Number} scaleX
+ * @param {Number} scaleY
+ * @returns a new path with respect to the scale values provided
+ * @see [Documentation](https://www.remotion.dev/docs/paths/scale-path)
+ */
+const scalePath = (d, scaleX, scaleY) => {
+    const reduced = (0, reduce_instructions_1.reduceInstructions)((0, parse_path_1.parsePath)(d));
+    const bounded = (0, get_bounding_box_1.getBoundingBoxFromInstructions)(reduced);
+    const zeroed = (0, translate_path_1.translateSegments)(reduced, -bounded.x1, -bounded.y1);
+    const mapped = zeroed.map((instruction) => {
+        if (instruction.type === 'L') {
+            return {
+                type: 'L',
+                x: scaleX * instruction.x,
+                y: scaleY * instruction.y,
+            };
+        }
+        if (instruction.type === 'C') {
+            return {
+                type: 'C',
+                x: scaleX * instruction.x,
+                y: scaleY * instruction.y,
+                cp1x: scaleX * instruction.cp1x,
+                cp1y: scaleY * instruction.cp1y,
+                cp2x: scaleX * instruction.cp2x,
+                cp2y: scaleY * instruction.cp2y,
+            };
+        }
+        if (instruction.type === 'M') {
+            return {
+                type: 'M',
+                x: scaleX * instruction.x,
+                y: scaleY * instruction.y,
+            };
+        }
+        if (instruction.type === 'Q') {
+            return {
+                type: 'Q',
+                x: scaleX * instruction.x,
+                y: scaleY * instruction.y,
+                cpx: scaleX * instruction.cpx,
+                cpy: scaleY * instruction.cpy,
+            };
+        }
+        if (instruction.type === 'Z') {
+            return {
+                type: 'Z',
+            };
+        }
+        if (instruction.type === 'A') {
+            return {
+                type: 'A',
+                largeArcFlag: instruction.largeArcFlag,
+                rx: scaleX * instruction.rx,
+                ry: scaleY * instruction.ry,
+                sweepFlag: instruction.sweepFlag,
+                xAxisRotation: instruction.xAxisRotation,
+                x: scaleX * instruction.x,
+                y: scaleY * instruction.y,
+            };
+        }
+        if (instruction.type === 'H') {
+            return {
+                type: 'H',
+                x: scaleX * instruction.x,
+            };
+        }
+        if (instruction.type === 'S') {
+            return {
+                type: 'S',
+                cpx: scaleX * instruction.cpx,
+                cpy: scaleY * instruction.cpy,
+                x: scaleX * instruction.x,
+                y: scaleY * instruction.y,
+            };
+        }
+        if (instruction.type === 'T') {
+            return {
+                type: 'T',
+                x: scaleX * instruction.x,
+                y: scaleY * instruction.y,
+            };
+        }
+        if (instruction.type === 'V') {
+            return {
+                type: 'V',
+                y: scaleY * instruction.y,
+            };
+        }
+        if (instruction.type === 'a') {
+            return {
+                type: 'a',
+                dx: scaleX * instruction.dx,
+                dy: scaleY * instruction.dy,
+                largeArcFlag: instruction.largeArcFlag,
+                rx: scaleX * instruction.rx,
+                ry: scaleY * instruction.ry,
+                sweepFlag: instruction.sweepFlag,
+                xAxisRotation: instruction.xAxisRotation,
+            };
+        }
+        if (instruction.type === 'c') {
+            return {
+                type: 'c',
+                cp1dx: scaleX * instruction.cp1dx,
+                cp1dy: scaleY * instruction.cp1dy,
+                cp2dx: scaleX * instruction.cp2dx,
+                cp2dy: scaleY * instruction.cp2dy,
+                dx: scaleX * instruction.dx,
+                dy: scaleY * instruction.dy,
+            };
+        }
+        if (instruction.type === 'h') {
+            return {
+                type: 'h',
+                dx: scaleX * instruction.dx,
+            };
+        }
+        if (instruction.type === 'l') {
+            return {
+                type: 'l',
+                dx: scaleX * instruction.dx,
+                dy: scaleY * instruction.dy,
+            };
+        }
+        if (instruction.type === 'm') {
+            return {
+                type: 'm',
+                dx: scaleX * instruction.dx,
+                dy: scaleY * instruction.dy,
+            };
+        }
+        if (instruction.type === 'q') {
+            return {
+                type: 'q',
+                cpdx: scaleX * instruction.cpdx,
+                cpdy: scaleY * instruction.cpdy,
+                dx: scaleX * instruction.dx,
+                dy: scaleY * instruction.dy,
+            };
+        }
+        if (instruction.type === 's') {
+            return {
+                type: 's',
+                cpdx: scaleX * instruction.cpdx,
+                cpdy: scaleY * instruction.cpdy,
+                dx: scaleX * instruction.dx,
+                dy: scaleY * instruction.dy,
+            };
+        }
+        if (instruction.type === 't') {
+            return {
+                type: 't',
+                dx: scaleX * instruction.dx,
+                dy: scaleY * instruction.dy,
+            };
+        }
+        if (instruction.type === 'v') {
+            return {
+                type: 'v',
+                dy: scaleY * instruction.dy,
+            };
+        }
+        throw new Error('unexpected function');
+    });
+    return (0, serialize_instructions_1.serializeInstructions)((0, translate_path_1.translateSegments)(mapped, bounded.x1, bounded.y1));
+};
+exports.scalePath = scalePath;

package/dist/serialize-instructions.d.ts

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

package/dist/serialize-instructions.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeInstructions = void 0;
+/**
+ * @description Takes an array of Instruction's and serializes it into an SVG path string.
+ * @param {Array} instruction
+ * @returns a serialized SVG path string
+ * @see [Documentation](https://www.remotion.dev/docs/paths/serialize-instructions)
+ */
+const serializeInstruction = (instruction) => {
+    if (instruction.type === 'A') {
+        return `A ${instruction.rx} ${instruction.ry} ${instruction.xAxisRotation} ${Number(instruction.largeArcFlag)} ${Number(instruction.sweepFlag)} ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'a') {
+        return `a ${instruction.rx} ${instruction.ry} ${instruction.xAxisRotation} ${Number(instruction.largeArcFlag)} ${Number(instruction.sweepFlag)} ${instruction.dx} ${instruction.dy}`;
+    }
+    if (instruction.type === 'C') {
+        return `C ${instruction.cp1x} ${instruction.cp1y} ${instruction.cp2x} ${instruction.cp2y} ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'c') {
+        return `c ${instruction.cp1dx} ${instruction.cp1dy} ${instruction.cp2dx} ${instruction.cp2dy} ${instruction.dx} ${instruction.dy}`;
+    }
+    if (instruction.type === 'S') {
+        return `S ${instruction.cpx} ${instruction.cpy} ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 's') {
+        return `s ${instruction.cpdx} ${instruction.cpdy} ${instruction.dx} ${instruction.dy}`;
+    }
+    if (instruction.type === 'Q') {
+        return `Q ${instruction.cpx} ${instruction.cpy} ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'q') {
+        return `q ${instruction.cpdx} ${instruction.cpdy} ${instruction.dx} ${instruction.dy}`;
+    }
+    if (instruction.type === 'Z') {
+        return 'Z';
+    }
+    if (instruction.type === 'H') {
+        return `H ${instruction.x}`;
+    }
+    if (instruction.type === 'h') {
+        return `h ${instruction.dx}`;
+    }
+    if (instruction.type === 'V') {
+        return `V ${instruction.y}`;
+    }
+    if (instruction.type === 'v') {
+        return `v ${instruction.dy}`;
+    }
+    if (instruction.type === 'L') {
+        return `L ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'l') {
+        return `l ${instruction.dx} ${instruction.dy}`;
+    }
+    if (instruction.type === 'M') {
+        return `M ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'm') {
+        return `m ${instruction.dx} ${instruction.dy}`;
+    }
+    if (instruction.type === 'T') {
+        return `T ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 't') {
+        return `t ${instruction.dx} ${instruction.dy}`;
+    }
+    // @ts-expect-error
+    throw new Error(`Unknown instruction type: ${instruction.type}`);
+};
+const serializeInstructions = (path) => {
+    return path
+        .map((p) => {
+        return serializeInstruction(p);
+    })
+        .join(' ');
+};
+exports.serializeInstructions = serializeInstructions;

package/dist/translate-path.d.ts

@@ -0,0 +1,11 @@
+import type { Instruction } from './helpers/types';
+export declare const translateSegments: (segments: Instruction[], x: number, y: number) => Instruction[];
+/**
+ * @description Translates the path by the given x and y coordinates.
+ * @param {string} path the originalSVG path
+ * @param {Number} x the amount of horizontal translation
+ * @param {Number} y the amount of vertical translation
+ * @returns a new string containing a path, if it is valid
+ * @see [Documentation](https://www.remotion.dev/docs/paths/translate-path)
+ */
+export declare const translatePath: (path: string, x: number, y: number) => string;

package/dist/translate-path.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translatePath = exports.translateSegments = void 0;
+const parse_path_1 = require("./parse-path");
+const serialize_instructions_1 = require("./serialize-instructions");
+const translateSegments = (segments, x, y) => {
+    return segments.map((segment) => {
+        // Shift coords only for commands with absolute values
+        if (segment.type === 'a' ||
+            segment.type === 'c' ||
+            segment.type === 'v' ||
+            segment.type === 's' ||
+            segment.type === 'h' ||
+            segment.type === 'l' ||
+            segment.type === 'm' ||
+            segment.type === 'q' ||
+            segment.type === 't') {
+            return segment;
+        }
+        // V is the only command, with shifted coords parity
+        if (segment.type === 'V') {
+            return {
+                type: 'V',
+                y: segment.y + y,
+            };
+        }
+        if (segment.type === 'H') {
+            return {
+                type: 'H',
+                x: segment.x + x,
+            };
+        }
+        // ARC is: ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]
+        // touch x, y only
+        if (segment.type === 'A') {
+            return {
+                type: 'A',
+                rx: segment.rx,
+                ry: segment.ry,
+                largeArcFlag: segment.largeArcFlag,
+                sweepFlag: segment.sweepFlag,
+                xAxisRotation: segment.xAxisRotation,
+                x: segment.x + x,
+                y: segment.y + y,
+            };
+        }
+        if (segment.type === 'Z') {
+            return segment;
+        }
+        if (segment.type === 'C') {
+            return {
+                type: 'C',
+                cp1x: segment.cp1x + x,
+                cp1y: segment.cp1y + y,
+                cp2x: segment.cp2x + x,
+                cp2y: segment.cp2y + y,
+                x: segment.x + x,
+                y: segment.y + y,
+            };
+        }
+        if (segment.type === 'Q') {
+            return {
+                type: 'Q',
+                cpx: segment.cpx + x,
+                cpy: segment.cpy + y,
+                x: segment.x + x,
+                y: segment.y + y,
+            };
+        }
+        if (segment.type === 'S') {
+            return {
+                type: 'S',
+                cpx: segment.cpx + x,
+                cpy: segment.cpy + y,
+                x: segment.x + x,
+                y: segment.y + y,
+            };
+        }
+        if (segment.type === 'T') {
+            return {
+                type: 'T',
+                x: segment.x + x,
+                y: segment.y + y,
+            };
+        }
+        if (segment.type === 'L') {
+            return {
+                type: 'L',
+                x: segment.x + x,
+                y: segment.y + y,
+            };
+        }
+        if (segment.type === 'M') {
+            return {
+                type: 'M',
+                x: segment.x + x,
+                y: segment.y + y,
+            };
+        }
+        // @ts-expect-error
+        throw new Error(`Unknown segment type: ${segment.type}`);
+    });
+};
+exports.translateSegments = translateSegments;
+/**
+ * @description Translates the path by the given x and y coordinates.
+ * @param {string} path the originalSVG path
+ * @param {Number} x the amount of horizontal translation
+ * @param {Number} y the amount of vertical translation
+ * @returns a new string containing a path, if it is valid
+ * @see [Documentation](https://www.remotion.dev/docs/paths/translate-path)
+ */
+const translatePath = (path, x, y) => {
+    return (0, serialize_instructions_1.serializeInstructions)((0, exports.translateSegments)((0, parse_path_1.parsePath)(path), x, y));
+};
+exports.translatePath = translatePath;

package/dist/warp-path/index.d.ts

@@ -0,0 +1,10 @@
+import type { WarpPathFn } from './warp-helpers';
+/**
+ * @description This function works by splitting SVG instructions into many smaller SVG instructions and then remapping the coordinates of each instruction.
+ * @param {string} path an SVG path string
+ * @see [Documentation](https://www.remotion.dev/docs/paths/warp-path)
+ */
+export declare const warpPath: (path: string, transformer: WarpPathFn, options?: {
+    interpolationThreshold?: number;
+}) => string;
+export type { WarpPathFn } from './warp-helpers';

package/dist/warp-path/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warpPath = void 0;
+const get_bounding_box_1 = require("../get-bounding-box");
+const parse_path_1 = require("../parse-path");
+const reduce_instructions_1 = require("../reduce-instructions");
+const serialize_instructions_1 = require("../serialize-instructions");
+const warp_helpers_1 = require("./warp-helpers");
+const getDefaultInterpolationThreshold = (instructions) => {
+    const boundingBox = (0, get_bounding_box_1.getBoundingBoxFromInstructions)(instructions);
+    const longer = Math.max(boundingBox.y2 - boundingBox.y1, boundingBox.x2 - boundingBox.x1);
+    return longer * 0.01;
+};
+/**
+ * @description This function works by splitting SVG instructions into many smaller SVG instructions and then remapping the coordinates of each instruction.
+ * @param {string} path an SVG path string
+ * @see [Documentation](https://www.remotion.dev/docs/paths/warp-path)
+ */
+const warpPath = (path, transformer, options) => {
+    var _a;
+    const reduced = (0, reduce_instructions_1.reduceInstructions)((0, parse_path_1.parsePath)(path));
+    const withZFix = (0, warp_helpers_1.fixZInstruction)(reduced);
+    const interpolated = (0, warp_helpers_1.svgPathInterpolate)(withZFix, (_a = options === null || options === void 0 ? void 0 : options.interpolationThreshold) !== null && _a !== void 0 ? _a : getDefaultInterpolationThreshold(withZFix));
+    return (0, serialize_instructions_1.serializeInstructions)((0, warp_helpers_1.warpTransform)(interpolated, transformer));
+};
+exports.warpPath = warpPath;

package/dist/warp-path/warp-helpers.d.ts

@@ -0,0 +1,14 @@
+import type { ReducedInstruction } from '../helpers/types';
+export type WarpPathFn = (point: {
+    x: number;
+    y: number;
+}) => {
+    x: number;
+    y: number;
+};
+export declare function svgPathInterpolate(path: ReducedInstruction[], threshold: number): ReducedInstruction[];
+export declare const warpTransform: (path: ReducedInstruction[], transformer: WarpPathFn) => ReducedInstruction[];
+export declare const fixZInstruction: (instructions: ReducedInstruction[]) => ReducedInstruction[];
+export declare function interpolateUntil(points: [number, number][], threshold: number, deltaFunction?: (points: [number, number][]) => number): [number, number][][];
+export declare function split(p: number[][], t?: number): number[][][];
+export declare function createLineSegment(points: number[][]): ReducedInstruction;

package/dist/warp-path/warp-helpers.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLineSegment = exports.split = exports.interpolateUntil = exports.fixZInstruction = exports.warpTransform = exports.svgPathInterpolate = void 0;
+function svgPathInterpolate(path, threshold) {
+    let didWork = false;
+    const deltaFunction = (points) => {
+        const linearPoints = [
+            points[0].slice(0, 2),
+            points[points.length - 1].slice(0, 2),
+        ];
+        const delta = euclideanDistance(linearPoints);
+        didWork = didWork || delta > threshold;
+        return delta;
+    };
+    return warpInterpolate(path, threshold, deltaFunction);
+}
+exports.svgPathInterpolate = svgPathInterpolate;
+function warpInterpolate(path, threshold, deltaFunction) {
+    let prexX = 0;
+    let prexY = 0;
+    return path
+        .map((segment) => {
+        const points = [[prexX, prexY]];
+        if (segment.type !== 'Z') {
+            prexX = segment.x;
+            prexY = segment.y;
+        }
+        if (segment.type === 'C') {
+            points.push([segment.cp1x, segment.cp1y]);
+            points.push([segment.cp2x, segment.cp2y]);
+            points.push([segment.x, segment.y]);
+        }
+        if (segment.type === 'L') {
+            points.push([segment.x, segment.y]);
+        }
+        if (segment.type === 'Q') {
+            points.push([segment.cpx, segment.cpy]);
+            points.push([segment.x, segment.y]);
+        }
+        if (segment.type === 'C' ||
+            segment.type === 'Q' ||
+            segment.type === 'L') {
+            return interpolateUntil(points, threshold, deltaFunction).map((rawSegment) => createLineSegment(rawSegment));
+        }
+        return [segment];
+    })
+        .flat(1);
+}
+const warpTransform = (path, transformer) => {
+    return path
+        .map((segment) => {
+        if (segment.type === 'L') {
+            const { x, y } = transformer({ x: segment.x, y: segment.y });
+            return [
+                {
+                    type: 'L',
+                    x,
+                    y,
+                },
+            ];
+        }
+        if (segment.type === 'Q') {
+            const { x, y } = transformer({ x: segment.x, y: segment.y });
+            const { x: cpx, y: cpy } = transformer({
+                x: segment.cpx,
+                y: segment.cpy,
+            });
+            return [
+                {
+                    type: 'Q',
+                    x,
+                    y,
+                    cpx,
+                    cpy,
+                },
+            ];
+        }
+        if (segment.type === 'C') {
+            const { x, y } = transformer({ x: segment.x, y: segment.y });
+            const { x: cp1x, y: cp1y } = transformer({
+                x: segment.cp1x,
+                y: segment.cp1y,
+            });
+            const { x: cp2x, y: cp2y } = transformer({
+                x: segment.cp2x,
+                y: segment.cp2y,
+            });
+            return [
+                {
+                    type: 'C',
+                    x,
+                    y,
+                    cp1x,
+                    cp1y,
+                    cp2x,
+                    cp2y,
+                },
+            ];
+        }
+        if (segment.type === 'M') {
+            const { x, y } = transformer({ x: segment.x, y: segment.y });
+            return [
+                {
+                    type: 'M',
+                    x,
+                    y,
+                },
+            ];
+        }
+        return [segment];
+    })
+        .flat(1);
+};
+exports.warpTransform = warpTransform;
+// Add a line from second to last point to last point and then keep Z so it can be transformed as well
+const fixZInstruction = (instructions) => {
+    let prevX = 0;
+    let prevY = 0;
+    return instructions
+        .map((instruction) => {
+        if (instruction.type === 'Z') {
+            return [
+                {
+                    type: 'L',
+                    x: prevX,
+                    y: prevY,
+                },
+                {
+                    type: 'Z',
+                },
+            ];
+        }
+        if (instruction.type === 'M') {
+            prevX = instruction.x;
+            prevY = instruction.y;
+        }
+        return [instruction];
+    })
+        .flat(1);
+};
+exports.fixZInstruction = fixZInstruction;
+const euclideanDistance = (points) => {
+    const startPoint = points[0];
+    const endPoint = points[points.length - 1];
+    let d2 = 0;
+    for (let i = 0; i < startPoint.length; i++) {
+        const d = endPoint[i] - startPoint[i];
+        d2 += d ** 2;
+    }
+    return Math.sqrt(d2);
+};
+function interpolateUntil(points, threshold, deltaFunction = euclideanDistance) {
+    const stack = [points];
+    const segments = [];
+    while (stack.length > 0) {
+        const currentPoints = stack.pop();
+        if (deltaFunction(currentPoints) > threshold) {
+            const newPoints = split(currentPoints);
+            // Add new segments backwards so they end up in correct order
+            for (let i = newPoints.length - 1; i >= 0; i--) {
+                stack.push(newPoints[i]);
+            }
+        }
+        else {
+            segments.push(currentPoints);
+        }
+    }
+    return segments;
+}
+exports.interpolateUntil = interpolateUntil;
+function split(p, t = 0.5) {
+    const seg0 = [];
+    const seg1 = [];
+    const orders = [p];
+    while (orders.length < p.length) {
+        const q = orders[orders.length - 1];
+        const r = [];
+        for (let i = 1; i < q.length; i++) {
+            const q0 = q[i - 1];
+            const q1 = q[i];
+            const s = [];
+            const dim = Math.max(q0.length, q1.length);
+            for (let j = 0; j < dim; j++) {
+                const s0 = q0[j] || 0;
+                const s1 = q1[j] || 0;
+                s.push(s0 + (s1 - s0) * t);
+            }
+            r.push(s);
+        }
+        orders.push(r);
+    }
+    for (let i = 0; i < orders.length; i++) {
+        seg0.push(orders[i][0]);
+        seg1.push(orders[orders.length - 1 - i][i]);
+    }
+    return [seg0, seg1];
+}
+exports.split = split;
+function createLineSegment(points) {
+    switch (points.length) {
+        case 2:
+            return {
+                type: 'L',
+                x: points[1][0],
+                y: points[1][1],
+            };
+        case 3:
+            return {
+                type: 'Q',
+                cpx: points[1][0],
+                cpy: points[1][1],
+                x: points[2][0],
+                y: points[2][1],
+            };
+        case 4:
+            return {
+                type: 'C',
+                cp1x: points[1][0],
+                cp1y: points[1][1],
+                cp2x: points[2][0],
+                cp2y: points[2][1],
+                x: points[3][0],
+                y: points[3][1],
+            };
+        default:
+            throw new Error('Expected 2, 3 or 4 points for a line segment, got ' + points.length);
+    }
+}
+exports.createLineSegment = createLineSegment;