@zsviczian/excalidraw 0.15.2-obsidian-5 → 0.15.2-obsidian-7

package/types/actions/types.d.ts

@@ -15,7 +15,7 @@ export type ActionResult = {
 type ActionFn = (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
-export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "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" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "toggleFrameRendering" | "setFrameAsActiveTool" | "setIFrameAsActiveTool" | "createContainerFromText" | "wrapTextInContainer";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "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" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "toggleFrameRendering" | "setFrameAsActiveTool" | "setIFrameAsActiveTool" | "createContainerFromText" | "wrapTextInContainer";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/types/appState.d.ts

@@ -48,11 +48,11 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     } | null | undefined;
     defaultSidebarDockedPreference?: boolean | undefined;
     lastPointerDownWith?: import("./element/types").PointerType | undefined;
-    selectedElementIds?: {
-        [id: string]: boolean;
-    } | undefined;
+    selectedElementIds?: Readonly<{
+        [id: string]: true;
+    }> | undefined;
     previousSelectedElementIds?: {
-        [id: string]: boolean;
+        [id: string]: true;
     } | undefined;
     shouldCacheIgnoreZoom?: boolean | undefined;
     zenModeEnabled?: boolean | undefined;

package/types/components/App.d.ts

@@ -52,6 +52,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private excalidrawContainerValue;
     files: BinaryFiles;
     imageCache: AppClassProperties["imageCache"];
+    private iFrameRefs;
     hitLinkElement?: NonDeletedExcalidrawElement;
     lastPointerDown: React.PointerEvent<HTMLElement> | null;
     lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null;
@@ -59,7 +60,6 @@ declare class App extends React.Component<AppProps, AppState> {
         x: number;
         y: number;
     };
-    private iFrameRefs;
     allowMobileMode: boolean;
     constructor(props: AppProps);
     private renderCanvas;
@@ -68,6 +68,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private getIFrameElementById;
     private handleIFrameCenterClick;
     private isIFrameCenter;
+    private updateIFrames;
     private renderIFrames;
     private getFrameNameDOMId;
     frameNameBoundsCache: FrameNameBoundsCache;
@@ -122,6 +123,17 @@ declare class App extends React.Component<AppProps, AppState> {
     private cancelInProgresAnimation;
     scrollToContent: (target?: ExcalidrawElement | readonly ExcalidrawElement[], opts?: {
         fitToContent?: boolean;
+        fitToViewport?: never;
+        viewportZoomFactor?: never;
+        animate?: boolean;
+        duration?: number;
+    } | {
+        fitToContent?: never;
+        fitToViewport?: boolean;
+        /** when fitToViewport=true, how much screen should the content cover,
+         * between 0.1 (10%) and 1 (100%)
+         */
+        viewportZoomFactor?: number;
         animate?: boolean;
         duration?: number;
     }) => void;

package/types/constants.d.ts

@@ -60,14 +60,14 @@ export declare enum EVENT {
     MENU_ITEM_SELECT = "menu.itemSelect",
     MESSAGE = "message"
 }
-export declare enum YTPLAYER {
-    UNSTARTED = -1,
-    ENDED = 0,
-    PLAYING = 1,
-    PAUSED = 2,
-    BUFFERING = 3,
-    CUED = 5
-}
+export declare const YOUTUBE_STATES: {
+    readonly UNSTARTED: -1;
+    readonly ENDED: 0;
+    readonly PLAYING: 1;
+    readonly PAUSED: 2;
+    readonly BUFFERING: 3;
+    readonly CUED: 5;
+};
 export declare const ENV: {
     TEST: string;
     DEVELOPMENT: string;

package/types/data/url.d.ts

@@ -0,0 +1,2 @@
+export declare const normalizeLink: (link: string) => string;
+export declare const isLocalLink: (link: string | null) => boolean;

package/types/element/Hyperlink.d.ts

@@ -14,8 +14,6 @@ export declare const Hyperlink: ({ element, setAppState, onLinkOpen, setToast, }
         duration?: number;
     } | null) => void;
 }) => JSX.Element | null;
