@remotion/web-renderer 4.0.391 → 4.0.393

package/dist/can-use-webfs-target.d.ts

@@ -0,0 +1 @@
+export declare const canUseWebFsWriter: () => Promise<boolean>;

package/dist/can-use-webfs-target.js

@@ -0,0 +1,19 @@
+export const canUseWebFsWriter = async () => {
+    if (!('storage' in navigator)) {
+        return false;
+    }
+    if (!('getDirectory' in navigator.storage)) {
+        return false;
+    }
+    try {
+        const directoryHandle = await navigator.storage.getDirectory();
+        const fileHandle = await directoryHandle.getFileHandle('remotion-probe-web-fs-support', {
+            create: true,
+        });
+        const canUse = fileHandle.createWritable !== undefined;
+        return canUse;
+    }
+    catch (_a) {
+        return false;
+    }
+};

package/dist/compose.d.ts

@@ -1 +1,6 @@
-export declare const compose: (element: HTMLDivElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;
+export declare const compose: ({ element, context, offsetLeft, offsetTop, }: {
+    element: HTMLElement | SVGElement;
+    context: OffscreenCanvasRenderingContext2D;
+    offsetLeft: number;
+    offsetTop: number;
+}) => Promise<void>;

package/dist/compose.js

@@ -1,7 +1,23 @@
+import { drawDomElement } from './drawing/draw-dom-element';
 import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
 import { handleTextNode } from './drawing/text/handle-text-node';
-import { turnSvgIntoDrawable } from './drawing/turn-svg-into-drawable';
-export const compose = async (element, context) => {
+import { skipToNextNonDescendant } from './walk-tree';
+const walkOverNode = ({ node, context, offsetLeft, offsetTop, }) => {
+    if (node instanceof HTMLElement || node instanceof SVGElement) {
+        return drawElementToCanvas({
+            element: node,
+            context,
+            draw: drawDomElement(node),
+            offsetLeft,
+            offsetTop,
+        });
+    }
+    if (node instanceof Text) {
+        return handleTextNode({ node, context, offsetLeft, offsetTop });
+    }
+    throw new Error('Unknown node type');
+};
+export const compose = async ({ element, context, offsetLeft, offsetTop, }) => {
     const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
         if (node instanceof Element) {
             // SVG does have children, but we process SVG elements in its
@@ -16,28 +32,20 @@ export const compose = async (element, context) => {
         }
         return NodeFilter.FILTER_ACCEPT;
     });
-    while (treeWalker.nextNode()) {
-        const node = treeWalker.currentNode;
-        if (node instanceof HTMLElement || node instanceof SVGElement) {
-            await drawElementToCanvas({
-                element: node,
-                context,
-                draw: async (dimensions) => {
-                    const drawable = await (node instanceof SVGSVGElement
-                        ? turnSvgIntoDrawable(node)
-                        : node instanceof HTMLImageElement
-                            ? node
-                            : node instanceof HTMLCanvasElement
-                                ? node
-                                : null);
-                    if (drawable) {
-                        context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-                    }
-                },
-            });
+    while (true) {
+        const val = await walkOverNode({
+            node: treeWalker.currentNode,
+            context,
+            offsetLeft,
+            offsetTop,
+        });
+        if (val === 'skip-children') {
+            if (!skipToNextNonDescendant(treeWalker)) {
+                break;
+            }
         }
-        else if (node instanceof Text) {
-            await handleTextNode(node, context);
+        else if (!treeWalker.nextNode()) {
+            break;
         }
     }
 };

package/dist/drawing/calculate-transforms.js

@@ -39,17 +39,34 @@ export const calculateTransforms = (element) => {
                 ? undefined
                 : computedStyle.transform;
             const matrix = new DOMMatrix(toParse);
-            const { transform } = parent.style;
+            const { transform, scale, rotate } = parent.style;
+            const additionalMatrices = [];
+            // The order of transformations is:
+            // 1. Translate --> We do not have to consider it since it changes getClientBoundingRect()
+            // 2. Rotate
+            // 3. Scale
+            // 4. CSS "transform"
+            if (rotate !== '' && rotate !== 'none') {
+                additionalMatrices.push(new DOMMatrix(`rotate(${rotate})`));
+            }
+            if (scale !== '' && scale !== 'none') {
+                additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+            }
+            additionalMatrices.push(matrix);
             parent.style.transform = 'none';
+            parent.style.scale = 'none';
+            parent.style.rotate = 'none';
             transforms.push({
-                matrix,
                 rect: parent,
                 transformOrigin: computedStyle.transformOrigin,
                 boundingClientRect: null,
+                matrices: additionalMatrices,
             });
             const parentRef = parent;
             toReset.push(() => {
                 parentRef.style.transform = transform;
+                parentRef.style.scale = scale;
+                parentRef.style.rotate = rotate;
             });
         }
         parent = parent.parentElement;
@@ -64,12 +81,14 @@ export const calculateTransforms = (element) => {
         if (!transform.boundingClientRect) {
             throw new Error('Bounding client rect not found');
         }
-        const globalTransformOrigin = getGlobalTransformOrigin(transform);
-        const transformMatrix = new DOMMatrix()
-            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
-            .multiply(transform.matrix)
-            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-        totalMatrix.multiplySelf(transformMatrix);
+        for (const matrix of transform.matrices) {
+            const globalTransformOrigin = getGlobalTransformOrigin(transform);
+            const transformMatrix = new DOMMatrix()
+                .translate(globalTransformOrigin.x, globalTransformOrigin.y)
+                .multiply(matrix)
+                .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+            totalMatrix.multiplySelf(transformMatrix);
+        }
     }
     if (!elementComputedStyle) {
         throw new Error('Element computed style not found');

package/dist/drawing/draw-dom-element.d.ts

@@ -0,0 +1,2 @@
+import type { DrawFn } from './drawn-fn';
+export declare const drawDomElement: (node: HTMLElement | SVGElement) => DrawFn;

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

@@ -0,0 +1,17 @@
+import { turnSvgIntoDrawable } from './turn-svg-into-drawable';
+export const drawDomElement = (node) => {
+    const domDrawFn = async ({ dimensions, contextToDraw }) => {
+        const drawable = await (node instanceof SVGSVGElement
+            ? turnSvgIntoDrawable(node)
+            : node instanceof HTMLImageElement
+                ? node
+                : node instanceof HTMLCanvasElement
+                    ? node
+                    : null);
+        if (!drawable) {
+            return;
+        }
+        contextToDraw.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    };
+    return domDrawFn;
+};

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

@@ -1,5 +1,9 @@
-export declare const drawElementToCanvas: ({ element, context, draw, }: {
+import type { DrawFn } from './drawn-fn';
+export type DrawElementToCanvasReturnValue = 'continue' | 'skip-children';
+export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
-    draw: (dimensions: DOMRect, computedStyle: CSSStyleDeclaration) => Promise<void> | void;
-}) => Promise<void>;
+    draw: DrawFn;
+    offsetLeft: number;
+    offsetTop: number;
+}) => Promise<DrawElementToCanvasReturnValue>;

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

@@ -1,61 +1,53 @@
-import { parseBorderRadius, setBorderRadius } from './border-radius';
+import { compose } from '../compose';
 import { calculateTransforms } from './calculate-transforms';
-import { drawBorder } from './draw-border';
-import { setOpacity } from './opacity';
-import { setTransform } from './transform';
-export const drawElementToCanvas = async ({ element, context, draw, }) => {
+import { drawElement } from './draw-element';
+import { transformIn3d } from './transform-in-3d';
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, }) => {
     const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
     if (opacity === 0) {
         reset();
-        return;
+        return 'continue';
     }
     if (dimensions.width <= 0 || dimensions.height <= 0) {
         reset();
-        return;
+        return 'continue';
     }
-    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,
-    });
-    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 (!totalMatrix.is2D) {
+        const canvasOffsetLeft = Math.min(dimensions.left, 0);
+        const canvasOffsetTop = Math.min(dimensions.top, 0);
+        const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
+        const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
+        const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
+        const context2 = tempCanvas.getContext('2d');
+        if (!context2) {
+            throw new Error('Could not get context');
+        }
+        await compose({
+            element,
+            context: context2,
+            offsetLeft: canvasOffsetLeft,
+            offsetTop: canvasOffsetTop,
+        });
+        const transformed = transformIn3d({
+            canvasWidth: tempCanvasWidth,
+            canvasHeight: tempCanvasHeight,
+            matrix: totalMatrix,
+            sourceCanvas: tempCanvas,
+            offsetLeft: canvasOffsetLeft,
+            offsetTop: canvasOffsetTop,
+        });
+        context.drawImage(transformed, 0, 0);
+        reset();
+        return 'skip-children';
     }
-    await draw(dimensions, computedStyle);
-    drawBorder({
-        ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
-        borderRadius,
+    await drawElement({
+        dimensions: new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height),
         computedStyle,
+        context,
+        draw,
+        opacity,
+        totalMatrix,
     });
-    finishOpacity();
-    finishBorderRadius();
-    finishTransform();
     reset();
+    return 'continue';
 };

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

@@ -0,0 +1,9 @@
+import type { DrawFn } from './drawn-fn';
+export declare const drawElement: ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }: {
+    dimensions: DOMRect;
+    computedStyle: CSSStyleDeclaration;
+    context: OffscreenCanvasRenderingContext2D;
+    opacity: number;
+    totalMatrix: DOMMatrix;
+    draw: DrawFn;
+}) => Promise<void>;

