@excalidraw/element 0.18.0-4a5c9e9 → 0.18.0-4ce38fb

package/dist/types/common/src/colors.d.ts

@@ -1,4 +1,5 @@
-export declare const applyDarkModeFilter: (color: string) => string;
+export declare const applyDarkModeFilter: (color: string, enable?: boolean) => string;
+export declare const removeDarkModeFilter: (color: string) => string;
 export type ColorTuple = readonly [string, string, string, string, string];
 export type ColorPaletteCustom = {
     [key: string]: ColorTuple | string;
@@ -28,8 +29,16 @@ export declare const COLOR_PALETTE: {
 };
 export type ColorPalette = typeof COLOR_PALETTE;
 export type ColorPickerColor = keyof typeof COLOR_PALETTE;
+/** number of slots in the color-picker top-picks strip — the strip layout is
+ * sized for exactly this many swatches, and pick customization (replace /
+ * reorder) preserves it */
+export declare const COLOR_TOP_PICKS_SLOTS = 5;
 export declare const DEFAULT_ELEMENT_STROKE_PICKS: ColorTuple;
 export declare const DEFAULT_ELEMENT_BACKGROUND_PICKS: ColorTuple;
+export declare const BUCKET_FILL_BACKGROUND_PICKS: ColorTuple;
+export declare const DEFAULT_STICKY_NOTE_BG = "#ffdf6b";
+export declare const STICKY_NOTE_STROKE_PICKS: ColorTuple;
+export declare const STICKY_NOTE_BACKGROUND_PICKS: ColorTuple;
 export declare const DEFAULT_CANVAS_BACKGROUND_PICKS: ColorTuple;
 export declare const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE: {
     readonly cyan: readonly ["#e3fafc", "#99e9f2", "#3bc9db", "#15aabf", "#0c8599"];
@@ -67,12 +76,25 @@ export declare const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE: {
 };
 export declare const getAllColorsSpecificShade: (index: 0 | 1 | 2 | 3 | 4) => ("#fff5f5" | "#ffc9c9" | "#ff8787" | "#fa5252" | "#e03131" | "#fff0f6" | "#fcc2d7" | "#f783ac" | "#e64980" | "#c2255c" | "#f8f0fc" | "#eebefa" | "#da77f2" | "#be4bdb" | "#9c36b5" | "#f3f0ff" | "#d0bfff" | "#9775fa" | "#7950f2" | "#6741d9" | "#e7f5ff" | "#a5d8ff" | "#4dabf7" | "#228be6" | "#1971c2" | "#e3fafc" | "#99e9f2" | "#3bc9db" | "#15aabf" | "#0c8599" | "#e6fcf5" | "#96f2d7" | "#38d9a9" | "#12b886" | "#099268" | "#ebfbee" | "#b2f2bb" | "#69db7c" | "#40c057" | "#2f9e44" | "#fff9db" | "#ffec99" | "#ffd43b" | "#fab005" | "#f08c00" | "#fff4e6" | "#ffd8a8" | "#ffa94d" | "#fd7e14" | "#e8590c")[];
 export declare const rgbToHex: (r: number, g: number, b: number, a?: number) => string;
+/**
+ * @returns the color with its alpha replaced by `alpha` (as #RRGGBBAA), or the
+ *  input unchanged if it's not a valid color
+ */
+export declare const setColorAlpha: (color: string, alpha: number) => string;
 /**
  * @returns #RRGGBB or #RRGGBBAA based on color containing non-opaque alpha,
  *  null if not valid color
  */
 export declare const colorToHex: (color: string) => string | null;
 export declare const isTransparent: (color: string) => boolean;
+/**
+ * Whether the color is fully opaque (alpha exactly 1).
+ *
+ * NOT the negation of `isTransparent`, which is true only at alpha 0 — a
+ * partial-alpha color (`#RRGGBBAA`, `rgba(…, 0.5)`) is neither transparent
+ * (it renders) nor opaque (what's beneath shows through it).
+ */
+export declare const isOpaqueColor: (color: string) => boolean;
 export declare const COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
 export declare const isColorDark: (color: string, threshold?: number) => boolean;
 /**

package/dist/types/common/src/constants.d.ts

@@ -1,8 +1,11 @@
 import type { ExcalidrawElement, FontFamilyValues } from "@excalidraw/element/types";
 import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
+export { DEFAULT_STICKY_NOTE_BG } from "./colors";
 export declare const supportsResizeObserver: boolean;
 export declare const APP_NAME = "Excalidraw";
 export declare const TEXT_AUTOWRAP_THRESHOLD = 36;
+export declare const TEXT_VIEWPORT_PADDING = 20;
+export declare const TEXT_MAX_WRAP_WIDTH = 800;
 export declare const DRAGGING_THRESHOLD = 10;
 export declare const MINIMUM_ARROW_SIZE = 20;
 export declare const LINE_CONFIRM_THRESHOLD = 8;
@@ -52,6 +55,7 @@ export declare enum EVENT {
     POINTER_MOVE = "pointermove",
     POINTER_DOWN = "pointerdown",
     POINTER_UP = "pointerup",
+    POINTER_CANCEL = "pointercancel",
     STATE_CHANGE = "statechange",
     WHEEL = "wheel",
     TOUCH_START = "touchstart",
@@ -150,7 +154,53 @@ export declare const FRAME_STYLE: {
 };
 export declare const MIN_FONT_SIZE = 1;
 export declare const DEFAULT_FONT_SIZE = 20;
+export declare const STICKY_NOTE_MIN_FONT_SIZE = 16;
+export declare const STICKY_NOTE_MAX_FONT_SIZE = 512;
+export declare const STICKY_NOTE_FALLBACK_FONT_SIZE = 28;
+export declare const STICKY_NOTE_FONT_STEP = 2;
+export declare const STICKY_NOTE_PADDING = 16;
+/**
+ * The creation-date footer: a 20px text row under the label body plus a 12px
+ * gap above it, inside the note's bottom padding. Reserved for every note —
+ * also when `created` is unknown — so geometry never depends on data
+ * availability. The label is chosen by width bucket, never measured, so
+ * painting stays measurement-free (the server has no text measurer):
+ * `minBodyWidthForYear` is the worst case ("30 May 2026") in the system sans
+ * stack at 12px, with margin for wider fallbacks such as DejaVu Sans.
+ */
+/**
+ * The creation-date footer of a sticky note. The label body ends `height`
+ * above the note's bottom padding, and the date's baseline sits
+ * `baselineFromBottom` above the note's bottom edge — so the 12px glyphs
+ * (~9px above the baseline, ~3px below) end up roughly 11px from the edge
+ * with a ~13px gap to the label body above them.
+ */
+export declare const STICKY_NOTE_FOOTER: {
+    readonly height: 20;
+    readonly fontSize: 12;
+    readonly fontFamily: "Helvetica, Arial, sans-serif";
+    readonly baselineFromBottom: 14;
+    readonly opacity: 1;
+    readonly minBodyWidthForYear: 80;
+};
+/**
+ * outer height → label body height: top + bottom padding + footer. The body
+ * is what the label is fitted into; a middle-aligned label is still centered
+ * in the whole padded note when it fits (see `computeBoundTextPosition`).
+ */
+export declare const STICKY_NOTE_BODY_INSET_Y: number;
+export declare const DEFAULT_STICKY_NOTE_SIZE = 250;
+export declare const STICKY_NOTE_MIN_SIZE = 75;
+export declare const STICKY_NOTE_SHADOW_OFFSET = 3;
+export declare const STICKY_NOTE_SHADOW_OPACITY = 0.16;
+export declare const STICKY_NOTE_EDGE_SHADOW_WIDTH = 0.5;
+export declare const STICKY_NOTE_EDGE_SHADOW_OPACITY = 0.08;
 export declare const DEFAULT_FONT_FAMILY: FontFamilyValues;
+/** number of slots in the font-picker top-picks strip — pick customization
+ * (replace / reorder) preserves it. Must equal `DEFAULT_FONTS.length` in
+ * `packages/excalidraw/components/FontPicker/FontPicker.tsx` (enforced by
+ * `fontTopPicks.test.ts`) */
+export declare const FONT_TOP_PICKS_SLOTS = 3;
 export declare const DEFAULT_TEXT_ALIGN = "left";
 export declare const DEFAULT_VERTICAL_ALIGN = "top";
 export declare const DEFAULT_VERSION = "{version}";
@@ -224,9 +274,12 @@ export declare const TOUCH_CTX_MENU_TIMEOUT = 500;
 export declare const TITLE_TIMEOUT = 10000;
 export declare const VERSION_TIMEOUT = 30000;
 export declare const SCROLL_TIMEOUT = 100;
+export declare const ZEN_MODE_TRANSITION_DURATION = 250;
 export declare const ZOOM_STEP = 0.1;
 export declare const MIN_ZOOM = 0.1;
 export declare const MAX_ZOOM = 30;
+/** 100% zoom, for computations that have no editor zoom to go by */
+export declare const DEFAULT_ZOOM: AppState["zoom"];
 export declare const HYPERLINK_TOOLTIP_DELAY = 300;
 export declare const IDLE_THRESHOLD = 60000;
 export declare const ACTIVE_THRESHOLD = 3000;
@@ -240,8 +293,7 @@ export declare const DEFAULT_UI_OPTIONS: AppProps["UIOptions"];
 export declare const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export declare const EXPORT_SCALES: number[];
 export declare const DEFAULT_EXPORT_PADDING = 10;
-export declare const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
-export declare const MAX_ALLOWED_FILE_BYTES: number;
+export declare const DEFAULT_IMAGE_OPTIONS: AppProps["imageOptions"];
 export declare const SVG_NS = "http://www.w3.org/2000/svg";
 export declare const SVG_DOCUMENT_PREAMBLE = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
 export declare const ENCRYPTION_KEY_BITS = 128;
@@ -263,6 +315,7 @@ export declare const TEXT_ALIGN: {
     RIGHT: string;
 };
 export declare const ELEMENT_READY_TO_ERASE_OPACITY = 20;
+export declare const ELEMENT_PENDING_DRAW_SHAPE_OPACITY = 70;
 export declare const DEFAULT_PROPORTIONAL_RADIUS = 0.25;
 export declare const DEFAULT_ADAPTIVE_RADIUS = 32;
 export declare const ROUNDNESS: {
@@ -275,11 +328,12 @@ export declare const ROUGHNESS: {
     readonly artist: 1;
     readonly cartoonist: 2;
 };
-export declare const STROKE_WIDTH: {
-    readonly thin: 1;
-    readonly bold: 2;
-    readonly extraBold: 4;
-};
+export type StrokeWidthKey = "thin" | "medium" | "bold";
+export declare const STROKE_WIDTH_KEYS: readonly StrokeWidthKey[];
+export declare const STROKE_WIDTH: Readonly<Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>>;
+export declare const FREEDRAW_STROKE_WIDTH: Readonly<Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>>;
+export declare const getStrokeWidthByKey: (elementType: ExcalidrawElement["type"], strokeWidthKey: StrokeWidthKey) => ExcalidrawElement["strokeWidth"];
+export declare const DEFAULT_ELEMENT_STROKE_WIDTH_KEY: StrokeWidthKey;
 export declare const DEFAULT_ELEMENT_PROPS: {
     strokeColor: ExcalidrawElement["strokeColor"];
     backgroundColor: ExcalidrawElement["backgroundColor"];
@@ -312,8 +366,11 @@ export declare const TOOL_TYPE: {
     readonly hand: "hand";
     readonly frame: "frame";
     readonly magicframe: "magicframe";
+    readonly stickynote: "stickynote";
     readonly embeddable: "embeddable";
     readonly laser: "laser";
+    readonly autoshape: "autoshape";
+    readonly bucketfill: "bucketfill";
 };
 export declare const EDITOR_LS_KEYS: {
     readonly OAI_API_KEY: "excalidraw-oai-api-key";
@@ -353,3 +410,5 @@ export declare const BIND_MODE_TIMEOUT = 700;
 export declare const MOBILE_ACTION_BUTTON_BG: {
     readonly background: "var(--mobile-action-button-bg)";
 };
+export declare const DEFAULT_STROKE_STREAMLINE = 0.5;
+export declare const DEFAULT_STROKE_STREAMLINE_PRECISE = 0.2;

package/dist/types/common/src/keys.d.ts

@@ -46,6 +46,7 @@ export declare const KEYS: {
     readonly SUBTRACT: "-";
     readonly SLASH: "/";
     readonly A: "a";
+    readonly B: "b";
     readonly C: "c";
     readonly D: "d";
     readonly E: "e";
@@ -54,6 +55,7 @@ export declare const KEYS: {
     readonly H: "h";
     readonly I: "i";
     readonly L: "l";
+    readonly N: "n";
     readonly O: "o";
     readonly P: "p";
     readonly Q: "q";
@@ -101,6 +103,7 @@ export declare const KeyCodeMap: Map<ValueOf<{
     readonly SUBTRACT: "-";
     readonly SLASH: "/";
     readonly A: "a";
+    readonly B: "b";
     readonly C: "c";
     readonly D: "d";
     readonly E: "e";
@@ -109,6 +112,7 @@ export declare const KeyCodeMap: Map<ValueOf<{
     readonly H: "h";
     readonly I: "i";
     readonly L: "l";
+    readonly N: "n";
     readonly O: "o";
     readonly P: "p";
     readonly Q: "q";

package/dist/types/common/src/points.d.ts

@@ -6,4 +6,4 @@ export declare const getSizeFromPoints: (points: readonly (GlobalPoint | LocalPo
 };
 /** @arg dimension, 0 for rescaling only x, 1 for y */
 export declare const rescalePoints: <Point extends GlobalPoint | LocalPoint>(dimension: 0 | 1, newSize: number, points: readonly Point[], normalize: boolean) => Point[];
-export declare const getGridPoint: (x: number, y: number, gridSize: NullableGridSize) => [number, number];
+export declare const getGridPoint: (x: number, y: number, gridSize: NullableGridSize) => GlobalPoint;

package/dist/types/common/src/random.d.ts

@@ -1,3 +1,10 @@
 export declare const randomInteger: () => number;
 export declare const reseed: (seed: number) => void;
 export declare const randomId: () => string;
+/**
+ * Deterministic PRNG (mulberry32) for a given seed: same seed, same
+ * sequence — used where a render must be stable across frames and clients
+ * (e.g. the sticky note's corner jitter) and roughjs's `Random` is
+ * unsuitable (it degenerates for seed 0). Returns numbers in [0, 1).
+ */
+export declare const seededRandom: (seed: number) => () => number;

package/dist/types/common/src/utils.d.ts

@@ -37,48 +37,6 @@ export declare const throttleRAF: <T extends any[]>(fn: (...args: T) => void) =>
  * @returns {number} The tweened value.
  */
 export declare const easeOut: (k: number) => number;
-/**
- * Animates values from `fromValues` to `toValues` using the requestAnimationFrame API.
- * Executes the `onStep` callback on each step with the interpolated values.
- * Returns a function that can be called to cancel the animation.
- *
- * @example
- * // Example usage:
- * const fromValues = { x: 0, y: 0 };
- * const toValues = { x: 100, y: 200 };
- * const onStep = ({x, y}) => {
- *   setState(x, y)
- * };
- * const onCancel = () => {
- *   console.log("Animation canceled");
- * };
- *
- * const cancelAnimation = easeToValuesRAF({
- *   fromValues,
- *   toValues,
- *   onStep,
- *   onCancel,
- * });
- *
- * // To cancel the animation:
- * cancelAnimation();
- */
-export declare const easeToValuesRAF: <T extends Record<keyof T, number>, K extends keyof T>({ fromValues, toValues, onStep, duration, interpolateValue, onStart, onEnd, onCancel, }: {
-    fromValues: T;
-    toValues: T;
-    /**
-     * Interpolate a single value.
-     * Return undefined to be handled by the default interpolator.
-     */
-    interpolateValue?: (fromValue: number, toValue: number, 
-    /** no easing applied  */
-    progress: number, key: K) => number | undefined;
-    onStep: (values: T) => void;
-    duration?: number;
-    onStart?: () => void;
-    onEnd?: () => void;
-    onCancel?: () => void;
-}) => () => void;
 export declare const chunk: <T extends any>(array: readonly T[], size: number) => T[][];
 export declare const selectNode: (node: Element) => void;
 export declare const removeSelection: () => void;
@@ -93,7 +51,7 @@ export declare const updateActiveTool: (appState: Pick<AppState, "activeTool">,
     locked?: boolean;
     fromSelection?: boolean;
 }) & {
-    lastActiveToolBeforeEraser?: ActiveTool | null;
+    lastActiveTool?: ActiveTool | null;
 }) => AppState["activeTool"];
 export declare const isFullScreen: () => boolean;
 export declare const allowFullScreen: () => Promise<void>;
@@ -129,6 +87,11 @@ export declare const getGlobalCSSVariable: (name: string) => string;
  * See https://github.com/excalidraw/excalidraw/pull/1722#discussion_r436340171
  */
 export declare const isRTL: (text: string) => boolean;
+/**
+ * Checks whether the text has any RTL character, i.e. whether it may be laid
+ * out bidirectionally.
+ */
+export declare const hasRTLChars: (text: string) => boolean;
 export declare const tupleToCoors: (xyTuple: readonly [number, number]) => {
     x: number;
     y: number;

package/dist/types/element/src/Scene.d.ts

@@ -40,7 +40,7 @@ export declare class Scene {
         elements?: ElementsMapOrArray;
         includeBoundTextElement?: boolean;
         includeElementsInFrames?: boolean;
-    }): NonDeleted<ExcalidrawElement>[];
+    }): NonDeletedExcalidrawElement[];
     getNonDeletedFramesLikes(): readonly NonDeleted<ExcalidrawFrameLikeElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;
@@ -63,14 +63,16 @@ export declare class Scene {
     triggerUpdate(): void;
     onUpdate(cb: SceneStateCallback): SceneStateCallbackRemover;
     destroy(): void;
-    insertElementAtIndex(element: ExcalidrawElement, index: number): void;
-    insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;
+    /** low-level - generally use app.insertNewElements() */
+    insertElementsAtIndex(elements: ExcalidrawElement[], 
+    /** null indicates end of the array */
+    index: number | null): void;
+    /** low-level - generally use app.insertNewElement() */
     insertElement: (element: ExcalidrawElement) => void;
-    insertElements: (elements: ExcalidrawElement[]) => void;
     getElementIndex(elementId: string): number;
     getContainerElement: (element: (ExcalidrawElement & {
         containerId: ExcalidrawElement["id"] | null;
-    }) | null) => import("@excalidraw/element/types").ExcalidrawLinearElement | import("@excalidraw/element/types").ExcalidrawSelectionElement | import("@excalidraw/element/types").ExcalidrawRectangleElement | import("@excalidraw/element/types").ExcalidrawDiamondElement | import("@excalidraw/element/types").ExcalidrawEllipseElement | import("@excalidraw/element/types").ExcalidrawEmbeddableElement | import("@excalidraw/element/types").ExcalidrawIframeElement | import("@excalidraw/element/types").ExcalidrawImageElement | import("@excalidraw/element/types").ExcalidrawFrameElement | import("@excalidraw/element/types").ExcalidrawMagicFrameElement | import("@excalidraw/element/types").ExcalidrawTextElement | import("@excalidraw/element/types").ExcalidrawFreeDrawElement | null;
+    }) | null) => import("@excalidraw/element/types").ExcalidrawLinearElement | import("@excalidraw/element/types").ExcalidrawSelectionElement | import("@excalidraw/element/types").ExcalidrawRectangleElement | import("@excalidraw/element/types").ExcalidrawStickyNoteElement | import("@excalidraw/element/types").ExcalidrawDiamondElement | import("@excalidraw/element/types").ExcalidrawEllipseElement | import("@excalidraw/element/types").ExcalidrawEmbeddableElement | import("@excalidraw/element/types").ExcalidrawIframeElement | import("@excalidraw/element/types").ExcalidrawImageElement | import("@excalidraw/element/types").ExcalidrawFrameElement | import("@excalidraw/element/types").ExcalidrawMagicFrameElement | import("@excalidraw/element/types").ExcalidrawTextElement | import("@excalidraw/element/types").ExcalidrawFreeDrawElement | null;
     getElementsFromId: (id: string) => ExcalidrawElement[];
     mutateElement<TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, options?: {
         informMutation: boolean;

package/dist/types/element/src/align.d.ts

@@ -1,8 +1,8 @@
 import type { AppState } from "@excalidraw/excalidraw/types";
 import type { Scene } from "./Scene";
-import type { ExcalidrawElement } from "./types";
+import type { NonDeletedExcalidrawElement } from "./types";
 export interface Alignment {
     position: "start" | "center" | "end";
     axis: "x" | "y";
 }
-export declare const alignElements: (selectedElements: ExcalidrawElement[], alignment: Alignment, scene: Scene, appState: Readonly<AppState>) => ExcalidrawElement[];
+export declare const alignElements: (selectedElements: NonDeletedExcalidrawElement[], alignment: Alignment, scene: Scene, appState: Readonly<AppState>) => NonDeletedExcalidrawElement[];

package/dist/types/element/src/arrowEndpointText.d.ts

@@ -0,0 +1,49 @@
+import type { GlobalPoint } from "@excalidraw/math";
+import type { AppState } from "@excalidraw/excalidraw/types";
+import type { ElementsMap, ExcalidrawArrowElement, ExcalidrawTextElement, FixedPoint, NonDeleted, NonDeletedExcalidrawElement, TextAlign, VerticalAlign } from "./types";
+export type ArrowEndpoint = {
+    arrow: NonDeleted<ExcalidrawArrowElement>;
+    startOrEnd: "start" | "end";
+};
+/**
+ * Finds a free (unbound) arrow endpoint under the cursor, front-most first.
+ * Used by the text tool to offer creating a text label anchored to the tip of
+ * an arrow.
+ */
+export declare const getUnboundArrowEndpointAtPoint: (scenePointer: GlobalPoint, elements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, zoom: AppState["zoom"]) => ArrowEndpoint | null;
+/**
+ * Describes how a text element should be created so that it reads as a label
+ * for the given arrow endpoint.
+ *
+ * The arrow is treated as fixed: rather than routing the arrow to the text, we
+ * pick the side of the text the arrow should attach to (the one it already
+ * points at), and place the text so that side's midpoint lands on the existing
+ * endpoint. The alignment returned pins that same midpoint while the text is
+ * typed, so the arrow doesn't swing around during editing.
+ */
+export declare const getTextBindingForArrowEndpoint: (arrow: NonDeleted<ExcalidrawArrowElement>, startOrEnd: "start" | "end", elementsMap: ElementsMap, 
+/**
+ * stroke width the text will be created with — the binding gap is derived
+ * from the *bind target*, so using the arrow's would offset the anchor by
+ * half the difference between the two
+ */
+targetStrokeWidth: number) => {
+    /** the text-local ratio the arrow binds to (a side midpoint) */
+    fixedPoint: FixedPoint;
+    textAlign: TextAlign;
+    verticalAlign: VerticalAlign;
+    /** scene position the text's bound side midpoint should sit at */
+    anchor: GlobalPoint;
+} | null;
+/**
+ * Whether an arrow endpoint is bound to this text — i.e. the text serves as an
+ * arrow-endpoint label. Checked on the arrows' own bindings: the text's
+ * `boundElements` only says an arrow relates to it, while the binding on the
+ * arrow is the authoritative side of the relationship.
+ */
+export declare const isEndpointBoundText: (text: ExcalidrawTextElement, elementsMap: ElementsMap) => boolean;
+/** the anchor a text bound to an arrow endpoint grows away from */
+export declare const getEndpointBoundTextDragAnchor: (newElement: ExcalidrawTextElement) => {
+    anchorRatio: number;
+    anchorX: number;
+};

package/dist/types/element/src/arrows/focus.d.ts

@@ -1,7 +1,7 @@
 import { type GlobalPoint } from "@excalidraw/math";
 import type { AppState, NullableGridSize } from "@excalidraw/excalidraw/types";
 import { LinearElementEditor } from "../linearElementEditor";
-import type { ElementsMap, ExcalidrawArrowElement, ExcalidrawBindableElement, NonDeletedSceneElementsMap } from "../types";
+import type { ElementsMap, ExcalidrawArrowElement, ExcalidrawBindableElement, FixedPointBinding, NonDeletedSceneElementsMap } from "../types";
 import type { Scene } from "../Scene";
 export declare const isFocusPointVisible: (focusPoint: GlobalPoint, arrow: ExcalidrawArrowElement, bindableElement: ExcalidrawBindableElement, elementsMap: ElementsMap, appState: {
     isBindingEnabled: AppState["isBindingEnabled"];
@@ -22,6 +22,9 @@ export declare const handleFocusPointPointerDown: (arrow: ExcalidrawArrowElement
         x: number;
         y: number;
     };
+    arrowOtherEndpointInitialBinding: FixedPointBinding | null;
+};
+export declare const handleFocusPointPointerUp: (linearElementEditor: LinearElementEditor, scene: Scene) => {
+    arrowOtherEndpointInitialBinding: null;
 };
-export declare const handleFocusPointPointerUp: (linearElementEditor: LinearElementEditor, scene: Scene) => void;
 export declare const handleFocusPointHover: (arrow: ExcalidrawArrowElement, scenePointerX: number, scenePointerY: number, scene: Scene, appState: AppState) => "start" | "end" | null;

package/dist/types/element/src/binding.d.ts

@@ -1,6 +1,6 @@
 import { type GlobalPoint } from "@excalidraw/math";
 import type { LineSegment, LocalPoint } from "@excalidraw/math";
-import type { AppState } from "@excalidraw/excalidraw/types";
+import type { AppState, NullableGridSize } from "@excalidraw/excalidraw/types";
 import type { Bounds } from "@excalidraw/common";
 import { type Heading } from "./heading";
 import type { Scene } from "./Scene";
@@ -25,10 +25,9 @@ export type BindingStrategy = {
  * IMPORTANT: currently must be > 0 (this also applies to the computed gap)
  */
 export declare const BASE_BINDING_GAP = 5;
-export declare const BASE_BINDING_GAP_ELBOW = 5;
 export declare const BASE_ARROW_MIN_LENGTH = 10;
 export declare const FOCUS_POINT_SIZE: number;
-export declare const getBindingGap: (bindTarget: ExcalidrawBindableElement, opts: Pick<ExcalidrawArrowElement, "elbowed">) => number;
+export declare const getBindingGap: (bindTarget: Pick<ExcalidrawBindableElement, "strokeWidth">) => number;
 export declare const maxBindingDistance_simple: (zoom?: AppState["zoom"]) => number;
 export declare const isBindingEnabled: (appState: {
     isBindingEnabled: AppState["isBindingEnabled"];
@@ -38,6 +37,7 @@ export declare const bindOrUnbindBindingElement: (arrow: NonDeleted<ExcalidrawAr
     altKey?: boolean;
     angleLocked?: boolean;
     initialBinding?: boolean;
+    gridSize?: NullableGridSize;
 }) => {
     start: BindingStrategy;
     end: BindingStrategy;
@@ -48,34 +48,42 @@ export declare const getBindingStrategyForDraggingBindingElementEndpoints: (arro
     altKey?: boolean;
     finalize?: boolean;
     initialBinding?: boolean;
-    zoom?: AppState["zoom"];
+    gridSize?: NullableGridSize;
 }) => {
     start: BindingStrategy;
     end: BindingStrategy;
 };
 export declare const bindOrUnbindBindingElements: (selectedArrows: NonDeleted<ExcalidrawArrowElement>[], scene: Scene, appState: AppState) => void;
-export declare const bindBindingElement: (arrow: NonDeleted<ExcalidrawArrowElement>, hoveredElement: ExcalidrawBindableElement, mode: BindMode, startOrEnd: "start" | "end", scene: Scene, focusPoint?: GlobalPoint, shouldSnapToOutline?: boolean) => void;
-export declare const unbindBindingElement: (arrow: NonDeleted<ExcalidrawArrowElement>, startOrEnd: "start" | "end", scene: Scene) => ExcalidrawBindableElement["id"] | null;
+export declare const bindBindingElement: (arrow: NonDeleted<ExcalidrawArrowElement>, hoveredElement: NonDeleted<ExcalidrawBindableElement>, mode: BindMode, startOrEnd: "start" | "end", scene: Scene, zoom: AppState["zoom"], focusPoint?: GlobalPoint, shouldSnapToOutline?: boolean, isMidpointSnappingEnabled?: boolean) => void;
+export declare const unbindBindingElement: (arrow: ExcalidrawArrowElement, startOrEnd: "start" | "end", scene: Scene) => ExcalidrawBindableElement["id"] | null;
+export declare const reanchorBindingsToOutline: (changedElement: NonDeleted<ExcalidrawBindableElement>, scene: Scene, zoom: AppState["zoom"]) => void;
 export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawElement, scene: Scene, options?: {
-    simultaneouslyUpdated?: readonly ExcalidrawElement[];
+    /** see `getSimultaneouslyUpdatedElementIds` for how to pass it */
+    simultaneouslyUpdated?: readonly NonDeletedExcalidrawElement[];
     changedElements?: Map<string, ExcalidrawElement>;
 }) => void;
-export declare const updateBindings: (latestElement: ExcalidrawElement, scene: Scene, appState: AppState, options?: {
-    simultaneouslyUpdated?: readonly ExcalidrawElement[];
+export declare const updateBindings: (latestElement: NonDeletedExcalidrawElement, scene: Scene, appState: AppState, options?: {
+    simultaneouslyUpdated?: readonly NonDeletedExcalidrawElement[];
     newSize?: {
         width: number;
         height: number;
     };
 }) => void;
+/**
+ * The id set of `simultaneouslyUpdated`, shared by every `updateBoundElements()`
+ * call given the same array. Pass one array instance for all elements of an
+ * operation, and don't change its membership after the first lookup, or the
+ * cached ids go stale.
+ */
+export declare const getSimultaneouslyUpdatedElementIds: (simultaneouslyUpdated: readonly ExcalidrawElement[] | undefined) => ReadonlySet<ExcalidrawElement["id"]>;
 export declare const getHeadingForElbowArrowSnap: (p: Readonly<GlobalPoint>, otherPoint: Readonly<GlobalPoint>, bindableElement: ExcalidrawBindableElement | undefined | null, aabb: Bounds | undefined | null, origPoint: GlobalPoint, elementsMap: ElementsMap, zoom?: AppState["zoom"]) => Heading;
-export declare const bindPointToSnapToElementOutline: (arrowElement: ExcalidrawArrowElement, bindableElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap, customIntersector?: LineSegment<GlobalPoint>, isMidpointSnappingEnabled?: boolean) => GlobalPoint;
+export declare const bindPointToSnapToElementOutline: (arrowElement: ExcalidrawArrowElement, bindableElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap, zoom: AppState["zoom"], customIntersector?: LineSegment<GlobalPoint>, isMidpointSnappingEnabled?: boolean) => GlobalPoint;
 export declare const avoidRectangularCorner: (arrowElement: ExcalidrawArrowElement, bindTarget: ExcalidrawBindableElement, elementsMap: ElementsMap, p: GlobalPoint) => GlobalPoint;
-export declare const snapToMid: (bindTarget: ExcalidrawBindableElement, elementsMap: ElementsMap, p: GlobalPoint, tolerance?: number, arrowElement?: ExcalidrawArrowElement) => GlobalPoint | undefined;
 export declare const updateBoundPoint: (arrow: NonDeleted<ExcalidrawArrowElement>, startOrEnd: "startBinding" | "endBinding", binding: FixedPointBinding | null | undefined, bindableElement: ExcalidrawBindableElement, elementsMap: ElementsMap, dragging?: boolean) => LocalPoint | null;
-export declare const calculateFixedPointForElbowArrowBinding: (linearElement: NonDeleted<ExcalidrawElbowArrowElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap, shouldSnapToOutline?: boolean, isMidpointSnappingEnabled?: boolean) => {
+export declare const calculateFixedPointForElbowArrowBinding: (linearElement: NonDeleted<ExcalidrawElbowArrowElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap, zoom: AppState["zoom"], shouldSnapToOutline?: boolean, isMidpointSnappingEnabled?: boolean) => {
     fixedPoint: FixedPoint;
 };
-export declare const calculateFixedPointForNonElbowArrowBinding: (linearElement: NonDeleted<ExcalidrawArrowElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: ElementsMap, focusPoint?: GlobalPoint) => {
+export declare const calculateFixedPointForNonElbowArrowBinding: (linearElement: NonDeleted<ExcalidrawArrowElement>, hoveredElement: NonDeleted<ExcalidrawBindableElement>, startOrEnd: "start" | "end", elementsMap: ElementsMap, focusPoint?: GlobalPoint) => {
     fixedPoint: FixedPoint;
 };
 export declare const fixDuplicatedBindingsAfterDuplication: (duplicatedElements: ExcalidrawElement[], origIdToDuplicateId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>, duplicateElementsMap: NonDeletedSceneElementsMap) => void;
@@ -127,3 +135,10 @@ export declare const getArrowLocalFixedPoints: (arrow: ExcalidrawElbowArrowEleme
 export declare const isFixedPoint: (fixedPoint: any) => fixedPoint is FixedPointBinding["fixedPoint"];
 export declare const normalizeFixedPoint: <T extends FixedPoint>(fixedPoint: T) => FixedPoint;
 export declare const getBindingSideMidPoint: (binding: FixedPointBinding, elementsMap: ElementsMap) => GlobalPoint | LocalPoint | null;
+/**
+ * Binds an arrow endpoint to an explicit fixed point on a bindable element,
+ * bypassing the "derive the ratio from where the endpoint currently is"
+ * strategy used when dragging. Needed when the binding target is placed to fit
+ * the arrow rather than the other way round.
+ */
+export declare const bindBindingElementToFixedPoint: (arrow: NonDeleted<ExcalidrawArrowElement>, bindableElement: NonDeleted<ExcalidrawBindableElement>, startOrEnd: "start" | "end", fixedPoint: FixedPoint, scene: Scene) => void;

package/dist/types/element/src/bounds.d.ts

@@ -2,7 +2,7 @@ import { type Bounds } from "@excalidraw/common";
 import type { Degrees, GlobalPoint, LineSegment, LocalPoint } from "@excalidraw/math";
 import type { AppState } from "@excalidraw/excalidraw/types";
 import type { Drawable, Op } from "roughjs/bin/core";
-import type { Arrowhead, ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawLinearElement, NonDeleted } from "./types";
+import type { Arrowhead, ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawLinearElement, NonDeleted, NonDeletedExcalidrawElement } from "./types";
 export type RectangleBox = {
     x: number;
     y: number;
@@ -38,7 +38,7 @@ export declare const getRectangleBoxAbsoluteCoords: (boxSceneCoords: RectangleBo
 export declare const getDiamondPoints: (element: ExcalidrawElement) => number[];
 export declare const getCubicBezierCurveBound: (p0: GlobalPoint, p1: GlobalPoint, p2: GlobalPoint, p3: GlobalPoint) => Bounds;
 export declare const getMinMaxXYFromCurvePathOps: (ops: Op[], transformXY?: (p: GlobalPoint) => GlobalPoint) => Bounds;
-export declare const getBoundsFromPoints: (points: ExcalidrawFreeDrawElement["points"]) => Bounds;
+export declare const getBoundsFromPoints: <P extends GlobalPoint | LocalPoint>(points: readonly P[], padding?: number) => Bounds;
 /** @returns number in pixels */
 export declare const getArrowheadSize: (arrowhead: Arrowhead) => number;
 /** @returns number in degrees */
@@ -46,16 +46,12 @@ export declare const getArrowheadAngle: (arrowhead: Arrowhead) => Degrees;
 export declare const getArrowheadPoints: (element: ExcalidrawLinearElement, shape: Drawable[], position: "start" | "end", arrowhead: Arrowhead, offsetMultiplier?: number) => number[] | null;
 export declare const getElementBounds: (element: ExcalidrawElement, elementsMap: ElementsMap, nonRotated?: boolean) => Bounds;
 export declare const getCommonBounds: (elements: ElementsMapOrArray, elementsMap?: ElementsMap) => Bounds;
-export declare const getDraggedElementsBounds: (elements: ExcalidrawElement[], dragOffset: {
+export declare const getDraggedElementsBounds: (elements: readonly NonDeletedExcalidrawElement[], dragOffset: {
     x: number;
     y: number;
 }) => number[];
 export declare const getResizedElementAbsoluteCoords: (element: ExcalidrawElement, nextWidth: number, nextHeight: number, normalizePoints: boolean) => Bounds;
 export declare const getElementPointsCoords: (element: ExcalidrawLinearElement, points: readonly (readonly [number, number])[]) => Bounds;
-export declare const getClosestElementBounds: (elements: readonly ExcalidrawElement[], from: {
-    x: number;
-    y: number;
-}) => Bounds;
 export interface BoundingBox {
     minX: number;
     minY: number;
@@ -77,5 +73,24 @@ export declare const getCenterForBounds: (bounds: Bounds) => GlobalPoint;
  */
 export declare const aabbForElement: (element: Readonly<ExcalidrawElement>, elementsMap: ElementsMap, offset?: [number, number, number, number]) => Bounds;
 export declare const pointInsideBounds: <P extends GlobalPoint | LocalPoint>(p: P, bounds: Bounds) => boolean;
+export declare const pointInsideBoundsInclusive: <P extends GlobalPoint | LocalPoint>(p: P, bounds: Bounds) => boolean;
 export declare const doBoundsIntersect: (bounds1: Bounds | null, bounds2: Bounds | null) => boolean;
+export declare const boundsContainBounds: (outerBounds: Bounds, innerBounds: Bounds) => boolean;
+/**
+ * High level helper to get elements overlapping a bounding box.
+ * It can be used to get elements overlapping a selection box, for example.
+ *
+ */
+export declare const elementsOverlappingBBox: <T extends ExcalidrawElement>({ elements, elementsMap, bounds, type, excludeElementsInFrames, shouldIgnoreElementFromSelection, }: {
+    elements: readonly T[];
+    elementsMap?: ElementsMap;
+    bounds: Bounds | ExcalidrawElement;
+    /**
+     * - overlap: elements overlapping or inside bounds
+     * - contain: elements inside bounds
+     **/
+    type: "contain" | "overlap";
+    excludeElementsInFrames?: boolean;
+    shouldIgnoreElementFromSelection?: (element: T) => boolean;
+}) => T[];
 export declare const elementCenterPoint: (element: ExcalidrawElement, elementsMap: ElementsMap, xOffset?: number, yOffset?: number) => GlobalPoint;