dockview-core 4.4.0 → 4.5.0

package/dist/esm/api/dockviewGroupPanelApi.d.ts

@@ -11,6 +11,10 @@ export interface DockviewGroupMoveParams {
      * The index to place the panel within a group, only applicable if the placement is within an existing group
      */
     index?: number;
+    /**
+     * Whether to skip setting the group as active after moving
+     */
+    skipSetActive?: boolean;
 }
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -30,23 +30,24 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
             : window;
     }
     moveTo(options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!this._group) {
             throw new Error(NOT_INITIALIZED_MESSAGE);
         }
         const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
             direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
-            skipSetActive: true,
+            skipSetActive: (_c = options.skipSetActive) !== null && _c !== void 0 ? _c : false,
         });
         this.accessor.moveGroupOrPanel({
             from: { groupId: this._group.id },
             to: {
                 group,
                 position: options.group
-                    ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
+                    ? (_d = options.position) !== null && _d !== void 0 ? _d : 'center'
                     : 'center',
                 index: options.index,
             },
+            skipSetActive: options.skipSetActive,
         });
     }
     maximize() {

package/dist/esm/api/dockviewPanelApi.js

@@ -66,6 +66,7 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
                     : 'center',
                 index: options.index,
             },
+            skipSetActive: options.skipSetActive,
         });
     }
     setTitle(title) {

package/dist/esm/dockview/components/tab/tab.d.ts

@@ -23,5 +23,6 @@ export declare class Tab extends CompositeDisposable {
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
     setContent(part: ITabRenderer): void;
+    updateDragAndDropState(): void;
     dispose(): void;
 }

package/dist/esm/dockview/components/tab/tab.js

@@ -41,7 +41,7 @@ export class Tab extends CompositeDisposable {
         this._element = document.createElement('div');
         this._element.className = 'dv-tab';
         this._element.tabIndex = 0;
-        this._element.draggable = true;
+        this._element.draggable = !this.accessor.options.disableDnd;
         toggleClass(this.element, 'dv-inactive-tab', true);
         const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
         this.dropTarget = new Droptarget(this._element, {
@@ -89,6 +89,9 @@ export class Tab extends CompositeDisposable {
         this.content = part;
         this._element.appendChild(this.content.element);
     }
+    updateDragAndDropState() {
+        this._element.draggable = !this.accessor.options.disableDnd;
+    }
     dispose() {
         super.dispose();
     }

package/dist/esm/dockview/components/titlebar/tabs.d.ts

@@ -42,4 +42,5 @@ export declare class Tabs extends CompositeDisposable {
     delete(id: string): void;
     private addTab;
     private toggleDropdown;
+    updateDragAndDropState(): void;
 }

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -186,4 +186,9 @@ export class Tabs extends CompositeDisposable {
                 .map((x) => x.value.panel.id);
         this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
     }
+    updateDragAndDropState() {
+        for (const tab of this._tabs) {
+            tab.value.updateDragAndDropState();
+        }
+    }
 }

package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts

@@ -38,6 +38,7 @@ export interface ITabsContainer extends IDisposable {
     setPrefixActionsElement(element: HTMLElement | undefined): void;
     show(): void;
     hide(): void;
+    updateDragAndDropState(): void;
 }
 export declare class TabsContainer extends CompositeDisposable implements ITabsContainer {
     private readonly accessor;
@@ -82,4 +83,5 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     closePanel(panel: IDockviewPanel): void;
     private updateClassnames;
     private toggleDropdown;
+    updateDragAndDropState(): void;
 }

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -228,4 +228,8 @@ export class TabsContainer extends CompositeDisposable {
             });
         }));
     }
+    updateDragAndDropState() {
+        this.tabs.updateDragAndDropState();
+        this.voidContainer.updateDragAndDropState();
+    }
 }

package/dist/esm/dockview/components/titlebar/voidContainer.d.ts

@@ -15,4 +15,5 @@ export declare class VoidContainer extends CompositeDisposable {
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
+    updateDragAndDropState(): void;
 }

package/dist/esm/dockview/components/titlebar/voidContainer.js

