@remotion/web-renderer 4.0.387 → 4.0.390

package/dist/compose.js

@@ -1,7 +1,14 @@
 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) => {
     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
+            // entirety
+            if (node.parentElement instanceof SVGSVGElement) {
+                return NodeFilter.FILTER_REJECT;
+            }
             const computedStyle = getComputedStyle(node);
             return computedStyle.display === 'none'
                 ? NodeFilter.FILTER_REJECT
@@ -12,7 +19,25 @@ export const compose = async (element, context) => {
     while (treeWalker.nextNode()) {
         const node = treeWalker.currentNode;
         if (node instanceof HTMLElement || node instanceof SVGElement) {
-            await drawElementToCanvas({ element: node, context });
+            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);
+                    }
+                },
+            });
+        }
+        else if (node instanceof Text) {
+            await handleTextNode(node, context);
         }
     }
 };

package/dist/drawing/calculate-transforms.d.ts

@@ -7,4 +7,5 @@ export declare const calculateTransforms: (element: HTMLElement | SVGElement) =>
         y: number;
     };
     opacity: number;
+    computedStyle: CSSStyleDeclaration;
 };

package/dist/drawing/calculate-transforms.js

@@ -22,6 +22,7 @@ export const calculateTransforms = (element) => {
     const transforms = [];
     const toReset = [];
     let opacity = 1;
+    let elementComputedStyle = null;
     while (parent) {
         const computedStyle = getComputedStyle(parent);
         // Multiply opacity values from element and all parents
@@ -29,6 +30,9 @@ export const calculateTransforms = (element) => {
         if (parentOpacity && parentOpacity !== '') {
             opacity *= parseFloat(parentOpacity);
         }
+        if (parent === element) {
+            elementComputedStyle = computedStyle;
+        }
         if ((computedStyle.transform && computedStyle.transform !== 'none') ||
             parent === element) {
             const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
@@ -67,6 +71,9 @@ export const calculateTransforms = (element) => {
             .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
         totalMatrix.multiplySelf(transformMatrix);
     }
+    if (!elementComputedStyle) {
+        throw new Error('Element computed style not found');
+    }
     return {
         dimensions,
         totalMatrix,
@@ -77,5 +84,6 @@ export const calculateTransforms = (element) => {
         },
         nativeTransformOrigin,
         opacity,
+        computedStyle: elementComputedStyle,
     };
 };

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

@@ -1,4 +1,5 @@
-export declare const drawElementToCanvas: ({ element, context, }: {
+export declare const drawElementToCanvas: ({ element, context, draw, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
+    draw: (dimensions: DOMRect, computedStyle: CSSStyleDeclaration) => Promise<void> | void;
 }) => Promise<void>;

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

@@ -3,9 +3,8 @@ 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);
+export const drawElementToCanvas = async ({ element, context, draw, }) => {
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
     if (opacity === 0) {
         reset();
         return;
@@ -14,7 +13,6 @@ export const drawElementToCanvas = async ({ element, context, }) => {
         reset();
         return;
     }
-    const computedStyle = getComputedStyle(element);
     const background = computedStyle.backgroundColor;
     const borderRadius = parseBorderRadius({
         borderRadius: computedStyle.borderRadius,
@@ -37,13 +35,6 @@ export const drawElementToCanvas = async ({ element, context, }) => {
         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') &&
@@ -53,9 +44,7 @@ export const drawElementToCanvas = async ({ element, context, }) => {
         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);
-    }
+    await draw(dimensions, computedStyle);
     drawBorder({
         ctx: context,
         x: dimensions.left,

package/dist/drawing/text/find-line-breaks.text.d.ts

@@ -0,0 +1,5 @@
+export declare function findLineBreaks(span: HTMLSpanElement, rtl: boolean): Array<{
+    text: string;
+    offsetTop: number;
+    offsetHorizontal: number;
+}>;

package/dist/drawing/text/find-line-breaks.text.js

@@ -0,0 +1,67 @@
+import { getCollapsedText } from './get-collapsed-text';
+export function findLineBreaks(span, rtl) {
+    const textNode = span.childNodes[0];
+    const originalText = textNode.textContent;
+    const originalRect = span.getBoundingClientRect();
+    const computedStyle = getComputedStyle(span);
+    const segmenter = new Intl.Segmenter('en', { granularity: 'word' });
+    const segments = segmenter.segment(originalText);
+    const words = Array.from(segments).map((s) => s.segment);
+    const lines = [];
+    let currentLine = '';
+    let testText = '';
+    let previousRect = originalRect;
+    textNode.textContent = '';
+    for (let i = 0; i < words.length; i += 1) {
+        const word = words[i];
+        testText += word;
+        let wordsToAdd = word;
+        while (typeof words[i + 1] !== 'undefined' && words[i + 1].trim() === '') {
+            testText += words[i + 1];
+            wordsToAdd += words[i + 1];
+            i++;
+        }
+        previousRect = span.getBoundingClientRect();
+        textNode.textContent = testText;
+        const collapsedText = getCollapsedText(span);
+        textNode.textContent = collapsedText;
+        const rect = span.getBoundingClientRect();
+        const currentHeight = rect.height;
+        // If height changed significantly, we had a line break
+        if (previousRect &&
+            previousRect.height !== 0 &&
+            Math.abs(currentHeight - previousRect.height) > 2) {
+            const offsetHorizontal = rtl
+                ? previousRect.right - originalRect.right
+                : previousRect.left - originalRect.left;
+            const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes('preserve');
+            lines.push({
+                text: shouldCollapse ? currentLine.trim() : currentLine,
+                offsetTop: currentHeight - previousRect.height,
+                offsetHorizontal,
+            });
+            currentLine = wordsToAdd;
+        }
+        else {
+            currentLine += wordsToAdd;
+        }
+    }
+    // Add the last line
+    if (currentLine) {
+        textNode.textContent = testText;
+        const rects = span.getClientRects();
+        const rect = span.getBoundingClientRect();
+        const lastRect = rects[rects.length - 1];
+        const offsetHorizontal = rtl
+            ? lastRect.right - originalRect.right
+            : lastRect.left - originalRect.left;
+        lines.push({
+            text: currentLine,
+            offsetTop: rect.height - previousRect.height,
+            offsetHorizontal,
+        });
+    }
+    // Reset to original text
+    textNode.textContent = originalText;
+    return lines;
+}

package/dist/drawing/text/get-collapsed-text.d.ts

@@ -0,0 +1 @@
+export declare const getCollapsedText: (span: HTMLSpanElement) => string;

package/dist/drawing/text/get-collapsed-text.js

@@ -0,0 +1,46 @@
+export const getCollapsedText = (span) => {
+    const textNode = span.firstChild;
+    if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
+        throw new Error('Span must contain a single text node');
+    }
+    const originalText = textNode.textContent || '';
+    let collapsedText = originalText;
+    // Helper to measure width
+    const measureWidth = (text) => {
+        textNode.textContent = text;
+        return span.getBoundingClientRect().width;
+    };
+    const originalWidth = measureWidth(originalText);
+    // Test leading whitespace
+    if (/^\s/.test(collapsedText)) {
+        const trimmedLeading = collapsedText.replace(/^\s+/, '');
+        const newWidth = measureWidth(trimmedLeading);
+        if (newWidth === originalWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = trimmedLeading;
+        }
+    }
+    // Test trailing whitespace (on current collapsed text)
+    if (/\s$/.test(collapsedText)) {
+        const currentWidth = measureWidth(collapsedText);
+        const trimmedTrailing = collapsedText.replace(/\s+$/, '');
+        const newWidth = measureWidth(trimmedTrailing);
+        if (newWidth === currentWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = trimmedTrailing;
+        }
+    }
+    // Test internal duplicate whitespace (on current collapsed text)
+    if (/\s\s/.test(collapsedText)) {
+        const currentWidth = measureWidth(collapsedText);
+        const collapsedInternal = collapsedText.replace(/\s\s+/g, ' ');
+        const newWidth = measureWidth(collapsedInternal);
+        if (newWidth === currentWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = collapsedInternal;
+        }
+    }
+    // Restore original text
+    textNode.textContent = originalText;
+    return collapsedText;
+};

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

@@ -0,0 +1 @@
+export declare const handleTextNode: (node: Text, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

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

@@ -0,0 +1,81 @@
+// 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) => {
+    const span = document.createElement('span');
+    const parent = node.parentNode;
+    if (!parent) {
+        throw new Error('Text node has no parent');
+    }
+    parent.insertBefore(span, node);
+    span.appendChild(node);
+    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();
+        },
+    });
+    // Undo the layout manipulation
+    parent.insertBefore(node, span);
+    parent.removeChild(span);
+};