@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

package/dist/excalidraw/types.d.ts

@@ -1,24 +1,24 @@
-import React from "react";
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement } from "./element/types";
-import { Action } from "./actions/types";
-import { Point as RoughPoint } from "roughjs/bin/geometry";
-import { LinearElementEditor } from "./element/linearElementEditor";
-import { SuggestedBinding } from "./element/binding";
-import { ImportedDataState } from "./data/types";
+import type React from "react";
+import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement } from "./element/types";
+import type { Action } from "./actions/types";
+import type { Point as RoughPoint } from "roughjs/bin/geometry";
+import type { LinearElementEditor } from "./element/linearElementEditor";
+import type { SuggestedBinding } from "./element/binding";
+import type { ImportedDataState } from "./data/types";
 import type App from "./components/App";
 import type { throttleRAF } from "./utils";
-import { Spreadsheet } from "./charts";
-import { Language } from "./i18n";
-import { ClipboardData } from "./clipboard";
-import { isOverScrollBars } from "./scene/scrollbars";
-import { MaybeTransformHandleType } from "./element/transformHandles";
-import Library from "./data/library";
+import type { Spreadsheet } from "./charts";
+import type { Language } from "./i18n";
+import type { ClipboardData } from "./clipboard";
+import type { isOverScrollBars } from "./scene/scrollbars";
+import type { MaybeTransformHandleType } from "./element/transformHandles";
+import type Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
-import { ContextMenuItems } from "./components/ContextMenu";
-import { SnapLine } from "./snapping";
-import { Merge, MaybePromise, ValueOf } from "./utility-types";
-import { StoreActionType } from "./store";
+import type { ContextMenuItems } from "./components/ContextMenu";
+import type { SnapLine } from "./snapping";
+import type { Merge, MaybePromise, ValueOf } from "./utility-types";
+import type { StoreActionType } from "./store";
 export type Point = Readonly<RoughPoint>;
 export type SocketId = string & {
     _brand: "SocketId";
@@ -119,6 +119,7 @@ export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
     selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
     gridSize: AppState["gridSize"];
     frameRendering: AppState["frameRendering"];
+    currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
 }>;
 export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     activeEmbeddable: AppState["activeEmbeddable"];
@@ -134,6 +135,7 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     collaborators: AppState["collaborators"];
     snapLines: AppState["snapLines"];
     zenModeEnabled: AppState["zenModeEnabled"];