package/dist/drawing/draw-element.js

@@ -0,0 +1,50 @@
+import { parseBorderRadius, setBorderRadius } from './border-radius';
+import { drawBorder } from './draw-border';
+import { setOpacity } from './opacity';
+import { setTransform } from './transform';
+export const drawElement = async ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }) => {
+    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,
+    });
+    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;
+    }
+    await draw({ dimensions, computedStyle, contextToDraw: context });
+    drawBorder({
+        ctx: context,
+        x: dimensions.left,
+        y: dimensions.top,
+        width: dimensions.width,
+        height: dimensions.height,
+        borderRadius,
+        computedStyle,
+    });
+    finishOpacity();
+    finishBorderRadius();
+    finishTransform();
+};

package/dist/drawing/drawn-fn.d.ts

@@ -0,0 +1,5 @@
+export type DrawFn = ({ computedStyle, contextToDraw, dimensions, }: {
+    dimensions: DOMRect;
+    computedStyle: CSSStyleDeclaration;
+    contextToDraw: OffscreenCanvasRenderingContext2D;
+}) => Promise<void> | void;

package/dist/drawing/drawn-fn.js

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

package/dist/drawing/text/apply-text-transform.d.ts

@@ -0,0 +1 @@
+export declare const applyTextTransform: (text: string, transform: string) => string;

