@remotion/web-renderer 4.0.384 → 4.0.385

package/dist/drawing/compose-canvas.js

@@ -0,0 +1,36 @@
+import { setBorderRadius } from './border-radius';
+import { calculateTransforms } from './calculate-transforms';
+import { turnSvgIntoDrawable } from './compose-svg';
+import { setOpacity } from './opacity';
+import { setTransform } from './transform';
+export const drawElementToCanvas = async (canvas, context) => {
+    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
+    if (opacity === 0) {
+        reset();
+        return;
+    }
+    const drawable = canvas instanceof SVGSVGElement
+        ? await turnSvgIntoDrawable(canvas)
+        : canvas;
+    const finishTransform = setTransform({
+        ctx: context,
+        transform: totalMatrix,
+    });
+    const finishBorderRadius = setBorderRadius({
+        ctx: context,
+        x: dimensions.left,
+        y: dimensions.top,
+        width: dimensions.width,
+        height: dimensions.height,
+        borderRadius,
+    });
+    const finishOpacity = setOpacity({
+        ctx: context,
+        opacity,
+    });
+    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    finishOpacity();
+    finishBorderRadius();
+    finishTransform();
+    reset();
+};

package/dist/drawing/compose-svg.d.ts

@@ -0,0 +1 @@
+export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/drawing/compose-svg.js

