dockview-core 6.0.0 → 6.0.3

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.0.0
+ * @version 6.0.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2824,6 +2824,8 @@ class Resizable extends CompositeDisposable {
     }
     constructor(parentElement, disableResizing = false) {
         super();
+        this._lastWidth = -1;
+        this._lastHeight = -1;
         this._disableResizing = disableResizing;
         this._element = parentElement;
         this.addDisposables(watchElementResize(this._element, (entry) => {
@@ -2860,7 +2862,16 @@ class Resizable extends CompositeDisposable {
                  */
                 return;
             }
-            const { width, height } = entry.contentRect;
+            // Round to integers to absorb sub-pixel jitter from
+            // fractional devicePixelRatio (e.g. multi-monitor setups),
+            // which would otherwise re-fire layout in a feedback loop.
+            const width = Math.round(entry.contentRect.width);
+            const height = Math.round(entry.contentRect.height);
+            if (width === this._lastWidth && height === this._lastHeight) {
+                return;
+            }
+            this._lastWidth = width;
+            this._lastHeight = height;
             this.layout(width, height);
         }));
     }
@@ -5442,6 +5453,9 @@ class GroupDragHandler extends DragHandler {
         if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
             return true;
         }
+        if (this.group.api.location.type === 'edge' && this.group.size === 0) {
+            return true;
+        }
         return false;
     }
     getData(dragEvent) {
@@ -11289,8 +11303,14 @@ class OverlayRenderContainer extends CompositeDisposable {
             };
         }
         const focusContainer = this.map[panel.api.id].element;
