@remotion/web-renderer 4.0.428 → 4.0.430

package/dist/drawing/process-node.js

@@ -0,0 +1,122 @@
+import { Internals } from 'remotion';
+import { calculateTransforms } from './calculate-transforms';
+import { getWiderRectAndExpand } from './clamp-rect-to-parent-bounds';
+import { doRectsIntersect } from './do-rects-intersect';
+import { drawElement } from './draw-element';
+import { getPrecomposeRectFor3DTransform, handle3dTransform, } from './handle-3d-transform';
+import { getPrecomposeRectForMask, handleMask } from './handle-mask';
+import { precomposeDOMElement } from './precompose';
+import { roundToExpandRect } from './round-to-expand-rect';
+import { transformDOMRect } from './transform-rect-with-matrix';
+export const processNode = async ({ element, context, draw, logLevel, parentRect, internalState, rootElement, }) => {
+    const { totalMatrix, reset, dimensions, opacity, computedStyle, precompositing, } = calculateTransforms({
+        element,
+        rootElement,
+    });
+    if (opacity === 0) {
+        reset();
+        return { type: 'skip-children' };
+    }
+    // When backfaceVisibility is 'hidden', don't render if the element is rotated
+    // to show its backface. The backface is visible when the z-component of the
+    // transformed normal vector (0, 0, 1) is negative, which corresponds to m33 < 0.
+    if (computedStyle.backfaceVisibility === 'hidden' && totalMatrix.m33 < 0) {
+        reset();
+        return { type: 'skip-children' };
+    }
+    if (dimensions.width <= 0 || dimensions.height <= 0) {
+        reset();
+        return { type: 'continue', cleanupAfterChildren: null };
+    }
+    const rect = new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height);
+    if (precompositing.needsPrecompositing) {
+        const start = Date.now();
+        let precomposeRect = null;
+        if (precompositing.needsMaskImage) {
+            precomposeRect = getWiderRectAndExpand({
+                firstRect: precomposeRect,
+                secondRect: getPrecomposeRectForMask(element),
+            });
+        }
+        if (precompositing.needs3DTransformViaWebGL) {
+            precomposeRect = getWiderRectAndExpand({
+                firstRect: precomposeRect,
+                secondRect: getPrecomposeRectFor3DTransform({
+                    element,
+                    parentRect,
+                    matrix: totalMatrix,
+                }),
+            });
+        }
+        if (!precomposeRect) {
+            throw new Error('Precompose rect not found');
+        }
+        if (precomposeRect.width <= 0 || precomposeRect.height <= 0) {
+            return { type: 'continue', cleanupAfterChildren: null };
+        }
+        if (!doRectsIntersect(precomposeRect, parentRect)) {
+            return { type: 'continue', cleanupAfterChildren: null };
+        }
+        const { tempCanvas, tempContext } = await precomposeDOMElement({
+            boundingRect: precomposeRect,
+            element,
+            logLevel,
+            internalState,
+        });
+        let drawable = tempCanvas;
+        const rectAfterTransforms = roundToExpandRect(transformDOMRect({
+            rect: precomposeRect,
+            matrix: totalMatrix,
+        }));
+        if (precompositing.needsMaskImage) {
+            handleMask({
+                gradientInfo: precompositing.needsMaskImage,
+                rect,
+                precomposeRect,
+                tempContext,
+            });
+        }
+        if (precompositing.needs3DTransformViaWebGL) {
+            const t = handle3dTransform({
+                matrix: totalMatrix,
+                precomposeRect,
+                tempCanvas: drawable,
+                rectAfterTransforms,
+                internalState,
+            });
+            if (t) {
+                drawable = t;
+            }
+        }
+        const previousTransform = context.getTransform();
+        if (drawable) {
+            context.setTransform(new DOMMatrix());
+            context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+            context.setTransform(previousTransform);
+            Internals.Log.trace({
+                logLevel,
+                tag: '@remotion/web-renderer',
+            }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms`);
+            internalState.addPrecompose({
+                canvasWidth: precomposeRect.width,
+                canvasHeight: precomposeRect.height,
+            });
+        }
+        reset();
+        return { type: 'skip-children' };
+    }
+    const { cleanupAfterChildren } = await drawElement({
+        rect,
+        computedStyle,
+        context,
+        draw,
+        opacity,
+        totalMatrix,
+        parentRect,
+        logLevel,
+        element,
+        internalState,
+    });
+    reset();
+    return { type: 'continue', cleanupAfterChildren };
+};

package/dist/drawing/round-to-expand-rect.js

@@ -0,0 +1,7 @@
+export const roundToExpandRect = (rect) => {
+    const left = Math.floor(rect.left);
+    const top = Math.floor(rect.top);
+    const right = Math.ceil(rect.right);
+    const bottom = Math.ceil(rect.bottom);
+    return new DOMRect(left, top, right - left, bottom - top);
+};

package/dist/drawing/text/apply-text-transform.js

@@ -0,0 +1,12 @@
+export const applyTextTransform = (text, transform) => {
+    if (transform === 'uppercase') {
+        return text.toUpperCase();
+    }
+    if (transform === 'lowercase') {
+        return text.toLowerCase();
+    }
+    if (transform === 'capitalize') {
+        return text.replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+    return text;
+};

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

@@ -0,0 +1,53 @@
+import { Internals } from 'remotion';
+import { applyTextTransform } from './apply-text-transform';
+import { findLineBreaks } from './find-line-breaks.text';
+import { getCollapsedText } from './get-collapsed-text';
+export const drawText = ({ span, logLevel, onlyBackgroundClip, }) => {
+    const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
+        const { fontFamily, fontSize, fontWeight, direction, writingMode, letterSpacing, textTransform, webkitTextFillColor, } = computedStyle;
+        const isVertical = writingMode !== 'horizontal-tb';
+        if (isVertical) {
+            // TODO: Only warn once per render.
+            Internals.Log.warn({
+                logLevel,
+                tag: '@remotion/web-renderer',
+            }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
+            return;
+        }
+        contextToDraw.save();
+        const fontSizePx = parseFloat(fontSize);
+        contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
+        contextToDraw.fillStyle =
+            // If text is being applied with backgroundClipText, we need to use a solid color otherwise it won't get
+            // applied in canvas
+            onlyBackgroundClip
+                ? 'black'
+                : // -webkit-text-fill-color overrides color, and defaults to the value of `color`
+                    webkitTextFillColor;
+        contextToDraw.letterSpacing = letterSpacing;
+        const isRTL = direction === 'rtl';
+        contextToDraw.textAlign = isRTL ? 'right' : 'left';
+        contextToDraw.textBaseline = 'alphabetic';
+        const originalText = span.textContent;
+        const collapsedText = getCollapsedText(span);
+        const transformedText = applyTextTransform(collapsedText, textTransform);
+        span.textContent = transformedText;
+        // For RTL text, fill from the right edge instead of left
+        const xPosition = isRTL ? rect.right : rect.left;
+        const lines = findLineBreaks(span, isRTL);
+        let offsetTop = 0;
+        const measurements = contextToDraw.measureText(lines[0].text);
+        const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+        const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
+        for (const line of lines) {
+            // Calculate leading
+            const leading = line.height - fontHeight;
+            const halfLeading = leading / 2;
+            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + halfLeading + fontBoundingBoxAscent + offsetTop);
+            offsetTop += line.height;
+        }
+        span.textContent = originalText;
+        contextToDraw.restore();
+    };
+    return drawFn;
+};

package/dist/drawing/text/find-line-breaks.text.js

@@ -0,0 +1,118 @@
+import { getCollapsedText } from './get-collapsed-text';
+// Punctuation that cannot start a line according to Unicode line breaking rules
+// When these would start a line, the browser moves the preceding word to the new line
+const cannotStartLine = (segment) => {
+    if (segment.length === 0)
+        return false;
+    const firstChar = segment[0];
+    const forbiddenLineStarts = [
+        '.',
+        ',',
+        ';',
+        ':',
+        '!',
+        '?',
+        ')',
+        ']',
+        '}',
+        '"',
+        "'",
+        '"',
+        `'`,
+        '»',
+        '…',
+        '‥',
+        '·',
+        '%',
+        '‰',
+    ];
+    return forbiddenLineStarts.includes(firstChar);
+};
+export function findLineBreaks(span, rtl) {
+    const textNode = span.childNodes[0];
+    const originalText = textNode.textContent;
+    const originalRect = span.getBoundingClientRect();
+    const computedStyle = getComputedStyle(span);
+    const segmenter = new Intl.Segmenter('en', { granularity: 'word' });
+    const segments = segmenter.segment(originalText);
+    const words = Array.from(segments).map((s) => s.segment);
+    // If the text would be centered in a flexbox container
+    const lines = [];
+    let currentLine = '';
+    let testText = '';
+    let previousRect = originalRect;
+    textNode.textContent = '';
+    for (let i = 0; i < words.length; i += 1) {
+        const word = words[i];
+        testText += word;
+        let wordsToAdd = word;
+        while (typeof words[i + 1] !== 'undefined' && words[i + 1].trim() === '') {
+            testText += words[i + 1];
+            wordsToAdd += words[i + 1];
+            i++;
+        }
+        previousRect = span.getBoundingClientRect();
+        textNode.textContent = testText;
+        const collapsedText = getCollapsedText(span);
+        textNode.textContent = collapsedText;
+        const rect = span.getBoundingClientRect();
+        const currentHeight = rect.height;
+        // If height changed significantly, we had a line break
+        if (previousRect &&
+            previousRect.height !== 0 &&
+            Math.abs(currentHeight - previousRect.height) > 2) {
+            const offsetHorizontal = rtl
+                ? previousRect.right - originalRect.right
+                : previousRect.left - originalRect.left;
+            const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes('preserve');
+            let textForPreviousLine = currentLine;
+            let textForNewLine = wordsToAdd;
+            // If the segment that triggered the break can't start a line (e.g., punctuation),
+            // the browser would have moved the preceding word to the new line as well
+            if (cannotStartLine(word)) {
+                const currentLineSegments = Array.from(segmenter.segment(currentLine)).map((s) => s.segment);
+                // Find the last non-whitespace segment (the word to move)
+                let lastWordIndex = currentLineSegments.length - 1;
+                while (lastWordIndex >= 0 &&
+                    currentLineSegments[lastWordIndex].trim() === '') {
+                    lastWordIndex--;
+                }
+                if (lastWordIndex >= 0) {
+                    // Move the last word (and any trailing whitespace) to the new line
+                    textForPreviousLine = currentLineSegments
+                        .slice(0, lastWordIndex)
+                        .join('');
+                    textForNewLine =
+                        currentLineSegments.slice(lastWordIndex).join('') + wordsToAdd;
+                }
+            }
+            lines.push({
+                text: shouldCollapse ? textForPreviousLine.trim() : textForPreviousLine,
+                height: currentHeight - previousRect.height,
+                offsetHorizontal,
+            });
+            currentLine = textForNewLine;
+        }
+        else {
+            currentLine += wordsToAdd;
+        }
+    }
+    // Add the last line
+    if (currentLine) {
+        textNode.textContent = testText;
+        const rects = span.getClientRects();
+        const rect = span.getBoundingClientRect();
+        const lastRect = rects[rects.length - 1];
+        const offsetHorizontal = rtl
+            ? lastRect.right - originalRect.right
+            : lastRect.left - originalRect.left;
+        lines.push({
+            text: currentLine,
+            height: rect.height - lines.reduce((acc, curr) => acc + curr.height, 0),
+            offsetHorizontal,
+        });
+    }
+    // Reset to original text
+    textNode.textContent = originalText;
+    return lines;
+}

package/dist/drawing/text/get-collapsed-text.d.ts

@@ -0,0 +1 @@
+export declare const getCollapsedText: (span: HTMLSpanElement) => string;

package/dist/drawing/text/get-collapsed-text.js

@@ -0,0 +1,46 @@
+export const getCollapsedText = (span) => {
+    const textNode = span.firstChild;
+    if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
+        throw new Error('Span must contain a single text node');
+    }
+    const originalText = textNode.textContent || '';
+    let collapsedText = originalText;
+    // Helper to measure width
+    const measureWidth = (text) => {
+        textNode.textContent = text;
+        return span.getBoundingClientRect().width;
+    };
+    const originalWidth = measureWidth(originalText);
+    // Test leading whitespace
+    if (/^\s/.test(collapsedText)) {
+        const trimmedLeading = collapsedText.replace(/^\s+/, '');
+        const newWidth = measureWidth(trimmedLeading);
+        if (newWidth === originalWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = trimmedLeading;
+        }
+    }
+    // Test trailing whitespace (on current collapsed text)
+    if (/\s$/.test(collapsedText)) {
+        const currentWidth = measureWidth(collapsedText);
+        const trimmedTrailing = collapsedText.replace(/\s+$/, '');
+        const newWidth = measureWidth(trimmedTrailing);
+        if (newWidth === currentWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = trimmedTrailing;
+        }
+    }
+    // Test internal duplicate whitespace (on current collapsed text)
+    if (/\s\s/.test(collapsedText)) {
+        const currentWidth = measureWidth(collapsedText);
+        const collapsedInternal = collapsedText.replace(/\s\s+/g, ' ');
+        const newWidth = measureWidth(collapsedInternal);
+        if (newWidth === currentWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = collapsedInternal;
+        }
+    }
+    // Restore original text
+    textNode.textContent = originalText;
+    return collapsedText;
+};