@@ -17,7 +17,7 @@ export class VoidContainer extends CompositeDisposable {
         this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
         this._element.className = 'dv-void-container';
-        this._element.draggable = true;
+        this._element.draggable = !this.accessor.options.disableDnd;
         this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
             this.accessor.doSetGroupActive(this.group);
         }));
@@ -40,4 +40,7 @@ export class VoidContainer extends CompositeDisposable {
             this._onDrop.fire(event);
         }), this.dropTarget);
     }
+    updateDragAndDropState() {
+        this._element.draggable = !this.accessor.options.disableDnd;
+    }
 }

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -80,6 +80,7 @@ type MoveGroupOptions = {
         group: DockviewGroupPanel;
         position: Position;
     };
+    skipSetActive?: boolean;
 };
 type MoveGroupOrPanelOptions = {
     from: {
@@ -91,6 +92,7 @@ type MoveGroupOrPanelOptions = {
         position: Position;
         index?: number;
     };
+    skipSetActive?: boolean;
 };
 export interface FloatingGroupOptions {
     x?: number;
@@ -239,6 +241,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private orthogonalize;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     layout(width: number, height: number, forceResize?: boolean | undefined): void;
+    private updateDragAndDropState;
     focus(): void;
     getGroupPanel(id: string): IDockviewPanel | undefined;
     setActivePanel(panel: IDockviewPanel): void;

package/dist/esm/dockview/dockviewComponent.js

@@ -728,7 +728,12 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         this.updateDropTargetModel(options);
+        const oldDisableDnd = this.options.disableDnd;
         this._options = Object.assign(Object.assign({}, this.options), options);
+        const newDisableDnd = this.options.disableDnd;
+        if (oldDisableDnd !== newDisableDnd) {
+            this.updateDragAndDropState();
+        }
         if ('theme' in options) {
             this.updateTheme();
         }
@@ -743,6 +748,12 @@ export class DockviewComponent extends BaseGrid {
             }
         }
     }
+    updateDragAndDropState() {
+        // Update draggable state for all tabs and void containers
+        for (const group of this.groups) {
+            group.model.updateDragAndDropState();
+        }
+    }
     focus() {
         var _a;
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -1330,6 +1341,7 @@ export class DockviewComponent extends BaseGrid {
                     group: destinationGroup,
                     position: destinationTarget,
                 },
+                skipSetActive: options.skipSetActive,
             });
             return;
         }
@@ -1348,11 +1360,17 @@ export class DockviewComponent extends BaseGrid {
                 // remove the group and do not set a new group as active
                 this.doRemoveGroup(sourceGroup, { skipActive: true });
             }
