@myoc/excalidraw 0.19.541 → 0.19.542

package/CHANGELOG.md

@@ -6116,6 +6116,7 @@ First release of `@excalidraw/excalidraw`## Excalidraw Library
 - Incorrect import for color (was moved to common)
 
 ---
+
 ## Excalidraw Library
 
 **_This section lists the updates made to the excalidraw library and will not affect the integration._**
@@ -6168,8 +6169,7 @@ First release of `@excalidraw/excalidraw`## Excalidraw Library
 
 - Incorrect import for color (was moved to common)
 
----
-## Excalidraw Library
+---## Excalidraw Library
 
 **_This section lists the updates made to the excalidraw library and will not affect the integration._**
 

package/dist/dev/{chunk-JLFL3YO4.js → chunk-D7VSTSAC.js}

@@ -1,7 +1,7 @@
 // <define:import.meta.env>
-var define_import_meta_env_default = { MODE: "development", VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "http://localhost:3000", VITE_APP_AI_BACKEND: "http://localhost:3016", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_ENABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3001", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_APP_ENABLE_PWA: "false", VITE_APP_PLUS_EXPORT_PUBLIC_KEY: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0\n7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij\nba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y\nUNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD\ns9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot\nkdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS\nHQIDAQAB", VITE_APP_DISABLE_PREVENT_UNLOAD: "", PKG_NAME: "@myoc/excalidraw", PKG_VERSION: "0.19.539", DEV: true };
+var define_import_meta_env_default = { MODE: "development", VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "http://localhost:3000", VITE_APP_AI_BACKEND: "http://localhost:3016", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_ENABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3001", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_APP_ENABLE_PWA: "false", VITE_APP_PLUS_EXPORT_PUBLIC_KEY: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0\n7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij\nba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y\nUNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD\ns9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot\nkdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS\nHQIDAQAB", VITE_APP_DISABLE_PREVENT_UNLOAD: "", PKG_NAME: "@myoc/excalidraw", PKG_VERSION: "0.19.541", DEV: true };
 
 export {
   define_import_meta_env_default
 };
-//# sourceMappingURL=chunk-JLFL3YO4.js.map
+//# sourceMappingURL=chunk-D7VSTSAC.js.map

package/dist/dev/{chunk-3GXWFO3U.js → chunk-E77EFOSN.js}

@@ -1,6 +1,6 @@
 import {
   define_import_meta_env_default
-} from "./chunk-JLFL3YO4.js";
+} from "./chunk-D7VSTSAC.js";
 import {
   __publicField
 } from "./chunk-XDFCUUT6.js";
