@myoc/element 0.19.532 → 0.19.534

package/dist/types/common/src/constants.d.ts

@@ -231,6 +231,7 @@ export declare const EXPORT_SCALES: number[];
 export declare const DEFAULT_EXPORT_PADDING = 10;
 export declare const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 export declare const MAX_ALLOWED_FILE_BYTES: number;
+export declare const DEFAULT_GIF_AUTO_DECODE_MAX_FILE_SIZE_BYTES: number;
 export declare const DEFAULT_IMAGE_OPTIONS: AppProps["imageOptions"];
 export declare const SVG_NS = "http://www.w3.org/2000/svg";
 export declare const SVG_DOCUMENT_PREAMBLE = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";

package/dist/types/element/src/gif.d.ts

@@ -0,0 +1,29 @@
+import type { DataURL } from "@excalidraw/excalidraw/types";
+import type { ExcalidrawGifCache, ExcalidrawGifPlayback, ExcalidrawImageElement, FileId, NonDeletedExcalidrawElement } from "./types";
+export type GifDecodeStatus = "pending" | "success" | "error" | "deferred";
+export declare const configureGifWorkerUrl: (workerUrl: string | undefined) => void;
+type GifImageCache = Map<FileId, {
+    gifDecodeStatus?: GifDecodeStatus;
+    gif?: ExcalidrawGifCache;
+}>;
+type ImageCacheEntry = NonNullable<ReturnType<GifImageCache["get"]>>;
+export declare const decodeGifFrames: (dataURL: DataURL) => Promise<{
+    frames: HTMLCanvasElement[];
+    delays: number[];
+    width: number;
+    height: number;
+}>;
+export declare const getDataURLByteLength: (dataURL: DataURL) => number;
+export declare const decodeGifFramesQueued: (dataURL: DataURL) => Promise<{
+    frames: HTMLCanvasElement[];
+    delays: number[];
+    width: number;
+    height: number;
+}>;
+export declare const createGifPlaybackMetadata: (opts?: {
+    playing?: boolean;
+}) => ExcalidrawGifPlayback;
+export declare const getGifRenderFrame: (element: ExcalidrawImageElement, cacheEntry: ImageCacheEntry | null | undefined, runtimeFrameIndex?: number) => HTMLCanvasElement | undefined;
+export declare const hasActiveGifDecode: (visibleElements: readonly NonDeletedExcalidrawElement[], imageCache: GifImageCache) => boolean;
+export declare const hasPlayableGif: (visibleElements: readonly NonDeletedExcalidrawElement[], imageCache: GifImageCache) => boolean;
+export {};

package/dist/types/element/src/image.d.ts

@@ -5,10 +5,13 @@ export declare const getThumbHashPlaceholder: (thumbHash: string) => HTMLCanvasE
 export declare const loadHTMLImageElement: (dataURL: DataURL) => Promise<HTMLImageElement>;
 /** NOTE: updates cache even if already populated with given image. Thus,
  * you should filter out the images upstream if you want to optimize this. */
