@haoxin-web/excalidraw 1.0.0 → 1.0.1

package/dist/dev/index.js

@@ -69,10 +69,10 @@ import {
   serializeLibraryAsJSON,
   strokeEllipseWithRotation,
   strokeRectWithRotation
-} from "./chunk-PTYT4VPM.js";
+} from "./chunk-G6EN3STO.js";
 import {
   define_import_meta_env_default
-} from "./chunk-VC7V2GEZ.js";
+} from "./chunk-R3GBEHWA.js";
 import {
   en_default
 } from "./chunk-ZSSURRA2.js";
@@ -7507,6 +7507,9 @@ var actionZoomIn = register({
   viewMode: true,
   icon: ZoomInIcon,
   trackEvent: { category: "canvas" },
+  predicate: (elements, appState, appProps) => {
+    return appProps.showZoomActions !== false;
+  },
   perform: (_elements, appState, _, app) => {
     return {
       appState: {
@@ -7538,7 +7541,9 @@ var actionZoomIn = register({
       }
     }
   ),
-  keyTest: (event) => (event.code === CODES2.EQUAL || event.code === CODES2.NUM_ADD) && (event[KEYS12.CTRL_OR_CMD] || event.shiftKey)
+  keyTest: (event, appState, elements, app) => {
+    return app.props.showZoomActions !== false && (event.code === CODES2.EQUAL || event.code === CODES2.NUM_ADD) && (event[KEYS12.CTRL_OR_CMD] || event.shiftKey);
+  }
 });
 var actionZoomOut = register({
   name: "zoomOut",
@@ -7546,6 +7551,9 @@ var actionZoomOut = register({
   icon: ZoomOutIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
+  predicate: (elements, appState, appProps) => {
+    return appProps.showZoomActions !== false;
+  },
   perform: (_elements, appState, _, app) => {
     return {
       appState: {
@@ -7577,7 +7585,9 @@ var actionZoomOut = register({
       }
     }
   ),
-  keyTest: (event) => (event.code === CODES2.MINUS || event.code === CODES2.NUM_SUBTRACT) && (event[KEYS12.CTRL_OR_CMD] || event.shiftKey)
+  keyTest: (event, appState, elements, app) => {
+    return app.props.showZoomActions !== false && (event.code === CODES2.MINUS || event.code === CODES2.NUM_SUBTRACT) && (event[KEYS12.CTRL_OR_CMD] || event.shiftKey);
+  }
 });
 var actionResetZoom = register({
   name: "resetZoom",
@@ -7585,6 +7595,9 @@ var actionResetZoom = register({
   icon: ZoomResetIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
+  predicate: (elements, appState, appProps) => {
+    return appProps.showZoomActions !== false;
+  },
   perform: (_elements, appState, _, app) => {
     return {
       appState: {
@@ -7618,7 +7631,9 @@ var actionResetZoom = register({
       ]
     }
   ) }),
-  keyTest: (event) => (event.code === CODES2.ZERO || event.code === CODES2.NUM_ZERO) && (event[KEYS12.CTRL_OR_CMD] || event.shiftKey)
+  keyTest: (event, appState, elements, app) => {
+    return app.props.showZoomActions !== false && (event.code === CODES2.ZERO || event.code === CODES2.NUM_ZERO) && (event[KEYS12.CTRL_OR_CMD] || event.shiftKey);
+  }
 });
 var zoomValueToFitBoundsOnViewport = (bounds, viewportDimensions, viewportZoomFactor = 1) => {
   const [x1, y1, x2, y2] = bounds;
@@ -7714,6 +7729,9 @@ var actionZoomToFitSelectionInViewport = register({
   label: "labels.zoomToFitViewport",
   icon: zoomAreaIcon,
   trackEvent: { category: "canvas" },
+  predicate: (elements, appState, appProps) => {
+    return appProps.showZoomActions !== false;
+  },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
     return zoomToFit({
@@ -7728,13 +7746,18 @@ var actionZoomToFitSelectionInViewport = register({
   },
   // NOTE shift-2 should have been assigned actionZoomToFitSelection.
   // TBD on how proceed
-  keyTest: (event) => event.code === CODES2.TWO && event.shiftKey && !event.altKey && !event[KEYS12.CTRL_OR_CMD]
+  keyTest: (event, appState, elements, app) => {
+    return app.props.showZoomActions !== false && event.code === CODES2.TWO && event.shiftKey && !event.altKey && !event[KEYS12.CTRL_OR_CMD];
+  }
 });
 var actionZoomToFitSelection = register({
   name: "zoomToFitSelection",
   label: "helpDialog.zoomToSelection",
   icon: zoomAreaIcon,
   trackEvent: { category: "canvas" },
+  predicate: (elements, appState, appProps) => {
+    return appProps.showZoomActions !== false;
+  },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
     return zoomToFit({
@@ -7748,7 +7771,9 @@ var actionZoomToFitSelection = register({
     });
   },
   // NOTE this action should use shift-2 per figma, alas
-  keyTest: (event) => event.code === CODES2.THREE && event.shiftKey && !event.altKey && !event[KEYS12.CTRL_OR_CMD]
+  keyTest: (event, appState, elements, app) => {
+    return app.props.showZoomActions !== false && event.code === CODES2.THREE && event.shiftKey && !event.altKey && !event[KEYS12.CTRL_OR_CMD];
+  }
 });
 var actionZoomToFit = register({
   name: "zoomToFit",
@@ -7756,6 +7781,9 @@ var actionZoomToFit = register({
   icon: zoomAreaIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
+  predicate: (elements, appState, appProps) => {
+    return appProps.showZoomActions !== false;
+  },
   perform: (elements, appState, _, app) => zoomToFit({
     targetElements: elements,
     appState: {
@@ -7765,7 +7793,9 @@ var actionZoomToFit = register({
     fitToViewport: false,
     canvasOffsets: app.getEditorUIOffsets()
   }),
-  keyTest: (event) => event.code === CODES2.ONE && event.shiftKey && !event.altKey && !event[KEYS12.CTRL_OR_CMD]
+  keyTest: (event, appState, elements, app) => {
+    return app.props.showZoomActions !== false && event.code === CODES2.ONE && event.shiftKey && !event.altKey && !event[KEYS12.CTRL_OR_CMD];
+  }
 });
 var actionToggleTheme = register({
   name: "toggleTheme",
@@ -7861,6 +7891,9 @@ var actionToggleHandTool = register({
   trackEvent: { category: "toolbar" },
   icon: handIcon,
   viewMode: false,
+  predicate: (elements, appState, appProps) => {
+    return appProps.showPanActions !== false;
+  },
   perform: (elements, appState, _, app) => {
     let activeTool;
     if (isHandToolActive(appState)) {
@@ -7888,7 +7921,9 @@ var actionToggleHandTool = register({
       captureUpdate: CaptureUpdateAction6.IMMEDIATELY
     };
   },
-  keyTest: (event) => !event.altKey && !event[KEYS12.CTRL_OR_CMD] && event.key === KEYS12.H
+  keyTest: (event, appState, elements, app) => {
+    return app.props.showPanActions !== false && !event.altKey && !event[KEYS12.CTRL_OR_CMD] && event.key === KEYS12.H;
+  }
 });
 
 // actions/actionEmbeddable.ts
@@ -9145,7 +9180,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-CVHJEERS.js").then(
+        (blob2) => import("./data/image-QP66FJQD.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -16265,19 +16300,27 @@ var ShapesSwitcher = ({
               }
               if (value === "freedraw") {
                 window.dispatchEvent(
-                  new CustomEvent("leftflyout:toggle", { detail: { group: "freedraw" } })
+                  new CustomEvent("leftflyout:toggle", {
+                    detail: { group: "freedraw" }
+                  })
                 );
               } else if (value === "line") {
                 window.dispatchEvent(
-                  new CustomEvent("leftflyout:toggle", { detail: { group: "line" } })
+                  new CustomEvent("leftflyout:toggle", {
+                    detail: { group: "line" }
+                  })
                 );
               } else if (value === "rectangle") {
                 window.dispatchEvent(
-                  new CustomEvent("leftflyout:toggle", { detail: { group: "shapes" } })
+                  new CustomEvent("leftflyout:toggle", {
+                    detail: { group: "shapes" }
+                  })
                 );
               } else if (value === "text") {
                 window.dispatchEvent(
-                  new CustomEvent("leftflyout:toggle", { detail: { group: "text" } })
+                  new CustomEvent("leftflyout:toggle", {
+                    detail: { group: "text" }
+                  })
                 );
               }
               if (value === "selection") {
@@ -16345,23 +16388,18 @@ var ShapesSwitcher = ({
 };
 var ZoomActions = ({
   renderAction,
-  zoom
-}) => /* @__PURE__ */ jsx71(Stack_default.Col, { gap: 1, className: CLASSES2.ZOOM_ACTIONS, children: /* @__PURE__ */ jsxs39(Stack_default.Row, { align: "center", children: [
-  renderAction("zoomOut"),
-  renderAction("resetZoom"),
-  renderAction("zoomIn")
-] }) });
-var UndoRedoActions = ({
-  renderAction,
-  className
-}) => /* @__PURE__ */ jsxs39("div", { className: `undo-redo-buttons ${className}`, style: { display: "none" }, children: [
-  /* @__PURE__ */ jsx71("div", { className: "undo-button-container", children: /* @__PURE__ */ jsx71(Tooltip, { label: t("buttons.undo"), children: renderAction("undo") }) }),
-  /* @__PURE__ */ jsx71("div", { className: "redo-button-container", children: /* @__PURE__ */ jsxs39(Tooltip, { label: t("buttons.redo"), children: [
-    " ",
-    renderAction("redo")
-  ] }) }),
-  /* @__PURE__ */ jsx71("div", { className: "clear-button-container", children: /* @__PURE__ */ jsx71(Tooltip, { label: t("labels.clearCanvas"), children: renderAction("clearCanvas") }) })
-] });
+  zoom,
+  visible = true
+}) => {
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx71(Stack_default.Col, { gap: 1, className: CLASSES2.ZOOM_ACTIONS, children: /* @__PURE__ */ jsxs39(Stack_default.Row, { align: "center", children: [
+    renderAction("zoomOut"),
+    renderAction("resetZoom"),
+    renderAction("zoomIn")
+  ] }) });
+};
 var ExitZenModeAction = ({
   actionManager,
   showExitZenModeBtn
@@ -19462,12 +19500,12 @@ var ActionManager = class {
      */
     __publicField(this, "renderAction", (name, data) => {
       const canvasActions = this.app.props.UIOptions.canvasActions;
-      if (this.actions[name] && "PanelComponent" in this.actions[name] && (name in canvasActions ? canvasActions[name] : true)) {
-        const action = this.actions[name];
+      const elements = this.getElementsIncludingDeleted();
+      const appState = this.getAppState();
+      const action = this.actions[name];
+      if (action && "PanelComponent" in action && (name in canvasActions ? canvasActions[name] : true) && (!action.predicate || action.predicate(elements, appState, this.app.props, this.app))) {
         const PanelComponent = action.PanelComponent;
         PanelComponent.displayName = "PanelComponent";
-        const elements = this.getElementsIncludingDeleted();
-        const appState = this.getAppState();
         const updateData = (formState) => {
           trackAction(action, "ui", appState, elements, this.app, formState);
           this.updater(
@@ -19520,13 +19558,11 @@ var ActionManager = class {
   }
   handleKeyDown(event) {
     const canvasActions = this.app.props.UIOptions.canvasActions;
+    const elements = this.getElementsIncludingDeleted();
+    const appState = this.getAppState();
+    const appProps = this.app.props;
     const data = Object.values(this.actions).sort((a, b) => (b.keyPriority || 0) - (a.keyPriority || 0)).filter(
-      (action2) => (action2.name in canvasActions ? canvasActions[action2.name] : true) && action2.keyTest && action2.keyTest(
-        event,
-        this.getAppState(),
-        this.getElementsIncludingDeleted(),
-        this.app
-      )
+      (action2) => (action2.name in canvasActions ? canvasActions[action2.name] : true) && action2.keyTest && (!action2.predicate || action2.predicate(elements, appState, appProps, this.app)) && action2.keyTest(event, appState, elements, this.app)
     );
     if (data.length !== 1) {
       if (data.length > 1) {
@@ -19535,11 +19571,9 @@ var ActionManager = class {
       return false;
     }
     const action = data[0];
-    if (this.getAppState().viewModeEnabled && action.viewMode !== true) {
+    if (appState.viewModeEnabled && action.viewMode !== true) {
       return false;
     }
-    const elements = this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
     const value = null;
     trackAction(action, "keyboard", appState, elements, this.app, null);
     event.preventDefault();
@@ -22797,10 +22831,7 @@ var textWysiwyg = ({
       const strike = styleFromElement.strikethrough ?? app.state.currentTextStrikethrough ? true : false;
       editable.style.fontWeight = bold ? "700" : "400";
       editable.style.fontStyle = italic ? "italic" : "normal";
-      editable.style.textDecoration = [
-        underline ? "underline" : "",
-        strike ? "line-through" : ""
-      ].filter(Boolean).join(" ") || "none";
+      editable.style.textDecoration = [underline ? "underline" : "", strike ? "line-through" : ""].filter(Boolean).join(" ") || "none";
       editable.scrollTop = 0;
       if (isTestEnv5()) {
         editable.style.fontFamily = getFontFamilyString3(updatedTextElement);
@@ -22888,15 +22919,30 @@ var textWysiwyg = ({
     };
   }
   editable.onkeydown = (event) => {
-    if (!event.shiftKey && actionZoomIn.keyTest(event)) {
+    if (!event.shiftKey && actionZoomIn.keyTest(
+      event,
+      app.state,
+      Object.values(app.scene.getNonDeletedElementsMap()),
+      app
+    )) {
       event.preventDefault();
       app.actionManager.executeAction(actionZoomIn);
       updateWysiwygStyle();
-    } else if (!event.shiftKey && actionZoomOut.keyTest(event)) {
+    } else if (!event.shiftKey && actionZoomOut.keyTest(
+      event,
+      app.state,
+      Object.values(app.scene.getNonDeletedElementsMap()),
+      app
+    )) {
       event.preventDefault();
       app.actionManager.executeAction(actionZoomOut);
       updateWysiwygStyle();
-    } else if (!event.shiftKey && actionResetZoom.keyTest(event)) {
+    } else if (!event.shiftKey && actionResetZoom.keyTest(
+      event,
+      app.state,
+      Object.values(app.scene.getNonDeletedElementsMap()),
+      app
+    )) {
       event.preventDefault();
       app.actionManager.executeAction(actionResetZoom);
       updateWysiwygStyle();
@@ -23873,7 +23919,14 @@ import { ShapeCache as ShapeCache3 } from "haoxin-excalidraw-sdk-element";
 // components/LeftMainToolbar.tsx
 import { TOOL_TYPE as TOOL_TYPE2 } from "haoxin-excalidraw-sdk-common";
 import { jsx as jsx83, jsxs as jsxs45 } from "react/jsx-runtime";
-var LeftMainToolbar = ({ appState, app }) => {
+var LeftMainToolbar = ({
+  appState,
+  app,
+  visible = true
+}) => {
+  if (!visible) {
+    return null;
+  }
   const active = appState.activeTool.type;
   let lineGroupIcon = LineIcon;
   let shapesGroupIcon = RectangleIcon;
@@ -24082,6 +24135,9 @@ import clsx36 from "clsx";
 import { KEYS as KEYS45 } from "haoxin-excalidraw-sdk-common";
 import { jsx as jsx86 } from "react/jsx-runtime";
 var HandButton = (props) => {
+  if (props.visible === false) {
+    return null;
+  }
   return /* @__PURE__ */ jsx86(
     ToolButton,
     {
@@ -24328,7 +24384,8 @@ var MobileMenu = ({
   device,
   renderWelcomeScreen,
   UIOptions,
-  app
+  app,
+  showPanActions
 }) => {
   const {
     WelcomeScreenCenterTunnel,
@@ -24353,7 +24410,8 @@ var MobileMenu = ({
                 checked: isHandToolActive(appState),
                 onChange: () => onHandToolToggle(),
                 title: t("toolBar.hand"),
-                isMobile: true
+                isMobile: true,
+                visible: showPanActions !== false
               }
             ),
             /* @__PURE__ */ jsx91(
@@ -24431,15 +24489,22 @@ var MobileMenu = ({
           marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2
         },
         children: /* @__PURE__ */ jsxs50(Island, { padding: 0, children: [
-          appState.openMenu === "shape" && showSelectedShapeActions2(appState, elements) ? /* @__PURE__ */ jsx91(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: /* @__PURE__ */ jsx91(
-            SelectedShapeActions,
+          appState.openMenu === "shape" && showSelectedShapeActions2(appState, elements) ? /* @__PURE__ */ jsx91(
+            Section,
             {
-              appState,
-              elementsMap: app.scene.getNonDeletedElementsMap(),
-              renderAction: actionManager.renderAction,
-              app
+              className: "App-mobile-menu",
+              heading: "selectedShapeActions",
+              children: /* @__PURE__ */ jsx91(
+                SelectedShapeActions,
+                {
+                  appState,
+                  elementsMap: app.scene.getNonDeletedElementsMap(),
+                  renderAction: actionManager.renderAction,
+                  app
+                }
+              )
             }
-          ) }) : null,
+          ) : null,
           /* @__PURE__ */ jsxs50("footer", { className: "App-toolbar", children: [
             renderAppToolbar(),
             appState.scrolledOutside && !appState.openMenu && !appState.openSidebar && /* @__PURE__ */ jsx91(
@@ -24799,8 +24864,10 @@ var Footer = ({
   appState,
   actionManager,
   showExitZenModeBtn,
-  renderWelcomeScreen
+  renderWelcomeScreen,
+  showZoomActions
 }) => {
+  const effectiveShowZoomActions = showZoomActions !== false;
   const { FooterCenterTunnel, WelcomeScreenHelpHintTunnel } = useTunnels();
   return /* @__PURE__ */ jsxs53(
     "footer",
@@ -24808,30 +24875,23 @@ var Footer = ({
       role: "contentinfo",
       className: "layer-ui__wrapper__footer App-menu App-menu_bottom",
       children: [
-        /* @__PURE__ */ jsx95(
+        effectiveShowZoomActions && /* @__PURE__ */ jsx95(
           "div",
           {
-            className: clsx40("layer-ui__wrapper__footer-left zen-mode-transition", {
-              "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
-            }),
-            children: /* @__PURE__ */ jsx95(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs53(Section, { heading: "canvasActions", children: [
-              /* @__PURE__ */ jsx95(
-                ZoomActions,
-                {
-                  renderAction: actionManager.renderAction,
-                  zoom: appState.zoom
-                }
-              ),
-              !appState.viewModeEnabled && /* @__PURE__ */ jsx95(
-                UndoRedoActions,
-                {
-                  renderAction: actionManager.renderAction,
-                  className: clsx40("zen-mode-transition", {
-                    "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
-                  })
-                }
-              )
-            ] }) })
+            className: clsx40(
+              "layer-ui__wrapper__footer-left zen-mode-transition",
+              {
+                "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
+              }
+            ),
+            children: /* @__PURE__ */ jsx95(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsx95(Section, { heading: "canvasActions", children: /* @__PURE__ */ jsx95(
+              ZoomActions,
+              {
+                renderAction: actionManager.renderAction,
+                zoom: appState.zoom,
+                visible: effectiveShowZoomActions
+              }
+            ) }) })
           }
         ),
         /* @__PURE__ */ jsx95(FooterCenterTunnel.Out, {}),
@@ -25710,8 +25770,12 @@ var LeftToolFlyouts = ({
   appState,
   app,
   actionManager,
-  elements
+  elements,
+  showToolBar = true
 }) => {
+  if (!showToolBar) {
+    return null;
+  }
   const activeTool = appState.activeTool.type;
   const selectedStrokeWidth = getFormValue(
     elements,
@@ -31857,7 +31921,10 @@ var LayerUI = ({
   children,
   app,
   isCollaborating,
-  generateLinkForSelection
+  generateLinkForSelection,
+  showZoomActions,
+  showPanActions,
+  showToolBar = true
 }) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -31902,13 +31969,20 @@ var LayerUI = ({
     renderWelcomeScreen && /* @__PURE__ */ jsx145(tunnels.WelcomeScreenMenuHintTunnel.Out, {})
   ] });
   const renderLeftToolbar = () => {
-    if (appState.viewModeEnabled || appState.openDialog?.name === "elementLinkSelector") {
+    if (appState.viewModeEnabled || appState.openDialog?.name === "elementLinkSelector" || !showToolBar) {
       return null;
     }
     return /* @__PURE__ */ jsx145(FixedSideContainer, { side: "left", children: /* @__PURE__ */ jsx145("div", { className: "App-menu App-menu_left", children: /* @__PURE__ */ jsx145(Section, { heading: "shapes", className: "shapes-section-left", children: (heading) => /* @__PURE__ */ jsxs79("div", { style: { position: "relative" }, children: [
       renderWelcomeScreen && /* @__PURE__ */ jsx145(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}),
       /* @__PURE__ */ jsxs79(Stack_default.Col, { gap: 4, align: "center", children: [
-        /* @__PURE__ */ jsx145(LeftMainToolbar_default, { appState, app }),
+        /* @__PURE__ */ jsx145(
+          LeftMainToolbar_default,
+          {
+            appState,
+            app,
+            visible: showToolBar
+          }
+        ),
         isCollaborating && /* @__PURE__ */ jsx145(
           Island,
           {
@@ -31934,7 +32008,15 @@ var LayerUI = ({
   const renderFixedSideContainer = () => {
     const shouldShowStats = appState.stats.open && !appState.zenModeEnabled && !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector";
     return /* @__PURE__ */ jsx145(FixedSideContainer, { side: "top", children: /* @__PURE__ */ jsxs79("div", { className: "App-menu App-menu_top", children: [
-      /* @__PURE__ */ jsx145(Stack_default.Col, { gap: 6, className: clsx55("App-menu_top__left"), style: { display: "none" }, children: renderCanvasActions() }),
+      /* @__PURE__ */ jsx145(
+        Stack_default.Col,
+        {
+          gap: 6,
+          className: clsx55("App-menu_top__left"),
+          style: { display: "none" },
+          children: renderCanvasActions()
+        }
+      ),
       /* @__PURE__ */ jsxs79(
         "div",
         {
@@ -32102,7 +32184,8 @@ var LayerUI = ({
         renderSidebars,
         device,
         renderWelcomeScreen,
-        UIOptions
+        UIOptions,
+        showPanActions
       }
     ),
     !device.editor.isMobile && /* @__PURE__ */ jsxs79(Fragment24, { children: [
@@ -32121,7 +32204,8 @@ var LayerUI = ({
                 appState,
                 actionManager,
                 showExitZenModeBtn,
-                renderWelcomeScreen
+                renderWelcomeScreen,
+                showZoomActions
               }
             ),
             appState.scrolledOutside && /* @__PURE__ */ jsx145(
@@ -32145,16 +32229,17 @@ var LayerUI = ({
   ] });
   return /* @__PURE__ */ jsx145(UIAppStateContext.Provider, { value: appState, children: /* @__PURE__ */ jsx145(TunnelsJotaiProvider, { children: /* @__PURE__ */ jsxs79(TunnelsContext.Provider, { value: tunnels, children: [
     layerUIJSX,
-    !appState.viewModeEnabled && /* @__PURE__ */ jsx145(
+    !appState.viewModeEnabled && showToolBar && /* @__PURE__ */ jsx145(
       LeftToolFlyouts_default,
       {
         appState,
         app,
         actionManager,
-        elements
+        elements,
+        showToolBar
       }
     ),
-    !device.editor.isMobile && !appState.viewModeEnabled && /* @__PURE__ */ jsx145(
+    !device.editor.isMobile && !appState.viewModeEnabled && showToolBar && /* @__PURE__ */ jsx145(
       TopLeftToolbar,
       {
         appState,
@@ -33857,10 +33942,27 @@ var App = class _App extends React46.Component {
       }
     });
     /** use when changing scrollX/scrollY/zoom based on user interaction */
-    __publicField(this, "translateCanvas", (state) => {
+    __publicField(this, "translateCanvas", (state, callback) => {
+      if (this.props.showPanActions === false) {
+        if (typeof state === "function") {
+          const wrappedStateFn = (prevState) => {
+            const nextState = state(prevState);
+            if (nextState.scrollX !== prevState.scrollX || nextState.scrollY !== prevState.scrollY) {
+              return prevState;
+            }
+            return nextState;
+          };
+          this.cancelInProgressAnimation?.();
+          this.maybeUnfollowRemoteUser();
+          this.setState(wrappedStateFn, callback);
+          return;
+        } else if (state.scrollX !== void 0 || state.scrollY !== void 0) {
+          return;
+        }
+      }
       this.cancelInProgressAnimation?.();
       this.maybeUnfollowRemoteUser();
-      this.setState(state);
+      this.setState(state, callback);
     });
     __publicField(this, "setToast", (toast) => {
       this.setState({ toast });
@@ -33953,7 +34055,7 @@ var App = class _App extends React46.Component {
      * This method has the same signature as updateScene but marks the
      * onChange callback with source: "updateSceneSilently" so consumers
      * can choose how to handle it.
-     * 
+     *
      * Use this method when you need to update the canvas programmatically
      * and want to inform consumers that this was a programmatic update.
      */
@@ -34043,6 +34145,24 @@ var App = class _App extends React46.Component {
         left: Math.max(propertiesPanelRect?.right ?? 0, 0) + PADDING
       };
     });
+    __publicField(this, "zoomToFit", () => {
+      console.log("\u{1F50D} \u8C03\u7528 zoomToFit \u65B9\u6CD5");
+      const result = zoomToFit({
+        targetElements: this.scene.getNonDeletedElements(),
+        appState: {
+          ...this.state,
+          userToFollow: null
+        },
+        fitToViewport: false,
+        canvasOffsets: {}
+      });
+      if (result) {
+        console.log("\u2705 zoomToFit \u6210\u529F\u6267\u884C\uFF0C\u66F4\u65B0\u573A\u666F");
+        this.updateScene(result);
+      } else {
+        console.log("\u26A0\uFE0F zoomToFit \u6CA1\u6709\u8FD4\u56DE\u7ED3\u679C\uFF0C\u53EF\u80FD\u6CA1\u6709\u5143\u7D20\u9700\u8981\u7F29\u653E");
+      }
+    });
     // Input handling
     __publicField(this, "onKeyDown", withBatchedUpdates(
       (event) => {
@@ -34368,7 +34488,7 @@ var App = class _App extends React46.Component {
             event.stopPropagation();
           }
         }
-        if (event.key === KEYS52.SPACE && gesture.pointers.size === 0) {
+        if (event.key === KEYS52.SPACE && gesture.pointers.size === 0 && this.props.showPanActions !== false) {
           isHoldingSpace = true;
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.GRAB);
           event.preventDefault();
@@ -35755,7 +35875,7 @@ var App = class _App extends React46.Component {
     });
     // 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))) {
+      if (!(this.props.showPanActions !== false && gesture.pointers.size <= 1 && (event.button === POINTER_BUTTON2.WHEEL || event.button === POINTER_BUTTON2.MAIN && isHoldingSpace || isHandToolActive(this.state) || this.state.viewModeEnabled))) {
         return false;
       }
       isPanning = true;
@@ -37336,17 +37456,19 @@ var App = class _App extends React46.Component {
           this.resetShouldCacheIgnoreZoomDebounced();
           return;
         }
-        if (event.shiftKey) {
+        if (event.shiftKey && this.props.showPanActions !== false) {
           this.translateCanvas(({ zoom, scrollX }) => ({
             // on Mac, shift+wheel tends to result in deltaX
             scrollX: scrollX - (deltaY || deltaX) / zoom.value
           }));
           return;
         }
-        this.translateCanvas(({ zoom, scrollX, scrollY }) => ({
-          scrollX: scrollX - deltaX / zoom.value,
-          scrollY: scrollY - deltaY / zoom.value
-        }));
+        if (this.props.showPanActions !== false) {
+          this.translateCanvas(({ zoom, scrollX, scrollY }) => ({
+            scrollX: scrollX - deltaX / zoom.value,
+            scrollY: scrollY - deltaY / zoom.value
+          }));
+        }
       }
     ));
     __publicField(this, "savePointer", (x, y, button) => {
@@ -37466,6 +37588,7 @@ var App = class _App extends React46.Component {
           clear: this.resetHistory
         },
         scrollToContent: this.scrollToContent,
+        zoomToFit: this.zoomToFit,
         getSceneElements: this.getSceneElements,
         getAppState: () => this.state,
         getFiles: () => this.files,
@@ -37939,6 +38062,9 @@ var App = class _App extends React46.Component {
                             app: this,
                             isCollaborating: this.props.isCollaborating,
                             generateLinkForSelection: this.props.generateLinkForSelection,
+                            showZoomActions: this.props.showZoomActions,
+                            showPanActions: this.props.showPanActions,
+                            showToolBar: this.props.showToolBar,
                             children: this.props.children
                           }
                         ),
@@ -38839,8 +38965,14 @@ var App = class _App extends React46.Component {
             const currentStyle = _element.customData?.textStyle || {};
             const pick = (cur, st) => cur === void 0 ? !!st : !!cur;
             const nextStyle = {
-              bold: pick(currentStyle.bold, this.state.currentTextBold),
-              italic: pick(currentStyle.italic, this.state.currentTextItalic),
+              bold: pick(
+                currentStyle.bold,
+                this.state.currentTextBold
+              ),
+              italic: pick(
+                currentStyle.italic,
+                this.state.currentTextItalic
+              ),
               underline: pick(
                 currentStyle.underline,
                 this.state.currentTextUnderline
@@ -38860,7 +38992,10 @@ var App = class _App extends React46.Component {
                 elementsMap,
                 nextOriginalText
               ),
-              customData: { ..._element.customData || {}, textStyle: nextStyle }
+              customData: {
+                ..._element.customData || {},
+                textStyle: nextStyle
+              }
             });
           }
           return _element;
@@ -41202,6 +41337,7 @@ import { setCustomTextMetricsProvider } from "haoxin-excalidraw-sdk-element";
 import { jsx as jsx162 } from "react/jsx-runtime";
 polyfill_default();
 var ExcalidrawBase = (props) => {
+  console.log("\u4F7F\u7528\u4E86\u7EC4\u4EF6=====Excalidraw component initialized");
   const {
     onChange,
     onIncrement,
@@ -41235,7 +41371,10 @@ var ExcalidrawBase = (props) => {
     renderEmbeddable,
     aiEnabled,
     showDeprecatedFonts,
-    renderScrollbars
+    renderScrollbars,
+    showZoomActions,
+    showPanActions,
+    showToolBar
   } = props;
   const canvasActions = props.UIOptions?.canvasActions;
   const UIOptions = {
@@ -41307,6 +41446,9 @@ var ExcalidrawBase = (props) => {
       aiEnabled: aiEnabled !== false,
       showDeprecatedFonts,
       renderScrollbars,
+      showZoomActions,
+      showPanActions,
+      showToolBar,
       children
     }
   ) }) });