@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

package/dist/excalidraw/locales/en.json

@@ -87,7 +87,7 @@
         "group": "Group selection",
         "ungroup": "Ungroup selection",
         "collaborators": "Collaborators",
-        "showGrid": "Show grid",
+        "toggleGrid": "Toggle grid",
         "addToLibrary": "Add to library",
         "removeFromLibrary": "Remove from library",
         "libraryLoadingMessage": "Loading library…",
@@ -109,7 +109,9 @@
         "share": "Share",
         "showStroke": "Show stroke color picker",
         "showBackground": "Show background color picker",
+        "showFonts": "Show font picker",
         "toggleTheme": "Toggle light/dark theme",
+        "theme": "Theme",
         "personalLib": "Personal Library",
         "excalidrawLib": "Excalidraw Library",
         "decreaseFontSize": "Decrease font size",
@@ -128,7 +130,7 @@
         },
         "lineEditor": {
             "edit": "Edit line",
-            "exit": "Exit line editor"
+            "editArrow": "Edit arrow"
         },
         "elementLock": {
             "lock": "Lock",
@@ -147,7 +149,9 @@
         "discordChat": "Discord chat",
         "zoomToFitViewport": "Zoom to fit in viewport",
         "zoomToFitSelection": "Zoom to fit selection",
-        "zoomToFit": "Zoom to fit all elements"
+        "zoomToFit": "Zoom to fit all elements",
+        "installPWA": "Install Excalidraw locally (PWA)",
+        "autoResize": "Enable text auto-resizing"
     },
     "library": {
         "noItems": "No items added yet...",
@@ -180,6 +184,7 @@
         "fullScreen": "Full screen",
         "darkMode": "Dark mode",
         "lightMode": "Light mode",
+        "systemMode": "System mode",
         "zenMode": "Zen mode",
         "objectsSnapMode": "Snap to objects",
         "exitZenMode": "Exit zen mode",
@@ -266,6 +271,22 @@
         "mermaidToExcalidraw": "Mermaid to Excalidraw",
         "magicSettings": "AI settings"
     },
+    "element": {
+        "rectangle": "Rectangle",
+        "diamond": "Diamond",
+        "ellipse": "Ellipse",
+        "arrow": "Arrow",
+        "line": "Line",
+        "freedraw": "Freedraw",
+        "text": "Text",
+        "image": "Image",
+        "group": "Group",
+        "frame": "Frame",
+        "magicframe": "Wireframe to code",
+        "embeddable": "Web Embed",
+        "selection": "Selection",
+        "iframe": "IFrame"
+    },
     "headings": {
         "canvasActions": "Canvas actions",
         "selectedShapeActions": "Selected shape actions",
@@ -439,7 +460,10 @@
         "scene": "Scene",
         "selected": "Selected",
         "storage": "Storage",
-        "title": "Stats for nerds",
+        "fullTitle": "Stats & Element properties",
+        "title": "Stats",
+        "generalStats": "General stats",
+        "elementProperties": "Element properties",
         "total": "Total",
         "version": "Version",
         "versionCopy": "Click to copy",
@@ -534,11 +558,19 @@
         "syntax": "Mermaid Syntax",
         "preview": "Preview"
     },
