@remotion/web-renderer 4.0.394 → 4.0.396

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

package/dist/drawing/process-node.d.ts

@@ -0,0 +1,17 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+import type { DrawFn } from './drawn-fn';
+export type ProcessNodeReturnValue = {
+    type: 'continue';
+    cleanupAfterChildren: () => void;
+} | {
+    type: 'skip-children';
+};
+export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, }: {
+    element: HTMLElement | SVGElement;
+    context: OffscreenCanvasRenderingContext2D;
+    draw: DrawFn;
+    logLevel: LogLevel;
+    parentRect: DOMRect;
+    internalState: InternalState;
+}) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/process-node.js

@@ -0,0 +1,41 @@
+import { calculateTransforms } from './calculate-transforms';
+import { drawElement } from './draw-element';
+import { handle3dTransform } from './handle-3d-transform';
+export const processNode = async ({ element, context, draw, logLevel, parentRect, internalState, }) => {
+    const transforms = calculateTransforms({
+        element,
+        offsetLeft: parentRect.x,
+        offsetTop: parentRect.y,
+    });
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
+    if (opacity === 0) {
+        reset();
+        return { type: 'continue', cleanupAfterChildren: () => { } };
+    }
+    if (dimensions.width <= 0 || dimensions.height <= 0) {
+        reset();
+        return { type: 'continue', cleanupAfterChildren: () => { } };
+    }
+    if (!totalMatrix.is2D) {
+        await handle3dTransform({
+            element,
+            matrix: totalMatrix,
+            parentRect,
+            context,
+            logLevel,
+            internalState,
+        });
+        reset();
+        return { type: 'skip-children' };
+    }
+    const { cleanupAfterChildren } = await drawElement({
+        rect: new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height),
+        computedStyle,
+        context,
+        draw,
+        opacity,
+        totalMatrix,
+    });
+    reset();
+    return { type: 'continue', cleanupAfterChildren };
+};

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

@@ -4,7 +4,7 @@ import { findLineBreaks } from './find-line-breaks.text';
 import { getCollapsedText } from './get-collapsed-text';
 export const drawText = (span) => {
     const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
-        const { fontFamily, fontSize, fontWeight, color, lineHeight, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
+        const { fontFamily, fontSize, fontWeight, color, direction, writingMode, letterSpacing, textTransform, } = computedStyle;
         const isVertical = writingMode !== 'horizontal-tb';
         if (isVertical) {
             // TODO: Only warn once per render.
@@ -15,16 +15,13 @@ export const drawText = (span) => {
             return;
         }
         contextToDraw.save();
-        contextToDraw.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+        const fontSizePx = parseFloat(fontSize);
+        contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
         contextToDraw.fillStyle = color;
         contextToDraw.letterSpacing = letterSpacing;
-        const fontSizePx = parseFloat(fontSize);
-        // TODO: This is not necessarily correct, need to create text and measure to know for sure
-        const lineHeightPx = lineHeight === 'normal' ? 1.2 * fontSizePx : parseFloat(lineHeight);
-        const baselineOffset = (lineHeightPx - fontSizePx) / 2;
         const isRTL = direction === 'rtl';
         contextToDraw.textAlign = isRTL ? 'right' : 'left';
-        contextToDraw.textBaseline = 'top';
+        contextToDraw.textBaseline = 'alphabetic';
         const originalText = span.textContent;
         const collapsedText = getCollapsedText(span);
         const transformedText = applyTextTransform(collapsedText, textTransform);
@@ -33,8 +30,9 @@ export const drawText = (span) => {
         const xPosition = isRTL ? rect.right : rect.left;
         const lines = findLineBreaks(span, isRTL);
         let offsetTop = 0;
+        const { fontBoundingBoxAscent } = contextToDraw.measureText(lines[0].text);
         for (const line of lines) {
-            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + offsetTop + fontBoundingBoxAscent);
             offsetTop += line.offsetTop;
         }
         span.textContent = originalText;

package/dist/drawing/text/handle-text-node.d.ts

@@ -1,7 +1,10 @@
-import type { DrawElementToCanvasReturnValue } from '../draw-element-to-canvas';
-export declare const handleTextNode: ({ node, context, offsetLeft, offsetTop, }: {
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../../internal-state';
+import type { ProcessNodeReturnValue } from '../process-node';
+export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
-    offsetLeft: number;
-    offsetTop: number;
-}) => Promise<DrawElementToCanvasReturnValue>;
+    logLevel: LogLevel;
+    parentRect: DOMRect;
+    internalState: InternalState;
+}) => Promise<ProcessNodeReturnValue>;

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

@@ -1,6 +1,6 @@
-import { drawElementToCanvas } from '../draw-element-to-canvas';
+import { processNode } from '../process-node';
 import { drawText } from './draw-text';
-export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, }) => {
+export const handleTextNode = async ({ node, context, logLevel, parentRect, internalState, }) => {
     const span = document.createElement('span');
     const parent = node.parentNode;
     if (!parent) {
@@ -8,12 +8,13 @@ export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, })
     }
     parent.insertBefore(span, node);
     span.appendChild(node);
