@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-a38e82f

package/dist/excalidraw/renderer/renderElement.d.ts

@@ -1,8 +1,9 @@
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement } from "../element/types";
+import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import type { RoughSVG } from "roughjs/bin/svg";
-import { SVGRenderConfig, StaticCanvasRenderConfig } from "../scene/types";
-import { AppState, StaticCanvasAppState, BinaryFiles, InteractiveCanvasAppState } from "../types";
+import { StaticCanvasRenderConfig, RenderableElementsMap } from "../scene/types";
+import { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
+export declare const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
+export declare const getRenderOpacity: (element: ExcalidrawElement, containingFrame: ExcalidrawFrameLikeElement | null, elementsPendingErasure: ElementsPendingErasure) => number;
 export interface ExcalidrawElementWithCanvas {
     element: ExcalidrawElement | ExcalidrawTextElement;
     canvas: HTMLCanvasElement;
@@ -17,8 +18,7 @@ export interface ExcalidrawElementWithCanvas {
 export declare const DEFAULT_LINK_SIZE = 14;
 export declare const elementWithCanvasCache: WeakMap<ExcalidrawElement, ExcalidrawElementWithCanvas>;
 export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;
-export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState) => void;
-export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, renderConfig: SVGRenderConfig) => void;
+export declare const renderElement: (element: NonDeletedExcalidrawElement, elementsMap: RenderableElementsMap, allElementsMap: NonDeletedSceneElementsMap, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
 export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;

package/dist/excalidraw/renderer/renderElement.js

@@ -1,22 +1,20 @@
 import { isTextElement, isLinearElement, isFreeDrawElement, isInitializedImageElement, isArrowElement, hasBoundTextElement, isMagicFrameElement, } from "../element/typeChecks";
 import { getElementAbsoluteCoords } from "../element/bounds";
-import { distance, getFontString, getFontFamilyString, isRTL, isTestEnv, } from "../utils";
-import { getCornerRadius, isPathALoop, isRightAngle } from "../math";
+import { distance, getFontString, isRTL } from "../utils";
+import { getCornerRadius, isRightAngle } from "../math";
 import rough from "roughjs/bin/rough";
 import { getDefaultAppState } from "../appState";
-import { BOUND_TEXT_PADDING, FRAME_STYLE, MAX_DECIMALS_FOR_SVG_EXPORT, MIME_TYPES, SVG_NS, } from "../constants";
+import { BOUND_TEXT_PADDING, ELEMENT_READY_TO_ERASE_OPACITY, FRAME_STYLE, MIME_TYPES, } from "../constants";
 import { getStroke } from "perfect-freehand";
-import { getBoundTextElement, getContainerCoords, getContainerElement, getLineHeightInPx, getBoundTextMaxHeight, getBoundTextMaxWidth, } from "../element/textElement";
+import { getBoundTextElement, getContainerCoords, getContainerElement, getLineHeightInPx, getBoundTextMaxHeight, getBoundTextMaxWidth, getVerticalOffset, } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { createPlaceholderEmbeddableLabel, getEmbedLink, } from "../element/embeddable";
 import { getContainingFrame } from "../frame";
-import { normalizeLink, toValidURL } from "../data/url";
 import { ShapeCache } from "../scene/ShapeCache";
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
 // color scheme (it's still not quite there and the colors look slightly
 // desatured, alas...)
-const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
+export const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 const defaultAppState = getDefaultAppState();
 const isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) &&
     !renderConfig.imageCache.has(element.fileId);
@@ -27,7 +25,19 @@ const shouldResetImageFilter = (element, renderConfig, appState) => {
         renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg);
 };
 const getCanvasPadding = (element) => element.type === "freedraw" ? element.strokeWidth * 12 : 20;
