@zsviczian/excalidraw 0.12.0-obsidian-4 → 0.12.0-obsidian-7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zsviczian/excalidraw",
-  "version": "0.12.0-obsidian-4",
+  "version": "0.12.0-obsidian-7",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

package/types/actions/actionClipboard.d.ts

@@ -147,6 +147,7 @@ export declare const actionCut: {
                     y: number;
                 }>;
                 hoverPointIndex: number;
+                midPointHovered: boolean;
             };
             isLoading: boolean;
             errorMessage: string | null;

package/types/actions/actionDeleteSelected.d.ts

@@ -138,6 +138,7 @@ export declare const actionDeleteSelected: {
                     y: number;
                 }>;
                 hoverPointIndex: number;
+                midPointHovered: boolean;
             };
             isLoading: boolean;
             errorMessage: string | null;

package/types/components/Actions.d.ts

@@ -2,11 +2,10 @@ import React from "react";
 import { ActionManager } from "../actions/manager";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { AppState, Zoom } from "../types";
-export declare const SelectedShapeActions: ({ appState, elements, renderAction, activeTool, }: {
+export declare const SelectedShapeActions: ({ appState, elements, renderAction, }: {
     appState: AppState;
     elements: readonly ExcalidrawElement[];
     renderAction: ActionManager["renderAction"];
-    activeTool: AppState["activeTool"]["type"];
 }) => JSX.Element;
 export declare const ShapesSwitcher: ({ canvas, activeTool, setAppState, onImageAction, appState, }: {
     canvas: HTMLCanvasElement | null;
@@ -17,7 +16,20 @@ export declare const ShapesSwitcher: ({ canvas, activeTool, setAppState, onImage
     }) => void;
     appState: AppState;
 }) => JSX.Element;
-export declare const ZoomActions: ({ renderAction, zoom, }: {
+export declare const ZoomActions: ({ renderAction, zoom, trayMode, }: {
     renderAction: ActionManager["renderAction"];
     zoom: Zoom;
+    trayMode?: boolean | undefined;
+}) => JSX.Element;
+export declare const UndoRedoActions: ({ renderAction, className, }: {
+    renderAction: ActionManager["renderAction"];
+    className?: string | undefined;
+}) => JSX.Element;
+export declare const ExitZenModeAction: ({ executeAction, showExitZenModeBtn, }: {
+    executeAction: ActionManager["executeAction"];
+    showExitZenModeBtn: boolean;
+}) => JSX.Element;
+export declare const FinalizeAction: ({ renderAction, className, }: {
+    renderAction: ActionManager["renderAction"];
+    className?: string | undefined;
 }) => JSX.Element;

package/types/components/App.d.ts

@@ -20,6 +20,8 @@ export declare const useExcalidrawContainer: () => {
     container: HTMLDivElement | null;
     id: string | null;
 };
+export declare const useExcalidrawElements: () => readonly NonDeletedExcalidrawElement[];
+export declare const useExcalidrawAppState: () => AppState;
 declare class App extends React.Component<AppProps, AppState> {
     canvas: AppClassProperties["canvas"];
     rc: RoughCanvas | null;
@@ -73,6 +75,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private removeEventListeners;
     private addEventListeners;
     componentDidUpdate(prevProps: AppProps, prevState: AppState): void;
+    private renderScene;
     private onScroll;
     private onCut;
     private onCopy;

package/types/components/Footer.d.ts

@@ -0,0 +1,9 @@
+import { ActionManager } from "../actions/manager";
+import { AppState, ExcalidrawProps } from "../types";
+declare const Footer: ({ appState, actionManager, renderCustomFooter, showExitZenModeBtn, }: {
+    appState: AppState;
+    actionManager: ActionManager;
+    renderCustomFooter?: ExcalidrawProps["renderFooter"];
+    showExitZenModeBtn: boolean;
+}) => JSX.Element;
+export default Footer;

package/types/components/LayerUI.d.ts

@@ -33,5 +33,5 @@ interface LayerUIProps {
         insertOnCanvasDirectly: boolean;
     }) => void;
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, showExitZenModeBtn, showThemeBtn, isCollaborating, renderTopRightUI, renderCustomFooter, renderCustomStats, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, showExitZenModeBtn, showThemeBtn, isCollaborating, renderTopRightUI, renderCustomFooter, renderCustomStats, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/LibraryMenu.d.ts

@@ -1,12 +1,11 @@
 import Library from "../data/library";
 import { LibraryItems, LibraryItem, AppState, BinaryFiles, ExcalidrawProps } from "../types";
 import "./LibraryMenu.scss";
-export declare const LibraryMenu: ({ onClose, onInsertLibraryItems, pendingElements, onAddToLibrary, theme, setAppState, files, libraryReturnUrl, focusContainer, library, id, appState, }: {
+export declare const LibraryMenu: ({ onClose, onInsertLibraryItems, pendingElements, onAddToLibrary, setAppState, files, libraryReturnUrl, focusContainer, library, id, appState, }: {
     pendingElements: LibraryItem["elements"];
     onClose: () => void;
     onInsertLibraryItems: (libraryItems: LibraryItems) => void;
     onAddToLibrary: () => void;
-    theme: AppState["theme"];
     files: BinaryFiles;
     setAppState: React.Component<any, AppState>["setState"];
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];

package/types/components/MobileMenu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState } from "../types";
+import { AppState, ExcalidrawProps } from "../types";
 import { ActionManager } from "../actions/manager";
 import { NonDeletedExcalidrawElement } from "../element/types";
 declare type MobileMenuProps = {
@@ -21,7 +21,7 @@ declare type MobileMenuProps = {
         insertOnCanvasDirectly: boolean;
     }) => void;
     renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
-    renderStats: () => JSX.Element | null;
+    renderCustomStats?: ExcalidrawProps["renderCustomStats"];
 };
-export declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, showThemeBtn, onImageAction, renderTopRightUI, renderStats, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, showThemeBtn, onImageAction, renderTopRightUI, renderCustomStats, }: MobileMenuProps) => JSX.Element;
 export {};

package/types/components/Stats.d.ts

@@ -8,4 +8,4 @@ export declare const Stats: (props: {
     elements: readonly NonDeletedExcalidrawElement[];
     onClose: () => void;
     renderCustomStats: ExcalidrawProps["renderCustomStats"];
-}) => JSX.Element | null;
+}) => JSX.Element;

package/types/constants.d.ts

@@ -101,7 +101,7 @@ 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 ZOOM_STEP = 0.1;
+export declare const ZOOM_STEP = 0.05;
 export declare const HYPERLINK_TOOLTIP_DELAY = 300;
 export declare const IDLE_THRESHOLD = 60000;
 export declare const ACTIVE_THRESHOLD = 3000;

package/types/element/Hyperlink.d.ts

@@ -4,9 +4,8 @@ import { NonDeletedExcalidrawElement } from "./types";
 import { Bounds } from "./bounds";
 import "./Hyperlink.scss";
 export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
-export declare const Hyperlink: ({ element, appState, setAppState, onLinkOpen, }: {
+export declare const Hyperlink: ({ element, setAppState, onLinkOpen, }: {
     element: NonDeletedExcalidrawElement;
-    appState: AppState;
     setAppState: React.Component<any, AppState>["setState"];
     onLinkOpen: ExcalidrawProps["onLinkOpen"];
 }) => JSX.Element | null;

package/types/element/bounds.d.ts

@@ -8,7 +8,7 @@ export declare const getCurvePathOps: (shape: Drawable) => Op[];
 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];
-export declare const getResizedElementAbsoluteCoords: (element: ExcalidrawElement, nextWidth: number, nextHeight: number) => [number, number, number, number];
+export declare const getResizedElementAbsoluteCoords: (element: ExcalidrawElement, nextWidth: number, nextHeight: number, normalizePoints: boolean) => [number, number, number, number];
 export declare const getElementPointsCoords: (element: ExcalidrawLinearElement, points: readonly (readonly [number, number])[], sharpness: ExcalidrawElement["strokeSharpness"]) => [number, number, number, number];
 export declare const getClosestElementBounds: (elements: readonly ExcalidrawElement[], from: {
     x: number;

package/types/element/linearElementEditor.d.ts

@@ -4,26 +4,27 @@ import { Point, AppState } from "../types";
 import History from "../history";
 import Scene from "../scene/Scene";
 export declare class LinearElementEditor {
-    elementId: ExcalidrawElement["id"] & {
+    readonly elementId: ExcalidrawElement["id"] & {
         _brand: "excalidrawLinearElementId";
     };
     /** indices */
-    selectedPointsIndices: readonly number[] | null;
-    pointerDownState: Readonly<{
+    readonly selectedPointsIndices: readonly number[] | null;
+    readonly pointerDownState: Readonly<{
         prevSelectedPointsIndices: readonly number[] | null;
         /** index */
         lastClickedPoint: number;
     }>;
     /** whether you're dragging a point */
-    isDragging: boolean;
-    lastUncommittedPoint: Point | null;
-    pointerOffset: Readonly<{
+    readonly isDragging: boolean;
+    readonly lastUncommittedPoint: Point | null;
+    readonly pointerOffset: Readonly<{
         x: number;
         y: number;
     }>;
-    startBindingElement: ExcalidrawBindableElement | null | "keep";
-    endBindingElement: ExcalidrawBindableElement | null | "keep";
-    hoverPointIndex: number;
+    readonly startBindingElement: ExcalidrawBindableElement | null | "keep";
+    readonly endBindingElement: ExcalidrawBindableElement | null | "keep";
+    readonly hoverPointIndex: number;
+    readonly midPointHovered: boolean;
     constructor(element: NonDeleted<ExcalidrawLinearElement>, scene: Scene);
     static POINT_HANDLE_SIZE: number;
     /**
@@ -33,11 +34,16 @@ export declare class LinearElementEditor {
     static getElement(id: InstanceType<typeof LinearElementEditor>["elementId"]): NonDeleted<ExcalidrawLinearElement> | null;
     static handleBoxSelection(event: PointerEvent, appState: AppState, setState: React.Component<any, AppState>["setState"]): false | undefined;
     /** @returns whether point was dragged */
-    static handlePointDragging(appState: AppState, scenePointerX: number, scenePointerY: number, maybeSuggestBinding: (element: NonDeleted<ExcalidrawLinearElement>, pointSceneCoords: {
+    static handlePointDragging(event: PointerEvent, appState: AppState, scenePointerX: number, scenePointerY: number, maybeSuggestBinding: (element: NonDeleted<ExcalidrawLinearElement>, pointSceneCoords: {
         x: number;
         y: number;
     }[]) => void, linearElementEditor: LinearElementEditor): boolean;
     static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState): LinearElementEditor;
+    static isHittingMidPoint: (linearElementEditor: LinearElementEditor, scenePointer: {
+        x: number;
+        y: number;
+    }, appState: AppState) => boolean;
+    static getMidPoint(linearElementEditor: LinearElementEditor): readonly [number, number] | null;
     static handlePointerDown(event: React.PointerEvent<HTMLCanvasElement>, appState: AppState, history: History, scenePointer: {
         x: number;
         y: number;
@@ -45,12 +51,13 @@ 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;
     /** scene coords */
     static getPointGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, point: Point): readonly [number, number];
     /** scene coords */
-    static getPointsGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>): number[][];
+    static getPointsGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>): Point[];
     static getPointAtIndexGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, indexMaybeFromEnd: number): Point;
     static pointFromAbsoluteCoords(element: NonDeleted<ExcalidrawLinearElement>, absoluteCoords: Point): Point;
     static getPointIndexUnderCursor(element: NonDeleted<ExcalidrawLinearElement>, zoom: AppState["zoom"], x: number, y: number): number;
@@ -78,7 +85,6 @@ export declare class LinearElementEditor {
                     /** index */
                     lastClickedPoint: number;
                 }>;
-                /** whether you're dragging a point */
                 isDragging: boolean;
                 lastUncommittedPoint: readonly [number, number] | null;
                 pointerOffset: Readonly<{
@@ -88,6 +94,7 @@ export declare class LinearElementEditor {
                 startBindingElement: ExcalidrawBindableElement | "keep" | null;
                 endBindingElement: ExcalidrawBindableElement | "keep" | null;
                 hoverPointIndex: number;
+                midPointHovered: boolean;
             };
             isLoading: boolean;
             errorMessage: string | null;
@@ -207,4 +214,5 @@ export declare class LinearElementEditor {
         endBinding?: PointBinding;
     }): void;
     private static _updatePoints;
+    private static _getShiftLockedDelta;
 }

package/types/element/transformHandles.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, PointerType } from "./types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
 import { Bounds } from "./bounds";
-import { Zoom } from "../types";
+import { AppState, Zoom } from "../types";
 export declare type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
 export declare type TransformHandleType = TransformHandleDirection | "rotation";
 export declare type TransformHandle = [number, number, number, number];
@@ -17,12 +17,13 @@ export declare const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS: {
 export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, zoom: Zoom, pointerType: PointerType, omitSides?: {
     e?: boolean | undefined;
     s?: boolean | undefined;
-    n?: boolean | undefined;
     w?: boolean | undefined;
+    n?: boolean | undefined;
     nw?: boolean | undefined;
     ne?: boolean | undefined;
     sw?: boolean | undefined;
     se?: boolean | undefined;
     rotation?: boolean | undefined;
-}) => TransformHandles;
+}, margin?: number) => TransformHandles;
 export declare const getTransformHandles: (element: ExcalidrawElement, zoom: Zoom, pointerType?: PointerType) => TransformHandles;
+export declare const shouldShowBoundingBox: (elements: NonDeletedExcalidrawElement[], appState: AppState) => boolean;

package/types/element/types.d.ts

@@ -53,6 +53,7 @@ declare type _ExcalidrawElementBase = Readonly<{
     updated: number;
     link: string | null;
     locked: boolean;
+    customData?: Record<string, any>;
 }>;
 export declare type ExcalidrawSelectionElement = _ExcalidrawElementBase & {
     type: "selection";

package/types/points.d.ts

@@ -3,4 +3,5 @@ export declare const getSizeFromPoints: (points: readonly Point[]) => {
     width: number;
     height: number;
 };
-export declare const rescalePoints: (dimension: 0 | 1, nextDimensionSize: number, prevPoints: readonly Point[]) => Point[];
+/** @arg dimension, 0 for rescaling only x, 1 for y */
+export declare const rescalePoints: (dimension: 0 | 1, newSize: number, points: readonly Point[], normalize: boolean) => Point[];

package/types/polyfill.d.ts

@@ -0,0 +1,2 @@
+declare const polyfill: () => void;
+export default polyfill;

package/types/renderer/renderScene.d.ts

@@ -3,7 +3,15 @@ import { RoughSVG } from "roughjs/bin/svg";
 import { AppState, BinaryFiles } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { RenderConfig } from "../scene/types";
-export declare const _renderScene: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, selectionElement: NonDeletedExcalidrawElement | null, scale: number, rc: RoughCanvas, canvas: HTMLCanvasElement, renderConfig: RenderConfig) => {
+export declare const DEFAULT_SPACING = 4;
+export declare const _renderScene: ({ elements, appState, scale, rc, canvas, renderConfig, }: {
+    elements: readonly NonDeletedExcalidrawElement[];
+    appState: AppState;
+    scale: number;
+    rc: RoughCanvas;
+    canvas: HTMLCanvasElement;
+    renderConfig: RenderConfig;
+}) => {
     atLeastOneVisibleElement: boolean;
     scrollBars?: undefined;
 } | {
@@ -11,7 +19,15 @@ export declare const _renderScene: (elements: readonly NonDeletedExcalidrawEleme
     scrollBars: import("../scene/types").ScrollBars | undefined;
 };
 /** renderScene throttled to animation framerate */
-export declare const renderScene: <T extends boolean = false>(elements: readonly NonDeletedExcalidrawElement[], appState: AppState, selectionElement: NonDeletedExcalidrawElement | null, scale: number, rc: RoughCanvas, canvas: HTMLCanvasElement, renderConfig: RenderConfig, callback?: ((data: ReturnType<typeof _renderScene>) => void) | undefined, throttle?: T | undefined) => T extends true ? void : {
+export declare const renderScene: <T extends boolean = false>(config: {
+    elements: readonly NonDeletedExcalidrawElement[];
+    appState: AppState;
+    scale: number;
+    rc: RoughCanvas;
+    canvas: HTMLCanvasElement;
+    renderConfig: RenderConfig;
+    callback?: ((data: ReturnType<typeof _renderScene>) => void) | undefined;
+}, throttle?: T | undefined) => T extends true ? void : {
     atLeastOneVisibleElement: boolean;
     scrollBars?: undefined;
 } | {

package/types/types.d.ts

@@ -337,7 +337,6 @@ export declare type PointerDownState = Readonly<{
         wasAddedToSelection: boolean;
         hasBeenDuplicated: boolean;
         hasHitCommonBoundingBoxOfSelectedElements: boolean;
-        hasHitElementInside: boolean;
     };
     withCmdOrCtrl: boolean;
     drag: {