package/dist/drawing/text/apply-text-transform.js

@@ -0,0 +1,12 @@
+export const applyTextTransform = (text, transform) => {
+    if (transform === 'uppercase') {
+        return text.toUpperCase();
+    }
+    if (transform === 'lowercase') {
+        return text.toLowerCase();
+    }
+    if (transform === 'capitalize') {
+        return text.replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+    return text;
+};

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

@@ -0,0 +1,2 @@
+import type { DrawFn } from '../drawn-fn';
+export declare const drawText: (span: HTMLSpanElement) => DrawFn;

package/dist/drawing/text/draw-text.js

@@ -0,0 +1,44 @@
+import { Internals } from 'remotion';
+import { applyTextTransform } from './apply-text-transform';
+import { findLineBreaks } from './find-line-breaks.text';
+import { getCollapsedText } from './get-collapsed-text';
+export const drawText = (span) => {
+    const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
+        const { fontFamily, fontSize, fontWeight, color, lineHeight, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
+        const isVertical = writingMode !== 'horizontal-tb';
+        if (isVertical) {
+            // TODO: Only warn once per render.
+            Internals.Log.warn({
+                logLevel: 'warn',
+                tag: '@remotion/web-renderer',
+            }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
+            return;
+        }
+        contextToDraw.save();
+        contextToDraw.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+        contextToDraw.fillStyle = color;
+        contextToDraw.letterSpacing = letterSpacing;
+        const fontSizePx = parseFloat(fontSize);
+        // TODO: This is not necessarily correct, need to create text and measure to know for sure
+        const lineHeightPx = lineHeight === 'normal' ? 1.2 * fontSizePx : parseFloat(lineHeight);
+        const baselineOffset = (lineHeightPx - fontSizePx) / 2;
+        const isRTL = direction === 'rtl';
+        contextToDraw.textAlign = isRTL ? 'right' : 'left';
+        contextToDraw.textBaseline = 'top';
+        const originalText = span.textContent;
+        const collapsedText = getCollapsedText(span);
+        const transformedText = applyTextTransform(collapsedText, textTransform);
+        span.textContent = transformedText;
+        // For RTL text, fill from the right edge instead of left
+        const xPosition = isRTL ? rect.right : rect.left;
+        const lines = findLineBreaks(span, isRTL);
+        let offsetTop = 0;
+        for (const line of lines) {
+            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+            offsetTop += line.offsetTop;
+        }
+        span.textContent = originalText;
+        contextToDraw.restore();
+    };
+    return drawFn;
+};

package/dist/drawing/text/handle-text-node.d.ts

@@ -1 +1,7 @@
-export declare const handleTextNode: (node: Text, context: OffscreenCanvasRenderingContext2D) => Promise<void>;
+import type { DrawElementToCanvasReturnValue } from '../draw-element-to-canvas';
+export declare const handleTextNode: ({ node, context, offsetLeft, offsetTop, }: {
+    node: Text;
+    context: OffscreenCanvasRenderingContext2D;
+    offsetLeft: number;
+    offsetTop: number;
+}) => Promise<DrawElementToCanvasReturnValue>;

package/dist/drawing/text/handle-text-node.js

@@ -1,32 +1,6 @@
-// Supported:
-// - fontFamily
-// - fontSize
-// - fontWeight
-// - color
-// - lineHeight
-// - direction
-// - letterSpacing
-// - textTransform
-// Not supported:
-// - writingMode
-// - textDecoration
-import { Internals } from 'remotion';
 import { drawElementToCanvas } from '../draw-element-to-canvas';
-import { findLineBreaks } from './find-line-breaks.text';
-import { getCollapsedText } from './get-collapsed-text';
-const applyTextTransform = (text, transform) => {
-    if (transform === 'uppercase') {
-        return text.toUpperCase();
-    }
-    if (transform === 'lowercase') {
-        return text.toLowerCase();
-    }
-    if (transform === 'capitalize') {
-        return text.replace(/\b\w/g, (char) => char.toUpperCase());
-    }
-    return text;
-};
-export const handleTextNode = async (node, context) => {
+import { drawText } from './draw-text';
+export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, }) => {
     const span = document.createElement('span');
     const parent = node.parentNode;
     if (!parent) {
@@ -34,48 +8,15 @@ export const handleTextNode = async (node, context) => {
     }
     parent.insertBefore(span, node);
     span.appendChild(node);
-    await drawElementToCanvas({
+    const value = await drawElementToCanvas({
         context,
         element: span,
-        draw(rect, style) {
-            const { fontFamily, fontSize, fontWeight, color, lineHeight, direction, writingMode, letterSpacing, textTransform, } = style;
-            const isVertical = writingMode !== 'horizontal-tb';
-            if (isVertical) {
-                // TODO: Only warn once per render.
-                Internals.Log.warn({
-                    logLevel: 'warn',
-                    tag: '@remotion/web-renderer',
-                }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
-                return;
-            }
-            context.save();
-            context.font = `${fontWeight} ${fontSize} ${fontFamily}`;
-            context.fillStyle = color;
-            context.letterSpacing = letterSpacing;
-            const fontSizePx = parseFloat(fontSize);
-            // TODO: This is not necessarily correct, need to create text and measure to know for sure
-            const lineHeightPx = lineHeight === 'normal' ? 1.2 * fontSizePx : parseFloat(lineHeight);
-            const baselineOffset = (lineHeightPx - fontSizePx) / 2;
-            const isRTL = direction === 'rtl';
-            context.textAlign = isRTL ? 'right' : 'left';
-            context.textBaseline = 'top';
-            const originalText = span.textContent;
-            const collapsedText = getCollapsedText(span);
-            const transformedText = applyTextTransform(collapsedText, textTransform);
-            span.textContent = transformedText;
-            // For RTL text, fill from the right edge instead of left
-            const xPosition = isRTL ? rect.right : rect.left;
-            const lines = findLineBreaks(span, isRTL);
-            let offsetTop = 0;
-            for (const line of lines) {
-                context.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
-                offsetTop += line.offsetTop;
-            }
-            span.textContent = originalText;
-            context.restore();
-        },
+        draw: drawText(span),
+        offsetLeft,
+        offsetTop,
     });
     // Undo the layout manipulation
     parent.insertBefore(node, span);
     parent.removeChild(span);
+    return value;
 };

package/dist/drawing/transform-in-3d.d.ts

@@ -0,0 +1,8 @@
+export declare const transformIn3d: ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }: {
+    canvasWidth: number;
+    canvasHeight: number;
+    offsetLeft: number;
+    offsetTop: number;
+    matrix: DOMMatrix;
+    sourceCanvas: HTMLCanvasElement | OffscreenCanvas;
+}) => OffscreenCanvas;