dockview 4.12.0 → 4.13.1

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 4.12.0
+ * @version 4.13.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -1294,11 +1294,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       document.removeEventListener('pointermove', onPointerMove);
                       document.removeEventListener('pointerup', end);
                       document.removeEventListener('pointercancel', end);
+                      document.removeEventListener('contextmenu', end);
                       this._onDidSashEnd.fire(undefined);
                   };
                   document.addEventListener('pointermove', onPointerMove);
                   document.addEventListener('pointerup', end);
                   document.addEventListener('pointercancel', end);
+                  document.addEventListener('contextmenu', end);
               };
               sash.addEventListener('pointerdown', onPointerStart);
               const sashItem = {
@@ -5160,7 +5162,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  class WillShowOverlayLocationEvent {
+  class DockviewWillShowOverlayLocationEvent {
       get kind() {
           return this.options.kind;
       }
@@ -5508,7 +5510,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   index: this._tabs.findIndex((x) => x.value === tab),
               });
           }), tab.onWillShowOverlay((event) => {
-              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+              this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                   kind: 'tab',
                   panel: this.group.activePanel,
                   api: this.accessor.api,
@@ -5672,7 +5674,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   index: this.tabs.size,
               });
           }), this.voidContainer.onWillShowOverlay((event) => {
-              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+              this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                   kind: 'header_space',
                   panel: this.group.activePanel,
                   api: this.accessor.api,
@@ -6066,7 +6068,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }), this.tabsContainer.onWillShowOverlay((event) => {
               this._onWillShowOverlay.fire(event);
           }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
-              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+              this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                   kind: 'content',
                   panel: this.activePanel,
                   api: this._api,
@@ -6742,7 +6744,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidLocationChange = this._onDidLocationChange.event;
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-          this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange);
+          this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._onDidVisibilityChange.event((event) => {
+              // When becoming visible, apply any pending size change
+              if (event.isVisible && this._pendingSize) {
+                  super.setSize(this._pendingSize);
+                  this._pendingSize = undefined;
+              }
+          }));
+      }
+      setSize(event) {
+          // Always store the requested size
+          this._pendingSize = Object.assign({}, event);
+          // Apply the size change immediately
+          super.setSize(event);
       }
       close() {
           if (!this._group) {
@@ -7694,13 +7708,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   let right = undefined;
                   let width = undefined;
                   const moveTop = () => {
-                      top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                      // When dragging top handle, constrain top position to prevent oversizing
+                      const maxTop = startPosition.originalY +
                           startPosition.originalHeight >
                           containerRect.height
-                          ? this.getMinimumHeight(containerRect.height)
+                          ? Math.max(0, containerRect.height -
+                              Overlay.MINIMUM_HEIGHT)
                           : Math.max(0, startPosition.originalY +
                               startPosition.originalHeight -
-                              Overlay.MINIMUM_HEIGHT));
+                              Overlay.MINIMUM_HEIGHT);
+                      top = clamp(y, 0, maxTop);
                       height =
                           startPosition.originalY +
                               startPosition.originalHeight -
@@ -7711,22 +7728,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       top =
                           startPosition.originalY -
                               startPosition.originalHeight;
-                      height = clamp(y - top, top < 0 &&
-                          typeof this.options
-                              .minimumInViewportHeight === 'number'
+                      // When dragging bottom handle, constrain height to container height
+                      const minHeight = top < 0 &&
+                          typeof this.options.minimumInViewportHeight ===
+                              'number'
                           ? -top +
                               this.options.minimumInViewportHeight
-                          : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                          : Overlay.MINIMUM_HEIGHT;
+                      const maxHeight = containerRect.height - Math.max(0, top);
+                      height = clamp(y - top, minHeight, maxHeight);
                       bottom = containerRect.height - top - height;
                   };
                   const moveLeft = () => {
-                      left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                      const maxLeft = startPosition.originalX +
                           startPosition.originalWidth >
                           containerRect.width
-                          ? this.getMinimumWidth(containerRect.width)
+                          ? Math.max(0, containerRect.width -
+                              Overlay.MINIMUM_WIDTH) // Prevent extending beyong right edge
                           : Math.max(0, startPosition.originalX +
                               startPosition.originalWidth -
-                              Overlay.MINIMUM_WIDTH));
+                              Overlay.MINIMUM_WIDTH);
+                      left = clamp(x, 0, maxLeft); // min is 0 (Not -Infinity) to prevent dragging beyond left edge
                       width =
                           startPosition.originalX +
                               startPosition.originalWidth -
@@ -7737,12 +7759,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       left =
                           startPosition.originalX -
                               startPosition.originalWidth;
-                      width = clamp(x - left, left < 0 &&
-                          typeof this.options
-                              .minimumInViewportWidth === 'number'
+                      // When dragging right handle, constrain width to container width
+                      const minWidth = left < 0 &&
+                          typeof this.options.minimumInViewportWidth ===
+                              'number'
                           ? -left +
                               this.options.minimumInViewportWidth
-                          : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                          : Overlay.MINIMUM_WIDTH;
+                      const maxWidth = containerRect.width - Math.max(0, left);
+                      width = clamp(x - left, minWidth, maxWidth);
                       right = containerRect.width - left - width;
                   };
                   switch (direction) {
@@ -8535,7 +8560,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (options.debug) {
               this.addDisposables(new StrictEventsSequencing(this));
           }
-          this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+          this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidMovePanel.event(() => {
+              /**
+               * Update overlay positions after DOM layout completes to prevent 0×0 dimensions.
+               * With defaultRenderer="always" this results in panel content not showing after move operations.
+               * Debounced to avoid multiple calls when moving groups with multiple panels.
+               */
+              this.debouncedUpdateAllPositions();
+          }), this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
               this.updateWatermark();
           }), this.onDidAdd((event) => {
               if (!this._moving) {
@@ -8572,7 +8604,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   // option only available when no panels in primary grid
                   return;
               }
-              this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+              this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                   kind: 'edge',
                   panel: undefined,
                   api: this._api,
@@ -9401,9 +9433,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           this.updateWatermark();
           // Force position updates for always visible panels after DOM layout is complete
-          requestAnimationFrame(() => {
-              this.overlayRenderContainer.updateAllPositions();
-          });
+          this.debouncedUpdateAllPositions();
           this._onDidLayoutFromJSON.fire();
       }
       clear() {
@@ -9739,6 +9769,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           return re;
       }
+      debouncedUpdateAllPositions() {
+          if (this._updatePositionsFrameId !== undefined) {
+              cancelAnimationFrame(this._updatePositionsFrameId);
+          }
+          this._updatePositionsFrameId = requestAnimationFrame(() => {
+              this._updatePositionsFrameId = undefined;
+              this.overlayRenderContainer.updateAllPositions();
+          });
+      }
       movingLock(func) {
           const isMoving = this._moving;
           try {
@@ -10049,6 +10088,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           from.panels.forEach((panel) => {
               this._onDidMovePanel.fire({ panel, from });
           });
+          this.debouncedUpdateAllPositions();
           // Ensure group becomes active after move
           if (options.skipSetActive === false) {
               // Only activate when explicitly requested (skipSetActive: false)
@@ -12143,6 +12183,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.DockviewReact = DockviewReact;
   exports.DockviewUnhandledDragOverEvent = DockviewUnhandledDragOverEvent;
   exports.DockviewWillDropEvent = DockviewWillDropEvent;
+  exports.DockviewWillShowOverlayLocationEvent = DockviewWillShowOverlayLocationEvent;
   exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
   exports.Gridview = Gridview;
   exports.GridviewApi = GridviewApi;