dockview-angular 4.12.0 → 4.13.1

package/dist/dockview-angular.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-angular
- * @version 4.12.0
+ * @version 4.13.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -1264,11 +1264,13 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
                         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 = {
@@ -5130,7 +5132,7 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
         }
     }
 
-    class WillShowOverlayLocationEvent {
+    class DockviewWillShowOverlayLocationEvent {
         get kind() {
             return this.options.kind;
         }
@@ -5478,7 +5480,7 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
                     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,
@@ -5642,7 +5644,7 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
                     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,
@@ -6036,7 +6038,7 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
             }), 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,
@@ -6712,7 +6714,19 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
             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) {
@@ -7664,13 +7678,16 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
                     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 -
@@ -7681,22 +7698,27 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
                         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 -
@@ -7707,12 +7729,15 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
                         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) {
@@ -8505,7 +8530,14 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
             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) {
@@ -8542,7 +8574,7 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
                     // 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,
@@ -9371,9 +9403,7 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
             }
             this.updateWatermark();
             // Force position updates for always visible panels after DOM layout is complete
-            requestAnimationFrame(() => {
-                this.overlayRenderContainer.updateAllPositions();
-            });
+            this.debouncedUpdateAllPositions();
             this._onDidLayoutFromJSON.fire();
         }
         clear() {
@@ -9709,6 +9739,15 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
             }
             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 {
@@ -10019,6 +10058,7 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
             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)
@@ -13082,6 +13122,7 @@ define(['exports', '@angular/core', '@angular/common', 'rxjs'], (function (expor
     exports.DockviewPanel = DockviewPanel;
     exports.DockviewUnhandledDragOverEvent = DockviewUnhandledDragOverEvent;
     exports.DockviewWillDropEvent = DockviewWillDropEvent;
+    exports.DockviewWillShowOverlayLocationEvent = DockviewWillShowOverlayLocationEvent;
     exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;