@remotion/web-renderer 4.0.454 → 4.0.456

package/dist/drawing/calculate-transforms.d.ts

@@ -16,6 +16,7 @@ export declare const calculateTransforms: ({ element, rootElement, }: {
     precompositing: {
         needs3DTransformViaWebGL: boolean;
         needsMaskImage: LinearGradientInfo | null;
+        needsFilterPrecompositing: string | null;
         needsPrecompositing: boolean;
     };
 };

package/dist/drawing/handle-filter.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Gets the precompose rect for an element with a filter that requires precompositing.
+ * Expands the element's bounding rect (including all children) to accommodate drop-shadow spread.
+ */
+export declare const getPrecomposeRectForFilter: ({ element, filter, }: {
+    element: HTMLElement | SVGElement;
+    filter: string;
+}) => DOMRect;
+/**
+ * Applies a filter when drawing a precomposed canvas to the main context.
+ */
+export declare const applyFilterToDrawOperation: ({ context, filter, drawFn, }: {
+    context: OffscreenCanvasRenderingContext2D;
+    filter: string;
+    drawFn: () => void;
+}) => void;

package/dist/esm/index.mjs

@@ -2032,6 +2032,15 @@ var parseTransformOrigin = (transformOrigin) => {
 };
 
 // src/drawing/calculate-transforms.ts
+var filterRequiresPrecompositing = (filter) => {
+  if (!filter || filter === "none") {
+    return null;
+  }
+  if (filter.includes("drop-shadow")) {
+    return filter;
+  }
+  return null;
+};
 var getInternalTransformOrigin = (transform) => {
   const centerX = transform.boundingClientRect.width / 2;
   const centerY = transform.boundingClientRect.height / 2;
@@ -2058,6 +2067,7 @@ var calculateTransforms = ({
   let opacity = 1;
   let elementComputedStyle = null;
   let maskImageInfo = null;
+  let filterForPrecompositing = null;
   while (parent) {
     const originalTransition = parent.style.transition;
     parent.style.transition = "none";
@@ -2067,14 +2077,22 @@ var calculateTransforms = ({
       opacity = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
       maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+      filterForPrecompositing = filterRequiresPrecompositing(computedStyle.filter);
       const originalMaskImage = parent.style.maskImage;
       const originalWebkitMaskImage = parent.style.webkitMaskImage;
       parent.style.maskImage = "none";
       parent.style.webkitMaskImage = "none";
+      const originalFilter = parent.style.filter;
+      if (filterForPrecompositing) {
+        parent.style.filter = "none";
+      }
       const parentRef = parent;
       toReset.push(() => {
         parentRef.style.maskImage = originalMaskImage;
         parentRef.style.webkitMaskImage = originalWebkitMaskImage;
+        if (filterForPrecompositing) {
+          parentRef.style.filter = originalFilter;
+        }
       });
     }
     if (hasAnyTransformCssValue(computedStyle) || parent === element) {
@@ -2136,6 +2154,7 @@ var calculateTransforms = ({
   }
   const needs3DTransformViaWebGL = !totalMatrix.is2D;
   const needsMaskImage = maskImageInfo !== null;
+  const needsFilterPrecompositing = filterForPrecompositing !== null;
   return {
     dimensions,
     totalMatrix,
@@ -2151,7 +2170,8 @@ var calculateTransforms = ({
     precompositing: {
       needs3DTransformViaWebGL,
       needsMaskImage: maskImageInfo,
-      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage)
+      needsFilterPrecompositing: filterForPrecompositing,
+      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage || needsFilterPrecompositing)
     }
   };
 };
@@ -3777,6 +3797,64 @@ var handle3dTransform = ({
   return transformed;
 };
 
+// src/drawing/handle-filter.ts
+var parseDropShadowExpansion = (filter) => {
+  const expansion = { left: 0, right: 0, top: 0, bottom: 0 };
+  const dropShadowRegex = /drop-shadow\(((?:[^()]+|\([^()]*\))+)\)/gi;
+  let match;
+  while ((match = dropShadowRegex.exec(filter)) !== null) {
+    const params = match[1].trim();
+    const numbers = [];
+    const numberRegex = /([+-]?\d*\.?\d+)(?:px)?/g;
+    let numMatch;
+    while ((numMatch = numberRegex.exec(params)) !== null) {
+      const beforeMatch = params.slice(0, numMatch.index);
+      if (!/(?:rgba?|hsla?)\([^)]*$/i.test(beforeMatch)) {
+        numbers.push(parseFloat(numMatch[1]));
+      }
+    }
+    if (numbers.length >= 2) {
+      const offsetX = numbers[0];
+      const offsetY = numbers[1];
+      const blurRadius = numbers.length >= 3 ? numbers[2] : 0;
+      const blurSpread = blurRadius * 3;
+      if (offsetX > 0) {
+        expansion.right = Math.max(expansion.right, offsetX + blurSpread);
+        expansion.left = Math.max(expansion.left, blurSpread);
+      } else {
+        expansion.left = Math.max(expansion.left, Math.abs(offsetX) + blurSpread);
+        expansion.right = Math.max(expansion.right, blurSpread);
+      }
+      if (offsetY > 0) {
+        expansion.bottom = Math.max(expansion.bottom, offsetY + blurSpread);
+        expansion.top = Math.max(expansion.top, blurSpread);
+      } else {
+        expansion.top = Math.max(expansion.top, Math.abs(offsetY) + blurSpread);
+        expansion.bottom = Math.max(expansion.bottom, blurSpread);
+      }
+    }
+  }
+  return expansion;
+};
+var getPrecomposeRectForFilter = ({
+  element,
+  filter
+}) => {
+  const elementRect = getBiggestBoundingClientRect(element);
+  const expansion = parseDropShadowExpansion(filter);
+  return new DOMRect(elementRect.left - expansion.left, elementRect.top - expansion.top, elementRect.width + expansion.left + expansion.right, elementRect.height + expansion.top + expansion.bottom);
+};
+var applyFilterToDrawOperation = ({
+  context,
+  filter,
+  drawFn
+}) => {
+  const previousFilter = context.filter;
+  context.filter = filter;
+  drawFn();
+  context.filter = previousFilter;
+};
+
 // src/drawing/handle-mask.ts
 var getPrecomposeRectForMask = (element) => {
   const boundingRect = getBiggestBoundingClientRect(element);
@@ -3878,6 +3956,16 @@ var processNode = async ({
           secondRect: tentativePrecomposeRect
         }));
       }
+      if (precompositing.needsFilterPrecompositing) {
+        const tentativePrecomposeRect = getPrecomposeRectForFilter({
+          element,
+          filter: precompositing.needsFilterPrecompositing
+        });
+        precomposeRect = roundToExpandRect(getWiderRectAndExpand({
+          firstRect: precomposeRect,
+          secondRect: tentativePrecomposeRect
+        }));
+      }
       if (!precomposeRect) {
         throw new Error("Precompose rect not found");
       }
@@ -3927,7 +4015,18 @@ var processNode = async ({
       }
       const previousTransform = context.getTransform();
       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);
+      const drawPrecomposedCanvas = () => {
+        context.drawImage(drawable, 0, 0, drawable.width, drawable.height, rectAfterTransforms.left - parentRect.x * scale, rectAfterTransforms.top - parentRect.y * scale, rectAfterTransforms.width, rectAfterTransforms.height);
+      };
+      if (precompositing.needsFilterPrecompositing) {
+        applyFilterToDrawOperation({
+          context,
+          filter: precompositing.needsFilterPrecompositing,
+          drawFn: drawPrecomposedCanvas
+        });
+      } else {
+        drawPrecomposedCanvas();
+      }
       context.setTransform(previousTransform);
       Internals6.Log.trace({
         logLevel,

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.454",
+	"version": "4.0.456",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,19 +22,19 @@
 		"@mediabunny/mp3-encoder": "1.42.0",
 		"@mediabunny/aac-encoder": "1.42.0",
 		"@mediabunny/flac-encoder": "1.42.0",
-		"@remotion/licensing": "4.0.454",
-		"remotion": "4.0.454",
+		"@remotion/licensing": "4.0.456",
+		"remotion": "4.0.456",
 		"mediabunny": "1.42.0"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.454",
-		"@remotion/paths": "4.0.454",
-		"@remotion/player": "4.0.454",
-		"@remotion/media": "4.0.454",
-		"@remotion/shapes": "4.0.454",
-		"@remotion/three": "4.0.454",
-		"@remotion/transitions": "4.0.454",
+		"@remotion/eslint-config-internal": "4.0.456",
+		"@remotion/paths": "4.0.456",
+		"@remotion/player": "4.0.456",
+		"@remotion/media": "4.0.456",
+		"@remotion/shapes": "4.0.456",
+		"@remotion/three": "4.0.456",
+		"@remotion/transitions": "4.0.456",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",