@myoc/excalidraw 0.19.508 → 0.19.509

package/dist/dev/index.js

@@ -63,13 +63,13 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-4FUVQKPQ.js";
+} from "./chunk-Y644LIRZ.js";
 import {
   define_import_meta_env_default
-} from "./chunk-TW3GG6X2.js";
+} from "./chunk-6GFAONMV.js";
 import {
   en_default
-} from "./chunk-55P7U5EB.js";
+} from "./chunk-XO7KL57K.js";
 import {
   percentages_default
 } from "./chunk-URPEKBQ3.js";
@@ -197,7 +197,8 @@ import {
   loadDesktopUIModePreference,
   setDesktopUIMode,
   isSelectionLikeTool,
-  oneOf
+  oneOf,
+  matchKey as matchKey3
 } from "@excalidraw/common";
 import {
   getObservedAppState,
@@ -398,7 +399,7 @@ var globImport_locales_json = __glob({
   "./locales/de-CH.json": () => import("./locales/de-CH-GCXOD4LK.js"),
   "./locales/de-DE.json": () => import("./locales/de-DE-CGDBECYD.js"),
   "./locales/el-GR.json": () => import("./locales/el-GR-G5QZC24A.js"),
-  "./locales/en.json": () => import("./locales/en-MHJYLCUG.js"),
+  "./locales/en.json": () => import("./locales/en-YKPA7MQG.js"),
   "./locales/es-ES.json": () => import("./locales/es-ES-UMEOH76W.js"),
   "./locales/eu-ES.json": () => import("./locales/eu-ES-IWRZXJC5.js"),
   "./locales/fa-IR.json": () => import("./locales/fa-IR-QOYVIIJA.js"),
@@ -9625,7 +9626,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-BLMJ34ZZ.js").then(
+        (blob2) => import("./data/image-BK4K75ZK.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -16753,7 +16754,10 @@ import { jsx as jsx75, jsxs as jsxs40 } from "react/jsx-runtime";
 var Modal = (props) => {
   const { closeOnClickOutside = true } = props;
   const modalRoot = useCreatePortalContainer({
-    className: "excalidraw-modal-container"
+    className: clsx32(
+      "excalidraw-modal-container",
+      props.portalContainerClassName
+    )
   });
   const animationsDisabledRef = useRef21(
     document.body.classList.contains("excalidraw-animations-disabled")
@@ -16871,6 +16875,7 @@ var Dialog = (props) => {
       maxWidth: getDialogSize(props.size),
       onCloseRequest: onClose,
       closeOnClickOutside: props.closeOnClickOutside,
+      portalContainerClassName: props.portalContainerClassName,
       children: /* @__PURE__ */ jsxs41(Island, { ref: setIslandNode, children: [
         props.title && /* @__PURE__ */ jsxs41("h2", { id: `${id}-dialog-title`, className: "Dialog__title", children: [
           /* @__PURE__ */ jsx76("span", { className: "Dialog__titleContent", children: props.title }),
@@ -30630,6 +30635,13 @@ function BasicHelpDialog() {
         caption: t("helpDialog.view"),
         children: [
           /* @__PURE__ */ jsx132(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS50.F] }),
+          /* @__PURE__ */ jsx132(
+            Shortcut,
+            {
+              label: t("helpDialog.dragToZoom"),
+              shortcuts: [`${KEYS50.Z}+${t("helpDialog.drag")}`]
+            }
+          ),
           /* @__PURE__ */ jsx132(
             Shortcut,
             {
@@ -30802,6 +30814,7 @@ var HelpDialog = ({ onClose }) => {
       title: t("helpDialog.title"),
       className: "HelpDialog",
       titleButton: showAllButton,
+      portalContainerClassName: "HelpDialog__modalContainer",
       children: isShowAll ? /* @__PURE__ */ jsxs71(Section3, { title: t("helpDialog.shortcuts"), children: [
         /* @__PURE__ */ jsxs71(
           ShortcutIsland2,
@@ -30945,6 +30958,13 @@ var HelpDialog = ({ onClose }) => {
                   shortcuts: [KEYS51.F]
                 }
               ),
+              /* @__PURE__ */ jsx133(
+                Shortcut2,
+                {
+                  label: t("helpDialog.dragToZoom"),
+                  shortcuts: [`${KEYS51.Z}+${t("helpDialog.drag")}`]
+                }
+              ),
               /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
@@ -32289,6 +32309,14 @@ var LayerUI = ({
                           penDetected: appState.penDetected
                         }
                       ),
+                      /* @__PURE__ */ jsx140(
+                        HandButton,
+                        {
+                          checked: isHandToolActive(appState),
+                          onChange: onHandToolToggle,
+                          title: t("toolBar.hand")
+                        }
+                      ),
                       /* @__PURE__ */ jsx140(
                         ShapesSwitcher,
                         {
@@ -34922,7 +34950,9 @@ var didTapTwice = false;
 var tappedTwiceTimer = 0;
 var firstTapPosition = null;
 var isHoldingSpace = false;
+var isHoldingZoomKey = false;
 var isPanning = false;
+var isZoomingByDragging = false;
 var isDraggingScrollBar = false;
 var currentScrollBars = { horizontal: null, vertical: null };
 var touchTimeout = 0;
@@ -34933,6 +34963,7 @@ var IS_PLAIN_PASTE = false;
 var IS_PLAIN_PASTE_TIMER = 0;
 var PLAIN_PASTE_TOAST_SHOWN = false;
 var lastPointerUp = null;
+var ZOOM_DRAG_CURSOR = "zoom-in";
 var gesture = {
   pointers: /* @__PURE__ */ new Map(),
   lastCenter: null,
@@ -35488,6 +35519,9 @@ var App = class _App extends React44.Component {
     // Lifecycle
     __publicField(this, "onBlur", withBatchedUpdates(() => {
       isHoldingSpace = false;
+      isHoldingZoomKey = false;
+      isZoomingByDragging = false;
+      this.restoreCursorAfterZoomKey();
       this.setState({
         isBindingEnabled: this.state.bindingPreference === "enabled"
       });
@@ -36511,6 +36545,12 @@ var App = class _App extends React44.Component {
         if (this.actionManager.handleKeyDown(event)) {
           return;
         }
+        if (!event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey && matchKey3(event, KEYS52.Z)) {
+          isHoldingZoomKey = true;
+          setCursor(this.interactiveCanvas, ZOOM_DRAG_CURSOR);
+          event.preventDefault();
+          return;
+        }
         const shouldPreventToolSwitching = this.props.viewModeEnabled === true;
         if (!shouldPreventToolSwitching && this.state.viewModeEnabled && event.key === KEYS52.ESCAPE) {
           this.setActiveTool({ type: "selection" });
@@ -36711,6 +36751,10 @@ var App = class _App extends React44.Component {
         }
         isHoldingSpace = false;
       }
+      if (matchKey3(event, KEYS52.Z)) {
+        isHoldingZoomKey = false;
+        this.restoreCursorAfterZoomKey();
+      }
       if (event.key === KEYS52.ALT) {
         maybeHandleArrowPointlikeDrag({ app: this, event });
       }
@@ -37535,7 +37579,7 @@ var App = class _App extends React44.Component {
       } else {
         gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;
       }
-      if (isHoldingSpace || isPanning || isDraggingScrollBar || isHandToolActive(this.state)) {
+      if (isHoldingSpace || isHoldingZoomKey || isPanning || isZoomingByDragging || isDraggingScrollBar || isHandToolActive(this.state)) {
         return;
       }
       const isPointerOverScrollBars = isOverScrollBars(
@@ -38069,11 +38113,11 @@ var App = class _App extends React44.Component {
           isTouchScreen: true
         });
       }
-      if (isPanning) {
+      if (isPanning || isZoomingByDragging) {
         return;
       }
       this.lastPointerDownEvent = event;
-      if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
+      if (this.handleCanvasZoomUsingZDrag(event) || this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
         return;
       }
       this.setState({
@@ -38363,6 +38407,64 @@ var App = class _App extends React44.Component {
       lastPointerUp?.();
       this.missingPointerEventCleanupEmitter.trigger(event).clear();
     });
+    __publicField(this, "handleCanvasZoomUsingZDrag", (event) => {
+      if (!(isHoldingZoomKey && gesture.pointers.size <= 1 && event.button === POINTER_BUTTON2.MAIN && event.pointerType === "mouse")) {
+        return false;
+      }
+      isZoomingByDragging = true;
+      this.focusContainer();
+      event.preventDefault();
+      const anchorClientX = event.clientX;
+      const anchorClientY = event.clientY;
+      const startClientX = event.clientX;
+      const startZoom = this.state.zoom.value;
+      const PIXELS_PER_ZOOM_DOUBLING = 200;
+      const onPointerMove = withBatchedUpdatesThrottled((event2) => {
+        const nextZoom = getNormalizedZoom(
+          startZoom * 2 ** ((event2.clientX - startClientX) / PIXELS_PER_ZOOM_DOUBLING)
+        );
+        this.translateCanvas((state) => ({
+          ...getStateForZoom(
+            {
+              viewportX: anchorClientX,
+              viewportY: anchorClientY,
+              nextZoom
+            },
+            state
+          ),
+          shouldCacheIgnoreZoom: true
+        }));
+        this.resetShouldCacheIgnoreZoomDebounced();
+      });
+      const teardown = withBatchedUpdates(
+        lastPointerUp = () => {
+          lastPointerUp = null;
+          isZoomingByDragging = false;
+          if (!isHoldingZoomKey) {
+            this.restoreCursorAfterZoomKey();
+          }
+          window.removeEventListener(EVENT13.POINTER_MOVE, onPointerMove);
+          window.removeEventListener(EVENT13.POINTER_UP, teardown);
+          window.removeEventListener(EVENT13.BLUR, teardown);
+          onPointerMove.flush();
+        }
+      );
+      window.addEventListener(EVENT13.BLUR, teardown);
+      window.addEventListener(EVENT13.POINTER_MOVE, onPointerMove, {
+        passive: true
+      });
+      window.addEventListener(EVENT13.POINTER_UP, teardown);
+      return true;
+    });
+    __publicField(this, "restoreCursorAfterZoomKey", () => {
+      if (this.state.viewModeEnabled && this.state.activeTool.type !== "laser") {
+        setCursor(this.interactiveCanvas, CURSOR_TYPE4.GRAB);
+      } else if (isSelectionLikeTool(this.state.activeTool.type)) {
+        resetCursor(this.interactiveCanvas);
+      } else {
+        setCursorForShape(this.interactiveCanvas, this.state);
+      }
+    });
     // Returns whether the event is a panning
     __publicField(this, "handleCanvasPanUsingWheelOrSpaceDrag", (event) => {
       if (!(gesture.pointers.size <= 1 && (event.button === POINTER_BUTTON2.WHEEL || event.button === POINTER_BUTTON2.MAIN && isHoldingSpace || isHandToolActive(this.state) || this.state.viewModeEnabled && this.state.activeTool.type !== "laser"))) {