-            this.movingLock(() => destinationGroup.model.openPanel(removedPanel, {
-                index: destinationIndex,
-                skipSetGroupActive: true,
-            }));
-            this.doSetGroupAndPanelActive(destinationGroup);
+            this.movingLock(() => {
+                var _a;
+                return destinationGroup.model.openPanel(removedPanel, {
+                    index: destinationIndex,
+                    skipSetActive: (_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false,
+                    skipSetGroupActive: true,
+                });
+            });
+            if (!options.skipSetActive) {
+                this.doSetGroupAndPanelActive(destinationGroup);
+            }
             this._onDidMovePanel.fire({
                 panel: removedPanel,
                 from: sourceGroup,
@@ -1455,6 +1473,7 @@ export class DockviewComponent extends BaseGrid {
         const target = options.to.position;
         if (target === 'center') {
             const activePanel = from.activePanel;
+            const targetActivePanel = to.activePanel;
             const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
                 skipSetActive: true,
             })));
@@ -1464,12 +1483,23 @@ export class DockviewComponent extends BaseGrid {
             this.movingLock(() => {
                 for (const panel of panels) {
                     to.model.openPanel(panel, {
-                        skipSetActive: panel !== activePanel,
+                        skipSetActive: true, // Always skip setting panels active during move
                         skipSetGroupActive: true,
                     });
                 }
             });
-            this.doSetGroupAndPanelActive(to);
+            if (!options.skipSetActive) {
+                // Make the moved panel (from the source group) active
+                if (activePanel) {
+                    this.doSetGroupAndPanelActive(to);
+                }
+            }
+            else if (targetActivePanel) {
+                // Ensure the target group's original active panel remains active
+                to.model.openPanel(targetActivePanel, {
+                    skipSetGroupActive: true
+                });
+            }
         }
         else {
             switch (from.api.location.type) {
@@ -1489,12 +1519,39 @@ export class DockviewComponent extends BaseGrid {
                     if (!selectedPopoutGroup) {
                         throw new Error('failed to find popout group');
                     }
-                    selectedPopoutGroup.disposable.dispose();
+                    // 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;
                 }
             }
-            if (from.api.location.type !== 'popout') {
+            // For moves to grid locations
+            if (to.api.location.type === 'grid') {
                 const referenceLocation = getGridLocation(to.element);
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                // Add to grid for all moves targeting grid location
                 let size;
                 switch (this.gridview.orientation) {
                     case Orientation.VERTICAL:
@@ -1512,10 +1569,49 @@ export class DockviewComponent extends BaseGrid {
                 }
                 this.gridview.addView(from, size, dropLocation);
             }
+            else if (to.api.location.type === 'floating') {
+                // For moves to floating locations, add as floating group
+                // Get the position/size from the target floating group
+                const targetFloatingGroup = this._floatingGroups.find((x) => x.group === to);
+                if (targetFloatingGroup) {
+                    const box = targetFloatingGroup.overlay.toJSON();
+                    // Calculate position based on available properties
+                    let left, top;
+                    if ('left' in box) {
+                        left = box.left + 50;
+                    }
+                    else if ('right' in box) {
+                        left = Math.max(0, box.right - box.width - 50);
+                    }
+                    else {
+                        left = 50; // Default fallback
+                    }
+                    if ('top' in box) {
+                        top = box.top + 50;
+                    }
+                    else if ('bottom' in box) {
+                        top = Math.max(0, box.bottom - box.height - 50);
+                    }
+                    else {
+                        top = 50; // Default fallback
+                    }
+                    this.addFloatingGroup(from, {
+                        height: box.height,
+                        width: box.width,
+                        position: {
+                            left,
+                            top,
+                        },
+                    });
+                }
+            }
         }
         from.panels.forEach((panel) => {
             this._onDidMovePanel.fire({ panel, from });
         });
+        if (!options.skipSetActive) {
+            this.doSetGroupAndPanelActive(from);
+        }
     }
     doSetGroupActive(group) {
         super.doSetGroupActive(group);

package/dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -123,9 +123,16 @@ export type DockviewGroupLocation = {
     getWindow: () => Window;
     popoutUrl?: string;
 };
+export interface WillShowOverlayLocationEventOptions {
+    readonly kind: DockviewGroupDropLocation;
+    readonly panel: IDockviewPanel | undefined;
+    readonly api: DockviewApi;
+    readonly group: DockviewGroupPanel | undefined;
+    getData: () => PanelTransfer | undefined;
+}
 export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
     private readonly event;
-    private readonly options;
+    readonly options: WillShowOverlayLocationEventOptions;
     get kind(): DockviewGroupDropLocation;
     get nativeEvent(): DragEvent;
     get position(): Position;
@@ -135,13 +142,7 @@ export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
     get group(): DockviewGroupPanel | undefined;
     preventDefault(): void;
     getData(): PanelTransfer | undefined;
-    constructor(event: WillShowOverlayEvent, options: {
-        kind: DockviewGroupDropLocation;
-        panel: IDockviewPanel | undefined;
-        api: DockviewApi;
-        group: DockviewGroupPanel | undefined;
-        getData: () => PanelTransfer | undefined;
-    });
+    constructor(event: WillShowOverlayEvent, options: WillShowOverlayLocationEventOptions);
 }
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
     private readonly container;
@@ -252,6 +253,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private updateContainer;
     canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
     private handleDropEvent;
+    updateDragAndDropState(): void;
     dispose(): void;
 }
 export {};

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -648,6 +648,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             }));
         }
     }
+    updateDragAndDropState() {
+        this.tabsContainer.updateDragAndDropState();
+    }
     dispose() {
         var _a, _b, _c;
         super.dispose();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",