@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

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

@@ -1,15 +1,15 @@
-import { NonDeletedExcalidrawElement } from "./types";
-import { AppState, PointerDownState } from "../types";
-import Scene from "../scene/Scene";
-export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], offset: {
+import type { NonDeletedExcalidrawElement } from "./types";
+import type { AppState, NormalizedZoomValue, PointerDownState } from "../types";
+import type Scene from "../scene/Scene";
+export declare const dragSelectedElements: (pointerDownState: PointerDownState, _selectedElements: NonDeletedExcalidrawElement[], offset: {
     x: number;
     y: number;
-}, appState: AppState, scene: Scene, snapOffset: {
+}, scene: Scene, snapOffset: {
     x: number;
     y: number;
 }, gridSize: AppState["gridSize"]) => void;
 export declare const getDragOffsetXY: (selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
-export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: AppState["activeTool"]["type"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, widthAspectRatio?: number | null, originOffset?: {
+export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: AppState["activeTool"]["type"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, zoom: NormalizedZoomValue, widthAspectRatio?: number | null, originOffset?: {
     x: number;
     y: number;
 } | null) => void;

package/dist/excalidraw/element/dragElements.js

@@ -2,10 +2,22 @@ import { updateBoundElements } from "./binding";
 import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
-import { getBoundTextElement } from "./textElement";
+import { getBoundTextElement, getMinTextElementWidth } from "./textElement";
 import { getGridPoint } from "../math";
-import { isArrowElement, isFrameLikeElement } from "./typeChecks";
-export const dragSelectedElements = (pointerDownState, selectedElements, offset, appState, scene, snapOffset, gridSize) => {
+import { isArrowElement, isElbowArrow, isFrameLikeElement, isTextElement, } from "./typeChecks";
+import { getFontString } from "../utils";
+import { TEXT_AUTOWRAP_THRESHOLD } from "../constants";
+export const dragSelectedElements = (pointerDownState, _selectedElements, offset, scene, snapOffset, gridSize) => {
+    if (_selectedElements.length === 1 &&
+        isArrowElement(_selectedElements[0]) &&
+        isElbowArrow(_selectedElements[0]) &&
+        (_selectedElements[0].startBinding || _selectedElements[0].endBinding)) {
+        return;
+    }
+    const selectedElements = _selectedElements.filter((el) => !(isArrowElement(el) &&
+        isElbowArrow(el) &&
+        el.startBinding &&
+        el.endBinding));
     // we do not want a frame and its elements to be selected at the same time
     // but when it happens (due to some bug), we want to avoid updating element
     // in the frame twice, hence the use of set
@@ -32,7 +44,7 @@ export const dragSelectedElements = (pointerDownState, selectedElements, offset,
                 updateElementCoords(pointerDownState, textElement, adjustedOffset);
             }
         }
-        updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
+        updateBoundElements(element, scene.getElementsMapIncludingDeleted(), scene, {
             simultaneouslyUpdated: Array.from(elementsToUpdate),
         });
     });
@@ -68,7 +80,7 @@ export const getDragOffsetXY = (selectedElements, x, y) => {
     const [x1, y1] = getCommonBounds(selectedElements);
     return [x - x1, y - y1];
 };
-export const dragNewElement = (draggingElement, elementType, originX, originY, x, y, width, height, shouldMaintainAspectRatio, shouldResizeFromCenter, 
+export const dragNewElement = (draggingElement, elementType, originX, originY, x, y, width, height, shouldMaintainAspectRatio, shouldResizeFromCenter, zoom, 
 /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
     true */
 widthAspectRatio, originOffset = null) => {
@@ -99,12 +111,34 @@ widthAspectRatio, originOffset = null) => {
         newX = originX - width / 2;
         newY = originY - height / 2;
     }
+    let textAutoResize = null;
+    // NOTE this should apply only to creating text elements, not existing
+    // (once we rewrite appState.draggingElement to actually mean dragging
+    // elements)
+    if (isTextElement(draggingElement)) {
+        height = draggingElement.height;
+        const minWidth = getMinTextElementWidth(getFontString({
+            fontSize: draggingElement.fontSize,
+            fontFamily: draggingElement.fontFamily,
+        }), draggingElement.lineHeight);
+        width = Math.max(width, minWidth);
+        if (Math.abs(x - originX) > TEXT_AUTOWRAP_THRESHOLD / zoom) {
+            textAutoResize = {
+                autoResize: false,
+            };
+        }
+        newY = originY;
+        if (shouldResizeFromCenter) {
+            newX = originX - width / 2;
+        }
+    }
     if (width !== 0 && height !== 0) {
         mutateElement(draggingElement, {
             x: newX + (originOffset?.x ?? 0),
             y: newY + (originOffset?.y ?? 0),
             width,
             height,
+            ...textAutoResize,
         });
     }
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ExcalidrawProps } from "../types";
-import { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData } from "./types";
-import { MarkRequired } from "../utility-types";
+import type { ExcalidrawProps } from "../types";
+import type { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData } from "./types";
+import type { MarkRequired } from "../utility-types";
 type IframeDataWithSandbox = MarkRequired<IframeData, "sandbox">;
 export declare const createSrcDoc: (body: string) => string;
 export declare const getEmbedLink: (link: string | null | undefined) => IframeDataWithSandbox | null;
@@ -68,7 +68,9 @@ export declare const actionSetEmbeddableAsActiveTool: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("./types").Arrowhead | null;
             currentItemEndArrowhead: import("./types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("./types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -81,7 +83,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 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;
@@ -146,7 +148,10 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("./types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -167,7 +172,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
 } & {
     keyTest?: undefined;

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

@@ -0,0 +1,11 @@
+import type { Point } from "../../utils/geometry/shape";
+import type { ExcalidrawBindableElement } from "./types";
+export declare const HEADING_RIGHT: Heading;
+export declare const HEADING_DOWN: Heading;
+export declare const HEADING_LEFT: Heading;
+export declare const HEADING_UP: Heading;
+export type Heading = [1, 0] | [0, 1] | [-1, 0] | [0, -1];
+export declare const headingForDiamond: (a: Point, b: Point) => Heading;
+export declare const vectorToHeading: (vec: Point) => Heading;
+export declare const compareHeading: (a: Heading, b: Heading) => boolean;
+export declare const headingForPointFromElement: (element: Readonly<ExcalidrawBindableElement>, aabb: readonly [minX: number, minY: number, maxX: number, maxY: number], point: readonly [number, number]) => Heading;

package/dist/excalidraw/element/heading.js

@@ -0,0 +1,81 @@
+import { lineAngle } from "../../utils/geometry/geometry";
+import { getCenterForBounds, PointInTriangle, rotatePoint, scalePointFromOrigin, } from "../math";
+export const HEADING_RIGHT = [1, 0];
+export const HEADING_DOWN = [0, 1];
+export const HEADING_LEFT = [-1, 0];
+export const HEADING_UP = [0, -1];
+export const headingForDiamond = (a, b) => {
+    const angle = lineAngle([a, b]);
+    if (angle >= 315 || angle < 45) {
+        return HEADING_UP;
+    }
+    else if (angle >= 45 && angle < 135) {
+        return HEADING_RIGHT;
+    }
+    else if (angle >= 135 && angle < 225) {
+        return HEADING_DOWN;
+    }
+    return HEADING_LEFT;
+};
+export const vectorToHeading = (vec) => {
+    const [x, y] = vec;
+    const absX = Math.abs(x);
+    const absY = Math.abs(y);
+    if (x > absY) {
+        return HEADING_RIGHT;
+    }
+    else if (x <= -absY) {
+        return HEADING_LEFT;
+    }
+    else if (y > absX) {
+        return HEADING_DOWN;
+    }
+    return HEADING_UP;
+};
+export const compareHeading = (a, b) => a[0] === b[0] && a[1] === b[1];
+// Gets the heading for the point by creating a bounding box around the rotated
+// close fitting bounding box, then creating 4 search cones around the center of
+// the external bbox.
+export const headingForPointFromElement = (element, aabb, point) => {
+    const SEARCH_CONE_MULTIPLIER = 2;
+    const midPoint = getCenterForBounds(aabb);
+    if (element.type === "diamond") {
+        if (point[0] < element.x) {
+            return HEADING_LEFT;
+        }
+        else if (point[1] < element.y) {
+            return HEADING_UP;
+        }
+        else if (point[0] > element.x + element.width) {
+            return HEADING_RIGHT;
+        }
+        else if (point[1] > element.y + element.height) {
+            return HEADING_DOWN;
+        }
+        const top = rotatePoint(scalePointFromOrigin([element.x + element.width / 2, element.y], midPoint, SEARCH_CONE_MULTIPLIER), midPoint, element.angle);
+        const right = rotatePoint(scalePointFromOrigin([element.x + element.width, element.y + element.height / 2], midPoint, SEARCH_CONE_MULTIPLIER), midPoint, element.angle);
+        const bottom = rotatePoint(scalePointFromOrigin([element.x + element.width / 2, element.y + element.height], midPoint, SEARCH_CONE_MULTIPLIER), midPoint, element.angle);
+        const left = rotatePoint(scalePointFromOrigin([element.x, element.y + element.height / 2], midPoint, SEARCH_CONE_MULTIPLIER), midPoint, element.angle);
+        if (PointInTriangle(point, top, right, midPoint)) {
+            return headingForDiamond(top, right);
+        }
+        else if (PointInTriangle(point, right, bottom, midPoint)) {
+            return headingForDiamond(right, bottom);
+        }
+        else if (PointInTriangle(point, bottom, left, midPoint)) {
+            return headingForDiamond(bottom, left);
+        }
+        return headingForDiamond(left, top);
+    }
+    const topLeft = scalePointFromOrigin([aabb[0], aabb[1]], midPoint, SEARCH_CONE_MULTIPLIER);
+    const topRight = scalePointFromOrigin([aabb[2], aabb[1]], midPoint, SEARCH_CONE_MULTIPLIER);
+    const bottomLeft = scalePointFromOrigin([aabb[0], aabb[3]], midPoint, SEARCH_CONE_MULTIPLIER);
+    const bottomRight = scalePointFromOrigin([aabb[2], aabb[3]], midPoint, SEARCH_CONE_MULTIPLIER);
+    return PointInTriangle(point, topLeft, topRight, midPoint)
+        ? HEADING_UP
+        : PointInTriangle(point, topRight, bottomRight, midPoint)
+            ? HEADING_RIGHT
+            : PointInTriangle(point, bottomRight, bottomLeft, midPoint)
+                ? HEADING_DOWN
+                : HEADING_LEFT;
+};

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

@@ -1,5 +1,5 @@
-import { AppClassProperties, DataURL, BinaryFiles } from "../types";
-import { ExcalidrawElement, FileId, InitializedExcalidrawImageElement } from "./types";
+import type { AppClassProperties, DataURL, BinaryFiles } from "../types";
+import type { ExcalidrawElement, FileId, InitializedExcalidrawImageElement } from "./types";
 export declare const loadHTMLImageElement: (dataURL: DataURL) => Promise<HTMLImageElement>;
 /** NOTE: updates cache even if already populated with given image. Thus,
  * you should filter out the images upstream if you want to optimize this. */

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

@@ -1,5 +1,5 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
-export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
+export { newElement, newTextElement, refreshTextDimensions, newLinearElement, newArrowElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";

package/dist/excalidraw/element/index.js

@@ -1,6 +1,6 @@
 import { isInvisiblySmallElement } from "./sizeHelpers";
 import { isLinearElementType } from "./typeChecks";
-export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
+export { newElement, newTextElement, refreshTextDimensions, newLinearElement, newArrowElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer, ElementsMap, NonDeletedSceneElementsMap } from "./types";
-import { Bounds } from "./bounds";
-import { Point, AppState, PointerCoords, InteractiveCanvasAppState, AppClassProperties } from "../types";
-import { Store } from "../store";
+import type { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer, ElementsMap, NonDeletedSceneElementsMap, OrderedExcalidrawElement } from "./types";
+import type { Bounds } from "./bounds";
+import type { Point, AppState, PointerCoords, InteractiveCanvasAppState } from "../types";
+import type { Store } from "../store";
+import type Scene from "../scene/Scene";
 declare const editorMidPointsCache: {
     version: number | null;
     points: (Point | null)[];
@@ -18,6 +19,7 @@ export declare class LinearElementEditor {
         prevSelectedPointsIndices: readonly number[] | null;
         /** index */
         lastClickedPoint: number;
+        lastClickedIsEndPoint: boolean;
         origin: Readonly<{
             x: number;
             y: number;
@@ -51,8 +53,8 @@ export declare class LinearElementEditor {
     static handlePointDragging(event: PointerEvent, appState: AppState, scenePointerX: number, scenePointerY: number, maybeSuggestBinding: (element: NonDeleted<ExcalidrawLinearElement>, pointSceneCoords: {
         x: number;
         y: number;
-    }[]) => void, linearElementEditor: LinearElementEditor, elementsMap: NonDeletedSceneElementsMap): boolean;
-    static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState, app: AppClassProperties): LinearElementEditor;
+    }[]) => void, linearElementEditor: LinearElementEditor, scene: Scene): boolean;
+    static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState, scene: Scene): LinearElementEditor;
     static getEditorMidPoints: (element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap, appState: InteractiveCanvasAppState) => (typeof editorMidPointsCache)["points"];
     static updateEditorMidPointsCache: (element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap, appState: InteractiveCanvasAppState) => void;
     static getSegmentMidpointHitCoords: (linearElementEditor: LinearElementEditor, scenePointer: {
@@ -65,13 +67,13 @@ export declare class LinearElementEditor {
     static handlePointerDown(event: React.PointerEvent<HTMLElement>, appState: AppState, store: Store, scenePointer: {
         x: number;
         y: number;
-    }, linearElementEditor: LinearElementEditor, app: AppClassProperties): {
+    }, linearElementEditor: LinearElementEditor, scene: Scene): {
         didAddPoint: boolean;
         hitElement: NonDeleted<ExcalidrawElement> | null;
         linearElementEditor: LinearElementEditor | null;
     };
     static arePointsEqual(point1: Point | null, point2: Point | null): boolean;
-    static handlePointerMove(event: React.PointerEvent<HTMLCanvasElement>, scenePointerX: number, scenePointerY: number, appState: AppState, elementsMap: ElementsMap): LinearElementEditor | null;
+    static handlePointerMove(event: React.PointerEvent<HTMLCanvasElement>, scenePointerX: number, scenePointerY: number, appState: AppState, scene: Scene): LinearElementEditor | null;
     /** scene coords */
     static getPointGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, point: Point, elementsMap: ElementsMap): readonly [number, number];
     /** scene coords */
@@ -92,7 +94,7 @@ export declare class LinearElementEditor {
         y: number;
     };
     static normalizePoints(element: NonDeleted<ExcalidrawLinearElement>): void;
-    static duplicateSelectedPoints(appState: AppState, elementsMap: ElementsMap): false | {
+    static duplicateSelectedPoints(appState: AppState, scene: Scene): false | {
         appState: {
             editingLinearElement: {
                 selectedPointsIndices: number[];
@@ -103,6 +105,7 @@ export declare class LinearElementEditor {
                     prevSelectedPointsIndices: readonly number[] | null;
                     /** index */
                     lastClickedPoint: number;
+                    lastClickedIsEndPoint: boolean;
                     origin: Readonly<{
                         x: number;
                         y: number;
@@ -175,7 +178,9 @@ export declare class LinearElementEditor {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("./types").Arrowhead | null;
             currentItemEndArrowhead: import("./types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("./types").StrokeRoundness;
+            currentItemArrowType: "sharp" | "round" | "elbow";
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -188,7 +193,7 @@ export declare class LinearElementEditor {
                 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;
@@ -253,7 +258,10 @@ export declare class LinearElementEditor {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("./types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -275,17 +283,20 @@ export declare class LinearElementEditor {
             followedBy: Set<import("../types").SocketId>;
         };
     };
-    static deletePoints(element: NonDeleted<ExcalidrawLinearElement>, pointIndices: readonly number[]): void;
+    static deletePoints(element: NonDeleted<ExcalidrawLinearElement>, pointIndices: readonly number[], scene: Scene): void;
     static addPoints(element: NonDeleted<ExcalidrawLinearElement>, appState: AppState, targetPoints: {
         point: Point;
-    }[]): void;
+    }[], scene: Scene): void;
     static movePoints(element: NonDeleted<ExcalidrawLinearElement>, targetPoints: {
         index: number;
         point: Point;
         isDragging?: boolean;
-    }[], otherUpdates?: {
-        startBinding?: PointBinding;
-        endBinding?: PointBinding;
+    }[], scene: Scene, otherUpdates?: {
+        startBinding?: PointBinding | null;
+        endBinding?: PointBinding | null;
+    }, options?: {
+        changedElements?: Map<string, OrderedExcalidrawElement>;
+        isDragging?: boolean;
     }): void;
     static shouldAddMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState, elementsMap: ElementsMap): boolean;
     static addMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState, snapToGrid: boolean, elementsMap: ElementsMap): {