@excalidraw/excalidraw 0.17.1-d2f67e6 → 0.17.1-e63dd02

package/dist/excalidraw/actions/actionToggleZenMode.d.ts

@@ -64,7 +64,9 @@ export declare const actionToggleZenMode: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -77,7 +79,7 @@ export declare const actionToggleZenMode: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;

package/dist/excalidraw/actions/types.d.ts

@@ -15,7 +15,7 @@ export type ActionResult = {
 type ActionFn = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
-export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize" | "elementStats";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize" | "elementStats";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/dist/excalidraw/analytics.js

@@ -1,16 +1,18 @@
 // place here categories that you want to track. We want to track just a
 // small subset of categories at a given time.
-const ALLOWED_CATEGORIES_TO_TRACK = ["ai", "command_palette"];
+const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette"]);
 export const trackEvent = (category, action, label, value) => {
     try {
-        // prettier-ignore
-        if (typeof window === "undefined"
-            || import.meta.env.VITE_WORKER_ID
-            // comment out to debug locally
-            || import.meta.env.PROD) {
+        if (typeof window === "undefined" ||
+            import.meta.env.VITE_WORKER_ID ||
+            import.meta.env.VITE_APP_ENABLE_TRACKING !== "true") {
             return;
         }
-        if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {
+        if (!ALLOWED_CATEGORIES_TO_TRACK.has(category)) {
+            return;
+        }
+        if (import.meta.env.DEV) {
+            // comment out to debug in dev
             return;
         }
         if (!import.meta.env.PROD) {

package/dist/excalidraw/appState.d.ts

@@ -5,6 +5,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     objectsSnapModeEnabled?: boolean | undefined;
     theme?: import("./element/types").Theme | undefined;
     name?: string | null | undefined;
+    currentItemArrowType?: "sharp" | "round" | "elbow" | undefined;
     showWelcomeScreen?: boolean | undefined;
     activeTool?: ({
         lastActiveTool: import("./types").ActiveTool | null;

package/dist/excalidraw/appState.js

@@ -1,5 +1,5 @@
 import { COLOR_PALETTE } from "./colors";
-import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, EXPORT_SCALES, STATS_PANELS, THEME, } from "./constants";
+import { ARROW_TYPE, DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, EXPORT_SCALES, STATS_PANELS, THEME, } from "./constants";
 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
     ? devicePixelRatio
     : 1;
@@ -19,9 +19,11 @@ export const getDefaultAppState = () => {
         currentItemStartArrowhead: null,
         currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
         currentItemRoundness: "round",
+        currentItemArrowType: ARROW_TYPE.round,
         currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
         currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
         currentItemTextAlign: DEFAULT_TEXT_ALIGN,
+        currentHoveredFontFamily: null,
         cursorButton: "up",
         activeEmbeddable: null,
         draggingElement: null,
@@ -116,6 +118,11 @@ const APP_STATE_STORAGE_CONF = ((config) => config)({
         export: false,
         server: false,
     },
+    currentItemArrowType: {
+        browser: true,
+        export: false,
+        server: false,
+    },
     currentItemOpacity: { browser: true, export: false, server: false },
     currentItemRoughness: { browser: true, export: false, server: false },
     currentItemStartArrowhead: { browser: true, export: false, server: false },
@@ -123,6 +130,7 @@ const APP_STATE_STORAGE_CONF = ((config) => config)({
     currentItemStrokeStyle: { browser: true, export: false, server: false },
     currentItemStrokeWidth: { browser: true, export: false, server: false },
     currentItemTextAlign: { browser: true, export: false, server: false },
+    currentHoveredFontFamily: { browser: false, export: false, server: false },
     cursorButton: { browser: true, export: false, server: false },
     activeEmbeddable: { browser: false, export: false, server: false },
     draggingElement: { browser: false, export: false, server: false },

package/dist/excalidraw/binaryheap.d.ts

@@ -0,0 +1,12 @@
+export default class BinaryHeap<T> {
+    private scoreFunction;
+    private content;
+    constructor(scoreFunction: (node: T) => number);
+    sinkDown(idx: number): void;
+    bubbleUp(idx: number): void;
+    push(node: T): void;
+    pop(): T | null;
+    remove(node: T): void;
+    size(): number;
+    rescoreElement(node: T): void;
+}

package/dist/excalidraw/binaryheap.js

@@ -0,0 +1,93 @@
+export default class BinaryHeap {
+    scoreFunction;
+    content = [];
+    constructor(scoreFunction) {
+        this.scoreFunction = scoreFunction;
+    }
+    sinkDown(idx) {
+        const node = this.content[idx];
+        while (idx > 0) {
+            const parentN = ((idx + 1) >> 1) - 1;
+            const parent = this.content[parentN];
+            if (this.scoreFunction(node) < this.scoreFunction(parent)) {
+                this.content[parentN] = node;
+                this.content[idx] = parent;
+                idx = parentN; // TODO: Optimize
+            }
+            else {
+                break;
+            }
+        }
+    }
+    bubbleUp(idx) {
+        const length = this.content.length;
+        const node = this.content[idx];
+        const score = this.scoreFunction(node);
+        while (true) {
+            const child2N = (idx + 1) << 1;
+            const child1N = child2N - 1;
+            let swap = null;
+            let child1Score = 0;
+            if (child1N < length) {
+                const child1 = this.content[child1N];
+                child1Score = this.scoreFunction(child1);
+                if (child1Score < score) {
+                    swap = child1N;
+                }
+            }
+            if (child2N < length) {
+                const child2 = this.content[child2N];
+                const child2Score = this.scoreFunction(child2);
+                if (child2Score < (swap === null ? score : child1Score)) {
+                    swap = child2N;
+                }
+            }
+            if (swap !== null) {
+                this.content[idx] = this.content[swap];
+                this.content[swap] = node;
+                idx = swap; // TODO: Optimize
+            }
+            else {
+                break;
+            }
+        }
+    }
+    push(node) {
+        this.content.push(node);
+        this.sinkDown(this.content.length - 1);
+    }
+    pop() {
+        if (this.content.length === 0) {
+            return null;
+        }
+        const result = this.content[0];
+        const end = this.content.pop();
+        if (this.content.length > 0) {
+            this.content[0] = end;
+            this.bubbleUp(0);
+        }
+        return result;
+    }
+    remove(node) {
+        if (this.content.length === 0) {
+            return;
+        }
+        const i = this.content.indexOf(node);
+        const end = this.content.pop();
+        if (i < this.content.length) {
+            this.content[i] = end;
+            if (this.scoreFunction(end) < this.scoreFunction(node)) {
+                this.sinkDown(i);
+            }
+            else {
+                this.bubbleUp(i);
+            }
+        }
+    }
+    size() {
+        return this.content.length;
+    }
+    rescoreElement(node) {
+        this.sinkDown(this.content.indexOf(node));
+    }
+}

package/dist/excalidraw/change.d.ts

@@ -1,5 +1,6 @@
 import type { ElementUpdate } from "./element/mutateElement";
 import type { OrderedExcalidrawElement, SceneElementsMap } from "./element/types";
+import type Scene from "./scene/Scene";
 import type { AppState, ObservedAppState } from "./types";
 import type { ValueOf } from "./utility-types";
 /**
@@ -153,7 +154,7 @@ export declare class ElementsChange implements Change<SceneElementsMap> {
      * @returns new instance with modified delta/s
      */
     applyLatestChanges(elements: SceneElementsMap): ElementsChange;
-    applyTo(elements: SceneElementsMap, snapshot: Map<string, OrderedExcalidrawElement>): [SceneElementsMap, boolean];
+    applyTo(elements: SceneElementsMap, snapshot: Map<string, OrderedExcalidrawElement>, scene: Scene): [SceneElementsMap, boolean];
     private static createApplier;
     private static createGetter;
     private static applyDelta;

package/dist/excalidraw/change.js

@@ -599,7 +599,7 @@ export class ElementsChange {
             shouldRedistribute: true, // redistribute the deltas as `isDeleted` could have been updated
         });
     }
-    applyTo(elements, snapshot) {
+    applyTo(elements, snapshot, scene) {
         let nextElements = toBrandedType(new Map(elements));
         let changedElements;
         const flags = {
@@ -635,7 +635,7 @@ export class ElementsChange {
         try {
             // TODO: #7348 refactor away mutations below, so that we couldn't end up in an incosistent state
             ElementsChange.redrawTextBoundingBoxes(nextElements, changedElements);
-            ElementsChange.redrawBoundArrows(nextElements, changedElements);
+            ElementsChange.redrawBoundArrows(nextElements, changedElements, scene);
             // the following reorder performs also mutations, but only on new instances of changed elements
             // (unless something goes really bad and it fallbacks to fixing all invalid indices)
             nextElements = ElementsChange.reorderElements(nextElements, changedElements, flags);
@@ -847,10 +847,12 @@ export class ElementsChange {
             redrawTextBoundingBox(boundText, container, elements, false);
         }
     }
-    static redrawBoundArrows(elements, changed) {
+    static redrawBoundArrows(elements, changed, scene) {
         for (const element of changed.values()) {
             if (!element.isDeleted && isBindableElement(element)) {
-                updateBoundElements(element, elements);
+                updateBoundElements(element, elements, scene, {
+                    changedElements: changed,
+                });
             }
         }
     }

package/dist/excalidraw/charts.js

@@ -181,8 +181,6 @@ const chartLines = (spreadsheet, x, y, groupId, backgroundColor) => {
         type: "line",
         x,
         y,
-        startArrowhead: null,
-        endArrowhead: null,
         width: chartWidth,
         points: [
             [0, 0],
@@ -196,8 +194,6 @@ const chartLines = (spreadsheet, x, y, groupId, backgroundColor) => {
         type: "line",
         x,
         y,
-        startArrowhead: null,
-        endArrowhead: null,
         height: chartHeight,
         points: [
             [0, 0],
@@ -211,8 +207,6 @@ const chartLines = (spreadsheet, x, y, groupId, backgroundColor) => {
         type: "line",
         x,
         y: y - BAR_HEIGHT - BAR_GAP,
-        startArrowhead: null,
-        endArrowhead: null,
         strokeStyle: "dotted",
         width: chartWidth,
         opacity: GRID_OPACITY,
@@ -306,8 +300,6 @@ const chartTypeLine = (spreadsheet, x, y) => {
         type: "line",
         x: x + BAR_GAP + BAR_WIDTH / 2,
         y: y - BAR_GAP,
-        startArrowhead: null,
-        endArrowhead: null,
         height: maxY - minY,
         width: maxX - minX,
         strokeWidth: 2,
@@ -339,8 +331,6 @@ const chartTypeLine = (spreadsheet, x, y) => {
             type: "line",
             x: x + cx + BAR_WIDTH / 2 + BAR_GAP / 2,
             y: y - cy,
-            startArrowhead: null,
-            endArrowhead: null,
             height: cy,
             strokeStyle: "dotted",
             opacity: GRID_OPACITY,

package/dist/excalidraw/components/Actions.js

@@ -7,9 +7,9 @@ import { SHAPES } from "../shapes";
 import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
-import { hasStrokeColor } from "../scene/comparisons";
+import { hasStrokeColor, toolIsArrow } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isLinearElement, isTextElement, } from "../element/typeChecks";
+import { hasBoundTextElement, isElbowArrow, isLinearElement, isTextElement, } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import { Tooltip } from "./Tooltip";
@@ -55,7 +55,8 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
     const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;
     const showLineEditorAction = !appState.editingLinearElement &&
         targetElements.length === 1 &&
-        isLinearElement(targetElements[0]);
+        isLinearElement(targetElements[0]) &&
+        !isElbowArrow(targetElements[0]);
     return (_jsxs("div", { className: "panelColumn", children: [_jsx("div", { children: canChangeStrokeColor(appState, targetElements) &&
                     renderAction("changeStrokeColor") }), canChangeBackgroundColor(appState, targetElements) && (_jsx("div", { children: renderAction("changeBackgroundColor") })), showFillIcons && renderAction("changeFillStyle"), (hasStrokeWidth(appState.activeTool.type) ||
                 targetElements.some((element) => hasStrokeWidth(element.type))) &&
@@ -63,8 +64,9 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
                 targetElements.some((element) => element.type === "freedraw")) &&
                 renderAction("changeStrokeShape"), (hasStrokeStyle(appState.activeTool.type) ||
                 targetElements.some((element) => hasStrokeStyle(element.type))) && (_jsxs(_Fragment, { children: [renderAction("changeStrokeStyle"), renderAction("changeSloppiness")] })), (canChangeRoundness(appState.activeTool.type) ||
-                targetElements.some((element) => canChangeRoundness(element.type))) && (_jsx(_Fragment, { children: renderAction("changeRoundness") })), (appState.activeTool.type === "text" ||
-                targetElements.some(isTextElement)) && (_jsxs(_Fragment, { children: [renderAction("changeFontSize"), renderAction("changeFontFamily"), (appState.activeTool.type === "text" ||
+                targetElements.some((element) => canChangeRoundness(element.type))) && (_jsx(_Fragment, { children: renderAction("changeRoundness") })), (toolIsArrow(appState.activeTool.type) ||
+                targetElements.some((element) => toolIsArrow(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowType") })), (appState.activeTool.type === "text" ||
+                targetElements.some(isTextElement)) && (_jsxs(_Fragment, { children: [renderAction("changeFontFamily"), renderAction("changeFontSize"), (appState.activeTool.type === "text" ||
                         suppportsHorizontalAlign(targetElements, elementsMap)) &&
                         renderAction("changeTextAlign")] })), shouldAllowVerticalAlign(targetElements, elementsMap) &&
                 renderAction("changeVerticalAlign"), (canHaveArrowheads(appState.activeTool.type) ||

package/dist/excalidraw/components/App.d.ts

@@ -2,15 +2,15 @@ import React from "react";
 import type { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
 import type { ActionResult } from "../actions/types";
-import type { EXPORT_IMAGE_TYPES } from "../constants";
+import { type EXPORT_IMAGE_TYPES } from "../constants";
 import type { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
 import { History } from "../history";
 import Scene from "../scene/Scene";
-import type { GeometricShape } from "../../utils/geometry/shape";
 import type { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
 import type { FileSystemHandle } from "../data/filesystem";
+import { Fonts } from "../fonts";
 import { Renderer } from "../scene/Renderer";
 import { Emitter } from "../emitter";
 import { Store } from "../store";
@@ -51,8 +51,8 @@ declare class App extends React.Component<AppProps, AppState> {
     device: Device;
     private excalidrawContainerRef;
     scene: Scene;
+    fonts: Fonts;
     renderer: Renderer;
-    private fonts;
     private resizeObserver;
     private nearestScrollableContainer;
     library: AppClassProperties["library"];
@@ -253,6 +253,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private onMagicSettingsConfirm;
     onMagicframeToolSelect: () => void;
     private openEyeDropper;
+    dismissLinearEditor: () => void;
     syncActionResult: (actionResult: ActionResult) => void;
     private onBlur;
     private onUnload;
@@ -388,12 +389,6 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleTextWysiwyg;
     private deselectElements;
     private getTextElementAtPosition;
-    /**
-     * get the pure geometric shape of an excalidraw element
-     * which is then used for hit detection
-     */
-    getElementShape(element: ExcalidrawElement): GeometricShape;
-    private getBoundTextShape;
     private getElementAtPosition;
     private getElementsAtPosition;
     private getElementHitThreshold;
@@ -495,6 +490,7 @@ declare class App extends React.Component<AppProps, AppState> {
 declare global {
     interface Window {
         h: {
+            scene: Scene;
             elements: readonly ExcalidrawElement[];
             state: AppState;
             setState: React.Component<any, AppState>["setState"];