-    const value = await drawElementToCanvas({
+    const value = await processNode({
         context,
         element: span,
         draw: drawText(span),
-        offsetLeft,
-        offsetTop,
+        logLevel,
+        parentRect,
+        internalState,
     });
     // Undo the layout manipulation
     parent.insertBefore(node, span);

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

@@ -1,8 +1,8 @@
-export declare const transformIn3d: ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }: {
-    canvasWidth: number;
-    canvasHeight: number;
-    offsetLeft: number;
-    offsetTop: number;
+export declare const transformIn3d: ({ matrix, sourceCanvas, untransformedRect, }: {
+    untransformedRect: DOMRect;
     matrix: DOMMatrix;
-    sourceCanvas: HTMLCanvasElement | OffscreenCanvas;
-}) => OffscreenCanvas;
+    sourceCanvas: OffscreenCanvas;
+}) => {
+    canvas: OffscreenCanvas;
+    rect: DOMRect;
+};

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

@@ -1,3 +1,4 @@
+import { transformDOMRect } from './transform-rect-with-matrix';
 function compileShader(shaderGl, source, type) {
     const shader = shaderGl.createShader(type);
     if (!shader) {
@@ -22,6 +23,12 @@ const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
         helperCanvas.gl.clear(helperCanvas.gl.COLOR_BUFFER_BIT);
         return helperCanvas;
     }
+    if (helperCanvas) {
+        helperCanvas.gl.deleteProgram(helperCanvas.program);
+        helperCanvas.gl.deleteShader(helperCanvas.vertexShader);
+        helperCanvas.gl.deleteShader(helperCanvas.fragmentShader);
+        helperCanvas = null;
+    }
     const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
     const gl = canvas.getContext('webgl');
     if (!gl) {
@@ -67,11 +74,18 @@ const createHelperCanvas = ({ canvasWidth, canvasHeight, }) => {
     // Enable blending for transparency
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    helperCanvas = { canvas, gl, program };
+    helperCanvas = { canvas, gl, program, vertexShader, fragmentShader };
     return helperCanvas;
 };
-export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas, offsetLeft, offsetTop, }) => {
-    const { canvas, gl, program } = createHelperCanvas({ canvasWidth, canvasHeight });
+export const transformIn3d = ({ matrix, sourceCanvas, untransformedRect, }) => {
+    const rectAfterTransforms = transformDOMRect({
+        rect: untransformedRect,
+        matrix,
+    });
+    const { canvas, gl, program } = createHelperCanvas({
+        canvasWidth: Math.ceil(rectAfterTransforms.width),
+        canvasHeight: Math.ceil(rectAfterTransforms.height),
+    });
     const vertexBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     // Create a quad (two triangles) with texture coordinates
@@ -79,13 +93,13 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     const vertices = new Float32Array([
         // Position (x, y) + TexCoord (u, v)
         // First:
-        offsetLeft, offsetTop, 0, 0, // bottom-left
-        canvasWidth + offsetLeft, offsetTop, 1, 0, // bottom-right
-        offsetLeft, canvasHeight + offsetTop, 0, 1, // top-left
+        untransformedRect.x, untransformedRect.y, 0, 0, // bottom-left
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0, // bottom-right
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1, // top-left
         // Second:
-        offsetLeft, canvasHeight + offsetTop, 0, 1, // top-left
-        canvasWidth + offsetLeft, offsetTop, 1, 0, // bottom-right
-        canvasWidth + offsetLeft, canvasHeight + offsetTop, 1, 1, // top-right
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1, // top-left
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0, // bottom-right
+        untransformedRect.x + untransformedRect.width, untransformedRect.y + untransformedRect.height, 1, 1, // top-right
     ]);
     gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
     const aPosition = gl.getAttribLocation(program, 'aPosition');
@@ -109,7 +123,7 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     // The transform matrix
     const transformMatrix = matrix.toFloat32Array();
     const zScale = 1000000000; // By default infinite in chrome
-    // Create orthographic projection matrix for pixel coordinates
+    // Create orthographic projection matrix for pixel coordinates with offset
     const projectionMatrix = new Float32Array([
         2 / canvas.width,
         0,
@@ -123,8 +137,8 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
         0,
         -2 / zScale,
         0,
-        -1,
-        1,
+        -1 + (2 * -rectAfterTransforms.x) / canvas.width,
+        1 - (2 * -rectAfterTransforms.y) / canvas.height,
         0,
         1,
     ]);
@@ -138,5 +152,5 @@ export const transformIn3d = ({ canvasWidth, canvasHeight, matrix, sourceCanvas,
     // Clean up resources to prevent leaks and ensure clean state for reuse
     gl.deleteTexture(texture);
     gl.deleteBuffer(vertexBuffer);
-    return canvas;
+    return { canvas, rect: rectAfterTransforms };
 };

package/dist/drawing/transform-rect-with-matrix.d.ts

@@ -0,0 +1,4 @@
+export declare function transformDOMRect({ rect, matrix, }: {
+    rect: DOMRect;
+    matrix: DOMMatrix;
+}): DOMRect;

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/turn-svg-into-drawable.js

@@ -1,10 +1,13 @@
 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,
@@ -13,6 +16,8 @@ export const turnSvgIntoDrawable = (svg) => {
     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;
@@ -20,6 +25,8 @@ export const turnSvgIntoDrawable = (svg) => {
     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)}`;