@remotion/web-renderer 4.0.387 → 4.0.390

package/dist/calculate-transforms.js

@@ -1,91 +0,0 @@
-import { parseBorderRadius } from './drawing/border-radius';
-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) => {
-    // Compute the cumulative transform by traversing parent nodes
-    let parent = element;
-    const transforms = [];
-    const toReset = [];
-    let borderRadius = '';
-    let opacity = 1;
-    while (parent) {
-        const computedStyle = getComputedStyle(parent);
-        if (parent === element) {
-            borderRadius = computedStyle.borderRadius;
-        }
-        // Multiply opacity values from element and all parents
-        const parentOpacity = computedStyle.opacity;
-        if (parentOpacity && parentOpacity !== '') {
-            opacity *= parseFloat(parentOpacity);
-        }
-        if ((computedStyle.transform && computedStyle.transform !== 'none') ||
-            parent === element) {
-            const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
-                ? undefined
-                : computedStyle.transform;
-            const matrix = new DOMMatrix(toParse);
-            const { transform } = parent.style;
-            parent.style.transform = 'none';
-            transforms.push({
-                matrix,
-                rect: parent,
-                transformOrigin: computedStyle.transformOrigin,
-                boundingClientRect: null,
-            });
-            const parentRef = parent;
-            toReset.push(() => {
-                parentRef.style.transform = transform;
-            });
-        }
-        parent = parent.parentElement;
-    }
-    for (const transform of transforms) {
-        transform.boundingClientRect = transform.rect.getBoundingClientRect();
-    }
-    const dimensions = transforms[0].boundingClientRect;
-    const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
-    const totalMatrix = new DOMMatrix();
-    for (const transform of transforms.slice().reverse()) {
-        if (!transform.boundingClientRect) {
-            throw new Error('Bounding client rect not found');
-        }
-        const globalTransformOrigin = getGlobalTransformOrigin(transform);
-        const transformMatrix = new DOMMatrix()
-            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
-            .multiply(transform.matrix)
-            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-        totalMatrix.multiplySelf(transformMatrix);
-    }
-    return {
-        dimensions,
-        totalMatrix,
-        reset: () => {
-            for (const reset of toReset) {
-                reset();
-            }
-        },
-        nativeTransformOrigin,
-        borderRadius: parseBorderRadius({
-            borderRadius,
-            width: dimensions.width,
-            height: dimensions.height,
-        }),
-        opacity,
-    };
-};

package/dist/composable.d.ts

@@ -1,4 +0,0 @@
-export type Composable = {
-    type: 'element';
-    element: HTMLElement | SVGElement;
-};

package/dist/composable.js

@@ -1 +0,0 @@
-export {};

package/dist/compose-canvas.d.ts

@@ -1 +0,0 @@
-export declare const composeCanvas: (canvas: HTMLCanvasElement | HTMLImageElement | SVGSVGElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/compose-canvas.js

@@ -1,36 +0,0 @@
-import { setBorderRadius } from './border-radius';
-import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './drawing/compose-svg';
-import { setOpacity } from './drawing/opacity';
-import { setTransform } from './drawing/transform';
-export const composeCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
-    if (opacity === 0) {
-        reset();
-        return;
-    }
-    const drawable = canvas instanceof SVGSVGElement
-        ? await turnSvgIntoDrawable(canvas)
-        : canvas;
-    const finishTransform = setTransform({
-        ctx: context,
-        transform: totalMatrix,
-    });
-    const finishBorderRadius = setBorderRadius({
-        ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
-        borderRadius,
-    });
-    const finishOpacity = setOpacity({
-        ctx: context,
-        opacity,
-    });
-    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    finishOpacity();
-    finishBorderRadius();
-    finishTransform();
-    reset();
-};

package/dist/compose-svg.d.ts

@@ -1 +0,0 @@
-export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/compose-svg.js

@@ -1,34 +0,0 @@
-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-canvas.d.ts

@@ -1 +0,0 @@
-export declare const drawElementToCanvas: (canvas: HTMLCanvasElement | HTMLImageElement | SVGSVGElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/drawing/compose-canvas.js

@@ -1,36 +0,0 @@
-import { setBorderRadius } from './border-radius';
-import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './compose-svg';
-import { setOpacity } from './opacity';
-import { setTransform } from './transform';
-export const drawElementToCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
-    if (opacity === 0) {
-        reset();
-        return;
-    }
-    const drawable = canvas instanceof SVGSVGElement
-        ? await turnSvgIntoDrawable(canvas)
-        : canvas;
-    const finishTransform = setTransform({
-        ctx: context,
-        transform: totalMatrix,
-    });
-    const finishBorderRadius = setBorderRadius({
-        ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
-        borderRadius,
-    });
-    const finishOpacity = setOpacity({
-        ctx: context,
-        opacity,
-    });
-    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    finishOpacity();
-    finishBorderRadius();
-    finishTransform();
-    reset();
-};

package/dist/drawing/compose-svg.d.ts

@@ -1 +0,0 @@
-export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/drawing/compose-svg.js

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

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

package/dist/drawing/compose.js

@@ -1,6 +0,0 @@
-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/get-computed-style-cache.js

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

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