package/dist/drawing/text/handle-text-node.js

@@ -0,0 +1,24 @@
+import { processNode } from '../process-node';
+import { drawText } from './draw-text';
+export const handleTextNode = async ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }) => {
+    const span = document.createElement('span');
+    const parent = node.parentNode;
+    if (!parent) {
+        throw new Error('Text node has no parent');
+    }
+    parent.insertBefore(span, node);
+    span.appendChild(node);
+    const value = await processNode({
+        context,
+        element: span,
+        draw: drawText({ span, logLevel, onlyBackgroundClip }),
+        logLevel,
+        parentRect,
+        internalState,
+        rootElement,
+    });
+    // Undo the layout manipulation
+    parent.insertBefore(node, span);
+    parent.removeChild(span);
+    return value;
+};

package/dist/drawing/text/parse-paint-order.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Parse paint-order CSS property to determine if stroke should be drawn before fill.
+ * Default order is: fill, stroke, markers
+ * paintOrder can be "normal", "fill", "stroke", "fill stroke", "stroke fill", etc.
+ */
+export declare const parsePaintOrder: (paintOrder: string) => {
+    strokeFirst: boolean;
+};

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

@@ -0,0 +1,177 @@
+// Vertex shader - now includes texture coordinates
+const vsSource = `
+		attribute vec2 aPosition;
+		attribute vec2 aTexCoord;
+		uniform mat4 uTransform;
+		uniform mat4 uProjection;
+		varying vec2 vTexCoord;
+
+		void main() {
+				gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
+				vTexCoord = aTexCoord;
+		}
+`;
+// Fragment shader - samples from texture and unpremultiplies alpha
+const fsSource = `
+		precision mediump float;
+		uniform sampler2D uTexture;
+		varying vec2 vTexCoord;
+
+		void main() {
+				gl_FragColor = texture2D(uTexture, vTexCoord);
+		}
+`;
+function compileShader(shaderGl, source, type) {
+    const shader = shaderGl.createShader(type);
+    if (!shader) {
+        throw new Error('Could not create shader');
+    }
+    shaderGl.shaderSource(shader, source);
+    shaderGl.compileShader(shader);
+    if (!shaderGl.getShaderParameter(shader, shaderGl.COMPILE_STATUS)) {
+        const log = shaderGl.getShaderInfoLog(shader);
+        shaderGl.deleteShader(shader);
+        throw new Error('Shader compile error: ' + log);
+    }
+    return shader;
+}
+const createHelperCanvas = ({ canvasWidth, canvasHeight, helperCanvasState, }) => {
+    var _a;
+    if (helperCanvasState.current) {
+        // Resize canvas if dimensions changed
+        if (helperCanvasState.current.canvas.width !== canvasWidth ||
+            helperCanvasState.current.canvas.height !== canvasHeight) {
+            helperCanvasState.current.canvas.width = canvasWidth;
+            helperCanvasState.current.canvas.height = canvasHeight;
+        }
+        // Always reset viewport and clear when reusing
+        helperCanvasState.current.gl.viewport(0, 0, canvasWidth, canvasHeight);
+        helperCanvasState.current.gl.clearColor(0, 0, 0, 0);
+        helperCanvasState.current.gl.clear(helperCanvasState.current.gl.COLOR_BUFFER_BIT);
+        return helperCanvasState.current;
+    }
+    const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
+    const gl = (_a = canvas.getContext('webgl', {
+        premultipliedAlpha: true,
+    })) !== null && _a !== void 0 ? _a : undefined;
+    if (!gl) {
+        throw new Error('WebGL not supported');
+    }
+    // Compile shaders and create program once
+    const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
+    const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
+    const program = gl.createProgram();
+    if (!program) {
+        throw new Error('Could not create program');
+    }
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        throw new Error('Program link error: ' + gl.getProgramInfoLog(program));
+    }
+    // Get attribute and uniform locations once
+    const locations = {
+        aPosition: gl.getAttribLocation(program, 'aPosition'),
+        aTexCoord: gl.getAttribLocation(program, 'aTexCoord'),
+        uTransform: gl.getUniformLocation(program, 'uTransform'),
+        uProjection: gl.getUniformLocation(program, 'uProjection'),
+        uTexture: gl.getUniformLocation(program, 'uTexture'),
+    };
+    // Shaders can be deleted after linking
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    const cleanup = () => {
+        gl.deleteProgram(program);
+        const loseContext = gl.getExtension('WEBGL_lose_context');
+        if (loseContext) {
+            loseContext.loseContext();
+        }
+    };
+    helperCanvasState.current = { canvas, gl, program, locations, cleanup };
+    return helperCanvasState.current;
+};
+export const transformIn3d = ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, internalState, }) => {
+    const { canvas, gl, program, locations } = createHelperCanvas({
+        canvasWidth: rectAfterTransforms.width,
+        canvasHeight: rectAfterTransforms.height,
+        helperCanvasState: internalState.helperCanvasState,
+    });
+    // Use the cached program
+    gl.useProgram(program);
+    // Setup viewport and clear (already done in createHelperCanvas, but ensure it's set)
+    gl.viewport(0, 0, rectAfterTransforms.width, rectAfterTransforms.height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    // Enable blending
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    // Create vertex buffer
+    const vertexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+    // prettier-ignore
+    const vertices = new Float32Array([
+        untransformedRect.x, untransformedRect.y, 0, 0,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0,
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1,
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y + untransformedRect.height, 1, 1,
+    ]);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    // Setup attributes using cached locations
+    gl.enableVertexAttribArray(locations.aPosition);
+    gl.vertexAttribPointer(locations.aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
+    gl.enableVertexAttribArray(locations.aTexCoord);
+    gl.vertexAttribPointer(locations.aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
+    // Create and configure texture
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
+    // Set uniforms using cached locations
+    const transformMatrix = matrix.toFloat32Array();
+    const zScale = 1000000000;
+    // Projection matrix accounts for the output canvas dimensions
+    const projectionMatrix = new Float32Array([
+        2 / rectAfterTransforms.width,
+        0,
+        0,
+        0,
+        0,
+        -2 / rectAfterTransforms.height,
+        0,
+        0,
+        0,
+        0,
+        -2 / zScale,
+        0,
+        -1 + (2 * -rectAfterTransforms.x) / rectAfterTransforms.width,
+        1 - (2 * -rectAfterTransforms.y) / rectAfterTransforms.height,
+        0,
+        1,
+    ]);
+    gl.uniformMatrix4fv(locations.uTransform, false, transformMatrix);
+    gl.uniformMatrix4fv(locations.uProjection, false, projectionMatrix);
+    gl.uniform1i(locations.uTexture, 0);
+    // Draw
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    // Clean up per-frame resources only
+    gl.disableVertexAttribArray(locations.aPosition);
+    gl.disableVertexAttribArray(locations.aTexCoord);
+    gl.deleteTexture(texture);
+    gl.deleteBuffer(vertexBuffer);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    // Reset state
+    gl.disable(gl.BLEND);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    return {
+        canvas,
+        rect: rectAfterTransforms,
+    };
+};

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

package/dist/drawing/transform.js

@@ -0,0 +1,10 @@
+export const setTransform = ({ ctx, transform, parentRect, }) => {
+    const offsetMatrix = new DOMMatrix()
+        .translate(-parentRect.x, -parentRect.y)
+        .multiply(transform)
+        .translate(parentRect.x, parentRect.y);
+    ctx.setTransform(offsetMatrix);
+    return () => {
+        ctx.setTransform(new DOMMatrix());
+    };
+};

package/dist/drawing/turn-svg-into-drawable.js

@@ -0,0 +1,41 @@
+export const turnSvgIntoDrawable = (svg) => {
+    const { fill, color } = getComputedStyle(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;
+    const originalFill = svg.style.fill;
+    const originalColor = svg.style.color;
+    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';
+    svg.style.fill = fill;
+    svg.style.color = color;
+    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;
+    svg.style.fill = originalFill;
+    svg.style.color = originalColor;
+    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;
+    });
+};