@unicom-cloud/ui 0.8.167 → 0.8.169

package/draw/interface.d.ts

@@ -1,8 +1,714 @@
-import type { CSSProperties } from 'react';
+import type React from 'react';
+import type { CSSProperties, JSX } from 'react';
+import type { EditorInterface, IMAGE_MIME_TYPES, MIME_TYPES, throttleRAF } from './common';
+import { UserIdleState } from './common';
+import type { MakeBrand, MaybePromise, Merge, ValueOf } from './common/utility-types';
+import type { Action } from './core/actions/types';
+import type { Spreadsheet } from './core/charts';
+import type { ClipboardData } from './core/clipboard';
+import type App from './core/components/App';
+import type { ContextMenuItems } from './core/components/ContextMenu';
+import type { FileSystemHandle } from './core/data/filesystem';
+import type Library from './core/data/library';
+import type { ImportedDataState } from './core/data/types';
+import type { Language } from './core/i18n';
+import type { isOverScrollBars } from './core/scene/scrollbars';
+import type { SnapLine } from './core/snapping';
+import type { CaptureUpdateActionType, DurableIncrement, EphemeralIncrement, LinearElementEditor, MaybeTransformHandleType } from './element';
+import type { Arrowhead, BindMode, ChartType, DrawBindableElement, DrawElement, DrawElementType, DrawEmbeddableElement, DrawFrameLikeElement, DrawIframeLikeElement, DrawLinearElement, DrawMagicFrameElement, DrawNonSelectionElement, FileId, FontFamilyValues, GroupId, NonDeleted, NonDeletedDrawElement, OrderedDrawElement, PointerType, StrokeRoundness, TextAlign, Theme } from './element/types';
+export type { App };
+export type SocketId = string & {
+    _brand: 'SocketId';
+};
+export type Collaborator = Readonly<{
+    pointer?: CollaboratorPointer;
+    button?: 'up' | 'down';
+    selectedElementIds?: AppState['selectedElementIds'];
+    username?: string | null;
+    userState?: UserIdleState;
+    color?: {
+        background: string;
+        stroke: string;
+    };
+    avatarUrl?: string;
+    id?: string;
+    socketId?: SocketId;
+    isCurrentUser?: boolean;
+    isInCall?: boolean;
+    isSpeaking?: boolean;
+    isMuted?: boolean;
+}>;
+export type CollaboratorPointer = {
+    x: number;
+    y: number;
+    tool: 'pointer' | 'laser';
+    /**
+     * Whether to render cursor + username. Useful when you only want to render
+     * laser trail.
+     *
+     * @default true
+     */
+    renderCursor?: boolean;
+    /**
+     * Explicit laser color.
+     *
+     * @default string collaborator's cursor color
+     */
+    laserColor?: string;
+};
+export type DataURL = string & {
+    _brand: 'DataURL';
+};
+export type BinaryFileData = {
+    mimeType: ValueOf<typeof IMAGE_MIME_TYPES> | typeof MIME_TYPES.binary;
+    id: FileId;
+    dataURL: DataURL;
+    /**
+     * Epoch timestamp in milliseconds
+     */
+    created: number;
+    /**
+     * Indicates when the file was last retrieved from storage to be loaded
+     * onto the scene. We use this flag to determine whether to delete unused
+     * files from storage.
+     *
+     * Epoch timestamp in milliseconds.
+     */
+    lastRetrieved?: number;
+    /**
+     * indicates the version of the file. This can be used to determine whether
+     * the file dataURL has changed e.g. as part of restore due to schema update.
+     */
+    version?: number;
+};
+export type BinaryFileMetadata = Omit<BinaryFileData, 'dataURL'>;
+export type BinaryFiles = Record<DrawElement['id'], BinaryFileData>;
+export type ToolType = 'selection' | 'lasso' | 'rectangle' | 'diamond' | 'ellipse' | 'arrow' | 'line' | 'freedraw' | 'text' | 'image' | 'eraser' | 'hand' | 'frame' | 'magicframe' | 'embeddable' | 'laser';
+export type ElementOrToolType = DrawElementType | ToolType | 'custom';
+export type ActiveTool = {
+    type: ToolType;
+    customType: null;
+} | {
+    type: 'custom';
+    customType: string;
+};
+export type SidebarName = string;
+export type SidebarTabName = string;
+export type UserToFollow = {
+    socketId: SocketId;
+    username: string;
+};
+type _CommonCanvasAppState = {
+    zoom: AppState['zoom'];
+    scrollX: AppState['scrollX'];
+    scrollY: AppState['scrollY'];
+    width: AppState['width'];
+    height: AppState['height'];
+    viewModeEnabled: AppState['viewModeEnabled'];
+    openDialog: AppState['openDialog'];
+    editingGroupId: AppState['editingGroupId'];
+    selectedElementIds: AppState['selectedElementIds'];
+    frameToHighlight: AppState['frameToHighlight'];
+    offsetLeft: AppState['offsetLeft'];
+    offsetTop: AppState['offsetTop'];
+    theme: AppState['theme'];
+};
+export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
+    shouldCacheIgnoreZoom: AppState['shouldCacheIgnoreZoom'];
+    /** null indicates transparent bg */
+    viewBackgroundColor: AppState['viewBackgroundColor'] | null;
+    exportScale: AppState['exportScale'];
+    selectedElementsAreBeingDragged: AppState['selectedElementsAreBeingDragged'];
+    gridSize: AppState['gridSize'];
+    gridStep: AppState['gridStep'];
+    frameRendering: AppState['frameRendering'];
+    currentHoveredFontFamily: AppState['currentHoveredFontFamily'];
+    hoveredElementIds: AppState['hoveredElementIds'];
+    suggestedBinding: AppState['suggestedBinding'];
+    croppingElementId: AppState['croppingElementId'];
+}>;
+export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
+    activeEmbeddable: AppState['activeEmbeddable'];
+    selectionElement: AppState['selectionElement'];
+    selectedGroupIds: AppState['selectedGroupIds'];
+    selectedLinearElement: AppState['selectedLinearElement'];
+    multiElement: AppState['multiElement'];
+    newElement: AppState['newElement'];
+    isBindingEnabled: AppState['isBindingEnabled'];
+    suggestedBinding: AppState['suggestedBinding'];
+    isRotating: AppState['isRotating'];
+    elementsToHighlight: AppState['elementsToHighlight'];
+    collaborators: AppState['collaborators'];
+    snapLines: AppState['snapLines'];
+    zenModeEnabled: AppState['zenModeEnabled'];
+    editingTextElement: AppState['editingTextElement'];
+    isCropping: AppState['isCropping'];
+    croppingElementId: AppState['croppingElementId'];
+    searchMatches: AppState['searchMatches'];
+    activeLockedId: AppState['activeLockedId'];
+    hoveredElementIds: AppState['hoveredElementIds'];
+    frameRendering: AppState['frameRendering'];
+    shouldCacheIgnoreZoom: AppState['shouldCacheIgnoreZoom'];
+    exportScale: AppState['exportScale'];
+}>;
+export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
+export type ObservedStandaloneAppState = {
+    name: AppState['name'];
+    viewBackgroundColor: AppState['viewBackgroundColor'];
+};
+export type ObservedElementsAppState = {
+    editingGroupId: AppState['editingGroupId'];
+    selectedElementIds: AppState['selectedElementIds'];
+    selectedGroupIds: AppState['selectedGroupIds'];
+    selectedLinearElement: {
+        elementId: LinearElementEditor['elementId'];
+        isEditing: boolean;
+    } | null;
+    croppingElementId: AppState['croppingElementId'];
+    lockedMultiSelections: AppState['lockedMultiSelections'];
+    activeLockedId: AppState['activeLockedId'];
+};
+export interface AppState {
+    contextMenu: {
+        items: ContextMenuItems;
+        top: number;
+        left: number;
+    } | null;
+    showWelcomeScreen: boolean;
+    isLoading: boolean;
+    errorMessage: React.ReactNode;
+    activeEmbeddable: {
+        element: NonDeletedDrawElement;
+        state: 'hover' | 'active';
+    } | null;
+    /**
+     * for a newly created element
+     * - set on pointer down, updated during pointer move, used on pointer up
+     */
+    newElement: NonDeleted<DrawNonSelectionElement> | null;
+    /**
+     * for a single element that's being resized
+     * - set on pointer down when it's selected and the active tool is selection
+     */
+    resizingElement: NonDeletedDrawElement | null;
+    /**
+     * multiElement is for multi-point linear element that's created by clicking as opposed to dragging
+     * - when set and present, the editor will handle linear element creation logic accordingly
+     */
+    multiElement: NonDeleted<DrawLinearElement> | null;
+    /**
+     * decoupled from newElement, dragging selection only creates selectionElement
+     * - set on pointer down, updated during pointer move
+     */
+    selectionElement: NonDeletedDrawElement | null;
+    isBindingEnabled: boolean;
+    startBoundElement: NonDeleted<DrawBindableElement> | null;
+    suggestedBinding: NonDeleted<DrawBindableElement> | null;
+    frameToHighlight: NonDeleted<DrawFrameLikeElement> | null;
+    frameRendering: {
+        enabled: boolean;
+        name: boolean;
+        outline: boolean;
+        clip: boolean;
+    };
+    editingFrame: string | null;
+    elementsToHighlight: NonDeleted<DrawElement>[] | null;
+    /**
+     * set when a new text is created or when an existing text is being edited
+     */
+    editingTextElement: NonDeletedDrawElement | null;
+    activeTool: {
+        /**
+         * indicates a previous tool we should revert back to if we deselect the
+         * currently active tool. At the moment applies to `eraser` and `hand` tool.
+         */
+        lastActiveTool: ActiveTool | null;
+        locked: boolean;
+        fromSelection: boolean;
+    } & ActiveTool;
+    preferredSelectionTool: {
+        type: 'selection' | 'lasso';
+        initialized: boolean;
+    };
+    penMode: boolean;
+    penDetected: boolean;
+    exportBackground: boolean;
+    exportEmbedScene: boolean;
+    exportWithDarkMode: boolean;
+    exportScale: number;
+    currentItemStrokeColor: string;
+    currentItemBackgroundColor: string;
+    currentItemFillStyle: DrawElement['fillStyle'];
+    currentItemStrokeWidth: number;
+    currentItemStrokeStyle: DrawElement['strokeStyle'];
+    currentItemRoughness: number;
+    currentItemOpacity: number;
+    currentItemFontFamily: FontFamilyValues;
+    currentItemFontSize: number;
+    currentItemTextAlign: TextAlign;
+    currentItemStartArrowhead: Arrowhead | null;
+    currentItemEndArrowhead: Arrowhead | null;
+    currentHoveredFontFamily: FontFamilyValues | null;
+    currentItemRoundness: StrokeRoundness;
+    currentItemArrowType: 'sharp' | 'round' | 'elbow';
+    viewBackgroundColor: string;
+    scrollX: number;
+    scrollY: number;
+    cursorButton: 'up' | 'down';
+    scrolledOutside: boolean;
+    name: string | null;
+    isResizing: boolean;
+    isRotating: boolean;
+    zoom: Zoom;
+    openMenu: 'canvas' | null;
+    openPopup: 'canvasBackground' | 'elementBackground' | 'elementStroke' | 'fontFamily' | 'compactTextProperties' | 'compactStrokeStyles' | 'compactOtherProperties' | 'compactArrowProperties' | null;
+    openSidebar: {
+        name: SidebarName;
+        tab?: SidebarTabName;
+    } | null;
+    openDialog: null | {
+        name: 'imageExport' | 'help' | 'jsonExport';
+    } | {
+        name: 'commandPalette';
+    } | {
+        name: 'settings';
+    } | {
+        name: 'elementLinkSelector';
+        sourceElementId: DrawElement['id'];
+    };
+    /**
+     * Reflects user preference for whether the default sidebar should be docked.
+     *
+     * NOTE this is only a user preference and does not reflect the actual docked
+     * state of the sidebar, because the host apps can override this through
+     * a DefaultSidebar prop, which is not reflected back to the appState.
+     */
+    defaultSidebarDockedPreference: boolean;
+    lastPointerDownWith: PointerType;
+    selectedElementIds: Readonly<{
+        [id: string]: true;
+    }>;
+    hoveredElementIds: Readonly<{
+        [id: string]: true;
+    }>;
+    previousSelectedElementIds: {
+        [id: string]: true;
+    };
+    selectedElementsAreBeingDragged: boolean;
+    shouldCacheIgnoreZoom: boolean;
+    toast: {
+        message: string;
+        closable?: boolean;
+        duration?: number;
+    } | null;
+    zenModeEnabled: boolean;
+    theme: Theme;
+    /** grid cell px size */
+    gridSize: number;
+    gridStep: number;
+    gridModeEnabled: boolean;
+    viewModeEnabled: boolean;
+    /** top-most selected groups (i.e. does not include nested groups) */
+    selectedGroupIds: {
+        [groupId: string]: boolean;
+    };
+    /** group being edited when you drill down to its constituent element
+      (e.g. when you double-click on a group's element) */
+    editingGroupId: GroupId | null;
+    width: number;
+    height: number;
+    offsetTop: number;
+    offsetLeft: number;
+    fileHandle: FileSystemHandle | null;
+    collaborators: Map<SocketId, Collaborator>;
+    stats: {
+        open: boolean;
+        /** bitmap. Use `STATS_PANELS` bit values */
+        panels: number;
+    };
+    currentChartType: ChartType;
+    pasteDialog: {
+        shown: false;
+        data: null;
+    } | {
+        shown: true;
+        data: Spreadsheet;
+    };
+    selectedLinearElement: LinearElementEditor | null;
+    snapLines: readonly SnapLine[];
+    originSnapOffset: {
+        x: number;
+        y: number;
+    } | null;
+    objectsSnapModeEnabled: boolean;
+    /** the socket ids of the users following the current user */
+    followedBy: Set<SocketId>;
+    /** image cropping */
+    isCropping: boolean;
+    croppingElementId: DrawElement['id'] | null;
+    /** null if no search matches found / search closed */
+    searchMatches: Readonly<{
+        focusedId: DrawElement['id'] | null;
+        matches: readonly SearchMatch[];
+    }> | null;
+    /** the locked element/group that's active and shows unlock popup */
+    activeLockedId: string | null;
+    lockedMultiSelections: {
+        [groupId: string]: true;
+    };
+    bindMode: BindMode;
+}
+export type SearchMatch = {
+    id: string;
+    focus: boolean;
+    matchedLines: {
+        offsetX: number;
+        offsetY: number;
+        width: number;
+        height: number;
+        showOnCanvas: boolean;
+    }[];
+};
+export type UIAppState = Omit<AppState, 'startBoundElement' | 'cursorButton' | 'scrollX' | 'scrollY'>;
+export type NormalizedZoomValue = number & {
+    _brand: 'normalizedZoom';
+};
+export type Zoom = Readonly<{
+    value: NormalizedZoomValue;
+}>;
+export type PointerCoords = Readonly<{
+    x: number;
+    y: number;
+}>;
+export type Gesture = {
+    pointers: Map<number, PointerCoords>;
+    lastCenter: {
+        x: number;
+        y: number;
+    } | null;
+    initialDistance: number | null;
+    initialScale: number | null;
+};
+export declare class GestureEvent extends UIEvent {
+    readonly rotation: number;
+    readonly scale: number;
+}
+/** @deprecated legacy: do not use outside of migration paths */
+export type LibraryItem_v1 = readonly NonDeleted<DrawElement>[];
+/** @deprecated legacy: do not use outside of migration paths */
+type LibraryItems_v1 = readonly LibraryItem_v1[];
+/** v2 library item */
+export type LibraryItem = {
+    id: string;
+    status: 'published' | 'unpublished';
+    elements: readonly NonDeleted<DrawElement>[];
+    /** timestamp in epoch (ms) */
+    created: number;
+    name?: string;
+    error?: string;
+};
+export type LibraryItems = readonly LibraryItem[];
+export type LibraryItems_anyVersion = LibraryItems | LibraryItems_v1;
+export type LibraryItemsSource = ((currentLibraryItems: LibraryItems) => MaybePromise<LibraryItems_anyVersion | Blob>) | MaybePromise<LibraryItems_anyVersion | Blob>;
+export type DrawInitialDataState = Merge<ImportedDataState, {
+    libraryItems?: MaybePromise<Required<ImportedDataState>['libraryItems']>;
+}>;
 /**
  * @title Draw
  */
 export interface DrawProps {
     style?: CSSProperties;
     className?: string;
+    onChange?: (elements: readonly OrderedDrawElement[], appState: AppState, files: BinaryFiles) => void;
+    onIncrement?: (event: DurableIncrement | EphemeralIncrement) => void;
+    initialData?: (() => MaybePromise<DrawInitialDataState | null>) | MaybePromise<DrawInitialDataState | null>;
+    drawAPI?: (api: DrawImperativeAPI) => void;
+    isCollaborating?: boolean;
+    onPointerUpdate?: (payload: {
+        pointer: {
+            x: number;
+            y: number;
+            tool: 'pointer' | 'laser';
+        };
+        button: 'down' | 'up';
+        pointersMap: Gesture['pointers'];
+    }) => void;
+    onPaste?: (data: ClipboardData, event: ClipboardEvent | null) => Promise<boolean> | boolean;
+    /**
+     * Called when element(s) are duplicated so you can listen or modify as
+     * needed.
+     *
+     * Called when duplicating via mouse-drag, keyboard, paste, library insert
+     * etc.
+     *
+     * Returned elements will be used in place of the next elements
+     * (you should return all elements, including deleted, and not mutate
+     * the element if changes are made)
+     */
+    onDuplicate?: (nextElements: readonly DrawElement[], 
+    /** excludes the duplicated elements */
+    prevElements: readonly DrawElement[]) => DrawElement[] | void;
+    renderTopLeftUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
+    renderTopRightUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
+    langCode?: Language['code'];
+    viewModeEnabled?: boolean;
+    zenModeEnabled?: boolean;
+    gridModeEnabled?: boolean;
+    objectsSnapModeEnabled?: boolean;
+    libraryReturnUrl?: string;
+    theme?: Theme;
+    name?: string;
+    renderCustomStats?: (elements: readonly NonDeletedDrawElement[], appState: UIAppState) => JSX.Element;
+    UIOptions?: Partial<UIOptions>;
+    detectScroll?: boolean;
+    handleKeyboardGlobally?: boolean;
+    onLibraryChange?: (libraryItems: LibraryItems) => void | Promise<any>;
+    autoFocus?: boolean;
+    generateIdForFile?: (file: File) => string | Promise<string>;
+    generateLinkForSelection?: (id: string, type: 'element' | 'group') => string;
+    onLinkOpen?: (element: NonDeletedDrawElement, event: CustomEvent<{
+        nativeEvent: MouseEvent | React.PointerEvent<HTMLCanvasElement>;
+    }>) => void;
+    onPointerDown?: (activeTool: AppState['activeTool'], pointerDownState: PointerDownState) => void;
+    onPointerUp?: (activeTool: AppState['activeTool'], pointerDownState: PointerDownState) => void;
+    onScrollChange?: (scrollX: number, scrollY: number, zoom: Zoom) => void;
+    children?: React.ReactNode;
+    validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined);
+    renderEmbeddable?: (element: NonDeleted<DrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
+    aiEnabled?: boolean;
+    showDeprecatedFonts?: boolean;
+    renderScrollbars?: boolean;
+}
+export type SceneData = {
+    elements?: ImportedDataState['elements'];
+    appState?: ImportedDataState['appState'];
+    collaborators?: Map<SocketId, Collaborator>;
+    captureUpdate?: CaptureUpdateActionType;
+};
+export type ExportOpts = {
+    saveFileToDisk?: boolean;
+    onExportToBackend?: (exportedElements: readonly NonDeletedDrawElement[], appState: UIAppState, files: BinaryFiles) => void;
+    renderCustomUI?: (exportedElements: readonly NonDeletedDrawElement[], appState: UIAppState, files: BinaryFiles, canvas: HTMLCanvasElement) => JSX.Element;
+};
+export type CanvasActions = Partial<{
+    changeViewBackgroundColor: boolean;
+    clearCanvas: boolean;
+    export: false | ExportOpts;
+    loadScene: boolean;
+    saveToActiveFile: boolean;
+    toggleTheme: boolean | null;
+    saveAsImage: boolean;
+}>;
+export type UIOptions = Partial<{
+    dockedSidebarBreakpoint: number;
+    canvasActions: CanvasActions;
+    tools: {
+        image: boolean;
+    };
+    /**
+     * Optionally control the editor form factor and desktop UI mode from the host app.
+     * If not provided, we will take care of it internally.
+     */
+    getFormFactor?: (editorWidth: number, editorHeight: number) => EditorInterface['formFactor'];
+    /** @deprecated does nothing. Will be removed in 0.15 */
+    welcomeScreen?: boolean;
+}>;
+export type AppProps = Merge<DrawProps, {
+    UIOptions: Merge<UIOptions, {
+        canvasActions: Required<CanvasActions> & {
+            export: ExportOpts;
+        };
+    }>;
+    detectScroll: boolean;
+    handleKeyboardGlobally: boolean;
+    isCollaborating: boolean;
+    children?: React.ReactNode;
+    aiEnabled: boolean;
+    className?: string;
+    style?: CSSProperties;
+}>;
+/** A subset of App class properties that we need to use elsewhere
+ * in the app, eg Manager. Factored out into a separate type to keep DRY. */
+export type AppClassProperties = {
+    props: AppProps;
+    state: AppState;
+    interactiveCanvas: HTMLCanvasElement | null;
+    /** static canvas */
+    canvas: HTMLCanvasElement;
+    focusContainer(): void;
+    library: Library;
+    imageCache: Map<FileId, {
+        image: HTMLImageElement | Promise<HTMLImageElement>;
+        mimeType: ValueOf<typeof IMAGE_MIME_TYPES>;
+    }>;
+    files: BinaryFiles;
+    editorInterface: App['editorInterface'];
+    scene: App['scene'];
+    syncActionResult: App['syncActionResult'];
+    fonts: App['fonts'];
+    pasteFromClipboard: App['pasteFromClipboard'];
+    id: App['id'];
+    onInsertElements: App['onInsertElements'];
+    onExportImage: App['onExportImage'];
+    lastViewportPosition: App['lastViewportPosition'];
+    scrollToContent: App['scrollToContent'];
+    addFiles: App['addFiles'];
+    addElementsFromPasteOrLibrary: App['addElementsFromPasteOrLibrary'];
+    togglePenMode: App['togglePenMode'];
+    toggleLock: App['toggleLock'];
+    setActiveTool: App['setActiveTool'];
+    setOpenDialog: App['setOpenDialog'];
+    insertEmbeddableElement: App['insertEmbeddableElement'];
+    onMagicframeToolSelect: App['onMagicframeToolSelect'];
+    getName: App['getName'];
+    dismissLinearEditor: App['dismissLinearEditor'];
+    flowChartCreator: App['flowChartCreator'];
+    getEffectiveGridSize: App['getEffectiveGridSize'];
+    setPlugins: App['setPlugins'];
+    plugins: App['plugins'];
+    getEditorUIOffsets: App['getEditorUIOffsets'];
+    visibleElements: App['visibleElements'];
+    drawContainerValue: App['drawContainerValue'];
+    onPointerUpEmitter: App['onPointerUpEmitter'];
+    updateEditorAtom: App['updateEditorAtom'];
+    onPointerDownEmitter: App['onPointerDownEmitter'];
+    bindModeHandler: App['bindModeHandler'];
+    rootElement: App['rootElement'];
+    getRootElement: App['getRootElement'];
+};
+export type PointerDownState = Readonly<{
+    origin: Readonly<{
+        x: number;
+        y: number;
+    }>;
+    originInGrid: Readonly<{
+        x: number;
+        y: number;
+    }>;
+    scrollbars: ReturnType<typeof isOverScrollBars>;
+    lastCoords: {
+        x: number;
+        y: number;
+    };
+    originalElements: Map<string, NonDeleted<DrawElement>>;
+    resize: {
+        handleType: MaybeTransformHandleType;
+        isResizing: boolean;
+        offset: {
+            x: number;
+            y: number;
+        };
+        arrowDirection: 'origin' | 'end';
+        center: {
+            x: number;
+            y: number;
+        };
+    };
+    hit: {
+        element: NonDeleted<DrawElement> | null;
+        allHitElements: NonDeleted<DrawElement>[];
+        wasAddedToSelection: boolean;
+        hasBeenDuplicated: boolean;
+        hasHitCommonBoundingBoxOfSelectedElements: boolean;
+    };
+    withCmdOrCtrl: boolean;
+    drag: {
+        hasOccurred: boolean;
+        offset: {
+            x: number;
+            y: number;
+        } | null;
+        origin: {
+            x: number;
+            y: number;
+        };
+        blockDragging: boolean;
+    };
+    eventListeners: {
+        onMove: null | ReturnType<typeof throttleRAF>;
+        onUp: null | ((event: PointerEvent) => void);
+        onKeyDown: null | ((event: KeyboardEvent) => void);
+        onKeyUp: null | ((event: KeyboardEvent) => void);
+    };
+    boxSelection: {
+        hasOccurred: boolean;
+    };
+}>;
+export type UnsubscribeCallback = () => void;
+export interface DrawImperativeAPI {
+    updateScene: InstanceType<typeof App>['updateScene'];
+    applyDeltas: InstanceType<typeof App>['applyDeltas'];
+    mutateElement: InstanceType<typeof App>['mutateElement'];
+    updateLibrary: InstanceType<typeof Library>['updateLibrary'];
+    resetScene: InstanceType<typeof App>['resetScene'];
+    getSceneElementsIncludingDeleted: InstanceType<typeof App>['getSceneElementsIncludingDeleted'];
+    getSceneElementsMapIncludingDeleted: InstanceType<typeof App>['getSceneElementsMapIncludingDeleted'];
+    history: {
+        clear: InstanceType<typeof App>['resetHistory'];
+    };
+    getSceneElements: InstanceType<typeof App>['getSceneElements'];
+    getAppState: () => InstanceType<typeof App>['state'];
+    getFiles: () => InstanceType<typeof App>['files'];
+    getName: InstanceType<typeof App>['getName'];
+    scrollToContent: InstanceType<typeof App>['scrollToContent'];
+    registerAction: (action: Action) => void;
+    refresh: InstanceType<typeof App>['refresh'];
+    setToast: InstanceType<typeof App>['setToast'];
+    addFiles: (data: BinaryFileData[]) => void;
+    id: string;
+    setActiveTool: InstanceType<typeof App>['setActiveTool'];
+    setCursor: InstanceType<typeof App>['setCursor'];
+    resetCursor: InstanceType<typeof App>['resetCursor'];
+    toggleSidebar: InstanceType<typeof App>['toggleSidebar'];
+    getEditorInterface: () => EditorInterface;
+    /**
+     * 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).
+     */
+    updateFrameRendering: InstanceType<typeof App>['updateFrameRendering'];
+    onChange: (callback: (elements: readonly DrawElement[], appState: AppState, files: BinaryFiles) => void) => UnsubscribeCallback;
+    onIncrement: (callback: (event: DurableIncrement | EphemeralIncrement) => void) => UnsubscribeCallback;
+    onPointerDown: (callback: (activeTool: AppState['activeTool'], pointerDownState: PointerDownState, event: React.PointerEvent<HTMLElement>) => void) => UnsubscribeCallback;
+    onPointerUp: (callback: (activeTool: AppState['activeTool'], pointerDownState: PointerDownState, event: PointerEvent) => void) => UnsubscribeCallback;
+    onScrollChange: (callback: (scrollX: number, scrollY: number, zoom: Zoom) => void) => UnsubscribeCallback;
 }
+export type FrameNameBounds = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    angle: number;
+};
+export type FrameNameBoundsCache = {
+    get: (frameElement: DrawFrameLikeElement | DrawMagicFrameElement) => FrameNameBounds | null;
+    _cache: Map<string, FrameNameBounds & {
+        zoom: AppState['zoom']['value'];
+        versionNonce: DrawFrameLikeElement['versionNonce'];
+    }>;
+};
+export type KeyboardModifiersObject = {
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+};
+export type Primitive = number | string | boolean | bigint | symbol | null | undefined;
+export type JSONValue = string | number | boolean | null | object;
+export type EmbedsValidationStatus = Map<DrawIframeLikeElement['id'], boolean>;
+export type ElementsPendingErasure = Set<DrawElement['id']>;
+export type PendingDrawElements = DrawElement[];
+/** Runtime gridSize value. Null indicates disabled grid. */
+export type NullableGridSize = (AppState['gridSize'] & MakeBrand<'NullableGridSize'>) | null;
+export type GenerateDiagramToCode = (props: {
+    frame: DrawMagicFrameElement;
+    children: readonly DrawElement[];
+}) => MaybePromise<{
+    html: string;
+}>;
+export type Offsets = Partial<{
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}>;