@@ -0,0 +1,34 @@
+export const turnSvgIntoDrawable = (svg) => {
+    const originalTransform = svg.style.transform;
+    const originalTransformOrigin = svg.style.transformOrigin;
+    const originalMarginLeft = svg.style.marginLeft;
+    const originalMarginRight = svg.style.marginRight;
+    const originalMarginTop = svg.style.marginTop;
+    const originalMarginBottom = svg.style.marginBottom;
+    svg.style.transform = 'none';
+    svg.style.transformOrigin = '';
+    // Margins were already included in the positioning calculation,
+    // so we need to remove them to avoid double counting.
+    svg.style.marginLeft = '0';
+    svg.style.marginRight = '0';
+    svg.style.marginTop = '0';
+    svg.style.marginBottom = '0';
+    const svgData = new XMLSerializer().serializeToString(svg);
+    svg.style.marginLeft = originalMarginLeft;
+    svg.style.marginRight = originalMarginRight;
+    svg.style.marginTop = originalMarginTop;
+    svg.style.marginBottom = originalMarginBottom;
+    svg.style.transform = originalTransform;
+    svg.style.transformOrigin = originalTransformOrigin;
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+        image.onload = function () {
+            resolve(image);
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};

package/dist/drawing/compose.d.ts

@@ -0,0 +1,5 @@
+import type { Composable } from '../composable';
+export declare const compose: ({ composables, context, }: {
+    composables: Composable[];
+    context: OffscreenCanvasRenderingContext2D;
+}) => Promise<void>;

package/dist/drawing/compose.js

@@ -0,0 +1,6 @@
+import { drawElementToCanvas } from './draw-element-to-canvas';
+export const compose = async ({ composables, context, }) => {
+    for (const composable of composables) {
+        await drawElementToCanvas(composable.element, context);
+    }
+};

package/dist/drawing/draw-border.d.ts

@@ -0,0 +1,10 @@
+import type { BorderRadiusCorners } from './border-radius';
+export declare const drawBorder: ({ ctx, x, y, width, height, borderRadius, computedStyle, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: BorderRadiusCorners;
+    computedStyle: CSSStyleDeclaration;
+}) => void;

package/dist/drawing/draw-border.js

@@ -0,0 +1,101 @@
+export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedStyle, }) => {
+    const { borderStyle, borderColor, borderWidth: computedBorderWidth, } = computedStyle;
+    // Parse border width (can be shorthand like "1px 2px 3px 4px")
+    const borderWidths = computedBorderWidth
+        .split(/\s+/)
+        .map((w) => parseFloat(w));
+    const borderTop = borderWidths[0] || 0;
+    const borderRight = borderWidths[1] || borderTop;
+    const borderBottom = borderWidths[2] || borderTop;
+    const borderLeft = borderWidths[3] || borderRight;
+    // Check if we have a visible border
+    const hasBorder = borderStyle &&
+        borderStyle !== 'none' &&
+        borderStyle !== 'hidden' &&
+        (borderTop > 0 || borderRight > 0 || borderBottom > 0 || borderLeft > 0);
+    if (!hasBorder) {
+        return;
+    }
+    const originalStrokeStyle = ctx.strokeStyle;
+    const originalLineWidth = ctx.lineWidth;
+    const originalLineDash = ctx.getLineDash();
+    ctx.strokeStyle = borderColor;
+    // Set line dash based on border style
+    if (borderStyle === 'dashed') {
+        const max = Math.max(borderTop, borderRight, borderBottom, borderLeft);
+        ctx.setLineDash([max * 2, max]);
+    }
+    else if (borderStyle === 'dotted') {
+        ctx.setLineDash([
+            Math.max(borderTop, borderRight, borderBottom, borderLeft),
+        ]);
+    }
+    else {
+        ctx.setLineDash([]);
+    }
+    // For simplicity, use the maximum border width if they differ
+    // A full implementation would draw each side separately
+    const maxBorderWidth = Math.max(borderTop, borderRight, borderBottom, borderLeft);
+    // Create path for border (inset by half the border width to draw inside)
+    ctx.beginPath();
+    const borderX = x + maxBorderWidth / 2;
+    const borderY = y + maxBorderWidth / 2;
+    const borderWidth = width - maxBorderWidth;
+    const borderHeight = height - maxBorderWidth;
+    // Account for border radius, adjusted for the border width
+    const adjustedBorderRadius = {
+        topLeft: {
+            horizontal: Math.max(0, borderRadius.topLeft.horizontal - maxBorderWidth / 2),
+            vertical: Math.max(0, borderRadius.topLeft.vertical - maxBorderWidth / 2),
+        },
+        topRight: {
+            horizontal: Math.max(0, borderRadius.topRight.horizontal - maxBorderWidth / 2),
+            vertical: Math.max(0, borderRadius.topRight.vertical - maxBorderWidth / 2),
+        },
+        bottomRight: {
+            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - maxBorderWidth / 2),
+            vertical: Math.max(0, borderRadius.bottomRight.vertical - maxBorderWidth / 2),
+        },
+        bottomLeft: {
+            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - maxBorderWidth / 2),
+            vertical: Math.max(0, borderRadius.bottomLeft.vertical - maxBorderWidth / 2),
+        },
+    };
+    // Draw path with border radius
+    ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
+    // Top edge
+    ctx.lineTo(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY);
+    // Top-right corner
+    if (adjustedBorderRadius.topRight.horizontal > 0 ||
+        adjustedBorderRadius.topRight.vertical > 0) {
+        ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    }
+    // Right edge
+    ctx.lineTo(borderX + borderWidth, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical);
+    // Bottom-right corner
+    if (adjustedBorderRadius.bottomRight.horizontal > 0 ||
+        adjustedBorderRadius.bottomRight.vertical > 0) {
+        ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.bottomRight.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    }
+    // Bottom edge
+    ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight);
+    // Bottom-left corner
+    if (adjustedBorderRadius.bottomLeft.horizontal > 0 ||
+        adjustedBorderRadius.bottomLeft.vertical > 0) {
+        ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    }
+    // Left edge
+    ctx.lineTo(borderX, borderY + adjustedBorderRadius.topLeft.vertical);
+    // Top-left corner
+    if (adjustedBorderRadius.topLeft.horizontal > 0 ||
+        adjustedBorderRadius.topLeft.vertical > 0) {
+        ctx.ellipse(borderX + adjustedBorderRadius.topLeft.horizontal, borderY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
+    }
+    ctx.closePath();
+    ctx.lineWidth = maxBorderWidth;
+    ctx.stroke();
+    // Restore original values
+    ctx.strokeStyle = originalStrokeStyle;
+    ctx.lineWidth = originalLineWidth;
+    ctx.setLineDash(originalLineDash);
+};

package/dist/drawing/draw-element-to-canvas.d.ts

@@ -0,0 +1,4 @@
+export declare const drawElementToCanvas: ({ element, context, }: {
+    element: HTMLElement | SVGElement;
+    context: OffscreenCanvasRenderingContext2D;
+}) => Promise<void>;

package/dist/drawing/draw-element-to-canvas.js

