@remotion/web-renderer 4.0.376 → 4.0.377

package/dist/compose-canvas.d.ts

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

package/dist/compose-canvas.js

@@ -1,14 +1,18 @@
 import { calculateTransforms } from './calculate-transforms';
-export const composeCanvas = (canvas, context) => {
-    const { totalMatrix, reset, dimensions, nativeTransformOrigin } = calculateTransforms(canvas);
-    const translateX = nativeTransformOrigin.x + dimensions.left;
-    const translateY = nativeTransformOrigin.y + dimensions.top;
+import { turnSvgIntoDrawable } from './compose-svg';
+export const composeCanvas = async (canvas, context) => {
+    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+    const translateX = dimensions.left + dimensions.width / 2;
+    const translateY = dimensions.top + dimensions.height / 2;
     const matrix = new DOMMatrix()
         .translate(translateX, translateY)
         .multiply(totalMatrix)
         .translate(-translateX, -translateY);
     context.setTransform(matrix);
-    context.drawImage(canvas, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    const drawable = canvas instanceof SVGSVGElement
+        ? await turnSvgIntoDrawable(canvas)
+        : canvas;
+    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
     context.setTransform(new DOMMatrix());
     reset();
 };

package/dist/compose-svg.d.ts

@@ -1,9 +1 @@
-type ImgDrawable = {
-    image: HTMLImageElement;
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-};
-export declare const svgToImageBitmap: (svg: SVGSVGElement) => Promise<ImgDrawable | null>;
-export {};
+export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/compose-svg.js

@@ -1,25 +1,30 @@
-import { calculateTransforms } from './calculate-transforms';
-export const svgToImageBitmap = (svg) => {
-    const { dimensions: svgDimensions, totalMatrix, reset, } = calculateTransforms(svg);
+export const turnSvgIntoDrawable = (svg) => {
     const originalTransform = svg.style.transform;
     const originalTransformOrigin = svg.style.transformOrigin;
-    svg.style.transform = totalMatrix.toString();
-    svg.style.transformOrigin = '50% 50%';
+    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;
-    reset();
     return new Promise((resolve, reject) => {
-        const image = new Image(svgDimensions.width, svgDimensions.height);
+        const image = new Image();
         const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
         image.onload = function () {
-            resolve({
-                image,
-                width: svgDimensions.width,
-                height: svgDimensions.height,
-                left: svgDimensions.left,
-                top: svgDimensions.top,
-            });
+            resolve(image);
         };
         image.onerror = () => {
             reject(new Error('Failed to convert SVG to image'));

package/dist/compose.js

@@ -1,5 +1,4 @@
 import { composeCanvas } from './compose-canvas';
-import { svgToImageBitmap } from './compose-svg';
 export const compose = async ({ composables, width, height, }) => {
     const canvas = new OffscreenCanvas(width, height);
     const context = canvas.getContext('2d');
@@ -8,16 +7,7 @@ export const compose = async ({ composables, width, height, }) => {
     }
     // TODO: Consider z-index
     for (const composable of composables) {
-        if (composable.type === 'canvas' || composable.type === 'img') {
-            composeCanvas(composable.element, context);
-        }
-        else if (composable.type === 'svg') {
-            // This already accumulates the transforms of the parent
-            const imageBitmap = await svgToImageBitmap(composable.element);
-            if (imageBitmap) {
-                context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top, imageBitmap.width, imageBitmap.height);
-            }
-        }
+        await composeCanvas(composable.element, context);
     }
     return canvas;
 };

package/dist/esm/index.mjs

@@ -7421,44 +7421,32 @@ var calculateTransforms = (element) => {
   };
 };
 
-// src/compose-canvas.ts
-var composeCanvas = (canvas, context) => {
-  const { totalMatrix, reset, dimensions, nativeTransformOrigin } = calculateTransforms(canvas);
-  const translateX = nativeTransformOrigin.x + dimensions.left;
-  const translateY = nativeTransformOrigin.y + dimensions.top;
-  const matrix = new DOMMatrix().translate(translateX, translateY).multiply(totalMatrix).translate(-translateX, -translateY);
-  context.setTransform(matrix);
-  context.drawImage(canvas, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-  context.setTransform(new DOMMatrix);
-  reset();
-};
-
 // src/compose-svg.ts
-var svgToImageBitmap = (svg) => {
-  const {
-    dimensions: svgDimensions,
-    totalMatrix,
-    reset
-  } = calculateTransforms(svg);
+var turnSvgIntoDrawable = (svg) => {
   const originalTransform = svg.style.transform;
   const originalTransformOrigin = svg.style.transformOrigin;
-  svg.style.transform = totalMatrix.toString();
-  svg.style.transformOrigin = "50% 50%";
+  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 = "";
+  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;
-  reset();
   return new Promise((resolve, reject) => {
-    const image = new Image(svgDimensions.width, svgDimensions.height);
+    const image = new Image;
     const url2 = `data:image/svg+xml;base64,${btoa(svgData)}`;
     image.onload = function() {
-      resolve({
-        image,
-        width: svgDimensions.width,
-        height: svgDimensions.height,
-        left: svgDimensions.left,
-        top: svgDimensions.top
-      });
+      resolve(image);
     };
     image.onerror = () => {
       reject(new Error("Failed to convert SVG to image"));
@@ -7467,6 +7455,19 @@ var svgToImageBitmap = (svg) => {
   });
 };
 
+// src/compose-canvas.ts
+var composeCanvas = async (canvas, context) => {
+  const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+  const translateX = dimensions.left + dimensions.width / 2;
+  const translateY = dimensions.top + dimensions.height / 2;
+  const matrix = new DOMMatrix().translate(translateX, translateY).multiply(totalMatrix).translate(-translateX, -translateY);
+  context.setTransform(matrix);
+  const drawable = canvas instanceof SVGSVGElement ? await turnSvgIntoDrawable(canvas) : canvas;
+  context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+  context.setTransform(new DOMMatrix);
+  reset();
+};
+
 // src/compose.ts
 var compose = async ({
   composables,
@@ -7479,14 +7480,7 @@ var compose = async ({
     throw new Error("Could not get context");
   }
   for (const composable of composables) {
-    if (composable.type === "canvas" || composable.type === "img") {
-      composeCanvas(composable.element, context);
-    } else if (composable.type === "svg") {
-      const imageBitmap = await svgToImageBitmap(composable.element);
-      if (imageBitmap) {
-        context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top, imageBitmap.width, imageBitmap.height);
-      }
-    }
+    await composeCanvas(composable.element, context);
   }
   return canvas;
 };

package/package.json

@@ -3,25 +3,26 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.376",
+	"version": "4.0.377",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
 		"formatting": "prettier --experimental-cli src --check",
 		"lint": "eslint src",
 		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts",
-		"testwebrenderer": "vitest src/test --browser --run"
+		"testwebrenderer": "vitest src/test --browser --run",
+		"studio": "cd ../example && bunx remotion studio ../web-renderer/src/test/studio.ts"
 	},
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.376",
+		"remotion": "4.0.377",
 		"mediabunny": "1.24.5"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.376",
-		"@remotion/player": "4.0.376",
-		"@remotion/media": "4.0.376",
+		"@remotion/eslint-config-internal": "4.0.377",
+		"@remotion/player": "4.0.377",
+		"@remotion/media": "4.0.377",
 		"@vitejs/plugin-react": "^5.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",