@zsviczian/excalidraw 0.18.0-37 → 0.18.0-38

package/types/excalidraw/components/App.d.ts

@@ -154,6 +154,7 @@ declare class App extends React.Component<AppProps, AppState> {
                 x: number;
                 y: number;
             };
+            blockDragging: boolean;
         };
         eventListeners: {
             onMove: {
@@ -223,6 +224,7 @@ declare class App extends React.Component<AppProps, AppState> {
                 x: number;
                 y: number;
             };
+            blockDragging: boolean;
         };
         eventListeners: {
             onMove: {
@@ -244,6 +246,7 @@ declare class App extends React.Component<AppProps, AppState> {
     }>]>;
     missingPointerEventCleanupEmitter: Emitter<[event: PointerEvent | null]>;
     onRemoveEventListenersEmitter: Emitter<[]>;
+    defaultSelectionTool: "selection" | "lasso";
     constructor(props: AppProps);
     updateEditorAtom: <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>, ...args: Args) => Result;
     private onWindowMessage;
@@ -299,6 +302,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private resetScene;
     private initializeScene;
     private isMobileBreakpoint;
+    private isTabletBreakpoint;
     private refreshViewportBreakpoints;
     private refreshEditorBreakpoints;
     private clearImageShapeCache;
@@ -317,6 +321,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private static resetTapTwice;
     private onTouchStart;
     private onTouchEnd;
+    private insertClipboardContent;
     pasteFromClipboard: (event: ClipboardEvent) => Promise<void>;
     addElementsFromPasteOrLibrary: (opts: {
         elements: readonly ExcalidrawElement[];
@@ -510,7 +515,7 @@ declare class App extends React.Component<AppProps, AppState> {
         sceneY: number;
         link: string;
     }) => NonDeleted<ExcalidrawEmbeddableElement> | undefined;
-    private createImageElement;
+    private newImagePlaceholder;
     private handleLinearElementOnPointerDown;
     private getCurrentItemRoundness;
     private createGenericElementOnPointerDown;
@@ -531,11 +536,7 @@ declare class App extends React.Component<AppProps, AppState> {
      * and when you don't want to loose those modifications
      */
     private getLatestInitializedImageElement;
-    /**
-     * inserts image into elements array and rerenders
-     */
-    private insertImageElement;
-    private onImageAction;
+    private onImageToolbarButtonClick;
     private getImageNaturalDimensions;
     /** updates image cache, refreshing updated elements and/or setting status
         to error for images that fail during <img> element creation */
@@ -550,6 +551,7 @@ declare class App extends React.Component<AppProps, AppState> {
     setSelection(elements: readonly NonDeletedExcalidrawElement[]): void;
     private clearSelection;
     private handleInteractiveCanvasRef;
+    private insertImages;
     private handleAppOnDrop;
     loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
     private handleCanvasContextMenu;

package/types/excalidraw/components/ColorPicker/ColorPicker.d.ts

@@ -18,6 +18,7 @@ interface ColorPickerProps {
     palette?: ColorPaletteCustom | null;
     topPicks?: ColorTuple;
     updateData: (formData?: any) => void;
+    compactMode?: boolean;
 }
-export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, compactMode, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/excalidraw/components/CommandPalette/CommandPalette.d.ts

@@ -8,6 +8,7 @@ export declare const DEFAULT_CATEGORIES: {
     editor: string;
     elements: string;
     links: string;
+    library: string;
 };
 type CommandPaletteProps = {
     customCommandPaletteItems?: CommandPaletteItem[];

package/types/excalidraw/components/FontPicker/FontPicker.d.ts

@@ -16,6 +16,7 @@ interface FontPickerProps {
     onHover: (fontFamily: FontFamilyValues) => void;
     onLeave: () => void;
     onPopupChange: (open: boolean) => void;
+    compactMode?: boolean;
 }
-export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, compactMode, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/types/excalidraw/components/FontPicker/FontPickerTrigger.d.ts

@@ -1,6 +1,7 @@
 import type { FontFamilyValues } from "@excalidraw/element/types";
 interface FontPickerTriggerProps {
     selectedFontFamily: FontFamilyValues | null;
+    isOpened?: boolean;
 }
-export declare const FontPickerTrigger: ({ selectedFontFamily, }: FontPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FontPickerTrigger: ({ selectedFontFamily, isOpened, }: FontPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/excalidraw/components/InlineIcon.d.ts

@@ -1,3 +1,5 @@
-export declare const InlineIcon: ({ icon }: {
+export declare const InlineIcon: ({ className, icon, size, }: {
+    className?: string | undefined;
     icon: React.ReactNode;
+    size?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/types/excalidraw/components/LibraryMenuSection.d.ts

@@ -3,7 +3,7 @@ import type { ExcalidrawElement, NonDeleted } from "@excalidraw/element/types";
 import type { SvgCache } from "../hooks/useLibraryItemSvg";
 import type { LibraryItem } from "../types";
 import type { ReactNode } from "react";
-type LibraryOrPendingItem = (LibraryItem | /* pending library item */ {
+type LibraryOrPendingItem = readonly (LibraryItem | /* pending library item */ {
     id: null;
     elements: readonly NonDeleted<ExcalidrawElement>[];
 })[];

package/types/excalidraw/components/PropertiesPopover.d.ts

@@ -10,6 +10,7 @@ interface PropertiesPopoverProps {
     onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
     onFocusOutside?: Popover.PopoverContentProps["onFocusOutside"];
     onPointerDownOutside?: Popover.PopoverContentProps["onPointerDownOutside"];
+    preventAutoFocusOnTouch?: boolean;
 }
 export declare const PropertiesPopover: React.ForwardRefExoticComponent<PropertiesPopoverProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/types/excalidraw/components/TextField.d.ts

@@ -12,6 +12,7 @@ type TextFieldProps = {
     className?: string;
     placeholder?: string;
     isRedacted?: boolean;
+    type?: "text" | "search";
 } & ({
     value: string;
 } | {

package/types/excalidraw/components/icons.d.ts

@@ -11,6 +11,7 @@ export declare const PlusPromoIcon: import("react/jsx-runtime").JSX.Element;
 export declare const LibraryIcon: import("react/jsx-runtime").JSX.Element;
 export declare const PlusIcon: import("react/jsx-runtime").JSX.Element;
 export declare const DotsIcon: import("react/jsx-runtime").JSX.Element;
+export declare const DotsHorizontalIcon: import("react/jsx-runtime").JSX.Element;
 export declare const PinIcon: import("react/jsx-runtime").JSX.Element;
 export declare const polygonIcon: import("react/jsx-runtime").JSX.Element;
 export declare const UnlockedIcon: import("react/jsx-runtime").JSX.Element;
@@ -30,6 +31,7 @@ export declare const LineIcon: import("react/jsx-runtime").JSX.Element;
 export declare const PenModeIcon: import("react/jsx-runtime").JSX.Element;
 export declare const FreedrawIcon: import("react/jsx-runtime").JSX.Element;
 export declare const TextIcon: import("react/jsx-runtime").JSX.Element;
+export declare const TextSizeIcon: import("react/jsx-runtime").JSX.Element;
 export declare const ImageIcon: import("react/jsx-runtime").JSX.Element;
 export declare const EraserIcon: import("react/jsx-runtime").JSX.Element;
 export declare const ZoomInIcon: import("react/jsx-runtime").JSX.Element;
@@ -228,4 +230,8 @@ export declare const markerFrameIcon: import("react/jsx-runtime").JSX.Element;
 export declare const LaTeXIcon: import("react/jsx-runtime").JSX.Element;
 export declare const InsertAnyFileIcon: import("react/jsx-runtime").JSX.Element;
 export declare const Card: import("react/jsx-runtime").JSX.Element;
+export declare const resizeIcon: import("react/jsx-runtime").JSX.Element;
+export declare const adjustmentsIcon: import("react/jsx-runtime").JSX.Element;
+export declare const backgroundIcon: import("react/jsx-runtime").JSX.Element;
+export declare const strokeIcon: import("react/jsx-runtime").JSX.Element;
 export {};

package/types/excalidraw/components/shapes.d.ts

@@ -1,3 +1,4 @@
+import type { AppClassProperties } from "../types";
 export declare const SHAPES: readonly [{
     readonly icon: import("react/jsx-runtime").JSX.Element;
     readonly value: "selection";
@@ -53,4 +54,119 @@ export declare const SHAPES: readonly [{
     readonly numericKey: "0";
     readonly fillable: false;
 }];
-export declare const findShapeByKey: (key: string) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "freedraw" | "eraser" | null;
+export declare const getToolbarTools: (app: AppClassProperties) => readonly [{
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "selection";
+    readonly key: "v";
+    readonly numericKey: "1";
+    readonly fillable: true;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "rectangle";
+    readonly key: "r";
+    readonly numericKey: "2";
+    readonly fillable: true;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "diamond";
+    readonly key: "d";
+    readonly numericKey: "3";
+    readonly fillable: true;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "ellipse";
+    readonly key: "o";
+    readonly numericKey: "4";
+    readonly fillable: true;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "arrow";
+    readonly key: "a";
+    readonly numericKey: "5";
+    readonly fillable: true;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "line";
+    readonly key: "l";
+    readonly numericKey: "6";
+    readonly fillable: true;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "freedraw";
+    readonly key: readonly ["p", "x"];
+    readonly numericKey: "7";
+    readonly fillable: false;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "text";
+    readonly key: "t";
+    readonly numericKey: "8";
+    readonly fillable: false;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "eraser";
+    readonly key: "e";
+    readonly numericKey: "0";
+    readonly fillable: false;
+}] | readonly [{
+    readonly value: "lasso";
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly key: "v";
+    readonly numericKey: "1";
+    readonly fillable: true;
+}, ...({
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "selection";
+    readonly key: "v";
+    readonly numericKey: "1";
+    readonly fillable: true;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "rectangle";
+    readonly key: "r";
+    readonly numericKey: "2";
+    readonly fillable: true;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "diamond";
+    readonly key: "d";
+    readonly numericKey: "3";
+    readonly fillable: true;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "ellipse";
+    readonly key: "o";
+    readonly numericKey: "4";
+    readonly fillable: true;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "arrow";
+    readonly key: "a";
+    readonly numericKey: "5";
+    readonly fillable: true;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "line";
+    readonly key: "l";
+    readonly numericKey: "6";
+    readonly fillable: true;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "freedraw";
+    readonly key: readonly ["p", "x"];
+    readonly numericKey: "7";
+    readonly fillable: false;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "text";
+    readonly key: "t";
+    readonly numericKey: "8";
+    readonly fillable: false;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "eraser";
+    readonly key: "e";
+    readonly numericKey: "0";
+    readonly fillable: false;
+})[]];
+export declare const findShapeByKey: (key: string, app: AppClassProperties) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "freedraw" | "lasso" | "eraser" | null;

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

@@ -2,7 +2,7 @@ import { IMAGE_MIME_TYPES, MIME_TYPES } from "@excalidraw/common";
 import type { ValueOf } from "@excalidraw/common/utility-types";
 import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
 import type { AppState, DataURL, LibraryItem } from "../types";
-import type { FileSystemHandle } from "./filesystem";
+import type { FileSystemHandle } from "browser-fs-access";
 import type { ImportedLibraryData } from "./types";
 export declare const getMimeType: (blob: Blob | string) => string;
 export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
@@ -40,12 +40,8 @@ export declare const SVGStringToFile: (SVGString: string, filename?: string) =>
     type: typeof MIME_TYPES.svg;
 };
 export declare const ImageURLToFile: (imageUrl: string, filename?: string) => Promise<File | undefined>;
-export declare const getFileFromEvent: (event: React.DragEvent<HTMLDivElement>) => Promise<{
-    file: File | null;
-    fileHandle: FileSystemHandle | null;
-}>;
-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;
+export declare const getFileHandle: (event: DragEvent | React.DragEvent | DataTransferItem) => Promise<FileSystemHandle | null>;
+export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: string, name: string | undefined) => File;
 /** 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  */

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

@@ -1,7 +1,7 @@
 import type { VERSIONS } from "@excalidraw/common";
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 import type { cleanAppStateForExport } from "../appState";
-import type { AppState, BinaryFiles, LibraryItems, LibraryItems_anyVersion } from "../types";
+import type { AppState, BinaryFiles, LibraryItem, LibraryItems, LibraryItems_anyVersion } from "../types";
 export interface ExportedDataState {
     type: string;
     version: number;
@@ -43,3 +43,6 @@ export interface ImportedLibraryData extends Partial<ExportedLibraryData> {
     /** @deprecated v1 */
     library?: LibraryItems;
 }
+export type ExcalidrawLibraryIds = {
+    itemIds: LibraryItem["id"][];
+};

package/types/excalidraw/hooks/useLibraryItemSvg.d.ts

@@ -3,7 +3,7 @@ export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
 export declare const libraryItemSvgsCache: import("jotai/vanilla/atom").PrimitiveAtom<SvgCache> & {
     init: SvgCache;
 };
-export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache) => SVGSVGElement | undefined;
+export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache, ref: React.RefObject<HTMLDivElement | null>) => SVGSVGElement | undefined;
 export declare const useLibraryCache: () => {
     clearLibraryCache: () => void;
     deleteItemsFromLibraryCache: (items: LibraryItem["id"][]) => void;

package/types/excalidraw/hooks/useTextEditorFocus.d.ts

@@ -0,0 +1,14 @@
+export type CaretPosition = {
+    start: number;
+    end: number;
+};
+export declare const saveCaretPosition: () => CaretPosition | null;
+export declare const restoreCaretPosition: (position: CaretPosition | null) => void;
+export declare const withCaretPositionPreservation: (callback: () => void, isCompactMode: boolean, isEditingText: boolean, onPreventClose?: () => void) => void;
+export declare const useTextEditorFocus: () => {
+    saveCaretPosition: () => void;
+    restoreCaretPosition: () => void;
+    clearSavedPosition: () => void;
+    hasSavedPosition: boolean;
+};
+export declare const temporarilyDisableTextEditorBlur: (duration?: number) => void;

package/types/excalidraw/types.d.ts

@@ -262,7 +262,7 @@ export interface AppState {
     isRotating: boolean;
     zoom: Zoom;
     openMenu: "canvas" | "shape" | null;
-    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | null;
+    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
     openSidebar: {
         name: SidebarName;
         tab?: SidebarTabName;
@@ -397,6 +397,8 @@ export interface AppState {
     lockedMultiSelections: {
         [groupId: string]: true;
     };
+    /** properties sidebar mode - determines whether to show compact or complete sidebar */
+    stylesPanelMode: "compact" | "full";
 }
 export type SearchMatch = {
     id: string;
@@ -620,6 +622,7 @@ export type AppClassProperties = {
     excalidrawContainerValue: App["excalidrawContainerValue"];
     onPointerUpEmitter: App["onPointerUpEmitter"];
     updateEditorAtom: App["updateEditorAtom"];
+    defaultSelectionTool: "selection" | "lasso";
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{
@@ -667,6 +670,7 @@ export type PointerDownState = Readonly<{
             x: number;
             y: number;
         };
+        blockDragging: boolean;
     };
     eventListeners: {
         onMove: null | ReturnType<typeof throttleRAF>;

package/types/math/src/segment.d.ts

@@ -37,3 +37,4 @@ export declare const distanceToLineSegment: <Point extends GlobalPoint | LocalPo
  * @returns
  */
 export declare function lineSegmentIntersectionPoints<Point extends GlobalPoint | LocalPoint>(l: LineSegment<Point>, s: LineSegment<Point>, threshold?: number): Point | null;
+export declare function lineSegmentsDistance<Point extends GlobalPoint | LocalPoint>(s1: LineSegment<Point>, s2: LineSegment<Point>): number;