-        if (panel.view.content.element.parentElement !== focusContainer) {
-            focusContainer.appendChild(panel.view.content.element);
+        // Capture the content element now so the destroy disposable below
+        // does not re-query the renderer's `element` getter during teardown.
+        // Some framework adapters (e.g. dockview-angular) tear down their
+        // backing renderer before this disposable fires; reading through the
+        // getter at that point can throw.
+        const contentElement = panel.view.content.element;
+        if (contentElement.parentElement !== focusContainer) {
+            focusContainer.appendChild(contentElement);
         }
         if (focusContainer.parentElement !== this.element) {
             this.element.appendChild(focusContainer);
@@ -11401,8 +11421,8 @@ class OverlayRenderContainer extends CompositeDisposable {
         }));
         this.map[panel.api.id].destroy = Disposable.from(() => {
             var _a;
-            if (panel.view.content.element.parentElement === focusContainer) {
-                focusContainer.removeChild(panel.view.content.element);
+            if (contentElement.parentElement === focusContainer) {
+                focusContainer.removeChild(contentElement);
             }
             (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
         });
@@ -12257,7 +12277,12 @@ class ShellManager {
         this._middleIndex = 0;
         this._outerSplitview.addView(this._middleColumn, { type: 'distribute' }, 0);
         this._disposables.addDisposables(watchElementResize(this._shellElement, (entry) => {
-            const { width, height } = entry.contentRect;
+            const width = Math.round(entry.contentRect.width);
+            const height = Math.round(entry.contentRect.height);
+            if (width === this._currentWidth &&
+                height === this._currentHeight) {
+                return;
+            }
             this._currentWidth = width;
             this._currentHeight = height;
             this.layout(width, height);
@@ -13327,10 +13352,20 @@ class DockviewComponent extends BaseGrid {
             if (event.isActive) {
                 overlay.bringToFront();
             }
-        }), watchElementResize(group.element, (entry) => {
-            const { width, height } = entry.contentRect;
-            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
-        }));
+        }), (() => {
+            let lastWidth = -1;
+            let lastHeight = -1;
+            return watchElementResize(group.element, (entry) => {
+                const width = Math.round(entry.contentRect.width);
+                const height = Math.round(entry.contentRect.height);
+                if (width === lastWidth && height === lastHeight) {
+                    return;
+                }
+                lastWidth = width;
+                lastHeight = height;
+                group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
+            });
+        })());
         floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
             // this is either a resize or a move
             // to inform the panels .layout(...) the group with it's current size
@@ -14550,6 +14585,10 @@ class DockviewComponent extends BaseGrid {
         const from = options.from.group;
         const to = options.to.group;
         const target = options.to.position;
+        // The group whose panels end up at the target. For non-edge moves
+        // we relocate `from` itself; for edge moves we move panels into a
+        // freshly created group so the edge slot stays anchored.
+        let source = from;
         if (target === 'center') {
             const activePanel = from.activePanel;
             const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
@@ -14579,55 +14618,79 @@ class DockviewComponent extends BaseGrid {
             }
         }
         else {
-            switch (from.api.location.type) {
-                case 'grid':
-                    this.gridview.removeView(getGridLocation(from.element));
-                    break;
-                case 'floating': {
-                    const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
-                    if (!selectedFloatingGroup) {
-                        throw new Error('dockview: failed to find floating group');
-                    }
-                    selectedFloatingGroup.dispose();
-                    break;
-                }
-                case 'popout': {
-                    const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
-                    if (!selectedPopoutGroup) {
-                        throw new Error('dockview: failed to find popout group');
-                    }
-                    // Remove from popout groups list to prevent automatic restoration
-                    const index = this._popoutGroups.indexOf(selectedPopoutGroup);
-                    if (index >= 0) {
-                        this._popoutGroups.splice(index, 1);
+            if (from.api.location.type === 'edge') {
+                /**
+                 * Edge groups are permanent structural elements and must
+                 * stay anchored in their edge slot. Move the panels into a
+                 * new group; the auto-collapse listener registered in
+                 * addEdgeGroup will collapse the now-empty edge slot once
+                 * the last panel leaves. The placement code below then
+                 * positions `source` like any other moved group.
+                 */
+                const activePanel = from.activePanel;
+                const movedPanels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, { skipSetActive: true })));
+                source = this.createGroup();
+                this.movingLock(() => {
+                    for (const panel of movedPanels) {
+                        source.model.openPanel(panel, {
+                            skipSetActive: panel !== activePanel,
+                            skipSetGroupActive: true,
+                        });
                     }
-                    // Clean up the reference group (ghost) if it exists and is hidden
-                    if (selectedPopoutGroup.referenceGroup) {
-                        const referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
-                        if (referenceGroup && !referenceGroup.api.isVisible) {
-                            this.doRemoveGroup(referenceGroup, {
-                                skipActive: true,
-                            });
+                });
+            }
+            else {
+                switch (from.api.location.type) {
+                    case 'grid':
+                        this.gridview.removeView(getGridLocation(from.element));
+                        break;
+                    case 'floating': {
+                        const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
+                        if (!selectedFloatingGroup) {
+                            throw new Error('dockview: failed to find floating group');
                         }
+                        selectedFloatingGroup.dispose();
+                        break;
                     }
-                    // Manually dispose the window without triggering restoration
-                    selectedPopoutGroup.window.dispose();
-                    // Update group's location and containers for target
-                    if (to.api.location.type === 'grid') {
-                        from.model.renderContainer =
-                            this.overlayRenderContainer;
-                        from.model.dropTargetContainer =
-                            this.rootDropTargetContainer;
-                        from.model.location = { type: 'grid' };
-                    }
-                    else if (to.api.location.type === 'floating') {
-                        from.model.renderContainer =
-                            this.overlayRenderContainer;
-                        from.model.dropTargetContainer =
-                            this.rootDropTargetContainer;
-                        from.model.location = { type: 'floating' };
+                    case 'popout': {
+                        const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
+                        if (!selectedPopoutGroup) {
+                            throw new Error('dockview: failed to find popout group');
+                        }
+                        // Remove from popout groups list to prevent automatic restoration
+                        const index = this._popoutGroups.indexOf(selectedPopoutGroup);
+                        if (index >= 0) {
+                            this._popoutGroups.splice(index, 1);
+                        }
+                        // Clean up the reference group (ghost) if it exists and is hidden
+                        if (selectedPopoutGroup.referenceGroup) {
+                            const referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
+                            if (referenceGroup &&
+                                !referenceGroup.api.isVisible) {
+                                this.doRemoveGroup(referenceGroup, {
+                                    skipActive: true,
+                                });
+                            }
+                        }
+                        // Manually dispose the window without triggering restoration
+                        selectedPopoutGroup.window.dispose();
+                        // Update group's location and containers for target
+                        if (to.api.location.type === 'grid') {
+                            from.model.renderContainer =
+                                this.overlayRenderContainer;
+                            from.model.dropTargetContainer =
+                                this.rootDropTargetContainer;
+                            from.model.location = { type: 'grid' };
+                        }
+                        else if (to.api.location.type === 'floating') {
+                            from.model.renderContainer =
+                                this.overlayRenderContainer;
+                            from.model.dropTargetContainer =
+                                this.rootDropTargetContainer;
+                            from.model.location = { type: 'floating' };
+                        }
+                        break;
                     }
-                    break;
                 }
             }
             // For moves to grid locations
@@ -14650,7 +14713,7 @@ class DockviewComponent extends BaseGrid {
                                 : from.api.width;
                         break;
                 }
-                this.gridview.addView(from, size, dropLocation);
+                this.gridview.addView(source, size, dropLocation);
             }
             else if (to.api.location.type === 'floating') {
                 // For moves to floating locations, add as floating group
@@ -14678,7 +14741,7 @@ class DockviewComponent extends BaseGrid {
                     else {
                         top = 50; // Default fallback
                     }
-                    this.addFloatingGroup(from, {
+                    this.addFloatingGroup(source, {
                         height: box.height,
                         width: box.width,
                         position: {
@@ -14689,7 +14752,7 @@ class DockviewComponent extends BaseGrid {
                 }
             }
         }
-        from.panels.forEach((panel) => {
+        source.panels.forEach((panel) => {
             this._onDidMovePanel.fire({ panel, from });
         });
         this.debouncedUpdateAllPositions();
@@ -14700,6 +14763,11 @@ class DockviewComponent extends BaseGrid {
             const targetGroup = to !== null && to !== void 0 ? to : from;
             this.doSetGroupAndPanelActive(targetGroup);
         }
+        else if (source !== from && options.skipSetActive !== true) {
+            // Edge group moves create a fresh `source` group; activate it
+            // by default so the moved panels receive focus.
+            this.doSetGroupAndPanelActive(source);
+        }
     }
     doSetGroupActive(group) {
         super.doSetGroupActive(group);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-core",
-    "version": "6.0.0",
+    "version": "6.0.3",
     "description": "Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript",
     "keywords": [
         "splitview",