@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

package/dist/excalidraw/fractionalIndex.js

@@ -1,19 +1,22 @@
 import { generateNKeysBetween } from "fractional-indexing";
 import { mutateElement } from "./element/mutateElement";
 import { InvalidFractionalIndexError } from "./errors";
+import { hasBoundTextElement } from "./element/typeChecks";
+import { getBoundTextElement } from "./element/textElement";
+import { arrayToMap } from "./utils";
 /**
  * Envisioned relation between array order and fractional indices:
  *
  * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.
- * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure
+ * - it's undesirable to perform reorder for each related operation, therefore it's necessary to cache the order defined by fractional indices into an ordered data structure
  * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)
  * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.
  * - it's necessary to always keep the fractional indices in sync with the array order
  * - elements with invalid indices should be detected and synced, without altering the already valid indices
  *
  * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.
- * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs
- * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo
+ * - as the fractional indices are encoded as part of the elements, it opens up possibilities for incremental-like APIs
+ * - re-order based on fractional indices should be part of (multiplayer) operations such as reconciliation & undo/redo
  * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,
  *   as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order
  */
@@ -22,12 +25,38 @@ import { InvalidFractionalIndexError } from "./errors";
  *
  * @throws `InvalidFractionalIndexError` if invalid index is detected.
  */