@@ -5455,7 +5455,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES6.png) {
     try {
-      return await (await import("./data/image-OIDJZ5EF.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-7IWBMQLB.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -5894,4 +5894,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-3GXWFO3U.js.map
+//# sourceMappingURL=chunk-E77EFOSN.js.map

package/dist/dev/data/{image-OIDJZ5EF.js → image-7IWBMQLB.js}

@@ -2,12 +2,12 @@ import {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
-} from "../chunk-3GXWFO3U.js";
-import "../chunk-JLFL3YO4.js";
+} from "../chunk-E77EFOSN.js";
+import "../chunk-D7VSTSAC.js";
 import "../chunk-XDFCUUT6.js";
 export {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
 };
-//# sourceMappingURL=image-OIDJZ5EF.js.map
+//# sourceMappingURL=image-7IWBMQLB.js.map

package/dist/dev/index.js

@@ -64,10 +64,10 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-3GXWFO3U.js";
+} from "./chunk-E77EFOSN.js";
 import {
   define_import_meta_env_default
-} from "./chunk-JLFL3YO4.js";
+} from "./chunk-D7VSTSAC.js";
 import {
   en_default
 } from "./chunk-2OVHIH4L.js";
@@ -236,7 +236,7 @@ import {
   isBindingElementType,
   isBoundToContainer as isBoundToContainer10,
   isFrameLikeElement as isFrameLikeElement17,
-  isImageElement as isImageElement9,
+  isImageElement as isImageElement10,
   isEmbeddableElement as isEmbeddableElement4,
   isInitializedImageElement as isInitializedImageElement5,
   isLinearElement as isLinearElement11,
@@ -330,7 +330,7 @@ import {
   calculateFixedPointForNonElbowArrowBinding as calculateFixedPointForNonElbowArrowBinding2,
   bindOrUnbindBindingElement as bindOrUnbindBindingElement2,
   mutateElement as mutateElement7,
-  getElementBounds as getElementBounds4,
+  getElementBounds as getElementBounds5,
   doBoundsIntersect as doBoundsIntersect4,
   isPointInElement as isPointInElement3,
   maxBindingDistance_simple as maxBindingDistance_simple4,
@@ -10970,7 +10970,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-OIDJZ5EF.js").then(
+        (blob2) => import("./data/image-7IWBMQLB.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -13127,19 +13127,34 @@ var actionToggleGridMode = register({
 // actions/actionSmartZoom.tsx
 import { KEYS as KEYS27 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction22 } from "@excalidraw/element/store";
+import { getElementBounds } from "@excalidraw/element";
+import { isImageElement } from "@excalidraw/element/typeChecks";
 import { jsx as jsx53 } from "react/jsx-runtime";
+var getNextSmartZoomImage = (elements, elementsMap, currentImageId, direction) => {
+  const images = elements.filter(isImageElement).sort((imageA, imageB) => {
+    const [leftA, topA] = getElementBounds(imageA, elementsMap);
+    const [leftB, topB] = getElementBounds(imageB, elementsMap);
+    return topA - topB || leftA - leftB;
+  });
+  if (images.length === 0) {
+    return null;
+  }
+  const currentIndex = images.findIndex((image) => image.id === currentImageId);
+  const nextIndex = direction === "next" ? (currentIndex + 1) % images.length : (currentIndex < 0 ? images.length - 1 : currentIndex - 1 + images.length) % images.length;
+  return images[nextIndex];
+};
 var actionSmartZoom = register({
   name: "smartZoom",
   label: "toolBar.smartZoom",
   trackEvent: { category: "toolbar" },
   icon: arrowsToEyeIcon,
   viewMode: true,
-  perform: (elements, appState, _, app) => {
+  perform: (elements, appState, targetElements, app) => {
     const settings = getEffectiveEditorPreferences(
       appState,
       app.props.editorPreferences
     ).smartZoom;
-    const selectedElements = getSelectedElements(elements, appState);
+    const selectedElements = targetElements && targetElements.length > 0 ? targetElements : getSelectedElements(elements, appState);
     app.viewport.setViewport({
       target: selectedElements.length ? selectedElements : elements,
       fit: settings.fitToViewport ? "contain" : "none",
@@ -16407,7 +16422,7 @@ var actionToggleSearchMenu = register({
 });
 
 // actions/actionCropEditor.tsx
-import { isImageElement as isImageElement2 } from "@excalidraw/element";
+import { isImageElement as isImageElement3 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction32 } from "@excalidraw/element";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var actionToggleCropEditor = register({
@@ -16433,7 +16448,7 @@ var actionToggleCropEditor = register({
   },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    if (!appState.croppingElementId && selectedElements.length === 1 && isImageElement2(selectedElements[0])) {
+    if (!appState.croppingElementId && selectedElements.length === 1 && isImageElement3(selectedElements[0])) {
       return true;
     }
     return false;
@@ -19592,7 +19607,7 @@ import {
   elementOverlapsWithFrame as elementOverlapsWithFrame2,
   getBoundTextElement as getBoundTextElement6,
   getContainingFrame as getContainingFrame3,
-  getElementBounds as getElementBounds2,
+  getElementBounds as getElementBounds3,
   intersectElementWithLineSegment as intersectElementWithLineSegment2,
   isBoundToContainer as isBoundToContainer8,
   pointInsideBoundsInclusive
@@ -19636,7 +19651,7 @@ var getLassoSelectedElementIds = (input) => {
     lassoBounds[3] + PRECISION3
   ];
   for (const element of selectableElements) {
-    const bounds = getElementBounds2(element, elementsMap);
+    const bounds = getElementBounds3(element, elementsMap);
     const clipBounds = getFrameClipBounds(element, bounds, elementsMap);
     const elementBounds = clipToBounds(bounds, clipBounds);
     if (doBoundsIntersect2(lassoBounds, elementBounds) && !intersectedElements.has(element.id) && !enclosedElements.has(element.id)) {
@@ -19676,7 +19691,7 @@ var getFrameClipBounds = (element, elementBounds, elementsMap) => {
   if (!frame) {
     return null;
   }
-  const frameBounds = getElementBounds2(frame, elementsMap);
+  const frameBounds = getElementBounds3(frame, elementsMap);
   if (boundsContainBounds2(frameBounds, elementBounds)) {
     return null;
   }
@@ -19946,7 +19961,7 @@ import {
   computeBoundTextPosition as computeBoundTextPosition5,
   doBoundsIntersect as doBoundsIntersect3,
   getBoundTextElement as getBoundTextElement7,
-  getElementBounds as getElementBounds3,
+  getElementBounds as getElementBounds4,
   getElementLineSegments as getElementLineSegments3,
   getFreedrawOutlineAsSegments,
   getFreedrawOutlinePoints as getFreedrawOutlinePoints2,
@@ -20092,7 +20107,7 @@ var eraserTest = (pathSegment, element, elementsMap, zoom) => {
     Math.max(pathSegment[0][0], pathSegment[1][0]) + threshold,
     Math.max(pathSegment[0][1], pathSegment[1][1]) + threshold
   ];
-  const origElementBounds = getElementBounds3(element, elementsMap);
+  const origElementBounds = getElementBounds4(element, elementsMap);
   const elementBounds = [
     origElementBounds[0] - threshold,
     origElementBounds[1] - threshold,
@@ -21231,7 +21246,7 @@ import {
   isBindableElement as isBindableElement2,
   isElbowArrow as isElbowArrow6,
   isFrameLikeElement as isFrameLikeElement11,
-  isImageElement as isImageElement3,
+  isImageElement as isImageElement4,
   isLinearElement as isLinearElement7,
   isLineElement as isLineElement6,
   maxBindingDistance_simple as maxBindingDistance_simple2,
@@ -22422,7 +22437,7 @@ var renderResetAutoResizeHandle = (text, context, appState, selectionColor, form
 };
 var renderImageStatusOverlays = (context, visibleElements, elementsMap, app, appState, selectionColor) => {
   for (const element of visibleElements) {
-    if (!isImageElement3(element) || !element.fileId) {
+    if (!isImageElement4(element) || !element.fileId) {
       continue;
     }
     const imageStatus = app.imageStatus.get(element.fileId);
@@ -22491,7 +22506,7 @@ var renderImageStatusOverlays = (context, visibleElements, elementsMap, app, app
   }
 };
 var getImageStatusOverlayPosition = (element, elementsMap, appState, placement) => {
-  if (!isImageElement3(element)) {
+  if (!isImageElement4(element)) {
     return null;
   }
   const [x1, y1, x2, y2] = getElementAbsoluteCoords6(element, elementsMap);
@@ -22910,7 +22925,7 @@ var _renderInteractiveScene = ({
             cx,
             cy,
             activeEmbeddable: appState.activeEmbeddable?.element === element && appState.activeEmbeddable.state === "active",
-            padding: element.id === appState.croppingElementId || isImageElement3(element) ? 0 : void 0
+            padding: element.id === appState.croppingElementId || isImageElement4(element) ? 0 : void 0
           });
         }
       }
@@ -22965,7 +22980,7 @@ var _renderInteractiveScene = ({
       }
       if (appState.croppingElementId && !appState.isCropping) {
         const croppingElement = elementsMap.get(appState.croppingElementId);
-        if (croppingElement && isImageElement3(croppingElement)) {
+        if (croppingElement && isImageElement4(croppingElement)) {
           renderCropHandles(
             context,
             renderConfig,
@@ -25786,7 +25801,7 @@ import {
   suppportsHorizontalAlign,
   hasBoundTextElement as hasBoundTextElement6,
   isElbowArrow as isElbowArrow8,
-  isImageElement as isImageElement4,
+  isImageElement as isImageElement5,
   isLinearElement as isLinearElement9,
   isTextElement as isTextElement11,
   hasStrokeColor as hasStrokeColor2,
@@ -25850,14 +25865,14 @@ var getShapeActionPredicates = (appState, targetElements, elementsMap, app) => {
     ),
     align: !isSingleElementBoundContainer && alignActionsPredicate(appState, app),
     distribute: targetElements.length > 2,
-    imageLayout: targetElements.length > 1 && targetElements.every(isImageElement4) && alignActionsPredicate(appState, app),
+    imageLayout: targetElements.length > 1 && targetElements.every(isImageElement5) && alignActionsPredicate(appState, app),
     // per-element actions
     // NOTE: the full panel treats a bound container as linkable; the compact /
     // mobile layouts only link a truly single selection. Both are preserved via
     // the two flags below.
     link: singleSelected || isSingleElementBoundContainer,
     linkSingleOnly: singleSelected,
-    cropEditor: !appState.croppingElementId && singleSelected && isImageElement4(targetElements[0]),
+    cropEditor: !appState.croppingElementId && singleSelected && isImageElement5(targetElements[0]),
     lineEditor: !appState.selectedLinearElement?.isEditing && singleSelected && isLinearElement9(targetElements[0]) && !isElbowArrow8(targetElements[0])
   };
 };
@@ -29038,7 +29053,7 @@ import { useEffect as useEffect29, useMemo as useMemo9, useState as useState25,
 import { STATS_PANELS } from "@excalidraw/common";
 import { getCommonBounds as getCommonBounds10 } from "@excalidraw/element";
 import { getUncroppedWidthAndHeight as getUncroppedWidthAndHeight3 } from "@excalidraw/element";
-import { isImageElement as isImageElement7 } from "@excalidraw/element";
+import { isImageElement as isImageElement8 } from "@excalidraw/element";
 import { frameAndChildrenSelectedTogether as frameAndChildrenSelectedTogether2 } from "@excalidraw/element";
 import { elementsAreInSameGroup as elementsAreInSameGroup3 } from "@excalidraw/element";
 
@@ -29574,7 +29589,7 @@ import {
   getUncroppedWidthAndHeight
 } from "@excalidraw/element";
 import { resizeSingleElement } from "@excalidraw/element";
-import { isImageElement as isImageElement5 } from "@excalidraw/element";
+import { isImageElement as isImageElement6 } from "@excalidraw/element";
 import { isFrameLikeElement as isFrameLikeElement14 } from "@excalidraw/element";
 import { getElementsInResizingFrame as getElementsInResizingFrame2 } from "@excalidraw/element";
 import { replaceAllElementsInFrame as replaceAllElementsInFrame2 } from "@excalidraw/element";
@@ -29605,7 +29620,7 @@ var handleDimensionChange = ({
     const aspectRatio = origElement.width / origElement.height;
     if (originalAppState.croppingElementId === origElement.id) {
       const element = elementsMap.get(origElement.id);
-      if (!element || !isImageElement5(element) || !element.crop) {
+      if (!element || !isImageElement6(element) || !element.crop) {
         return;
       }
       const crop = element.crop;
@@ -29805,7 +29820,7 @@ var DimensionDragInput = ({
   appState
 }) => {
   let value = round2(property === "width" ? element.width : element.height, 2);
-  if (appState.croppingElementId && appState.croppingElementId === element.id && isImageElement5(element) && element.crop) {
+  if (appState.croppingElementId && appState.croppingElementId === element.id && isImageElement6(element) && element.crop) {
     const { width: uncroppedWidth, height: uncroppedHeight } = getUncroppedWidthAndHeight(element);
     if (property === "width") {
       const ratio = uncroppedWidth / element.crop.naturalWidth;
@@ -30801,7 +30816,7 @@ import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight as getUncroppedWidthAndHeight2
 } from "@excalidraw/element";
-import { isImageElement as isImageElement6 } from "@excalidraw/element";
+import { isImageElement as isImageElement7 } from "@excalidraw/element";
 import { jsx as jsx106 } from "react/jsx-runtime";
 var handlePositionChange2 = ({
   accumulatedChange,
@@ -30828,7 +30843,7 @@ var handlePositionChange2 = ({
   );
   if (originalAppState.croppingElementId === origElement.id) {
     const element = elementsMap.get(origElement.id);
-    if (!element || !isImageElement6(element) || !element.crop) {
+    if (!element || !isImageElement7(element) || !element.crop) {
       return;
     }
     const crop = element.crop;
@@ -30923,7 +30938,7 @@ var Position = ({ property, element, scene, appState }) => {
     element.angle
   );
   let value = round3(property === "x" ? topLeftX : topLeftY, 2);
-  if (appState.croppingElementId === element.id && isImageElement6(element) && element.crop) {
+  if (appState.croppingElementId === element.id && isImageElement7(element) && element.crop) {
     const flipAdjustedPosition = getFlipAdjustedCropPosition(element);
     if (flipAdjustedPosition) {
       value = round3(
@@ -31013,7 +31028,7 @@ var StatsInner = memo2(
     const setAppState = useExcalidrawSetAppState();
     const singleElement = selectedElements.length === 1 ? selectedElements[0] : null;
     const multipleElements = selectedElements.length > 1 ? selectedElements : null;
-    const cropMode = appState.croppingElementId && isImageElement7(singleElement);
+    const cropMode = appState.croppingElementId && isImageElement8(singleElement);
     const unCroppedDimension = cropMode ? getUncroppedWidthAndHeight3(singleElement) : null;
     const [sceneDimension, setSceneDimension] = useState25({
       width: 0,
@@ -31115,11 +31130,11 @@ var StatsInner = memo2(
               children: /* @__PURE__ */ jsxs55(StatsRows, { children: [
                 singleElement && /* @__PURE__ */ jsxs55(Fragment16, { children: [
                   cropMode && /* @__PURE__ */ jsx107(StatsRow, { heading: true, children: t("labels.unCroppedDimension") }),
-                  appState.croppingElementId && isImageElement7(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs55(StatsRow, { columns: 2, children: [
+                  appState.croppingElementId && isImageElement8(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs55(StatsRow, { columns: 2, children: [
                     /* @__PURE__ */ jsx107("div", { children: t("stats.width") }),
                     /* @__PURE__ */ jsx107("div", { children: round4(unCroppedDimension.width, 2) })
                   ] }),
-                  appState.croppingElementId && isImageElement7(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs55(StatsRow, { columns: 2, children: [
+                  appState.croppingElementId && isImageElement8(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs55(StatsRow, { columns: 2, children: [
                     /* @__PURE__ */ jsx107("div", { children: t("stats.height") }),
                     /* @__PURE__ */ jsx107("div", { children: round4(unCroppedDimension.height, 2) })
                   ] }),
@@ -34456,7 +34471,7 @@ import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB3, DEFAULT_SIDEBAR as DEFAULT_SID
 import {
   isArrowElement as isArrowElement14,
   isFlowchartNodeElement as isFlowchartNodeElement3,
-  isImageElement as isImageElement8,
+  isImageElement as isImageElement9,
   isLinearElement as isLinearElement10,
   isLineElement as isLineElement8,
   isTextBindableContainer as isTextBindableContainer2,
@@ -34526,7 +34541,7 @@ var getHints = ({
         shortcut: getTaggedShortcutKey("Shift")
       });
     }
-    return isImageElement8(targetElement) ? t("hints.resizeImage", {
+    return isImageElement9(targetElement) ? t("hints.resizeImage", {
       shortcut_1: getTaggedShortcutKey("Shift"),
       shortcut_2: getTaggedShortcutKey("Alt")
     }) : t("hints.resize", {
@@ -34556,7 +34571,7 @@ var getHints = ({
       shortcut_2: getTaggedShortcutKey("Escape")
     });
   }
-  if (selectedElements.length === 1 && isImageElement8(selectedElements[0])) {
+  if (selectedElements.length === 1 && isImageElement9(selectedElements[0])) {
     return t("hints.enterCropEditor", {
       shortcut: getTaggedShortcutKey("Enter")
     });
@@ -35701,7 +35716,7 @@ var InteractiveCanvas = (props) => {
       onPointerCancel: props.onPointerCancel,
       onTouchMove: props.onTouchMove,
       onPointerDown: props.onPointerDown,
-      onDoubleClick: props.appState.viewModeEnabled ? void 0 : props.onDoubleClick,
+      onDoubleClick: props.onDoubleClick,
       children: t("labels.drawingCanvas")
     }
   );
@@ -36509,6 +36524,7 @@ var App = class _App extends React41.Component {
     /** current frame pointer cords */
     __publicField(this, "lastPointerMoveCoords", null);
     __publicField(this, "lastCompletedCanvasClicks", []);
+    __publicField(this, "lastKeyboardSmartZoomImageId", null);
     /** previous frame pointer coords */
     __publicField(this, "previousPointerMoveCoords", null);
     __publicField(this, "drawShape", new AppDrawShape(this));
@@ -38138,10 +38154,28 @@ var App = class _App extends React41.Component {
             this.scene.getNonDeletedElementsMap(),
             this.state
           );
-          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS53.ENTER) {
+          if (selectedElements.length === 1 && isImageElement10(selectedElements[0]) && event.key === KEYS53.ENTER) {
             this.startImageCropping(selectedElements[0]);
             return;
           }
+          if (selectedElements.length === 0 && (event.key === KEYS53.ARROW_LEFT || event.key === KEYS53.ARROW_RIGHT) && !event[KEYS53.CTRL_OR_CMD] && !event.shiftKey && !event.altKey) {
+            const elementsMap = this.scene.getNonDeletedElementsMap();
+            const targetImage = getNextSmartZoomImage(
+              this.scene.getNonDeletedElements(),
+              elementsMap,
+              this.lastKeyboardSmartZoomImageId,
+              event.key === KEYS53.ARROW_RIGHT ? "next" : "previous"
+            );
+            if (targetImage) {
+              this.lastKeyboardSmartZoomImageId = targetImage.id;
+              this.actionManager.executeAction(actionSmartZoom, "keyboard", [
+                targetImage
+              ]);
+              event.preventDefault();
+              event.stopPropagation();
+              return;
+            }
+          }
           if (event.key === KEYS53.ESCAPE) {
             this.updateEditorAtom(convertElementTypePopupAtom, null);
           } else if (event.key === KEYS53.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
@@ -38905,12 +38939,26 @@ var App = class _App extends React41.Component {
       ) <= DOUBLE_TAP_POSITION_THRESHOLD;
     });
     __publicField(this, "handleCanvasDoubleClick", (event) => {
-      if (!this.isInteractionEnabled() || this.state.editingTextElement || !this.shouldHandleBrowserCanvasDoubleClick(event.type)) {
+      if (!this.isInteractionEnabled() || this.state.editingTextElement || !this.state.viewModeEnabled && !this.shouldHandleBrowserCanvasDoubleClick(event.type)) {
         return;
       }
       if (this.state.multiElement) {
         return;
       }
+      if (this.state.viewModeEnabled) {
+        const { x: sceneX2, y: sceneY2 } = viewportCoordsToSceneCoords3(
+          event,
+          this.state
+        );
+        const hitElement = this.getElementAtPosition(sceneX2, sceneY2, {
+          includeLockedElements: true
+        });
+        if (hitElement) {
+          this.cursor.reset();
+          this.actionManager.executeAction(actionSmartZoom, "ui", [hitElement]);
+        }
+        return;
+      }
       if (this.state.activeTool.type !== this.state.preferredSelectionTool.type && this.state.activeTool.type !== "autoshape") {
         return;
       }
@@ -38979,7 +39027,7 @@ var App = class _App extends React41.Component {
           return;
         }
       }
-      if (selectedElements.length === 1 && isImageElement9(selectedElements[0])) {
+      if (selectedElements.length === 1 && isImageElement10(selectedElements[0])) {
         this.startImageCropping(selectedElements[0]);
         return;
       }
@@ -39015,6 +39063,12 @@ var App = class _App extends React41.Component {
           return;
         }
         if (!this.state.selectedLinearElement?.isEditing) {
+          const lockedElement = this.getElementAtPosition(sceneX, sceneY, {
+            includeLockedElements: true
+          });
+          if (lockedElement?.locked) {
+            return;
+          }
           const container = (
             // skip binding to container on dblclick when holding ctrl
             !event[KEYS53.CTRL_OR_CMD] && this.getTextBindableContainerAtPosition(sceneX, sceneY)
@@ -39081,7 +39135,7 @@ var App = class _App extends React41.Component {
       const elements = this.visibleElements.length ? this.visibleElements : this.scene.getNonDeletedElements();
       for (let index = elements.length - 1; index >= 0; index--) {
         const element = elements[index];
-        if (!isImageElement9(element) || !element.fileId) {
+        if (!isImageElement10(element) || !element.fileId) {
           continue;
         }
         const imageStatus = this.imageStatus.get(element.fileId);
@@ -41951,7 +42005,7 @@ var App = class _App extends React41.Component {
           y: gridY,
           width: distance2(pointerDownState.originInGrid.x, gridX),
           height: distance2(pointerDownState.originInGrid.y, gridY),
-          shouldMaintainAspectRatio: isImageElement9(newElement9) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
+          shouldMaintainAspectRatio: isImageElement10(newElement9) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
           shouldResizeFromCenter: shouldResizeFromCenter(event),
           zoom: this.state.zoom.value,
           scene: this.scene,
@@ -41987,12 +42041,12 @@ var App = class _App extends React41.Component {
         event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
-      if (transformHandleType && croppingElement && isImageElement9(croppingElement)) {
+      if (transformHandleType && croppingElement && isImageElement10(croppingElement)) {
         const croppingAtStateStart = pointerDownState.originalElements.get(
           croppingElement.id
         );
         const image = isInitializedImageElement5(croppingElement) && this.imageCache.get(croppingElement.fileId)?.image;
-        if (croppingAtStateStart && isImageElement9(croppingAtStateStart) && image && !(image instanceof Promise)) {
+        if (croppingAtStateStart && isImageElement10(croppingAtStateStart) && image && !(image instanceof Promise)) {
           const [gridX, gridY] = getGridPoint4(
             pointerCoords.x,
             pointerCoords.y,
@@ -42106,7 +42160,7 @@ var App = class _App extends React41.Component {
         this.scene,
         shouldRotateWithDiscreteAngle4(event),
         shouldResizeFromCenter(event),
-        selectedElements.some((element) => isImageElement9(element)) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
+        selectedElements.some((element) => isImageElement10(element)) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
         resizeX,
         resizeY,
         pointerDownState.resize.center.x,
@@ -42142,17 +42196,17 @@ var App = class _App extends React41.Component {
         return [];
       }
       const selectedElements = this.scene.getSelectedElements(this.state);
-      if (selectedElements.length > 0 && selectedElements.every((element) => isImageElement9(element)) && (!hitElement || this.state.selectedElementIds[hitElement.id])) {
+      if (selectedElements.length > 0 && selectedElements.every((element) => isImageElement10(element)) && (!hitElement || this.state.selectedElementIds[hitElement.id])) {
         return [...getHostItems(selectedElements.map((element) => element.id))];
       }
-      if (hitElement && isImageElement9(hitElement)) {
+      if (hitElement && isImageElement10(hitElement)) {
         return [...getHostItems([hitElement.id])];
       }
       return [];
     });
     __publicField(this, "getImageActionContextMenuItems", (hitElement) => {
       const selectedElements = this.scene.getSelectedElements(this.state);
-      if (selectedElements.length > 0 && selectedElements.every((element) => isImageElement9(element)) && (!hitElement || this.state.selectedElementIds[hitElement.id])) {
+      if (selectedElements.length > 0 && selectedElements.every((element) => isImageElement10(element)) && (!hitElement || this.state.selectedElementIds[hitElement.id])) {
         return [actionArrangeElements, actionNormaliseElements];
       }
       return [];
@@ -42839,8 +42893,8 @@ var App = class _App extends React41.Component {
       );
       const startElement = startDragged2 ? hoveredElement : arrow.startBinding && elementsMap.get(arrow.startBinding.elementId);
       const endElement = endDragged2 ? hoveredElement : arrow.endBinding && elementsMap.get(arrow.endBinding.elementId);
-      const startBounds = startElement && getElementBounds4(startElement, elementsMap);
-      const endBounds = endElement && getElementBounds4(endElement, elementsMap);
+      const startBounds = startElement && getElementBounds5(startElement, elementsMap);
+      const endBounds = endElement && getElementBounds5(endElement, elementsMap);
       isOverlapping = !!(startBounds && endBounds && startElement.id !== endElement.id && doBoundsIntersect4(startBounds, endBounds));
     }
     const startDragged = this.state.selectedLinearElement?.selectedPointsIndices?.includes(0);
@@ -44927,7 +44981,7 @@ var App = class _App extends React41.Component {
           }
           if (this.state.croppingElementId) {
             const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
-            if (croppingElement && isImageElement9(croppingElement) && croppingElement.crop !== null && pointerDownState.hit.element === croppingElement) {
+            if (croppingElement && isImageElement10(croppingElement) && croppingElement.crop !== null && pointerDownState.hit.element === croppingElement) {
               const crop = croppingElement.crop;
               const image = isInitializedImageElement5(croppingElement) && this.imageCache.get(croppingElement.fileId)?.image;
               if (image && !(image instanceof Promise)) {