-export declare const updateImageCache: ({ fileIds, files, imageCache, }: {
+export declare const updateImageCache: ({ fileIds, files, imageCache, onImageCacheUpdate, gifAutoDecodeMaxFileSizeBytes, forceGifDecode, }: {
     fileIds: FileId[];
     files: BinaryFiles;
     imageCache: AppClassProperties["imageCache"];
+    onImageCacheUpdate?: (fileId: FileId) => void;
+    gifAutoDecodeMaxFileSizeBytes?: number;
+    forceGifDecode?: boolean;
 }) => Promise<{
     imageCache: Map<FileId, {
         image: HTMLImageElement | Promise<HTMLImageElement>;
@@ -16,6 +19,8 @@ export declare const updateImageCache: ({ fileIds, files, imageCache, }: {
         isPlaceholder?: boolean;
         placeholderImage?: HTMLImageElement;
         transitionStart?: number;
+        gifDecodeStatus?: "pending" | "success" | "error" | "deferred";
+        gif?: import("./types").ExcalidrawGifCache;
     }>;
     /** includes errored files because they cache was updated nonetheless */
     updatedFiles: Map<FileId, true>;

package/dist/types/element/src/index.d.ts

@@ -33,6 +33,7 @@ export * from "./flowchart";
 export * from "./arrows/focus";
 export * from "./fractionalIndex";
 export * from "./frame";
+export * from "./gif";
 export * from "./groups";
 export * from "./heading";
 export * from "./image";
@@ -42,6 +43,7 @@ export * from "./newElement";
 export * from "./normalise";
 export * from "./positionElementsOnGrid";
 export * from "./renderElement";
+export * from "./renderGif";
 export * from "./resizeElements";
 export * from "./resizeTest";
 export * from "./Scene";

package/dist/types/element/src/newElement.d.ts

@@ -75,4 +75,5 @@ export declare const newImageElement: (opts: {
     thumbHash?: ExcalidrawImageElement["thumbHash"];
     scale?: ExcalidrawImageElement["scale"];
     crop?: ExcalidrawImageElement["crop"];
+    gifPlayback?: ExcalidrawImageElement["gifPlayback"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawImageElement>;

package/dist/types/element/src/renderGif.d.ts

@@ -0,0 +1,5 @@
+import type { StaticCanvasRenderConfig } from "@excalidraw/excalidraw/scene/types";
+import type { ExcalidrawImageElement } from "./types";
+type DrawImagePlaceholder = (element: ExcalidrawImageElement, context: CanvasRenderingContext2D, theme: StaticCanvasRenderConfig["theme"]) => void;
+export declare const drawGifDecodePlaceholder: (element: ExcalidrawImageElement, context: CanvasRenderingContext2D, theme: StaticCanvasRenderConfig["theme"], drawImagePlaceholder: DrawImagePlaceholder) => void;
+export {};

package/dist/types/element/src/types.d.ts

@@ -126,6 +126,17 @@ export type ImageCrop = {
     naturalWidth: number;
     naturalHeight: number;
 };
+export type ExcalidrawGifPlayback = {
+    frameIndex: number;
+    speed: number;
+    playing: boolean;
+};
+export type ExcalidrawGifCache = {
+    frames: HTMLCanvasElement[];
+    delays: number[];
+    width: number;
+    height: number;
+};
 export type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{
     type: "image";
     fileId: FileId | null;
@@ -138,6 +149,7 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{
     scale: [number, number];
     /** whether an element is cropped */
     crop: ImageCrop | null;
+    gifPlayback: ExcalidrawGifPlayback | null;
 }>;
 export type InitializedExcalidrawImageElement = MarkNonNullable<ExcalidrawImageElement, "fileId">;
 export type ExcalidrawFrameElement = _ExcalidrawElementBase & {

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

@@ -121,7 +121,7 @@ export declare const actionBindText: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -309,7 +309,7 @@ export declare const actionWrapTextInContainer: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -106,7 +106,7 @@ export declare const actionZoomIn: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -298,7 +298,7 @@ export declare const actionZoomOut: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -490,7 +490,7 @@ export declare const actionResetZoom: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -682,7 +682,7 @@ export declare const actionZoomToFitSelectionInViewport: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -873,7 +873,7 @@ export declare const actionZoomToFitSelection: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -1064,7 +1064,7 @@ export declare const actionZoomToFit: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -102,7 +102,7 @@ export declare const actionPaste: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -328,7 +328,7 @@ export declare const actionCopyAsPng: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -103,7 +103,7 @@ export declare const actionToggleCropEditor: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -104,7 +104,7 @@ export declare const actionDeleteSelected: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -314,7 +314,7 @@ export declare const actionDeleteSelected: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -491,7 +491,7 @@ export declare const actionDeleteSelected: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -93,7 +93,7 @@ export declare const actionDeselect: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -114,7 +114,7 @@ export declare const actionToggleElementLock: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -301,7 +301,7 @@ export declare const actionUnlockAllElements: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -217,7 +217,7 @@ export declare const actionLoadScene: {
             scrolledOutside: boolean;
             isResizing: boolean;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -348,7 +348,7 @@ export declare const actionLoadScene: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -102,7 +102,7 @@ export declare const actionSelectAllElementsInFrame: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -294,7 +294,7 @@ export declare const actionRemoveAllElementsFromFrame: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -484,7 +484,7 @@ export declare const actionupdateFrameRendering: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -863,6 +863,7 @@ export declare const actionWrapSelectionInFrame: {
             status: "pending" | "saved" | "error";
             scale: [number, number];
             crop: import("@excalidraw/element/types").ImageCrop | null;
+            gifPlayback: import("@excalidraw/element/types").ExcalidrawGifPlayback | null;
         }> & {
             index: import("@excalidraw/element/types").FractionalIndex;
         }) | (Readonly<{

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

@@ -108,7 +108,7 @@ export declare const actionGroup: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -299,7 +299,7 @@ export declare const actionUngroup: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -135,7 +135,7 @@ export declare const actionToggleLinearEditor: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -515,6 +515,7 @@ export declare const actionTogglePolygon: {
             status: "pending" | "saved" | "error";
             scale: [number, number];
             crop: import("@excalidraw/element/types").ImageCrop | null;
+            gifPlayback: import("@excalidraw/element/types").ExcalidrawGifPlayback | null;
         }> & {
             index: import("@excalidraw/element/types").FractionalIndex;
         }) | (Readonly<{

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

@@ -98,7 +98,7 @@ export declare const actionLink: {
             isResizing: boolean;
             isRotating: boolean;
             zoom: import("../types").Zoom;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -139,7 +139,7 @@ export declare const actionDecreaseFontSize: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;
@@ -326,7 +326,7 @@ export declare const actionIncreaseFontSize: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -106,7 +106,7 @@ export declare const actionSelectAll: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -104,7 +104,7 @@ export declare const actionCopyStyles: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -100,7 +100,7 @@ export declare const actionToggleArrowBinding: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -104,7 +104,7 @@ export declare const actionToggleGridMode: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -100,7 +100,7 @@ export declare const actionToggleMidpointSnapping: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -103,7 +103,7 @@ export declare const actionToggleObjectsSnapMode: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -108,7 +108,7 @@ export declare const actionToggleSearchMenu: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("@excalidraw/element/types").PointerType;
             selectedElementIds: Readonly<{

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

@@ -105,7 +105,7 @@ export declare const actionToggleStats: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -102,7 +102,7 @@ export declare const actionToggleViewMode: {
             isRotating: boolean;
             zoom: import("../types").Zoom;
             openMenu: "canvas" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | "gifFrameGallery" | "gifSpeedPicker" | null;
             openSidebar: {
                 name: import("../types").SidebarName;
                 tab?: import("../types").SidebarTabName;

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

@@ -2,7 +2,7 @@ import React from "react";
 import { AppEventBus, type EXPORT_IMAGE_TYPES, Emitter, type EditorInterface, type StylesPanelMode } from "@excalidraw/common";
 import { LinearElementEditor, Scene, Store, type ElementUpdate, StoreDelta, type ApplyToOptions } from "@excalidraw/element";
 import type { LocalPoint, Radians } from "@excalidraw/math";
-import type { ExcalidrawElement, ExcalidrawTextElement, NonDeleted, FileId, NonDeletedExcalidrawElement, ExcalidrawTextContainer, ExcalidrawFrameLikeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
+import type { ExcalidrawElement, ExcalidrawTextElement, NonDeleted, ExcalidrawImageElement, FileId, NonDeletedExcalidrawElement, ExcalidrawTextContainer, ExcalidrawFrameLikeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
 import type { Mutable } from "@excalidraw/common/utility-types";
 import { ActionManager } from "../actions/manager";
 import { History } from "../history";
@@ -124,6 +124,7 @@ declare class App extends React.Component<AppProps, AppState> {
     bucketFill: AppBucketFill;
     flowchart: AppFlowchart;
     cursor: AppCursor;
+    private gifPlayback;
     private zDragZoom;
     arrowText: AppArrowText;
     viewport: AppViewport;
@@ -400,6 +401,7 @@ declare class App extends React.Component<AppProps, AppState> {
     dismissLinearEditor: () => void;
     syncActionResult: (actionResult: ActionResult) => void;
     scheduleCapture: () => void;
+    scheduleUpdate: () => void;
     private onBlur;
     private onUnload;
     private disableEvent;
@@ -890,7 +892,12 @@ declare class App extends React.Component<AppProps, AppState> {
     private getImageNaturalDimensions;
     /** updates image cache, refreshing updated elements and/or setting status
         to error for images that fail during <img> element creation */
+    private handleImageCacheUpdate;
     private updateImageCache;
+    ensureGifPlaybackLoop: () => void;
+    loadDeferredGif: (fileId: FileId) => Promise<void>;
+    getGifPlaybackFrameIndex: (element: ExcalidrawImageElement) => number | undefined;
+    setGifPlaybackFrameIndex: (element: ExcalidrawImageElement, frameIndex: number) => void;
     /** adds new images to imageCache and re-renders if needed */
     private addNewImagesToImageCache;
     /** generally you should use `addNewImagesToImageCache()` directly if you need

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

@@ -0,0 +1,18 @@
+import type { ExcalidrawImageElement, FileId, InitializedExcalidrawImageElement, NonDeleted } from "@excalidraw/element/types";
+import type App from "./App";
+export declare class AppGifPlayback {
+    private app;
+    private playbackRaf;
+    private runtimeState;
+    constructor(app: App);
+    stop: () => void;
+    getFrameIndex: (element: ExcalidrawImageElement) => number | undefined;
+    setFrameIndex: (element: ExcalidrawImageElement, frameIndex: number) => void;
+    ensureLoop: () => void;
+    createPlaceholderDecodeState: (placeholderImageElement: ExcalidrawImageElement, imageFile: File) => FileId | null;
+    ensureElementPlaybackMetadata: (element: NonDeleted<InitializedExcalidrawImageElement>, opts?: {
+        playing?: boolean;
+    }) => NonDeleted<InitializedExcalidrawImageElement>;
+    removePlaceholderDecodeState: (placeholderGifFileId: FileId | null) => void;
+    private tick;
+}

package/dist/types/excalidraw/components/GifPlaybackControls.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./GifPlaybackControls.scss";
+import type { AppClassProperties, AppState, BinaryFiles } from "../types";
+type GifPlaybackControlsProps = {
+    app: AppClassProperties;
+    files: BinaryFiles;
+    setAppState: React.Component<any, AppState>["setState"];
+};
+export declare const GifPlaybackControls: ({ app, files, setAppState, }: GifPlaybackControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -9,6 +9,7 @@ type Opts = {
 export declare const createIcon: (d: string | React.ReactNode, opts?: number | Opts) => import("react/jsx-runtime").JSX.Element;
 export declare const PlusPromoIcon: import("react/jsx-runtime").JSX.Element;
 export declare const PlusIcon: import("react/jsx-runtime").JSX.Element;
+export declare const CirclePauseIcon: import("react/jsx-runtime").JSX.Element;
 export declare const DotsIcon: import("react/jsx-runtime").JSX.Element;
 export declare const DotsHorizontalIcon: import("react/jsx-runtime").JSX.Element;
 export declare const PinIcon: import("react/jsx-runtime").JSX.Element;
@@ -194,6 +195,9 @@ export declare const cutIcon: import("react/jsx-runtime").JSX.Element;
 export declare const helpIcon: import("react/jsx-runtime").JSX.Element;
 export declare const playerPlayIcon: import("react/jsx-runtime").JSX.Element;
 export declare const playerStopFilledIcon: import("react/jsx-runtime").JSX.Element;
+export declare const prevFrame: import("react/jsx-runtime").JSX.Element;
+export declare const nextFrame: import("react/jsx-runtime").JSX.Element;
+export declare const frames: import("react/jsx-runtime").JSX.Element;
 export declare const tablerCheckIcon: import("react/jsx-runtime").JSX.Element;
 export declare const alertTriangleIcon: import("react/jsx-runtime").JSX.Element;
 export declare const eyeDropperIconSvgPaths: readonly ["M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z", "M11 7l6 6"];