@excalidraw/excalidraw 0.17.1-7441-cc6868c → 0.17.1-7441-0269e5a

package/types/excalidraw/actions/types.d.ts

@@ -19,7 +19,7 @@ export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" |
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;
-    updateData: (formData?: any) => void;
+    updateData: <T = any>(formData?: T) => void;
     appProps: ExcalidrawProps;
     data?: Record<string, any>;
     app: AppClassProperties;

package/types/excalidraw/components/App.d.ts

@@ -7,7 +7,7 @@ import { LinearElementEditor } from "../element/linearElementEditor";
 import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement } from "../element/types";
 import History from "../history";
 import Scene from "../scene/Scene";
-import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType } from "../types";
+import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
 import { Renderer } from "../scene/Renderer";
 import { LaserPathManager } from "./LaserTool/LaserPathManager";
@@ -207,6 +207,10 @@ declare class App extends React.Component<AppProps, AppState> {
             };
         };
     }>, event: PointerEvent]>;
+    onUserFollowEmitter: Emitter<[payload: OnUserFollowedPayload]>;
+    onScrollChangeEmitter: Emitter<[scrollX: number, scrollY: number, zoom: Readonly<{
+        value: import("../types").NormalizedZoomValue;
+    }>]>;
     constructor(props: AppProps);
     private onWindowMessage;
     private cacheEmbeddableRef;
