@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

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/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

@@ -1,5 +1,5 @@
 import { getNonDeletedElements, getNormalizedDimensions, isInvisiblySmallElement, refreshTextDimensions, } from "../element";
-import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
+import { isArrowElement, isElbowArrow, isLinearElement, isTextElement, isUsingAdaptiveRadius, } from "../element/typeChecks";
 import { randomId } from "../random";
 import { DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, FONT_FAMILY, ROUNDNESS, DEFAULT_SIDEBAR, DEFAULT_ELEMENT_PROPS, } from "../constants";
 import { getDefaultAppState } from "../appState";
@@ -7,9 +7,11 @@ import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
 import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
-import { detectLineHeight, getContainerElement, getDefaultLineHeight, } from "../element/textElement";
+import { detectLineHeight, getContainerElement } from "../element/textElement";
 import { normalizeLink } from "./url";
 import { syncInvalidIndices } from "../fractionalIndex";
+import { getSizeFromPoints } from "../points";
+import { getLineHeight } from "../fonts";
 export const AllowedExcalidrawActiveTools = {
     selection: true,
     text: true,
@@ -34,11 +36,17 @@ const getFontFamilyByName = (fontFamilyName) => {
     }
     return DEFAULT_FONT_FAMILY;
 };
-const repairBinding = (binding) => {
+const repairBinding = (element, binding) => {
     if (!binding) {
         return null;
     }
-    return { ...binding, focus: binding.focus || 0 };
+    return {
+        ...binding,
+        focus: binding.focus || 0,
+        fixedPoint: isElbowArrow(element)
+            ? binding.fixedPoint ?? [0, 0]
+            : null,
+    };
 };
 const restoreElementWithProperties = (element, extra) => {
     const base = {
@@ -115,7 +123,7 @@ const restoreElement = (element) => {
                         detectLineHeight(element)
                     : // no element height likely means programmatic use, so default
                         // to a fixed line height
-                        getDefaultLineHeight(element.fontFamily));
+                        getLineHeight(element.fontFamily));
             element = restoreElementWithProperties(element, {
                 fontSize,
                 fontFamily,
@@ -124,6 +132,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
@@ -151,8 +160,7 @@ const restoreElement = (element) => {
         // @ts-ignore LEGACY type
         // eslint-disable-next-line no-fallthrough
         case "draw":
-        case "arrow": {
-            const { startArrowhead = null, endArrowhead = element.type === "arrow" ? "arrow" : null, } = element;
+            const { startArrowhead = null, endArrowhead = null } = element;
             let x = element.x;
             let y = element.y;
             let points = // migrate old arrow model to new one
@@ -169,14 +177,43 @@ const restoreElement = (element) => {
                 type: element.type === "draw"
                     ? "line"
                     : element.type,
-                startBinding: repairBinding(element.startBinding),
-                endBinding: repairBinding(element.endBinding),
+                startBinding: repairBinding(element, element.startBinding),
+                endBinding: repairBinding(element, element.endBinding),
                 lastCommittedPoint: null,
                 startArrowhead,
                 endArrowhead,
                 points,
                 x,
                 y,
+                ...getSizeFromPoints(points),
+            });
+        case "arrow": {
+            const { startArrowhead = null, endArrowhead = "arrow" } = element;
+            let x = element.x;
+            let y = element.y;
+            let points = // migrate old arrow model to new one
+             !Array.isArray(element.points) || element.points.length < 2
+                ? [
+                    [0, 0],
+                    [element.width, element.height],
+                ]
+                : element.points;
+            if (points[0][0] !== 0 || points[0][1] !== 0) {
+                ({ points, x, y } = LinearElementEditor.getNormalizedPoints(element));
+            }
+            // TODO: Separate arrow from linear element
+            return restoreElementWithProperties(element, {
+                type: element.type,
+                startBinding: repairBinding(element, element.startBinding),
+                endBinding: repairBinding(element, element.endBinding),
+                lastCommittedPoint: null,
+                startArrowhead,
+                endArrowhead,
+                points,
+                x,
+                y,
+                elbowed: element.elbowed,
+                ...getSizeFromPoints(points),
             });
         }
         // generic elements
@@ -311,6 +348,18 @@ localElements, opts) => {
         if (opts.refreshDimensions && isTextElement(element)) {
             Object.assign(element, refreshTextDimensions(element, getContainerElement(element, restoredElementsMap), restoredElementsMap));
         }
+        if (isLinearElement(element)) {
+            if (element.startBinding &&
+                (!restoredElementsMap.has(element.startBinding.elementId) ||
+                    !isArrowElement(element))) {
+                element.startBinding = null;
+            }
+            if (element.endBinding &&
+                (!restoredElementsMap.has(element.endBinding.elementId) ||
+                    !isArrowElement(element))) {
+                element.endBinding = null;
+            }
+        }
     }
     return restoredElements;
 };

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/transform.js

@@ -1,12 +1,14 @@
 import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, TEXT_ALIGN, VERTICAL_ALIGN, } from "../constants";
 import { getCommonBounds, newElement, newLinearElement, redrawTextBoundingBox, } from "../element";
 import { bindLinearElement } from "../element/binding";
-import { newFrameElement, newImageElement, newMagicFrameElement, newTextElement, } from "../element/newElement";
-import { getDefaultLineHeight, measureText, normalizeText, } from "../element/textElement";
+import { newArrowElement, newFrameElement, newImageElement, newMagicFrameElement, newTextElement, } from "../element/newElement";
+import { measureText, normalizeText } from "../element/textElement";
 import { arrayToMap, assertNever, cloneJSON, getFontString, toBrandedType, } from "../utils";
 import { getSizeFromPoints } from "../points";
 import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
+import { getLineHeight } from "../fonts";
+import { isArrowElement } from "../element/typeChecks";
 const DEFAULT_LINEAR_ELEMENT_PROPS = {
     width: 100,
     height: 0,
@@ -273,7 +275,7 @@ export const convertToExcalidrawElements = (elementsSkeleton, opts) => {
             case "arrow": {
                 const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
                 const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
-                excalidrawElement = newLinearElement({
+                excalidrawElement = newArrowElement({
                     width,
                     height,
                     endArrowhead: "arrow",
@@ -282,6 +284,7 @@ export const convertToExcalidrawElements = (elementsSkeleton, opts) => {
                         [width, height],
                     ],
                     ...element,
+                    type: "arrow",
                 });
                 Object.assign(excalidrawElement, getSizeFromPoints(excalidrawElement.points));
                 break;
@@ -289,7 +292,7 @@ export const convertToExcalidrawElements = (elementsSkeleton, opts) => {
             case "text": {
                 const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY;
                 const fontSize = element?.fontSize || DEFAULT_FONT_SIZE;
-                const lineHeight = element?.lineHeight || getDefaultLineHeight(fontFamily);
+                const lineHeight = element?.lineHeight || getLineHeight(fontFamily);
                 const text = element.text ?? "";
                 const normalizedText = normalizeText(text);
                 const metrics = measureText(normalizedText, getFontString({ fontFamily, fontSize }), lineHeight);
@@ -362,7 +365,7 @@ export const convertToExcalidrawElements = (elementsSkeleton, opts) => {
                     let [container, text] = bindTextToContainer(excalidrawElement, element?.label, elementsMap);
                     elementStore.add(container);
                     elementStore.add(text);
-                    if (container.type === "arrow") {
+                    if (isArrowElement(container)) {
                         const originalStart = element.type === "arrow" ? element?.start : undefined;
                         const originalEnd = element.type === "arrow" ? element?.end : undefined;
                         if (originalStart && originalStart.id) {

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,6 +1,9 @@
-import { ExcalidrawBindableElement, ExcalidrawElement, NonDeleted, ExcalidrawLinearElement, NonDeletedExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap } from "./types";
-import { AppClassProperties, AppState } from "../types";
-import { ElementUpdate } from "./mutateElement";
+import type { ExcalidrawBindableElement, ExcalidrawElement, NonDeleted, ExcalidrawLinearElement, NonDeletedExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap, OrderedExcalidrawElement, ExcalidrawElbowArrowElement, FixedPoint } from "./types";
+import type { Bounds } from "./bounds";
+import type { AppState } from "../types";
+import type { ElementUpdate } from "./mutateElement";
+import type Scene from "../scene/Scene";
+import { type Heading } from "./heading";
 export type SuggestedBinding = NonDeleted<ExcalidrawBindableElement> | SuggestedPointBinding;
 export type SuggestedPointBinding = [
     NonDeleted<ExcalidrawLinearElement>,
@@ -9,29 +12,43 @@ 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 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 FIXED_BINDING_DISTANCE = 5;
+export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep", elementsMap: NonDeletedSceneElementsMap, scene: Scene) => void;
+export declare const bindOrUnbindLinearElements: (selectedElements: NonDeleted<ExcalidrawLinearElement>[], elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[], scene: Scene, isBindingEnabled: boolean, draggingPoints: readonly number[] | null) => void;
+export declare const getSuggestedBindingsForArrows: (selectedElements: NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap) => SuggestedBinding[];
 export declare const maybeBindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, appState: AppState, pointerCoords: {
     x: number;
     y: number;
-}, app: AppClassProperties) => void;
+}, elementsMap: NonDeletedSceneElementsMap, elements: readonly NonDeletedExcalidrawElement[]) => 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 getHoveredElementForBinding: (pointerCoords: {
     x: number;
     y: number;
-}, app: AppClassProperties) => NonDeleted<ExcalidrawBindableElement> | null;
-export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawElement, elementsMap: ElementsMap, options?: {
+}, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap, fullShape?: boolean) => NonDeleted<ExcalidrawBindableElement> | null;
+export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawElement, elementsMap: ElementsMap, scene: Scene, options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
-    newSize?: {
+    oldSize?: {
         width: number;
         height: number;
     };
+    changedElements?: Map<string, OrderedExcalidrawElement>;
 }) => void;
+export declare const getHeadingForElbowArrowSnap: (point: readonly [number, number], otherPoint: readonly [number, number], bindableElement: ExcalidrawBindableElement | undefined | null, aabb: Bounds | undefined | null, elementsMap: ElementsMap, origPoint: readonly [number, number]) => Heading;
+export declare const bindPointToSnapToElementOutline: (point: readonly [number, number], otherPoint: readonly [number, number], bindableElement: ExcalidrawBindableElement | undefined, elementsMap: ElementsMap) => readonly [number, number];
+export declare const avoidRectangularCorner: (element: ExcalidrawBindableElement, p: readonly [number, number]) => readonly [number, number];
+export declare const snapToMid: (element: ExcalidrawBindableElement, p: readonly [number, number], tolerance?: number) => readonly [number, number];
+export declare const calculateFixedPointForElbowArrowBinding: (linearElement: NonDeleted<ExcalidrawElbowArrowElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap) => {
+    fixedPoint: FixedPoint;
+};
 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;
+}, elementsMap: NonDeletedSceneElementsMap, fullShape?: boolean) => 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 bindingProperties: Set<BindableProp | BindingProp>;
 export type BindableProp = "boundElements";
 export type BindingProp = "frameId" | "containerId" | "startBinding" | "endBinding";
@@ -73,3 +90,5 @@ export declare class BindableElement {
      */
     static rebindAffected: (elements: ElementsMap, bindableElement: ExcalidrawElement | undefined, updateElementWith: (affected: ExcalidrawElement, updates: ElementUpdate<ExcalidrawElement>) => void) => void;
 }
+export declare const getGlobalFixedPointForBindableElement: (fixedPointRatio: [number, number], element: ExcalidrawBindableElement) => [number, number];
+export declare const getArrowLocalFixedPoints: (arrow: ExcalidrawElbowArrowElement, elementsMap: ElementsMap) => (readonly [number, number])[];