@remotion/web-renderer 4.0.395 → 4.0.397

package/dist/drawing/process-node.js

@@ -0,0 +1,116 @@
+import { Internals } from 'remotion';
+import { calculateTransforms } from './calculate-transforms';
+import { getWiderRectAndExpand } from './clamp-rect-to-parent-bounds';
+import { doRectsIntersect } from './do-rects-intersect';
+import { drawElement } from './draw-element';
+import { getPrecomposeRectFor3DTransform, handle3dTransform, } from './handle-3d-transform';
+import { getPrecomposeRectForMask, handleMask } from './handle-mask';
+import { precomposeDOMElement } from './precompose';
+import { roundToExpandRect } from './round-to-expand-rect';
+import { transformDOMRect } from './transform-rect-with-matrix';
+export const processNode = async ({ element, context, draw, logLevel, parentRect, internalState, rootElement, }) => {
+    const { totalMatrix, reset, dimensions, opacity, computedStyle, precompositing, } = calculateTransforms({
+        element,
+        rootElement,
+    });
+    if (opacity === 0) {
+        reset();
+        return { type: 'skip-children' };
+    }
+    if (dimensions.width <= 0 || dimensions.height <= 0) {
+        reset();
+        return { type: 'continue', cleanupAfterChildren: null };
+    }
+    const rect = new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height);
+    if (precompositing.needsPrecompositing) {
+        const start = Date.now();
+        let precomposeRect = null;
+        if (precompositing.needsMaskImage) {
+            precomposeRect = getWiderRectAndExpand({
+                firstRect: precomposeRect,
+                secondRect: getPrecomposeRectForMask(element),
+            });
+        }
+        if (precompositing.needs3DTransformViaWebGL) {
+            precomposeRect = getWiderRectAndExpand({
+                firstRect: precomposeRect,
+                secondRect: getPrecomposeRectFor3DTransform({
+                    element,
+                    parentRect,
+                    matrix: totalMatrix,
+                }),
+            });
+        }
+        if (!precomposeRect) {
+            throw new Error('Precompose rect not found');
+        }
+        if (precomposeRect.width <= 0 || precomposeRect.height <= 0) {
+            return { type: 'continue', cleanupAfterChildren: null };
+        }
+        if (!doRectsIntersect(precomposeRect, parentRect)) {
+            return { type: 'continue', cleanupAfterChildren: null };
+        }
+        const { tempCanvas, tempContext } = await precomposeDOMElement({
+            boundingRect: precomposeRect,
+            element,
+            logLevel,
+            internalState,
+        });
+        let drawable = tempCanvas;
+        let cleanupWebGL = () => { };
+        const rectAfterTransforms = roundToExpandRect(transformDOMRect({
+            rect: precomposeRect,
+            matrix: totalMatrix,
+        }));
+        if (precompositing.needsMaskImage) {
+            handleMask({
+                gradientInfo: precompositing.needsMaskImage,
+                rect,
+                precomposeRect,
+                tempContext,
+            });
+        }
+        if (precompositing.needs3DTransformViaWebGL) {
+            const t = handle3dTransform({
+                matrix: totalMatrix,
+                precomposeRect,
+                tempCanvas: drawable,
+                rectAfterTransforms,
+            });
+            if (t) {
+                const [transformed, cleanup] = t;
+                drawable = transformed;
+                cleanupWebGL = cleanup;
+            }
+        }
+        const previousTransform = context.getTransform();
+        if (drawable) {
+            context.setTransform(new DOMMatrix());
+            context.drawImage(drawable, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+            context.setTransform(previousTransform);
+            Internals.Log.trace({
+                logLevel,
+                tag: '@remotion/web-renderer',
+            }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms`);
+            internalState.addPrecompose({
+                canvasWidth: precomposeRect.width,
+                canvasHeight: precomposeRect.height,
+            });
+        }
+        reset();
+        cleanupWebGL();
+        return { type: 'skip-children' };
+    }
+    const { cleanupAfterChildren } = await drawElement({
+        rect,
+        computedStyle,
+        context,
+        draw,
+        opacity,
+        totalMatrix,
+        parentRect,
+        logLevel,
+    });
+    reset();
+    return { type: 'continue', cleanupAfterChildren };
+};

package/dist/drawing/round-to-expand-rect.d.ts

@@ -0,0 +1 @@
+export declare const roundToExpandRect: (rect: DOMRect) => DOMRect;

package/dist/drawing/round-to-expand-rect.js

@@ -0,0 +1,7 @@
+export const roundToExpandRect = (rect) => {
+    const left = Math.floor(rect.left);
+    const top = Math.floor(rect.top);
+    const right = Math.ceil(rect.right);
+    const bottom = Math.ceil(rect.bottom);
+    return new DOMRect(left, top, right - left, bottom - top);
+};

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

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

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

@@ -2,14 +2,14 @@ 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) => {
+export const drawText = ({ span, logLevel, }) => {
     const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
         const { fontFamily, fontSize, fontWeight, color, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
         const isVertical = writingMode !== 'horizontal-tb';
         if (isVertical) {
             // TODO: Only warn once per render.
             Internals.Log.warn({
-                logLevel: 'warn',
+                logLevel,
                 tag: '@remotion/web-renderer',
             }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
             return;
@@ -30,10 +30,15 @@ export const drawText = (span) => {
         const xPosition = isRTL ? rect.right : rect.left;
         const lines = findLineBreaks(span, isRTL);
         let offsetTop = 0;
-        const { fontBoundingBoxAscent } = contextToDraw.measureText(lines[0].text);
+        const measurements = contextToDraw.measureText(lines[0].text);
+        const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+        const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
         for (const line of lines) {
-            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + offsetTop + fontBoundingBoxAscent);
-            offsetTop += line.offsetTop;
+            // Calculate leading
+            const leading = line.height - fontHeight;
+            const halfLeading = leading / 2;
+            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + halfLeading + fontBoundingBoxAscent + offsetTop);
+            offsetTop += line.height;
         }
         span.textContent = originalText;
         contextToDraw.restore();

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

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

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

@@ -37,7 +37,7 @@ export function findLineBreaks(span, rtl) {
             const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes('preserve');
             lines.push({
                 text: shouldCollapse ? currentLine.trim() : currentLine,
-                offsetTop: currentHeight - previousRect.height,
+                height: currentHeight - previousRect.height,
                 offsetHorizontal,
             });
             currentLine = wordsToAdd;
@@ -57,7 +57,7 @@ export function findLineBreaks(span, rtl) {
             : lastRect.left - originalRect.left;
         lines.push({
             text: currentLine,
-            offsetTop: rect.height - previousRect.height,
+            height: rect.height - lines.reduce((acc, curr) => acc + curr.height, 0),
             offsetHorizontal,
         });
     }

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

@@ -1,9 +1,11 @@
 import type { LogLevel } from 'remotion';
-import type { DrawElementToCanvasReturnValue } from '../draw-element-to-canvas';
-export declare const handleTextNode: ({ node, context, offsetLeft, offsetTop, logLevel, }: {
+import type { InternalState } from '../../internal-state';
+import type { ProcessNodeReturnValue } from '../process-node';
+export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
-    offsetLeft: number;
-    offsetTop: number;
     logLevel: LogLevel;
-}) => Promise<DrawElementToCanvasReturnValue>;
+    parentRect: DOMRect;
+    internalState: InternalState;
+    rootElement: HTMLElement | SVGElement;
+}) => Promise<ProcessNodeReturnValue>;

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

@@ -1,6 +1,6 @@
-import { drawElementToCanvas } from '../draw-element-to-canvas';
+import { processNode } from '../process-node';
 import { drawText } from './draw-text';
-export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, logLevel, }) => {
+export const handleTextNode = async ({ node, context, logLevel, parentRect, internalState, rootElement, }) => {
     const span = document.createElement('span');
     const parent = node.parentNode;
     if (!parent) {
@@ -8,13 +8,14 @@ export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, log
     }
     parent.insertBefore(span, node);
     span.appendChild(node);
-    const value = await drawElementToCanvas({
+    const value = await processNode({
         context,
         element: span,
-        draw: drawText(span),
-        offsetLeft,
-        offsetTop,
+        draw: drawText({ span, logLevel }),
         logLevel,
+        parentRect,
+        internalState,
+        rootElement,
     });
     // Undo the layout manipulation
     parent.insertBefore(node, span);

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

@@ -1,8 +1,10 @@
-export declare const transformIn3d: ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }: {
-    canvasWidth: number;
-    canvasHeight: number;
-    offsetLeft: number;
-    offsetTop: number;
+export declare const transformIn3d: ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, }: {
+    untransformedRect: DOMRect;
     matrix: DOMMatrix;
-    sourceCanvas: HTMLCanvasElement | OffscreenCanvas;
-}) => OffscreenCanvas;
+    sourceCanvas: OffscreenCanvas;
+    rectAfterTransforms: DOMRect;
+}) => {
+    canvas: OffscreenCanvas;
+    rect: DOMRect;
+    cleanup: () => void;
+};

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

@@ -12,24 +12,11 @@ function compileShader(shaderGl, source, type) {
     }
     return shader;
 }
-let helperCanvas = null;
 const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
-    if (helperCanvas &&
-        helperCanvas.canvas.width >= canvasWidth &&
-        helperCanvas.canvas.height >= canvasHeight) {
-        // Clear and draw
-        helperCanvas.gl.clearColor(0, 0, 0, 0); // Transparent background
-        helperCanvas.gl.clear(helperCanvas.gl.COLOR_BUFFER_BIT);
-        return helperCanvas;
-    }
-    if (helperCanvas) {
-        helperCanvas.gl.deleteProgram(helperCanvas.program);
-        helperCanvas.gl.deleteShader(helperCanvas.vertexShader);
-        helperCanvas.gl.deleteShader(helperCanvas.fragmentShader);
-        helperCanvas = null;
-    }
     const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
-    const gl = canvas.getContext('webgl');
+    const gl = canvas.getContext('webgl', {
+        premultipliedAlpha: true,
+    });
     if (!gl) {
         throw new Error('WebGL not supported');
     }
@@ -46,7 +33,7 @@ const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
             vTexCoord = aTexCoord;
         }
     `;
-    // Fragment shader - now samples from texture
+    // Fragment shader - samples from texture and unpremultiplies alpha
     const fsSource = `
         precision mediump float;
         uniform sampler2D uTexture;
@@ -73,11 +60,13 @@ const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
     // Enable blending for transparency
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    helperCanvas = { canvas, gl, program, vertexShader, fragmentShader };
-    return helperCanvas;
+    return { canvas, gl, program, vertexShader, fragmentShader };
 };
-export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }) => {
-    const { canvas, gl, program } = createHelperCanvas({ canvasWidth, canvasHeight });
+export const transformIn3d = ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, }) => {
+    const { canvas, gl, program } = createHelperCanvas({
+        canvasWidth: rectAfterTransforms.width,
+        canvasHeight: rectAfterTransforms.height,
+    });
     const vertexBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     // Create a quad (two triangles) with texture coordinates
@@ -85,13 +74,13 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     const vertices = new Float32Array([
         // Position (x, y) + TexCoord (u, v)
         // First:
-        offsetLeft, offsetTop, 0, 0, // bottom-left
-        canvasWidth + offsetLeft, offsetTop, 1, 0, // bottom-right
-        offsetLeft, canvasHeight + offsetTop, 0, 1, // top-left
+        untransformedRect.x, untransformedRect.y, 0, 0, // bottom-left
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0, // bottom-right
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1, // top-left
         // Second:
-        offsetLeft, canvasHeight + offsetTop, 0, 1, // top-left
-        canvasWidth + offsetLeft, offsetTop, 1, 0, // bottom-right
-        canvasWidth + offsetLeft, canvasHeight + offsetTop, 1, 1, // top-right
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1, // top-left
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0, // bottom-right
+        untransformedRect.x + untransformedRect.width, untransformedRect.y + untransformedRect.height, 1, 1, // top-right
     ]);
     gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
     const aPosition = gl.getAttribLocation(program, 'aPosition');
@@ -110,12 +99,15 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
     // Upload the source canvas as a texture
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
     // The transform matrix
     const transformMatrix = matrix.toFloat32Array();
     const zScale = 1000000000; // By default infinite in chrome
-    // Create orthographic projection matrix for pixel coordinates
+    // Create orthographic projection matrix for pixel coordinates with offset
     const projectionMatrix = new Float32Array([
         2 / canvas.width,
         0,
@@ -129,8 +121,8 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
         0,
         -2 / zScale,
         0,
-        -1,
-        1,
+        -1 + (2 * -rectAfterTransforms.x) / canvas.width,
+        1 - (2 * -rectAfterTransforms.y) / canvas.height,
         0,
         1,
     ]);
@@ -142,7 +134,25 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     gl.uniform1i(uTexture, 0); // Use texture unit 0
     gl.drawArrays(gl.TRIANGLES, 0, 6);
     // Clean up resources to prevent leaks and ensure clean state for reuse
+    gl.disableVertexAttribArray(aPosition);
+    gl.disableVertexAttribArray(aTexCoord);
+    // Clean up resources to prevent leaks and ensure clean state for reuse
     gl.deleteTexture(texture);
     gl.deleteBuffer(vertexBuffer);
-    return canvas;
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.deleteTexture(texture);
+    // Reset pixel store state
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    // Reset blend function to the initial state
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    return {
+        canvas,
+        rect: rectAfterTransforms,
+        cleanup: () => {
+            const loseContext = gl.getExtension('WEBGL_lose_context');
+            if (loseContext) {
+                loseContext.loseContext();
+            }
+        },
+    };
 };

package/dist/drawing/transform-rect-with-matrix.d.ts

@@ -0,0 +1,4 @@
+export declare function transformDOMRect({ rect, matrix, }: {
+    rect: DOMRect;
+    matrix: DOMMatrix;
+}): DOMRect;

package/dist/drawing/transform-rect-with-matrix.js

@@ -0,0 +1,19 @@
+export function transformDOMRect({ rect, matrix, }) {
+    // Get all four corners of the rectangle
+    const topLeft = new DOMPointReadOnly(rect.left, rect.top);
+    const topRight = new DOMPointReadOnly(rect.right, rect.top);
+    const bottomLeft = new DOMPointReadOnly(rect.left, rect.bottom);
+    const bottomRight = new DOMPointReadOnly(rect.right, rect.bottom);
+    // Transform all corners
+    const transformedTopLeft = topLeft.matrixTransform(matrix);
+    const transformedTopRight = topRight.matrixTransform(matrix);
+    const transformedBottomLeft = bottomLeft.matrixTransform(matrix);
+    const transformedBottomRight = bottomRight.matrixTransform(matrix);
+    // Find the bounding box of the transformed points
+    const minX = Math.min(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+    const maxX = Math.max(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+    const minY = Math.min(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+    const maxY = Math.max(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+    // Create a new DOMRect from the bounding box
+    return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+}

package/dist/drawing/transform.d.ts

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

package/dist/drawing/transform.js

@@ -1,5 +1,9 @@
-export const setTransform = ({ ctx, transform, }) => {
-    ctx.setTransform(transform);
+export const setTransform = ({ ctx, transform, parentRect, }) => {
+    const offsetMatrix = new DOMMatrix()
+        .translate(-parentRect.x, -parentRect.y)
+        .multiply(transform)
+        .translate(parentRect.x, parentRect.y);
+    ctx.setTransform(offsetMatrix);
     return () => {
         ctx.setTransform(new DOMMatrix());
     };