@myoc/excalidraw 0.19.528 → 0.19.530

package/dist/dev/index.js

@@ -62,10 +62,10 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-NY5S5VQK.js";
+} from "./chunk-ROEGCKS3.js";
 import {
   define_import_meta_env_default
-} from "./chunk-6FFT5HLH.js";
+} from "./chunk-XSA46KXZ.js";
 import {
   en_default
 } from "./chunk-SKCAT7JG.js";
@@ -10936,7 +10936,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-V7WKCORB.js").then(
+        (blob2) => import("./data/image-AYT4E6ZF.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -13009,6 +13009,7 @@ var actionSmartZoom = register({
       type: "button",
       icon: arrowsToEyeIcon,
       "aria-label": t("labels.smartZoom"),
+      title: `${t("labels.smartZoom")} - ${KEYS26.F.toLocaleUpperCase()}`,
       onClick: () => updateData(null),
       size: data?.size || "medium",
       "data-testid": "button-smart-zoom",
@@ -16832,12 +16833,13 @@ var actionToggleViewMode = register({
     if (appState.viewModeOnly || appProps.viewModeOnly) {
       return null;
     }
+    const label = appState.viewModeEnabled ? "Edit mode" : t("labels.viewMode");
     return /* @__PURE__ */ jsx58(
       IconButton,
       {
         type: "button",
-        icon: eyeIcon,
-        "aria-label": t("labels.viewMode"),
+        icon: appState.viewModeEnabled ? pencilIcon : eyeIcon,
+        "aria-label": label,
         onClick: () => updateData(null),
         size: data?.size || "medium",
         "data-testid": "button-view-mode",
@@ -25567,6 +25569,7 @@ 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),
     // 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
@@ -25597,7 +25600,8 @@ var LayersFieldset = ({
 ] });
 var AlignFieldset = ({
   renderAction,
-  showDistribute
+  showDistribute,
+  showImageLayout
 }) => {
   const isRTL3 = document.documentElement.getAttribute("dir") === "rtl";
   return /* @__PURE__ */ jsxs33("fieldset", { children: [
@@ -25630,7 +25634,12 @@ var AlignFieldset = ({
             showDistribute && renderAction("distributeVertically")
           ]
         }
-      )
+      ),
+      showImageLayout && /* @__PURE__ */ jsxs33(Fragment9, { children: [
+        /* @__PURE__ */ jsx66("div", { style: { flexBasis: "100%", height: 0 } }),
+        renderAction("arrangeElements"),
+        renderAction("normaliseElements")
+      ] })
     ] })
   ] });
 };
@@ -25677,7 +25686,8 @@ var SelectedShapeActions = ({
       AlignFieldset,
       {
         renderAction,
-        showDistribute: predicates.distribute
+        showDistribute: predicates.distribute,
+        showImageLayout: predicates.imageLayout
       }
     ),
     predicates.showExtraActions && /* @__PURE__ */ jsxs33("fieldset", { children: [
@@ -25689,7 +25699,8 @@ var SelectedShapeActions = ({
         renderAction("ungroup"),
         predicates.link && renderAction("hyperlink"),
         predicates.cropEditor && renderAction("cropEditor"),
-        predicates.lineEditor && renderAction("toggleLinearEditor")
+        predicates.lineEditor && renderAction("toggleLinearEditor"),
+        renderAction("smartZoom")
       ] })
     ] })
   ] });
