@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

package/dist/excalidraw/renderer/interactiveScene.js

@@ -8,11 +8,12 @@ import { getOmitSidesForDevice, shouldShowBoundingBox, } from "../element/transf
 import { arrayToMap, throttleRAF } from "../utils";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
 import { renderSnaps } from "../renderer/renderSnaps";
-import { maxBindingGap, } from "../element/binding";
+import { maxBindingGap } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
 import oc from "open-color";
-import { isFrameLikeElement, isLinearElement } from "../element/typeChecks";
+import { isArrowElement, isElbowArrow, isFrameLikeElement, isLinearElement, isTextElement, } from "../element/typeChecks";
+import { getCornerRadius } from "../math";
 const renderLinearElementPointHighlight = (context, appState, elementsMap) => {
     const { elementId, hoverPointIndex } = appState.selectedLinearElement;
     if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
@@ -86,12 +87,13 @@ 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);
+    const thickness = 10;
     // 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;
+    context.lineWidth = thickness - strokeOffset;
+    const padding = strokeOffset / 2 + thickness / 2;
+    const radius = getCornerRadius(Math.min(element.width, element.height), element);
     switch (element.type) {
         case "rectangle":
         case "text":
@@ -100,7 +102,7 @@ const renderBindingHighlightForBindableElement = (context, element, elementsMap)
         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);
+            strokeRectWithRotation(context, x1 - padding, y1 - padding, width + padding * 2, height + padding * 2, x1 + width / 2, y1 + height / 2, element.angle, undefined, radius);
             break;
         case "diamond":
             const side = Math.hypot(width, height);
@@ -124,10 +126,11 @@ const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBindin
         fillCircle(context, x, y, threshold);
     });
 };
-const renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2) => {
+const renderSelectionBorder = (context, appState, elementProperties) => {
     const { angle, elementX1, elementY1, elementX2, elementY2, selectionColors, cx, cy, dashed, activeEmbeddable, } = elementProperties;
     const elementWidth = elementX2 - elementX1;
     const elementHeight = elementY2 - elementY1;
+    const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
     const linePadding = padding / appState.zoom.value;
     const lineWidth = 8 / appState.zoom.value;
     const spaceWidth = 4 / appState.zoom.value;
@@ -210,6 +213,9 @@ const renderLinearPointHandles = (context, appState, element, elementsMap) => {
         ? POINT_HANDLE_SIZE
         : POINT_HANDLE_SIZE / 2;
     points.forEach((point, idx) => {
+        if (isElbowArrow(element) && idx !== 0 && idx !== points.length - 1) {
+            return;
+        }
         const isSelected = !!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);
         renderSingleLinearPoint(context, appState, point, radius, isSelected);
     });
@@ -264,7 +270,23 @@ const renderTransformHandles = (context, renderConfig, appState, transformHandle
         }
     });
 };
