@excalidraw/excalidraw 0.17.1-7441-4e2c539 → 0.17.1-a38e82f

package/dist/excalidraw/renderer/{renderScene.js → interactiveScene.js}

@@ -1,23 +1,38 @@
-import oc from "open-color";
 import { getElementAbsoluteCoords, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, getCommonBounds, } from "../element";
-import { roundRect } from "./roundRect";
+import { roundRect } from "../renderer/roundRect";
 import { getScrollBars, SCROLLBAR_COLOR, SCROLLBAR_WIDTH, } from "../scene/scrollbars";
-import { renderElement, renderElementToSvg, renderSelectionElement, } from "./renderElement";
+import { renderSelectionElement } from "../renderer/renderElement";
 import { getClientColor } from "../clients";
-import { LinearElementEditor } from "../element/linearElementEditor";
 import { isSelectedViaGroup, getSelectedGroupIds, getElementsInGroup, selectGroupsFromGivenElements, } from "../groups";
-import { maxBindingGap } from "../element/collision";
 import { OMIT_SIDES_FOR_FRAME, shouldShowBoundingBox, } from "../element/transformHandles";
-import { throttleRAF } from "../utils";
+import { arrayToMap, throttleRAF } from "../utils";
 import { UserIdleState } from "../types";
-import { FRAME_STYLE, THEME_FILTER } from "../constants";
-import { EXTERNAL_LINK_IMG, getLinkHandleFromCoords, } from "../element/Hyperlink";
-import { renderSnaps } from "./renderSnaps";
-import { isEmbeddableElement, isFrameLikeElement, isIframeLikeElement, isLinearElement, } from "../element/typeChecks";
-import { isIframeLikeOrItsLabel, createPlaceholderEmbeddableLabel, } from "../element/embeddable";
-import { elementOverlapsWithFrame, getTargetFrame, isElementInFrame, } from "../frame";
-import "canvas-roundrect-polyfill";
-export const DEFAULT_SPACING = 2;
+import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
+import { renderSnaps } from "../renderer/renderSnaps";
+import { maxBindingGap } from "../element/collision";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
+import oc from "open-color";
+import { isFrameLikeElement, isLinearElement } from "../element/typeChecks";
+const renderLinearElementPointHighlight = (context, appState, elementsMap) => {
+    const { elementId, hoverPointIndex } = appState.selectedLinearElement;
+    if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
+        return;
+    }
+    const element = LinearElementEditor.getElement(elementId, elementsMap);
+    if (!element) {
+        return;
+    }
+    const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(element, hoverPointIndex, elementsMap);
+    context.save();
+    context.translate(appState.scrollX, appState.scrollY);
+    highlightPoint(point, context, appState);
+    context.restore();
+};
+const highlightPoint = (point, context, appState) => {
+    context.fillStyle = "rgba(105, 101, 219, 0.4)";
+    fillCircle(context, point[0], point[1], LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value, false);
+};
 const strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false, 
 /** should account for zoom */
 radius = 0) => {
@@ -51,53 +66,6 @@ const strokeDiamondWithRotation = (context, width, height, cx, cy, angle) => {
     context.stroke();
     context.restore();
 };
-const strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {
-    context.beginPath();
-    context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
-    context.stroke();
-};
-const fillCircle = (context, cx, cy, radius, stroke = true) => {
-    context.beginPath();
-    context.arc(cx, cy, radius, 0, Math.PI * 2);
-    context.fill();
-    if (stroke) {
-        context.stroke();
-    }
-};
-const strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height) => {
-    const BOLD_LINE_FREQUENCY = 5;
-    let GridLineColor;
-    (function (GridLineColor) {
-        GridLineColor["Bold"] = "#cccccc";
-        GridLineColor["Regular"] = "#e5e5e5";
-    })(GridLineColor || (GridLineColor = {}));
-    const offsetX = -Math.round(zoom.value / gridSize) * gridSize + (scrollX % gridSize);
-    const offsetY = -Math.round(zoom.value / gridSize) * gridSize + (scrollY % gridSize);
-    const lineWidth = Math.min(1 / zoom.value, 1);
-    const spaceWidth = 1 / zoom.value;
-    const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
-    context.save();
-    context.lineWidth = lineWidth;
-    for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {
-        const isBold = Math.round(x - scrollX) % (BOLD_LINE_FREQUENCY * gridSize) === 0;
-        context.beginPath();
-        context.setLineDash(isBold ? [] : lineDash);
-        context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
-        context.moveTo(x, offsetY - gridSize);
-        context.lineTo(x, offsetY + height + gridSize * 2);
-        context.stroke();
-    }
-    for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {
-        const isBold = Math.round(y - scrollY) % (BOLD_LINE_FREQUENCY * gridSize) === 0;
-        context.beginPath();
-        context.setLineDash(isBold ? [] : lineDash);
-        context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
-        context.moveTo(offsetX - gridSize, y);
-        context.lineTo(offsetX + width + gridSize * 2, y);
-        context.stroke();
-    }
-    context.restore();
-};
 const renderSingleLinearPoint = (context, appState, point, radius, isSelected, isPhantomPoint = false) => {
     context.strokeStyle = "#5e5ad8";
     context.setLineDash([]);
@@ -110,14 +78,134 @@ const renderSingleLinearPoint = (context, appState, point, radius, isSelected, i
     }
     fillCircle(context, point[0], point[1], radius / appState.zoom.value, !isPhantomPoint);
 };