-export const validateFractionalIndices = (indices) => {
+export const validateFractionalIndices = (elements, { shouldThrow = false, includeBoundTextValidation = false, reconciliationContext, }) => {
+    const errorMessages = [];
+    const stringifyElement = (element) => `${element?.index}:${element?.id}:${element?.type}:${element?.isDeleted}:${element?.version}:${element?.versionNonce}`;
+    const indices = elements.map((x) => x.index);
     for (const [i, index] of indices.entries()) {
         const predecessorIndex = indices[i - 1];
         const successorIndex = indices[i + 1];
         if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {
-            throw new InvalidFractionalIndexError(`Fractional indices invariant for element has been compromised - ["${predecessorIndex}", "${index}", "${successorIndex}"] [predecessor, current, successor]`);
+            errorMessages.push(`Fractional indices invariant has been compromised: "${stringifyElement(elements[i - 1])}", "${stringifyElement(elements[i])}", "${stringifyElement(elements[i + 1])}"`);
+        }
+        // disabled by default, as we don't fix it
+        if (includeBoundTextValidation && hasBoundTextElement(elements[i])) {
+            const container = elements[i];
+            const text = getBoundTextElement(container, arrayToMap(elements));
+            if (text && text.index <= container.index) {
+                errorMessages.push(`Fractional indices invariant for bound elements has been compromised: "${stringifyElement(text)}", "${stringifyElement(container)}"`);
+            }
+        }
+    }
+    if (errorMessages.length) {
+        const error = new InvalidFractionalIndexError();
+        const additionalContext = [];
+        if (reconciliationContext) {
+            additionalContext.push("Additional reconciliation context:");
+            additionalContext.push(reconciliationContext.localElements.map((x) => stringifyElement(x)));
+            additionalContext.push(reconciliationContext.remoteElements.map((x) => stringifyElement(x)));
+        }
+        // report just once and with the stacktrace
+        console.error(errorMessages.join("\n\n"), error.stack, elements.map((x) => stringifyElement(x)), ...additionalContext);
+        if (shouldThrow) {
+            // if enabled, gather all the errors first, throw once
+            throw error;
         }
     }
 };
@@ -62,8 +91,11 @@ export const syncMovedIndices = (elements, movedElements) => {
         const indicesGroups = getMovedIndicesGroups(elements, movedElements);
         // try generatating indices, throws on invalid movedElements
         const elementsUpdates = generateIndices(elements, indicesGroups);
+        const elementsCandidates = elements.map((x) => elementsUpdates.has(x) ? { ...x, ...elementsUpdates.get(x) } : x);
         // ensure next indices are valid before mutation, throws on invalid ones
-        validateFractionalIndices(elements.map((x) => elementsUpdates.get(x)?.index || x.index));
+        validateFractionalIndices(elementsCandidates, 
+        // we don't autofix invalid bound text indices, hence don't include it in the validation
+        { includeBoundTextValidation: false, shouldThrow: true });
         // split mutation so we don't end up in an incosistent state
         for (const [element, update] of elementsUpdates) {
             mutateElement(element, update, false);

package/dist/excalidraw/frame.d.ts

@@ -59,5 +59,5 @@ export declare const omitGroupsContainingFrameLikes: (allElements: ElementsMapOr
  */
 export declare const getTargetFrame: (element: ExcalidrawElement, elementsMap: ElementsMap, appState: StaticCanvasAppState) => import("./element/types").ExcalidrawFrameElement | import("./element/types").ExcalidrawMagicFrameElement | null;
 export declare const isElementInFrame: (element: ExcalidrawElement, allElementsMap: ElementsMap, appState: StaticCanvasAppState) => boolean;
-export declare const getFrameLikeTitle: (element: ExcalidrawFrameLikeElement, frameIdx: number) => string;
+export declare const getFrameLikeTitle: (element: ExcalidrawFrameLikeElement) => string;
 export declare const getElementsOverlappingFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => NonDeletedExcalidrawElement[];

package/dist/excalidraw/frame.js

@@ -426,12 +426,12 @@ export const isElementInFrame = (element, allElementsMap, appState) => {
     }
     return false;
 };
-export const getFrameLikeTitle = (element, frameIdx) => {
+export const getFrameLikeTitle = (element) => {
     // TODO name frames "AI" only if specific to AI frames
     return element.name === null
         ? isFrameElement(element)
-            ? `Frame ${frameIdx}`
-            : `AI Frame $${frameIdx}`
+            ? "Frame"
+            : "AI Frame"
         : element.name;
 };
 export const getElementsOverlappingFrame = (elements, frame) => {

package/dist/excalidraw/history.d.ts

@@ -1,6 +1,7 @@
 import type { AppStateChange, ElementsChange } from "./change";
 import type { SceneElementsMap } from "./element/types";
 import { Emitter } from "./emitter";
+import type Scene from "./scene/Scene";
 import type { Snapshot } from "./store";
 import type { AppState } from "./types";
 export declare class HistoryChangedEvent {
@@ -19,8 +20,8 @@ export declare class History {
      * Record a local change which will go into the history
      */
     record(elementsChange: ElementsChange, appStateChange: AppStateChange): void;
-    undo(elements: SceneElementsMap, appState: AppState, snapshot: Readonly<Snapshot>): void | [SceneElementsMap, AppState];
-    redo(elements: SceneElementsMap, appState: AppState, snapshot: Readonly<Snapshot>): void | [SceneElementsMap, AppState];
+    undo(elements: SceneElementsMap, appState: AppState, snapshot: Readonly<Snapshot>, scene: Scene): void | [SceneElementsMap, AppState];
+    redo(elements: SceneElementsMap, appState: AppState, snapshot: Readonly<Snapshot>, scene: Scene): void | [SceneElementsMap, AppState];
     private perform;
     private static pop;
     private static push;
@@ -31,7 +32,7 @@ export declare class HistoryEntry {
     private constructor();
     static create(appStateChange: AppStateChange, elementsChange: ElementsChange): HistoryEntry;
     inverse(): HistoryEntry;
-    applyTo(elements: SceneElementsMap, appState: AppState, snapshot: Readonly<Snapshot>): [SceneElementsMap, AppState, boolean];
+    applyTo(elements: SceneElementsMap, appState: AppState, snapshot: Readonly<Snapshot>, scene: Scene): [SceneElementsMap, AppState, boolean];
     /**
      * Apply latest (remote) changes to the history entry, creates new instance of `HistoryEntry`.
      */

package/dist/excalidraw/history.js

@@ -38,13 +38,13 @@ export class History {
             this.onHistoryChangedEmitter.trigger(new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty));
         }
     }
-    undo(elements, appState, snapshot) {
-        return this.perform(elements, appState, snapshot, () => History.pop(this.undoStack), (entry) => History.push(this.redoStack, entry, elements));
+    undo(elements, appState, snapshot, scene) {
+        return this.perform(elements, appState, snapshot, () => History.pop(this.undoStack), (entry) => History.push(this.redoStack, entry, elements), scene);
     }
-    redo(elements, appState, snapshot) {
-        return this.perform(elements, appState, snapshot, () => History.pop(this.redoStack), (entry) => History.push(this.undoStack, entry, elements));
+    redo(elements, appState, snapshot, scene) {
+        return this.perform(elements, appState, snapshot, () => History.pop(this.redoStack), (entry) => History.push(this.undoStack, entry, elements), scene);
     }
-    perform(elements, appState, snapshot, pop, push) {
+    perform(elements, appState, snapshot, pop, push, scene) {
         try {
             let historyEntry = pop();
             if (historyEntry === null) {
@@ -57,7 +57,7 @@ export class History {
             while (historyEntry) {
                 try {
                     [nextElements, nextAppState, containsVisibleChange] =
-                        historyEntry.applyTo(nextElements, nextAppState, snapshot);
+                        historyEntry.applyTo(nextElements, nextAppState, snapshot, scene);
                 }
                 finally {
                     // make sure to always push / pop, even if the increment is corrupted
@@ -104,8 +104,8 @@ export class HistoryEntry {
     inverse() {
         return new HistoryEntry(this.appStateChange.inverse(), this.elementsChange.inverse());
     }
-    applyTo(elements, appState, snapshot) {
-        const [nextElements, elementsContainVisibleChange] = this.elementsChange.applyTo(elements, snapshot.elements);
+    applyTo(elements, appState, snapshot, scene) {
+        const [nextElements, elementsContainVisibleChange] = this.elementsChange.applyTo(elements, snapshot.elements, scene);
         const [nextAppState, appStateContainsVisibleChange] = this.appStateChange.applyTo(appState, nextElements);
         const appliedVisibleChanges = elementsContainVisibleChange || appStateContainsVisibleChange;
         return [nextElements, nextAppState, appliedVisibleChanges];

package/dist/excalidraw/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import "./css/app.scss";
 import "./css/styles.scss";
-import "../../public/fonts/fonts.css";
+import "./fonts/assets/fonts.css";
 import type { ExcalidrawProps } from "./types";
 import Footer from "./components/footer/FooterCenter";
 import MainMenu from "./components/main-menu/MainMenu";

package/dist/excalidraw/index.js

@@ -5,7 +5,7 @@ import App from "./components/App";
 import { isShallowEqual } from "./utils";
 import "./css/app.scss";
 import "./css/styles.scss";
-import "../../public/fonts/fonts.css";
+import "./fonts/assets/fonts.css";
 import polyfill from "./polyfill";
 import { defaultLang } from "./i18n";
 import { DEFAULT_UI_OPTIONS } from "./constants";
@@ -17,7 +17,7 @@ import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
 import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
 polyfill();
 const ExcalidrawBase = (props) => {
-    const { onChange, initialData, excalidrawAPI, isCollaborating = false, onPointerUpdate, renderTopRightUI, langCode = defaultLang.code, viewModeEnabled, zenModeEnabled, gridModeEnabled, libraryReturnUrl, theme, name, renderCustomStats, onPaste, detectScroll = true, handleKeyboardGlobally = false, onLibraryChange, autoFocus = false, generateIdForFile, onLinkOpen, onPointerDown, onPointerUp, onScrollChange, children, validateEmbeddable, renderEmbeddable, aiEnabled, } = props;
+    const { onChange, initialData, excalidrawAPI, isCollaborating = false, onPointerUpdate, renderTopRightUI, langCode = defaultLang.code, viewModeEnabled, zenModeEnabled, gridModeEnabled, libraryReturnUrl, theme, name, renderCustomStats, onPaste, detectScroll = true, handleKeyboardGlobally = false, onLibraryChange, autoFocus = false, generateIdForFile, onLinkOpen, onPointerDown, onPointerUp, onScrollChange, children, validateEmbeddable, renderEmbeddable, aiEnabled, showDeprecatedFonts, } = props;
     const canvasActions = props.UIOptions?.canvasActions;
     // FIXME normalize/set defaults in parent component so that the memo resolver
     // compares the same values
@@ -60,7 +60,7 @@ const ExcalidrawBase = (props) => {
             document.removeEventListener("touchmove", handleTouchMove);
         };
     }, []);
-    return (_jsx(Provider, { unstable_createStore: () => jotaiStore, scope: jotaiScope, children: _jsx(InitializeApp, { langCode: langCode, theme: theme, children: _jsx(App, { onChange: onChange, initialData: initialData, excalidrawAPI: excalidrawAPI, isCollaborating: isCollaborating, onPointerUpdate: onPointerUpdate, renderTopRightUI: renderTopRightUI, langCode: langCode, viewModeEnabled: viewModeEnabled, zenModeEnabled: zenModeEnabled, gridModeEnabled: gridModeEnabled, libraryReturnUrl: libraryReturnUrl, theme: theme, name: name, renderCustomStats: renderCustomStats, UIOptions: UIOptions, onPaste: onPaste, detectScroll: detectScroll, handleKeyboardGlobally: handleKeyboardGlobally, onLibraryChange: onLibraryChange, autoFocus: autoFocus, generateIdForFile: generateIdForFile, onLinkOpen: onLinkOpen, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onScrollChange: onScrollChange, validateEmbeddable: validateEmbeddable, renderEmbeddable: renderEmbeddable, aiEnabled: aiEnabled !== false, children: children }) }) }));
+    return (_jsx(Provider, { unstable_createStore: () => jotaiStore, scope: jotaiScope, children: _jsx(InitializeApp, { langCode: langCode, theme: theme, children: _jsx(App, { onChange: onChange, initialData: initialData, excalidrawAPI: excalidrawAPI, isCollaborating: isCollaborating, onPointerUpdate: onPointerUpdate, renderTopRightUI: renderTopRightUI, langCode: langCode, viewModeEnabled: viewModeEnabled, zenModeEnabled: zenModeEnabled, gridModeEnabled: gridModeEnabled, libraryReturnUrl: libraryReturnUrl, theme: theme, name: name, renderCustomStats: renderCustomStats, UIOptions: UIOptions, onPaste: onPaste, detectScroll: detectScroll, handleKeyboardGlobally: handleKeyboardGlobally, onLibraryChange: onLibraryChange, autoFocus: autoFocus, generateIdForFile: generateIdForFile, onLinkOpen: onLinkOpen, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onScrollChange: onScrollChange, validateEmbeddable: validateEmbeddable, renderEmbeddable: renderEmbeddable, aiEnabled: aiEnabled !== false, showDeprecatedFonts: showDeprecatedFonts, children: children }) }) }));
 };
 const areEqual = (prevProps, nextProps) => {
     // short-circuit early

package/dist/excalidraw/locales/en.json

@@ -46,6 +46,10 @@
         "arrowhead_triangle_outline": "Triangle (outline)",
         "arrowhead_diamond": "Diamond",
         "arrowhead_diamond_outline": "Diamond (outline)",
+        "arrowtypes": "Arrow type",
+        "arrowtype_sharp": "Sharp arrow",
+        "arrowtype_round": "Curved arrow",
+        "arrowtype_elbowed": "Elbow arrow",
         "fontSize": "Font size",
         "fontFamily": "Font family",
         "addWatermark": "Add \"Made with Excalidraw\"",
@@ -109,6 +113,7 @@
         "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",
@@ -294,6 +299,7 @@
     "hints": {
         "canvasPanning": "To move canvas, hold mouse wheel or spacebar while dragging, or use the hand tool",
         "linearElement": "Click to start multiple points, drag for single line",
+        "arrowTool": "Click to start multiple points, drag for single line. Press {{arrowShortcut}} again to change arrow type.",
         "freeDraw": "Click and drag, release when you're finished",
         "text": "Tip: you can also add text by double-clicking anywhere with the selection tool",
         "embeddable": "Click-drag to create a website embed",
@@ -557,11 +563,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",

package/dist/excalidraw/math.d.ts

@@ -1,5 +1,6 @@
 import type { Point, Zoom } from "./types";
 import type { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
+import type { Bounds } from "./element/bounds";
 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: {
@@ -14,6 +15,7 @@ export declare const getPointOnAPath: (point: readonly [number, number], path: P
     segment: number;
 } | null;
 export declare const distance2d: (x1: number, y1: number, x2: number, y2: number) => number;
+export declare const distanceSq2d: (p1: readonly [number, number], p2: readonly [number, number]) => number;
 export declare const centerPoint: (a: readonly [number, number], b: readonly [number, number]) => readonly [number, number];
 export declare const isPathALoop: (points: ExcalidrawLinearElement["points"], zoomValue?: Zoom["value"]) => boolean;
 export declare const isPointInPolygon: (points: Point[], x: number, y: number) => boolean;
@@ -33,3 +35,44 @@ 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;
+export declare const translatePoint: (p: readonly [number, number], v: import("../utils/geometry/shape").Point) => readonly [number, number];
+export declare const scaleVector: (v: import("../utils/geometry/shape").Point, scalar: number) => import("../utils/geometry/shape").Point;
+export declare const pointToVector: (p: readonly [number, number], origin?: readonly [number, number]) => import("../utils/geometry/shape").Point;
+export declare const scalePointFromOrigin: (p: readonly [number, number], mid: readonly [number, number], multiplier: number) => readonly [number, number];
+export declare const PointInTriangle: (pt: readonly [number, number], v1: readonly [number, number], v2: readonly [number, number], v3: readonly [number, number]) => boolean;
+export declare const magnitudeSq: (vector: import("../utils/geometry/shape").Point) => number;
+export declare const magnitude: (vector: import("../utils/geometry/shape").Point) => number;
+export declare const normalize: (vector: import("../utils/geometry/shape").Point) => import("../utils/geometry/shape").Point;
+export declare const addVectors: (vec1: readonly [number, number], vec2: readonly [number, number]) => import("../utils/geometry/shape").Point;
+export declare const subtractVectors: (vec1: readonly [number, number], vec2: readonly [number, number]) => import("../utils/geometry/shape").Point;
+export declare const pointInsideBounds: (p: readonly [number, number], bounds: Bounds) => boolean;
+/**
+ * Get the axis-aligned bounding box for a given element
+ */
+export declare const aabbForElement: (element: Readonly<ExcalidrawElement>, offset?: [number, number, number, number]) => Bounds;
+type PolarCoords = [number, number];
+/**
+ * Return the polar coordinates for the given carthesian point represented by
+ * (x, y) for the center point 0,0 where the first number returned is the radius,
+ * the second is the angle in radians.
+ */
+export declare const carthesian2Polar: ([x, y]: readonly [number, number]) => PolarCoords;
+/**
+ * Angles are in radians and centered on 0, 0. Zero radians on a 1 radius circle
+ * corresponds to (1, 0) carthesian coordinates (point), i.e. to the "right".
+ */
+type SymmetricArc = {
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+};
+/**
+ * Determines if a carthesian point lies on a symmetric arc, i.e. an arc which
+ * is part of a circle contour centered on 0, 0.
+ */
+export declare const isPointOnSymmetricArc: ({ radius: arcRadius, startAngle, endAngle }: SymmetricArc, point: readonly [number, number]) => boolean;
+export declare const getCenterForBounds: (bounds: Bounds) => readonly [number, number];
+export declare const getCenterForElement: (element: ExcalidrawElement) => readonly [number, number];
+export declare const aabbsOverlapping: (a: Bounds, b: Bounds) => boolean;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export {};

package/dist/excalidraw/math.js

@@ -102,6 +102,11 @@ export const distance2d = (x1, y1, x2, y2) => {
     const yd = y2 - y1;
     return Math.hypot(xd, yd);
 };
+export const distanceSq2d = (p1, p2) => {
+    const xd = p2[0] - p1[0];
+    const yd = p2[1] - p1[1];
+    return xd * xd + yd * yd;
+};
 export const centerPoint = (a, b) => {
     return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
 };
@@ -368,3 +373,108 @@ export const rangeIntersection = (rangeA, rangeB) => {
 export const isValueInRange = (value, min, max) => {
     return value >= min && value <= max;
 };
+export const translatePoint = (p, v) => [
+    p[0] + v[0],
+    p[1] + v[1],
+];
+export const scaleVector = (v, scalar) => [
+    v[0] * scalar,
+    v[1] * scalar,
+];
+export const pointToVector = (p, origin = [0, 0]) => [
+    p[0] - origin[0],
+    p[1] - origin[1],
+];
+export const scalePointFromOrigin = (p, mid, multiplier) => translatePoint(mid, scaleVector(pointToVector(p, mid), multiplier));
+const triangleSign = (p1, p2, p3) => (p1[0] - p3[0]) * (p2[1] - p3[1]) - (p2[0] - p3[0]) * (p1[1] - p3[1]);
+export const PointInTriangle = (pt, v1, v2, v3) => {
+    const d1 = triangleSign(pt, v1, v2);
+    const d2 = triangleSign(pt, v2, v3);
+    const d3 = triangleSign(pt, v3, v1);
+    const has_neg = d1 < 0 || d2 < 0 || d3 < 0;
+    const has_pos = d1 > 0 || d2 > 0 || d3 > 0;
+    return !(has_neg && has_pos);
+};
+export const magnitudeSq = (vector) => vector[0] * vector[0] + vector[1] * vector[1];
+export const magnitude = (vector) => Math.sqrt(magnitudeSq(vector));
+export const normalize = (vector) => {
+    const m = magnitude(vector);
+    return [vector[0] / m, vector[1] / m];
+};
+export const addVectors = (vec1, vec2) => [vec1[0] + vec2[0], vec1[1] + vec2[1]];
+export const subtractVectors = (vec1, vec2) => [vec1[0] - vec2[0], vec1[1] - vec2[1]];
+export const pointInsideBounds = (p, bounds) => p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
+/**
+ * Get the axis-aligned bounding box for a given element
+ */
+export const aabbForElement = (element, offset) => {
+    const bbox = {
+        minX: element.x,
+        minY: element.y,
+        maxX: element.x + element.width,
+        maxY: element.y + element.height,
+        midX: element.x + element.width / 2,
+        midY: element.y + element.height / 2,
+    };
+    const center = [bbox.midX, bbox.midY];
+    const [topLeftX, topLeftY] = rotatePoint([bbox.minX, bbox.minY], center, element.angle);
+    const [topRightX, topRightY] = rotatePoint([bbox.maxX, bbox.minY], center, element.angle);
+    const [bottomRightX, bottomRightY] = rotatePoint([bbox.maxX, bbox.maxY], center, element.angle);
+    const [bottomLeftX, bottomLeftY] = rotatePoint([bbox.minX, bbox.maxY], center, element.angle);
+    const bounds = [
+        Math.min(topLeftX, topRightX, bottomRightX, bottomLeftX),
+        Math.min(topLeftY, topRightY, bottomRightY, bottomLeftY),
+        Math.max(topLeftX, topRightX, bottomRightX, bottomLeftX),
+        Math.max(topLeftY, topRightY, bottomRightY, bottomLeftY),
+    ];
+    if (offset) {
+        const [topOffset, rightOffset, downOffset, leftOffset] = offset;
+        return [
+            bounds[0] - leftOffset,
+            bounds[1] - topOffset,
+            bounds[2] + rightOffset,
+            bounds[3] + downOffset,
+        ];
+    }
+    return bounds;
+};
+/**
+ * Return the polar coordinates for the given carthesian point represented by
+ * (x, y) for the center point 0,0 where the first number returned is the radius,
+ * the second is the angle in radians.
+ */
+export const carthesian2Polar = ([x, y]) => [
+    Math.hypot(x, y),
+    Math.atan2(y, x),
+];
+/**
+ * Determines if a carthesian point lies on a symmetric arc, i.e. an arc which
+ * is part of a circle contour centered on 0, 0.
+ */
+export const isPointOnSymmetricArc = ({ radius: arcRadius, startAngle, endAngle }, point) => {
+    const [radius, angle] = carthesian2Polar(point);
+    return startAngle < endAngle
+        ? Math.abs(radius - arcRadius) < 0.0000001 &&
+            startAngle <= angle &&
+            endAngle >= angle
+        : startAngle <= angle || endAngle >= angle;
+};
+export const getCenterForBounds = (bounds) => [
+    bounds[0] + (bounds[2] - bounds[0]) / 2,
+    bounds[1] + (bounds[3] - bounds[1]) / 2,
+];
+export const getCenterForElement = (element) => [
+    element.x + element.width / 2,
+    element.y + element.height / 2,
+];
+export const aabbsOverlapping = (a, b) => pointInsideBounds([a[0], a[1]], b) ||
+    pointInsideBounds([a[2], a[1]], b) ||
+    pointInsideBounds([a[2], a[3]], b) ||
+    pointInsideBounds([a[0], a[3]], b) ||
+    pointInsideBounds([b[0], b[1]], a) ||
+    pointInsideBounds([b[2], b[1]], a) ||
+    pointInsideBounds([b[2], b[3]], a) ||
+    pointInsideBounds([b[0], b[3]], a);
+export const clamp = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};

package/dist/excalidraw/mermaid.js

@@ -2,6 +2,7 @@
 export const isMaybeMermaidDefinition = (text) => {
     const chartTypes = [
         "flowchart",
+        "graph",
         "sequenceDiagram",
         "classDiagram",
         "stateDiagram",
@@ -21,8 +22,8 @@ export const isMaybeMermaidDefinition = (text) => {
         "xychart",
         "block",
     ];
-    const re = new RegExp(`^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes
-        .map((x) => `${x}(-beta)?`)
-        .join("|")}\\b`);
+    const re = new RegExp(`^(?:%%{.*?}%%[\\s\\n]*)?\\b(?:${chartTypes
+        .map((x) => `\\s*${x}(-beta)?`)
+        .join("|")})\\b`);
     return re.test(text.trim());
 };

package/dist/excalidraw/renderer/interactiveScene.js

@@ -12,7 +12,8 @@ import { maxBindingGap } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
 import oc from "open-color";
-import { isFrameLikeElement, isLinearElement, isTextElement, } 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);
@@ -211,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);
     });
@@ -346,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
@@ -366,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);

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

@@ -9,11 +9,13 @@ 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>;