dockview-core 6.0.0 → 6.0.3

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.0.0
+ * @version 6.0.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2830,6 +2830,8 @@
         }
         constructor(parentElement, disableResizing = false) {
             super();
+            this._lastWidth = -1;
+            this._lastHeight = -1;
             this._disableResizing = disableResizing;
             this._element = parentElement;
             this.addDisposables(watchElementResize(this._element, (entry) => {
@@ -2866,7 +2868,16 @@
                      */
                     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);
             }));
         }
@@ -5448,6 +5459,9 @@
             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) {
@@ -11295,8 +11309,14 @@
                 };
             }
             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);
@@ -11407,8 +11427,8 @@
             }));
             this.map[panel.api.id].destroy = exports.DockviewDisposable.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);
             });
@@ -12263,7 +12283,12 @@
             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);
@@ -13333,10 +13358,20 @@
                 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
@@ -14556,6 +14591,10 @@
             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, {
@@ -14585,55 +14624,79 @@
                 }
             }
             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
@@ -14656,7 +14719,7 @@
                                     : 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
@@ -14684,7 +14747,7 @@
                         else {
                             top = 50; // Default fallback
                         }
-                        this.addFloatingGroup(from, {
+                        this.addFloatingGroup(source, {
                             height: box.height,
                             width: box.width,
                             position: {
@@ -14695,7 +14758,7 @@
                     }
                 }
             }
-            from.panels.forEach((panel) => {
+            source.panels.forEach((panel) => {
                 this._onDidMovePanel.fire({ panel, from });
             });
             this.debouncedUpdateAllPositions();
@@ -14706,6 +14769,11 @@
                 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/dist/esm/dnd/groupDragHandler.js

@@ -24,6 +24,9 @@ export 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) {

package/dist/esm/dockview/dockviewComponent.js

@@ -744,10 +744,20 @@ export 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
@@ -1969,6 +1979,10 @@ export 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, {
@@ -1998,55 +2012,79 @@ export 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
@@ -2069,7 +2107,7 @@ export 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
@@ -2097,7 +2135,7 @@ export class DockviewComponent extends BaseGrid {
                     else {
                         top = 50; // Default fallback
                     }
-                    this.addFloatingGroup(from, {
+                    this.addFloatingGroup(source, {
                         height: box.height,
                         width: box.width,
                         position: {
@@ -2108,7 +2146,7 @@ export class DockviewComponent extends BaseGrid {
                 }
             }
         }
-        from.panels.forEach((panel) => {
+        source.panels.forEach((panel) => {
             this._onDidMovePanel.fire({ panel, from });
         });
         this.debouncedUpdateAllPositions();
@@ -2119,6 +2157,11 @@ export 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/dist/esm/dockview/dockviewShell.js

@@ -262,7 +262,12 @@ export 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);

package/dist/esm/overlay/overlayRenderContainer.js

@@ -90,8 +90,14 @@ export 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);
@@ -202,8 +208,8 @@ export 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);
         });

package/dist/esm/resizable.d.ts

@@ -2,6 +2,8 @@ import { CompositeDisposable } from './lifecycle';
 export declare abstract class Resizable extends CompositeDisposable {
     private readonly _element;
     private _disableResizing;
+    private _lastWidth;
+    private _lastHeight;
     get element(): HTMLElement;
     get disableResizing(): boolean;
     set disableResizing(value: boolean);

package/dist/esm/resizable.js

@@ -12,6 +12,8 @@ export 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) => {
@@ -48,7 +50,16 @@ export 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);
         }));
     }