@dwelle/excalidraw 0.4.0-cfd6fb7 → 0.4.0-d8d86cf

package/types/components/icons.d.ts

@@ -6,68 +6,77 @@ declare type Opts = {
     mirror?: true;
 } & React.SVGProps<SVGSVGElement>;
 export declare const createIcon: (d: string | React.ReactNode, opts?: number | Opts) => JSX.Element;
+export declare const HomeIcon: JSX.Element;
+export declare const LibraryIcon: JSX.Element;
+export declare const PlusIcon: JSX.Element;
+export declare const DotsIcon: JSX.Element;
+export declare const PinIcon: JSX.Element;
+export declare const UnlockedIcon: JSX.Element;
+export declare const LockedIcon: JSX.Element;
+export declare const WelcomeScreenMenuArrow: JSX.Element;
+export declare const WelcomeScreenHelpArrow: JSX.Element;
+export declare const WelcomeScreenTopToolbarArrow: JSX.Element;
+export declare const ExcalLogo: JSX.Element;
+export declare const SelectionIcon: JSX.Element;
+export declare const RectangleIcon: JSX.Element;
+export declare const DiamondIcon: JSX.Element;
+export declare const EllipseIcon: JSX.Element;
+export declare const ArrowIcon: JSX.Element;
+export declare const LineIcon: JSX.Element;
+export declare const PenModeIcon: JSX.Element;
+export declare const FreedrawIcon: JSX.Element;
+export declare const TextIcon: JSX.Element;
+export declare const ImageIcon: JSX.Element;
+export declare const EraserIcon: JSX.Element;
+export declare const ZoomInIcon: JSX.Element;
+export declare const ZoomOutIcon: JSX.Element;
+export declare const TrashIcon: JSX.Element;
+export declare const DuplicateIcon: JSX.Element;
+export declare const MoonIcon: JSX.Element;
+export declare const SunIcon: JSX.Element;
+export declare const HamburgerMenuIcon: JSX.Element;
+export declare const ExportIcon: JSX.Element;
+export declare const HelpIcon: JSX.Element;
+export declare const ExternalLinkIcon: JSX.Element;
+export declare const GithubIcon: JSX.Element;
+export declare const DiscordIcon: JSX.Element;
+export declare const TwitterIcon: JSX.Element;
 export declare const checkIcon: JSX.Element;
-export declare const link: JSX.Element;
+export declare const LinkIcon: JSX.Element;
 export declare const save: JSX.Element;
 export declare const saveAs: JSX.Element;
-export declare const load: JSX.Element;
+export declare const LoadIcon: JSX.Element;
 export declare const clipboard: JSX.Element;
-export declare const trash: JSX.Element;
 export declare const palette: JSX.Element;
-export declare const exportFile: JSX.Element;
-export declare const exportImage: JSX.Element;
+export declare const ExportImageIcon: JSX.Element;
 export declare const exportToFileIcon: JSX.Element;
 export declare const zoomIn: JSX.Element;
 export declare const zoomOut: JSX.Element;
 export declare const done: JSX.Element;
 export declare const menu: JSX.Element;
-export declare const undo: JSX.Element;
-export declare const redo: JSX.Element;
+export declare const UndoIcon: JSX.Element;
+export declare const RedoIcon: JSX.Element;
 export declare const questionCircle: JSX.Element;
 export declare const share: JSX.Element;
 export declare const shareIOS: JSX.Element;
 export declare const shareWindows: JSX.Element;
 export declare const resetZoom: JSX.Element;
-export declare const BringForwardIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const SendBackwardIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const BringToFrontIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const SendToBackIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const AlignTopIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const AlignBottomIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const AlignLeftIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const AlignRightIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const DistributeHorizontallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const DistributeVerticallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const CenterVerticallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const CenterHorizontallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const users: JSX.Element;
+export declare const BringForwardIcon: JSX.Element;
+export declare const SendBackwardIcon: JSX.Element;
+export declare const BringToFrontIcon: JSX.Element;
+export declare const SendToBackIcon: JSX.Element;
+export declare const AlignTopIcon: JSX.Element;
+export declare const AlignBottomIcon: JSX.Element;
+export declare const AlignLeftIcon: JSX.Element;
+export declare const AlignRightIcon: JSX.Element;
+export declare const DistributeHorizontallyIcon: JSX.Element;
+export declare const DistributeVerticallyIcon: JSX.Element;
+export declare const CenterVerticallyIcon: JSX.Element;
+export declare const CenterHorizontallyIcon: JSX.Element;
+export declare const UsersIcon: JSX.Element;
 export declare const start: JSX.Element;
 export declare const stop: JSX.Element;
