@remotion/web-renderer 4.0.376 → 4.0.378

package/dist/calculate-transforms.js

@@ -1,6 +1,22 @@
 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) => {
-    var _a, _b;
     // Compute the cumulative transform by traversing parent nodes
     let parent = element;
     const transforms = [];
@@ -32,21 +48,18 @@ export const calculateTransforms = (element) => {
         transform.boundingClientRect = transform.rect.getBoundingClientRect();
     }
     const dimensions = transforms[0].boundingClientRect;
-    const nativeTransformOrigin = (_a = parseTransformOrigin(transforms[0].transformOrigin)) !== null && _a !== void 0 ? _a : { x: dimensions.width / 2, y: dimensions.height / 2 };
-    let totalMatrix = new DOMMatrix();
+    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 centerX = transform.boundingClientRect.width / 2;
-        const centerY = transform.boundingClientRect.height / 2;
-        const { x: originX, y: originY } = (_b = parseTransformOrigin(transform.transformOrigin)) !== null && _b !== void 0 ? _b : { x: centerX, y: centerY };
-        const deviationFromX = centerX - originX;
-        const deviationFromY = centerY - originY;
-        totalMatrix = totalMatrix
-            .translate(-deviationFromX, -deviationFromY)
+        const globalTransformOrigin = getGlobalTransformOrigin(transform);
+        const transformMatrix = new DOMMatrix()
+            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
             .multiply(transform.matrix)
-            .translate(deviationFromX, deviationFromY);
+            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+        totalMatrix.multiplySelf(transformMatrix);
     }
     return {
         dimensions,

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,12 @@
 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;
-    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);
+import { turnSvgIntoDrawable } from './compose-svg';
+export const composeCanvas = async (canvas, context) => {
+    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+    context.setTransform(totalMatrix);
+    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

@@ -7368,6 +7368,22 @@ var parseTransformOrigin = (transformOrigin) => {
 };
 
 // src/calculate-transforms.ts
+var getInternalTransformOrigin = (transform) => {
+  const centerX = transform.boundingClientRect.width / 2;
+  const centerY = transform.boundingClientRect.height / 2;
+  const origin = parseTransformOrigin(transform.transformOrigin) ?? {
+    x: centerX,
+    y: centerY
+  };
+  return origin;
+};
+var getGlobalTransformOrigin = (transform) => {
+  const { x: originX, y: originY } = getInternalTransformOrigin(transform);
+  return {
+    x: originX + transform.boundingClientRect.left,
+    y: originY + transform.boundingClientRect.top
+  };
+};
 var calculateTransforms = (element) => {
   let parent = element;
   const transforms = [];
@@ -7396,18 +7412,15 @@ var calculateTransforms = (element) => {
     transform.boundingClientRect = transform.rect.getBoundingClientRect();
   }
   const dimensions = transforms[0].boundingClientRect;
-  const nativeTransformOrigin = parseTransformOrigin(transforms[0].transformOrigin) ?? { x: dimensions.width / 2, y: dimensions.height / 2 };
-  let totalMatrix = new DOMMatrix;
+  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 centerX = transform.boundingClientRect.width / 2;
-    const centerY = transform.boundingClientRect.height / 2;
-    const { x: originX, y: originY } = parseTransformOrigin(transform.transformOrigin) ?? { x: centerX, y: centerY };
-    const deviationFromX = centerX - originX;
-    const deviationFromY = centerY - originY;
-    totalMatrix = totalMatrix.translate(-deviationFromX, -deviationFromY).multiply(transform.matrix).translate(deviationFromX, deviationFromY);
+    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,
@@ -7421,44 +7434,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 +7468,16 @@ var svgToImageBitmap = (svg) => {
   });
 };
 
+// src/compose-canvas.ts
+var composeCanvas = async (canvas, context) => {
+  const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+  context.setTransform(totalMatrix);
+  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 +7490,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.378",
 	"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.378",
 		"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.378",
+		"@remotion/player": "4.0.378",
+		"@remotion/media": "4.0.378",
 		"@vitejs/plugin-react": "^5.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",