@myoc/excalidraw 0.19.511 → 0.19.512

package/dist/dev/index.js

@@ -57,10 +57,10 @@ import {
   saveAsJSON,
   serializeAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-WGF6T3RR.js";
+} from "./chunk-OBLRXIUK.js";
 import {
   define_import_meta_env_default
-} from "./chunk-G3MPOS33.js";
+} from "./chunk-QHLG4OQL.js";
 import {
   en_default
 } from "./chunk-ZGRXNVW4.js";
@@ -81,7 +81,11 @@ import React42, {
   useRef as useRef31,
   useState as useState33
 } from "react";
-import { DEFAULT_UI_OPTIONS, isShallowEqual as isShallowEqual9 } from "@excalidraw/common";
+import {
+  DEFAULT_IMAGE_OPTIONS,
+  DEFAULT_UI_OPTIONS,
+  isShallowEqual as isShallowEqual9
+} from "@excalidraw/common";
 
 // components/App.tsx
 import clsx57 from "clsx";
@@ -112,7 +116,6 @@ import {
   APP_NAME,
   CURSOR_TYPE as CURSOR_TYPE4,
   DEFAULT_TRANSFORM_HANDLE_SPACING as DEFAULT_TRANSFORM_HANDLE_SPACING3,
-  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
   DEFAULT_VERTICAL_ALIGN,
   DRAGGING_THRESHOLD as DRAGGING_THRESHOLD3,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
@@ -122,7 +125,6 @@ import {
   IMAGE_MIME_TYPES as IMAGE_MIME_TYPES2,
   IMAGE_RENDER_TIMEOUT,
   LINE_CONFIRM_THRESHOLD as LINE_CONFIRM_THRESHOLD2,
-  MAX_ALLOWED_FILE_BYTES,
   MIME_TYPES as MIME_TYPES7,
   MQ_RIGHT_SIDEBAR_MIN_WIDTH,
   POINTER_BUTTON as POINTER_BUTTON2,
@@ -9609,7 +9611,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-UBAFGYUH.js").then(
+        (blob2) => import("./data/image-R7FQP7SA.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -15012,64 +15014,6 @@ var ActionManager = class {
   }
 };
 
-// animation-frame-handler.ts
-var AnimationFrameHandler = class {
-  constructor() {
-    __publicField(this, "targets", /* @__PURE__ */ new WeakMap());
-    __publicField(this, "rafIds", /* @__PURE__ */ new WeakMap());
-  }
-  register(key, callback) {
-    this.targets.set(key, { callback, stopped: true });
-  }
-  start(key) {
-    const target = this.targets.get(key);
-    if (!target) {
-      return;
-    }
-    if (this.rafIds.has(key)) {
-      return;
-    }
-    this.targets.set(key, { ...target, stopped: false });
-    this.scheduleFrame(key);
-  }
-  stop(key) {
-    const target = this.targets.get(key);
-    if (target && !target.stopped) {
-      this.targets.set(key, { ...target, stopped: true });
-    }
-    this.cancelFrame(key);
-  }
-  constructFrame(key) {
-    return (timestamp) => {
-      const target = this.targets.get(key);
-      if (!target) {
-        return;
-      }
-      const shouldAbort = this.onFrame(target, timestamp);
-      if (!target.stopped && !shouldAbort) {
-        this.scheduleFrame(key);
-      } else {
-        this.cancelFrame(key);
-      }
-    };
-  }
-  scheduleFrame(key) {
-    const rafId = requestAnimationFrame(this.constructFrame(key));
-    this.rafIds.set(key, rafId);
-  }
-  cancelFrame(key) {
-    if (this.rafIds.has(key)) {
-      const rafId = this.rafIds.get(key);
-      cancelAnimationFrame(rafId);
-    }
-    this.rafIds.delete(key);
-  }
-  onFrame(target, timestamp) {
-    const shouldAbort = target.callback(timestamp);
-    return shouldAbort ?? false;
-  }
-};
-
 // gesture.ts
 var getCenter = (pointers) => {
   const allCoords = Array.from(pointers.values());
@@ -16256,19 +16200,149 @@ var ElementCanvasButtons = ({
   );
 };
 
-// laser-trails.ts
+// laserTrails.ts
 import { DEFAULT_LASER_COLOR, easeOut } from "@excalidraw/common";
 
-// animated-trail.ts
+// animatedTrail.ts
 import { LaserPointer } from "@excalidraw/laser-pointer";
 import {
   SVG_NS,
   getSvgPathFromStroke as getSvgPathFromStroke2,
   sceneCoordsToViewportCoords as sceneCoordsToViewportCoords3
 } from "@excalidraw/common";
-var AnimatedTrail = class {
-  constructor(animationFrameHandler, app, options) {
-    this.animationFrameHandler = animationFrameHandler;
+
+// reactUtils.ts
+import { version as ReactVersion } from "react";
+import { unstable_batchedUpdates } from "react-dom";
+import { throttleRAF } from "@excalidraw/common";
+var withBatchedUpdates = (func) => (event) => {
+  unstable_batchedUpdates(func, event);
+};
+var withBatchedUpdatesThrottled = (func) => {
+  return throttleRAF((event) => {
+    unstable_batchedUpdates(func, event);
+  });
+};
+var isRenderThrottlingEnabled = (() => {
+  let IS_REACT_18_AND_UP;
+  try {
+    const version = ReactVersion.split(".");
+    IS_REACT_18_AND_UP = Number(version[0]) > 17;
+  } catch {
+    IS_REACT_18_AND_UP = false;
+  }
+  let hasWarned = false;
+  return () => {
+    if (window.EXCALIDRAW_THROTTLE_RENDER === true) {
+      if (!IS_REACT_18_AND_UP) {
+        if (!hasWarned) {
+          hasWarned = true;
+          console.warn(
+            "Excalidraw: render throttling is disabled on React versions < 18."
+          );
+        }
+        return false;
+      }
+      return true;
+    }
+    return false;
+  };
+})();
+
+// renderer/animation.ts
+var _AnimationController = class _AnimationController {
+  static start(key, animation) {
+    if (_AnimationController.animations.has(key)) {
+      return;
+    }
+    const initialState = animation({
+      deltaTime: 0,
+      state: void 0
+    });
+    if (initialState) {
+      _AnimationController.animations.set(key, {
+        animation,
+        lastTime: 0,
+        state: initialState
+      });
+      _AnimationController.scheduleNextFrame();
+    }
+  }
+  static scheduleNextFrame() {
+    if (_AnimationController.scheduledFrame) {
+      return;
+    }
+    if (isRenderThrottlingEnabled()) {
+      _AnimationController.scheduledFrame = {
+        id: requestAnimationFrame(_AnimationController.tick),
+        type: "raf"
+      };
+    } else {
+      _AnimationController.scheduledFrame = {
+        id: setTimeout(_AnimationController.tick, 0),
+        type: "timeout"
+      };
+    }
+  }
+  static cancelScheduledFrame() {
+    if (!_AnimationController.scheduledFrame) {
+      return;
+    }
+    if (_AnimationController.scheduledFrame.type === "raf") {
+      cancelAnimationFrame(_AnimationController.scheduledFrame.id);
+    } else {
+      clearTimeout(_AnimationController.scheduledFrame.id);
+    }
+    _AnimationController.scheduledFrame = null;
+  }
+  static cancelScheduledFrameIfIdle() {
+    if (_AnimationController.animations.size > 0) {
+      return false;
+    }
+    _AnimationController.cancelScheduledFrame();
+    return true;
+  }
+  static tick() {
+    _AnimationController.scheduledFrame = null;
+    if (_AnimationController.animations.size > 0) {
+      for (const [key, animation] of _AnimationController.animations) {
+        const now = performance.now();
+        const deltaTime = animation.lastTime === 0 ? 0 : now - animation.lastTime;
+        const state = animation.animation({
+          deltaTime,
+          state: animation.state
+        });
+        if (!state) {
+          _AnimationController.animations.delete(key);
+          if (_AnimationController.cancelScheduledFrameIfIdle()) {
+            return;
+          }
+        } else {
+          animation.lastTime = now;
+          animation.state = state;
+        }
+      }
+      if (_AnimationController.cancelScheduledFrameIfIdle()) {
+        return;
+      }
+      _AnimationController.scheduleNextFrame();
+    }
+  }
+  static running(key) {
+    return _AnimationController.animations.has(key);
+  }
+  static cancel(key) {
+    _AnimationController.animations.delete(key);
+    _AnimationController.cancelScheduledFrameIfIdle();
+  }
+};
+__publicField(_AnimationController, "scheduledFrame", null);
+__publicField(_AnimationController, "animations", /* @__PURE__ */ new Map());
+var AnimationController = _AnimationController;
+
+// animatedTrail.ts
+var _AnimatedTrail = class _AnimatedTrail {
+  constructor(app, options) {
     this.app = app;
     this.options = options;
     __publicField(this, "currentTrail");
@@ -16276,7 +16350,8 @@ var AnimatedTrail = class {
     __publicField(this, "container");
     __publicField(this, "trailElement");
     __publicField(this, "trailAnimation");
-    this.animationFrameHandler.register(this, this.onFrame.bind(this));
+    __publicField(this, "key");
+    this.key = `animated-trail-${_AnimatedTrail.counter++}`;
     this.trailElement = document.createElementNS(SVG_NS, "path");
     if (this.options.animateTrail) {
       this.trailAnimation = document.createElementNS(SVG_NS, "animate");
@@ -16299,6 +16374,13 @@ var AnimatedTrail = class {
     }
     return false;
   }
+  cleanup() {
+    this.pastTrails = [];
+    this.currentTrail = void 0;
+    if (this.trailElement.parentNode === this.container) {
+      this.container?.removeChild(this.trailElement);
+    }
+  }
   start(container) {
     if (container) {
       this.container = container;
@@ -16306,13 +16388,20 @@ var AnimatedTrail = class {
     if (this.trailElement.parentNode !== this.container && this.container) {
       this.container.appendChild(this.trailElement);
     }
-    this.animationFrameHandler.start(this);
+    if (!AnimationController.running(this.key)) {
+      AnimationController.start(this.key, () => {
+        const needsNext = this.onFrame();
+        if (needsNext) {
+          return { keep: true };
+        }
+        this.cleanup();
+        return null;
+      });
+    }
   }
   stop() {
-    this.animationFrameHandler.stop(this);
-    if (this.trailElement.parentNode === this.container) {
-      this.container?.removeChild(this.trailElement);
-    }
+    AnimationController.cancel(this.key);
+    this.cleanup();
   }
   startPath(x, y) {
     this.currentTrail = new LaserPointer(this.options);
@@ -16358,11 +16447,12 @@ var AnimatedTrail = class {
       const currentPath = this.drawTrail(this.currentTrail, this.app.state);
       paths.push(currentPath);
     }
-    this.pastTrails = this.pastTrails.filter((trail) => {
-      return trail.getStrokeOutline().length !== 0;
-    });
+    this.pastTrails = this.pastTrails.filter(
+      (t2) => t2.getStrokeOutline(t2.options.size / this.app.state.zoom.value).length !== 0
+    );
     if (paths.length === 0) {
-      this.stop();
+      this.trailElement.setAttribute("d", "");
+      return false;
     }
     const svgPaths = paths.join(" ").trim();
     this.trailElement.setAttribute("d", svgPaths);
@@ -16381,6 +16471,7 @@ var AnimatedTrail = class {
         (this.options.fill ?? (() => "black"))(this)
       );
     }
+    return true;
   }
   drawTrail(trail, state) {
     const _stroke = trail.getStrokeOutline(trail.options.size / state.zoom.value).map(([x, y]) => {
@@ -16394,17 +16485,17 @@ var AnimatedTrail = class {
     return getSvgPathFromStroke2(stroke, true);
   }
 };
+__publicField(_AnimatedTrail, "counter", 0);
+var AnimatedTrail = _AnimatedTrail;
 
-// laser-trails.ts
+// laserTrails.ts
 var LaserTrails = class {
-  constructor(animationFrameHandler, app) {
-    this.animationFrameHandler = animationFrameHandler;
+  constructor(app) {
     this.app = app;
     __publicField(this, "localTrail");
     __publicField(this, "collabTrails", /* @__PURE__ */ new Map());
     __publicField(this, "container");
-    this.animationFrameHandler.register(this, this.onFrame.bind(this));
-    this.localTrail = new AnimatedTrail(animationFrameHandler, app, {
+    this.localTrail = new AnimatedTrail(app, {
       ...this.getTrailOptions(),
       fill: () => DEFAULT_LASER_COLOR
     });
@@ -16436,93 +16527,63 @@ var LaserTrails = class {
   }
   start(container) {
     this.container = container;
-    this.animationFrameHandler.start(this);
     this.localTrail.start(container);
   }
   stop() {
-    this.animationFrameHandler.stop(this);
     this.localTrail.stop();
+    this.stopCollabTrails();
+    this.container = void 0;
   }
-  onFrame() {
-    this.updateCollabTrails();
+  stopCollabTrails(collaborators) {
+    for (const [key, trail] of this.collabTrails) {
+      const collaborator = collaborators?.get(key);
+      if (!collaborator) {
+        trail.stop();
+        this.collabTrails.delete(key);
+      }
+    }
   }
-  updateCollabTrails() {
-    if (!this.container || this.app.state.collaborators.size === 0) {
+  updateCollabTrails(collaborators) {
+    this.stopCollabTrails(collaborators);
+    if (!this.container || collaborators.size === 0) {
       return;
     }
-    for (const [key, collaborator] of this.app.state.collaborators.entries()) {
-      let trail;
-      if (!this.collabTrails.has(key)) {
-        trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
+    for (const [key, collaborator] of collaborators.entries()) {
+      if (collaborator.isCurrentUser) {
+        continue;
+      }
+      let trail = this.collabTrails.get(key);
+      if (!trail) {
+        trail = new AnimatedTrail(this.app, {
           ...this.getTrailOptions(),
           fill: () => collaborator.pointer?.laserColor || getClientColor(key, collaborator)
         });
         trail.start(this.container);
         this.collabTrails.set(key, trail);
-      } else {
-        trail = this.collabTrails.get(key);
       }
       if (collaborator.pointer && collaborator.pointer.tool === "laser") {
-        if (collaborator.button === "down" && !trail.hasCurrentTrail) {
+        const buttonDown = collaborator.button === "down";
+        const buttonUp = collaborator.button === "up";
+        const hasTrail = trail.hasCurrentTrail;
+        if (buttonDown && !hasTrail) {
           trail.startPath(collaborator.pointer.x, collaborator.pointer.y);
         }
-        if (collaborator.button === "down" && trail.hasCurrentTrail && !trail.hasLastPoint(collaborator.pointer.x, collaborator.pointer.y)) {
+        const lastPointOriginal = !trail.hasLastPoint(
+          collaborator.pointer.x,
+          collaborator.pointer.y
+        );
+        if (buttonDown && lastPointOriginal) {
           trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
         }
-        if (collaborator.button === "up" && trail.hasCurrentTrail) {
+        if (buttonUp && hasTrail) {
           trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
           trail.endPath();
         }
       }
     }
-    for (const key of this.collabTrails.keys()) {
-      if (!this.app.state.collaborators.has(key)) {
-        const trail = this.collabTrails.get(key);
-        trail.stop();
-        this.collabTrails.delete(key);
-      }
-    }
   }
 };
 
-// reactUtils.ts
-import { version as ReactVersion } from "react";
-import { unstable_batchedUpdates } from "react-dom";
-import { throttleRAF } from "@excalidraw/common";
-var withBatchedUpdates = (func) => (event) => {
-  unstable_batchedUpdates(func, event);
-};
-var withBatchedUpdatesThrottled = (func) => {
-  return throttleRAF((event) => {
-    unstable_batchedUpdates(func, event);
-  });
-};
-var isRenderThrottlingEnabled = (() => {
-  let IS_REACT_18_AND_UP;
-  try {
-    const version = ReactVersion.split(".");
-    IS_REACT_18_AND_UP = Number(version[0]) > 17;
-  } catch {
-    IS_REACT_18_AND_UP = false;
-  }
-  let hasWarned = false;
-  return () => {
-    if (window.EXCALIDRAW_THROTTLE_RENDER === true) {
-      if (!IS_REACT_18_AND_UP) {
-        if (!hasWarned) {
-          hasWarned = true;
-          console.warn(
-            "Excalidraw: render throttling is disabled on React versions < 18."
-          );
-        }
-        return false;
-      }
-      return true;
-    }
-    return false;
-  };
-})();
-
 // textAutoResizeHandle.ts
 import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "@excalidraw/common";
 import {
@@ -17481,8 +17542,8 @@ var intersectionTest = (lassoPath, element, elementsMap) => {
 
 // lasso/index.ts
 var LassoTrail = class extends AnimatedTrail {
-  constructor(animationFrameHandler, app) {
-    super(animationFrameHandler, app, {
+  constructor(app) {
+    super(app, {
       animateTrail: true,
       streamline: 0.4,
       sizeMapping: (c) => {
@@ -17688,8 +17749,8 @@ import { shouldTestInside as shouldTestInside2 } from "@excalidraw/element";
 import { hasBoundTextElement as hasBoundTextElement4, isBoundToContainer as isBoundToContainer8 } from "@excalidraw/element";
 import { getBoundTextElementId as getBoundTextElementId2 } from "@excalidraw/element";
 var EraserTrail = class extends AnimatedTrail {
-  constructor(animationFrameHandler, app) {
-    super(animationFrameHandler, app, {
+  constructor(app) {
+    super(app, {
       streamline: 0.2,
       size: 5,
       keepHead: true,
@@ -30943,67 +31004,6 @@ var renderInteractiveScene = (renderConfig) => {
   return ret;
 };
 
-// renderer/animation.ts
-var _AnimationController = class _AnimationController {
-  static start(key, animation) {
-    const initialState = animation({
-      deltaTime: 0,
-      state: void 0
-    });
-    if (initialState) {
-      _AnimationController.animations.set(key, {
-        animation,
-        lastTime: 0,
-        state: initialState
-      });
-      if (!_AnimationController.isRunning) {
-        _AnimationController.isRunning = true;
-        if (isRenderThrottlingEnabled()) {
-          requestAnimationFrame(_AnimationController.tick);
-        } else {
-          setTimeout(_AnimationController.tick, 0);
-        }
-      }
-    }
-  }
-  static tick() {
-    if (_AnimationController.animations.size > 0) {
-      for (const [key, animation] of _AnimationController.animations) {
-        const now = performance.now();
-        const deltaTime = animation.lastTime === 0 ? 0 : now - animation.lastTime;
-        const state = animation.animation({
-          deltaTime,
-          state: animation.state
-        });
-        if (!state) {
-          _AnimationController.animations.delete(key);
-          if (_AnimationController.animations.size === 0) {
-            _AnimationController.isRunning = false;
-            return;
-          }
-        } else {
-          animation.lastTime = now;
-          animation.state = state;
-        }
-      }
-      if (isRenderThrottlingEnabled()) {
-        requestAnimationFrame(_AnimationController.tick);
-      } else {
-        setTimeout(_AnimationController.tick, 0);
-      }
-    }
-  }
-  static running(key) {
-    return _AnimationController.animations.has(key);
-  }
-  static cancel(key) {
-    _AnimationController.animations.delete(key);
-  }
-};
-__publicField(_AnimationController, "isRunning", false);
-__publicField(_AnimationController, "animations", /* @__PURE__ */ new Map());
-var AnimationController = _AnimationController;
-
 // components/canvases/InteractiveCanvas.tsx
 import { jsx as jsx133 } from "react/jsx-runtime";
 var INTERACTIVE_SCENE_ANIMATION_KEY = "animateInteractiveScene";
@@ -31698,10 +31698,9 @@ var App = class _App extends React40.Component {
     /** previous frame pointer coords */
     __publicField(this, "previousPointerMoveCoords", null);
     __publicField(this, "lastViewportPosition", { x: 0, y: 0 });
-    __publicField(this, "animationFrameHandler", new AnimationFrameHandler());
-    __publicField(this, "laserTrails", new LaserTrails(this.animationFrameHandler, this));
-    __publicField(this, "eraserTrail", new EraserTrail(this.animationFrameHandler, this));
-    __publicField(this, "lassoTrail", new LassoTrail(this.animationFrameHandler, this));
+    __publicField(this, "laserTrails", new LaserTrails(this));
+    __publicField(this, "eraserTrail", new EraserTrail(this));
+    __publicField(this, "lassoTrail", new LassoTrail(this));
     __publicField(this, "onChangeEmitter", new Emitter2());
     __publicField(this, "onPointerDownEmitter", new Emitter2());
     __publicField(this, "onPointerUpEmitter", new Emitter2());
@@ -32902,6 +32901,7 @@ var App = class _App extends React40.Component {
           this.scene.replaceAllElements(elements);
         }
         if (collaborators) {
+          this.laserTrails.updateCollabTrails(collaborators);
           this.setState({ collaborators });
         }
       }
@@ -36022,9 +36022,10 @@ var App = class _App extends React40.Component {
           throw new Error(t("errors.svgImageInsertError"));
         }
       } else if (fileNeedsResizing) {
+        const { maxWidthOrHeight } = this.props.imageOptions;
         try {
           imageFile = await this.props.compressImageFile(imageFile, {
-            maxWidthOrHeight: DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT
+            maxWidthOrHeight
           });
           console.info("Excalidraw: image resized");
         } catch (error) {
@@ -36034,10 +36035,11 @@ var App = class _App extends React40.Component {
           );
         }
       }
-      if (imageFile.size > MAX_ALLOWED_FILE_BYTES) {
+      const { maxFileSizeBytes } = this.props.imageOptions;
+      if (imageFile.size > maxFileSizeBytes) {
         throw new Error(
           t("errors.fileTooBig", {
-            maxSize: `${Math.trunc(MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`
+            maxSize: `${Math.trunc(maxFileSizeBytes / 1024 / 1024)}MB`
           })
         );
       }
@@ -36349,12 +36351,7 @@ var App = class _App extends React40.Component {
         const elements = this.scene.getElementsIncludingDeleted();
         let ret;
         try {
-          ret = await loadFromBlob(
-            file2,
-            this.state,
-            elements,
-            fileHandle
-          );
+          ret = await loadFromBlob(file2, this.state, elements, fileHandle);
         } catch (error) {
           const imageSceneDataError = error instanceof ImageSceneDataError;
           if (imageSceneDataError && error.code === "IMAGE_NOT_CONTAINS_SCENE_DATA" && !this.isToolSupported("image")) {
@@ -41206,7 +41203,8 @@ var ExcalidrawBase = (props) => {
     wheelZoomsOnDefault,
     strokeColorTopPicks,
     backgroundColorTopPicks,
-    renderScrollbars
+    renderScrollbars,
+    imageOptions
   } = props;
   const canvasActions = props.UIOptions?.canvasActions;
   const UIOptions = {
@@ -41225,6 +41223,10 @@ var ExcalidrawBase = (props) => {
   if (UIOptions.canvasActions.toggleTheme === null && typeof theme === "undefined") {
     UIOptions.canvasActions.toggleTheme = true;
   }
+  const normalizedImageOptions = {
+    maxFileSizeBytes: imageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes,
+    maxWidthOrHeight: imageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight
+  };
   const setExcalidrawAPI = useContext4(ExcalidrawAPISetContext);
   const onExcalidrawAPIRef = useRef31(onExcalidrawAPI);
   onExcalidrawAPIRef.current = onExcalidrawAPI;
@@ -41296,6 +41298,7 @@ var ExcalidrawBase = (props) => {
       strokeColorTopPicks,
       backgroundColorTopPicks,
       renderScrollbars,
+      imageOptions: normalizedImageOptions,
       children
     }
   ) }) });
@@ -41307,11 +41310,13 @@ var areEqual5 = (prevProps, nextProps) => {
   const {
     initialData: prevInitialData,
     UIOptions: prevUIOptions = {},
+    imageOptions: prevImageOptions,
     ...prev
   } = prevProps;
   const {
     initialData: nextInitialData,
     UIOptions: nextUIOptions = {},
+    imageOptions: nextImageOptions,
     ...next
   } = nextProps;
   const prevUIOptionsKeys = Object.keys(prevUIOptions);
@@ -41336,7 +41341,8 @@ var areEqual5 = (prevProps, nextProps) => {
     }
     return prevUIOptions[key] === nextUIOptions[key];
   });
-  return isUIOptionsSame && isShallowEqual9(prev, next);
+  const isImageOptionsSame = (prevImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) === (nextImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) && (prevImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) === (nextImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes);
+  return isUIOptionsSame && isImageOptionsSame && isShallowEqual9(prev, next);
 };
 var Excalidraw = React42.memo(ExcalidrawBase, areEqual5);
 Excalidraw.displayName = "Excalidraw";