@@ -294,7 +298,7 @@ declare class App extends React.Component<AppProps, AppState> {
      * Zooms on canvas viewport center
      */
     zoomCanvas: (value: number) => void;
-    private cancelInProgresAnimation;
+    private cancelInProgressAnimation;
     scrollToContent: (target?: ExcalidrawElement | readonly ExcalidrawElement[], opts?: {
         fitToContent?: boolean;
         fitToViewport?: never;
@@ -311,6 +315,7 @@ declare class App extends React.Component<AppProps, AppState> {
         animate?: boolean;
         duration?: number;
     }) => void;
+    private maybeUnfollowRemoteUser;
     /** use when changing scrollX/scrollY/zoom based on user interaction */
     private translateCanvas;
     setToast: (toast: {

package/types/excalidraw/components/Avatar.d.ts

@@ -5,6 +5,8 @@ type AvatarProps = {
     color: string;
     name: string;
     src?: string;
+    isBeingFollowed?: boolean;
+    isCurrentUser: boolean;
 };
-export declare const Avatar: ({ color, onClick, name, src }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ color, onClick, name, src, isBeingFollowed, isCurrentUser, }: AvatarProps) => JSX.Element;
 export {};

package/types/excalidraw/components/FollowMode/FollowMode.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { UserToFollow } from "../../types";
+import "./FollowMode.scss";
+interface FollowModeProps {
+    width: number;
+    height: number;
+    userToFollow: UserToFollow;
+    onDisconnect: () => void;
+}
+declare const FollowMode: ({ height, width, userToFollow, onDisconnect, }: FollowModeProps) => JSX.Element;
+export default FollowMode;

package/types/excalidraw/components/Tooltip.d.ts

@@ -12,6 +12,7 @@ type TooltipProps = {
     label: string;
     long?: boolean;
     style?: React.CSSProperties;
+    disabled?: boolean;
 };
-export declare const Tooltip: ({ children, label, long, style, }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, label, long, style, disabled, }: TooltipProps) => JSX.Element | null;
 export {};

package/types/excalidraw/components/UserList.d.ts

@@ -1,8 +1,22 @@
 import "./UserList.scss";
 import React from "react";
-import { AppState } from "../types";
-export declare const UserList: React.FC<{
+import { Collaborator, SocketId } from "../types";
+export type GoToCollaboratorComponentProps = {
+    clientId: ClientId;
+    collaborator: Collaborator;
+    withName: boolean;
+    isBeingFollowed: boolean;
+};
+/** collaborator user id or socket id (fallback) */
+type ClientId = string & {
+    _brand: "UserId";
+};
+type UserListUserObject = Pick<Collaborator, "avatarUrl" | "id" | "socketId" | "username">;
+type UserListProps = {
     className?: string;
     mobile?: boolean;
-    collaborators: AppState["collaborators"];
-}>;
+    collaborators: Map<SocketId, UserListUserObject>;
+    userToFollow: SocketId | null;
+};
+export declare const UserList: React.MemoExoticComponent<({ className, mobile, collaborators, userToFollow }: UserListProps) => JSX.Element | null>;
+export {};

package/types/excalidraw/components/icons.d.ts

@@ -171,4 +171,5 @@ export declare const fullscreenIcon: JSX.Element;
 export declare const eyeIcon: JSX.Element;
 export declare const eyeClosedIcon: JSX.Element;
 export declare const brainIcon: JSX.Element;
+export declare const searchIcon: JSX.Element;
 export {};

package/types/excalidraw/element/Hyperlink.d.ts

@@ -128,7 +128,23 @@ export declare const actionLink: {
             offsetTop: number;
             offsetLeft: number;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
-            collaborators: Map<string, import("../types").Collaborator>;
+            collaborators: Map<import("../types").SocketId, Readonly<{
+                pointer?: import("../types").CollaboratorPointer | undefined;
+                button?: "up" | "down" | undefined;
+                selectedElementIds?: Readonly<{
+                    [id: string]: true;
+                }> | undefined;
+                username?: string | null | undefined;
+                userState?: import("../types").UserIdleState | undefined;
+                color?: {
+                    background: string;
+                    stroke: string;
+                } | undefined;
+                avatarUrl?: string | undefined;
+                id?: string | undefined;
+                socketId?: import("../types").SocketId | undefined;
+                isCurrentUser?: boolean | undefined;
+            }>>;
             showStats: boolean;
             currentChartType: import("./types").ChartType;
             pasteDialog: {
@@ -146,6 +162,8 @@ export declare const actionLink: {
                 y: number;
             } | null;
             objectsSnapModeEnabled: boolean;
+            userToFollow: import("../types").UserToFollow | null;
+            followedBy: Set<import("../types").SocketId>;
         };
         commitToHistory: true;
     };

package/types/excalidraw/element/bounds.d.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead, ExcalidrawFreeDrawElement, NonDeleted } from "./types";
 import { Drawable, Op } from "roughjs/bin/core";
-import { Point } from "../types";
+import { AppState, Point } from "../types";
 export type RectangleBox = {
     x: number;
     y: number;
@@ -8,12 +8,21 @@ export type RectangleBox = {
     height: number;
     angle: number;
 };
+/**
+ * x and y position of top left corner, x and y position of bottom right corner
+ */
 export type Bounds = readonly [
     minX: number,
     minY: number,
     maxX: number,
     maxY: number
 ];
+export type SceneBounds = readonly [
+    sceneX: number,
+    sceneY: number,
+    sceneX2: number,
+    sceneY2: number
+];
 export declare class ElementBounds {
     private static boundsCache;
     static getBounds(element: ExcalidrawElement): Bounds;
@@ -60,3 +69,7 @@ export interface BoundingBox {
     height: number;
 }
 export declare const getCommonBoundingBox: (elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => BoundingBox;
+/**
+ * returns scene coords of user's editor viewport (visible canvas area) bounds
+ */
+export declare const getVisibleSceneBounds: ({ scrollX, scrollY, width, height, zoom, }: AppState) => SceneBounds;

package/types/excalidraw/element/embeddable.d.ts

@@ -121,7 +121,23 @@ export declare const actionSetEmbeddableAsActiveTool: {
             offsetTop: number;
             offsetLeft: number;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
-            collaborators: Map<string, import("../types").Collaborator>;
+            collaborators: Map<import("../types").SocketId, Readonly<{
+                pointer?: import("../types").CollaboratorPointer | undefined;
+                button?: "up" | "down" | undefined;
+                selectedElementIds?: Readonly<{
+                    [id: string]: true;
+                }> | undefined;
+                username?: string | null | undefined;
+                userState?: import("../types").UserIdleState | undefined;
+                color?: {
+                    background: string;
+                    stroke: string;
+                } | undefined;
+                avatarUrl?: string | undefined;
+                id?: string | undefined;
+                socketId?: import("../types").SocketId | undefined;
+                isCurrentUser?: boolean | undefined;
+            }>>;
             showStats: boolean;
             currentChartType: import("./types").ChartType;
             pasteDialog: {
@@ -140,6 +156,8 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 y: number;
             } | null;
             objectsSnapModeEnabled: boolean;
+            userToFollow: import("../types").UserToFollow | null;
+            followedBy: Set<import("../types").SocketId>;
         };
         commitToHistory: false;
     };

package/types/excalidraw/element/linearElementEditor.d.ts

@@ -127,7 +127,7 @@ export declare class LinearElementEditor {
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
-                left: number; /** @returns whether point was dragged */
+                left: number;
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
@@ -231,7 +231,23 @@ export declare class LinearElementEditor {
             offsetTop: number;
             offsetLeft: number;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
-            collaborators: Map<string, import("../types").Collaborator>;
+            collaborators: Map<import("../types").SocketId, Readonly<{
+                pointer?: import("../types").CollaboratorPointer | undefined;
+                button?: "up" | "down" | undefined;
+                selectedElementIds?: Readonly<{
+                    [id: string]: true;
+                }> | undefined;
+                username?: string | null | undefined;
+                userState?: import("../types").UserIdleState | undefined;
+                color?: {
+                    background: string;
+                    stroke: string;
+                } | undefined;
+                avatarUrl?: string | undefined;
+                id?: string | undefined;
+                socketId?: import("../types").SocketId | undefined;
+                isCurrentUser?: boolean | undefined;
+            }>>;
             showStats: boolean;
             currentChartType: import("./types").ChartType;
             pasteDialog: {
@@ -250,6 +266,8 @@ export declare class LinearElementEditor {
                 y: number;
             } | null;
             objectsSnapModeEnabled: boolean;
+            userToFollow: import("../types").UserToFollow | null;
+            followedBy: Set<import("../types").SocketId>;
         };
     };
     static deletePoints(element: NonDeleted<ExcalidrawLinearElement>, pointIndices: readonly number[]): void;

package/types/excalidraw/index.d.ts

@@ -28,6 +28,7 @@ export { DefaultSidebar } from "./components/DefaultSidebar";
 export { TTDDialog } from "./components/TTDDialog/TTDDialog";
 export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";
 export { normalizeLink } from "./data/url";
+export { zoomToFitBounds } from "./actions/actionCanvas";
 export { convertToExcalidrawElements } from "./data/transform";
-export { getCommonBounds } from "./element/bounds";
+export { getCommonBounds, getVisibleSceneBounds } from "./element/bounds";
 export { elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, } from "../utils/export";

package/types/excalidraw/types.d.ts

@@ -19,7 +19,10 @@ import { ContextMenuItems } from "./components/ContextMenu";
 import { SnapLine } from "./snapping";
 import { Merge, ValueOf } from "./utility-types";
 export type Point = Readonly<RoughPoint>;
-export type Collaborator = {
+export type SocketId = string & {
+    _brand: "SocketId";
+};
+export type Collaborator = Readonly<{
     pointer?: CollaboratorPointer;
     button?: "up" | "down";
     selectedElementIds?: AppState["selectedElementIds"];
@@ -31,7 +34,9 @@ export type Collaborator = {
     };
     avatarUrl?: string;
     id?: string;
-};
+    socketId?: SocketId;
+    isCurrentUser?: boolean;
+}>;
 export type CollaboratorPointer = {
     x: number;
     y: number;
@@ -70,6 +75,10 @@ export type ActiveTool = {
 };
 export type SidebarName = string;
 export type SidebarTabName = string;
+export type UserToFollow = {
+    socketId: SocketId;
+    username: string;
+};
 type _CommonCanvasAppState = {
     zoom: AppState["zoom"];
     scrollX: AppState["scrollX"];
@@ -230,7 +239,7 @@ export interface AppState {
     offsetTop: number;
     offsetLeft: number;
     fileHandle: FileSystemHandle | null;
-    collaborators: Map<string, Collaborator>;
+    collaborators: Map<SocketId, Collaborator>;
     showStats: boolean;
     currentChartType: ChartType;
     pasteDialog: {
@@ -250,6 +259,10 @@ export interface AppState {
         y: number;
     } | null;
     objectsSnapModeEnabled: boolean;
+    /** the user's clientId & username who is being followed on the canvas */
+    userToFollow: UserToFollow | null;
+    /** the clientIds of the users following the current user */
+    followedBy: Set<SocketId>;
 }
 export type UIAppState = Omit<AppState, "suggestedBindings" | "startBoundElement" | "cursorButton" | "scrollX" | "scrollY">;
 export type NormalizedZoomValue = number & {
@@ -295,6 +308,10 @@ export type LibraryItemsSource = ((currentLibraryItems: LibraryItems) => Blob |
 export type ExcalidrawInitialDataState = Merge<ImportedDataState, {
     libraryItems?: Required<ImportedDataState>["libraryItems"] | Promise<Required<ImportedDataState>["libraryItems"]>;
 }>;
+export type OnUserFollowedPayload = {
+    userToFollow: UserToFollow;
+    action: "FOLLOW" | "UNFOLLOW";
+};
 export interface ExcalidrawProps {
     onChange?: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
     initialData?: ExcalidrawInitialDataState | null | Promise<ExcalidrawInitialDataState | null>;
@@ -330,7 +347,8 @@ export interface ExcalidrawProps {
         nativeEvent: MouseEvent | React.PointerEvent<HTMLCanvasElement>;
     }>) => void;
     onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
-    onScrollChange?: (scrollX: number, scrollY: number) => void;
+    onScrollChange?: (scrollX: number, scrollY: number, zoom: Zoom) => void;
+    onUserFollow?: (payload: OnUserFollowedPayload) => void;
     children?: React.ReactNode;
     validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined);
     renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
@@ -339,7 +357,7 @@ export interface ExcalidrawProps {
 export type SceneData = {
     elements?: ImportedDataState["elements"];
     appState?: ImportedDataState["appState"];
-    collaborators?: Map<string, Collaborator>;
+    collaborators?: Map<SocketId, Collaborator>;
     commitToHistory?: boolean;
 };
 export declare enum UserIdleState {
@@ -502,6 +520,8 @@ export type ExcalidrawImperativeAPI = {
     onChange: (callback: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => 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;
+    onUserFollow: (callback: (payload: OnUserFollowedPayload) => void) => UnsubscribeCallback;
 };
 export type Device = Readonly<{
     viewport: {

package/types/excalidraw/utils.d.ts

@@ -182,7 +182,15 @@ 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;
+/**
+ * Returns whether object/array is shallow equal.
+ * Considers empty object/arrays as equal (whether top-level or second-level).
+ */
+export declare const isShallowEqual: <T extends Record<string, any>, K extends readonly unknown[]>(objA: T, objB: T, comparators?: { [key in keyof T]?: ((a: T[key], b: T[key]) => boolean) | undefined; } | (keyof T extends K[number] ? K extends readonly (keyof T)[] ? K : {
+    _error: "keys are either missing or include keys not in compared obj";
+} : {
+    _error: "keys are either missing or include keys not in compared obj";
+}) | 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;
@@ -202,3 +210,4 @@ export declare const isRenderThrottlingEnabled: () => boolean;
 export declare const isMemberOf: <T extends string>(collection: Set<T> | Record<T, any> | Map<T, any> | readonly T[], value: string) => value is T;
 export declare const cloneJSON: <T>(obj: T) => T;
 export declare const isFiniteNumber: (value: any) => value is number;
+export declare const updateStable: <T extends any[] | Record<string, any>>(prevValue: T, nextValue: T) => T;