@remotion/web-renderer 4.0.429 → 4.0.430

package/dist/drawing/draw-dom-element.js

@@ -0,0 +1,85 @@
+import { calculateObjectFit, parseObjectFit } from './calculate-object-fit';
+import { fitSvgIntoItsContainer } from './fit-svg-into-its-dimensions';
+import { turnSvgIntoDrawable } from './turn-svg-into-drawable';
+const getReadableImageError = (err, node) => {
+    if (!(err instanceof DOMException)) {
+        return null;
+    }
+    if (err.name === 'SecurityError') {
+        return new Error(`Could not draw image with src="${node.src}" to canvas: ` +
+            `The image is tainted due to CORS restrictions. ` +
+            `The server hosting this image must respond with the "Access-Control-Allow-Origin" header. ` +
+            `See: https://remotion.dev/docs/client-side-rendering/migration`);
+    }
+    if (err.name === 'InvalidStateError') {
+        return new Error(`Could not draw image with src="${node.src}" to canvas: ` +
+            `The image is in a broken state. ` +
+            `This usually means the image failed to load - check that the URL is valid and accessible.`);
+    }
+    return null;
+};
+/**
+ * Draw an SVG element using "contain" behavior (the default for SVGs).
+ */
+const drawSvg = ({ drawable, dimensions, contextToDraw, }) => {
+    const fitted = fitSvgIntoItsContainer({
+        containerSize: dimensions,
+        elementSize: {
+            width: drawable.width,
+            height: drawable.height,
+        },
+    });
+    contextToDraw.drawImage(drawable, fitted.left, fitted.top, fitted.width, fitted.height);
+};
+/**
+ * Draw an image or canvas element using the object-fit CSS property.
+ */
+const drawReplacedElement = ({ drawable, dimensions, computedStyle, contextToDraw, }) => {
+    const objectFit = parseObjectFit(computedStyle.objectFit);
+    const intrinsicSize = drawable instanceof HTMLImageElement
+        ? { width: drawable.naturalWidth, height: drawable.naturalHeight }
+        : { width: drawable.width, height: drawable.height };
+    const result = calculateObjectFit({
+        objectFit,
+        containerSize: {
+            width: dimensions.width,
+            height: dimensions.height,
+            left: dimensions.left,
+            top: dimensions.top,
+        },
+        intrinsicSize,
+    });
+    // Use the 9-argument drawImage to support source cropping (for cover mode)
+    contextToDraw.drawImage(drawable, result.sourceX, result.sourceY, result.sourceWidth, result.sourceHeight, result.destX, result.destY, result.destWidth, result.destHeight);
+};
+export const drawDomElement = (node) => {
+    const domDrawFn = async ({ dimensions, contextToDraw, computedStyle, }) => {
+        // Handle SVG elements separately - they use "contain" behavior by default
+        if (node instanceof SVGSVGElement) {
+            const drawable = await turnSvgIntoDrawable(node);
+            drawSvg({ drawable, dimensions, contextToDraw });
+            return;
+        }
+        // Handle replaced elements (img, canvas) with object-fit support
+        if (node instanceof HTMLImageElement || node instanceof HTMLCanvasElement) {
+            try {
+                drawReplacedElement({
+                    drawable: node,
+                    dimensions,
+                    computedStyle,
+                    contextToDraw,
+                });
+            }
+            catch (err) {
+                if (node instanceof HTMLImageElement) {
+                    const readableError = getReadableImageError(err, node);
+                    if (readableError) {
+                        throw readableError;
+                    }
+                }
+                throw err;
+            }
+        }
+    };
+    return domDrawFn;
+};

package/dist/drawing/draw-element.js

