dockview-core 1.17.2 → 2.0.0

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

@@ -512,7 +512,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
             id: string;
             window: Window;
         }) => void;
-    }): Promise<void>;
+    }): Promise<boolean>;
     setGap(gap: number | undefined): void;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     /**

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

@@ -4,6 +4,14 @@ import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
+export interface DockviewGroupMoveParams {
+    group?: DockviewGroupPanel;
+    position?: Position;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
+}
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
@@ -12,10 +20,7 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
      * If you require the Window object
      */
     getWindow(): Window;
-    moveTo(options: {
-        group?: DockviewGroupPanel;
-        position?: Position;
-    }): void;
+    moveTo(options: DockviewGroupMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -36,10 +41,7 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     constructor(id: string, accessor: DockviewComponent);
     close(): void;
     getWindow(): Window;
-    moveTo(options: {
-        group?: DockviewGroupPanel;
-        position?: Position;
-    }): void;
+    moveTo(options: DockviewGroupMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -47,6 +47,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
                 position: options.group
                     ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
                     : 'center',
+                index: options.index,
             },
         });
     }

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

@@ -3,9 +3,8 @@ import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { DockviewPanel } from '../dockview/dockviewPanel';
 import { DockviewComponent } from '../dockview/dockviewComponent';
-import { Position } from '../dnd/droptarget';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
+import { DockviewGroupMoveParams, DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
 import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 export interface TitleEvent {
     readonly title: string;
@@ -18,6 +17,7 @@ export interface ActiveGroupEvent {
 }
 export interface GroupChangedEvent {
 }
+export type DockviewPanelMoveParams = DockviewGroupMoveParams;
 export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' | 'onDidConstraintsChange' | 'setConstraints'> {
     /**
      * The id of the tab component renderer
@@ -38,11 +38,7 @@ export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' |
     close(): void;
     setTitle(title: string): void;
     setRenderer(renderer: DockviewPanelRenderer): void;
-    moveTo(options: {
-        group: DockviewGroupPanel;
-        position?: Position;
-        index?: number;
-    }): void;
+    moveTo(options: DockviewPanelMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -52,10 +48,10 @@ export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' |
     getWindow(): Window;
 }
 export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implements DockviewPanelApi {
-    private panel;
+    private readonly panel;
     private readonly accessor;
     private _group;
-    private _tabComponent;
+    private readonly _tabComponent;
     readonly _onDidTitleChange: Emitter<TitleEvent>;
     readonly onDidTitleChange: Event<TitleEvent>;
     private readonly _onDidActiveGroupChange;
@@ -76,11 +72,7 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     get tabComponent(): string | undefined;
     constructor(panel: DockviewPanel, group: DockviewGroupPanel, accessor: DockviewComponent, component: string, tabComponent?: string);
     getWindow(): Window;
-    moveTo(options: {
-        group: DockviewGroupPanel;
-        position?: Position;
-        index?: number;
-    }): void;
+    moveTo(options: DockviewPanelMoveParams): void;
     setTitle(title: string): void;
     setRenderer(renderer: DockviewPanelRenderer): void;
     close(): void;

package/dist/esm/api/dockviewPanelApi.js

@@ -56,12 +56,14 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         return this.group.api.getWindow();
     }
     moveTo(options) {
-        var _a;
+        var _a, _b;
         this.accessor.moveGroupOrPanel({
             from: { groupId: this._group.id, panelId: this.panel.id },
             to: {
-                group: options.group,
-                position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
+                group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
+                position: options.group
+                    ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
+                    : 'center',
                 index: options.index,
             },
         });

package/dist/esm/dnd/abstractDragHandler.js

@@ -44,7 +44,7 @@ export class DragHandler extends CompositeDisposable {
                      * dnd logic. You can see the code at
                      * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
                      */
-                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                    event.dataTransfer.setData('text/plain', '');
                 }
             }
         }), addDisposableListener(this.el, 'dragend', () => {

package/dist/esm/dnd/dnd.d.ts

@@ -7,8 +7,8 @@ export interface IDragAndDropObserverCallbacks {
     onDragOver?: (e: DragEvent) => void;
 }
 export declare class DragAndDropObserver extends CompositeDisposable {
-    private element;
-    private callbacks;
+    private readonly element;
+    private readonly callbacks;
     private target;
     constructor(element: HTMLElement, callbacks: IDragAndDropObserverCallbacks);
     onDragEnter(e: DragEvent): void;

package/dist/esm/dnd/droptarget.js

@@ -117,12 +117,12 @@ export class Droptarget extends CompositeDisposable {
                 this.markAsUsed(e);
                 if (!this.targetElement) {
                     this.targetElement = document.createElement('div');
-                    this.targetElement.className = 'drop-target-dropzone';
+                    this.targetElement.className = 'dv-drop-target-dropzone';
                     this.overlayElement = document.createElement('div');
-                    this.overlayElement.className = 'drop-target-selection';
+                    this.overlayElement.className = 'dv-drop-target-selection';
                     this._state = 'center';
                     this.targetElement.appendChild(this.overlayElement);
-                    this.element.classList.add('drop-target');
+                    this.element.classList.add('dv-drop-target');
                     this.element.append(this.targetElement);
                 }
                 this.toggleClasses(quadrant, width, height);
@@ -260,7 +260,7 @@ export class Droptarget extends CompositeDisposable {
             this.element.removeChild(this.targetElement);
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('drop-target');
+            this.element.classList.remove('dv-drop-target');
         }
     }
 }

package/dist/esm/dockview/components/panel/content.d.ts

@@ -21,9 +21,9 @@ export interface IContentContainer extends IDisposable {
 export declare class ContentContainer extends CompositeDisposable implements IContentContainer {
     private readonly accessor;
     private readonly group;
-    private _element;
+    private readonly _element;
     private panel;
-    private disposable;
+    private readonly disposable;
     private readonly _onDidFocus;
     readonly onDidFocus: Event<void>;
     private readonly _onDidBlur;

package/dist/esm/dockview/components/panel/content.js

@@ -1,5 +1,5 @@
 import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';
-import { Emitter, } from '../../../events';
+import { Emitter } from '../../../events';
 import { trackFocus } from '../../../dom';
 import { Droptarget } from '../../../dnd/droptarget';
 import { getPanelData } from '../../../dnd/dataTransfer';
@@ -17,7 +17,7 @@ export class ContentContainer extends CompositeDisposable {
         this._onDidBlur = new Emitter();
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
-        this._element.className = 'content-container';
+        this._element.className = 'dv-content-container';
         this._element.tabIndex = -1;
         this.addDisposables(this._onDidFocus, this._onDidBlur);
         this.dropTarget = new Droptarget(this.element, {
@@ -90,6 +90,8 @@ export class ContentContainer extends CompositeDisposable {
                     referenceContainer: this,
                 });
                 break;
+            default:
+                throw new Error(`dockview: invalid renderer type '${panel.api.renderer}'`);
         }
         if (doRender) {
             const focusTracker = trackFocus(container);

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

@@ -1,9 +1,9 @@
 import { CompositeDisposable } from '../../../lifecycle';
 import { ITabRenderer, GroupPanelPartInitParameters } from '../../types';
 export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
-    private _element;
-    private _content;
-    private action;
+    private readonly _element;
+    private readonly _content;
+    private readonly action;
     private _title;
     get element(): HTMLElement;
     constructor();

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

@@ -38,10 +38,10 @@ export class Tab extends CompositeDisposable {
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
-        this._element.className = 'tab';
+        this._element.className = 'dv-tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
-        toggleClass(this.element, 'inactive-tab', true);
+        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, {
             acceptedTargetZones: ['center'],
@@ -74,8 +74,8 @@ export class Tab extends CompositeDisposable {
         }), this.dropTarget);
     }
     setActive(isActive) {
-        toggleClass(this.element, 'active-tab', isActive);
-        toggleClass(this.element, 'inactive-tab', !isActive);
+        toggleClass(this.element, 'dv-active-tab', isActive);
+        toggleClass(this.element, 'dv-inactive-tab', !isActive);
     }
     setContent(part) {
         if (this.content) {

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

@@ -92,16 +92,16 @@ export class TabsContainer extends CompositeDisposable {
         this._onWillShowOverlay = new Emitter();
         this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._element = document.createElement('div');
-        this._element.className = 'tabs-and-actions-container';
+        this._element.className = 'dv-tabs-and-actions-container';
         toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
         this.rightActionsContainer = document.createElement('div');
-        this.rightActionsContainer.className = 'right-actions-container';
+        this.rightActionsContainer.className = 'dv-right-actions-container';
         this.leftActionsContainer = document.createElement('div');
-        this.leftActionsContainer.className = 'left-actions-container';
+        this.leftActionsContainer.className = 'dv-left-actions-container';
         this.preActionsContainer = document.createElement('div');
-        this.preActionsContainer.className = 'pre-actions-container';
+        this.preActionsContainer.className = 'dv-pre-actions-container';
         this.tabContainer = document.createElement('div');
-        this.tabContainer.className = 'tabs-container';
+        this.tabContainer.className = 'dv-tabs-container';
         this.voidContainer = new VoidContainer(this.accessor, this.group);
         this._element.appendChild(this.preActionsContainer);
         this._element.appendChild(this.tabContainer);
@@ -190,14 +190,10 @@ export class TabsContainer extends CompositeDisposable {
         });
     }
     openPanel(panel, index = this.tabs.length) {
-        var _a;
         if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
             return;
         }
         const tab = new Tab(panel, this.accessor, this.group);
-        if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
-            throw new Error('invalid header component');
-        }
         tab.setContent(panel.view.tab);
         const disposable = new CompositeDisposable(tab.onDragStart((event) => {
             this._onTabDragStart.fire({ nativeEvent: event, panel });

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

@@ -17,7 +17,7 @@ export class VoidContainer extends CompositeDisposable {
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
-        this._element.className = 'void-container';
+        this._element.className = 'dv-void-container';
         this._element.tabIndex = 0;
         this._element.draggable = true;
         this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {

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

@@ -1,7 +1,7 @@
 import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';
 import { CompositeDisposable } from '../../../lifecycle';
 export declare class Watermark extends CompositeDisposable implements IWatermarkRenderer {
-    private _element;
+    private readonly _element;
     private _group;
     private _api;
     get element(): HTMLElement;

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

@@ -9,19 +9,19 @@ export class Watermark extends CompositeDisposable {
     constructor() {
         super();
         this._element = document.createElement('div');
-        this._element.className = 'watermark';
+        this._element.className = 'dv-watermark';
         const title = document.createElement('div');
-        title.className = 'watermark-title';
+        title.className = 'dv-watermark-title';
         const emptySpace = document.createElement('span');
         emptySpace.style.flexGrow = '1';
         const content = document.createElement('div');
-        content.className = 'watermark-content';
+        content.className = 'dv-watermark-content';
         this._element.appendChild(title);
         this._element.appendChild(content);
         const actionsContainer = document.createElement('div');
-        actionsContainer.className = 'actions-container';
+        actionsContainer.className = 'dv-actions-container';
         const closeAnchor = document.createElement('div');
-        closeAnchor.className = 'close-action';
+        closeAnchor.className = 'dv-close-action';
         closeAnchor.appendChild(createCloseButton());
         actionsContainer.appendChild(closeAnchor);
         title.appendChild(emptySpace);
@@ -41,6 +41,6 @@ export class Watermark extends CompositeDisposable {
     }
     render() {
         const isOneGroup = !!(this._api && this._api.size <= 1);
-        toggleClass(this.element, 'has-actions', isOneGroup);
+        toggleClass(this.element, 'dv-has-actions', isOneGroup);
     }
 }

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

@@ -129,7 +129,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
             id: string;
             window: Window;
         }) => void;
-    }): Promise<void>;
+    }): Promise<boolean>;
 }
 export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent {
     private readonly nextGroupId;
@@ -180,7 +180,6 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get floatingGroups(): DockviewFloatingGroupPanel[];
     constructor(parentElement: HTMLElement, options: DockviewComponentOptions);
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: {
-        skipRemoveGroup?: boolean;
         position?: Box;
         popoutUrl?: string;
         onDidOpen?: (event: {
@@ -192,7 +191,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
             window: Window;
         }) => void;
         overridePopoutGroup?: DockviewGroupPanel;
-    }): Promise<void>;
+    }): Promise<boolean>;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptionsInternal): void;
     private orthogonalize;
     updateOptions(options: Partial<DockviewComponentOptions>): void;

package/dist/esm/dockview/dockviewComponent.js

@@ -256,9 +256,6 @@ export class DockviewComponent extends BaseGrid {
         }
         const box = getBox();
         const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
-        if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setVisible(false);
-        }
         const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
         theme !== null && theme !== void 0 ? theme : '', {
             url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
@@ -277,11 +274,11 @@ export class DockviewComponent extends BaseGrid {
             .then((popoutContainer) => {
             var _a;
             if (_window.isDisposed) {
-                return;
+                return false;
             }
             if (popoutContainer === null) {
                 popoutWindowDisposable.dispose();
-                return;
+                return false;
             }
             const gready = document.createElement('div');
             gready.className = 'dv-overlay-render-container';
@@ -290,30 +287,40 @@ export class DockviewComponent extends BaseGrid {
                 ? itemToPopout.group
                 : itemToPopout;
             const referenceLocation = itemToPopout.api.location.type;
-            const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
+            /**
+             * The group that is being added doesn't already exist within the DOM, the most likely occurance
+             * of this case is when being called from the `fromJSON(...)` method
+             */
+            const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
+            const group = !isGroupAddedToDom
+                ? referenceGroup
+                : (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
             group.model.renderContainer = overlayRenderContainer;
-            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
+            group.layout(_window.window.innerWidth, _window.window.innerHeight);
+            if (!this._groups.has(group.api.id)) {
                 this._onDidAddGroup.fire(group);
             }
-            if (itemToPopout instanceof DockviewPanel) {
-                this.movingLock(() => {
-                    const panel = referenceGroup.model.removePanel(itemToPopout);
-                    group.model.openPanel(panel);
-                });
-            }
-            else {
-                this.movingLock(() => moveGroupWithoutDestroying({
-                    from: referenceGroup,
-                    to: group,
-                }));
-                switch (referenceLocation) {
-                    case 'grid':
-                        referenceGroup.api.setVisible(false);
-                        break;
-                    case 'floating':
-                    case 'popout':
-                        this.removeGroup(referenceGroup);
-                        break;
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
+                if (itemToPopout instanceof DockviewPanel) {
+                    this.movingLock(() => {
+                        const panel = referenceGroup.model.removePanel(itemToPopout);
+                        group.model.openPanel(panel);
+                    });
+                }
+                else {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: referenceGroup,
+                        to: group,
+                    }));
+                    switch (referenceLocation) {
+                        case 'grid':
+                            referenceGroup.api.setVisible(false);
+                            break;
+                        case 'floating':
+                        case 'popout':
+                            this.removeGroup(referenceGroup);
+                            break;
+                    }
                 }
             }
             popoutContainer.classList.add('dv-dockview');
@@ -324,6 +331,10 @@ export class DockviewComponent extends BaseGrid {
                 type: 'popout',
                 getWindow: () => _window.window,
             };
+            if (isGroupAddedToDom &&
+                itemToPopout.api.location.type === 'grid') {
+                itemToPopout.api.setVisible(false);
+            }
             this.doSetGroupAndPanelActive(group);
             popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
                 var _a;
@@ -338,9 +349,13 @@ export class DockviewComponent extends BaseGrid {
             const value = {
                 window: _window,
                 popoutGroup: group,
-                referenceGroup: this.getPanel(referenceGroup.id)
-                    ? referenceGroup.id
-                    : undefined,
+                referenceGroup: !isGroupAddedToDom
+                    ? undefined
+                    : referenceGroup
+                        ? this.getPanel(referenceGroup.id)
+                            ? referenceGroup.id
+                            : undefined
+                        : undefined,
                 disposable: {
                     dispose: () => {
                         popoutWindowDisposable.dispose();
@@ -355,9 +370,10 @@ export class DockviewComponent extends BaseGrid {
              * window dimensions
              */
             addDisposableWindowListener(_window.window, 'resize', () => {
-                group.layout(window.innerWidth, window.innerHeight);
+                group.layout(_window.window.innerWidth, _window.window.innerHeight);
             }), overlayRenderContainer, Disposable.from(() => {
-                if (this.getPanel(referenceGroup.id)) {
+                if (isGroupAddedToDom &&
+                    this.getPanel(referenceGroup.id)) {
                     this.movingLock(() => moveGroupWithoutDestroying({
                         from: group,
                         to: referenceGroup,
@@ -372,21 +388,27 @@ export class DockviewComponent extends BaseGrid {
                     }
                 }
                 else if (this.getPanel(group.id)) {
-                    const removedGroup = this.doRemoveGroup(group, {
+                    this.doRemoveGroup(group, {
                         skipDispose: true,
                         skipActive: true,
+                        skipPopoutReturn: true,
                     });
+                    const removedGroup = group;
                     removedGroup.model.renderContainer =
                         this.overlayRenderContainer;
                     removedGroup.model.location = { type: 'grid' };
                     returnedGroup = removedGroup;
+                    this.doAddGroup(removedGroup, [0]);
+                    this.doSetGroupAndPanelActive(removedGroup);
                 }
             }));
             this._popoutGroups.push(value);
             this.updateWatermark();
+            return true;
         })
             .catch((err) => {
             console.error('dockview: failed to create popout window', err);
+            return false;
         });
     }
     addFloatingGroup(item, options) {
@@ -490,7 +512,7 @@ export class DockviewComponent extends BaseGrid {
                 : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
                 : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
-        const el = group.element.querySelector('.void-container');
+        const el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('failed to find drag handle');
         }
@@ -775,7 +797,6 @@ export class DockviewComponent extends BaseGrid {
                 this.addPopoutGroup((_c = (gridReferenceGroup
                     ? this.getPanel(gridReferenceGroup)
                     : undefined)) !== null && _c !== void 0 ? _c : group, {
-                    skipRemoveGroup: true,
                     position: position !== null && position !== void 0 ? position : undefined,
                     overridePopoutGroup: gridReferenceGroup
                         ? group
@@ -793,6 +814,7 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         catch (err) {
+            console.error('dockview: failed to deserialize layout. Reverting changes', err);
             /**
              * Takes all the successfully created groups and remove all of their panels.
              */
@@ -860,11 +882,13 @@ export class DockviewComponent extends BaseGrid {
             width: options.initialWidth,
             height: options.initialHeight,
         };
+        let index;
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel = typeof options.position.referencePanel === 'string'
                     ? this.getGroupPanel(options.position.referencePanel)
                     : options.position.referencePanel;
+                index = options.position.index;
                 if (!referencePanel) {
                     throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
                 }
@@ -875,6 +899,7 @@ export class DockviewComponent extends BaseGrid {
                     typeof options.position.referenceGroup === 'string'
                         ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                         : options.position.referenceGroup;
+                index = options.position.index;
                 if (!referenceGroup) {
                     throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
                 }
@@ -885,6 +910,7 @@ export class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -914,6 +940,7 @@ export class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
             }
             else if (referenceGroup.api.location.type === 'floating' ||
@@ -922,6 +949,7 @@ export class DockviewComponent extends BaseGrid {
                 referenceGroup.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 referenceGroup.api.setSize({
                     width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -942,6 +970,7 @@ export class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -960,6 +989,7 @@ export class DockviewComponent extends BaseGrid {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index,
             });
         }
         else {
@@ -970,6 +1000,7 @@ export class DockviewComponent extends BaseGrid {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index,
             });
             if (!options.inactive) {
                 this.doSetGroupAndPanelActive(group);