@remotion/web-renderer 4.0.377 → 4.0.379

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.js

@@ -2,13 +2,7 @@ import { calculateTransforms } from './calculate-transforms';
 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.setTransform(totalMatrix);
     const drawable = canvas instanceof SVGSVGElement
         ? await turnSvgIntoDrawable(canvas)
         : 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,
@@ -7458,10 +7471,7 @@ var turnSvgIntoDrawable = (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);
+  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);

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.377",
+	"version": "4.0.379",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,13 +16,13 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.377",
+		"remotion": "4.0.379",
 		"mediabunny": "1.24.5"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.377",
-		"@remotion/player": "4.0.377",
-		"@remotion/media": "4.0.377",
+		"@remotion/eslint-config-internal": "4.0.379",
+		"@remotion/player": "4.0.379",
+		"@remotion/media": "4.0.379",
 		"@vitejs/plugin-react": "^5.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",