-export declare const normalizeLink: (link: string) => string;
-export declare const isLocalLink: (link: string | null | undefined) => boolean;
 export declare const actionLink: {
     name: "hyperlink";
     perform: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => false | {
@@ -96,11 +94,11 @@ export declare const actionLink: {
             openDialog: "imageExport" | "help" | "jsonExport" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
-            selectedElementIds: {
-                [id: string]: boolean;
-            };
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
             previousSelectedElementIds: {
-                [id: string]: boolean;
+                [id: string]: true;
             };
             selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;

package/types/element/iframe.d.ts

@@ -95,11 +95,11 @@ export declare const actionSetIFrameAsActiveTool: {
             openDialog: "imageExport" | "help" | "jsonExport" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
-            selectedElementIds: {
-                [id: string]: boolean;
-            };
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
             previousSelectedElementIds: {
-                [id: string]: boolean;
+                [id: string]: true;
             };
             selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
@@ -163,11 +163,5 @@ export declare const actionSetIFrameAsActiveTool: {
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
-export declare class IFrameURLValidator {
-    private static instance;
-    private validators;
-    private constructor();
-    static getInstance(validators?: RegExp[]): IFrameURLValidator;
-    run(url: string | null | undefined): boolean;
-}
+export declare const iframeURLValidator: (url: string | null | undefined, validateIFrame: ExcalidrawProps["validateIFrame"]) => boolean;
 export {};

package/types/element/linearElementEditor.d.ts

@@ -196,11 +196,11 @@ export declare class LinearElementEditor {
             openDialog: "imageExport" | "help" | "jsonExport" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
-            selectedElementIds: {
-                [id: string]: boolean;
-            };
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
             previousSelectedElementIds: {
-                [id: string]: boolean;
+                [id: string]: true;
             };
             selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;

package/types/element/newElement.d.ts

@@ -7,7 +7,7 @@ export declare const newElement: (opts: {
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;
 export declare const newIFrameElement: (opts: {
     type: "iframe";
-    whitelisted: boolean;
+    validated: boolean | undefined;
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawIFrameElement>;
 export declare const newFrameElement: (opts: ElementConstructorOpts) => NonDeleted<ExcalidrawFrameElement>;
 export declare const newTextElement: (opts: {
@@ -20,7 +20,6 @@ export declare const newTextElement: (opts: {
     containerId?: ExcalidrawTextContainer["id"];
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
-    isFrameName?: boolean;
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
 export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
     x: number;

package/types/element/types.d.ts

@@ -74,7 +74,14 @@ export type ExcalidrawEllipseElement = _ExcalidrawElementBase & {
     type: "ellipse";
 };
 export type ExcalidrawIFrameElement = _ExcalidrawElementBase & Readonly<{
-    whitelisted?: boolean;
+    /**
+     * indicates whether the iframe src (url) has been validated for rendering.
+     * nullish value indicates that the validation is pending. We reset the
+     * value on each restore (or url change) so that we can guarantee
+     * the validation came from a trusted source (the editor). Also because we
+     * may not have access to host-app supplied url validator during restore.
+     */
+    validated?: boolean;
     type: "iframe";
 }>;
 export type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{

package/types/groups.d.ts

@@ -12,7 +12,7 @@ export declare const getSelectedGroupIds: (appState: AppState) => GroupId[];
  * When you select an element, you often want to actually select the whole group it's in, unless
  * you're currently editing that group.
  */
-export declare const selectGroupsForSelectedElements: (appState: AppState, elements: readonly NonDeleted<ExcalidrawElement>[]) => AppState;
+export declare const selectGroupsForSelectedElements: (appState: AppState, elements: readonly NonDeleted<ExcalidrawElement>[], prevAppState: AppState) => AppState;
 export declare const selectGroupsFromGivenElements: (elements: readonly NonDeleted<ExcalidrawElement>[], appState: AppState) => {
     [groupId: string]: boolean;
 };

package/types/history.d.ts

@@ -5,9 +5,9 @@ export interface HistoryEntry {
     elements: ExcalidrawElement[];
 }
 declare const clearAppStatePropertiesForHistory: (appState: AppState) => {
-    selectedElementIds: {
-        [id: string]: boolean;
-    };
+    selectedElementIds: Readonly<{
+        [id: string]: true;
+    }>;
     selectedGroupIds: {
         [groupId: string]: boolean;
     };

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";

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

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

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

@@ -150,11 +150,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;
@@ -306,8 +306,11 @@ export interface ExcalidrawProps {
     onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
     onScrollChange?: (scrollX: number, scrollY: number) => void;
     children?: React.ReactNode;
-    iframeURLWhitelist?: RegExp[];
+    validateIFrame?: boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined);
     renderCustomIFrame?: (element: NonDeletedExcalidrawElement, radius: number, appState: UIAppState) => JSX.Element | null;
+    renderWebview?: boolean;
+    renderIFrameMenu?: (//zsivzian
+    appState: AppState) => JSX.Element | null;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -463,6 +466,7 @@ export type ExcalidrawImperativeAPI = {
     setCursor: InstanceType<typeof App>["setCursor"];
     resetCursor: InstanceType<typeof App>["resetCursor"];
     toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
+    getIFrameElementById: InstanceType<typeof App>["getIFrameElementById"];
     /**
      * Disables rendering of frames (including element clipping), but currently
      * the frames are still interactive in edit mode. As such, this API should be

package/types/utils.d.ts

@@ -30,25 +30,52 @@ 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;