@remotion/web-renderer 4.0.421 → 4.0.423

package/dist/drawing/calculate-object-fit.js

@@ -0,0 +1,208 @@
+/**
+ * fill: Stretch the image to fill the container, ignoring aspect ratio
+ */
+const calculateFill = ({ containerSize, intrinsicSize, }) => {
+    return {
+        sourceX: 0,
+        sourceY: 0,
+        sourceWidth: intrinsicSize.width,
+        sourceHeight: intrinsicSize.height,
+        destX: containerSize.left,
+        destY: containerSize.top,
+        destWidth: containerSize.width,
+        destHeight: containerSize.height,
+    };
+};
+/**
+ * contain: Scale the image to fit inside the container while maintaining aspect ratio.
+ * This may result in letterboxing (empty space on sides or top/bottom).
+ */
+const calculateContain = ({ containerSize, intrinsicSize, }) => {
+    const containerAspect = containerSize.width / containerSize.height;
+    const imageAspect = intrinsicSize.width / intrinsicSize.height;
+    let destWidth;
+    let destHeight;
+    if (imageAspect > containerAspect) {
+        // Image is wider than container (relative to their heights)
+        // Fit by width, letterbox top/bottom
+        destWidth = containerSize.width;
+        destHeight = containerSize.width / imageAspect;
+    }
+    else {
+        // Image is taller than container (relative to their widths)
+        // Fit by height, letterbox left/right
+        destHeight = containerSize.height;
+        destWidth = containerSize.height * imageAspect;
+    }
+    // Center the image in the container
+    const destX = containerSize.left + (containerSize.width - destWidth) / 2;
+    const destY = containerSize.top + (containerSize.height - destHeight) / 2;
+    return {
+        sourceX: 0,
+        sourceY: 0,
+        sourceWidth: intrinsicSize.width,
+        sourceHeight: intrinsicSize.height,
+        destX,
+        destY,
+        destWidth,
+        destHeight,
+    };
+};
+/**
+ * cover: Scale the image to cover the container while maintaining aspect ratio.
+ * Parts of the image may be cropped.
+ */
+const calculateCover = ({ containerSize, intrinsicSize, }) => {
+    // Guard against zero or non-positive heights to avoid division by zero and NaN/Infinity.
+    if (containerSize.height <= 0 || intrinsicSize.height <= 0) {
+        return {
+            sourceX: 0,
+            sourceY: 0,
+            sourceWidth: 0,
+            sourceHeight: 0,
+            destX: containerSize.left,
+            destY: containerSize.top,
+            destWidth: 0,
+            destHeight: 0,
+        };
+    }
+    const containerAspect = containerSize.width / containerSize.height;
+    const imageAspect = intrinsicSize.width / intrinsicSize.height;
+    let sourceX = 0;
+    let sourceY = 0;
+    let sourceWidth = intrinsicSize.width;
+    let sourceHeight = intrinsicSize.height;
+    if (imageAspect > containerAspect) {
+        // Image is wider than container - crop horizontally
+        // Scale by height, then crop width
+        sourceWidth = intrinsicSize.height * containerAspect;
+        sourceX = (intrinsicSize.width - sourceWidth) / 2;
+    }
+    else {
+        // Image is taller than container - crop vertically
+        // Scale by width, then crop height
+        sourceHeight = intrinsicSize.width / containerAspect;
+        sourceY = (intrinsicSize.height - sourceHeight) / 2;
+    }
+    return {
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        destX: containerSize.left,
+        destY: containerSize.top,
+        destWidth: containerSize.width,
+        destHeight: containerSize.height,
+    };
+};
+/**
+ * none: Draw the image at its natural size, centered in the container.
+ * Clips to the container bounds if the image overflows.
+ */
+const calculateNone = ({ containerSize, intrinsicSize, }) => {
+    // Calculate centered position (can be negative if image is larger than container)
+    const centeredX = containerSize.left + (containerSize.width - intrinsicSize.width) / 2;
+    const centeredY = containerSize.top + (containerSize.height - intrinsicSize.height) / 2;
+    // Calculate clipping bounds
+    let sourceX = 0;
+    let sourceY = 0;
+    let sourceWidth = intrinsicSize.width;
+    let sourceHeight = intrinsicSize.height;
+    let destX = centeredX;
+    let destY = centeredY;
+    let destWidth = intrinsicSize.width;
+    let destHeight = intrinsicSize.height;
+    // Clip left edge
+    if (destX < containerSize.left) {
+        const clipAmount = containerSize.left - destX;
+        sourceX = clipAmount;
+        sourceWidth -= clipAmount;
+        destX = containerSize.left;
+        destWidth -= clipAmount;
+    }
+    // Clip top edge
+    if (destY < containerSize.top) {
+        const clipAmount = containerSize.top - destY;
+        sourceY = clipAmount;
+        sourceHeight -= clipAmount;
+        destY = containerSize.top;
+        destHeight -= clipAmount;
+    }
+    // Clip right edge
+    const containerRight = containerSize.left + containerSize.width;
+    if (destX + destWidth > containerRight) {
+        const clipAmount = destX + destWidth - containerRight;
+        sourceWidth -= clipAmount;
+        destWidth -= clipAmount;
+    }
+    // Clip bottom edge
+    const containerBottom = containerSize.top + containerSize.height;
+    if (destY + destHeight > containerBottom) {
+        const clipAmount = destY + destHeight - containerBottom;
+        sourceHeight -= clipAmount;
+        destHeight -= clipAmount;
+    }
+    return {
+        sourceX,
+        sourceY,
+        sourceWidth,
+        sourceHeight,
+        destX,
+        destY,
+        destWidth,
+        destHeight,
+    };
+};
+/**
+ * Calculates how to draw an image based on object-fit CSS property.
+ *
+ * @param objectFit - The CSS object-fit value
+ * @param containerSize - The container dimensions (where the image should be drawn)
+ * @param intrinsicSize - The natural/intrinsic size of the image
+ * @returns Source and destination rectangles for drawImage
+ */
+export const calculateObjectFit = ({ objectFit, containerSize, intrinsicSize, }) => {
+    switch (objectFit) {
+        case 'fill':
+            return calculateFill({ containerSize, intrinsicSize });
+        case 'contain':
+            return calculateContain({ containerSize, intrinsicSize });
+        case 'cover':
+            return calculateCover({ containerSize, intrinsicSize });
+        case 'none':
+            return calculateNone({ containerSize, intrinsicSize });
+        case 'scale-down': {
+            // scale-down behaves like contain or none, whichever results in a smaller image
+            const containResult = calculateContain({ containerSize, intrinsicSize });
+            const noneResult = calculateNone({ containerSize, intrinsicSize });
+            // Compare the rendered size - use whichever is smaller
+            const containArea = containResult.destWidth * containResult.destHeight;
+            const noneArea = noneResult.destWidth * noneResult.destHeight;
+            return containArea < noneArea ? containResult : noneResult;
+        }
+        default: {
+            const exhaustiveCheck = objectFit;
+            throw new Error(`Unknown object-fit value: ${exhaustiveCheck}`);
+        }
+    }
+};
+/**
+ * Parse an object-fit CSS value string into our ObjectFit type.
+ * Returns 'fill' as the default if the value is not recognized.
+ */
+export const parseObjectFit = (value) => {
+    if (!value) {
+        return 'fill';
+    }
+    const normalized = value.trim().toLowerCase();
+    switch (normalized) {
+        case 'fill':
+        case 'contain':
+        case 'cover':
+        case 'none':
+        case 'scale-down':
+            return normalized;
+        default:
+            return 'fill';
+    }
+};