-export declare const close: JSX.Element;
+export declare const CloseIcon: JSX.Element;
 export declare const back: JSX.Element;
 export declare const clone: JSX.Element;
 export declare const shield: JSX.Element;
@@ -78,92 +87,44 @@ export declare const GroupIcon: React.MemoExoticComponent<({ theme }: {
 export declare const UngroupIcon: React.MemoExoticComponent<({ theme }: {
     theme: Theme;
 }) => JSX.Element>;
-export declare const FillHachureIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const FillCrossHatchIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const FillSolidIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const StrokeWidthIcon: React.MemoExoticComponent<({ theme, strokeWidth }: {
-    theme: Theme;
-    strokeWidth: number;
-}) => JSX.Element>;
+export declare const FillHachureIcon: JSX.Element;
+export declare const FillCrossHatchIcon: JSX.Element;
+export declare const FillSolidIcon: JSX.Element;
+export declare const StrokeWidthBaseIcon: JSX.Element;
+export declare const StrokeWidthBoldIcon: JSX.Element;
+export declare const StrokeWidthExtraBoldIcon: JSX.Element;
 export declare const StrokeStyleSolidIcon: React.MemoExoticComponent<({ theme }: {
     theme: Theme;
 }) => JSX.Element>;
-export declare const StrokeStyleDashedIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const StrokeStyleDottedIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const SloppinessArchitectIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const SloppinessArtistIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const SloppinessCartoonistIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const EdgeSharpIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const EdgeRoundIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const ArrowheadNoneIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const ArrowheadArrowIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: Theme;
+export declare const StrokeStyleDashedIcon: JSX.Element;
+export declare const StrokeStyleDottedIcon: JSX.Element;
+export declare const SloppinessArchitectIcon: JSX.Element;
+export declare const SloppinessArtistIcon: JSX.Element;
+export declare const SloppinessCartoonistIcon: JSX.Element;
+export declare const EdgeSharpIcon: JSX.Element;
+export declare const EdgeRoundIcon: JSX.Element;
+export declare const ArrowheadNoneIcon: JSX.Element;
+export declare const ArrowheadArrowIcon: React.MemoExoticComponent<({ flip }: {
     flip?: boolean | undefined;
 }) => JSX.Element>;
-export declare const ArrowheadDotIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: Theme;
+export declare const ArrowheadDotIcon: React.MemoExoticComponent<({ flip }: {
     flip?: boolean | undefined;
 }) => JSX.Element>;
-export declare const ArrowheadBarIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: Theme;
+export declare const ArrowheadBarIcon: React.MemoExoticComponent<({ flip }: {
     flip?: boolean | undefined;
 }) => JSX.Element>;
-export declare const ArrowheadTriangleIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: Theme;
+export declare const ArrowheadTriangleIcon: React.MemoExoticComponent<({ flip }: {
     flip?: boolean | undefined;
 }) => JSX.Element>;
-export declare const FontSizeSmallIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const FontSizeMediumIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const FontSizeLargeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const FontSizeExtraLargeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const FontFamilyHandDrawnIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const FontFamilyNormalIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const FontFamilyCodeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const TextAlignLeftIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const TextAlignCenterIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
-export declare const TextAlignRightIcon: React.MemoExoticComponent<({ theme }: {
-    theme: Theme;
-}) => JSX.Element>;
+export declare const FontSizeSmallIcon: JSX.Element;
+export declare const FontSizeMediumIcon: JSX.Element;
+export declare const FontSizeLargeIcon: JSX.Element;
+export declare const FontSizeExtraLargeIcon: JSX.Element;
+export declare const FontFamilyNormalIcon: JSX.Element;
+export declare const FontFamilyCodeIcon: JSX.Element;
+export declare const TextAlignLeftIcon: JSX.Element;
+export declare const TextAlignCenterIcon: JSX.Element;
+export declare const TextAlignRightIcon: JSX.Element;
 export declare const TextAlignTopIcon: React.MemoExoticComponent<({ theme }: {
     theme: Theme;
 }) => JSX.Element>;
@@ -174,7 +135,5 @@ export declare const TextAlignMiddleIcon: React.MemoExoticComponent<({ theme }:
     theme: Theme;
 }) => JSX.Element>;
 export declare const publishIcon: JSX.Element;
-export declare const editIcon: JSX.Element;
 export declare const eraser: JSX.Element;
-export declare const home: JSX.Element;
 export {};

package/types/constants.d.ts

@@ -1,4 +1,4 @@
-import { AppProps, CanvasActions, ExportOpts } from "./types";
+import { AppProps } from "./types";
 import { FontFamilyValues } from "./element/types";
 export declare const APP_NAME = "Excalidraw";
 export declare const DRAGGING_THRESHOLD = 10;
@@ -84,6 +84,9 @@ export declare const MIME_TYPES: {
     readonly "excalidraw.png": "image/png";
     readonly jpg: "image/jpeg";
     readonly gif: "image/gif";
+    readonly webp: "image/webp";
+    readonly bmp: "image/bmp";
+    readonly ico: "image/x-icon";
     readonly binary: "application/octet-stream";
 };
 export declare const EXPORT_DATA_TYPES: {
@@ -99,6 +102,7 @@ export declare const TITLE_TIMEOUT = 10000;
 export declare const VERSION_TIMEOUT = 30000;
 export declare const SCROLL_TIMEOUT = 100;
 export declare const ZOOM_STEP = 0.1;
+export declare const MIN_ZOOM = 0.1;
 export declare const HYPERLINK_TOOLTIP_DELAY = 300;
 export declare const IDLE_THRESHOLD = 60000;
 export declare const ACTIVE_THRESHOLD = 3000;
@@ -114,11 +118,7 @@ export declare const URL_QUERY_KEYS: {
 export declare const URL_HASH_KEYS: {
     readonly addLibrary: "addLibrary";
 };
-export declare const DEFAULT_UI_OPTIONS: Merge<AppProps["UIOptions"], {
-    canvasActions: Merge<Required<CanvasActions>, {
-        export: ExportOpts;
-    }>;
-}>;
+export declare const DEFAULT_UI_OPTIONS: AppProps["UIOptions"];
 export declare const MQ_SM_MAX_WIDTH = 640;
 export declare const MQ_MAX_WIDTH_PORTRAIT = 800;
 export declare const MQ_MAX_WIDTH_LANDSCAPE = 1000;
@@ -129,7 +129,7 @@ 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 ALLOWED_IMAGE_MIME_TYPES: readonly ["image/png", "image/jpeg", "image/svg+xml", "image/gif"];
+export declare const ALLOWED_IMAGE_MIME_TYPES: readonly ["image/png", "image/jpeg", "image/svg+xml", "image/gif", "image/webp", "image/bmp", "image/x-icon"];
 export declare const MAX_ALLOWED_FILE_BYTES: number;
 export declare const SVG_NS = "http://www.w3.org/2000/svg";
 export declare const ENCRYPTION_KEY_BITS = 128;
@@ -143,7 +143,15 @@ export declare const VERTICAL_ALIGN: {
     MIDDLE: string;
     BOTTOM: string;
 };
+export declare const TEXT_ALIGN: {
+    LEFT: string;
+    CENTER: string;
+    RIGHT: string;
+};
 export declare const ELEMENT_READY_TO_ERASE_OPACITY = 20;
 export declare const COOKIES: {
     readonly AUTH_STATE_COOKIE: "excplus-auth";
 };
+/** key containt id of precedeing elemnt id we use in reconciliation during
+ * collaboration */
+export declare const PRECEDING_ELEMENT_KEY = "__precedingElement__";

package/types/data/blob.d.ts

@@ -40,7 +40,7 @@ export declare const getFileFromEvent: (event: React.DragEvent<HTMLDivElement>)
 }>;
 export declare const getFileHandle: (event: React.DragEvent<HTMLDivElement>) => Promise<FileSystemHandle | null>;
 export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: ValueOf<typeof MIME_TYPES>, name: string | undefined) => File;
-/** attemps to detect correct mimeType if none is set, or if an image
+/** attempts to detect correct mimeType if none is set, or if an image
  * has an incorrect extension.
  * Note: doesn't handle missing .excalidraw/.excalidrawlib extension  */
 export declare const normalizeFile: (file: File) => Promise<File>;

package/types/data/restore.d.ts

@@ -8,7 +8,7 @@ export declare type RestoredDataState = {
     appState: RestoredAppState;
     files: BinaryFiles;
 };
-export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined) => ExcalidrawElement[];
+export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined, refreshDimensions?: boolean) => ExcalidrawElement[];
 export declare const restoreAppState: (appState: ImportedDataState["appState"], localAppState: Partial<AppState> | null | undefined) => RestoredAppState;
 export declare const restore: (data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined) => RestoredDataState;
 export declare const restoreLibraryItems: (libraryItems: ImportedDataState["libraryItems"], defaultStatus: LibraryItem["status"]) => LibraryItem[];

