@dwelle/excalidraw 0.5.0-e56eec7 → 0.5.0-e8bcd96

package/dist/excalidraw/components/icons.js

@@ -121,10 +121,22 @@ export const shareWindows = createIcon(_jsxs(_Fragment, { children: [_jsx("path"
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(_jsx("path", { stroke: "currentColor", strokeWidth: "40", fill: "currentColor", d: "M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z" }), { width: 1024 });
-export const BringForwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z", fill: "currentColor" }), _jsx("path", { d: "M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendBackwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388", fill: "currentColor" }), _jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const BringToFrontIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z", fill: "currentColor" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendToBackIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", children: [_jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "SendToBackIcon", fill: "#fff", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z" }) }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z", fill: "currentColor" }), _jsx("path", { d: "M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z", fill: "currentColor", mask: "url(#SendToBackIcon)" }), _jsx("path", { d: "M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z", stroke: "currentColor", strokeWidth: "1.25" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+const arrowBarToTopJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 10l0 10" }), _jsx("path", { d: "M12 10l4 4" }), _jsx("path", { d: "M12 10l-4 4" }), _jsx("path", { d: "M4 4l16 0" })] }));
+const arrownNarrowUpJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 5l0 14" }), _jsx("path", { d: "M16 9l-4 -4" }), _jsx("path", { d: "M8 9l4 -4" })] }));
+export const BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps);
+export const SendBackwardIcon = createIcon(arrownNarrowUpJSX, {
+    ...tablerIconProps,
+    style: {
+        transform: "rotate(180deg)",
+    },
+});
+export const BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps);
+export const SendToBackIcon = createIcon(arrowBarToTopJSX, {
+    ...tablerIconProps,
+    style: {
+        transform: "rotate(180deg)",
+    },
+});
 //
 // Align action icons created from scratch to match those of z-index actions
 // Note: vertical align icons are flipped so the larger item is always the
@@ -241,7 +253,8 @@ export const pngIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_js
 export const magnetIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 13v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a2 2 0 0 0 6 0v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a8 8 0 0 1 -16 0" }), _jsx("path", { d: "M4 8l5 0" }), _jsx("path", { d: "M15 8l4 0" })] }), tablerIconProps);
 export const coffeeIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" }), _jsx("path", { d: "M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" }), _jsx("path", { d: "M16.746 16.726a3 3 0 1 0 .252 -5.555" })] }), tablerIconProps);
 export const DeviceDesktopIcon = createIcon(_jsxs("g", { stroke: "currentColor", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1v-10zM7 20h10M9 16v4M15 16v4" })] }), { ...tablerIconProps, strokeWidth: 1.5 });
-// arrow-bar-to-left
-export const arrowBarToLeftIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 12l10 0" }), _jsx("path", { d: "M10 12l4 4" }), _jsx("path", { d: "M10 12l4 -4" }), _jsx("path", { d: "M4 4l0 16" })] }), tablerIconProps);
+// login
+export const loginIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" }), _jsx("path", { d: "M21 12h-13l3 -3" }), _jsx("path", { d: "M11 15l-3 -3" })] }), tablerIconProps);
 export const youtubeIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" }), _jsx("path", { d: "M10 9l5 3l-5 3z" })] }), tablerIconProps);
 export const gridIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M3 12h18" }), _jsx("path", { d: "M3 18h18" }), _jsx("path", { d: "M6 3v18" }), _jsx("path", { d: "M12 3v18" }), _jsx("path", { d: "M18 3v18" })] }), tablerIconProps);
+export const lineEditorIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M17 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M3 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M17 5c-6.627 0 -12 5.373 -12 12" })] }), tablerIconProps);

package/dist/excalidraw/constants.d.ts

@@ -1,5 +1,5 @@
-import { AppProps, NormalizedZoomValue } from "./types";
-import { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import type { AppProps, NormalizedZoomValue } from "./types";
+import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
 export declare const isDarwin: boolean;
 export declare const isWindows: boolean;
 export declare const isAndroid: boolean;

package/dist/excalidraw/context/ui-appState.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { UIAppState } from "../types";
+import type { UIAppState } from "../types";
 export declare const UIAppStateContext: React.Context<UIAppState>;
 export declare const useUIAppState: () => UIAppState;

package/dist/excalidraw/cursor.d.ts

@@ -1,4 +1,4 @@
-import { AppState } from "./types";
+import type { AppState } from "./types";
 export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
 export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;
 export declare const setEraserCursor: (interactiveCanvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;

package/dist/excalidraw/data/EditorLocalStorage.d.ts

@@ -1,5 +1,5 @@
-import { EDITOR_LS_KEYS } from "../constants";
-import { JSONValue } from "../types";
+import type { EDITOR_LS_KEYS } from "../constants";
+import type { JSONValue } from "../types";
 export declare class EditorLocalStorage {
     static has(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): boolean;
     static get<T extends JSONValue>(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): T | null;

package/dist/excalidraw/data/blob.d.ts

@@ -1,9 +1,9 @@
 import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
-import { ExcalidrawElement, FileId } from "../element/types";
-import { AppState, DataURL, LibraryItem } from "../types";
-import { ValueOf } from "../utility-types";
-import { FileSystemHandle } from "./filesystem";
-import { ImportedLibraryData } from "./types";
+import type { ExcalidrawElement, FileId } from "../element/types";
+import type { AppState, DataURL, LibraryItem } from "../types";
+import type { ValueOf } from "../utility-types";
+import type { FileSystemHandle } from "./filesystem";
+import type { ImportedLibraryData } from "./types";
 export declare const getMimeType: (blob: Blob | string) => string;
 export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
 export declare const isImageFileHandleType: (type: string | null) => type is "png" | "svg";

package/dist/excalidraw/data/filesystem.d.ts

@@ -1,4 +1,5 @@
-import { FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
+import type { FileSystemHandle } from "browser-fs-access";
+import { supported as nativeFileSystemSupported } from "browser-fs-access";
 import { MIME_TYPES } from "../constants";
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 export declare const fileOpen: <M extends boolean | undefined = false>(opts: {

package/dist/excalidraw/data/index.d.ts

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
-import { ExportType } from "../scene/types";
-import { AppState, BinaryFiles } from "../types";
-import { FileSystemHandle } from "./filesystem";
+import type { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
+import type { ExportType } from "../scene/types";
+import type { AppState, BinaryFiles } from "../types";
+import type { FileSystemHandle } from "./filesystem";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
 export type ExportedElements = readonly NonDeletedExcalidrawElement[] & {

package/dist/excalidraw/data/json.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems } from "../types";
-import { ImportedDataState, ImportedLibraryData } from "./types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles, LibraryItems } from "../types";
+import type { ImportedDataState, ImportedLibraryData } from "./types";
 export declare const serializeAsJSON: (elements: readonly ExcalidrawElement[], appState: Partial<AppState>, files: BinaryFiles, type: "local" | "database") => string;
 export declare const saveAsJSON: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, name?: string) => Promise<{
     fileHandle: import("browser-fs-access").FileSystemHandle | null;

package/dist/excalidraw/data/library.d.ts

@@ -1,7 +1,7 @@
-import { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource, LibraryItems_anyVersion } from "../types";
+import type { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource, LibraryItems_anyVersion } from "../types";
 import type App from "../components/App";
-import { ExcalidrawElement } from "../element/types";
-import { MaybePromise } from "../utility-types";
+import type { ExcalidrawElement } from "../element/types";
+import type { MaybePromise } from "../utility-types";
 export type LibraryPersistedData = {
     libraryItems: LibraryItems;
 };

package/dist/excalidraw/data/magic.d.ts

@@ -1,6 +1,6 @@
-import { Theme } from "../element/types";
-import { DataURL } from "../types";
-import { OpenAIOutput } from "./ai/types";
+import type { Theme } from "../element/types";
+import type { DataURL } from "../types";
+import type { OpenAIOutput } from "./ai/types";
 export type MagicCacheData = {
     status: "pending";
 } | {

package/dist/excalidraw/data/reconcile.d.ts

@@ -1,6 +1,6 @@
-import { OrderedExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-import { MakeBrand } from "../utility-types";
+import type { OrderedExcalidrawElement } from "../element/types";
+import type { AppState } from "../types";
+import type { MakeBrand } from "../utility-types";
 export type ReconciledExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"ReconciledElement">;
 export type RemoteExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"RemoteExcalidrawElement">;
 export declare const reconcileElements: (localElements: readonly OrderedExcalidrawElement[], remoteElements: readonly RemoteExcalidrawElement[], localAppState: AppState) => ReconciledExcalidrawElement[];

package/dist/excalidraw/data/resave.d.ts

@@ -1,5 +1,5 @@
-import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles } from "../types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles } from "../types";
 export declare const resaveAsImageWithScene: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, name: string) => Promise<{
     fileHandle: import("browser-fs-access").FileSystemHandle;
 }>;

package/dist/excalidraw/data/resave.js

@@ -1,5 +1,5 @@
-import { exportAsImage } from ".";
 import { prepareElementsForExport } from ".";
+import { exportAsImage } from ".";
 import { getFileHandleType, isImageFileHandleType } from "./blob";
 export const resaveAsImageWithScene = async (elements, appState, files, name) => {
     const { exportBackground, viewBackgroundColor, fileHandle } = appState;

package/dist/excalidraw/data/restore.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItem } from "../types";
-import { ImportedDataState } from "./types";
+import type { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles, LibraryItem } from "../types";
+import type { ImportedDataState } from "./types";
 type RestoredAppState = Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const AllowedExcalidrawActiveTools: Record<AppState["activeTool"]["type"], boolean>;
 export type RestoredDataState = {

package/dist/excalidraw/data/restore.js

@@ -124,6 +124,7 @@ const restoreElement = (element) => {
                 verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
                 containerId: element.containerId ?? null,
                 originalText: element.originalText || text,
+                autoResize: element.autoResize ?? true,
                 lineHeight,
             });
             // if empty text, mark as deleted. We keep in array

package/dist/excalidraw/data/transform.d.ts

@@ -1,6 +1,6 @@
-import { ElementConstructorOpts } from "../element/newElement";
-import { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawFrameElement, ExcalidrawFreeDrawElement, ExcalidrawGenericElement, ExcalidrawIframeLikeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawMagicFrameElement, ExcalidrawSelectionElement, ExcalidrawTextElement, FileId, FontFamilyValues, TextAlign, VerticalAlign } from "../element/types";
-import { MarkOptional } from "../utility-types";
+import type { ElementConstructorOpts } from "../element/newElement";
+import type { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawFrameElement, ExcalidrawFreeDrawElement, ExcalidrawGenericElement, ExcalidrawIframeLikeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawMagicFrameElement, ExcalidrawSelectionElement, ExcalidrawTextElement, FileId, FontFamilyValues, TextAlign, VerticalAlign } from "../element/types";
+import type { MarkOptional } from "../utility-types";
 export type ValidLinearElement = {
     type: "arrow" | "line";
     x: number;

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

@@ -1,7 +1,7 @@
-import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems, LibraryItems_anyVersion } from "../types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles, LibraryItems, LibraryItems_anyVersion } from "../types";
 import type { cleanAppStateForExport } from "../appState";
-import { VERSIONS } from "../constants";
+import type { VERSIONS } from "../constants";
 export interface ExportedDataState {
     type: string;
     version: number;

package/dist/excalidraw/element/ElementCanvasButtons.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ElementsMap, NonDeletedExcalidrawElement } from "./types";
+import type { ElementsMap, NonDeletedExcalidrawElement } from "./types";
 import "./ElementCanvasButtons.scss";
 export declare const ElementCanvasButtons: ({ children, element, elementsMap, }: {
     children: React.ReactNode;

package/dist/excalidraw/element/binding.d.ts

@@ -1,7 +1,6 @@
-import * as GA from "../ga";
-import { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawEllipseElement, ExcalidrawImageElement, ExcalidrawFrameLikeElement, ExcalidrawIframeLikeElement, NonDeleted, ExcalidrawLinearElement, NonDeletedExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap, ExcalidrawTextElement } from "./types";
-import { AppClassProperties, AppState, Point } from "../types";
-import { ElementUpdate } from "./mutateElement";
+import type { ExcalidrawBindableElement, ExcalidrawElement, NonDeleted, ExcalidrawLinearElement, NonDeletedExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap } from "./types";
+import type { AppClassProperties, AppState } from "../types";
+import type { ElementUpdate } from "./mutateElement";
 export type SuggestedBinding = NonDeleted<ExcalidrawBindableElement> | SuggestedPointBinding;
 export type SuggestedPointBinding = [
     NonDeleted<ExcalidrawLinearElement>,
@@ -11,14 +10,14 @@ export type SuggestedPointBinding = [
 export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLElement>) => boolean;
 export declare const isBindingEnabled: (appState: AppState) => boolean;
 export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep", elementsMap: NonDeletedSceneElementsMap) => void;
-export declare const bindOrUnbindSelectedElements: (selectedElements: NonDeleted<ExcalidrawElement>[], app: AppClassProperties) => void;
+export declare const bindOrUnbindLinearElements: (selectedElements: NonDeleted<ExcalidrawLinearElement>[], app: AppClassProperties, isBindingEnabled: boolean, draggingPoints: readonly number[] | null) => void;
+export declare const getSuggestedBindingsForArrows: (selectedElements: NonDeleted<ExcalidrawElement>[], app: AppClassProperties) => SuggestedBinding[];
 export declare const maybeBindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, appState: AppState, pointerCoords: {
     x: number;
     y: number;
 }, app: AppClassProperties) => void;
 export declare const bindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: NonDeletedSceneElementsMap) => void;
 export declare const isLinearElementSimpleAndAlreadyBound: (linearElement: NonDeleted<ExcalidrawLinearElement>, alreadyBoundToId: ExcalidrawBindableElement["id"] | undefined, bindableElement: ExcalidrawBindableElement) => boolean;
-export declare const unbindLinearElements: (elements: readonly NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap) => void;
 export declare const getHoveredElementForBinding: (pointerCoords: {
     x: number;
     y: number;
@@ -30,22 +29,9 @@ export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawE
         height: number;
     };
 }) => void;
-export declare const getEligibleElementsForBinding: (selectedElements: NonDeleted<ExcalidrawElement>[], app: AppClassProperties) => SuggestedBinding[];
 export declare const fixBindingsAfterDuplication: (sceneElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>, duplicatesServeAsOld?: "duplicatesServeAsOld" | undefined) => void;
 export declare const fixBindingsAfterDeletion: (sceneElements: readonly ExcalidrawElement[], deletedElements: readonly ExcalidrawElement[]) => void;
-export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
-    x: number;
-    y: number;
-}, app: AppClassProperties) => boolean;
 export declare const maxBindingGap: (element: ExcalidrawElement, elementWidth: number, elementHeight: number) => number;
-export declare const distanceToBindableElement: (element: ExcalidrawBindableElement, point: readonly [number, number], elementsMap: ElementsMap) => number;
-export declare const distanceToEllipse: (element: ExcalidrawEllipseElement, point: readonly [number, number], elementsMap: ElementsMap) => number;
-export declare const determineFocusDistance: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], elementsMap: ElementsMap) => number;
-export declare const determineFocusPoint: (element: ExcalidrawBindableElement, focus: number, adjecentPoint: readonly [number, number], elementsMap: ElementsMap) => readonly [number, number];
-export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap: number | undefined, elementsMap: ElementsMap) => Point[];
-export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
-export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
-export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawIframeLikeElement | ExcalidrawFrameLikeElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
 export declare const bindingProperties: Set<BindableProp | BindingProp>;
 export type BindableProp = "boundElements";
 export type BindingProp = "frameId" | "containerId" | "startBinding" | "endBinding";

package/dist/excalidraw/element/binding.js

@@ -46,39 +46,110 @@ const bindOrUnbindLinearElementEdge = (linearElement, bindableElement, otherEdge
 boundToElementIds, 
 // Is mutated
 unboundFromElementIds, elementsMap) => {
-    if (bindableElement !== "keep") {
-        if (bindableElement != null) {
-            // Don't bind if we're trying to bind or are already bound to the same
-            // element on the other edge already ("start" edge takes precedence).
-            if (otherEdgeBindableElement == null ||
-                (otherEdgeBindableElement === "keep"
-                    ? !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd)
-                    : startOrEnd === "start" ||
-                        otherEdgeBindableElement.id !== bindableElement.id)) {
-                bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);
-                boundToElementIds.add(bindableElement.id);
-            }
+    // "keep" is for method chaining convenience, a "no-op", so just bail out
+    if (bindableElement === "keep") {
+        return;
+    }
+    // null means break the bind, so nothing to consider here
+    if (bindableElement === null) {
+        const unbound = unbindLinearElement(linearElement, startOrEnd);
+        if (unbound != null) {
+            unboundFromElementIds.add(unbound);
         }
-        else {
-            const unbound = unbindLinearElement(linearElement, startOrEnd);
-            if (unbound != null) {
-                unboundFromElementIds.add(unbound);
-            }
+        return;
+    }
+    // While complext arrows can do anything, simple arrow with both ends trying
+    // to bind to the same bindable should not be allowed, start binding takes
+    // precedence
+    if (isLinearElementSimple(linearElement)) {
+        if (otherEdgeBindableElement == null ||
+            (otherEdgeBindableElement === "keep"
+                ? // TODO: Refactor - Needlessly complex
+                    !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd)
+                : startOrEnd === "start" ||
+                    otherEdgeBindableElement.id !== bindableElement.id)) {
+            bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);
+            boundToElementIds.add(bindableElement.id);
         }
     }
+    else {
+        bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);
+        boundToElementIds.add(bindableElement.id);
+    }
 };
-export const bindOrUnbindSelectedElements = (selectedElements, app) => {
-    selectedElements.forEach((selectedElement) => {
-        if (isBindingElement(selectedElement)) {
-            bindOrUnbindLinearElement(selectedElement, getElligibleElementForBindingElement(selectedElement, "start", app), getElligibleElementForBindingElement(selectedElement, "end", app), app.scene.getNonDeletedElementsMap());
-        }
-        else if (isBindableElement(selectedElement)) {
-            maybeBindBindableElement(selectedElement, app.scene.getNonDeletedElementsMap(), app);
+const getOriginalBindingIfStillCloseOfLinearElementEdge = (linearElement, edge, app) => {
+    const elementsMap = app.scene.getNonDeletedElementsMap();
+    const coors = getLinearElementEdgeCoors(linearElement, edge, elementsMap);
+    const elementId = edge === "start"
+        ? linearElement.startBinding?.elementId
+        : linearElement.endBinding?.elementId;
+    if (elementId) {
+        const element = elementsMap.get(elementId);
+        if (bindingBorderTest(element, coors, app)) {
+            return element;
         }
+    }
+    return null;
+};
+const getOriginalBindingsIfStillCloseToArrowEnds = (linearElement, app) => ["start", "end"].map((edge) => getOriginalBindingIfStillCloseOfLinearElementEdge(linearElement, edge, app));
+const getBindingStrategyForDraggingArrowEndpoints = (selectedElement, isBindingEnabled, draggingPoints, app) => {
+    const startIdx = 0;
+    const endIdx = selectedElement.points.length - 1;
+    const startDragged = draggingPoints.findIndex((i) => i === startIdx) > -1;
+    const endDragged = draggingPoints.findIndex((i) => i === endIdx) > -1;
+    const start = startDragged
+        ? isBindingEnabled
+            ? getElligibleElementForBindingElement(selectedElement, "start", app)
+            : null // If binding is disabled and start is dragged, break all binds
+        : // We have to update the focus and gap of the binding, so let's rebind
+            getElligibleElementForBindingElement(selectedElement, "start", app);
+    const end = endDragged
+        ? isBindingEnabled
+            ? getElligibleElementForBindingElement(selectedElement, "end", app)
+            : null // If binding is disabled and end is dragged, break all binds
+        : // We have to update the focus and gap of the binding, so let's rebind
+            getElligibleElementForBindingElement(selectedElement, "end", app);
+    return [start, end];
+};
+const getBindingStrategyForDraggingArrowOrJoints = (selectedElement, app, isBindingEnabled) => {
+    const [startIsClose, endIsClose] = getOriginalBindingsIfStillCloseToArrowEnds(selectedElement, app);
+    const start = startIsClose
+        ? isBindingEnabled
+            ? getElligibleElementForBindingElement(selectedElement, "start", app)
+            : null
+        : null;
+    const end = endIsClose
+        ? isBindingEnabled
+            ? getElligibleElementForBindingElement(selectedElement, "end", app)
+            : null
+        : null;
+    return [start, end];
+};
+export const bindOrUnbindLinearElements = (selectedElements, app, isBindingEnabled, draggingPoints) => {
+    selectedElements.forEach((selectedElement) => {
+        const [start, end] = draggingPoints?.length
+            ? // The arrow edge points are dragged (i.e. start, end)
+                getBindingStrategyForDraggingArrowEndpoints(selectedElement, isBindingEnabled, draggingPoints ?? [], app)
+            : // The arrow itself (the shaft) or the inner joins are dragged
+                getBindingStrategyForDraggingArrowOrJoints(selectedElement, app, isBindingEnabled);
+        bindOrUnbindLinearElement(selectedElement, start, end, app.scene.getNonDeletedElementsMap());
     });
 };
-const maybeBindBindableElement = (bindableElement, elementsMap, app) => {
-    getElligibleElementsForBindableElementAndWhere(bindableElement, app).forEach(([linearElement, where]) => bindOrUnbindLinearElement(linearElement, where === "end" ? "keep" : bindableElement, where === "start" ? "keep" : bindableElement, elementsMap));
+export const getSuggestedBindingsForArrows = (selectedElements, app) => {
+    // HOT PATH: Bail out if selected elements list is too large
+    if (selectedElements.length > 50) {
+        return [];
+    }
+    return (selectedElements
+        .filter(isLinearElement)
+        .flatMap((element) => getOriginalBindingsIfStillCloseToArrowEnds(element, app))
+        .filter((element) => element !== null)
+        // Filter out bind candidates which are in the
+        // same selection / group with the arrow
+        //
+        // TODO: Is it worth turning the list into a set to avoid dupes?
+        .filter((element) => selectedElements.filter((selected) => selected.id === element?.id)
+        .length === 0));
 };
 export const maybeBindLinearElement = (linearElement, appState, pointerCoords, app) => {
     if (appState.startBoundElement != null) {
@@ -113,20 +184,10 @@ const isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (linearElement, binda
     return isLinearElementSimpleAndAlreadyBound(linearElement, otherBinding?.elementId, bindableElement);
 };
 export const isLinearElementSimpleAndAlreadyBound = (linearElement, alreadyBoundToId, bindableElement) => {
-    return (alreadyBoundToId === bindableElement.id && linearElement.points.length < 3);
-};
-export const unbindLinearElements = (elements, elementsMap) => {
-    elements.forEach((element) => {
-        if (isBindingElement(element)) {
-            if (element.startBinding !== null && element.endBinding !== null) {
-                bindOrUnbindLinearElement(element, null, null, elementsMap);
-            }
-            else {
-                bindOrUnbindLinearElement(element, element.startBinding ? "keep" : null, element.endBinding ? "keep" : null, elementsMap);
-            }
-        }
-    });
+    return (alreadyBoundToId === bindableElement.id &&
+        isLinearElementSimple(linearElement));
 };
+const isLinearElementSimple = (linearElement) => linearElement.points.length < 3;
 const unbindLinearElement = (linearElement, startOrEnd) => {
     const field = startOrEnd === "start" ? "startBinding" : "endBinding";
     const binding = linearElement[field];
@@ -247,21 +308,6 @@ const maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize
     const newGap = Math.max(1, Math.min(maxBindingGap(changedElement, newWidth, newHeight), gap * (newWidth < newHeight ? newWidth / width : newHeight / height)));
     return { elementId, gap: newGap, focus };
 };
-// TODO: this is a bottleneck, optimise
-export const getEligibleElementsForBinding = (selectedElements, app) => {
-    const includedElementIds = new Set(selectedElements.map(({ id }) => id));
-    return selectedElements.flatMap((selectedElement) => isBindingElement(selectedElement, false)
-        ? getElligibleElementsForBindingElement(selectedElement, app).filter((element) => !includedElementIds.has(element.id))
-        : isBindableElement(selectedElement, false)
-            ? getElligibleElementsForBindableElementAndWhere(selectedElement, app).filter((binding) => !includedElementIds.has(binding[0].id))
-            : []);
-};
-const getElligibleElementsForBindingElement = (linearElement, app) => {
-    return [
-        getElligibleElementForBindingElement(linearElement, "start", app),
-        getElligibleElementForBindingElement(linearElement, "end", app),
-    ].filter((element) => element != null);
-};
 const getElligibleElementForBindingElement = (linearElement, startOrEnd, app) => {
     return getHoveredElementForBinding(getLinearElementEdgeCoors(linearElement, startOrEnd, app.scene.getNonDeletedElementsMap()), app);
 };
@@ -269,33 +315,6 @@ const getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {
     const index = startOrEnd === "start" ? 0 : -1;
     return tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, index, elementsMap));
 };
-const getElligibleElementsForBindableElementAndWhere = (bindableElement, app) => {
-    const scene = Scene.getScene(bindableElement);
-    return scene
-        .getNonDeletedElements()
-        .map((element) => {
-        if (!isBindingElement(element, false)) {
-            return null;
-        }
-        const canBindStart = isLinearElementEligibleForNewBindingByBindable(element, "start", bindableElement, scene.getNonDeletedElementsMap(), app);
-        const canBindEnd = isLinearElementEligibleForNewBindingByBindable(element, "end", bindableElement, scene.getNonDeletedElementsMap(), app);
-        if (!canBindStart && !canBindEnd) {
-            return null;
-        }
-        return [
-            element,
-            canBindStart && canBindEnd ? "both" : canBindStart ? "start" : "end",
-            bindableElement,
-        ];
-    })
-        .filter((maybeElement) => maybeElement != null);
-};
-const isLinearElementEligibleForNewBindingByBindable = (linearElement, startOrEnd, bindableElement, elementsMap, app) => {
-    const existingBinding = linearElement[startOrEnd === "start" ? "startBinding" : "endBinding"];
-    return (existingBinding == null &&
-        !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(linearElement, bindableElement, startOrEnd) &&
-        bindingBorderTest(bindableElement, getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap), app));
-};
 // We need to:
 // 1: Update elements not selected to point to duplicated elements
 // 2: Update duplicated elements to point to other duplicated elements
@@ -389,7 +408,7 @@ const newBoundElements = (boundElements, idsToRemove, elementsToAdd = []) => {
     nextBoundElements.push(...elementsToAdd.map((x) => ({ id: x.id, type: x.type })));
     return nextBoundElements;
 };
-export const bindingBorderTest = (element, { x, y }, app) => {
+const bindingBorderTest = (element, { x, y }, app) => {
     const threshold = maxBindingGap(element, element.width, element.height);
     const shape = app.getElementShape(element);
     return isPointOnShape([x, y], shape, threshold);
@@ -401,7 +420,7 @@ export const maxBindingGap = (element, elementWidth, elementHeight) => {
     // We make the bindable boundary bigger for bigger elements
     return Math.max(16, Math.min(0.25 * smallerDimension, 32));
 };
-export const distanceToBindableElement = (element, point, elementsMap) => {
+const distanceToBindableElement = (element, point, elementsMap) => {
     switch (element.type) {
         case "rectangle":
         case "image":
@@ -426,7 +445,7 @@ const distanceToDiamond = (element, point, elementsMap) => {
     const side = GALine.equation(hheight, hwidth, -hheight * hwidth);
     return GAPoint.distanceToLine(pointRel, side);
 };
-export const distanceToEllipse = (element, point, elementsMap) => {
+const distanceToEllipse = (element, point, elementsMap) => {
     const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);
     return -GALine.sign(tangent) * GAPoint.distanceToLine(pointRel, tangent);
 };
@@ -504,7 +523,7 @@ const coordsCenter = (x1, y1, x2, y2) => {
 // all focus points lie, so it's a number between -1 and 1.
 // The line going through `a` and `b` is a tangent to the "focus image"
 // of the element.
-export const determineFocusDistance = (element, 
+const determineFocusDistance = (element, 
 // Point on the line, in absolute coordinates
 a, 
 // Another point on the line, in absolute coordinates (closer to element)
@@ -541,7 +560,7 @@ b, elementsMap) => {
     }
     return ret || 0;
 };
-export const determineFocusPoint = (element, 
+const determineFocusPoint = (element, 
 // The oriented, relative distance from the center of `element` of the
 // returned focusPoint
 focus, adjecentPoint, elementsMap) => {
@@ -573,7 +592,7 @@ focus, adjecentPoint, elementsMap) => {
 };
 // Returns 2 or 0 intersection points between line going through `a` and `b`
 // and the `element`, in ascending order of distance from `a`.
-export const intersectElementWithLine = (element, 
+const intersectElementWithLine = (element, 
 // Point on the line, in absolute coordinates
 a, 
 // Another point on the line, in absolute coordinates
@@ -688,7 +707,7 @@ const getEllipseIntersections = (element, gap, line) => {
         GA.point((xn - a * b * n * discrRoot) / squares, (yn + a * b * m * discrRoot) / squares),
     ];
 };
-export const getCircleIntersections = (center, radius, line) => {
+const getCircleIntersections = (center, radius, line) => {
     if (radius === 0) {
         return GAPoint.distanceToLine(line, center) === 0 ? [center] : [];
     }
@@ -712,7 +731,7 @@ export const getCircleIntersections = (center, radius, line) => {
 };
 // The focus point is the tangent point of the "focus image" of the
 // `element`, where the tangent goes through `point`.
-export const findFocusPointForEllipse = (ellipse, 
+const findFocusPointForEllipse = (ellipse, 
 // Between -1 and 1 (not 0) the relative size of the "focus image" of
 // the element on which the focus point lies
 relativeDistance, 
@@ -739,7 +758,7 @@ point) => {
     const x = -(a ** 2 * m) / (n ** 2 * b ** 2 + m ** 2 * a ** 2);
     return GA.point(x, (-m * x - 1) / n);
 };
-export const findFocusPointForRectangulars = (element, 
+const findFocusPointForRectangulars = (element, 
 // Between -1 and 1 for how far away should the focus point be relative
 // to the size of the element. Sign determines orientation.
 relativeDistance, 

package/dist/excalidraw/element/bounds.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead, ExcalidrawFreeDrawElement, NonDeleted, ElementsMap } from "./types";
-import { Drawable, Op } from "roughjs/bin/core";
-import { AppState, Point } from "../types";
+import type { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead, ExcalidrawFreeDrawElement, NonDeleted, ElementsMap } from "./types";
+import type { Drawable, Op } from "roughjs/bin/core";
+import type { AppState, Point } from "../types";
 export type RectangleBox = {
     x: number;
     y: number;

package/dist/excalidraw/element/collision.d.ts

@@ -1,6 +1,6 @@
-import { ElementsMap, ExcalidrawElement } from "./types";
-import { FrameNameBounds } from "../types";
-import { GeometricShape } from "../../utils/geometry/shape";
+import type { ElementsMap, ExcalidrawElement } from "./types";
+import type { FrameNameBounds } from "../types";
+import type { GeometricShape } from "../../utils/geometry/shape";
 export declare const shouldTestInside: (element: ExcalidrawElement) => boolean;
 export type HitTestArgs = {
     x: number;