@@ -0,0 +1,72 @@
+import { parseBorderRadius, setBorderRadius } from './border-radius';
+import { calculateTransforms } from './calculate-transforms';
+import { drawBorder } from './draw-border';
+import { setOpacity } from './opacity';
+import { setTransform } from './transform';
+import { turnSvgIntoDrawable } from './turn-svg-into-drawable';
+export const drawElementToCanvas = async ({ element, context, }) => {
+    const { totalMatrix, reset, dimensions, opacity } = calculateTransforms(element);
+    if (opacity === 0) {
+        reset();
+        return;
+    }
+    if (dimensions.width <= 0 || dimensions.height <= 0) {
+        reset();
+        return;
+    }
+    const computedStyle = getComputedStyle(element);
+    const background = computedStyle.backgroundColor;
+    const borderRadius = parseBorderRadius({
+        borderRadius: computedStyle.borderRadius,
+        width: dimensions.width,
+        height: dimensions.height,
+    });
+    const finishTransform = setTransform({
+        ctx: context,
+        transform: totalMatrix,
+    });
+    const finishBorderRadius = setBorderRadius({
+        ctx: context,
+        x: dimensions.left,
+        y: dimensions.top,
+        width: dimensions.width,
+        height: dimensions.height,
+        borderRadius,
+    });
+    const finishOpacity = setOpacity({
+        ctx: context,
+        opacity,
+    });
+    const drawable = element instanceof SVGSVGElement
+        ? await turnSvgIntoDrawable(element)
+        : element instanceof HTMLImageElement
+            ? element
+            : element instanceof HTMLCanvasElement
+                ? element
+                : null;
+    if (background &&
+        background !== 'transparent' &&
+        !(background.startsWith('rgba') &&
+            (background.endsWith(', 0)') || background.endsWith(',0')))) {
+        const originalFillStyle = context.fillStyle;
+        context.fillStyle = background;
+        context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+        context.fillStyle = originalFillStyle;
+    }
+    if (drawable) {
+        context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    }
+    drawBorder({
+        ctx: context,
+        x: dimensions.left,
+        y: dimensions.top,
+        width: dimensions.width,
+        height: dimensions.height,
+        borderRadius,
+        computedStyle,
+    });
+    finishOpacity();
+    finishBorderRadius();
+    finishTransform();
+    reset();
+};

package/dist/drawing/get-computed-style-cache.js

@@ -0,0 +1 @@
+"use strict";

package/dist/drawing/opacity.d.ts

@@ -0,0 +1,4 @@
+export declare const setOpacity: ({ ctx, opacity, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    opacity: number;
+}) => () => void;

package/dist/drawing/opacity.js

@@ -0,0 +1,7 @@
+export const setOpacity = ({ ctx, opacity, }) => {
+    const previousAlpha = ctx.globalAlpha;
+    ctx.globalAlpha = previousAlpha * opacity;
+    return () => {
+        ctx.globalAlpha = previousAlpha;
+    };
+};

package/dist/drawing/parse-transform-origin.d.ts

@@ -0,0 +1,4 @@
+export declare const parseTransformOrigin: (transformOrigin: string) => {
+    x: number;
+    y: number;
+} | null;

package/dist/drawing/parse-transform-origin.js

@@ -0,0 +1,7 @@
+export const parseTransformOrigin = (transformOrigin) => {
+    if (transformOrigin.trim() === '') {
+        return null;
+    }
+    const [x, y] = transformOrigin.split(' ');
+    return { x: parseFloat(x), y: parseFloat(y) };
+};

package/dist/drawing/transform.d.ts

@@ -0,0 +1,4 @@
+export declare const setTransform: ({ ctx, transform, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    transform: DOMMatrix;
+}) => () => void;

package/dist/drawing/transform.js

@@ -0,0 +1,6 @@
+export const setTransform = ({ ctx, transform, }) => {
+    ctx.setTransform(transform);
+    return () => {
+        ctx.setTransform(new DOMMatrix());
+    };
+};

package/dist/drawing/turn-svg-into-drawable.d.ts

@@ -0,0 +1 @@
+export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/drawing/turn-svg-into-drawable.js

@@ -0,0 +1,34 @@
+export const turnSvgIntoDrawable = (svg) => {
+    const originalTransform = svg.style.transform;
+    const originalTransformOrigin = svg.style.transformOrigin;
+    const originalMarginLeft = svg.style.marginLeft;
+    const originalMarginRight = svg.style.marginRight;
+    const originalMarginTop = svg.style.marginTop;
+    const originalMarginBottom = svg.style.marginBottom;
+    svg.style.transform = 'none';
+    svg.style.transformOrigin = '';
+    // Margins were already included in the positioning calculation,
+    // so we need to remove them to avoid double counting.
+    svg.style.marginLeft = '0';
+    svg.style.marginRight = '0';
+    svg.style.marginTop = '0';
+    svg.style.marginBottom = '0';
+    const svgData = new XMLSerializer().serializeToString(svg);
+    svg.style.marginLeft = originalMarginLeft;
+    svg.style.marginRight = originalMarginRight;
+    svg.style.marginTop = originalMarginTop;
+    svg.style.marginBottom = originalMarginBottom;
+    svg.style.transform = originalTransform;
+    svg.style.transformOrigin = originalTransformOrigin;
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+        image.onload = function () {
+            resolve(image);
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};