@@ -1 +0,0 @@
-export declare const drawTextToCanvas: (parentElement: HTMLElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

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

@@ -1,57 +0,0 @@
-import { withResolvers } from '../../with-resolvers';
-export const drawTextToCanvas = async (parentElement, context) => {
-    const clientRect = parentElement.getBoundingClientRect();
-    const computedStyle = getComputedStyle(parentElement);
-    const clonedNode = parentElement.cloneNode(true);
-    for (let i = 0; i < computedStyle.length; i++) {
-        const propertyName = computedStyle[i];
-        const value = computedStyle.getPropertyValue(propertyName);
-        if (propertyName === 'margin-top' ||
-            propertyName === 'margin-bottom' ||
-            propertyName === 'margin-left' ||
-            propertyName === 'margin-right' ||
-            propertyName === 'margin') {
-            // @ts-expect-error - propertyName is a valid CSS property
-            clonedNode.style[propertyName] = '0px';
-            continue;
-        }
-        // @ts-expect-error - propertyName is a valid CSS property
-        clonedNode.style[propertyName] = value;
-    }
-    // Create an SVG that contains the cloned node via a foreignObject
-    const svgNS = 'http://www.w3.org/2000/svg';
-    const svg = document.createElementNS(svgNS, 'svg');
-    svg.setAttribute('width', `${clientRect.width}`);
-    svg.setAttribute('height', `${clientRect.height}`);
-    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
-    foreignObject.setAttribute('x', '0');
-    foreignObject.setAttribute('y', '0');
-    foreignObject.setAttribute('width', `${clientRect.width}`);
-    foreignObject.setAttribute('height', `${clientRect.height}`);
-    // The cloned node must be in XHTML namespace to render properly
-    const xhtmlNS = 'http://www.w3.org/1999/xhtml';
-    const wrappedDiv = document.createElementNS(xhtmlNS, 'div');
-    wrappedDiv.style.width = `${clientRect.width}px`;
-    wrappedDiv.style.height = `${clientRect.height}px`;
-    wrappedDiv.appendChild(clonedNode);
-    foreignObject.appendChild(wrappedDiv);
-    svg.appendChild(foreignObject);
-    // Convert SVG to data URL
-    const serializer = new XMLSerializer();
-    const svgString = serializer.serializeToString(svg);
-    const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
-    const { promise, resolve, reject } = withResolvers();
-    // Create image and draw when loaded
-    const img = new window.Image();
-    img.onload = function () {
-        resolve(img);
-    };
-    img.onerror = function (err) {
-        // We may want to add robust error handling here
-        reject(err);
-    };
-    img.src = svgDataUrl;
-    await promise;
-    console.log(clientRect);
-    context.drawImage(img, clientRect.left, clientRect.top, clientRect.width, clientRect.height);
-};

package/dist/find-canvas-elements.d.ts

@@ -1 +0,0 @@
-export declare const findCanvasElements: (element: HTMLDivElement) => HTMLCanvasElement[];

package/dist/find-canvas-elements.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findCanvasElements = void 0;
-const findCanvasElements = (element) => {
-    const canvasElements = element.querySelectorAll('canvas');
-    const composables = [];
-    Array.from(canvasElements).forEach((canvasElement) => {
-        const canvas = canvasElement;
-        composables.push(canvas);
-    });
-    return composables;
-};
-exports.findCanvasElements = findCanvasElements;

package/dist/find-capturable-elements.d.ts

@@ -1,2 +0,0 @@
-import type { Composable } from './composable';
-export declare const findCapturableElements: (element: HTMLDivElement, context: OffscreenCanvasRenderingContext2D) => Promise<Composable[]>;

package/dist/find-capturable-elements.js

@@ -1,26 +0,0 @@
-import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
-export const findCapturableElements = async (element, context) => {
-    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
-        if (node instanceof Element) {
-            const computedStyle = getComputedStyle(node);
-            return computedStyle.display === 'none'
-                ? NodeFilter.FILTER_REJECT
-                : NodeFilter.FILTER_ACCEPT;
-        }
-        return NodeFilter.FILTER_ACCEPT;
-    });
-    const composables = [];
-    while (treeWalker.nextNode()) {
-        const node = treeWalker.currentNode;
-        if (node instanceof HTMLCanvasElement ||
-            node instanceof SVGSVGElement ||
-            node instanceof HTMLImageElement) {
-            await drawElementToCanvas(node, context);
-            composables.push({
-                type: 'element',
-                element: node,
-            });
-        }
-    }
-    return composables;
-};

package/dist/opacity.d.ts

@@ -1,4 +0,0 @@
-export declare const setOpacity: ({ ctx, opacity, }: {
-    ctx: OffscreenCanvasRenderingContext2D;
-    opacity: number;
-}) => () => void;

package/dist/opacity.js

@@ -1,7 +0,0 @@
-export const setOpacity = ({ ctx, opacity, }) => {
-    const previousAlpha = ctx.globalAlpha;
-    ctx.globalAlpha = opacity;
-    return () => {
-        ctx.globalAlpha = previousAlpha;
-    };
-};

package/dist/parse-transform-origin.d.ts

@@ -1,4 +0,0 @@
-export declare const parseTransformOrigin: (transformOrigin: string) => {
-    x: number;
-    y: number;
-} | null;

package/dist/parse-transform-origin.js

@@ -1,7 +0,0 @@
-export const parseTransformOrigin = (transformOrigin) => {
-    if (transformOrigin.trim() === '') {
-        return null;
-    }
-    const [x, y] = transformOrigin.split(' ');
-    return { x: parseFloat(x), y: parseFloat(y) };
-};

package/dist/transform.d.ts

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

package/dist/transform.js

@@ -1,6 +0,0 @@
-export const setTransform = ({ ctx, transform, }) => {
-    ctx.setTransform(transform);
-    return () => {
-        ctx.setTransform(new DOMMatrix());
-    };
-};