@dwelle/excalidraw 0.3.47 → 0.3.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dwelle/excalidraw",
-  "version": "0.3.47",
+  "version": "0.3.48",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

package/types/actions/actionCanvas.d.ts

@@ -7,7 +7,7 @@ export declare const actionChangeViewBackgroundColor: {
         appState: any;
         commitToHistory: boolean;
     };
-    PanelComponent: ({ appState, updateData }: import("react").PropsWithChildren<import("./types").PanelComponentProps>) => JSX.Element;
+    PanelComponent: ({ elements, appState, updateData }: import("react").PropsWithChildren<import("./types").PanelComponentProps>) => JSX.Element;
 } & {
     keyTest?: undefined;
 };

package/types/actions/actionProperties.d.ts

@@ -955,6 +955,100 @@ export declare const actionChangeTextAlign: {
 } & {
     keyTest?: undefined;
 };
+export declare const actionChangeVerticalAlign: {
+    name: "changeVerticalAlign";
+    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, value: any) => {
+        elements: ExcalidrawElement[];
+        appState: {
+            isLoading: boolean;
+            errorMessage: string | null;
+            draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            multiElement: import("../element/types").NonDeleted<ExcalidrawLinearElement> | null;
+            selectionElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            isBindingEnabled: boolean;
+            startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
+            suggestedBindings: import("../element/binding").SuggestedBinding[];
+            editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            elementType: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw";
+            elementLocked: boolean;
+            penMode: boolean;
+            penDetected: boolean;
+            exportBackground: boolean;
+            exportEmbedScene: boolean;
+            exportWithDarkMode: boolean;
+            exportScale: number;
+            currentItemStrokeColor: string;
+            currentItemBackgroundColor: string;
+            currentItemFillStyle: import("../element/types").FillStyle;
+            currentItemStrokeWidth: number;
+            currentItemStrokeStyle: import("../element/types").StrokeStyle;
+            currentItemRoughness: number;
+            currentItemOpacity: number;
+            currentItemFontFamily: number;
+            currentItemFontSize: number;
+            currentItemTextAlign: TextAlign;
+            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemStartArrowhead: Arrowhead | null;
+            currentItemEndArrowhead: Arrowhead | null;
+            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            viewBackgroundColor: string;
+            scrollX: number;
+            scrollY: number;
+            cursorButton: "up" | "down";
+            scrolledOutside: boolean;
+            name: string;
+            isResizing: boolean;
+            isRotating: boolean;
+            zoom: Readonly<{
+                value: import("../../src/types").NormalizedZoomValue;
+            }>;
+            openMenu: "canvas" | "shape" | null;
+            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            lastPointerDownWith: import("../element/types").PointerType;
+            selectedElementIds: {
+                [id: string]: boolean;
+            };
+            previousSelectedElementIds: {
+                [id: string]: boolean;
+            };
+            shouldCacheIgnoreZoom: boolean;
+            showHelpDialog: boolean;
+            toastMessage: string | null;
+            zenModeEnabled: boolean;
+            theme: string;
+            gridSize: number | null;
+            viewModeEnabled: boolean;
+            selectedGroupIds: {
+                [groupId: string]: boolean;
+            };
+            editingGroupId: string | null;
+            width: number;
+            height: number;
+            offsetTop: number;
+            offsetLeft: number;
+            isLibraryOpen: boolean;
+            fileHandle: import("browser-fs-access").FileSystemHandle | null;
+            collaborators: Map<string, import("../../src/types").Collaborator>;
+            showStats: boolean;
+            currentChartType: import("../element/types").ChartType;
+            pasteDialog: {
+                shown: false;
+                data: null;
+            } | {
+                shown: true;
+                data: import("../charts").Spreadsheet;
+            };
+            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            showHyperlinkPopup: false | "info" | "editor";
+        };
+        commitToHistory: true;
+    };
+    PanelComponent: ({ elements, appState, updateData }: import("react").PropsWithChildren<import("./types").PanelComponentProps>) => JSX.Element;
+} & {
+    keyTest?: undefined;
+};
 export declare const actionChangeSharpness: {
     name: "changeSharpness";
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, value: any) => {

package/types/actions/index.d.ts

@@ -2,7 +2,7 @@ export { actionDeleteSelected } from "./actionDeleteSelected";
 export { actionBringForward, actionBringToFront, actionSendBackward, actionSendToBack, } from "./actionZindex";
 export { actionSelectAll } from "./actionSelectAll";
 export { actionDuplicateSelection } from "./actionDuplicateSelection";
-export { actionChangeStrokeColor, actionChangeBackgroundColor, actionChangeStrokeWidth, actionChangeFillStyle, actionChangeSloppiness, actionChangeOpacity, actionChangeFontSize, actionChangeFontFamily, actionChangeTextAlign, } from "./actionProperties";
+export { actionChangeStrokeColor, actionChangeBackgroundColor, actionChangeStrokeWidth, actionChangeFillStyle, actionChangeSloppiness, actionChangeOpacity, actionChangeFontSize, actionChangeFontFamily, actionChangeTextAlign, actionChangeVerticalAlign, } from "./actionProperties";
 export { actionChangeViewBackgroundColor, actionClearCanvas, actionZoomIn, actionZoomOut, actionResetZoom, actionZoomToFit, actionToggleTheme, } from "./actionCanvas";
 export { actionFinalize } from "./actionFinalize";
 export { actionChangeProjectName, actionChangeExportBackground, actionSaveToActiveFile, actionSaveFileToDisk, actionLoadScene, } from "./actionExport";

package/types/actions/types.d.ts

@@ -14,7 +14,7 @@ export declare type ActionResult = {
 declare type ActionFn = (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export declare type UpdaterFn = (res: ActionResult) => void;
 export declare type ActionFilterFn = (action: Action) => void;
-export declare type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeSharpness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink";
+export declare type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeSharpness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink";
 export declare type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/types/clipboard.d.ts

@@ -13,7 +13,7 @@ export declare const probablySupportsClipboardWriteText: boolean;
 export declare const probablySupportsClipboardBlob: boolean;
 export declare const copyToClipboard: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles) => Promise<void>;
 /**
- * Attemps to parse clipboard. Prefers system clipboard.
+ * Attempts to parse clipboard. Prefers system clipboard.
  */
 export declare const parseClipboard: (event: ClipboardEvent | null) => Promise<ClipboardData>;
 export declare const copyBlobToClipboardAsPng: (blob: Blob) => Promise<void>;

package/types/components/ColorPicker.d.ts

@@ -1,10 +1,15 @@
 /// <reference types="react" />
 import "./ColorPicker.scss";
-export declare const ColorPicker: ({ type, color, onChange, label, isActive, setActive, }: {
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+export declare const getCustomColors: (elements: readonly ExcalidrawElement[], type: "elementBackground" | "elementStroke") => string[];
+export declare const ColorPicker: ({ type, color, onChange, label, isActive, setActive, elements, appState, }: {
     type: "canvasBackground" | "elementBackground" | "elementStroke";
     color: string | null;
     onChange: (color: string) => void;
     label: string;
     isActive: boolean;
     setActive: (active: boolean) => void;
+    elements: readonly ExcalidrawElement[];
+    appState: AppState;
 }) => JSX.Element;

package/types/components/icons.d.ts

@@ -164,6 +164,15 @@ export declare const TextAlignCenterIcon: React.MemoExoticComponent<({ theme }:
 export declare const TextAlignRightIcon: React.MemoExoticComponent<({ theme }: {
     theme: Theme;
 }) => JSX.Element>;
+export declare const TextAlignTopIcon: React.MemoExoticComponent<({ theme }: {
+    theme: Theme;
+}) => JSX.Element>;
+export declare const TextAlignBottomIcon: React.MemoExoticComponent<({ theme }: {
+    theme: Theme;
+}) => JSX.Element>;
+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 home: JSX.Element;

package/types/constants.d.ts

@@ -134,3 +134,8 @@ export declare const VERSIONS: {
     readonly excalidrawLibrary: 2;
 };
 export declare const BOUND_TEXT_PADDING = 5;
+export declare const VERTICAL_ALIGN: {
+    TOP: string;
+    MIDDLE: string;
+    BOTTOM: string;
+};

package/types/element/resizeElements.d.ts

@@ -4,6 +4,6 @@ import { PointerDownState } from "../types";
 export declare const normalizeAngle: (angle: number) => number;
 export declare const transformElements: (pointerDownState: PointerDownState, transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
 export declare const reshapeSingleTwoPointElement: (element: NonDeleted<ExcalidrawLinearElement>, resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, pointerX: number, pointerY: number) => void;
-export declare const resizeSingleElement: (stateAtResizeStart: NonDeletedExcalidrawElement, shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
+export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
 export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
 export declare const getResizeArrowDirection: (transformHandleType: MaybeTransformHandleType, element: NonDeleted<ExcalidrawLinearElement>) => "origin" | "end";

package/types/element/textElement.d.ts

@@ -20,7 +20,7 @@ export declare const getApproxMinLineHeight: (font: FontString) => number;
 export declare const getMinCharWidth: (font: FontString) => number;
 export declare const getMaxCharWidth: (font: FontString) => number;
 export declare const getApproxCharsToFitInWidth: (font: FontString, width: number) => number;
-export declare const getBoundTextElementId: (container: ExcalidrawElement | null) => string | undefined;
+export declare const getBoundTextElementId: (container: ExcalidrawElement | null) => string | null;
 export declare const getBoundTextElement: (element: ExcalidrawElement | null) => ExcalidrawTextElementWithContainer | null;
 export declare const getContainerElement: (element: (ExcalidrawElement & {
     containerId: ExcalidrawElement["id"] | null;

package/types/element/typeChecks.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer } from "./types";
+import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer } from "./types";
 export declare const isGenericElement: (element: ExcalidrawElement | null) => element is ExcalidrawGenericElement;
 export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
 export declare const isImageElement: (element: ExcalidrawElement | null) => element is ExcalidrawImageElement;
@@ -10,7 +10,7 @@ export declare const isLinearElementType: (elementType: ExcalidrawElement["type"
 export declare const isBindingElement: (element?: ExcalidrawElement | null | undefined) => element is ExcalidrawLinearElement;
 export declare const isBindingElementType: (elementType: ExcalidrawElement["type"]) => boolean;
 export declare const isBindableElement: (element: ExcalidrawElement | null) => element is ExcalidrawBindableElement;
-export declare const isTextBindableContainer: (element: ExcalidrawElement | null) => boolean;
+export declare const isTextBindableContainer: (element: ExcalidrawElement | null) => element is ExcalidrawTextContainer;
 export declare const isExcalidrawElement: (element: any) => boolean;
 export declare const hasBoundTextElement: (element: ExcalidrawElement | null) => element is ExcalidrawBindableElement;
 export declare const isBoundToContainer: (element: ExcalidrawElement | null) => element is ExcalidrawTextElementWithContainer;

package/types/element/types.d.ts

@@ -1,5 +1,5 @@
 import { Point } from "../types";
-import { FONT_FAMILY, THEME } from "../constants";
+import { FONT_FAMILY, THEME, VERTICAL_ALIGN } from "../constants";
 export declare type ChartType = "bar" | "line";
 export declare type FillStyle = "hachure" | "cross-hatch" | "solid";
 export declare type FontFamilyKeys = keyof typeof FONT_FAMILY;
@@ -13,7 +13,8 @@ export declare type PointerType = "mouse" | "pen" | "touch";
 export declare type StrokeSharpness = "round" | "sharp";
 export declare type StrokeStyle = "solid" | "dashed" | "dotted";
 export declare type TextAlign = "left" | "center" | "right";
-export declare type VerticalAlign = "top" | "middle";
+declare type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
+export declare type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
 declare type _ExcalidrawElementBase = Readonly<{
     id: string;
     x: number;
@@ -99,8 +100,9 @@ export declare type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
     originalText: string;
 }>;
 export declare type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement;
+export declare type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawImageElement;
 export declare type ExcalidrawTextElementWithContainer = {
-    containerId: ExcalidrawGenericElement["id"];
+    containerId: ExcalidrawTextContainer["id"];
 } & ExcalidrawTextElement;
 export declare type PointBinding = {
     elementId: ExcalidrawBindableElement["id"];

package/types/galines.d.ts

@@ -4,7 +4,7 @@
  *
  * This maps to a standard formula `a * x + b * y + c`.
  *
- * `(-b, a)` correponds to a 2D vector parallel to the line. The lines
+ * `(-b, a)` corresponds to a 2D vector parallel to the line. The lines
  * have a natural orientation, corresponding to that vector.
  *
  * The magnitude ("norm") of the line is `sqrt(a ^ 2 + b ^ 2)`.

package/types/scene/comparisons.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, ExcalidrawTextContainer, NonDeletedExcalidrawElement } from "../element/types";
 export declare const hasBackground: (type: string) => boolean;
 export declare const hasStrokeColor: (type: string) => boolean;
 export declare const hasStrokeWidth: (type: string) => boolean;
@@ -8,4 +8,4 @@ export declare const hasText: (type: string) => boolean;
 export declare const canHaveArrowheads: (type: string) => boolean;
 export declare const getElementAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement | null;
 export declare const getElementsAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement[];
-export declare const getElementContainingPosition: (elements: readonly ExcalidrawElement[], x: number, y: number) => ExcalidrawElement | null;
+export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], x: number, y: number) => ExcalidrawTextContainer | null;

package/types/scene/index.d.ts

@@ -1,5 +1,5 @@
 export { isOverScrollBars } from "./scrollbars";
 export { isSomeElementSelected, getElementsWithinSelection, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, } from "./selection";
 export { calculateScrollCenter } from "./scroll";
-export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeSharpness, getElementAtPosition, getElementContainingPosition, hasText, getElementsAtPosition, } from "./comparisons";
+export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeSharpness, getElementAtPosition, getTextBindableContainerAtPosition, hasText, getElementsAtPosition, } from "./comparisons";
 export { getNormalizedZoom } from "./zoom";