-const cappedElementCanvasSize = (element, zoom) => {
+export const getRenderOpacity = (element, containingFrame, elementsPendingErasure) => {
+    // multiplying frame opacity with element opacity to combine them
+    // (e.g. frame 50% and element 50% opacity should result in 25% opacity)
+    let opacity = ((containingFrame?.opacity ?? 100) * element.opacity) / 10000;
+    // if pending erasure, multiply again to combine further
+    // (so that erasing always results in lower opacity than original)
+    if (elementsPendingErasure.has(element.id) ||
+        (containingFrame && elementsPendingErasure.has(containingFrame.id))) {
+        opacity *= ELEMENT_READY_TO_ERASE_OPACITY / 100;
+    }
+    return opacity;
+};
+const cappedElementCanvasSize = (element, elementsMap, zoom) => {
     // these limits are ballpark, they depend on specific browsers and device.
     // We've chosen lower limits to be safe. We might want to change these limits
     // based on browser/device type, if we get reports of low quality rendering
@@ -38,7 +48,7 @@ const cappedElementCanvasSize = (element, zoom) => {
     // ~ safari width/height limit based on developer.mozilla.org.
     const WIDTH_HEIGHT_LIMIT = 32767;
     const padding = getCanvasPadding(element);
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const elementWidth = isLinearElement(element) || isFreeDrawElement(element)
         ? distance(x1, x2)
         : element.width;
@@ -61,17 +71,17 @@ const cappedElementCanvasSize = (element, zoom) => {
     height = Math.floor(height * scale);
     return { width, height, scale };
 };
-const generateElementCanvas = (element, zoom, renderConfig, appState) => {
+const generateElementCanvas = (element, elementsMap, zoom, renderConfig, appState) => {
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d");
     const padding = getCanvasPadding(element);
-    const { width, height, scale } = cappedElementCanvasSize(element, zoom);
+    const { width, height, scale } = cappedElementCanvasSize(element, elementsMap, zoom);
     canvas.width = width;
     canvas.height = height;
     let canvasOffsetX = 0;
     let canvasOffsetY = 0;
     if (isLinearElement(element) || isFreeDrawElement(element)) {
-        const [x1, y1] = getElementAbsoluteCoords(element);
+        const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
         canvasOffsetX =
             element.x > x1
                 ? distance(element.x, x1) * window.devicePixelRatio * scale
@@ -100,8 +110,8 @@ const generateElementCanvas = (element, zoom, renderConfig, appState) => {
         zoomValue: zoom.value,
         canvasOffsetX,
         canvasOffsetY,
-        boundTextElementVersion: getBoundTextElement(element)?.version || null,
-        containingFrameOpacity: getContainingFrame(element)?.opacity || 100,
+        boundTextElementVersion: getBoundTextElement(element, elementsMap)?.version || null,
+        containingFrameOpacity: getContainingFrame(element, elementsMap)?.opacity || 100,
     };
 };
 export const DEFAULT_LINK_SIZE = 14;
@@ -119,8 +129,6 @@ const drawImagePlaceholder = (element, context, zoomValue) => {
         : IMAGE_PLACEHOLDER_IMG, element.width / 2 - size / 2, element.height / 2 - size / 2, size, size);
 };
 const drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {
-    context.globalAlpha =
-        ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
     switch (element.type) {
         case "rectangle":
         case "iframe":
@@ -160,6 +168,11 @@ const drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {
                 ? renderConfig.imageCache.get(element.fileId)?.image
                 : undefined;
             if (img != null && !(img instanceof Promise)) {
+                if (element.roundness && context.roundRect) {
+                    context.beginPath();
+                    context.roundRect(0, 0, element.width, element.height, getCornerRadius(Math.min(element.width, element.height), element));
+                    context.clip();
+                }
                 context.drawImage(img, 0 /* hardcoded for the selection box*/, 0, element.width, element.height);
             }
             else {
@@ -189,9 +202,9 @@ const drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {
                         ? element.width
                         : 0;
                 const lineHeightPx = getLineHeightInPx(element.fontSize, element.lineHeight);
-                const verticalOffset = element.height - element.baseline;
+                const verticalOffset = getVerticalOffset(element.fontFamily, element.fontSize, lineHeightPx);
                 for (let index = 0; index < lines.length; index++) {
-                    context.fillText(lines[index], horizontalOffset, (index + 1) * lineHeightPx - verticalOffset);
+                    context.fillText(lines[index], horizontalOffset, index * lineHeightPx + verticalOffset);
                 }
                 context.restore();
                 if (shouldTemporarilyAttach) {
@@ -203,33 +216,32 @@ const drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {
             }
         }
     }
-    context.globalAlpha = 1;
 };
 export const elementWithCanvasCache = new WeakMap();
-const generateElementWithCanvas = (element, renderConfig, appState) => {
+const generateElementWithCanvas = (element, elementsMap, renderConfig, appState) => {
     const zoom = renderConfig ? appState.zoom : defaultAppState.zoom;
     const prevElementWithCanvas = elementWithCanvasCache.get(element);
     const shouldRegenerateBecauseZoom = prevElementWithCanvas &&
         prevElementWithCanvas.zoomValue !== zoom.value &&
         !appState?.shouldCacheIgnoreZoom;
-    const boundTextElementVersion = getBoundTextElement(element)?.version || null;
-    const containingFrameOpacity = getContainingFrame(element)?.opacity || 100;
+    const boundTextElementVersion = getBoundTextElement(element, elementsMap)?.version || null;
+    const containingFrameOpacity = getContainingFrame(element, elementsMap)?.opacity || 100;
     if (!prevElementWithCanvas ||
         shouldRegenerateBecauseZoom ||
         prevElementWithCanvas.theme !== appState.theme ||
         prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion ||
         prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity) {
-        const elementWithCanvas = generateElementCanvas(element, zoom, renderConfig, appState);
+        const elementWithCanvas = generateElementCanvas(element, elementsMap, zoom, renderConfig, appState);
         elementWithCanvasCache.set(element, elementWithCanvas);
         return elementWithCanvas;
     }
     return prevElementWithCanvas;
 };
-const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState) => {
+const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState, allElementsMap) => {
     const element = elementWithCanvas.element;
     const padding = getCanvasPadding(element);
     const zoom = elementWithCanvas.scale;
-    let [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    let [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
     // Free draw elements will otherwise "shuffle" as the min x and y change
     if (isFreeDrawElement(element)) {
         x1 = Math.floor(x1);
@@ -241,7 +253,7 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
     const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
     context.save();
     context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
-    const boundTextElement = getBoundTextElement(element);
+    const boundTextElement = getBoundTextElement(element, allElementsMap);
     if (isArrowElement(element) && boundTextElement) {
         const tempCanvas = document.createElement("canvas");
         const tempCanvasContext = tempCanvas.getContext("2d");
@@ -259,7 +271,7 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
         tempCanvasContext.translate(tempCanvas.width / 2, tempCanvas.height / 2);
         tempCanvasContext.rotate(element.angle);
         tempCanvasContext.drawImage(elementWithCanvas.canvas, -elementWithCanvas.canvas.width / 2, -elementWithCanvas.canvas.height / 2, elementWithCanvas.canvas.width, elementWithCanvas.canvas.height);
-        const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords(boundTextElement);
+        const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords(boundTextElement, allElementsMap);
         tempCanvasContext.rotate(-element.angle);
         // Shift the canvas to the center of the bound text element
         const shiftX = tempCanvas.width / 2 -
@@ -301,11 +313,11 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
         if (import.meta.env.VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX ===
             "true" &&
             hasBoundTextElement(element)) {
-            const textElement = getBoundTextElement(element);
+            const textElement = getBoundTextElement(element, allElementsMap);
             const coords = getContainerCoords(element);
             context.strokeStyle = "#c92a2a";
             context.lineWidth = 3;
-            context.strokeRect((coords.x + appState.scrollX) * window.devicePixelRatio, (coords.y + appState.scrollY) * window.devicePixelRatio, getBoundTextMaxWidth(element) * window.devicePixelRatio, getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio);
+            context.strokeRect((coords.x + appState.scrollX) * window.devicePixelRatio, (coords.y + appState.scrollY) * window.devicePixelRatio, getBoundTextMaxWidth(element, textElement) * window.devicePixelRatio, getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio);
         }
     }
     context.restore();
@@ -326,7 +338,8 @@ export const renderSelectionElement = (element, context, appState) => {
     context.strokeRect(offset, offset, element.width, element.height);
     context.restore();
 };
-export const renderElement = (element, rc, context, renderConfig, appState) => {
+export const renderElement = (element, elementsMap, allElementsMap, rc, context, renderConfig, appState) => {
+    context.globalAlpha = getRenderOpacity(element, getContainingFrame(element, elementsMap), renderConfig.elementsPendingErasure);
     switch (element.type) {
         case "magicframe":
         case "frame": {
@@ -360,7 +373,7 @@ export const renderElement = (element, rc, context, renderConfig, appState) => {
             // rely on existing shapes
             ShapeCache.generateElementShape(element, null);
             if (renderConfig.isExporting) {
-                const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+                const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
                 const cx = (x1 + x2) / 2 + appState.scrollX;
                 const cy = (y1 + y2) / 2 + appState.scrollY;
                 const shiftX = (x2 - x1) / 2 - (element.x - x1);
@@ -373,8 +386,8 @@ export const renderElement = (element, rc, context, renderConfig, appState) => {
                 context.restore();
             }
             else {
-                const elementWithCanvas = generateElementWithCanvas(element, renderConfig, appState);
-                drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState);
+                const elementWithCanvas = generateElementWithCanvas(element, elementsMap, renderConfig, appState);
+                drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState, allElementsMap);
             }
             break;
         }
@@ -392,15 +405,15 @@ export const renderElement = (element, rc, context, renderConfig, appState) => {
             // rely on existing shapes
             ShapeCache.generateElementShape(element, renderConfig);
             if (renderConfig.isExporting) {
-                const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+                const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
                 const cx = (x1 + x2) / 2 + appState.scrollX;
                 const cy = (y1 + y2) / 2 + appState.scrollY;
                 let shiftX = (x2 - x1) / 2 - (element.x - x1);
                 let shiftY = (y2 - y1) / 2 - (element.y - y1);
                 if (isTextElement(element)) {
-                    const container = getContainerElement(element);
+                    const container = getContainerElement(element, elementsMap);
                     if (isArrowElement(container)) {
-                        const boundTextCoords = LinearElementEditor.getBoundTextElementPosition(container, element);
+                        const boundTextCoords = LinearElementEditor.getBoundTextElementPosition(container, element, elementsMap);
                         shiftX = (x2 - x1) / 2 - (boundTextCoords.x - x1);
                         shiftY = (y2 - y1) / 2 - (boundTextCoords.y - y1);
                     }
@@ -410,7 +423,7 @@ export const renderElement = (element, rc, context, renderConfig, appState) => {
                 if (shouldResetImageFilter(element, renderConfig, appState)) {
                     context.filter = "none";
                 }
-                const boundTextElement = getBoundTextElement(element);
+                const boundTextElement = getBoundTextElement(element, elementsMap);
                 if (isArrowElement(element) && boundTextElement) {
                     const tempCanvas = document.createElement("canvas");
                     const tempCanvasContext = tempCanvas.getContext("2d");
@@ -434,7 +447,7 @@ export const renderElement = (element, rc, context, renderConfig, appState) => {
                     tempCanvasContext.translate(shiftX, shiftY);
                     tempCanvasContext.rotate(-element.angle);
                     // Shift the canvas to center of bound text
-                    const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords(boundTextElement);
+                    const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords(boundTextElement, elementsMap);
                     const boundTextShiftX = (x1 + x2) / 2 - boundTextCx;
                     const boundTextShiftY = (y1 + y2) / 2 - boundTextCy;
                     tempCanvasContext.translate(-boundTextShiftX, -boundTextShiftY);
@@ -457,7 +470,7 @@ export const renderElement = (element, rc, context, renderConfig, appState) => {
                 // canvases)
             }
             else {
-                const elementWithCanvas = generateElementWithCanvas(element, renderConfig, appState);
+                const elementWithCanvas = generateElementWithCanvas(element, elementsMap, renderConfig, appState);
                 const currentImageSmoothingStatus = context.imageSmoothingEnabled;
                 if (
                 // do not disable smoothing during zoom as blurry shapes look better
@@ -477,7 +490,7 @@ export const renderElement = (element, rc, context, renderConfig, appState) => {
                     //
                     context.imageSmoothingEnabled = false;
                 }
-                drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState);
+                drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState, allElementsMap);
                 // reset
                 context.imageSmoothingEnabled = currentImageSmoothingStatus;
             }
@@ -488,332 +501,7 @@ export const renderElement = (element, rc, context, renderConfig, appState) => {
             throw new Error(`Unimplemented type ${element.type}`);
         }
     }
-};
-const roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {
-    if (typeof precision === "undefined") {
-        return rsvg.draw(drawable);
-    }
-    const pshape = {
-        sets: drawable.sets,
-        shape: drawable.shape,
-        options: { ...drawable.options, fixedDecimalPlaceDigits: precision },
-    };
-    return rsvg.draw(pshape);
-};
-const maybeWrapNodesInFrameClipPath = (element, root, nodes, frameRendering) => {
-    if (!frameRendering.enabled || !frameRendering.clip) {
-        return null;
-    }
-    const frame = getContainingFrame(element);
-    if (frame) {
-        const g = root.ownerDocument.createElementNS(SVG_NS, "g");
-        g.setAttributeNS(SVG_NS, "clip-path", `url(#${frame.id})`);
-        nodes.forEach((node) => g.appendChild(node));
-        return g;
-    }
-    return null;
-};
-export const renderElementToSvg = (element, rsvg, svgRoot, files, offsetX, offsetY, renderConfig) => {
-    const offset = { x: offsetX, y: offsetY };
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    let cx = (x2 - x1) / 2 - (element.x - x1);
-    let cy = (y2 - y1) / 2 - (element.y - y1);
-    if (isTextElement(element)) {
-        const container = getContainerElement(element);
-        if (isArrowElement(container)) {
-            const [x1, y1, x2, y2] = getElementAbsoluteCoords(container);
-            const boundTextCoords = LinearElementEditor.getBoundTextElementPosition(container, element);
-            cx = (x2 - x1) / 2 - (boundTextCoords.x - x1);
-            cy = (y2 - y1) / 2 - (boundTextCoords.y - y1);
-            offsetX = offsetX + boundTextCoords.x - element.x;
-            offsetY = offsetY + boundTextCoords.y - element.y;
-        }
-    }
-    const degree = (180 * element.angle) / Math.PI;
-    // element to append node to, most of the time svgRoot
-    let root = svgRoot;
-    // if the element has a link, create an anchor tag and make that the new root
-    if (element.link) {
-        const anchorTag = svgRoot.ownerDocument.createElementNS(SVG_NS, "a");
-        anchorTag.setAttribute("href", normalizeLink(element.link));
-        root.appendChild(anchorTag);
-        root = anchorTag;
-    }
-    const addToRoot = (node, element) => {
-        if (isTestEnv()) {
-            node.setAttribute("data-id", element.id);
-        }
-        root.appendChild(node);
-    };
-    const opacity = ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
-    switch (element.type) {
-        case "selection": {
-            // Since this is used only during editing experience, which is canvas based,
-            // this should not happen
-            throw new Error("Selection rendering is not supported for SVG");
-        }
-        case "rectangle":
-        case "diamond":
-        case "ellipse": {
-            const shape = ShapeCache.generateElementShape(element, null);
-            const node = roughSVGDrawWithPrecision(rsvg, shape, MAX_DECIMALS_FOR_SVG_EXPORT);
-            if (opacity !== 1) {
-                node.setAttribute("stroke-opacity", `${opacity}`);
-                node.setAttribute("fill-opacity", `${opacity}`);
-            }
-            node.setAttribute("stroke-linecap", "round");
-            node.setAttribute("transform", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);
-            const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);
-            addToRoot(g || node, element);
-            break;
-        }
-        case "iframe":
-        case "embeddable": {
-            // render placeholder rectangle
-            const shape = ShapeCache.generateElementShape(element, renderConfig);
-            const node = roughSVGDrawWithPrecision(rsvg, shape, MAX_DECIMALS_FOR_SVG_EXPORT);
-            const opacity = element.opacity / 100;
-            if (opacity !== 1) {
-                node.setAttribute("stroke-opacity", `${opacity}`);
-                node.setAttribute("fill-opacity", `${opacity}`);
-            }
-            node.setAttribute("stroke-linecap", "round");
-            node.setAttribute("transform", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);
-            addToRoot(node, element);
-            const label = createPlaceholderEmbeddableLabel(element);
-            renderElementToSvg(label, rsvg, root, files, label.x + offset.x - element.x, label.y + offset.y - element.y, renderConfig);
-            // render embeddable element + iframe
-            const embeddableNode = roughSVGDrawWithPrecision(rsvg, shape, MAX_DECIMALS_FOR_SVG_EXPORT);
-            embeddableNode.setAttribute("stroke-linecap", "round");
-            embeddableNode.setAttribute("transform", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);
-            while (embeddableNode.firstChild) {
-                embeddableNode.removeChild(embeddableNode.firstChild);
-            }
-            const radius = getCornerRadius(Math.min(element.width, element.height), element);
-            const embedLink = getEmbedLink(toValidURL(element.link || ""));
-            // if rendering embeddables explicitly disabled or
-            // embedding documents via srcdoc (which doesn't seem to work for SVGs)
-            // replace with a link instead
-            if (renderConfig.renderEmbeddables === false ||
-                embedLink?.type === "document") {
-                const anchorTag = svgRoot.ownerDocument.createElementNS(SVG_NS, "a");
-                anchorTag.setAttribute("href", normalizeLink(element.link || ""));
-                anchorTag.setAttribute("target", "_blank");
-                anchorTag.setAttribute("rel", "noopener noreferrer");
-                anchorTag.style.borderRadius = `${radius}px`;
-                embeddableNode.appendChild(anchorTag);
-            }
-            else {
-                const foreignObject = svgRoot.ownerDocument.createElementNS(SVG_NS, "foreignObject");
-                foreignObject.style.width = `${element.width}px`;
-                foreignObject.style.height = `${element.height}px`;
-                foreignObject.style.border = "none";
-                const div = foreignObject.ownerDocument.createElementNS(SVG_NS, "div");
-                div.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-                div.style.width = "100%";
-                div.style.height = "100%";
-                const iframe = div.ownerDocument.createElement("iframe");
-                iframe.src = embedLink?.link ?? "";
-                iframe.style.width = "100%";
-                iframe.style.height = "100%";
-                iframe.style.border = "none";
-                iframe.style.borderRadius = `${radius}px`;
-                iframe.style.top = "0";
-                iframe.style.left = "0";
-                iframe.allowFullscreen = true;
-                div.appendChild(iframe);
-                foreignObject.appendChild(div);
-                embeddableNode.appendChild(foreignObject);
-            }
-            addToRoot(embeddableNode, element);
-            break;
-        }
-        case "line":
-        case "arrow": {
-            const boundText = getBoundTextElement(element);
-            const maskPath = svgRoot.ownerDocument.createElementNS(SVG_NS, "mask");
-            if (boundText) {
-                maskPath.setAttribute("id", `mask-${element.id}`);
-                const maskRectVisible = svgRoot.ownerDocument.createElementNS(SVG_NS, "rect");
-                offsetX = offsetX || 0;
-                offsetY = offsetY || 0;
-                maskRectVisible.setAttribute("x", "0");
-                maskRectVisible.setAttribute("y", "0");
-                maskRectVisible.setAttribute("fill", "#fff");
-                maskRectVisible.setAttribute("width", `${element.width + 100 + offsetX}`);
-                maskRectVisible.setAttribute("height", `${element.height + 100 + offsetY}`);
-                maskPath.appendChild(maskRectVisible);
-                const maskRectInvisible = svgRoot.ownerDocument.createElementNS(SVG_NS, "rect");
-                const boundTextCoords = LinearElementEditor.getBoundTextElementPosition(element, boundText);
-                const maskX = offsetX + boundTextCoords.x - element.x;
-                const maskY = offsetY + boundTextCoords.y - element.y;
-                maskRectInvisible.setAttribute("x", maskX.toString());
-                maskRectInvisible.setAttribute("y", maskY.toString());
-                maskRectInvisible.setAttribute("fill", "#000");
-                maskRectInvisible.setAttribute("width", `${boundText.width}`);
-                maskRectInvisible.setAttribute("height", `${boundText.height}`);
-                maskRectInvisible.setAttribute("opacity", "1");
-                maskPath.appendChild(maskRectInvisible);
-            }
-            const group = svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
-            if (boundText) {
-                group.setAttribute("mask", `url(#mask-${element.id})`);
-            }
-            group.setAttribute("stroke-linecap", "round");
-            const shapes = ShapeCache.generateElementShape(element, renderConfig);
-            shapes.forEach((shape) => {
-                const node = roughSVGDrawWithPrecision(rsvg, shape, MAX_DECIMALS_FOR_SVG_EXPORT);
-                if (opacity !== 1) {
-                    node.setAttribute("stroke-opacity", `${opacity}`);
-                    node.setAttribute("fill-opacity", `${opacity}`);
-                }
-                node.setAttribute("transform", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);
-                if (element.type === "line" &&
-                    isPathALoop(element.points) &&
-                    element.backgroundColor !== "transparent") {
-                    node.setAttribute("fill-rule", "evenodd");
-                }
-                group.appendChild(node);
-            });
-            const g = maybeWrapNodesInFrameClipPath(element, root, [group, maskPath], renderConfig.frameRendering);
-            if (g) {
-                addToRoot(g, element);
-                root.appendChild(g);
-            }
-            else {
-                addToRoot(group, element);
-                root.append(maskPath);
-            }
-            break;
-        }
-        case "freedraw": {
-            const backgroundFillShape = ShapeCache.generateElementShape(element, renderConfig);
-            const node = backgroundFillShape
-                ? roughSVGDrawWithPrecision(rsvg, backgroundFillShape, MAX_DECIMALS_FOR_SVG_EXPORT)
-                : svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
-            if (opacity !== 1) {
-                node.setAttribute("stroke-opacity", `${opacity}`);
-                node.setAttribute("fill-opacity", `${opacity}`);
-            }
-            node.setAttribute("transform", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);
-            node.setAttribute("stroke", "none");
-            const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
-            path.setAttribute("fill", element.strokeColor);
-            path.setAttribute("d", getFreeDrawSvgPath(element));
-            node.appendChild(path);
-            const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);
-            addToRoot(g || node, element);
-            break;
-        }
-        case "image": {
-            const width = Math.round(element.width);
-            const height = Math.round(element.height);
-            const fileData = isInitializedImageElement(element) && files[element.fileId];
-            if (fileData) {
-                const symbolId = `image-${fileData.id}`;
-                let symbol = svgRoot.querySelector(`#${symbolId}`);
-                if (!symbol) {
-                    symbol = svgRoot.ownerDocument.createElementNS(SVG_NS, "symbol");
-                    symbol.id = symbolId;
-                    const image = svgRoot.ownerDocument.createElementNS(SVG_NS, "image");
-                    image.setAttribute("width", "100%");
-                    image.setAttribute("height", "100%");
-                    image.setAttribute("href", fileData.dataURL);
-                    symbol.appendChild(image);
-                    root.prepend(symbol);
-                }
-                const use = svgRoot.ownerDocument.createElementNS(SVG_NS, "use");
-                use.setAttribute("href", `#${symbolId}`);
-                // in dark theme, revert the image color filter
-                if (renderConfig.exportWithDarkMode &&
-                    fileData.mimeType !== MIME_TYPES.svg) {
-                    use.setAttribute("filter", IMAGE_INVERT_FILTER);
-                }
-                use.setAttribute("width", `${width}`);
-                use.setAttribute("height", `${height}`);
-                use.setAttribute("opacity", `${opacity}`);
-                // We first apply `scale` transforms (horizontal/vertical mirroring)
-                // on the <use> element, then apply translation and rotation
-                // on the <g> element which wraps the <use>.
-                // Doing this separately is a quick hack to to work around compositing
-                // the transformations correctly (the transform-origin was not being
-                // applied correctly).
-                if (element.scale[0] !== 1 || element.scale[1] !== 1) {
-                    const translateX = element.scale[0] !== 1 ? -width : 0;
-                    const translateY = element.scale[1] !== 1 ? -height : 0;
-                    use.setAttribute("transform", `scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`);
-                }
-                const g = svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
-                g.appendChild(use);
-                g.setAttribute("transform", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);
-                const clipG = maybeWrapNodesInFrameClipPath(element, root, [g], renderConfig.frameRendering);
-                addToRoot(clipG || g, element);
-            }
-            break;
-        }
-        // frames are not rendered and only acts as a container
-        case "frame":
-        case "magicframe": {
-            if (renderConfig.frameRendering.enabled &&
-                renderConfig.frameRendering.outline) {
-                const rect = document.createElementNS(SVG_NS, "rect");
-                rect.setAttribute("transform", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);
-                rect.setAttribute("width", `${element.width}px`);
-                rect.setAttribute("height", `${element.height}px`);
-                // Rounded corners
-                rect.setAttribute("rx", FRAME_STYLE.radius.toString());
-                rect.setAttribute("ry", FRAME_STYLE.radius.toString());
-                rect.setAttribute("fill", "none");
-                rect.setAttribute("stroke", FRAME_STYLE.strokeColor);
-                rect.setAttribute("stroke-width", FRAME_STYLE.strokeWidth.toString());
-                addToRoot(rect, element);
-            }
-            break;
-        }
-        default: {
-            if (isTextElement(element)) {
-                const node = svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
-                if (opacity !== 1) {
-                    node.setAttribute("stroke-opacity", `${opacity}`);
-                    node.setAttribute("fill-opacity", `${opacity}`);
-                }
-                node.setAttribute("transform", `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`);
-                const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
-                const lineHeightPx = getLineHeightInPx(element.fontSize, element.lineHeight);
-                const horizontalOffset = element.textAlign === "center"
-                    ? element.width / 2
-                    : element.textAlign === "right"
-                        ? element.width
-                        : 0;
-                const direction = isRTL(element.text) ? "rtl" : "ltr";
-                const textAnchor = element.textAlign === "center"
-                    ? "middle"
-                    : element.textAlign === "right" || direction === "rtl"
-                        ? "end"
-                        : "start";
-                for (let i = 0; i < lines.length; i++) {
-                    const text = svgRoot.ownerDocument.createElementNS(SVG_NS, "text");
-                    text.textContent = lines[i];
-                    text.setAttribute("x", `${horizontalOffset}`);
-                    text.setAttribute("y", `${i * lineHeightPx}`);
-                    text.setAttribute("font-family", getFontFamilyString(element));
-                    text.setAttribute("font-size", `${element.fontSize}px`);
-                    text.setAttribute("fill", element.strokeColor);
-                    text.setAttribute("text-anchor", textAnchor);
-                    text.setAttribute("style", "white-space: pre;");
-                    text.setAttribute("direction", direction);
-                    text.setAttribute("dominant-baseline", "text-before-edge");
-                    node.appendChild(text);
-                }
-                const g = maybeWrapNodesInFrameClipPath(element, root, [node], renderConfig.frameRendering);
-                addToRoot(g || node, element);
-            }
-            else {
-                // @ts-ignore
-                throw new Error(`Unimplemented type ${element.type}`);
-            }
-        }
-    }
+    context.globalAlpha = 1;
 };
 export const pathsCache = new WeakMap([]);
 export function generateFreeDrawShape(element) {

package/dist/excalidraw/renderer/staticScene.d.ts

@@ -0,0 +1,11 @@
+import { StaticSceneRenderConfig } from "../scene/types";
+/** throttled to animation framerate */
+export declare const renderStaticSceneThrottled: {
+    (config: StaticSceneRenderConfig): void;
+    flush(): void;
+    cancel(): void;
+};
+/**
+ * Static scene is the non-ui canvas where we render elements.
+ */
+export declare const renderStaticScene: (renderConfig: StaticSceneRenderConfig, throttle?: boolean) => void;