@remotion/web-renderer 4.0.395 → 4.0.396

package/dist/drawing/compose-svg.js

@@ -0,0 +1,34 @@
+export const turnSvgIntoDrawable = (svg) => {
+    const originalTransform = svg.style.transform;
+    const originalTransformOrigin = svg.style.transformOrigin;
+    const originalMarginLeft = svg.style.marginLeft;
+    const originalMarginRight = svg.style.marginRight;
+    const originalMarginTop = svg.style.marginTop;
+    const originalMarginBottom = svg.style.marginBottom;
+    svg.style.transform = 'none';
+    svg.style.transformOrigin = '';
+    // Margins were already included in the positioning calculation,
+    // so we need to remove them to avoid double counting.
+    svg.style.marginLeft = '0';
+    svg.style.marginRight = '0';
+    svg.style.marginTop = '0';
+    svg.style.marginBottom = '0';
+    const svgData = new XMLSerializer().serializeToString(svg);
+    svg.style.marginLeft = originalMarginLeft;
+    svg.style.marginRight = originalMarginRight;
+    svg.style.marginTop = originalMarginTop;
+    svg.style.marginBottom = originalMarginBottom;
+    svg.style.transform = originalTransform;
+    svg.style.transformOrigin = originalTransformOrigin;
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+        image.onload = function () {
+            resolve(image);
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};

package/dist/drawing/compose.d.ts

@@ -0,0 +1,5 @@
+import type { Composable } from '../composable';
+export declare const compose: ({ composables, context, }: {
+    composables: Composable[];
+    context: OffscreenCanvasRenderingContext2D;
+}) => Promise<void>;

package/dist/drawing/compose.js

@@ -0,0 +1,6 @@
+import { drawElementToCanvas } from './draw-element-to-canvas';
+export const compose = async ({ composables, context, }) => {
+    for (const composable of composables) {
+        await drawElementToCanvas(composable.element, context);
+    }
+};

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

@@ -1,10 +1,7 @@
 import type { BorderRadiusCorners } from './border-radius';
-export declare const drawBorder: ({ ctx, x, y, width, height, borderRadius, computedStyle, }: {
+export declare const drawBorder: ({ ctx, rect, borderRadius, computedStyle, }: {
     ctx: OffscreenCanvasRenderingContext2D;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    rect: DOMRect;
     borderRadius: BorderRadiusCorners;
     computedStyle: CSSStyleDeclaration;
 }) => void;

package/dist/drawing/draw-border.js

@@ -211,7 +211,7 @@ const drawUniformBorder = ({ ctx, x, y, width, height, borderRadius, borderWidth
     ctx.closePath();
     ctx.stroke();
 };
-export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedStyle, }) => {
+export const drawBorder = ({ ctx, rect, borderRadius, computedStyle, }) => {
     const borders = getBorderSideProperties(computedStyle);
     // Check if we have any visible border
     const hasBorder = borders.top.width > 0 ||
@@ -240,10 +240,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         // Draw as a single continuous border for continuous dashing
         drawUniformBorder({
             ctx,
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderWidth: borders.top.width,
             borderColor: borders.top.color,
@@ -255,10 +255,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawCorner({
             ctx,
             corner: 'topLeft',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             topBorder: borders.top,
             rightBorder: borders.right,
@@ -268,10 +268,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawCorner({
             ctx,
             corner: 'topRight',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             topBorder: borders.top,
             rightBorder: borders.right,
@@ -281,10 +281,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawCorner({
             ctx,
             corner: 'bottomRight',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             topBorder: borders.top,
             rightBorder: borders.right,
@@ -294,10 +294,10 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawCorner({
             ctx,
             corner: 'bottomLeft',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             topBorder: borders.top,
             rightBorder: borders.right,
@@ -308,40 +308,40 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         drawBorderSide({
             ctx,
             side: 'top',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderProperties: borders.top,
         });
         drawBorderSide({
             ctx,
             side: 'right',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderProperties: borders.right,
         });
         drawBorderSide({
             ctx,
             side: 'bottom',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderProperties: borders.bottom,
         });
         drawBorderSide({
             ctx,
             side: 'left',
-            x,
-            y,
-            width,
-            height,
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height,
             borderRadius,
             borderProperties: borders.left,
         });

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

@@ -1,11 +1,12 @@
 import type { LogLevel } from 'remotion';
 import type { DrawFn } from './drawn-fn';
 export type DrawElementToCanvasReturnValue = 'continue' | 'skip-children';
-export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, }: {
+export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, parentRect, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
     offsetLeft: number;
     offsetTop: number;
     logLevel: LogLevel;
+    parentRect: DOMRect;
 }) => Promise<DrawElementToCanvasReturnValue>;

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

@@ -1,11 +1,9 @@
-import { Internals } from 'remotion';
-import { compose } from '../compose';
-import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
 import { calculateTransforms } from './calculate-transforms';
 import { drawElement } from './draw-element';
-import { transformIn3d } from './transform-in-3d';
-export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, }) => {
-    const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+import { handle3dTransform } from './handle-3d-transform';
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, parentRect, }) => {
+    const transforms = calculateTransforms({ element, offsetLeft, offsetTop });
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
     if (opacity === 0) {
         reset();
         return 'continue';
@@ -15,40 +13,14 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
         return 'continue';
     }
     if (!totalMatrix.is2D) {
-        const biggestBoundingClientRect = getBiggestBoundingClientRect(element);
-        const canvasOffsetLeft = Math.min(biggestBoundingClientRect.left, 0);
-        const canvasOffsetTop = Math.min(biggestBoundingClientRect.top, 0);
-        const tempCanvasWidth = Math.max(biggestBoundingClientRect.width, biggestBoundingClientRect.right);
-        const tempCanvasHeight = Math.max(biggestBoundingClientRect.height, biggestBoundingClientRect.bottom);
-        const start = Date.now();
-        const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
-        const context2 = tempCanvas.getContext('2d');
-        if (!context2) {
-            throw new Error('Could not get context');
-        }
-        await compose({
+        await handle3dTransform({
             element,
-            context: context2,
-            offsetLeft: canvasOffsetLeft,
-            offsetTop: canvasOffsetTop,
+            totalMatrix,
+            parentRect,
+            context,
             logLevel,
         });
-        const afterCompose = Date.now();
-        const transformed = transformIn3d({
-            canvasWidth: tempCanvasWidth,
-            canvasHeight: tempCanvasHeight,
-            matrix: totalMatrix,
-            sourceCanvas: tempCanvas,
-            offsetLeft: canvasOffsetLeft,
-            offsetTop: canvasOffsetTop,
-        });
-        context.drawImage(transformed, 0, 0);
-        const afterDraw = Date.now();
         reset();
-        Internals.Log.trace({
-            logLevel,
-            tag: '@remotion/web-renderer',
-        }, `Transforming element in 3D - canvas size: ${tempCanvasWidth}x${tempCanvasHeight} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
         return 'skip-children';
     }
     await drawElement({

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

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

package/dist/drawing/draw-element.js

@@ -1,13 +1,15 @@
 import { parseBorderRadius, setBorderRadius } from './border-radius';
 import { drawBorder } from './draw-border';
+import { drawOutline } from './draw-outline';
 import { setOpacity } from './opacity';
+import { setOverflowHidden } from './overflow';
 import { setTransform } from './transform';
-export const drawElement = async ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }) => {
+export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, }) => {
     const background = computedStyle.backgroundColor;
     const borderRadius = parseBorderRadius({
         borderRadius: computedStyle.borderRadius,
-        width: dimensions.width,
-        height: dimensions.height,
+        width: rect.width,
+        height: rect.height,
     });
     const finishTransform = setTransform({
         ctx: context,
@@ -15,11 +17,9 @@ export const drawElement = async ({ dimensions, computedStyle, context, draw, op
     });
     const finishBorderRadius = setBorderRadius({
         ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
+        rect,
         borderRadius,
+        forceClipEvenWhenZero: false,
     });
     const finishOpacity = setOpacity({
         ctx: context,
@@ -31,20 +31,35 @@ export const drawElement = async ({ dimensions, computedStyle, context, draw, op
             (background.endsWith(', 0)') || background.endsWith(',0')))) {
         const originalFillStyle = context.fillStyle;
         context.fillStyle = background;
-        context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+        context.fillRect(rect.left, rect.top, rect.width, rect.height);
         context.fillStyle = originalFillStyle;
     }
-    await draw({ dimensions, computedStyle, contextToDraw: context });
+    await draw({ dimensions: rect, computedStyle, contextToDraw: context });
     drawBorder({
         ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
+        rect,
         borderRadius,
         computedStyle,
     });
-    finishOpacity();
     finishBorderRadius();
+    // 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',
+    });
     finishTransform();
+    return {
+        cleanupAfterChildren: () => {
+            finishOpacity();
+            finishOverflowHidden();
+        },
+    };
 };

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

@@ -0,0 +1,9 @@
+import type { BorderRadiusCorners } from './border-radius';
+export declare const parseOutlineWidth: (value: string) => number;
+export declare const parseOutlineOffset: (value: string) => number;
+export declare const drawOutline: ({ ctx, rect, borderRadius, computedStyle, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    borderRadius: BorderRadiusCorners;
+    computedStyle: CSSStyleDeclaration;
+}) => void;

package/dist/drawing/draw-outline.js

@@ -0,0 +1,116 @@
+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.beginPath();
+    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),
+        },
+    };
+    // Draw continuous path with border radius
+    ctx.moveTo(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY);
+    // Top edge
+    ctx.lineTo(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY);
+    // Top-right corner
+    if (adjustedBorderRadius.topRight.horizontal > 0 ||
+        adjustedBorderRadius.topRight.vertical > 0) {
+        ctx.ellipse(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    }
+    // Right edge
+    ctx.lineTo(outlineX + outlineW, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical);
+    // Bottom-right corner
+    if (adjustedBorderRadius.bottomRight.horizontal > 0 ||
+        adjustedBorderRadius.bottomRight.vertical > 0) {
+        ctx.ellipse(outlineX + outlineW - adjustedBorderRadius.bottomRight.horizontal, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    }
+    // Bottom edge
+    ctx.lineTo(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH);
+    // Bottom-left corner
+    if (adjustedBorderRadius.bottomLeft.horizontal > 0 ||
+        adjustedBorderRadius.bottomLeft.vertical > 0) {
+        ctx.ellipse(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    }
+    // Left edge
+    ctx.lineTo(outlineX, outlineY + adjustedBorderRadius.topLeft.vertical);
+    // Top-left corner
+    if (adjustedBorderRadius.topLeft.horizontal > 0 ||
+        adjustedBorderRadius.topLeft.vertical > 0) {
+        ctx.ellipse(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
+    }
+    ctx.closePath();
+    ctx.stroke();
+    // Restore original canvas state
+    ctx.strokeStyle = originalStrokeStyle;
+    ctx.lineWidth = originalLineWidth;
+    ctx.setLineDash(originalLineDash);
+};

package/dist/drawing/get-bounding-box-including-shadow.d.ts

@@ -0,0 +1 @@
+export declare const getBoundingBoxIncludingOutline: (element: Element) => DOMRect;

package/dist/drawing/get-bounding-box-including-shadow.js

@@ -0,0 +1,6 @@
+export const getBoundingBoxIncludingOutline = (element) => {
+    var _a, _b, _c, _d, _e;
+    const rect = element.getBoundingClientRect();
+    const shadow = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    return new DOMRect(Math.min(rect.left, (_b = shadow === null || shadow === void 0 ? void 0 : shadow.left) !== null && _b !== void 0 ? _b : 0), Math.min(rect.top, (_c = shadow === null || shadow === void 0 ? void 0 : shadow.top) !== null && _c !== void 0 ? _c : 0), Math.max(rect.right, (_d = shadow === null || shadow === void 0 ? void 0 : shadow.right) !== null && _d !== void 0 ? _d : 0), Math.max(rect.bottom, (_e = shadow === null || shadow === void 0 ? void 0 : shadow.bottom) !== null && _e !== void 0 ? _e : 0));
+};

package/dist/drawing/get-computed-style-cache.js

@@ -0,0 +1 @@
+"use strict";

package/dist/drawing/get-pretransform-rect.d.ts

@@ -0,0 +1 @@
+export declare function getPreTransformRect(targetRect: DOMRect, matrix: DOMMatrix): DOMRect;

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

@@ -0,0 +1,31 @@
+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 };
+    // 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();
+    // 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.d.ts

@@ -0,0 +1,10 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+export declare const handle3dTransform: ({ element, matrix, parentRect, context, logLevel, internalState, }: {
+    element: HTMLElement | SVGElement;
+    matrix: DOMMatrix;
+    parentRect: DOMRect;
+    context: OffscreenCanvasRenderingContext2D;
+    logLevel: LogLevel;
+    internalState: InternalState;
+}) => Promise<void>;

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

@@ -0,0 +1,39 @@
+import { Internals } from 'remotion';
+import { compose } from '../compose';
+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 handle3dTransform = async ({ element, matrix, parentRect, context, logLevel, internalState, }) => {
+    const unclampedBiggestBoundingClientRect = getBiggestBoundingClientRect(element);
+    const biggestPossiblePretransformRect = getPreTransformRect(parentRect, matrix);
+    const preTransformRect = getNarrowerRect({
+        firstRect: unclampedBiggestBoundingClientRect,
+        secondRect: biggestPossiblePretransformRect,
+    });
+    const start = Date.now();
+    const tempCanvas = new OffscreenCanvas(Math.ceil(preTransformRect.width), Math.ceil(preTransformRect.height));
+    await compose({
+        element,
+        context: tempCanvas.getContext('2d'),
+        logLevel,
+        parentRect: preTransformRect,
+        internalState,
+    });
+    const afterCompose = Date.now();
+    const { canvas: transformed, rect: transformedRect } = transformIn3d({
+        untransformedRect: preTransformRect,
+        matrix,
+        sourceCanvas: tempCanvas,
+    });
+    context.drawImage(transformed, transformedRect.x, transformedRect.y);
+    const afterDraw = Date.now();
+    Internals.Log.trace({
+        logLevel,
+        tag: '@remotion/web-renderer',
+    }, `Transforming element in 3D - canvas size: ${transformedRect.width}x${transformedRect.height} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
+    internalState.add3DTransform({
+        canvasWidth: Math.ceil(transformedRect.width),
+        canvasHeight: Math.ceil(transformedRect.height),
+    });
+};

package/dist/drawing/has-transform.d.ts

@@ -0,0 +1,4 @@
+export declare const hasTransformCssValue: (style: CSSStyleDeclaration) => boolean;
+export declare const hasRotateCssValue: (style: CSSStyleDeclaration) => boolean;
+export declare const hasScaleCssValue: (style: CSSStyleDeclaration) => boolean;
+export declare const hasAnyTransformCssValue: (style: CSSStyleDeclaration) => boolean;

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/overflow.d.ts

@@ -0,0 +1,7 @@
+import type { BorderRadiusCorners } from './border-radius';
+export declare const setOverflowHidden: ({ ctx, rect, borderRadius, overflowHidden, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    borderRadius: BorderRadiusCorners;
+    overflowHidden: boolean;
+}) => () => void;

package/dist/drawing/overflow.js

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