@excalidraw/excalidraw 0.15.2-b7350f9 → 0.15.2-fc9a9a2

package/types/i18n.d.ts

@@ -1,8 +1,11 @@
+import fallbackLangData from "./locales/en.json";
+import { NestedKeyOf } from "./utility-types";
 export interface Language {
     code: string;
     label: string;
     rtl?: boolean;
 }
+export type TranslationKeys = NestedKeyOf<typeof fallbackLangData>;
 export declare const defaultLang: {
     code: string;
     label: string;
@@ -10,11 +13,11 @@ export declare const defaultLang: {
 export declare const languages: Language[];
 export declare const setLanguage: (lang: Language) => Promise<void>;
 export declare const getLanguage: () => Language;
-export declare const t: (path: string, replacement?: {
+export declare const t: (path: NestedKeyOf<typeof fallbackLangData>, replacement?: {
     [key: string]: string | number;
 } | null | undefined, fallback?: string) => string;
 export declare const useI18n: () => {
-    t: (path: string, replacement?: {
+    t: (path: NestedKeyOf<typeof fallbackLangData>, replacement?: {
         [key: string]: string | number;
     } | null | undefined, fallback?: string) => string;
     langCode: string;

package/types/keys.d.ts

@@ -8,6 +8,7 @@ export declare const CODES: {
     readonly BRACKET_LEFT: "BracketLeft";
     readonly ONE: "Digit1";
     readonly TWO: "Digit2";
+    readonly THREE: "Digit3";
     readonly NINE: "Digit9";
     readonly QUOTE: "Quote";
     readonly ZERO: "Digit0";
@@ -60,6 +61,7 @@ export declare const KEYS: {
     readonly Y: "y";
     readonly Z: "z";
     readonly K: "k";
+    readonly W: "w";
     readonly 0: "0";
     readonly 1: "1";
     readonly 2: "2";

package/types/packages/excalidraw/index.d.ts

@@ -25,3 +25,4 @@ export { useDevice } from "../../components/App";
 export { WelcomeScreen };
 export { LiveCollaborationTrigger };
 export { DefaultSidebar } from "../../components/DefaultSidebar";
+export { normalizeLink } from "../../data/url";

package/types/packages/excalidraw/webpack.dev.config.d.ts

@@ -36,13 +36,16 @@ export namespace module {
     } | {
         test: RegExp;
         exclude: RegExp;
-        use: {
+        use: ({
+            loader: string;
+            options?: undefined;
+        } | {
             loader: string;
             options: {
                 transpileOnly: boolean;
                 configFile: string;
             };
-        }[];
+        })[];
         type?: undefined;
     } | {
         test: RegExp;

package/types/packages/excalidraw/webpack.prod.config.d.ts

@@ -36,6 +36,9 @@ export namespace module {
         test: RegExp;
         exclude: RegExp;
         use: ({
+            loader: string;
+            options?: undefined;
+        } | {
             loader: string;
             options: {
                 transpileOnly: boolean;

package/types/packages/utils.d.ts

@@ -21,8 +21,9 @@ export declare const exportToBlob: (opts: ExportOpts & {
     quality?: number;
     exportPadding?: number;
 }) => Promise<Blob>;
-export declare const exportToSvg: ({ elements, appState, files, exportPadding, }: Omit<ExportOpts, "getDimensions"> & {
+export declare const exportToSvg: ({ elements, appState, files, exportPadding, renderEmbeddables, }: Omit<ExportOpts, "getDimensions"> & {
     exportPadding?: number | undefined;
+    renderEmbeddables?: boolean | undefined;
 }) => Promise<SVGSVGElement>;
 export declare const exportToClipboard: (opts: ExportOpts & {
     mimeType?: string;

package/types/renderer/renderElement.d.ts

@@ -29,7 +29,7 @@ export declare const setShapeForElement: <T extends ExcalidrawElement>(element:
 export declare const invalidateShapeForElement: (element: ExcalidrawElement) => boolean;
 export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
 export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: RenderConfig, appState: AppState) => void;
-export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, exportWithDarkMode?: boolean, exportingFrameId?: string | null) => void;
+export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, exportWithDarkMode?: boolean, exportingFrameId?: string | null, renderEmbeddables?: boolean) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
 export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;

package/types/renderer/renderScene.d.ts

@@ -42,9 +42,10 @@ export declare const isVisibleElement: (element: ExcalidrawElement, canvasWidth:
     scrollX: number;
     scrollY: number;
 }) => boolean;
-export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, exportingFrameId, }?: {
+export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, exportingFrameId, renderEmbeddables, }?: {
     offsetX?: number | undefined;
     offsetY?: number | undefined;
     exportWithDarkMode?: boolean | undefined;
     exportingFrameId?: string | null | undefined;
+    renderEmbeddables?: boolean | undefined;
 }) => void;

package/types/scene/Scene.d.ts

@@ -1,5 +1,6 @@
 import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameElement } from "../element/types";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { AppState } from "../types";
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
 type SceneStateCallback = () => void;
@@ -16,9 +17,21 @@ declare class Scene {
     private nonDeletedFrames;
     private frames;
     private elementsMap;
+    private selectedElementsCache;
     getElementsIncludingDeleted(): readonly ExcalidrawElement[];
     getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
     getFramesIncludingDeleted(): readonly ExcalidrawFrameElement[];
+    getSelectedElements(opts: {
+        selectedElementIds: AppState["selectedElementIds"];
+        /**
+         * for specific cases where you need to use elements not from current
+         * scene state. This in effect will likely result in cache-miss, and
+         * the cache won't be updated in this case.
+         */
+        elements?: readonly ExcalidrawElement[];
+        includeBoundTextElement?: boolean;
+        includeElementsInFrames?: boolean;
+    }): NonDeleted<ExcalidrawElement>[];
     getNonDeletedFrames(): readonly NonDeleted<ExcalidrawFrameElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;

package/types/scene/export.d.ts

@@ -20,5 +20,6 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     renderFrame?: boolean;
 }, files: BinaryFiles | null, opts?: {
     serializeAsJSON?: () => string;
+    renderEmbeddables?: boolean;
 }) => Promise<SVGSVGElement>;
 export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], exportPadding: number, scale: number) => [number, number];

package/types/scene/selection.d.ts

@@ -8,7 +8,10 @@ import { AppState } from "../types";
  */
 export declare const excludeElementsInFramesFromSelection: <T extends ExcalidrawElement>(selectedElements: readonly T[]) => T[];
 export declare const getElementsWithinSelection: (elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement, excludeElementsInFrames?: boolean) => NonDeletedExcalidrawElement[];
-export declare const isSomeElementSelected: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">) => boolean;
+export declare const isSomeElementSelected: {
+    (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">): boolean;
+    clearCache(): void;
+};
 /**
  * Returns common attribute (picked by `getAttribute` callback) of selected
  *  elements. If elements don't share the same value, returns `null`.
@@ -19,3 +22,10 @@ export declare const getSelectedElements: (elements: readonly NonDeletedExcalidr
     includeElementsInFrames?: boolean;
 }) => ExcalidrawElement[];
 export declare const getTargetElements: (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds" | "editingElement">) => ExcalidrawElement[];
+/**
+ * returns prevState's selectedElementids if no change from previous, so as to
+ * retain reference identity for memoization
+ */
+export declare const makeNextSelectedElementIds: (nextSelectedElementIds: AppState["selectedElementIds"], prevState: Pick<AppState, "selectedElementIds">) => Readonly<{
+    [id: string]: true;
+}>;

package/types/types.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement } from "./element/types";
+import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement, ExcalidrawEmbeddableElement } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -57,7 +57,7 @@ export type BinaryFileData = {
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
 export type LastActiveTool = {
-    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
+    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
     customType: null;
 } | {
     type: "custom";
@@ -74,6 +74,10 @@ export type AppState = {
     showWelcomeScreen: boolean;
     isLoading: boolean;
     errorMessage: React.ReactNode;
+    activeEmbeddable: {
+        element: NonDeletedExcalidrawElement;
+        state: "hover" | "active";
+    } | null;
     draggingElement: NonDeletedExcalidrawElement | null;
     resizingElement: NonDeletedExcalidrawElement | null;
     multiElement: NonDeleted<ExcalidrawLinearElement> | null;
@@ -82,7 +86,12 @@ export type AppState = {
     startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
     suggestedBindings: SuggestedBinding[];
     frameToHighlight: NonDeleted<ExcalidrawFrameElement> | null;
-    shouldRenderFrames: boolean;
+    frameRendering: {
+        enabled: boolean;
+        name: boolean;
+        outline: boolean;
+        clip: boolean;
+    };
     editingFrame: string | null;
     elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
     editingElement: NonDeletedExcalidrawElement | null;
@@ -95,7 +104,7 @@ export type AppState = {
         lastActiveTool: LastActiveTool;
         locked: boolean;
     } & ({
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
+        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
         customType: null;
     } | {
         type: "custom";
@@ -145,11 +154,11 @@ export type AppState = {
      */
     defaultSidebarDockedPreference: boolean;
     lastPointerDownWith: PointerType;
-    selectedElementIds: {
-        [id: string]: boolean;
-    };
+    selectedElementIds: Readonly<{
+        [id: string]: true;
+    }>;
     previousSelectedElementIds: {
-        [id: string]: boolean;
+        [id: string]: true;
     };
     selectedElementsAreBeingDragged: boolean;
     shouldCacheIgnoreZoom: boolean;
@@ -272,6 +281,8 @@ export interface ExcalidrawProps {
     onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
     onScrollChange?: (scrollX: number, scrollY: number) => void;
     children?: React.ReactNode;
+    validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined);
+    renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -421,7 +432,7 @@ export type ExcalidrawImperativeAPI = {
      * the frames are still interactive in edit mode. As such, this API should be
      * used in conjunction with view mode (props.viewModeEnabled).
      */
-    toggleFrameRendering: InstanceType<typeof App>["toggleFrameRendering"];
+    updateFrameRendering: InstanceType<typeof App>["updateFrameRendering"];
 };
 export type Device = Readonly<{
     isSmScreen: boolean;

package/types/utility-types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
@@ -20,3 +19,6 @@ export type SignatureType<T> = T extends (...args: infer R) => any ? R : never;
 export type CallableType<T extends (...args: any[]) => any> = (...args: SignatureType<T>) => ReturnType<T>;
 export type ForwardRef<T, P = any> = Parameters<CallableType<React.ForwardRefRenderFunction<T, P>>>[1];
 export type ExtractSetType<T extends Set<any>> = T extends Set<infer U> ? U : never;
+export type SameType<T, U> = T extends U ? (U extends T ? true : false) : false;
+export type Assert<T extends true> = T;
+export type NestedKeyOf<T, K = keyof T> = K extends keyof T & (string | number) ? `${K}` | (T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : never) : never;

package/types/utils.d.ts

@@ -30,31 +30,58 @@ export declare const throttleRAF: <T extends any[]>(fn: (...args: T) => void, op
     cancel(): void;
 };
 /**
- * Compute new values based on the same ease function and trigger the
- * callback through a requestAnimationFrame call
+ * Exponential ease-out method
  *
- * use `opts` to define a duration and/or an easeFn
+ * @param {number} k - The value to be tweened.
+ * @returns {number} The tweened value.
+ */
+export declare const easeOut: (k: number) => number;
+/**
+ * Animates values from `fromValues` to `toValues` using the requestAnimationFrame API.
+ * Executes the `onStep` callback on each step with the interpolated values.
+ * Returns a function that can be called to cancel the animation.
+ *
+ * @example
+ * // Example usage:
+ * const fromValues = { x: 0, y: 0 };
+ * const toValues = { x: 100, y: 200 };
+ * const onStep = ({x, y}) => {
+ *   setState(x, y)
+ * };
+ * const onCancel = () => {
+ *   console.log("Animation canceled");
+ * };
  *
- * for example:
- * ```ts
- * easeToValuesRAF([10, 20, 10], [0, 0, 0], (a, b, c) => setState(a,b, c))
- * ```
+ * const cancelAnimation = easeToValuesRAF({
+ *   fromValues,
+ *   toValues,
+ *   onStep,
+ *   onCancel,
+ * });
  *
- * @param fromValues The initial values, must be numeric
- * @param toValues The destination values, must also be numeric
- * @param callback The callback receiving the values
- * @param opts default to 250ms duration and the easeOut function
+ * // To cancel the animation:
+ * cancelAnimation();
  */
-export declare const easeToValuesRAF: (fromValues: number[], toValues: number[], callback: (...values: number[]) => void, opts?: {
+export declare const easeToValuesRAF: <T extends Record<keyof T, number>, K extends keyof T>({ fromValues, toValues, onStep, duration, interpolateValue, onStart, onEnd, onCancel, }: {
+    fromValues: T;
+    toValues: T;
+    /**
+     * Interpolate a single value.
+     * Return undefined to be handled by the default interpolator.
+     */
+    interpolateValue?: ((fromValue: number, toValue: number, progress: number, key: K) => number | undefined) | undefined;
+    onStep: (values: T) => void;
     duration?: number | undefined;
-    easeFn?: ((value: number) => number) | undefined;
-} | undefined) => () => void;
+    onStart?: (() => void) | undefined;
+    onEnd?: (() => void) | undefined;
+    onCancel?: (() => void) | undefined;
+}) => () => void;
 export declare const chunk: <T extends unknown>(array: readonly T[], size: number) => T[][];
 export declare const selectNode: (node: Element) => void;
 export declare const removeSelection: () => void;
 export declare const distance: (x: number, y: number) => number;
 export declare const updateActiveTool: (appState: Pick<AppState, "activeTool">, data: ({
-    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame";
+    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
 } | {
     type: "custom";
     customType: string;