@remotion/web-renderer 4.0.431 → 4.0.433

package/dist/drawing/border-radius.js

@@ -1,151 +0,0 @@
-import { drawRoundedRectPath } from './draw-rounded';
-import { getBoxBasedOnBackgroundClip } from './get-padding-box';
-function parseValue({ value, reference, }) {
-    value = value.trim();
-    if (value.endsWith('%')) {
-        const percentage = parseFloat(value);
-        return (percentage / 100) * reference;
-    }
-    if (value.endsWith('px')) {
-        return parseFloat(value);
-    }
-    // If no unit, assume pixels
-    return parseFloat(value);
-}
-function expandShorthand(values) {
-    if (values.length === 1) {
-        // All corners the same
-        return [values[0], values[0], values[0], values[0]];
-    }
-    if (values.length === 2) {
-        // [0] = top-left & bottom-right, [1] = top-right & bottom-left
-        return [values[0], values[1], values[0], values[1]];
-    }
-    if (values.length === 3) {
-        // [0] = top-left, [1] = top-right & bottom-left, [2] = bottom-right
-        return [values[0], values[1], values[2], values[1]];
-    }
-    // 4 values: top-left, top-right, bottom-right, bottom-left
-    return [values[0], values[1], values[2], values[3]];
-}
-function clampBorderRadius({ borderRadius, width, height, }) {
-    // According to CSS spec, if the sum of border radii on adjacent corners
-    // exceeds the length of the edge, they should be proportionally reduced
-    const clamped = {
-        topLeft: { ...borderRadius.topLeft },
-        topRight: { ...borderRadius.topRight },
-        bottomRight: { ...borderRadius.bottomRight },
-        bottomLeft: { ...borderRadius.bottomLeft },
-    };
-    // Check top edge
-    const topSum = clamped.topLeft.horizontal + clamped.topRight.horizontal;
-    if (topSum > width) {
-        const factor = width / topSum;
-        clamped.topLeft.horizontal *= factor;
-        clamped.topRight.horizontal *= factor;
-    }
-    // Check right edge
-    const rightSum = clamped.topRight.vertical + clamped.bottomRight.vertical;
-    if (rightSum > height) {
-        const factor = height / rightSum;
-        clamped.topRight.vertical *= factor;
-        clamped.bottomRight.vertical *= factor;
-    }
-    // Check bottom edge
-    const bottomSum = clamped.bottomRight.horizontal + clamped.bottomLeft.horizontal;
-    if (bottomSum > width) {
-        const factor = width / bottomSum;
-        clamped.bottomRight.horizontal *= factor;
-        clamped.bottomLeft.horizontal *= factor;
-    }
-    // Check left edge
-    const leftSum = clamped.bottomLeft.vertical + clamped.topLeft.vertical;
-    if (leftSum > height) {
-        const factor = height / leftSum;
-        clamped.bottomLeft.vertical *= factor;
-        clamped.topLeft.vertical *= factor;
-    }
-    return clamped;
-}
-export function parseBorderRadius({ borderRadius, width, height, }) {
-    // Split by '/' to separate horizontal and vertical radii
-    const parts = borderRadius.split('/').map((part) => part.trim());
-    const horizontalPart = parts[0];
-    const verticalPart = parts[1];
-    // Split each part into individual values
-    const horizontalValues = horizontalPart.split(/\s+/).filter((v) => v);
-    const verticalValues = verticalPart
-        ? verticalPart.split(/\s+/).filter((v) => v)
-        : horizontalValues; // If no '/', use horizontal values for vertical
-    // Expand shorthand to 4 values
-    const [hTopLeft, hTopRight, hBottomRight, hBottomLeft] = expandShorthand(horizontalValues);
-    const [vTopLeft, vTopRight, vBottomRight, vBottomLeft] = expandShorthand(verticalValues);
-    return clampBorderRadius({
-        borderRadius: {
-            topLeft: {
-                horizontal: parseValue({ value: hTopLeft, reference: width }),
-                vertical: parseValue({ value: vTopLeft, reference: height }),
-            },
-            topRight: {
-                horizontal: parseValue({ value: hTopRight, reference: width }),
-                vertical: parseValue({ value: vTopRight, reference: height }),
-            },
-            bottomRight: {
-                horizontal: parseValue({ value: hBottomRight, reference: width }),
-                vertical: parseValue({ value: vBottomRight, reference: height }),
-            },
-            bottomLeft: {
-                horizontal: parseValue({ value: hBottomLeft, reference: width }),
-                vertical: parseValue({ value: vBottomLeft, reference: height }),
-            },
-        },
-        width,
-        height,
-    });
-}
-export function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero = false, computedStyle, backgroundClip, }) {
-    if (borderRadius.topLeft.horizontal === 0 &&
-        borderRadius.topLeft.vertical === 0 &&
-        borderRadius.topRight.horizontal === 0 &&
-        borderRadius.topRight.vertical === 0 &&
-        borderRadius.bottomRight.horizontal === 0 &&
-        borderRadius.bottomRight.vertical === 0 &&
-        borderRadius.bottomLeft.horizontal === 0 &&
-        borderRadius.bottomLeft.vertical === 0 &&
-        !forceClipEvenWhenZero) {
-        return () => { };
-    }
-    ctx.save();
-    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
-    // See background-clip tests for why this logic matters!
-    const actualBorderRadius = {
-        topLeft: {
-            horizontal: Math.max(0, borderRadius.topLeft.horizontal - (boundingRect.left - rect.left)),
-            vertical: Math.max(0, borderRadius.topLeft.vertical - (boundingRect.top - rect.top)),
-        },
-        topRight: {
-            horizontal: Math.max(0, borderRadius.topRight.horizontal - (rect.right - boundingRect.right)),
-            vertical: Math.max(0, borderRadius.topRight.vertical - (boundingRect.top - rect.top)),
-        },
-        bottomRight: {
-            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - (rect.right - boundingRect.right)),
-            vertical: Math.max(0, borderRadius.bottomRight.vertical - (rect.bottom - boundingRect.bottom)),
-        },
-        bottomLeft: {
-            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - (boundingRect.left - rect.left)),
-            vertical: Math.max(0, borderRadius.bottomLeft.vertical - (rect.bottom - boundingRect.bottom)),
-        },
-    };
-    drawRoundedRectPath({
-        ctx,
-        x: boundingRect.left,
-        y: boundingRect.top,
-        width: boundingRect.width,
-        height: boundingRect.height,
-        borderRadius: actualBorderRadius,
-    });
-    ctx.clip();
-    return () => {
-        ctx.restore();
-    };
-}

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

@@ -1,208 +0,0 @@
-/**
- * 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

@@ -1,127 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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();
-};