@remotion/web-renderer 4.0.395 → 4.0.396

package/dist/drawing/process-node.d.ts

@@ -0,0 +1,17 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+import type { DrawFn } from './drawn-fn';
+export type ProcessNodeReturnValue = {
+    type: 'continue';
+    cleanupAfterChildren: () => void;
+} | {
+    type: 'skip-children';
+};
+export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, }: {
+    element: HTMLElement | SVGElement;
+    context: OffscreenCanvasRenderingContext2D;
+    draw: DrawFn;
+    logLevel: LogLevel;
+    parentRect: DOMRect;
+    internalState: InternalState;
+}) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/process-node.js

@@ -0,0 +1,41 @@
+import { calculateTransforms } from './calculate-transforms';
+import { drawElement } from './draw-element';
+import { handle3dTransform } from './handle-3d-transform';
+export const processNode = async ({ element, context, draw, logLevel, parentRect, internalState, }) => {
+    const transforms = calculateTransforms({
+        element,
+        offsetLeft: parentRect.x,
+        offsetTop: parentRect.y,
+    });
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
+    if (opacity === 0) {
+        reset();
+        return { type: 'continue', cleanupAfterChildren: () => { } };
+    }
+    if (dimensions.width <= 0 || dimensions.height <= 0) {
+        reset();
+        return { type: 'continue', cleanupAfterChildren: () => { } };
+    }
+    if (!totalMatrix.is2D) {
+        await handle3dTransform({
+            element,
+            matrix: totalMatrix,
+            parentRect,
+            context,
+            logLevel,
+            internalState,
+        });
+        reset();
+        return { type: 'skip-children' };
+    }
+    const { cleanupAfterChildren } = await drawElement({
+        rect: new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height),
+        computedStyle,
+        context,
+        draw,
+        opacity,
+        totalMatrix,
+    });
+    reset();
+    return { type: 'continue', cleanupAfterChildren };
+};

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

@@ -1,9 +1,10 @@
 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, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
-    offsetLeft: number;
-    offsetTop: number;
     logLevel: LogLevel;
-}) => Promise<DrawElementToCanvasReturnValue>;
+    parentRect: DOMRect;
+    internalState: InternalState;
+}) => 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, }) => {
     const span = document.createElement('span');
     const parent = node.parentNode;
     if (!parent) {
@@ -8,13 +8,13 @@ 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,
         logLevel,
+        parentRect,
+        internalState,
     });
     // Undo the layout manipulation
     parent.insertBefore(node, span);

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

@@ -1,8 +1,8 @@
-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, }: {
+    untransformedRect: DOMRect;
     matrix: DOMMatrix;
-    sourceCanvas: HTMLCanvasElement | OffscreenCanvas;
-}) => OffscreenCanvas;
+    sourceCanvas: OffscreenCanvas;
+}) => {
+    canvas: OffscreenCanvas;
+    rect: DOMRect;
+};

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

@@ -1,3 +1,4 @@
+import { transformDOMRect } from './transform-rect-with-matrix';
 function compileShader(shaderGl, source, type) {
     const shader = shaderGl.createShader(type);
     if (!shader) {
@@ -76,8 +77,15 @@ const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
     helperCanvas = { canvas, gl, program, vertexShader, fragmentShader };
     return helperCanvas;
 };
-export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }) => {
-    const { canvas, gl, program } = createHelperCanvas({ canvasWidth, canvasHeight });
+export const transformIn3d = ({ matrix, sourceCanvas, untransformedRect, }) => {
+    const rectAfterTransforms = transformDOMRect({
+        rect: untransformedRect,
+        matrix,
+    });
+    const { canvas, gl, program } = createHelperCanvas({
+        canvasWidth: Math.ceil(rectAfterTransforms.width),
+        canvasHeight: Math.ceil(rectAfterTransforms.height),
+    });
     const vertexBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     // Create a quad (two triangles) with texture coordinates
@@ -85,13 +93,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');
@@ -115,7 +123,7 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     // 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 +137,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,
     ]);
@@ -144,5 +152,5 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     // Clean up resources to prevent leaks and ensure clean state for reuse
     gl.deleteTexture(texture);
     gl.deleteBuffer(vertexBuffer);
-    return canvas;
+    return { canvas, rect: rectAfterTransforms };
 };

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);
+}