@remotion/web-renderer 4.0.393 → 4.0.395

package/dist/drawing/draw-element-to-canvas.js

@@ -1,8 +1,10 @@
+import { Internals } from 'remotion';
 import { compose } from '../compose';
+import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
 import { calculateTransforms } from './calculate-transforms';
 import { drawElement } from './draw-element';
 import { transformIn3d } from './transform-in-3d';
-export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, }) => {
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, }) => {
     const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
     if (opacity === 0) {
         reset();
@@ -13,10 +15,12 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
         return 'continue';
     }
     if (!totalMatrix.is2D) {
-        const canvasOffsetLeft = Math.min(dimensions.left, 0);
-        const canvasOffsetTop = Math.min(dimensions.top, 0);
-        const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
-        const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
+        const biggestBoundingClientRect = getBiggestBoundingClientRect(element);
+        const canvasOffsetLeft = Math.min(biggestBoundingClientRect.left, 0);
+        const canvasOffsetTop = Math.min(biggestBoundingClientRect.top, 0);
+        const tempCanvasWidth = Math.max(biggestBoundingClientRect.width, biggestBoundingClientRect.right);
+        const tempCanvasHeight = Math.max(biggestBoundingClientRect.height, biggestBoundingClientRect.bottom);
+        const start = Date.now();
         const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
         const context2 = tempCanvas.getContext('2d');
         if (!context2) {
@@ -27,7 +31,9 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
             context: context2,
             offsetLeft: canvasOffsetLeft,
             offsetTop: canvasOffsetTop,
+            logLevel,
         });
+        const afterCompose = Date.now();
         const transformed = transformIn3d({
             canvasWidth: tempCanvasWidth,
             canvasHeight: tempCanvasHeight,
@@ -37,7 +43,12 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
             offsetTop: canvasOffsetTop,
         });
         context.drawImage(transformed, 0, 0);
+        const afterDraw = Date.now();
         reset();
+        Internals.Log.trace({
+            logLevel,
+            tag: '@remotion/web-renderer',
+        }, `Transforming element in 3D - canvas size: ${tempCanvasWidth}x${tempCanvasHeight} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
         return 'skip-children';
     }
     await drawElement({

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/get-base-height.d.ts

@@ -0,0 +1 @@
+export declare const getOpticalHeight: (span: HTMLSpanElement) => number;

package/dist/drawing/text/get-base-height.js

@@ -0,0 +1,13 @@
+// A text with e.g. font-size: 12px does not always get rendered with 12px
+// With "Arial", it gets rendered with 13.5px height, with SF Pro, it gets
+// rendered with 14px height. I therefore conclude there is no logic
+// and we need to measure it. I rendered the string "1", "a" and "qË" and
+// they all have the same height, so it doesn't matter if certain characters
+// go low or high.
+export const getOpticalHeight = (span) => {
+    const originalText = span.textContent;
+    span.textContent = '1';
+    const { height } = span.getBoundingClientRect();
+    span.textContent = originalText;
+    return height;
+};

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

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

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

@@ -1,6 +1,6 @@
 import { drawElementToCanvas } from '../draw-element-to-canvas';
 import { drawText } from './draw-text';
-export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, }) => {
+export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, logLevel, }) => {
     const span = document.createElement('span');
     const parent = node.parentNode;
     if (!parent) {
@@ -14,6 +14,7 @@ export const handleTextNode = async ({ node, context, offsetLeft, offsetTop, })
         draw: drawText(span),
         offsetLeft,
         offsetTop,
+        logLevel,
     });
     // Undo the layout manipulation
     parent.insertBefore(node, span);

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

@@ -22,6 +22,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,7 +73,7 @@ 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, }) => {

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)}`;