@zsviczian/excalidraw 0.15.2-obsidian-4 → 0.15.2-obsidian-6

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, ExcalidrawTextElement, FileId, ExcalidrawImageElement, Theme, StrokeRoundness } from "./element/types";
+import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, ExcalidrawTextElement, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -58,7 +58,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";
+    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "iframe";
     customType: null;
 } | {
     type: "custom";
@@ -75,6 +75,10 @@ export type AppState = {
     showWelcomeScreen: boolean;
     isLoading: boolean;
     errorMessage: React.ReactNode;
+    activeIFrame: {
+        element: NonDeletedExcalidrawElement;
+        state: "hover" | "active";
+    } | null;
     draggingElement: NonDeletedExcalidrawElement | null;
     resizingElement: NonDeletedExcalidrawElement | null;
     multiElement: NonDeleted<ExcalidrawLinearElement> | null;
@@ -82,6 +86,10 @@ export type AppState = {
     isBindingEnabled: boolean;
     startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
     suggestedBindings: SuggestedBinding[];
+    frameToHighlight: NonDeleted<ExcalidrawFrameElement> | null;
+    shouldRenderFrames: boolean;
+    editingFrame: string | null;
+    elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
     editingElement: NonDeletedExcalidrawElement | null;
     editingLinearElement: LinearElementEditor | null;
     activeTool: {
@@ -92,7 +100,7 @@ export type AppState = {
         lastActiveTool: LastActiveTool;
         locked: boolean;
     } & ({
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand";
+        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "iframe";
         customType: null;
     } | {
         type: "custom";
@@ -148,6 +156,7 @@ export type AppState = {
     previousSelectedElementIds: {
         [id: string]: boolean;
     };
+    selectedElementsAreBeingDragged: boolean;
     shouldCacheIgnoreZoom: boolean;
     toast: {
         message: string;
@@ -297,6 +306,11 @@ export interface ExcalidrawProps {
     onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
     onScrollChange?: (scrollX: number, scrollY: number) => void;
     children?: React.ReactNode;
+    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"];
@@ -452,6 +466,13 @@ 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
+     * used in conjunction with view mode (props.viewModeEnabled).
+     */
+    toggleFrameRendering: InstanceType<typeof App>["toggleFrameRendering"];
 };
 export type Device = Readonly<{
     isSmScreen: boolean;
@@ -460,4 +481,18 @@ export type Device = Readonly<{
     canDeviceFitSidebar: boolean;
     isLandscape: boolean;
 }>;
+type FrameNameBounds = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    angle: number;
+};
+export type FrameNameBoundsCache = {
+    get: (frameElement: ExcalidrawFrameElement) => FrameNameBounds | null;
+    _cache: Map<string, FrameNameBounds & {
+        zoom: AppState["zoom"]["value"];
+        versionNonce: ExcalidrawFrameElement["versionNonce"];
+    }>;
+};
 export {};

package/types/utils.d.ts

@@ -1,5 +1,5 @@
 import { EVENT } from "./constants";
-import { FontFamilyValues, FontString } from "./element/types";
+import { FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./element/types";
 import { AppState, LastActiveTool, Zoom } from "./types";
 import { SHAPES } from "./shapes";
 export declare const setDateTimeForTests: (dateTime: string) => void;
@@ -7,6 +7,7 @@ export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
 export declare const isToolIcon: (target: Element | EventTarget | null) => target is HTMLElement;
 export declare const isInputLike: (target: Element | EventTarget | null) => target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLBRElement | HTMLDivElement;
+export declare const isInteractive: (target: Element | EventTarget | null) => boolean;
 export declare const isWritableElement: (target: Element | EventTarget | null) => target is HTMLInputElement | HTMLTextAreaElement | HTMLBRElement | HTMLDivElement;
 export declare const getFontFamilyString: ({ fontFamily, }: {
     fontFamily: FontFamilyValues;
@@ -29,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";
+    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "iframe";
 } | {
     type: "custom";
     customType: string;
@@ -154,9 +182,11 @@ export declare const wrapEvent: <T extends Event>(name: EVENT, nativeEvent: T) =
 export declare const updateObject: <T extends Record<string, any>>(obj: T, updates: Partial<T>) => T;
 export declare const isPrimitive: (val: any) => boolean;
 export declare const getFrame: () => "top" | "iframe";
+export declare const isRunningInIframe: () => boolean;
 export declare const isPromiseLike: (value: any) => value is Promise<any>;
 export declare const queryFocusableElements: (container: HTMLElement | null) => HTMLElement[];
 export declare const isShallowEqual: <T extends Record<string, any>, I extends keyof T>(objA: T, objB: T, comparators?: Record<I, (a: T[I], b: T[I]) => boolean> | undefined, debug?: boolean) => boolean;
 export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
     checkForDefaultPrevented?: boolean | undefined;
 }) => (event: E) => void;
+export declare const isOnlyExportingSingleFrame: (elements: readonly NonDeletedExcalidrawElement[]) => boolean;

package/types/zindex.d.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "./element/types";
 import { AppState } from "./types";
-export declare const moveOneLeft: (elements: readonly ExcalidrawElement[], appState: AppState) => (import("./element/types").ExcalidrawLinearElement | import("./element/types").ExcalidrawSelectionElement | import("./element/types").ExcalidrawRectangleElement | import("./element/types").ExcalidrawDiamondElement | import("./element/types").ExcalidrawEllipseElement | import("./element/types").ExcalidrawImageElement | import("./element/types").ExcalidrawTextElement | import("./element/types").ExcalidrawFreeDrawElement)[];
-export declare const moveOneRight: (elements: readonly ExcalidrawElement[], appState: AppState) => (import("./element/types").ExcalidrawLinearElement | import("./element/types").ExcalidrawSelectionElement | import("./element/types").ExcalidrawRectangleElement | import("./element/types").ExcalidrawDiamondElement | import("./element/types").ExcalidrawEllipseElement | import("./element/types").ExcalidrawImageElement | import("./element/types").ExcalidrawTextElement | import("./element/types").ExcalidrawFreeDrawElement)[];
-export declare const moveAllLeft: (elements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[];
-export declare const moveAllRight: (elements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[];
+export declare const moveOneLeft: (elements: readonly ExcalidrawElement[], appState: AppState, elementsToBeMoved?: readonly ExcalidrawElement[]) => ExcalidrawElement[];
+export declare const moveOneRight: (elements: readonly ExcalidrawElement[], appState: AppState, elementsToBeMoved?: readonly ExcalidrawElement[]) => ExcalidrawElement[];
+export declare const moveAllLeft: (elements: readonly ExcalidrawElement[], appState: AppState, elementsToBeMoved?: readonly ExcalidrawElement[]) => ExcalidrawElement[];
+export declare const moveAllRight: (elements: readonly ExcalidrawElement[], appState: AppState, elementsToBeMoved?: readonly ExcalidrawElement[]) => ExcalidrawElement[];