@@ -0,0 +1,84 @@
+import { parseBorderRadius, setBorderRadius } from './border-radius';
+import { drawBackground } from './draw-background';
+import { drawBorder } from './draw-border';
+import { drawBorderRadius } from './draw-box-shadow';
+import { drawOutline } from './draw-outline';
+import { setOpacity } from './opacity';
+import { setOverflowHidden } from './overflow';
+import { setTransform } from './transform';
+export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, element, internalState, }) => {
+    const { backgroundImage, backgroundColor, backgroundClip } = computedStyle;
+    const borderRadius = parseBorderRadius({
+        borderRadius: computedStyle.borderRadius,
+        width: rect.width,
+        height: rect.height,
+    });
+    const finishTransform = setTransform({
+        ctx: context,
+        transform: totalMatrix,
+        parentRect,
+    });
+    const finishOpacity = setOpacity({
+        ctx: context,
+        opacity,
+    });
+    // Draw box shadow before border radius clip and background
+    drawBorderRadius({
+        ctx: context,
+        computedStyle,
+        rect,
+        borderRadius,
+        logLevel,
+    });
+    const finishBorderRadius = setBorderRadius({
+        ctx: context,
+        rect,
+        borderRadius,
+        forceClipEvenWhenZero: false,
+        computedStyle,
+        backgroundClip,
+    });
+    await drawBackground({
+        backgroundImage,
+        context,
+        rect,
+        backgroundColor,
+        backgroundClip,
+        element,
+        logLevel,
+        internalState,
+        computedStyle,
+        offsetLeft: parentRect.left,
+        offsetTop: parentRect.top,
+    });
+    await draw({ dimensions: rect, computedStyle, contextToDraw: context });
+    finishBorderRadius();
+    drawBorder({
+        ctx: context,
+        rect,
+        borderRadius,
+        computedStyle,
+    });
+    // Drawing outline ignores overflow: hidden, finishing it and starting a new one for the outline
+    drawOutline({
+        ctx: context,
+        rect,
+        borderRadius,
+        computedStyle,
+    });
+    const finishOverflowHidden = setOverflowHidden({
+        ctx: context,
+        rect,
+        borderRadius,
+        overflowHidden: computedStyle.overflow === 'hidden',
+        computedStyle,
+        backgroundClip,
+    });
+    finishTransform();
+    return {
+        cleanupAfterChildren: () => {
+            finishOpacity();
+            finishOverflowHidden();
+        },
+    };
+};

package/dist/drawing/draw-outline.js

@@ -0,0 +1,93 @@
+import { drawRoundedRectPath } from './draw-rounded';
+export const parseOutlineWidth = (value) => {
+    return parseFloat(value) || 0;
+};
+export const parseOutlineOffset = (value) => {
+    return parseFloat(value) || 0;
+};
+const getLineDashPattern = (style, width) => {
+    if (style === 'dashed') {
+        return [width * 2, width];
+    }
+    if (style === 'dotted') {
+        return [width, width];
+    }
+    return [];
+};
+export const drawOutline = ({ ctx, rect, borderRadius, computedStyle, }) => {
+    const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+    const { outlineStyle } = computedStyle;
+    const outlineColor = computedStyle.outlineColor || 'black';
+    const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
+    // Check if we have a visible outline
+    if (outlineWidth <= 0 ||
+        outlineStyle === 'none' ||
+        outlineStyle === 'hidden') {
+        return;
+    }
+    // Save original canvas state
+    const originalStrokeStyle = ctx.strokeStyle;
+    const originalLineWidth = ctx.lineWidth;
+    const originalLineDash = ctx.getLineDash();
+    ctx.strokeStyle = outlineColor;
+    ctx.lineWidth = outlineWidth;
+    ctx.setLineDash(getLineDashPattern(outlineStyle, outlineWidth));
+    // Calculate outline position
+    // Outline is drawn outside the border edge, offset by outlineOffset
+    const halfWidth = outlineWidth / 2;
+    const offset = outlineOffset + halfWidth;
+    const outlineX = rect.left - offset;
+    const outlineY = rect.top - offset;
+    const outlineW = rect.width + offset * 2;
+    const outlineH = rect.height + offset * 2;
+    // Adjust border radius for the outline offset
+    // When outline-offset is positive, we need to expand the radius
+    // When outline-offset is negative, we need to shrink the radius
+    const adjustedBorderRadius = {
+        topLeft: {
+            horizontal: borderRadius.topLeft.horizontal === 0
+                ? 0
+                : Math.max(0, borderRadius.topLeft.horizontal + offset),
+            vertical: borderRadius.topLeft.vertical === 0
+                ? 0
+                : Math.max(0, borderRadius.topLeft.vertical + offset),
+        },
+        topRight: {
+            horizontal: borderRadius.topRight.horizontal === 0
+                ? 0
+                : Math.max(0, borderRadius.topRight.horizontal + offset),
+            vertical: borderRadius.topRight.vertical === 0
+                ? 0
+                : Math.max(0, borderRadius.topRight.vertical + offset),
+        },
+        bottomRight: {
+            horizontal: borderRadius.bottomRight.horizontal === 0
+                ? 0
+                : Math.max(0, borderRadius.bottomRight.horizontal + offset),
+            vertical: borderRadius.bottomRight.vertical === 0
+                ? 0
+                : Math.max(0, borderRadius.bottomRight.vertical + offset),
+        },
+        bottomLeft: {
+            horizontal: borderRadius.bottomLeft.horizontal === 0
+                ? 0
+                : Math.max(0, borderRadius.bottomLeft.horizontal + offset),
+            vertical: borderRadius.bottomLeft.vertical === 0
+                ? 0
+                : Math.max(0, borderRadius.bottomLeft.vertical + offset),
+        },
+    };
+    drawRoundedRectPath({
+        ctx,
+        x: outlineX,
+        y: outlineY,
+        width: outlineW,
+        height: outlineH,
+        borderRadius: adjustedBorderRadius,
+    });
+    ctx.stroke();
+    // Restore original canvas state
+    ctx.strokeStyle = originalStrokeStyle;
+    ctx.lineWidth = originalLineWidth;
+    ctx.setLineDash(originalLineDash);
+};