-const renderLinearPointHandles = (context, appState, element) => {
+const strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {
+    context.beginPath();
+    context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
+    context.stroke();
+};
+const renderBindingHighlightForBindableElement = (context, element, elementsMap) => {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+    const width = x2 - x1;
+    const height = y2 - y1;
+    const threshold = maxBindingGap(element, width, height);
+    // So that we don't overlap the element itself
+    const strokeOffset = 4;
+    context.strokeStyle = "rgba(0,0,0,.05)";
+    context.lineWidth = threshold - strokeOffset;
+    const padding = strokeOffset / 2 + threshold / 2;
+    switch (element.type) {
+        case "rectangle":
+        case "text":
+        case "image":
+        case "iframe":
+        case "embeddable":
+        case "frame":
+        case "magicframe":
+            strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);
+            break;
+        case "diamond":
+            const side = Math.hypot(width, height);
+            const wPadding = (padding * side) / height;
+            const hPadding = (padding * side) / width;
+            strokeDiamondWithRotation(context, width + wPadding * 2, height + hPadding * 2, x1 + width / 2, y1 + height / 2, element.angle);
+            break;
+        case "ellipse":
+            strokeEllipseWithRotation(context, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);
+            break;
+    }
+};
+const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding, elementsMap) => {
+    const [element, startOrEnd, bindableElement] = suggestedBinding;
+    const threshold = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height);
+    context.strokeStyle = "rgba(0,0,0,0)";
+    context.fillStyle = "rgba(0,0,0,.05)";
+    const pointIndices = startOrEnd === "both" ? [0, -1] : startOrEnd === "start" ? [0] : [-1];
+    pointIndices.forEach((index) => {
+        const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(element, index, elementsMap);
+        fillCircle(context, x, y, threshold);
+    });
+};
+const renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2) => {
+    const { angle, elementX1, elementY1, elementX2, elementY2, selectionColors, cx, cy, dashed, activeEmbeddable, } = elementProperties;
+    const elementWidth = elementX2 - elementX1;
+    const elementHeight = elementY2 - elementY1;
+    const linePadding = padding / appState.zoom.value;
+    const lineWidth = 8 / appState.zoom.value;
+    const spaceWidth = 4 / appState.zoom.value;
+    context.save();
+    context.translate(appState.scrollX, appState.scrollY);
+    context.lineWidth = (activeEmbeddable ? 4 : 1) / appState.zoom.value;
+    const count = selectionColors.length;
+    for (let index = 0; index < count; ++index) {
+        context.strokeStyle = selectionColors[index];
+        if (dashed) {
+            context.setLineDash([
+                lineWidth,
+                spaceWidth + (lineWidth + spaceWidth) * (count - 1),
+            ]);
+        }
+        context.lineDashOffset = (lineWidth + spaceWidth) * index;
+        strokeRectWithRotation(context, elementX1 - linePadding, elementY1 - linePadding, elementWidth + linePadding * 2, elementHeight + linePadding * 2, cx, cy, angle);
+    }
+    context.restore();
+};
+const renderBindingHighlight = (context, appState, suggestedBinding, elementsMap) => {
+    const renderHighlight = Array.isArray(suggestedBinding)
+        ? renderBindingHighlightForSuggestedPointBinding
+        : renderBindingHighlightForBindableElement;
+    context.save();
+    context.translate(appState.scrollX, appState.scrollY);
+    renderHighlight(context, suggestedBinding, elementsMap);
+    context.restore();
+};
+const renderFrameHighlight = (context, appState, frame, elementsMap) => {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame, elementsMap);
+    const width = x2 - x1;
+    const height = y2 - y1;
+    context.strokeStyle = "rgb(0,118,255)";
+    context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
+    context.save();
+    context.translate(appState.scrollX, appState.scrollY);
+    strokeRectWithRotation(context, x1, y1, width, height, x1 + width / 2, y1 + height / 2, frame.angle, false, FRAME_STYLE.radius / appState.zoom.value);
+    context.restore();
+};
+const renderElementsBoxHighlight = (context, appState, elements) => {
+    const individualElements = elements.filter((element) => element.groupIds.length === 0);
+    const elementsInGroups = elements.filter((element) => element.groupIds.length > 0);
+    const getSelectionFromElements = (elements) => {
+        const [elementX1, elementY1, elementX2, elementY2] = getCommonBounds(elements);
+        return {
+            angle: 0,
+            elementX1,
+            elementX2,
+            elementY1,
+            elementY2,
+            selectionColors: ["rgb(0,118,255)"],
+            dashed: false,
+            cx: elementX1 + (elementX2 - elementX1) / 2,
+            cy: elementY1 + (elementY2 - elementY1) / 2,
+            activeEmbeddable: false,
+        };
+    };
+    const getSelectionForGroupId = (groupId) => {
+        const groupElements = getElementsInGroup(elements, groupId);
+        return getSelectionFromElements(groupElements);
+    };
+    Object.entries(selectGroupsFromGivenElements(elementsInGroups, appState))
+        .filter(([id, isSelected]) => isSelected)
+        .map(([id, isSelected]) => id)
+        .map((groupId) => getSelectionForGroupId(groupId))
+        .concat(individualElements.map((element) => getSelectionFromElements([element])))
+        .forEach((selection) => renderSelectionBorder(context, appState, selection));
+};
+const renderLinearPointHandles = (context, appState, element, elementsMap) => {
     if (!appState.selectedLinearElement) {
         return;
     }
     context.save();
     context.translate(appState.scrollX, appState.scrollY);
     context.lineWidth = 1 / appState.zoom.value;
-    const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+    const points = LinearElementEditor.getPointsGlobalCoordinates(element, elementsMap);
     const { POINT_HANDLE_SIZE } = LinearElementEditor;
     const radius = appState.editingLinearElement
         ? POINT_HANDLE_SIZE
@@ -127,7 +215,7 @@ const renderLinearPointHandles = (context, appState, element) => {
         renderSingleLinearPoint(context, appState, point, radius, isSelected);
     });
     //Rendering segment mid points