-    "userList": {
-        "search": {
-            "placeholder": "Quick search",
-            "empty": "No users found"
+    "quickSearch": {
+        "placeholder": "Quick search"
+    },
+    "fontList": {
+        "badge": {
+            "old": "old"
         },
+        "sceneFonts": "In this scene",
+        "availableFonts": "Available fonts",
+        "empty": "No fonts found"
+    },
+    "userList": {
+        "empty": "No users found",
         "hint": {
             "text": "Click on user to follow",
             "followStatus": "You're currently following this user",
@@ -560,6 +592,6 @@
             "noMatch": "No matching commands..."
         },
         "itemNotAvailable": "Command is not available...",
-        "shortcutHint": "For Command palette, use {{shortcutOne}} or {{shortcutTwo}}"
+        "shortcutHint": "For Command palette, use {{shortcut}}"
     }
 }

package/dist/excalidraw/math.d.ts

@@ -1,5 +1,5 @@
-import { Point, Zoom } from "./types";
-import { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
+import type { Point, Zoom } from "./types";
+import type { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
 export declare const rotate: (x: number, y: number, cx: number, cy: number, angle: number) => [number, number];
 export declare const rotatePoint: (point: readonly [number, number], center: readonly [number, number], angle: number) => [number, number];
 export declare const adjustXYWithRotation: (sides: {
@@ -28,6 +28,8 @@ export declare const getBezierCurveLength: (element: NonDeleted<ExcalidrawLinear
 export declare const mapIntervalToBezierT: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number], interval: number) => number;
 export declare const arePointsEqual: (p1: readonly [number, number], p2: readonly [number, number]) => boolean;
 export declare const isRightAngle: (angle: number) => boolean;
+export declare const radianToDegree: (r: number) => number;
+export declare const degreeToRadian: (d: number) => number;
 export declare const rangesOverlap: ([a0, a1]: [number, number], [b0, b1]: [number, number]) => boolean;
 export declare const rangeIntersection: (rangeA: [number, number], rangeB: [number, number]) => [number, number] | null;
 export declare const isValueInRange: (value: number, min: number, max: number) => boolean;

package/dist/excalidraw/math.js

@@ -338,6 +338,12 @@ export const isRightAngle = (angle) => {
     // angle, which we can check with modulo after rounding.
     return Math.round((angle / Math.PI) * 10000) % 5000 === 0;
 };
+export const radianToDegree = (r) => {
+    return (r * 180) / Math.PI;
+};
+export const degreeToRadian = (d) => {
+    return (d / 180) * Math.PI;
+};
 // Given two ranges, return if the two ranges overlap with each other
 // e.g. [1, 3] overlaps with [2, 4] while [1, 3] does not overlap with [4, 5]
 export const rangesOverlap = ([a0, a1], [b0, b1]) => {

package/dist/excalidraw/mermaid.d.ts

@@ -0,0 +1,2 @@
+/** heuristically checks whether the text may be a mermaid diagram definition */
+export declare const isMaybeMermaidDefinition: (text: string) => boolean;

package/dist/excalidraw/mermaid.js

@@ -0,0 +1,28 @@
+/** heuristically checks whether the text may be a mermaid diagram definition */
+export const isMaybeMermaidDefinition = (text) => {
+    const chartTypes = [
+        "flowchart",
+        "sequenceDiagram",
+        "classDiagram",
+        "stateDiagram",
+        "stateDiagram-v2",
+        "erDiagram",
+        "journey",
+        "gantt",
+        "pie",
+        "quadrantChart",
+        "requirementDiagram",
+        "gitGraph",
+        "C4Context",
+        "mindmap",
+        "timeline",
+        "zenuml",
+        "sankey",
+        "xychart",
+        "block",
+    ];
+    const re = new RegExp(`^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes
+        .map((x) => `${x}(-beta)?`)
+        .join("|")}\\b`);
+    return re.test(text.trim());
+};

package/dist/excalidraw/points.d.ts

@@ -1,4 +1,4 @@
-import { Point } from "./types";
+import type { Point } from "./types";
 export declare const getSizeFromPoints: (points: readonly Point[]) => {
     width: number;
     height: number;

package/dist/excalidraw/queue.d.ts

@@ -1,4 +1,4 @@
-import { MaybePromise } from "./utility-types";
+import type { MaybePromise } from "./utility-types";
 type Job<T, TArgs extends unknown[]> = (...args: TArgs) => MaybePromise<T>;
 export declare class Queue {
     private jobs;

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

@@ -1,5 +1,5 @@
-import { StaticCanvasAppState, AppState } from "../types";
-import { StaticCanvasRenderConfig } from "../scene/types";
+import type { StaticCanvasAppState, AppState } from "../types";
+import type { StaticCanvasRenderConfig } from "../scene/types";
 export declare const fillCircle: (context: CanvasRenderingContext2D, cx: number, cy: number, radius: number, stroke?: boolean) => void;
 export declare const getNormalizedCanvasDimensions: (canvas: HTMLCanvasElement, scale: number) => [number, number];
 export declare const bootstrapCanvas: ({ canvas, scale, normalizedWidth, normalizedHeight, theme, isExporting, viewBackgroundColor, }: {

package/dist/excalidraw/renderer/helpers.js

@@ -1,4 +1,4 @@
-import { THEME_FILTER } from "../constants";
+import { THEME, THEME_FILTER } from "../constants";
 export const fillCircle = (context, cx, cy, radius, stroke = true) => {
     context.beginPath();
     context.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -15,7 +15,7 @@ export const bootstrapCanvas = ({ canvas, scale, normalizedWidth, normalizedHeig
     const context = canvas.getContext("2d");
     context.setTransform(1, 0, 0, 1, 0, 0);
     context.scale(scale, scale);
-    if (isExporting && theme === "dark") {
+    if (isExporting && theme === THEME.DARK) {
         context.filter = THEME_FILTER;
     }
     // Paint background

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

@@ -1,4 +1,4 @@
-import { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
+import type { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
 /** throttled to animation framerate */
 export declare const renderInteractiveSceneThrottled: {
     (config: InteractiveSceneRenderConfig): void;
@@ -9,7 +9,7 @@ export declare const renderInteractiveSceneThrottled: {
  * Interactive scene is the ui-canvas where we render bounding boxes, selections
  * and other ui stuff.
  */
-export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }: InteractiveSceneRenderConfig) => {
+export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
     atLeastOneVisibleElement: boolean;
     elementsMap: RenderableElementsMap;
     scrollBars?: undefined;

package/dist/excalidraw/renderer/interactiveScene.js

@@ -1,18 +1,18 @@
-import { getElementAbsoluteCoords, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, getCommonBounds, } from "../element";
+import { getElementAbsoluteCoords, getTransformHandlesFromCoords, getTransformHandles, getCommonBounds, } from "../element";
 import { roundRect } from "../renderer/roundRect";
 import { getScrollBars, SCROLLBAR_COLOR, SCROLLBAR_WIDTH, } from "../scene/scrollbars";
 import { renderSelectionElement } from "../renderer/renderElement";
 import { getClientColor, renderRemoteCursors } from "../clients";
 import { isSelectedViaGroup, getSelectedGroupIds, getElementsInGroup, selectGroupsFromGivenElements, } from "../groups";
-import { OMIT_SIDES_FOR_FRAME, shouldShowBoundingBox, } from "../element/transformHandles";
+import { getOmitSidesForDevice, shouldShowBoundingBox, } from "../element/transformHandles";
 import { arrayToMap, throttleRAF } from "../utils";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
 import { renderSnaps } from "../renderer/renderSnaps";
-import { maxBindingGap } from "../element/collision";
+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 { isFrameLikeElement, isLinearElement, isTextElement, } from "../element/typeChecks";
 const renderLinearElementPointHighlight = (context, appState, elementsMap) => {
     const { elementId, hoverPointIndex } = appState.selectedLinearElement;
     if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
@@ -124,10 +124,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;
@@ -264,7 +265,23 @@ const renderTransformHandles = (context, renderConfig, appState, transformHandle
         }
     });
 };
-const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, }) => {
+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 +312,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)
@@ -403,8 +426,12 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
         context.translate(appState.scrollX, appState.scrollY);
         if (selectedElements.length === 1) {
             context.fillStyle = oc.white;
-            const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse");
-            if (!appState.viewModeEnabled && showBoundingBox) {
+            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 &&
+                // do not show transform handles when text is being edited
+                !isTextElement(appState.editingElement)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
         }
@@ -421,8 +448,8 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
             context.lineWidth = lineWidth;
             context.setLineDash(initialLineDash);
             const transformHandles = getTransformHandlesFromCoords([x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2], 0, appState.zoom, "mouse", isFrameSelected
-                ? OMIT_SIDES_FOR_FRAME
-                : OMIT_SIDES_FOR_MULTIPLE_ELEMENTS);
+                ? { ...getOmitSidesForDevice(device), rotation: true }
+                : getOmitSidesForDevice(device));
             if (selectedElements.some((element) => !element.locked)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, 0);
             }

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

@@ -4,12 +4,13 @@ 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, ELEMENT_READY_TO_ERASE_OPACITY, FRAME_STYLE, MIME_TYPES, } from "../constants";
+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
@@ -19,12 +20,21 @@ const defaultAppState = getDefaultAppState();
 const isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) &&
     !renderConfig.imageCache.has(element.fileId);
 const shouldResetImageFilter = (element, renderConfig, appState) => {
-    return (appState.theme === "dark" &&
+    return (appState.theme === THEME.DARK &&
         isInitializedImageElement(element) &&
         !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();
 };
@@ -352,7 +372,7 @@ export const renderElement = (element, elementsMap, allElementsMap, rc, context,
                 // TODO change later to only affect AI frames
                 if (isMagicFrameElement(element)) {
                     context.strokeStyle =
-                        appState.theme === "light" ? "#7affd7" : "#1d8264";
+                        appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
                 }
                 if (FRAME_STYLE.radius && context.roundRect) {
                     context.beginPath();
@@ -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;