package/dist/drawing/draw-rounded.js

@@ -0,0 +1,34 @@
+export const drawRoundedRectPath = ({ ctx, x, y, width, height, borderRadius, }) => {
+    ctx.beginPath();
+    // Start from top-left corner, after the radius
+    ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
+    // Top edge
+    ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+    // Top-right corner
+    if (borderRadius.topRight.horizontal > 0 ||
+        borderRadius.topRight.vertical > 0) {
+        ctx.ellipse(x + width - borderRadius.topRight.horizontal, y + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    }
+    // Right edge
+    ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+    // Bottom-right corner
+    if (borderRadius.bottomRight.horizontal > 0 ||
+        borderRadius.bottomRight.vertical > 0) {
+        ctx.ellipse(x + width - borderRadius.bottomRight.horizontal, y + height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    }
+    // Bottom edge
+    ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+    // Bottom-left corner
+    if (borderRadius.bottomLeft.horizontal > 0 ||
+        borderRadius.bottomLeft.vertical > 0) {
+        ctx.ellipse(x + borderRadius.bottomLeft.horizontal, y + height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    }
+    // Left edge
+    ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+    // Top-left corner
+    if (borderRadius.topLeft.horizontal > 0 ||
+        borderRadius.topLeft.vertical > 0) {
+        ctx.ellipse(x + borderRadius.topLeft.horizontal, y + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
+    }
+    ctx.closePath();
+};

package/dist/drawing/drawn-fn.js

@@ -0,0 +1 @@
+export {};

package/dist/drawing/fit-svg-into-its-dimensions.js

@@ -0,0 +1,35 @@
+// The bitmap created from the SVG height and width might not be what we expect.
+// Adjust the dimensions
+export const fitSvgIntoItsContainer = ({ containerSize, elementSize, }) => {
+    // If was already fitting, no need to calculate and lose precision
+    if (Math.round(containerSize.width) === Math.round(elementSize.width) &&
+        Math.round(containerSize.height) === Math.round(elementSize.height)) {
+        return {
+            width: containerSize.width,
+            height: containerSize.height,
+            top: containerSize.top,
+            left: containerSize.left,
+        };
+    }
+    if (containerSize.width <= 0 || containerSize.height <= 0) {
+        throw new Error(`Container must have positive dimensions, but got ${containerSize.width}x${containerSize.height}`);
+    }
+    if (elementSize.width <= 0 || elementSize.height <= 0) {
+        throw new Error(`Element must have positive dimensions, but got ${elementSize.width}x${elementSize.height}`);
+    }
+    const heightRatio = containerSize.height / elementSize.height;
+    const widthRatio = containerSize.width / elementSize.width;
+    const ratio = Math.min(heightRatio, widthRatio);
+    const newWidth = elementSize.width * ratio;
+    const newHeight = elementSize.height * ratio;
+    if (newWidth > containerSize.width + 0.000001 ||
+        newHeight > containerSize.height + 0.000001) {
+        throw new Error(`Element is too big to fit into the container. Max size: ${containerSize.width}x${containerSize.height}, element size: ${newWidth}x${newHeight}`);
+    }
+    return {
+        width: newWidth,
+        height: newHeight,
+        top: (containerSize.height - newHeight) / 2 + containerSize.top,
+        left: (containerSize.width - newWidth) / 2 + containerSize.left,
+    };
+};

package/dist/drawing/get-clipped-background.d.ts

@@ -0,0 +1,8 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+export declare const getClippedBackground: ({ element, boundingRect, logLevel, internalState, }: {
+    element: HTMLElement | SVGElement;
+    boundingRect: DOMRect;
+    logLevel: LogLevel;
+    internalState: InternalState;
+}) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/drawing/get-clipped-background.js

@@ -0,0 +1,14 @@
+import { compose } from '../compose';
+export const getClippedBackground = async ({ element, boundingRect, logLevel, internalState, }) => {
+    const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
+    const tempContext = tempCanvas.getContext('2d');
+    await compose({
+        element,
+        context: tempContext,
+        logLevel,
+        parentRect: boundingRect,
+        internalState,
+        onlyBackgroundClip: true,
+    });
+    return tempContext;
+};

package/dist/drawing/get-padding-box.js

@@ -0,0 +1,30 @@
+const getPaddingBox = (rect, computedStyle) => {
+    const borderLeft = parseFloat(computedStyle.borderLeftWidth);
+    const borderRight = parseFloat(computedStyle.borderRightWidth);
+    const borderTop = parseFloat(computedStyle.borderTopWidth);
+    const borderBottom = parseFloat(computedStyle.borderBottomWidth);
+    return new DOMRect(rect.left + borderLeft, rect.top + borderTop, rect.width - borderLeft - borderRight, rect.height - borderTop - borderBottom);
+};
+const getContentBox = (rect, computedStyle) => {
+    const paddingBox = getPaddingBox(rect, computedStyle);
+    const paddingLeft = parseFloat(computedStyle.paddingLeft);
+    const paddingRight = parseFloat(computedStyle.paddingRight);
+    const paddingTop = parseFloat(computedStyle.paddingTop);
+    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+    return new DOMRect(paddingBox.left + paddingLeft, paddingBox.top + paddingTop, paddingBox.width - paddingLeft - paddingRight, paddingBox.height - paddingTop - paddingBottom);
+};
+export const getBoxBasedOnBackgroundClip = (rect, computedStyle, backgroundClip) => {
+    if (!backgroundClip) {
+        return rect;
+    }
+    if (backgroundClip.includes('text')) {
+        return rect;
+    }
+    if (backgroundClip.includes('padding-box')) {
+        return getPaddingBox(rect, computedStyle);
+    }
+    if (backgroundClip.includes('content-box')) {
+        return getContentBox(rect, computedStyle);
+    }
+    return rect;
+};

package/dist/drawing/get-pretransform-rect.js

@@ -0,0 +1,49 @@
+// In some cases, we get a matrix that is too compressed:
+// e.g. https://github.com/remotion-dev/remotion/issues/6185
+// > You're rotating around the X-axis by ~89.96°, which means the Y-axis gets compressed to ⁠cos(89.96°) ≈ 0.000691 of its original size in the viewport.
+const MAX_SCALE_FACTOR = 100;
+export function getPreTransformRect(targetRect, matrix) {
+    // 1. Determine the effective 2D transformation by transforming basis vectors
+    const origin = new DOMPoint(0, 0).matrixTransform(matrix);
+    const unitX = new DOMPoint(1, 0).matrixTransform(matrix);
+    const unitY = new DOMPoint(0, 1).matrixTransform(matrix);
+    // 2. Compute the 2D basis vectors after transformation
+    const basisX = { x: unitX.x - origin.x, y: unitX.y - origin.y };
+    const basisY = { x: unitY.x - origin.x, y: unitY.y - origin.y };
+    // Check effective scale in each axis
+    const scaleX = Math.hypot(basisX.x, basisX.y);
+    const scaleY = Math.hypot(basisY.x, basisY.y);
+    // If either axis is too compressed, the inverse will explode
+    const minScale = Math.min(scaleX, scaleY);
+    if (minScale < 1 / MAX_SCALE_FACTOR) {
+        // Content is nearly invisible, e.g. 89.96deg X rotation (edge-on view)
+        return new DOMRect(0, 0, 0, 0);
+    }
+    // 3. Build the effective 2D matrix and invert it
+    const effective2D = new DOMMatrix([
+        basisX.x,
+        basisX.y, // a, b (first column)
+        basisY.x,
+        basisY.y, // c, d (second column)
+        origin.x,
+        origin.y, // e, f (translation)
+    ]);
+    const inverse2D = effective2D.inverse();
+    const wasNotInvertible = isNaN(inverse2D.m11);
+    // For example, a 90 degree rotation, is not being rendered
+    if (wasNotInvertible) {
+        return new DOMRect(0, 0, 0, 0);
+    }
+    // 4. Transform target rect corners using the 2D inverse
+    const corners = [
+        new DOMPoint(targetRect.x, targetRect.y),
+        new DOMPoint(targetRect.x + targetRect.width, targetRect.y),
+        new DOMPoint(targetRect.x + targetRect.width, targetRect.y + targetRect.height),
+        new DOMPoint(targetRect.x, targetRect.y + targetRect.height),
+    ];
+    const transformedCorners = corners.map((c) => c.matrixTransform(inverse2D));
+    // 5. Compute bounding box
+    const xs = transformedCorners.map((p) => p.x);
+    const ys = transformedCorners.map((p) => p.y);
+    return new DOMRect(Math.min(...xs), Math.min(...ys), Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys));
+}

package/dist/drawing/handle-3d-transform.js

@@ -0,0 +1,26 @@
+import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
+import { getNarrowerRect } from './clamp-rect-to-parent-bounds';
+import { getPreTransformRect } from './get-pretransform-rect';
+import { transformIn3d } from './transform-in-3d';
+export const getPrecomposeRectFor3DTransform = ({ element, parentRect, matrix, }) => {
+    const unclampedBiggestBoundingClientRect = getBiggestBoundingClientRect(element);
+    const biggestPossiblePretransformRect = getPreTransformRect(parentRect, matrix);
+    const preTransformRect = getNarrowerRect({
+        firstRect: unclampedBiggestBoundingClientRect,
+        secondRect: biggestPossiblePretransformRect,
+    });
+    return preTransformRect;
+};
+export const handle3dTransform = ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, internalState, }) => {
+    const { canvas: transformed, rect: transformedRect } = transformIn3d({
+        untransformedRect: precomposeRect,
+        matrix,
+        sourceCanvas: tempCanvas,
+        rectAfterTransforms,
+        internalState,
+    });
+    if (transformedRect.width <= 0 || transformedRect.height <= 0) {
+        return null;
+    }
+    return transformed;
+};

package/dist/drawing/handle-mask.js

@@ -0,0 +1,21 @@
+import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
+import { createCanvasGradient } from './parse-linear-gradient';
+export const getPrecomposeRectForMask = (element) => {
+    const boundingRect = getBiggestBoundingClientRect(element);
+    return boundingRect;
+};
+export const handleMask = ({ gradientInfo, rect, precomposeRect, tempContext, }) => {
+    const rectOffsetX = rect.left - precomposeRect.left;
+    const rectOffsetY = rect.top - precomposeRect.top;
+    const rectToFill = new DOMRect(rectOffsetX, rectOffsetY, rect.width, rect.height);
+    const gradient = createCanvasGradient({
+        ctx: tempContext,
+        rect: rectToFill,
+        gradientInfo,
+        offsetLeft: 0,
+        offsetTop: 0,
+    });
+    tempContext.globalCompositeOperation = 'destination-in';
+    tempContext.fillStyle = gradient;
+    tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
+};

package/dist/drawing/has-transform.js

@@ -0,0 +1,14 @@
+export const hasTransformCssValue = (style) => {
+    return style.transform !== 'none' && style.transform !== '';
+};
+export const hasRotateCssValue = (style) => {
+    return style.rotate !== 'none' && style.rotate !== '';
+};
+export const hasScaleCssValue = (style) => {
+    return style.scale !== 'none' && style.scale !== '';
+};
+export const hasAnyTransformCssValue = (style) => {
+    return (hasTransformCssValue(style) ||
+        hasRotateCssValue(style) ||
+        hasScaleCssValue(style));
+};

package/dist/drawing/mask-image.js

@@ -0,0 +1,14 @@
+import { parseLinearGradient } from './parse-linear-gradient';
+export const getMaskImageValue = (computedStyle) => {
+    // Check both standard and webkit-prefixed properties
+    const { maskImage, webkitMaskImage } = computedStyle;
+    const value = maskImage || webkitMaskImage;
+    if (!value || value === 'none') {
+        return null;
+    }
+    return value;
+};
+export const parseMaskImage = (maskImageValue) => {
+    // Only linear gradients are supported for now
+    return parseLinearGradient(maskImageValue);
+};

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/overflow.js

@@ -0,0 +1,14 @@
+import { setBorderRadius } from './border-radius';
+export const setOverflowHidden = ({ ctx, rect, borderRadius, overflowHidden, computedStyle, backgroundClip, }) => {
+    if (!overflowHidden) {
+        return () => { };
+    }
+    return setBorderRadius({
+        ctx,
+        rect,
+        borderRadius,
+        forceClipEvenWhenZero: true,
+        computedStyle,
+        backgroundClip,
+    });
+};