+    editingElement: AppState["editingElement"];
 }>;
 export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
 export type ObservedStandaloneAppState = {
@@ -204,7 +206,9 @@ export interface AppState {
     currentItemTextAlign: TextAlign;
     currentItemStartArrowhead: Arrowhead | null;
     currentItemEndArrowhead: Arrowhead | null;
+    currentHoveredFontFamily: FontFamilyValues | null;
     currentItemRoundness: StrokeRoundness;
+    currentItemArrowType: "sharp" | "round" | "elbow";
     viewBackgroundColor: string;
     scrollX: number;
     scrollY: number;
@@ -215,7 +219,7 @@ export interface AppState {
     isRotating: boolean;
     zoom: Zoom;
     openMenu: "canvas" | "shape" | null;
-    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | null;
     openSidebar: {
         name: SidebarName;
         tab?: SidebarTabName;
@@ -271,7 +275,11 @@ export interface AppState {
     offsetLeft: number;
     fileHandle: FileSystemHandle | null;
     collaborators: Map<SocketId, Collaborator>;
-    showStats: boolean;
+    stats: {
+        open: boolean;
+        /** bitmap. Use `STATS_PANELS` bit values */
+        panels: number;
+    };
     currentChartType: ChartType;
     pasteDialog: {
         shown: false;
@@ -345,7 +353,7 @@ export type OnUserFollowedPayload = {
 };
 export interface ExcalidrawProps {
     onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
-    initialData?: MaybePromise<ExcalidrawInitialDataState | null>;
+    initialData?: (() => MaybePromise<ExcalidrawInitialDataState | null>) | MaybePromise<ExcalidrawInitialDataState | null>;
     excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
     isCollaborating?: boolean;
     onPointerUpdate?: (payload: {
@@ -385,6 +393,7 @@ export interface ExcalidrawProps {
     validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined);
     renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
     aiEnabled?: boolean;
+    showDeprecatedFonts?: boolean;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -448,6 +457,8 @@ export type AppClassProperties = {
     files: BinaryFiles;
     device: App["device"];
     scene: App["scene"];
+    syncActionResult: App["syncActionResult"];
+    fonts: App["fonts"];
     pasteFromClipboard: App["pasteFromClipboard"];
     id: App["id"];
     onInsertElements: App["onInsertElements"];
@@ -462,8 +473,8 @@ export type AppClassProperties = {
     setOpenDialog: App["setOpenDialog"];
     insertEmbeddableElement: App["insertEmbeddableElement"];
     onMagicframeToolSelect: App["onMagicframeToolSelect"];
-    getElementShape: App["getElementShape"];
     getName: App["getName"];
+    dismissLinearEditor: App["dismissLinearEditor"];
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{

package/dist/excalidraw/utils.d.ts

@@ -1,7 +1,7 @@
-import { EVENT } from "./constants";
-import { FontFamilyValues, FontString } from "./element/types";
-import { ActiveTool, AppState, ToolType, UnsubscribeCallback, Zoom } from "./types";
-import { MaybePromise } from "./utility-types";
+import type { EVENT } from "./constants";
+import type { FontFamilyValues, FontString } from "./element/types";
+import type { ActiveTool, AppState, ToolType, UnsubscribeCallback, Zoom } from "./types";
+import type { MaybePromise } from "./utility-types";
 export declare const setDateTimeForTests: (dateTime: string) => void;
 export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
@@ -163,9 +163,18 @@ export declare const arrayToMapWithIndex: <T extends {
 /**
  * Transform array into an object, use only when array order is irrelevant.
  */
-export declare const arrayToObject: <T>(array: readonly T[], groupBy?: ((value: T) => string) | undefined) => {
+export declare const arrayToObject: <T>(array: readonly T[], groupBy?: ((value: T) => string | number) | undefined) => {
     [key: string]: T;
 };
+/** Doubly linked node */
+export type Node<T> = T & {
+    prev: Node<T> | null;
+    next: Node<T> | null;
+};
+/**
+ * Creates a circular doubly linked list by adding `prev` and `next` props to the existing array nodes.
+ */
+export declare const arrayToList: <T>(array: readonly T[]) => Node<T>[];
 export declare const isTestEnv: () => boolean;
 export declare const isDevEnv: () => boolean;
 export declare const wrapEvent: <T extends Event>(name: EVENT, nativeEvent: T) => CustomEvent<{
@@ -228,4 +237,5 @@ type Unbrand<T> = T extends Map<infer E, infer F> ? Map<E, F> : T extends Set<in
  */
 export declare const toBrandedType: <BrandedType, CurrentType = BrandedType>(value: Unbrand<BrandedType>) => CurrentType & BrandedType;
 export declare const promiseTry: <TValue, TArgs extends unknown[]>(fn: (...args: TArgs) => TValue | PromiseLike<TValue>, ...args: TArgs) => Promise<TValue>;
+export declare const isAnyTrue: (...args: boolean[]) => boolean;
 export {};

package/dist/excalidraw/utils.js

@@ -37,6 +37,7 @@ export const isWritableElement = (target) => (target instanceof HTMLElement && t
 export const getFontFamilyString = ({ fontFamily, }) => {
     for (const [fontFamilyString, id] of Object.entries(FONT_FAMILY)) {
         if (id === fontFamily) {
+            // TODO: we should fallback first to generic family names first, rather than directly to the emoji font
             return `${fontFamilyString}, ${WINDOWS_EMOJI_FALLBACK_FONT}`;
         }
     }
@@ -452,6 +453,26 @@ export const arrayToObject = (array, groupBy) => array.reduce((acc, value) => {
     acc[groupBy ? groupBy(value) : String(value)] = value;
     return acc;
 }, {});
+/**
+ * Creates a circular doubly linked list by adding `prev` and `next` props to the existing array nodes.
+ */
+export const arrayToList = (array) => array.reduce((acc, curr, index) => {
+    const node = { ...curr, prev: null, next: null };
+    // no-op for first item, we don't want circular references on a single item
+    if (index !== 0) {
+        const prevNode = acc[index - 1];
+        node.prev = prevNode;
+        prevNode.next = node;
+        if (index === array.length - 1) {
+            // make the references circular and connect head & tail
+            const firstNode = acc[0];
+            node.next = firstNode;
+            firstNode.prev = node;
+        }
+    }
+    acc.push(node);
+    return acc;
+}, []);
 export const isTestEnv = () => import.meta.env.MODE === "test";
 export const isDevEnv = () => import.meta.env.MODE === "development";
 export const wrapEvent = (name, nativeEvent) => {
@@ -690,3 +711,4 @@ export const promiseTry = async (fn, ...args) => {
         resolve(fn(...args));
     });
 };
+export const isAnyTrue = (...args) => Math.max(...args.map((arg) => (arg ? 1 : 0))) > 0;

package/dist/excalidraw/zindex.d.ts

@@ -1,5 +1,5 @@
-import { ExcalidrawElement } from "./element/types";
-import { AppState } from "./types";
+import type { ExcalidrawElement } from "./element/types";
+import type { AppState } from "./types";
 export declare const moveOneLeft: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[];
 export declare const moveOneRight: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[];
 export declare const moveAllLeft: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[] | ExcalidrawElement[];

package/dist/prod/{en-XW4JO6VX.json → en-YNVBSAIL.json}

@@ -46,6 +46,10 @@
     "arrowhead_triangle_outline": "Triangle (outline)",
     "arrowhead_diamond": "Diamond",
     "arrowhead_diamond_outline": "Diamond (outline)",
+    "arrowtypes": "Arrow type",
+    "arrowtype_sharp": "Sharp arrow",
+    "arrowtype_round": "Curved arrow",
+    "arrowtype_elbowed": "Elbow arrow",
     "fontSize": "Font size",
     "fontFamily": "Font family",
     "addWatermark": "Add \"Made with Excalidraw\"",
@@ -109,6 +113,7 @@
     "share": "Share",
     "showStroke": "Show stroke color picker",
     "showBackground": "Show background color picker",
+    "showFonts": "Show font picker",
     "toggleTheme": "Toggle light/dark theme",
     "theme": "Theme",
     "personalLib": "Personal Library",
@@ -129,7 +134,7 @@
     },
     "lineEditor": {
       "edit": "Edit line",
-      "exit": "Exit line editor"
+      "editArrow": "Edit arrow"
     },
     "elementLock": {
       "lock": "Lock",
@@ -148,7 +153,9 @@
     "discordChat": "Discord chat",
     "zoomToFitViewport": "Zoom to fit in viewport",
     "zoomToFitSelection": "Zoom to fit selection",
-    "zoomToFit": "Zoom to fit all elements"
+    "zoomToFit": "Zoom to fit all elements",
+    "installPWA": "Install Excalidraw locally (PWA)",
+    "autoResize": "Enable text auto-resizing"
   },
   "library": {
     "noItems": "No items added yet...",
@@ -268,6 +275,22 @@
     "mermaidToExcalidraw": "Mermaid to Excalidraw",
     "magicSettings": "AI settings"
   },
+  "element": {
+    "rectangle": "Rectangle",
+    "diamond": "Diamond",
+    "ellipse": "Ellipse",
+    "arrow": "Arrow",
+    "line": "Line",
+    "freedraw": "Freedraw",
+    "text": "Text",
+    "image": "Image",
+    "group": "Group",
+    "frame": "Frame",
+    "magicframe": "Wireframe to code",
+    "embeddable": "Web Embed",
+    "selection": "Selection",
+    "iframe": "IFrame"
+  },
   "headings": {
     "canvasActions": "Canvas actions",
     "selectedShapeActions": "Selected shape actions",
@@ -276,6 +299,7 @@
   "hints": {
     "canvasPanning": "To move canvas, hold mouse wheel or spacebar while dragging, or use the hand tool",
     "linearElement": "Click to start multiple points, drag for single line",
+    "arrowTool": "Click to start multiple points, drag for single line. Press {{arrowShortcut}} again to change arrow type.",
     "freeDraw": "Click and drag, release when you're finished",
     "text": "Tip: you can also add text by double-clicking anywhere with the selection tool",
     "embeddable": "Click-drag to create a website embed",
@@ -441,7 +465,10 @@
     "scene": "Scene",
     "selected": "Selected",
     "storage": "Storage",
-    "title": "Stats for nerds",
+    "fullTitle": "Stats & Element properties",
+    "title": "Stats",
+    "generalStats": "General stats",
+    "elementProperties": "Element properties",
     "total": "Total",
     "version": "Version",
     "versionCopy": "Click to copy",
@@ -536,11 +563,19 @@
     "syntax": "Mermaid Syntax",
     "preview": "Preview"
   },
-  "userList": {
-    "search": {
-      "placeholder": "Quick search",
-      "empty": "No users found"
+  "quickSearch": {
+    "placeholder": "Quick search"
+  },
+  "fontList": {
+    "badge": {
+      "old": "old"
     },
+    "sceneFonts": "In this scene",
+    "availableFonts": "Available fonts",
+    "empty": "No fonts found"
+  },
+  "userList": {
+    "empty": "No users found",
     "hint": {
       "text": "Click on user to follow",
       "followStatus": "You're currently following this user",