-const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, device, }) => {
+const renderTextBox = (text, context, appState, selectionColor) => {
+    context.save();
+    const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
+    const width = text.width + padding * 2;
+    const height = text.height + padding * 2;
+    const cx = text.x + width / 2;
+    const cy = text.y + height / 2;
+    const shiftX = -(width / 2 + padding);
+    const shiftY = -(height / 2 + padding);
+    context.translate(cx + appState.scrollX, cy + appState.scrollY);
+    context.rotate(text.angle);
+    context.lineWidth = 1 / appState.zoom.value;
+    context.strokeStyle = selectionColor;
+    context.strokeRect(shiftX, shiftY, width, height);
+    context.restore();
+};
+const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }) => {
     if (canvas === null) {
         return { atLeastOneVisibleElement: false, elementsMap };
     }
@@ -295,12 +317,18 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
     // Paint selection element
     if (appState.selectionElement) {
         try {
-            renderSelectionElement(appState.selectionElement, context, appState);
+            renderSelectionElement(appState.selectionElement, context, appState, renderConfig.selectionColor);
         }
         catch (error) {
             console.error(error);
         }
     }
+    if (appState.editingElement && isTextElement(appState.editingElement)) {
+        const textElement = allElementsMap.get(appState.editingElement.id);
+        if (textElement && !textElement.autoResize) {
+            renderTextBox(textElement, context, appState, renderConfig.selectionColor);
+        }
+    }
     if (appState.isBindingEnabled) {
         appState.suggestedBindings
             .filter((binding) => binding != null)
@@ -323,7 +351,11 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
         renderLinearPointHandles(context, appState, selectedElements[0], elementsMap);
     }
     if (appState.selectedLinearElement &&
-        appState.selectedLinearElement.hoverPointIndex >= 0) {
+        appState.selectedLinearElement.hoverPointIndex >= 0 &&
+        !(isElbowArrow(selectedElements[0]) &&
+            appState.selectedLinearElement.hoverPointIndex > 0 &&
+            appState.selectedLinearElement.hoverPointIndex <
+                selectedElements[0].points.length - 1)) {
         renderLinearElementPointHighlight(context, appState, elementsMap);
     }
     // Paint selected elements
@@ -343,18 +375,25 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
             const selections = [];
             for (const element of elementsMap.values()) {
                 const selectionColors = [];
-                // local user
-                if (locallySelectedIds.has(element.id) &&
-                    !isSelectedViaGroup(appState, element)) {
-                    selectionColors.push(selectionColor);
-                }
-                // remote users
                 const remoteClients = renderConfig.remoteSelectedElementIds.get(element.id);
-                if (remoteClients) {
-                    selectionColors.push(...remoteClients.map((socketId) => {
-                        const background = getClientColor(socketId, appState.collaborators.get(socketId));
-                        return background;
-                    }));
+                if (!(
+                // Elbow arrow elements cannot be selected when bound on either end
+                (isSingleLinearElementSelected &&
+                    isArrowElement(element) &&
+                    isElbowArrow(element) &&
+                    (element.startBinding || element.endBinding)))) {
+                    // local user
+                    if (locallySelectedIds.has(element.id) &&
+                        !isSelectedViaGroup(appState, element)) {
+                        selectionColors.push(selectionColor);
+                    }
+                    // remote users
+                    if (remoteClients) {
+                        selectionColors.push(...remoteClients.map((socketId) => {
+                            const background = getClientColor(socketId, appState.collaborators.get(socketId));
+                            return background;
+                        }));
+                    }
                 }
                 if (selectionColors.length) {
                     const [elementX1, elementY1, elementX2, elementY2, cx, cy] = getElementAbsoluteCoords(element, elementsMap, true);
@@ -405,7 +444,10 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
             context.fillStyle = oc.white;
             const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse", // when we render we don't know which pointer type so use mouse,
             getOmitSidesForDevice(device));
-            if (!appState.viewModeEnabled && showBoundingBox) {
+            if (!appState.viewModeEnabled &&
+                showBoundingBox &&
+                // do not show transform handles when text is being edited
+                !isTextElement(appState.editingElement)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
         }

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

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
+import type { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import { StaticCanvasRenderConfig, RenderableElementsMap } from "../scene/types";
-import { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
+import type { StaticCanvasRenderConfig, RenderableElementsMap, InteractiveCanvasRenderConfig } from "../scene/types";
+import type { 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 {
@@ -9,15 +9,17 @@ export interface ExcalidrawElementWithCanvas {
     canvas: HTMLCanvasElement;
     theme: AppState["theme"];
     scale: number;
+    angle: number;
     zoomValue: AppState["zoom"]["value"];
     canvasOffsetX: number;
     canvasOffsetY: number;
     boundTextElementVersion: number | null;
     containingFrameOpacity: number;
+    boundTextCanvas: HTMLCanvasElement;
 }
 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 renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState, selectionColor: InteractiveCanvasRenderConfig["selectionColor"]) => 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;

package/dist/excalidraw/renderer/renderElement.js

@@ -6,10 +6,11 @@ import rough from "roughjs/bin/rough";
 import { getDefaultAppState } from "../appState";
 import { BOUND_TEXT_PADDING, ELEMENT_READY_TO_ERASE_OPACITY, FRAME_STYLE, MIME_TYPES, THEME, } from "../constants";
 import { getStroke } from "perfect-freehand";
-import { getBoundTextElement, getContainerCoords, getContainerElement, getLineHeightInPx, getBoundTextMaxHeight, getBoundTextMaxWidth, getVerticalOffset, } from "../element/textElement";
+import { getBoundTextElement, getContainerCoords, getContainerElement, getLineHeightInPx, getBoundTextMaxHeight, getBoundTextMaxWidth, } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { getContainingFrame } from "../frame";
 import { ShapeCache } from "../scene/ShapeCache";
+import { getVerticalOffset } from "../fonts";
 // 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
@@ -24,7 +25,16 @@ const shouldResetImageFilter = (element, renderConfig, appState) => {
         !isPendingImageElement(element, renderConfig) &&
         renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg);
 };
-const getCanvasPadding = (element) => element.type === "freedraw" ? element.strokeWidth * 12 : 20;
+const getCanvasPadding = (element) => {
+    switch (element.type) {
+        case "freedraw":
+            return element.strokeWidth * 12;
+        case "text":
+            return element.fontSize / 2;
+        default:
+            return 20;
+    }
+};
 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)
@@ -78,7 +88,7 @@ const generateElementCanvas = (element, elementsMap, zoom, renderConfig, appStat
     const { width, height, scale } = cappedElementCanvasSize(element, elementsMap, zoom);
     canvas.width = width;
     canvas.height = height;
-    let canvasOffsetX = 0;
+    let canvasOffsetX = -100;
     let canvasOffsetY = 0;
     if (isLinearElement(element) || isFreeDrawElement(element)) {
         const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
@@ -102,6 +112,45 @@ const generateElementCanvas = (element, elementsMap, zoom, renderConfig, appStat
     }
     drawElementOnCanvas(element, rc, context, renderConfig, appState);
     context.restore();
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    const boundTextCanvas = document.createElement("canvas");
+    const boundTextCanvasContext = boundTextCanvas.getContext("2d");
+    if (isArrowElement(element) && boundTextElement) {
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+        // Take max dimensions of arrow canvas so that when canvas is rotated
+        // the arrow doesn't get clipped
+        const maxDim = Math.max(distance(x1, x2), distance(y1, y2));
+        boundTextCanvas.width =
+            maxDim * window.devicePixelRatio * scale + padding * scale * 10;
+        boundTextCanvas.height =
+            maxDim * window.devicePixelRatio * scale + padding * scale * 10;
+        boundTextCanvasContext.translate(boundTextCanvas.width / 2, boundTextCanvas.height / 2);
+        boundTextCanvasContext.rotate(element.angle);
+        boundTextCanvasContext.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
+        const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords(boundTextElement, elementsMap);
+        boundTextCanvasContext.rotate(-element.angle);
+        const offsetX = (boundTextCanvas.width - canvas.width) / 2;
+        const offsetY = (boundTextCanvas.height - canvas.height) / 2;
+        const shiftX = boundTextCanvas.width / 2 -
+            (boundTextCx - x1) * window.devicePixelRatio * scale -
+            offsetX -
+            padding * scale;
+        const shiftY = boundTextCanvas.height / 2 -
+            (boundTextCy - y1) * window.devicePixelRatio * scale -
+            offsetY -
+            padding * scale;
+        boundTextCanvasContext.translate(-shiftX, -shiftY);
+        // Clear the bound text area
+        boundTextCanvasContext.clearRect(-(boundTextElement.width / 2 + BOUND_TEXT_PADDING) *
+            window.devicePixelRatio *
+            scale, -(boundTextElement.height / 2 + BOUND_TEXT_PADDING) *
+            window.devicePixelRatio *
+            scale, (boundTextElement.width + BOUND_TEXT_PADDING * 2) *
+            window.devicePixelRatio *
+            scale, (boundTextElement.height + BOUND_TEXT_PADDING * 2) *
+            window.devicePixelRatio *
+            scale);
+    }
     return {
         element,
         canvas,
@@ -112,6 +161,8 @@ const generateElementCanvas = (element, elementsMap, zoom, renderConfig, appStat
         canvasOffsetY,
         boundTextElementVersion: getBoundTextElement(element, elementsMap)?.version || null,
         containingFrameOpacity: getContainingFrame(element, elementsMap)?.opacity || 100,
+        boundTextCanvas,
+        angle: element.angle,
     };
 };
 export const DEFAULT_LINK_SIZE = 14;
@@ -119,7 +170,7 @@ const IMAGE_PLACEHOLDER_IMG = document.createElement("img");
 IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(`<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#888" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>`)}`;
 const IMAGE_ERROR_PLACEHOLDER_IMG = document.createElement("img");
 IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(`<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`)}`;
-const drawImagePlaceholder = (element, context, zoomValue) => {
+const drawImagePlaceholder = (element, context) => {
     context.fillStyle = "#E7E7E7";
     context.fillRect(0, 0, element.width, element.height);
     const imageMinWidthOrHeight = Math.min(element.width, element.height);
@@ -176,7 +227,7 @@ const drawElementOnCanvas = (element, rc, context, renderConfig, appState) => {
                 context.drawImage(img, 0 /* hardcoded for the selection box*/, 0, element.width, element.height);
             }
             else {
-                drawImagePlaceholder(element, context, appState.zoom.value);
+                drawImagePlaceholder(element, context);
             }
             break;
         }
@@ -224,13 +275,21 @@ const generateElementWithCanvas = (element, elementsMap, renderConfig, appState)
     const shouldRegenerateBecauseZoom = prevElementWithCanvas &&
         prevElementWithCanvas.zoomValue !== zoom.value &&
         !appState?.shouldCacheIgnoreZoom;
-    const boundTextElementVersion = getBoundTextElement(element, elementsMap)?.version || null;
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    const boundTextElementVersion = boundTextElement?.version || null;
     const containingFrameOpacity = getContainingFrame(element, elementsMap)?.opacity || 100;
     if (!prevElementWithCanvas ||
         shouldRegenerateBecauseZoom ||
         prevElementWithCanvas.theme !== appState.theme ||
         prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion ||
-        prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity) {
+        prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity ||
+        // since we rotate the canvas when copying from cached canvas, we don't
+        // regenerate the cached canvas. But we need to in case of labels which are
+        // cached alongside the arrow, and we want the labels to remain unrotated
+        // with respect to the arrow.
+        (isArrowElement(element) &&
+            boundTextElement &&
+            element.angle !== prevElementWithCanvas.angle)) {
         const elementWithCanvas = generateElementCanvas(element, elementsMap, zoom, renderConfig, appState);
         elementWithCanvasCache.set(element, elementWithCanvas);
         return elementWithCanvas;
@@ -241,60 +300,21 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
     const element = elementWithCanvas.element;
     const padding = getCanvasPadding(element);
     const zoom = elementWithCanvas.scale;
-    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);
-        x2 = Math.ceil(x2);
-        y1 = Math.floor(y1);
-        y2 = Math.ceil(y2);
-    }
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
     const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;
     const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
     context.save();
     context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
     const boundTextElement = getBoundTextElement(element, allElementsMap);
     if (isArrowElement(element) && boundTextElement) {
-        const tempCanvas = document.createElement("canvas");
-        const tempCanvasContext = tempCanvas.getContext("2d");
-        // Take max dimensions of arrow canvas so that when canvas is rotated
-        // the arrow doesn't get clipped
-        const maxDim = Math.max(distance(x1, x2), distance(y1, y2));
-        tempCanvas.width =
-            maxDim * window.devicePixelRatio * zoom +
-                padding * elementWithCanvas.scale * 10;
-        tempCanvas.height =
-            maxDim * window.devicePixelRatio * zoom +
-                padding * elementWithCanvas.scale * 10;
-        const offsetX = (tempCanvas.width - elementWithCanvas.canvas.width) / 2;
-        const offsetY = (tempCanvas.height - elementWithCanvas.canvas.height) / 2;
-        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, allElementsMap);
-        tempCanvasContext.rotate(-element.angle);
-        // Shift the canvas to the center of the bound text element
-        const shiftX = tempCanvas.width / 2 -
-            (boundTextCx - x1) * window.devicePixelRatio * zoom -
-            offsetX -
-            padding * zoom;
-        const shiftY = tempCanvas.height / 2 -
-            (boundTextCy - y1) * window.devicePixelRatio * zoom -
-            offsetY -
-            padding * zoom;
-        tempCanvasContext.translate(-shiftX, -shiftY);
-        // Clear the bound text area
-        tempCanvasContext.clearRect(-(boundTextElement.width / 2 + BOUND_TEXT_PADDING) *
-            window.devicePixelRatio *
-            zoom, -(boundTextElement.height / 2 + BOUND_TEXT_PADDING) *
-            window.devicePixelRatio *
-            zoom, (boundTextElement.width + BOUND_TEXT_PADDING * 2) *
-            window.devicePixelRatio *
-            zoom, (boundTextElement.height + BOUND_TEXT_PADDING * 2) *
-            window.devicePixelRatio *
-            zoom);
+        const offsetX = (elementWithCanvas.boundTextCanvas.width -
+            elementWithCanvas.canvas.width) /
+            2;
+        const offsetY = (elementWithCanvas.boundTextCanvas.height -
+            elementWithCanvas.canvas.height) /
+            2;
         context.translate(cx, cy);
-        context.drawImage(tempCanvas, (-(x2 - x1) / 2) * window.devicePixelRatio - offsetX / zoom - padding, (-(y2 - y1) / 2) * window.devicePixelRatio - offsetY / zoom - padding, tempCanvas.width / zoom, tempCanvas.height / zoom);
+        context.drawImage(elementWithCanvas.boundTextCanvas, (-(x2 - x1) / 2) * window.devicePixelRatio - offsetX / zoom - padding, (-(y2 - y1) / 2) * window.devicePixelRatio - offsetY / zoom - padding, elementWithCanvas.boundTextCanvas.width / zoom, elementWithCanvas.boundTextCanvas.height / zoom);
     }
     else {
         // we translate context to element center so that rotation and scale
@@ -323,7 +343,7 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
     context.restore();
     // Clear the nested element we appended to the DOM
 };
-export const renderSelectionElement = (element, context, appState) => {
+export const renderSelectionElement = (element, context, appState, selectionColor) => {
     context.save();
     context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
     context.fillStyle = "rgba(0, 0, 200, 0.04)";
@@ -334,7 +354,7 @@ export const renderSelectionElement = (element, context, appState) => {
     const offset = 0.5 / appState.zoom.value;
     context.fillRect(offset, offset, element.width, element.height);
     context.lineWidth = 1 / appState.zoom.value;
-    context.strokeStyle = " rgb(105, 101, 219)";
+    context.strokeStyle = selectionColor;
     context.strokeRect(offset, offset, element.width, element.height);
     context.restore();
 };
@@ -386,7 +406,7 @@ export const renderElement = (element, elementsMap, allElementsMap, rc, context,
                 context.restore();
             }
             else {
-                const elementWithCanvas = generateElementWithCanvas(element, elementsMap, renderConfig, appState);
+                const elementWithCanvas = generateElementWithCanvas(element, allElementsMap, renderConfig, appState);
                 drawElementFromCanvas(elementWithCanvas, context, renderConfig, appState, allElementsMap);
             }
             break;
@@ -470,7 +490,7 @@ export const renderElement = (element, elementsMap, allElementsMap, rc, context,
                 // canvases)
             }
             else {
-                const elementWithCanvas = generateElementWithCanvas(element, elementsMap, renderConfig, appState);
+                const elementWithCanvas = generateElementWithCanvas(element, allElementsMap, renderConfig, appState);
                 const currentImageSmoothingStatus = context.imageSmoothingEnabled;
                 if (
                 // do not disable smoothing during zoom as blurry shapes look better

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

@@ -1,2 +1,2 @@
-import { InteractiveCanvasAppState } from "../types";
+import type { InteractiveCanvasAppState } from "../types";
 export declare const renderSnaps: (context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;

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

@@ -1,4 +1,4 @@
-import { StaticSceneRenderConfig } from "../scene/types";
+import type { StaticSceneRenderConfig } from "../scene/types";
 /** throttled to animation framerate */
 export declare const renderStaticSceneThrottled: {
     (config: StaticSceneRenderConfig): void;

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

@@ -1,5 +1,5 @@
-import { RoughSVG } from "roughjs/bin/svg";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
-import { BinaryFiles } from "../types";
+import type { RoughSVG } from "roughjs/bin/svg";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
+import type { BinaryFiles } from "../types";
 export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], elementsMap: RenderableElementsMap, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, renderConfig: SVGRenderConfig) => void;

package/dist/excalidraw/renderer/staticSvgScene.js

@@ -3,13 +3,14 @@ import { normalizeLink, toValidURL } from "../data/url";
 import { getElementAbsoluteCoords } from "../element";
 import { createPlaceholderEmbeddableLabel, getEmbedLink, } from "../element/embeddable";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { getBoundTextElement, getContainerElement, getLineHeightInPx, getVerticalOffset, } from "../element/textElement";
+import { getBoundTextElement, getContainerElement, getLineHeightInPx, } from "../element/textElement";
 import { isArrowElement, isIframeLikeElement, isInitializedImageElement, isTextElement, } from "../element/typeChecks";
 import { getContainingFrame } from "../frame";
 import { getCornerRadius, isPathALoop } from "../math";
 import { ShapeCache } from "../scene/ShapeCache";
 import { getFontFamilyString, isRTL, isTestEnv } from "../utils";
 import { getFreeDrawSvgPath, IMAGE_INVERT_FILTER } from "./renderElement";
+import { getVerticalOffset } from "../fonts";
 const roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {
     if (typeof precision === "undefined") {
         return rsvg.draw(drawable);

package/dist/excalidraw/scene/Renderer.d.ts

@@ -1,6 +1,6 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-import Scene from "./Scene";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { AppState } from "../types";
+import type Scene from "./Scene";
 export declare class Renderer {
     private scene;
     constructor(scene: Scene);
@@ -14,7 +14,7 @@ export declare class Renderer {
         width: AppState["width"];
         editingElement: AppState["editingElement"];
         pendingImageElementId: AppState["pendingImageElementId"];
-        versionNonce: ReturnType<InstanceType<typeof Scene>["getVersionNonce"]>;
+        sceneNonce: ReturnType<InstanceType<typeof Scene>["getSceneNonce"]>;
     }) => {
         elementsMap: Map<string, NonDeletedExcalidrawElement> & import("../utility-types").MakeBrand<"NonDeletedElementsMap"> & import("../utility-types").MakeBrand<"RenderableElementsMap">;
         visibleElements: readonly NonDeletedExcalidrawElement[];

package/dist/excalidraw/scene/Renderer.js

@@ -45,9 +45,8 @@ export class Renderer {
             return elementsMap;
         };
         return memoize(({ zoom, offsetLeft, offsetTop, scrollX, scrollY, height, width, editingElement, pendingImageElementId, 
-        // unused but serves we cache on it to invalidate elements if they
-        // get mutated
-        versionNonce: _versionNonce, }) => {
+        // cache-invalidation nonce
+        sceneNonce: _sceneNonce, }) => {
             const elements = this.scene.getNonDeletedElements();
             const elementsMap = getRenderableElements({
                 elements,

package/dist/excalidraw/scene/Scene.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray, OrderedExcalidrawElement, Ordered } from "../element/types";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { AppState } from "../types";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray, OrderedExcalidrawElement, Ordered } from "../element/types";
+import type { LinearElementEditor } from "../element/linearElementEditor";
+import type { AppState } from "../types";
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
 type SceneStateCallback = () => void;
@@ -10,6 +10,9 @@ declare class Scene {
     private static sceneMapByElement;
     private static sceneMapById;
     static mapElementToScene(elementKey: ElementKey, scene: Scene): void;
+    /**
+     * @deprecated pass down `app.scene` and use it directly
+     */
     static getScene(elementKey: ElementKey): Scene | null;
     private callbacks;
     private nonDeletedElements;
@@ -19,7 +22,14 @@ declare class Scene {
     private frames;
     private elementsMap;
     private selectedElementsCache;
-    private versionNonce;
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    private sceneNonce;
+    getSceneNonce(): number | undefined;
     getNonDeletedElementsMap(): Map<string, Ordered<NonDeletedExcalidrawElement>> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
     getElementsIncludingDeleted(): readonly OrderedExcalidrawElement[];
     getElementsMapIncludingDeleted(): Map<string, Ordered<ExcalidrawElement>> & import("../utility-types").MakeBrand<"SceneElementsMap">;
@@ -38,7 +48,6 @@ declare class Scene {
     }): NonDeleted<ExcalidrawElement>[];
     getNonDeletedFramesLikes(): readonly NonDeleted<ExcalidrawFrameLikeElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
-    getVersionNonce(): number | undefined;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;
     /**
      * A utility method to help with updating all scene elements, with the added
@@ -54,8 +63,8 @@ declare class Scene {
      */
     mapElements(iteratee: (element: ExcalidrawElement) => ExcalidrawElement): boolean;
     replaceAllElements(nextElements: ElementsMapOrArray): void;
-    informMutation(): void;
-    addCallback(cb: SceneStateCallback): SceneStateCallbackRemover;
+    triggerUpdate(): void;
+    onUpdate(cb: SceneStateCallback): SceneStateCallbackRemover;
     destroy(): void;
     insertElementAtIndex(element: ExcalidrawElement, index: number): void;
     insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;

package/dist/excalidraw/scene/Scene.js

@@ -50,6 +50,9 @@ class Scene {
             this.sceneMapById.set(elementKey.id, scene);
         }
     }
+    /**
+     * @deprecated pass down `app.scene` and use it directly
+     */
     static getScene(elementKey) {
         if (isIdKey(elementKey)) {
             return this.sceneMapById.get(elementKey) || null;
@@ -72,7 +75,16 @@ class Scene {
         elements: null,
         cache: new Map(),
     };
-    versionNonce;
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    sceneNonce;
+    getSceneNonce() {
+        return this.sceneNonce;
+    }
     getNonDeletedElementsMap() {
         return this.nonDeletedElementsMap;
     }
@@ -118,9 +130,6 @@ class Scene {
     getElement(id) {
         return this.elementsMap.get(id) || null;
     }
-    getVersionNonce() {
-        return this.versionNonce;
-    }
     getNonDeletedElement(id) {
         const element = this.getElement(id);
         if (element && isNonDeletedElement(element)) {
@@ -161,9 +170,15 @@ class Scene {
             ? nextElements
             : Array.from(nextElements.values());
         const nextFrameLikes = [];
-        if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
-            // throw on invalid indices in test / dev to potentially detect cases were we forgot to sync moved elements
-            validateFractionalIndices(_nextElements.map((x) => x.index));
+        if (import.meta.env.DEV ||
+            import.meta.env.MODE === ENV.TEST ||
+            window?.DEBUG_FRACTIONAL_INDICES) {
+            validateFractionalIndices(_nextElements, {
+                // validate everything
+                includeBoundTextValidation: true,
+                // throw only in dev & test, to remain functional on `DEBUG_FRACTIONAL_INDICES`
+                shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+            });
         }
         this.elements = syncInvalidIndices(_nextElements);
         this.elementsMap.clear();
@@ -179,15 +194,15 @@ class Scene {
         this.nonDeletedElementsMap = nonDeletedElements.elementsMap;
         this.frames = nextFrameLikes;
         this.nonDeletedFramesLikes = getNonDeletedElements(this.frames).elements;
-        this.informMutation();
+        this.triggerUpdate();
     }
-    informMutation() {
-        this.versionNonce = randomInteger();
+    triggerUpdate() {
+        this.sceneNonce = randomInteger();
         for (const callback of Array.from(this.callbacks)) {
             callback();
         }
     }
-    addCallback(cb) {
+    onUpdate(cb) {
         if (this.callbacks.has(cb)) {
             throw new Error();
         }