-    const midPoints = LinearElementEditor.getEditorMidPoints(element, appState).filter((midPoint) => midPoint !== null);
+    const midPoints = LinearElementEditor.getEditorMidPoints(element, elementsMap, appState).filter((midPoint) => midPoint !== null);
     midPoints.forEach((segmentMidPoint) => {
         if (appState?.selectedLinearElement?.segmentMidPointHoveredCoords &&
             LinearElementEditor.arePointsEqual(segmentMidPoint, appState.selectedLinearElement.segmentMidPointHoveredCoords)) {
@@ -150,70 +238,36 @@ const renderLinearPointHandles = (context, appState, element) => {
     });
     context.restore();
 };
-const highlightPoint = (point, context, appState) => {
-    context.fillStyle = "rgba(105, 101, 219, 0.4)";
-    fillCircle(context, point[0], point[1], LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value, false);
-};
-const renderLinearElementPointHighlight = (context, appState) => {
-    const { elementId, hoverPointIndex } = appState.selectedLinearElement;
-    if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
-        return;
-    }
-    const element = LinearElementEditor.getElement(elementId);
-    if (!element) {
-        return;
-    }
-    const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(element, hoverPointIndex);
-    context.save();
-    context.translate(appState.scrollX, appState.scrollY);
-    highlightPoint(point, context, appState);
-    context.restore();
-};
-const frameClip = (frame, context, renderConfig, appState) => {
-    context.translate(frame.x + appState.scrollX, frame.y + appState.scrollY);
-    context.beginPath();
-    if (context.roundRect) {
-        context.roundRect(0, 0, frame.width, frame.height, FRAME_STYLE.radius / appState.zoom.value);
-    }
-    else {
-        context.rect(0, 0, frame.width, frame.height);
-    }
-    context.clip();
-    context.translate(-(frame.x + appState.scrollX), -(frame.y + appState.scrollY));
-};
-const getNormalizedCanvasDimensions = (canvas, scale) => {
-    // When doing calculations based on canvas width we should used normalized one
-    return [canvas.width / scale, canvas.height / scale];
-};
-const bootstrapCanvas = ({ canvas, scale, normalizedWidth, normalizedHeight, theme, isExporting, viewBackgroundColor, }) => {
-    const context = canvas.getContext("2d");
-    context.setTransform(1, 0, 0, 1, 0, 0);
-    context.scale(scale, scale);
-    if (isExporting && theme === "dark") {
-        context.filter = THEME_FILTER;
-    }
-    // Paint background
-    if (typeof viewBackgroundColor === "string") {
-        const hasTransparence = viewBackgroundColor === "transparent" ||
-            viewBackgroundColor.length === 5 || // #RGBA
-            viewBackgroundColor.length === 9 || // #RRGGBBA
-            /(hsla|rgba)\(/.test(viewBackgroundColor);
-        if (hasTransparence) {
-            context.clearRect(0, 0, normalizedWidth, normalizedHeight);
+const renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {
+    Object.keys(transformHandles).forEach((key) => {
+        const transformHandle = transformHandles[key];
+        if (transformHandle !== undefined) {
+            const [x, y, width, height] = transformHandle;
+            context.save();
+            context.lineWidth = 1 / appState.zoom.value;
+            if (renderConfig.selectionColor) {
+                context.strokeStyle = renderConfig.selectionColor;
+            }
+            if (key === "rotation") {
+                fillCircle(context, x + width / 2, y + height / 2, width / 2);
+                // prefer round corners if roundRect API is available
+            }
+            else if (context.roundRect) {
+                context.beginPath();
+                context.roundRect(x, y, width, height, 2 / appState.zoom.value);
+                context.fill();
+                context.stroke();
+            }
+            else {
+                strokeRectWithRotation(context, x, y, width, height, x + width / 2, y + height / 2, angle, true);
+            }
+            context.restore();
         }
-        context.save();
-        context.fillStyle = viewBackgroundColor;
-        context.fillRect(0, 0, normalizedWidth, normalizedHeight);
-        context.restore();
-    }
-    else {
-        context.clearRect(0, 0, normalizedWidth, normalizedHeight);
-    }
-    return context;
+    });
 };
-const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedElements, scale, appState, renderConfig, }) => {
+const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }) => {
     if (canvas === null) {
-        return { atLeastOneVisibleElement: false, elements };
+        return { atLeastOneVisibleElement: false, elementsMap };
     }
     const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);
     const context = bootstrapCanvas({
@@ -237,7 +291,7 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
         }
     });
     if (editingLinearElement) {
-        renderLinearPointHandles(context, appState, editingLinearElement);
+        renderLinearPointHandles(context, appState, editingLinearElement, elementsMap);
     }
     // Paint selection element
     if (appState.selectionElement) {
@@ -252,11 +306,11 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
         appState.suggestedBindings
             .filter((binding) => binding != null)
             .forEach((suggestedBinding) => {
-            renderBindingHighlight(context, appState, suggestedBinding);
+            renderBindingHighlight(context, appState, suggestedBinding, elementsMap);
         });
     }
     if (appState.frameToHighlight) {
-        renderFrameHighlight(context, appState, appState.frameToHighlight);
+        renderFrameHighlight(context, appState, appState.frameToHighlight, elementsMap);
     }
     if (appState.elementsToHighlight) {
         renderElementsBoxHighlight(context, appState, appState.elementsToHighlight);
@@ -267,11 +321,11 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
     // correct element from visible elements
     if (selectedElements.length === 1 &&
         appState.editingLinearElement?.elementId === selectedElements[0].id) {
-        renderLinearPointHandles(context, appState, selectedElements[0]);
+        renderLinearPointHandles(context, appState, selectedElements[0], elementsMap);
     }
     if (appState.selectedLinearElement &&
         appState.selectedLinearElement.hoverPointIndex >= 0) {
-        renderLinearElementPointHighlight(context, appState);
+        renderLinearElementPointHighlight(context, appState, elementsMap);
     }
     // Paint selected elements
     if (!appState.multiElement && !appState.editingLinearElement) {
@@ -281,19 +335,17 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
         if (isSingleLinearElementSelected &&
             appState.selectedLinearElement?.elementId === selectedElements[0].id &&
             !selectedElements[0].locked) {
-            renderLinearPointHandles(context, appState, selectedElements[0]);
+            renderLinearPointHandles(context, appState, selectedElements[0], elementsMap);
         }
         const selectionColor = renderConfig.selectionColor || oc.black;
         if (showBoundingBox) {
             // Optimisation for finding quickly relevant element ids
-            const locallySelectedIds = selectedElements.reduce((acc, element) => {
-                acc[element.id] = true;
-                return acc;
-            }, {});
-            const selections = elements.reduce((acc, element) => {
+            const locallySelectedIds = arrayToMap(selectedElements);
+            const selections = [];
+            for (const element of elementsMap.values()) {
                 const selectionColors = [];
                 // local user
-                if (locallySelectedIds[element.id] &&
+                if (locallySelectedIds.has(element.id) &&
                     !isSelectedViaGroup(appState, element)) {
                     selectionColors.push(selectionColor);
                 }
@@ -305,8 +357,8 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
                     }));
                 }
                 if (selectionColors.length) {
-                    const [elementX1, elementY1, elementX2, elementY2, cx, cy] = getElementAbsoluteCoords(element, true);
-                    acc.push({
+                    const [elementX1, elementY1, elementX2, elementY2, cx, cy] = getElementAbsoluteCoords(element, elementsMap, true);
+                    selections.push({
                         angle: element.angle,
                         elementX1,
                         elementY1,
@@ -320,10 +372,9 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
                             appState.activeEmbeddable.state === "active",
                     });
                 }
-                return acc;
-            }, []);
+            }
             const addSelectionForGroupId = (groupId) => {
-                const groupElements = getElementsInGroup(elements, groupId);
+                const groupElements = getElementsInGroup(elementsMap, groupId);
                 const [elementX1, elementY1, elementX2, elementY2] = getCommonBounds(groupElements);
                 selections.push({
                     angle: 0,
@@ -352,13 +403,13 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
         context.translate(appState.scrollX, appState.scrollY);
         if (selectedElements.length === 1) {
             context.fillStyle = oc.white;
-            const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, "mouse");
+            const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse");
             if (!appState.viewModeEnabled && showBoundingBox) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
         }
         else if (selectedElements.length > 1 && !appState.isRotating) {
-            const dashedLinePadding = (DEFAULT_SPACING * 2) / appState.zoom.value;
+            const dashedLinePadding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
             context.fillStyle = oc.white;
             const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
             const initialLineDash = context.getLineDash();
@@ -496,7 +547,7 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
     // Paint scrollbars
     let scrollBars;
     if (renderConfig.renderScrollbars) {
-        scrollBars = getScrollBars(elements, normalizedWidth, normalizedHeight, appState);
+        scrollBars = getScrollBars(visibleElements, normalizedWidth, normalizedHeight, appState);
         context.save();
         context.fillStyle = SCROLLBAR_COLOR;
         context.strokeStyle = "rgba(255,255,255,0.8)";
@@ -510,119 +561,16 @@ const _renderInteractiveScene = ({ canvas, elements, visibleElements, selectedEl
     return {
         scrollBars,
         atLeastOneVisibleElement: visibleElements.length > 0,
-        elements,
+        elementsMap,
     };
 };
-const _renderStaticScene = ({ canvas, rc, elements, visibleElements, scale, appState, renderConfig, }) => {
-    if (canvas === null) {
-        return;
-    }
-    const { renderGrid = true, isExporting } = renderConfig;
-    const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(canvas, scale);
-    const context = bootstrapCanvas({
-        canvas,
-        scale,
-        normalizedWidth,
-        normalizedHeight,
-        theme: appState.theme,
-        isExporting,
-        viewBackgroundColor: appState.viewBackgroundColor,
-    });
-    // Apply zoom
-    context.scale(appState.zoom.value, appState.zoom.value);
-    // Grid
-    if (renderGrid && appState.gridSize) {
-        strokeGrid(context, appState.gridSize, appState.scrollX, appState.scrollY, appState.zoom, normalizedWidth / appState.zoom.value, normalizedHeight / appState.zoom.value);
-    }
-    const groupsToBeAddedToFrame = new Set();
-    visibleElements.forEach((element) => {
-        if (element.groupIds.length > 0 &&
-            appState.frameToHighlight &&
-            appState.selectedElementIds[element.id] &&
-            (elementOverlapsWithFrame(element, appState.frameToHighlight) ||
-                element.groupIds.find((groupId) => groupsToBeAddedToFrame.has(groupId)))) {
-            element.groupIds.forEach((groupId) => groupsToBeAddedToFrame.add(groupId));
-        }
-    });
-    // Paint visible elements
-    visibleElements
-        .filter((el) => !isIframeLikeOrItsLabel(el))
-        .forEach((element) => {
-        try {
-            const frameId = element.frameId || appState.frameToHighlight?.id;
-            if (frameId &&
-                appState.frameRendering.enabled &&
-                appState.frameRendering.clip) {
-                context.save();
-                const frame = getTargetFrame(element, appState);
-                // TODO do we need to check isElementInFrame here?
-                if (frame && isElementInFrame(element, elements, appState)) {
-                    frameClip(frame, context, renderConfig, appState);
-                }
-                renderElement(element, rc, context, renderConfig, appState);
-                context.restore();
-            }
-            else {
-                renderElement(element, rc, context, renderConfig, appState);
-            }
-            if (!isExporting) {
-                renderLinkIcon(element, context, appState);
-            }
-        }
-        catch (error) {
-            console.error(error);
-        }
-    });
-    // render embeddables on top
-    visibleElements
-        .filter((el) => isIframeLikeOrItsLabel(el))
-        .forEach((element) => {
-        try {
-            const render = () => {
-                renderElement(element, rc, context, renderConfig, appState);
-                if (isIframeLikeElement(element) &&
-                    (isExporting ||
-                        (isEmbeddableElement(element) && !element.validated)) &&
-                    element.width &&
-                    element.height) {
-                    const label = createPlaceholderEmbeddableLabel(element);
-                    renderElement(label, rc, context, renderConfig, appState);
-                }
-                if (!isExporting) {
-                    renderLinkIcon(element, context, appState);
-                }
-            };
-            // - when exporting the whole canvas, we DO NOT apply clipping
-            // - when we are exporting a particular frame, apply clipping
-            //   if the containing frame is not selected, apply clipping
-            const frameId = element.frameId || appState.frameToHighlight?.id;
-            if (frameId &&
-                appState.frameRendering.enabled &&
-                appState.frameRendering.clip) {
-                context.save();
-                const frame = getTargetFrame(element, appState);
-                if (frame && isElementInFrame(element, elements, appState)) {
-                    frameClip(frame, context, renderConfig, appState);
-                }
-                render();
-                context.restore();
-            }
-            else {
-                render();
-            }
-        }
-        catch (error) {
-            console.error(error);
-        }
-    });
-};
 /** throttled to animation framerate */
-const renderInteractiveSceneThrottled = throttleRAF((config) => {
+export const renderInteractiveSceneThrottled = throttleRAF((config) => {
     const ret = _renderInteractiveScene(config);
     config.callback?.(ret);
 }, { trailing: true });
 /**
- * Interactive scene is the ui-canvas where we render boundinb boxes, selections
+ * Interactive scene is the ui-canvas where we render bounding boxes, selections
  * and other ui stuff.
  */
 export const renderInteractiveScene = (renderConfig, throttle) => {
@@ -634,226 +582,3 @@ export const renderInteractiveScene = (renderConfig, throttle) => {
     renderConfig.callback(ret);
     return ret;
 };
-/** throttled to animation framerate */
-const renderStaticSceneThrottled = throttleRAF((config) => {
-    _renderStaticScene(config);
-}, { trailing: true });
-/**
- * Static scene is the non-ui canvas where we render elements.
- */
-export const renderStaticScene = (renderConfig, throttle) => {
-    if (throttle) {
-        renderStaticSceneThrottled(renderConfig);
-        return;
-    }
-    _renderStaticScene(renderConfig);
-};
-export const cancelRender = () => {
-    renderInteractiveSceneThrottled.cancel();
-    renderStaticSceneThrottled.cancel();
-};
-const renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {
-    Object.keys(transformHandles).forEach((key) => {
-        const transformHandle = transformHandles[key];
-        if (transformHandle !== undefined) {
-            const [x, y, width, height] = transformHandle;
-            context.save();
-            context.lineWidth = 1 / appState.zoom.value;
-            if (renderConfig.selectionColor) {
-                context.strokeStyle = renderConfig.selectionColor;
-            }
-            if (key === "rotation") {
-                fillCircle(context, x + width / 2, y + height / 2, width / 2);
-                // prefer round corners if roundRect API is available
-            }
-            else if (context.roundRect) {
-                context.beginPath();
-                context.roundRect(x, y, width, height, 2 / appState.zoom.value);
-                context.fill();
-                context.stroke();
-            }
-            else {
-                strokeRectWithRotation(context, x, y, width, height, x + width / 2, y + height / 2, angle, true);
-            }
-            context.restore();
-        }
-    });
-};
-const renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_SPACING * 2) => {
-    const { angle, elementX1, elementY1, elementX2, elementY2, selectionColors, cx, cy, dashed, activeEmbeddable, } = elementProperties;
-    const elementWidth = elementX2 - elementX1;
-    const elementHeight = elementY2 - elementY1;
-    const linePadding = padding / appState.zoom.value;
-    const lineWidth = 8 / appState.zoom.value;
-    const spaceWidth = 4 / appState.zoom.value;
-    context.save();
-    context.translate(appState.scrollX, appState.scrollY);
-    context.lineWidth = (activeEmbeddable ? 4 : 1) / appState.zoom.value;
-    const count = selectionColors.length;
-    for (let index = 0; index < count; ++index) {
-        context.strokeStyle = selectionColors[index];
-        if (dashed) {
-            context.setLineDash([
-                lineWidth,
-                spaceWidth + (lineWidth + spaceWidth) * (count - 1),
-            ]);
-        }
-        context.lineDashOffset = (lineWidth + spaceWidth) * index;
-        strokeRectWithRotation(context, elementX1 - linePadding, elementY1 - linePadding, elementWidth + linePadding * 2, elementHeight + linePadding * 2, cx, cy, angle);
-    }
-    context.restore();
-};
-const renderBindingHighlight = (context, appState, suggestedBinding) => {
-    const renderHighlight = Array.isArray(suggestedBinding)
-        ? renderBindingHighlightForSuggestedPointBinding
-        : renderBindingHighlightForBindableElement;
-    context.save();
-    context.translate(appState.scrollX, appState.scrollY);
-    renderHighlight(context, suggestedBinding);
-    context.restore();
-};
-const renderBindingHighlightForBindableElement = (context, element) => {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const width = x2 - x1;
-    const height = y2 - y1;
-    const threshold = maxBindingGap(element, width, height);
-    // So that we don't overlap the element itself
-    const strokeOffset = 4;
-    context.strokeStyle = "rgba(0,0,0,.05)";
-    context.lineWidth = threshold - strokeOffset;
-    const padding = strokeOffset / 2 + threshold / 2;
-    switch (element.type) {
-        case "rectangle":
-        case "text":
-        case "image":
-        case "iframe":
-        case "embeddable":
-        case "frame":
-        case "magicframe":
-            strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);
-            break;
-        case "diamond":
-            const side = Math.hypot(width, height);
-            const wPadding = (padding * side) / height;
-            const hPadding = (padding * side) / width;
-            strokeDiamondWithRotation(context, width + wPadding * 2, height + hPadding * 2, x1 + width / 2, y1 + height / 2, element.angle);
-            break;
-        case "ellipse":
-            strokeEllipseWithRotation(context, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle);
-            break;
-    }
-};
-const renderFrameHighlight = (context, appState, frame) => {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame);
-    const width = x2 - x1;
-    const height = y2 - y1;
-    context.strokeStyle = "rgb(0,118,255)";
-    context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-    context.save();
-    context.translate(appState.scrollX, appState.scrollY);
-    strokeRectWithRotation(context, x1, y1, width, height, x1 + width / 2, y1 + height / 2, frame.angle, false, FRAME_STYLE.radius / appState.zoom.value);
-    context.restore();
-};
-const renderElementsBoxHighlight = (context, appState, elements) => {
-    const individualElements = elements.filter((element) => element.groupIds.length === 0);
-    const elementsInGroups = elements.filter((element) => element.groupIds.length > 0);
-    const getSelectionFromElements = (elements) => {
-        const [elementX1, elementY1, elementX2, elementY2] = getCommonBounds(elements);
-        return {
-            angle: 0,
-            elementX1,
-            elementX2,
-            elementY1,
-            elementY2,
-            selectionColors: ["rgb(0,118,255)"],
-            dashed: false,
-            cx: elementX1 + (elementX2 - elementX1) / 2,
-            cy: elementY1 + (elementY2 - elementY1) / 2,
-            activeEmbeddable: false,
-        };
-    };
-    const getSelectionForGroupId = (groupId) => {
-        const groupElements = getElementsInGroup(elements, groupId);
-        return getSelectionFromElements(groupElements);
-    };
-    Object.entries(selectGroupsFromGivenElements(elementsInGroups, appState))
-        .filter(([id, isSelected]) => isSelected)
-        .map(([id, isSelected]) => id)
-        .map((groupId) => getSelectionForGroupId(groupId))
-        .concat(individualElements.map((element) => getSelectionFromElements([element])))
-        .forEach((selection) => renderSelectionBorder(context, appState, selection));
-};
-const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding) => {
-    const [element, startOrEnd, bindableElement] = suggestedBinding;
-    const threshold = maxBindingGap(bindableElement, bindableElement.width, bindableElement.height);
-    context.strokeStyle = "rgba(0,0,0,0)";
-    context.fillStyle = "rgba(0,0,0,.05)";
-    const pointIndices = startOrEnd === "both" ? [0, -1] : startOrEnd === "start" ? [0] : [-1];
-    pointIndices.forEach((index) => {
-        const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(element, index);
-        fillCircle(context, x, y, threshold);
-    });
-};
-let linkCanvasCache;
-const renderLinkIcon = (element, context, appState) => {
-    if (element.link && !appState.selectedElementIds[element.id]) {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-        const [x, y, width, height] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);
-        const centerX = x + width / 2;
-        const centerY = y + height / 2;
-        context.save();
-        context.translate(appState.scrollX + centerX, appState.scrollY + centerY);
-        context.rotate(element.angle);
-        if (!linkCanvasCache || linkCanvasCache.zoom !== appState.zoom.value) {
-            linkCanvasCache = document.createElement("canvas");
-            linkCanvasCache.zoom = appState.zoom.value;
-            linkCanvasCache.width =
-                width * window.devicePixelRatio * appState.zoom.value;
-            linkCanvasCache.height =
-                height * window.devicePixelRatio * appState.zoom.value;
-            const linkCanvasCacheContext = linkCanvasCache.getContext("2d");
-            linkCanvasCacheContext.scale(window.devicePixelRatio * appState.zoom.value, window.devicePixelRatio * appState.zoom.value);
-            linkCanvasCacheContext.fillStyle = "#fff";
-            linkCanvasCacheContext.fillRect(0, 0, width, height);
-            linkCanvasCacheContext.drawImage(EXTERNAL_LINK_IMG, 0, 0, width, height);
-            linkCanvasCacheContext.restore();
-            context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);
-        }
-        else {
-            context.drawImage(linkCanvasCache, x - centerX, y - centerY, width, height);
-        }
-        context.restore();
-    }
-};
-// This should be only called for exporting purposes
-export const renderSceneToSvg = (elements, rsvg, svgRoot, files, renderConfig) => {
-    if (!svgRoot) {
-        return;
-    }
-    // render elements
-    elements
-        .filter((el) => !isIframeLikeOrItsLabel(el))
-        .forEach((element) => {
-        if (!element.isDeleted) {
-            try {
-                renderElementToSvg(element, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        }
-    });
-    // render embeddables on top
-    elements
-        .filter((el) => isIframeLikeElement(el))
-        .forEach((element) => {
-        if (!element.isDeleted) {
-            try {
-                renderElementToSvg(element, rsvg, svgRoot, files, element.x + renderConfig.offsetX, element.y + renderConfig.offsetY, renderConfig);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        }
-    });
-};