Add scrollable canvas feature

packages/core/src/canvas/config/config.ts

@@ -89,6 +89,19 @@ export interface CanvasConfig {
    * Experimental: enable infinite canvas.
    */
   infiniteCanvas?: boolean;
+
+  /**
+   * Enables the scrollable canvas feature.
+   *
+   * When this feature flag is set to `true`, the canvas element
+   * will have its `overflow` style set to `auto`, allowing users to scroll
+   * the canvas content if it exceeds the visible area.  This is useful for
+   * handling large diagrams or zoomed-in views where parts of the content
+   * are initially hidden.  If `false`, the canvas will use default overflow (typically hidden).
+   *
+   * @default false
+   */
+  scrollableCanvas?: boolean;
 }
 
 const config: () => CanvasConfig = () => ({

packages/core/src/canvas/index.ts

@@ -501,7 +501,12 @@ export default class CanvasModule extends Module<CanvasConfig> {
    */
   getMouseRelativeCanvas(ev: MouseEvent | { clientX: number; clientY: number }, opts: any) {
     const zoom = this.getZoomDecimal();
-    const { top = 0, left = 0 } = this.getCanvasView().getPosition(opts) ?? {};
+    const canvasPos = this.getCanvasView().getPosition(opts) ?? { top: 0, left: 0 };
+    const canvasScroll = this.getCanvasView().getCanvasScroll();
+    const { top, left } = {
+      top: canvasPos.top + canvasScroll.scrollTop,
+      left: canvasPos.left + canvasScroll.scrollLeft,
+    };
 
     return {
       y: ev.clientY * zoom + top,

packages/core/src/canvas/view/CanvasView.ts

@@ -461,6 +461,7 @@ export default class CanvasView extends ModuleView<Canvas> {
       const frEl = winEl ? (winEl.frameElement as HTMLElement) : frame;
       this.frmOff = this.offset(frEl || frame);
     }
+
     return this.frmOff;
   }
 
@@ -562,6 +563,23 @@ export default class CanvasView extends ModuleView<Canvas> {
     };
   }
 
+  /**
+   * Returns the scroll position of the canvas.
+   *
+   * If the canvas is scrollable, returns the current `scrollTop` and `scrollLeft` values.
+   * Otherwise, returns an object with `scrollTop` and `scrollLeft` both set to 0.
+   *
+   * @returns An object containing the vertical and horizontal scroll positions.
+   */
+  getCanvasScroll(): { scrollTop: number; scrollLeft: number } {
+    return this.config.scrollableCanvas
+      ? {
+          scrollTop: this.el.scrollTop,
+          scrollLeft: this.el.scrollLeft,
+        }
+      : { scrollTop: 0, scrollLeft: 0 };
+  }
+
   /**
    * Update javascript of a specific component passed by its View
    * @param {ModuleView} view Component's View
@@ -672,6 +690,9 @@ export default class CanvasView extends ModuleView<Canvas> {
     this.spotsEl = el.querySelector('[data-spots]')!;
     this.cvStyle = el.querySelector('[data-canvas-style]')!;
     this.el.className = getUiClass(em, this.className);
+    if (config.scrollableCanvas === true) {
+      $el.css('overflow', 'auto');
+    }
     this.ready = true;
     this._renderFrames();