@@ -25975,7 +25986,8 @@ var CombinedExtraActions = ({
                 AlignFieldset,
                 {
                   renderAction,
-                  showDistribute: predicates.distribute
+                  showDistribute: predicates.distribute,
+                  showImageLayout: predicates.imageLayout
                 }
               ),
               /* @__PURE__ */ jsxs33("fieldset", { children: [
@@ -25985,6 +25997,7 @@ var CombinedExtraActions = ({
                   renderAction("ungroup"),
                   predicates.linkSingleOnly && renderAction("hyperlink"),
                   predicates.cropEditor && renderAction("cropEditor"),
+                  renderAction("smartZoom"),
                   showDuplicate && renderAction("duplicateSelection"),
                   showDelete && renderAction("deleteSelectedElements")
                 ] })
@@ -26238,17 +26251,6 @@ var ExitZenModeButton = ({
     children: t("buttons.exitZenMode")
   }
 );
-var ExitViewModeButton = ({
-  actionManager
-}) => /* @__PURE__ */ jsx66(
-  "button",
-  {
-    type: "button",
-    className: "disable-view-mode",
-    onClick: () => actionManager.executeAction(actionToggleViewMode),
-    children: pencilIcon
-  }
-);
 
 // components/LoadingMessage.tsx
 import clsx29 from "clsx";
@@ -27038,22 +27040,19 @@ var MobileMenu = ({
     if (appState.openDialog?.name === "elementLinkSelector") {
       return null;
     }
-    const topRightUI = /* @__PURE__ */ jsxs39("div", { className: "excalidraw-ui-top-right", children: [
-      renderTopRightUI?.(true, appState) ?? (!appState.viewModeEnabled && /* @__PURE__ */ jsxs39(Fragment11, { children: [
-        defaultUIEnabled && /* @__PURE__ */ jsx80(
-          PenModeButton,
-          {
-            checked: appState.penMode,
-            onChange: () => onPenModeToggle(null),
-            title: t("toolBar.penMode"),
-            isMobile: true,
-            penDetected: appState.penDetected
-          }
-        ),
-        /* @__PURE__ */ jsx80(DefaultSidebarTriggerTunnel.Out, {})
-      ] })),
-      defaultUIEnabled && appState.viewModeEnabled && app.isInteractionEnabled() && /* @__PURE__ */ jsx80(ExitViewModeButton, { actionManager })
-    ] });
+    const topRightUI = /* @__PURE__ */ jsx80("div", { className: "excalidraw-ui-top-right", children: renderTopRightUI?.(true, appState) ?? (!appState.viewModeEnabled && /* @__PURE__ */ jsxs39(Fragment11, { children: [
+      defaultUIEnabled && /* @__PURE__ */ jsx80(
+        PenModeButton,
+        {
+          checked: appState.penMode,
+          onChange: () => onPenModeToggle(null),
+          title: t("toolBar.penMode"),
+          isMobile: true,
+          penDetected: appState.penDetected
+        }
+      ),
+      /* @__PURE__ */ jsx80(DefaultSidebarTriggerTunnel.Out, {})
+    ] })) });
     const topLeftUI = /* @__PURE__ */ jsxs39("div", { className: "excalidraw-ui-top-left", children: [
       renderTopLeftUI?.(true, appState),
       /* @__PURE__ */ jsx80(MainMenuTunnel.Out, {})
@@ -27116,7 +27115,9 @@ var MobileMenu = ({
       {
         className: "App-bottom-bar",
         style: {
-          marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN
+          marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN,
+          left: 14,
+          transform: "none"
         },
         "data-viewport-ui": "bottom",
         children: [
@@ -27137,7 +27138,14 @@ var MobileMenu = ({
               }
             )
           ] }),
-          !appState.viewModeEnabled && /* @__PURE__ */ jsx80(Island, { className: "App-toolbar", children: appState.openDialog?.name !== "elementLinkSelector" && renderToolbar() })
+          !appState.viewModeEnabled && /* @__PURE__ */ jsx80(
+            Island,
+            {
+              className: "App-toolbar",
+              style: { justifyContent: "flex-start" },
+              children: appState.openDialog?.name !== "elementLinkSelector" && renderToolbar()
+            }
+          )
         ]
       }
     ),
@@ -27816,7 +27824,13 @@ var Footer = ({
               }
             ),
             children: /* @__PURE__ */ jsx87(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs45(Section, { heading: "canvasActions", children: [
-              !appState.viewModeOnly && /* @__PURE__ */ jsx87(Tooltip, { label: t("labels.viewMode"), children: /* @__PURE__ */ jsx87("div", { className: clsx39("view-mode-button"), children: actionManager.renderAction("viewMode") }) }),
+              !appState.viewModeOnly && /* @__PURE__ */ jsx87(
+                Tooltip,
+                {
+                  label: appState.viewModeEnabled ? "Edit mode" : t("labels.viewMode"),
+                  children: /* @__PURE__ */ jsx87("div", { className: clsx39("view-mode-button"), children: actionManager.renderAction("viewMode") })
+                }
+              ),
               /* @__PURE__ */ jsx87(Tooltip, { label: t("buttons.smartZoom"), children: /* @__PURE__ */ jsx87("div", { className: clsx39("smart-zoom-button"), children: actionManager.renderAction("smartZoom") }) }),
               zoomUIEnabled && app.isNavigationEnabled() && /* @__PURE__ */ jsx87(ZoomActions, { renderAction: actionManager.renderAction }),
               defaultUIEnabled && !appState.viewModeEnabled && /* @__PURE__ */ jsx87(
@@ -33418,10 +33432,14 @@ var DefaultSidebar = Object.assign(
       children,
       className,
       docked,
+      onDock,
       ...rest
     }) => {
       const appState = useUIAppState();
+      const setAppState = useExcalidrawSetAppState();
       const isSearchSidebar = appState.openSidebar?.tab === CANVAS_SEARCH_TAB2;
+      const isDocked = isSearchSidebar ? false : docked ?? appState.defaultSidebarDockedPreference;
+      const canDock = !isSearchSidebar && docked == null && onDock !== false;
       return /* @__PURE__ */ createElement2(
         Sidebar,
         {
@@ -33433,8 +33451,13 @@ var DefaultSidebar = Object.assign(
             { "default-sidebar--search-only": isSearchSidebar },
             className
           ),
-          docked: isSearchSidebar ? false : docked ?? appState.defaultSidebarDockedPreference,
-          onDock: void 0
+          docked: isDocked,
+          onDock: canDock ? (nextDocked) => {
+            setAppState({
+              defaultSidebarDockedPreference: nextDocked
+            });
+            onDock?.(nextDocked);
+          } : void 0
         },
         /* @__PURE__ */ jsxs64(Sidebar.Tabs, { children: [
           !isSearchSidebar && /* @__PURE__ */ jsx124(Sidebar.Header, {}),
@@ -34302,7 +34325,8 @@ var LayerUI = ({
   const renderCanvasActions = () => /* @__PURE__ */ jsxs67("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsxs67("div", { className: "excalidraw-ui-top-left", children: [
       renderTopLeftUI?.(false, appState),
-      /* @__PURE__ */ jsx131(tunnels.MainMenuTunnel.Out, {})
+      /* @__PURE__ */ jsx131(tunnels.MainMenuTunnel.Out, {}),
+      /* @__PURE__ */ jsx131(tunnels.DefaultSidebarTriggerTunnel.Out, {})
     ] }),
     renderWelcomeScreen && /* @__PURE__ */ jsx131(tunnels.WelcomeScreenMenuHintTunnel.Out, {})
   ] });
@@ -34642,9 +34666,9 @@ var LayerUI = ({
             ] })
           ]
         }
-      ),
-      renderSidebars()
-    ] })
+      )
+    ] }),
+    renderSidebars()
   ] });
   return /* @__PURE__ */ jsx131(UIAppStateContext.Provider, { value: appState, children: /* @__PURE__ */ jsx131(TunnelsJotaiProvider, { children: /* @__PURE__ */ jsx131(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) });
 };
@@ -36644,6 +36668,20 @@ var App = class _App extends React40.Component {
         const dataTransferList = await parseDataTransferEvent(event);
         const filesList = dataTransferList.getFiles();
         const data = await parseClipboard(dataTransferList, isPlainPaste);
+        if (this.state.viewModeEnabled) {
+          if (!this.containsImagePaste(data, filesList, isPlainPaste)) {
+            return;
+          }
+          if (!this.shouldInsertImageInViewMode({
+            source: "paste",
+            files: filesList.map((file2) => file2.file),
+            data,
+            event
+          })) {
+            event?.preventDefault();
+            return;
+          }
+        }
         if (this.props.onPaste) {
           try {
             if (await this.props.onPaste(data, event) === false) {
@@ -40373,9 +40411,8 @@ var App = class _App extends React40.Component {
       if (!isSupportedImageFile(imageFile)) {
         throw new Error(t("errors.unsupportedFileType"));
       }
-      const mimeType = imageFile.type;
       this.cursor.set("wait");
-      if (mimeType === MIME_TYPES9.svg) {
+      if (imageFile.type === MIME_TYPES9.svg) {
         try {
           imageFile = SVGStringToFile(
             normalizeSVG(await imageFile.text()),
@@ -40385,7 +40422,18 @@ var App = class _App extends React40.Component {
           console.warn(error);
           throw new Error(t("errors.svgImageInsertError"));
         }
+      } else {
+        const { maxWidthOrHeight } = this.props.imageOptions;
+        try {
+          imageFile = await (this.props.compressImageFile ?? resizeImageFile)(
+            imageFile,
+            { maxWidthOrHeight }
+          );
+        } catch (error) {
+          console.error("Error trying to resize image file on insertion", error);
+        }
       }
+      const mimeType = imageFile.type;
       const fileId = await (this.props.generateIdForFile?.(
         imageFile
       ) || generateIdFromFile(imageFile));
@@ -40397,15 +40445,7 @@ var App = class _App extends React40.Component {
       }
       const existingFileData = this.files[fileId];
       if (!existingFileData?.dataURL) {
-        const { maxWidthOrHeight, maxFileSizeBytes } = this.props.imageOptions;
-        try {
-          imageFile = await (this.props.compressImageFile ?? resizeImageFile)(
-            imageFile,
-            { maxWidthOrHeight }
-          );
-        } catch (error) {
-          console.error("Error trying to resize image file on insertion", error);
-        }
+        const { maxFileSizeBytes } = this.props.imageOptions;
         if (imageFile.size > maxFileSizeBytes) {
           throw new Error(
             t("errors.fileTooBig", {
@@ -40709,6 +40749,29 @@ var App = class _App extends React40.Component {
       const dragDataSnapshot = captureDragEventData(event);
       const dataTransferList = await parseDataTransferEvent(event);
       const fileItems = dataTransferList.getFiles();
+      const imageFiles = fileItems.map((data) => data.file).filter((file2) => isSupportedImageFile(file2));
+      if (this.state.viewModeEnabled) {
+        if (imageFiles.length === 0 || !this.isToolSupported("image")) {
+          return;
+        }
+        if (!this.shouldInsertImageInViewMode({
+          source: "drop",
+          files: imageFiles,
+          event
+        })) {
+          return;
+        }
+        return this.insertImages(
+          imageFiles,
+          sceneX,
+          sceneY,
+          parseDragImageMetadata(
+            dataTransferList,
+            imageFiles.length,
+            dragDataSnapshot
+          )
+        );
+      }
       if (fileItems.length === 1) {
         const { file: file2, fileHandle } = fileItems[0];
         if (file2 && (file2.type === MIME_TYPES9.png || file2.type === MIME_TYPES9.svg)) {
@@ -40736,7 +40799,6 @@ var App = class _App extends React40.Component {
           }
         }
       }
-      const imageFiles = fileItems.map((data) => data.file).filter((file2) => isSupportedImageFile(file2));
       if (imageFiles.length > 0 && this.isToolSupported("image")) {
         return this.insertImages(
           imageFiles,
@@ -41143,6 +41205,13 @@ var App = class _App extends React40.Component {
       }
       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])) {
+        return [actionArrangeElements, actionNormaliseElements];
+      }
+      return [];
+    });
     __publicField(this, "getElementLinkContextMenuItems", (hitElement) => {
       if (!hitElement?.link) {
         return [];
@@ -41172,6 +41241,7 @@ var App = class _App extends React40.Component {
     });
     __publicField(this, "getContextMenuItems", (type, hitElement) => {
       const imageContextMenuItems = this.getImageContextMenuItems(hitElement);
+      const imageActionContextMenuItems = this.getImageActionContextMenuItems(hitElement);
       const elementLinkContextMenuItems = this.getElementLinkContextMenuItems(hitElement);
       if (type === "canvas") {
         if (this.state.viewModeEnabled) {
@@ -41222,6 +41292,8 @@ var App = class _App extends React40.Component {
         actionPaste,
         imageContextMenuItems.length > 0 && CONTEXT_MENU_SEPARATOR,
         ...imageContextMenuItems,
+        imageActionContextMenuItems.length > 0 && CONTEXT_MENU_SEPARATOR,
+        ...imageActionContextMenuItems,
         CONTEXT_MENU_SEPARATOR,
         actionSelectAllElementsInFrame,
         actionRemoveAllElementsFromFrame,
@@ -42644,6 +42716,21 @@ var App = class _App extends React40.Component {
         EVENT11.GESTURE_END,
         this.onGestureEnd,
         false
+      ),
+      addEventListener2(document, EVENT11.PASTE, this.pasteFromClipboard, {
+        passive: false
+      }),
+      addEventListener2(
+        this.excalidrawContainerRef.current,
+        EVENT11.DRAG_OVER,
+        this.disableEvent,
+        false
+      ),
+      addEventListener2(
+        this.excalidrawContainerRef.current,
+        EVENT11.DROP,
+        this.disableEvent,
+        false
       )
     );
     if (this.state.viewModeEnabled) {
@@ -42656,9 +42743,6 @@ var App = class _App extends React40.Component {
         this.onFullscreenChange,
         { passive: false }
       ),
-      addEventListener2(document, EVENT11.PASTE, this.pasteFromClipboard, {
-        passive: false
-      }),
       addEventListener2(document, EVENT11.CUT, this.onCut, { passive: false }),
       addEventListener2(window, EVENT11.RESIZE, this.onResize, false),
       addEventListener2(window, EVENT11.UNLOAD, this.onUnload, false),
@@ -42668,18 +42752,6 @@ var App = class _App extends React40.Component {
         EVENT11.WHEEL,
         this.handleWheel,
         { passive: false }
-      ),
-      addEventListener2(
-        this.excalidrawContainerRef.current,
-        EVENT11.DRAG_OVER,
-        this.disableEvent,
-        false
-      ),
-      addEventListener2(
-        this.excalidrawContainerRef.current,
-        EVENT11.DROP,
-        this.disableEvent,
-        false
       )
     );
     if (this.props.detectScroll) {
@@ -42902,6 +42974,42 @@ var App = class _App extends React40.Component {
     }
     this.addTextFromPaste(data.text, isPlainPaste);
   }
+  containsImagePaste(data, dataTransferFiles, isPlainPaste) {
+    if (dataTransferFiles.some((data2) => isSupportedImageFile(data2.file))) {
+      return true;
+    }
+    if (!isPlainPaste && data.mixedContent?.some((node) => node.type === "imageUrl")) {
+      return true;
+    }
+    if (isPlainPaste || !data.text) {
+      return false;
+    }
+    const trimmedText = data.text.trim();
+    return trimmedText.startsWith("<svg") && trimmedText.endsWith("</svg>");
+  }
+  shouldInsertImageInViewMode({
+    source,
+    files,
+    data,
+    event
+  }) {
+    if (!this.state.viewModeEnabled) {
+      return true;
+    }
+    if (this.state.viewModeOnly || this.props.viewModeImageInsertBehavior === "reject") {
+      this.props.onViewModeImageInsertRejected?.({
+        source,
+        files,
+        data,
+        event
+      });
+      return false;
+    }
+    flushSync2(() => {
+      this.setState({ viewModeEnabled: false });
+    });
+    return true;
+  }
   // TODO rewrite this to paste both text & images at the same time if
   // pasted data contains both
   async addElementsFromMixedContentPaste(mixedContent, {
@@ -45619,6 +45727,8 @@ var ExcalidrawBase = (props) => {
     editorPreferences,
     onEditorPreferencesChange,
     onPaste,
+    viewModeImageInsertBehavior,
+    onViewModeImageInsertRejected,
     detectScroll = true,
     handleKeyboardGlobally = false,
     autoFocus = false,
@@ -45732,6 +45842,8 @@ var ExcalidrawBase = (props) => {
       onEditorPreferencesChange,
       UIOptions,
       onPaste,
+      viewModeImageInsertBehavior,
+      onViewModeImageInsertRejected,
       detectScroll,
       handleKeyboardGlobally,
       autoFocus,