package/dist/drawing/calculate-transforms.js

@@ -0,0 +1,127 @@
+import { hasAnyTransformCssValue, hasTransformCssValue } from './has-transform';
+import { getMaskImageValue, parseMaskImage } from './mask-image';
+import { parseTransformOrigin } from './parse-transform-origin';
+const getInternalTransformOrigin = (transform) => {
+    var _a;
+    const centerX = transform.boundingClientRect.width / 2;
+    const centerY = transform.boundingClientRect.height / 2;
+    const origin = (_a = parseTransformOrigin(transform.transformOrigin)) !== null && _a !== void 0 ? _a : {
+        x: centerX,
+        y: centerY,
+    };
+    return origin;
+};
+const getGlobalTransformOrigin = ({ transform }) => {
+    const { x: originX, y: originY } = getInternalTransformOrigin(transform);
+    return {
+        x: originX + transform.boundingClientRect.left,
+        y: originY + transform.boundingClientRect.top,
+    };
+};
+export const calculateTransforms = ({ element, rootElement, }) => {
+    // Compute the cumulative transform by traversing parent nodes
+    let parent = element;
+    const transforms = [];
+    const toReset = [];
+    let opacity = 1;
+    let elementComputedStyle = null;
+    let maskImageInfo = null;
+    while (parent) {
+        const computedStyle = getComputedStyle(parent);
+        if (parent === element) {
+            elementComputedStyle = computedStyle;
+            opacity = parseFloat(computedStyle.opacity);
+            const maskImageValue = getMaskImageValue(computedStyle);
+            maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+            const originalMaskImage = parent.style.maskImage;
+            const originalWebkitMaskImage = parent.style.webkitMaskImage;
+            parent.style.maskImage = 'none';
+            parent.style.webkitMaskImage = 'none';
+            const parentRef = parent;
+            toReset.push(() => {
+                parentRef.style.maskImage = originalMaskImage;
+                parentRef.style.webkitMaskImage = originalWebkitMaskImage;
+            });
+        }
+        if (hasAnyTransformCssValue(computedStyle) || parent === element) {
+            const toParse = hasTransformCssValue(computedStyle)
+                ? computedStyle.transform
+                : undefined;
+            const matrix = new DOMMatrix(toParse);
+            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({
+                element: 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;
+            });
+        }
+        if (parent === rootElement) {
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    for (const transform of transforms) {
+        transform.boundingClientRect = transform.element.getBoundingClientRect();
+    }
+    const dimensions = transforms[0].boundingClientRect;
+    const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
+    const totalMatrix = new DOMMatrix();
+    for (const transform of transforms.slice().reverse()) {
+        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');
+    }
+    const needs3DTransformViaWebGL = !totalMatrix.is2D;
+    const needsMaskImage = maskImageInfo !== null;
+    return {
+        dimensions,
+        totalMatrix,
+        reset: () => {
+            for (const reset of toReset) {
+                reset();
+            }
+        },
+        nativeTransformOrigin,
+        computedStyle: elementComputedStyle,
+        opacity,
+        maskImageInfo,
+        precompositing: {
+            needs3DTransformViaWebGL,
+            needsMaskImage: maskImageInfo,
+            needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage),
+        },
+    };
+};

package/dist/drawing/clamp-rect-to-parent-bounds.js

@@ -0,0 +1,18 @@
+import { roundToExpandRect } from './round-to-expand-rect';
+export const getNarrowerRect = ({ firstRect, secondRect, }) => {
+    const left = Math.max(firstRect.left, secondRect.left);
+    const top = Math.max(firstRect.top, secondRect.top);
+    const bottom = Math.min(firstRect.bottom, secondRect.bottom);
+    const right = Math.min(firstRect.right, secondRect.right);
+    return new DOMRect(left, top, right - left, bottom - top);
+};
+export const getWiderRectAndExpand = ({ firstRect, secondRect, }) => {
+    if (firstRect === null) {
+        return roundToExpandRect(secondRect);
+    }
+    const left = Math.min(firstRect.left, secondRect.left);
+    const top = Math.min(firstRect.top, secondRect.top);
+    const bottom = Math.max(firstRect.bottom, secondRect.bottom);
+    const right = Math.max(firstRect.right, secondRect.right);
+    return roundToExpandRect(new DOMRect(left, top, right - left, bottom - top));
+};

package/dist/drawing/do-rects-intersect.js

@@ -0,0 +1,6 @@
+export function doRectsIntersect(rect1, rect2) {
+    return !(rect1.right <= rect2.left ||
+        rect1.left >= rect2.right ||
+        rect1.bottom <= rect2.top ||
+        rect1.top >= rect2.bottom);
+}

package/dist/drawing/draw-background.js

@@ -0,0 +1,62 @@
+import { getClippedBackground } from './get-clipped-background';
+import { getBoxBasedOnBackgroundClip } from './get-padding-box';
+import { createCanvasGradient, parseLinearGradient, } from './parse-linear-gradient';
+export const drawBackground = async ({ backgroundImage, context, rect, backgroundColor, backgroundClip, element, logLevel, internalState, computedStyle, offsetLeft: parentOffsetLeft, offsetTop: parentOffsetTop, }) => {
+    let contextToDraw = context;
+    const originalCompositeOperation = context.globalCompositeOperation;
+    let offsetLeft = 0;
+    let offsetTop = 0;
+    const finish = () => {
+        context.globalCompositeOperation = originalCompositeOperation;
+        if (context !== contextToDraw) {
+            context.drawImage(contextToDraw.canvas, offsetLeft, offsetTop, contextToDraw.canvas.width, contextToDraw.canvas.height);
+        }
+    };
+    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
+    if (backgroundClip.includes('text')) {
+        offsetLeft = boundingRect.left;
+        offsetTop = boundingRect.top;
+        const originalBackgroundClip = element.style.backgroundClip;
+        const originalWebkitBackgroundClip = element.style.webkitBackgroundClip;
+        element.style.backgroundClip = 'initial';
+        element.style.webkitBackgroundClip = 'initial';
+        const drawn = await getClippedBackground({
+            element,
+            boundingRect: new DOMRect(boundingRect.left + parentOffsetLeft, boundingRect.top + parentOffsetTop, boundingRect.width, boundingRect.height),
+            logLevel,
+            internalState,
+        });
+        element.style.backgroundClip = originalBackgroundClip;
+        element.style.webkitBackgroundClip = originalWebkitBackgroundClip;
+        contextToDraw = drawn;
+        contextToDraw.globalCompositeOperation = 'source-in';
+    }
+    if (backgroundImage && backgroundImage !== 'none') {
+        const gradientInfo = parseLinearGradient(backgroundImage);
+        if (gradientInfo) {
+            const gradient = createCanvasGradient({
+                ctx: contextToDraw,
+                rect: boundingRect,
+                gradientInfo,
+                offsetLeft,
+                offsetTop,
+            });
+            const originalFillStyle = contextToDraw.fillStyle;
+            contextToDraw.fillStyle = gradient;
+            contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
+            contextToDraw.fillStyle = originalFillStyle;
+            return finish();
+        }
+    }
+    // Fallback to solid background color if no gradient was drawn
+    if (backgroundColor &&
+        backgroundColor !== 'transparent' &&
+        !(backgroundColor.startsWith('rgba') &&
+            (backgroundColor.endsWith(', 0)') || backgroundColor.endsWith(',0')))) {
+        const originalFillStyle = contextToDraw.fillStyle;
+        contextToDraw.fillStyle = backgroundColor;
+        contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
+        contextToDraw.fillStyle = originalFillStyle;
+    }
+    finish();
+};