package/types/data/types.d.ts

@@ -10,12 +10,27 @@ export interface ExportedDataState {
     appState: ReturnType<typeof cleanAppStateForExport>;
     files: BinaryFiles | undefined;
 }
+/**
+ * Map of legacy AppState keys, with values of:
+ *  [<legacy type>, <new AppState proeprty>]
+ *
+ * This is a helper type used in downstream abstractions.
+ * Don't consume on its own.
+ */
+export declare type LegacyAppState = {
+    /** @deprecated #5663 TODO remove 22-12-15 */
+    isLibraryOpen: [boolean, "openSidebar"];
+    /** @deprecated #5663 TODO remove 22-12-15 */
+    isLibraryMenuDocked: [boolean, "isSidebarDocked"];
+};
 export interface ImportedDataState {
     type?: string;
     version?: number;
     source?: string;
     elements?: readonly ExcalidrawElement[] | null;
-    appState?: Readonly<Partial<AppState>> | null;
+    appState?: Readonly<Partial<AppState & {
+        [T in keyof LegacyAppState]: LegacyAppState[T][0];
+    }>> | null;
     scrollToContent?: boolean;
     libraryItems?: LibraryItems_anyVersion;
     files?: BinaryFiles;

package/types/element/Hyperlink.d.ts

@@ -18,6 +18,7 @@ export declare const actionLink: {
         appState: {
             showHyperlinkPopup: "editor";
             openMenu: null;
+            showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: string | null;
             draggingElement: NonDeletedExcalidrawElement | null;
@@ -55,7 +56,7 @@ export declare const actionLink: {
             currentItemOpacity: number;
             currentItemFontFamily: number;
             currentItemFontSize: number;
-            currentItemTextAlign: import("./types").TextAlign;
+            currentItemTextAlign: string;
             currentItemStrokeSharpness: import("./types").StrokeSharpness;
             currentItemStartArrowhead: import("./types").Arrowhead | null;
             currentItemEndArrowhead: import("./types").Arrowhead | null;
@@ -72,6 +73,9 @@ export declare const actionLink: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openSidebar: "library" | "customSidebar" | null;
+            openDialog: "imageExport" | "help" | null;
+            isSidebarDocked: boolean;
             lastPointerDownWith: import("./types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -80,7 +84,6 @@ export declare const actionLink: {
                 [id: string]: boolean;
             };
             shouldCacheIgnoreZoom: boolean;
-            showHelpDialog: boolean;
             toast: {
                 message: string;
                 closable?: boolean | undefined;
@@ -98,8 +101,6 @@ export declare const actionLink: {
             height: number;
             offsetTop: number;
             offsetLeft: number;
-            isLibraryOpen: boolean;
-            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             showStats: boolean;
@@ -123,7 +124,9 @@ export declare const actionLink: {
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     contextItemLabel: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => "labels.link.edit" | "labels.link.create";
     contextItemPredicate: (elements: readonly import("./types").ExcalidrawElement[], appState: AppState) => boolean;
-    PanelComponent: ({ elements, appState, updateData }: import("../actions/types").PanelComponentProps) => JSX.Element;
+    PanelComponent: ({ elements, appState, updateData }: import("../actions/types").PanelComponentProps & {
+        isInHamburgerMenu: boolean;
+    }) => JSX.Element;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };

package/types/element/bounds.d.ts

@@ -1,10 +1,11 @@
 import { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead, NonDeleted } from "./types";
 import { Drawable, Op } from "roughjs/bin/core";
 export declare type Bounds = readonly [number, number, number, number];
-export declare const getElementAbsoluteCoords: (element: ExcalidrawElement) => Bounds;
+export declare const getElementAbsoluteCoords: (element: ExcalidrawElement, includeBoundText?: boolean) => [number, number, number, number, number, number];
 export declare const pointRelativeTo: (element: ExcalidrawElement, absoluteCoords: readonly [number, number]) => readonly [number, number];
 export declare const getDiamondPoints: (element: ExcalidrawElement) => number[];
 export declare const getCurvePathOps: (shape: Drawable) => Op[];
+export declare const getMinMaxXYFromCurvePathOps: (ops: Op[], transformXY?: ((x: number, y: number) => [number, number]) | undefined) => [number, number, number, number];
 export declare const getArrowheadPoints: (element: ExcalidrawLinearElement, shape: Drawable[], position: "start" | "end", arrowhead: Arrowhead) => number[] | null;
 export declare const getElementBounds: (element: ExcalidrawElement) => [number, number, number, number];
 export declare const getCommonBounds: (elements: readonly ExcalidrawElement[]) => [number, number, number, number];

package/types/element/image.d.ts

@@ -10,7 +10,7 @@ export declare const updateImageCache: ({ fileIds, files, imageCache, }: {
 }) => Promise<{
     imageCache: Map<FileId, {
         image: HTMLImageElement | Promise<HTMLImageElement>;
-        mimeType: "image/svg+xml" | "image/png" | "image/jpeg" | "image/gif";
+        mimeType: "image/svg+xml" | "image/png" | "image/jpeg" | "image/gif" | "image/webp" | "image/bmp" | "image/x-icon";
     }>;
     /** includes errored files because they cache was updated nonetheless */
     updatedFiles: Map<FileId, true>;

package/types/element/index.d.ts

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

package/types/element/linearElementEditor.d.ts

@@ -1,8 +1,13 @@
 /// <reference types="react" />
-import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement } from "./types";
-import { Point, AppState } from "../types";
+import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer } from "./types";
+import { Point, AppState, PointerCoords } from "../types";
 import History from "../history";
 import Scene from "../scene/Scene";
+declare const editorMidPointsCache: {
+    version: number | null;
+    points: (Point | null)[];
+    zoom: number | null;
+};
 export declare class LinearElementEditor {
     readonly elementId: ExcalidrawElement["id"] & {
         _brand: "excalidrawLinearElementId";
@@ -13,6 +18,15 @@ export declare class LinearElementEditor {
         prevSelectedPointsIndices: readonly number[] | null;
         /** index */
         lastClickedPoint: number;
+        origin: Readonly<{
+            x: number;
+            y: number;
+        }> | null;
+        segmentMidpoint: {
+            value: Point | null;
+            index: number | null;
+            added: boolean;
+        };
     }>;
     /** whether you're dragging a point */
     readonly isDragging: boolean;
@@ -24,7 +38,7 @@ export declare class LinearElementEditor {
     readonly startBindingElement: ExcalidrawBindableElement | null | "keep";
     readonly endBindingElement: ExcalidrawBindableElement | null | "keep";
     readonly hoverPointIndex: number;
-    readonly midPointHovered: boolean;
+    readonly segmentMidPointHoveredCoords: Point | null;
     constructor(element: NonDeleted<ExcalidrawLinearElement>, scene: Scene);
     static POINT_HANDLE_SIZE: number;
     /**
@@ -39,11 +53,15 @@ export declare class LinearElementEditor {
         y: number;
     }[]) => void, linearElementEditor: LinearElementEditor): boolean;
     static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState): LinearElementEditor;
-    static isHittingMidPoint: (linearElementEditor: LinearElementEditor, scenePointer: {
+    static getEditorMidPoints: (element: NonDeleted<ExcalidrawLinearElement>, appState: AppState) => (typeof editorMidPointsCache)["points"];
+    static updateEditorMidPointsCache: (element: NonDeleted<ExcalidrawLinearElement>, appState: AppState) => void;
+    static getSegmentMidpointHitCoords: (linearElementEditor: LinearElementEditor, scenePointer: {
         x: number;
         y: number;
-    }, appState: AppState) => boolean;
-    static getMidPoint(linearElementEditor: LinearElementEditor): readonly [number, number] | null;
+    }, appState: AppState) => readonly [number, number] | null;
+    static isSegmentTooShort(element: NonDeleted<ExcalidrawLinearElement>, startPoint: Point, endPoint: Point, zoom: AppState["zoom"]): boolean;
+    static getSegmentMidPoint(element: NonDeleted<ExcalidrawLinearElement>, startPoint: Point, endPoint: Point, endPointIndex: number): readonly [number, number];
+    static getSegmentMidPointIndex(linearElementEditor: LinearElementEditor, appState: AppState, midPoint: Point): number;
     static handlePointerDown(event: React.PointerEvent<HTMLCanvasElement>, appState: AppState, history: History, scenePointer: {
         x: number;
         y: number;
@@ -51,9 +69,9 @@ export declare class LinearElementEditor {
         didAddPoint: boolean;
         hitElement: NonDeleted<ExcalidrawElement> | null;
         linearElementEditor: LinearElementEditor | null;
-        isMidPoint: boolean;
     };
-    static handlePointerMove(event: React.PointerEvent<HTMLCanvasElement>, scenePointerX: number, scenePointerY: number, linearElementEditor: LinearElementEditor, gridSize: number | null): LinearElementEditor;
+    static arePointsEqual(point1: Point | null, point2: Point | null): boolean;
+    static handlePointerMove(event: React.PointerEvent<HTMLCanvasElement>, scenePointerX: number, scenePointerY: number, appState: AppState): LinearElementEditor | null;
     /** scene coords */
     static getPointGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, point: Point): readonly [number, number];
     /** scene coords */
@@ -84,6 +102,15 @@ export declare class LinearElementEditor {
                     prevSelectedPointsIndices: readonly number[] | null;
                     /** index */
                     lastClickedPoint: number;
+                    origin: Readonly<{
+                        x: number;
+                        y: number;
+                    }> | null;
+                    segmentMidpoint: {
+                        value: readonly [number, number] | null;
+                        index: number | null;
+                        added: boolean;
+                    };
                 }>;
                 isDragging: boolean;
                 lastUncommittedPoint: readonly [number, number] | null;
@@ -94,8 +121,9 @@ export declare class LinearElementEditor {
                 startBindingElement: ExcalidrawBindableElement | "keep" | null;
                 endBindingElement: ExcalidrawBindableElement | "keep" | null;
                 hoverPointIndex: number;
-                midPointHovered: boolean;
+                segmentMidPointHoveredCoords: readonly [number, number] | null;
             };
+            showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: string | null;
             draggingElement: import("./types").NonDeletedExcalidrawElement | null;
@@ -132,7 +160,7 @@ export declare class LinearElementEditor {
             currentItemOpacity: number;
             currentItemFontFamily: number;
             currentItemFontSize: number;
-            currentItemTextAlign: import("./types").TextAlign;
+            currentItemTextAlign: string;
             currentItemStrokeSharpness: import("./types").StrokeSharpness;
             currentItemStartArrowhead: import("./types").Arrowhead | null;
             currentItemEndArrowhead: import("./types").Arrowhead | null;
@@ -150,6 +178,9 @@ export declare class LinearElementEditor {
             }>;
             openMenu: "canvas" | "shape" | null;
             openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openSidebar: "library" | "customSidebar" | null;
+            openDialog: "imageExport" | "help" | null;
+            isSidebarDocked: boolean;
             lastPointerDownWith: import("./types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -158,7 +189,6 @@ export declare class LinearElementEditor {
                 [id: string]: boolean;
             };
             shouldCacheIgnoreZoom: boolean;
-            showHelpDialog: boolean;
             toast: {
                 message: string;
                 closable?: boolean | undefined;
@@ -176,8 +206,6 @@ export declare class LinearElementEditor {
             height: number;
             offsetTop: number;
             offsetLeft: number;
-            isLibraryOpen: boolean;
-            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             showStats: boolean;
@@ -195,7 +223,7 @@ export declare class LinearElementEditor {
         };
     };
     static deletePoints(element: NonDeleted<ExcalidrawLinearElement>, pointIndices: readonly number[]): void;
-    static addPoints(element: NonDeleted<ExcalidrawLinearElement>, targetPoints: {
+    static addPoints(element: NonDeleted<ExcalidrawLinearElement>, appState: AppState, targetPoints: {
         point: Point;
     }[]): void;
     static movePoints(element: NonDeleted<ExcalidrawLinearElement>, targetPoints: {
@@ -206,6 +234,18 @@ export declare class LinearElementEditor {
         startBinding?: PointBinding;
         endBinding?: PointBinding;
     }): void;
+    static shouldAddMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState): boolean;
+    static addMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState): {
+        pointerDownState: LinearElementEditor["pointerDownState"];
+        selectedPointsIndices: LinearElementEditor["selectedPointsIndices"];
+    } | undefined;
     private static _updatePoints;
     private static _getShiftLockedDelta;
+    static getBoundTextElementPosition: (element: ExcalidrawLinearElement, boundTextElement: ExcalidrawTextElementWithContainer) => {
+        x: number;
+        y: number;
+    };
+    static getMinMaxXYWithBoundText: (element: ExcalidrawLinearElement, elementBounds: [number, number, number, number], boundTextElement: ExcalidrawTextElementWithContainer) => [number, number, number, number, number, number];
+    static getElementAbsoluteCoords: (element: ExcalidrawLinearElement, includeBoundText?: boolean) => [number, number, number, number, number, number];
 }
+export {};

package/types/element/newElement.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawRectangleElement } from "../element/types";
+import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer } from "../element/types";
 import { AppState } from "../types";
 declare type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "boundElements" | "seed" | "version" | "versionNonce" | "link">;
 export declare const newElement: (opts: {
@@ -10,9 +10,19 @@ export declare const newTextElement: (opts: {
     fontFamily: FontFamilyValues;
     textAlign: TextAlign;
     verticalAlign: VerticalAlign;
-    containerId?: ExcalidrawRectangleElement["id"];
+    containerId?: ExcalidrawTextContainer["id"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
-export declare const updateTextElement: (element: ExcalidrawTextElement, { text, isDeleted, originalText, }: {
+export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    baseline: number;
+    text: string;
+};
+export declare const getMaxContainerWidth: (container: ExcalidrawElement) => number;
+export declare const getMaxContainerHeight: (container: ExcalidrawElement) => number;
+export declare const updateTextElement: (textElement: ExcalidrawTextElement, { text, isDeleted, originalText, }: {
     text: string;
     isDeleted?: boolean | undefined;
     originalText: string;
@@ -30,6 +40,9 @@ export declare const newLinearElement: (opts: {
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawLinearElement>;
 export declare const newImageElement: (opts: {
     type: ExcalidrawImageElement["type"];
+    status?: ExcalidrawImageElement["status"];
+    fileId?: ExcalidrawImageElement["fileId"];
+    scale?: ExcalidrawImageElement["scale"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawImageElement>;
 export declare const deepCopyElement: (val: any, depth?: number) => any;
 /**