dockview-core 1.17.2 → 2.0.0

package/dist/cjs/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/cjs/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/cjs/api/dockviewGroupPanelApi.js

@@ -71,6 +71,7 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
                 position: options.group
                     ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
                     : 'center',
+                index: options.index,
             },
         });
     };

package/dist/cjs/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/cjs/api/dockviewPanelApi.js

@@ -100,12 +100,14 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
         return this.group.api.getWindow();
     };
     DockviewPanelApiImpl.prototype.moveTo = function (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/cjs/dnd/abstractDragHandler.js

@@ -65,7 +65,7 @@ var DragHandler = /** @class */ (function (_super) {
                      * 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', '');
                 }
             }
         }), (0, events_1.addDisposableListener)(this.el, 'dragend', function () {

package/dist/cjs/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/cjs/dnd/droptarget.js

@@ -147,12 +147,12 @@ var Droptarget = /** @class */ (function (_super) {
                 _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);
@@ -298,7 +298,7 @@ var Droptarget = /** @class */ (function (_super) {
             this.element.removeChild(this.targetElement);
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('drop-target');
+            this.element.classList.remove('dv-drop-target');
         }
     };
     Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';

package/dist/cjs/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/cjs/dockview/components/panel/content.js

@@ -33,7 +33,7 @@ var ContentContainer = /** @class */ (function (_super) {
         _this._onDidBlur = new events_1.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_1.Droptarget(_this.element, {
@@ -116,6 +116,8 @@ var ContentContainer = /** @class */ (function (_super) {
                     referenceContainer: this,
                 });
                 break;
+            default:
+                throw new Error("dockview: invalid renderer type '".concat(panel.api.renderer, "'"));
         }
         if (doRender) {
             var focusTracker = (0, dom_1.trackFocus)(container);

package/dist/cjs/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/cjs/dockview/components/tab/tab.js

@@ -58,10 +58,10 @@ var Tab = /** @class */ (function (_super) {
         _this._onDragStart = new events_1.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;
-        (0, dom_1.toggleClass)(_this.element, 'inactive-tab', true);
+        (0, dom_1.toggleClass)(_this.element, 'dv-inactive-tab', true);
         var dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel);
         _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
             acceptedTargetZones: ['center'],
@@ -102,8 +102,8 @@ var Tab = /** @class */ (function (_super) {
         configurable: true
     });
     Tab.prototype.setActive = function (isActive) {
-        (0, dom_1.toggleClass)(this.element, 'active-tab', isActive);
-        (0, dom_1.toggleClass)(this.element, 'inactive-tab', !isActive);
+        (0, dom_1.toggleClass)(this.element, 'dv-active-tab', isActive);
+        (0, dom_1.toggleClass)(this.element, 'dv-inactive-tab', !isActive);
     };
     Tab.prototype.setContent = function (part) {
         if (this.content) {

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

@@ -77,16 +77,16 @@ var TabsContainer = /** @class */ (function (_super) {
         _this._onWillShowOverlay = new events_1.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';
         (0, dom_1.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_1.VoidContainer(_this.accessor, _this.group);
         _this._element.appendChild(_this.preActionsContainer);
         _this._element.appendChild(_this.tabContainer);
@@ -262,15 +262,11 @@ var TabsContainer = /** @class */ (function (_super) {
     };
     TabsContainer.prototype.openPanel = function (panel, index) {
         var _this = this;
-        var _a;
         if (index === void 0) { index = this.tabs.length; }
         if (this.tabs.find(function (tab) { return tab.value.panel.id === panel.id; })) {
             return;
         }
         var tab = new tab_1.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);
         var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
             _this._onTabDragStart.fire({ nativeEvent: event, panel: panel });

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

@@ -33,7 +33,7 @@ var VoidContainer = /** @class */ (function (_super) {
         _this._onDragStart = new events_1.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, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function () {

package/dist/cjs/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/cjs/dockview/components/watermark/watermark.js

@@ -25,19 +25,19 @@ var Watermark = /** @class */ (function (_super) {
     function Watermark() {
         var _this = _super.call(this) || this;
         _this._element = document.createElement('div');
-        _this._element.className = 'watermark';
+        _this._element.className = 'dv-watermark';
         var title = document.createElement('div');
-        title.className = 'watermark-title';
+        title.className = 'dv-watermark-title';
         var emptySpace = document.createElement('span');
         emptySpace.style.flexGrow = '1';
         var content = document.createElement('div');
-        content.className = 'watermark-content';
+        content.className = 'dv-watermark-content';
         _this._element.appendChild(title);
         _this._element.appendChild(content);
         var actionsContainer = document.createElement('div');
-        actionsContainer.className = 'actions-container';
+        actionsContainer.className = 'dv-actions-container';
         var closeAnchor = document.createElement('div');
-        closeAnchor.className = 'close-action';
+        closeAnchor.className = 'dv-close-action';
         closeAnchor.appendChild((0, svg_1.createCloseButton)());
         actionsContainer.appendChild(closeAnchor);
         title.appendChild(emptySpace);
@@ -65,7 +65,7 @@ var Watermark = /** @class */ (function (_super) {
     };
     Watermark.prototype.render = function () {
         var isOneGroup = !!(this._api && this._api.size <= 1);
-        (0, dom_1.toggleClass)(this.element, 'has-actions', isOneGroup);
+        (0, dom_1.toggleClass)(this.element, 'dv-has-actions', isOneGroup);
     };
     return Watermark;
 }(lifecycle_1.CompositeDisposable));

package/dist/cjs/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/cjs/dockview/dockviewComponent.js

@@ -381,9 +381,6 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         var box = getBox();
         var 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);
-        }
         var _window = new popoutWindow_1.PopoutWindow("".concat(this.id, "-").concat(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',
@@ -402,11 +399,11 @@ var DockviewComponent = /** @class */ (function (_super) {
             .then(function (popoutContainer) {
             var _a;
             if (_window.isDisposed) {
-                return;
+                return false;
             }
             if (popoutContainer === null) {
                 popoutWindowDisposable.dispose();
-                return;
+                return false;
             }
             var gready = document.createElement('div');
             gready.className = 'dv-overlay-render-container';
@@ -415,32 +412,42 @@ var DockviewComponent = /** @class */ (function (_super) {
                 ? itemToPopout.group
                 : itemToPopout;
             var referenceLocation = itemToPopout.api.location.type;
-            var 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
+             */
+            var isGroupAddedToDom = referenceGroup.element.parentElement !== null;
+            var 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_1.DockviewPanel) {
-                _this.movingLock(function () {
-                    var panel = referenceGroup.model.removePanel(itemToPopout);
-                    group.model.openPanel(panel);
-                });
-            }
-            else {
-                _this.movingLock(function () {
-                    return moveGroupWithoutDestroying({
-                        from: referenceGroup,
-                        to: group,
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
+                if (itemToPopout instanceof dockviewPanel_1.DockviewPanel) {
+                    _this.movingLock(function () {
+                        var panel = referenceGroup.model.removePanel(itemToPopout);
+                        group.model.openPanel(panel);
                     });
-                });
-                switch (referenceLocation) {
-                    case 'grid':
-                        referenceGroup.api.setVisible(false);
-                        break;
-                    case 'floating':
-                    case 'popout':
-                        _this.removeGroup(referenceGroup);
-                        break;
+                }
+                else {
+                    _this.movingLock(function () {
+                        return 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');
@@ -451,6 +458,10 @@ var DockviewComponent = /** @class */ (function (_super) {
                 type: 'popout',
                 getWindow: function () { return _window.window; },
             };
+            if (isGroupAddedToDom &&
+                itemToPopout.api.location.type === 'grid') {
+                itemToPopout.api.setVisible(false);
+            }
             _this.doSetGroupAndPanelActive(group);
             popoutWindowDisposable.addDisposables(group.api.onDidActiveChange(function (event) {
                 var _a;
@@ -465,9 +476,13 @@ var DockviewComponent = /** @class */ (function (_super) {
             var 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: function () {
                         popoutWindowDisposable.dispose();
@@ -482,9 +497,10 @@ var DockviewComponent = /** @class */ (function (_super) {
              * window dimensions
              */
             (0, events_1.addDisposableWindowListener)(_window.window, 'resize', function () {
-                group.layout(window.innerWidth, window.innerHeight);
+                group.layout(_window.window.innerWidth, _window.window.innerHeight);
             }), overlayRenderContainer, lifecycle_1.Disposable.from(function () {
-                if (_this.getPanel(referenceGroup.id)) {
+                if (isGroupAddedToDom &&
+                    _this.getPanel(referenceGroup.id)) {
                     _this.movingLock(function () {
                         return moveGroupWithoutDestroying({
                             from: group,
@@ -501,21 +517,27 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                 }
                 else if (_this.getPanel(group.id)) {
-                    var removedGroup = _this.doRemoveGroup(group, {
+                    _this.doRemoveGroup(group, {
                         skipDispose: true,
                         skipActive: true,
+                        skipPopoutReturn: true,
                     });
+                    var 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(function (err) {
             console.error('dockview: failed to create popout window', err);
+            return false;
         });
     };
     DockviewComponent.prototype.addFloatingGroup = function (item, options) {
@@ -626,7 +648,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : constants_1.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 : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
-        var el = group.element.querySelector('.void-container');
+        var el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('failed to find drag handle');
         }
@@ -960,7 +982,6 @@ var DockviewComponent = /** @class */ (function (_super) {
                     this.addPopoutGroup((_k = (gridReferenceGroup
                         ? this.getPanel(gridReferenceGroup)
                         : undefined)) !== null && _k !== void 0 ? _k : group, {
-                        skipRemoveGroup: true,
                         position: position !== null && position !== void 0 ? position : undefined,
                         overridePopoutGroup: gridReferenceGroup
                             ? group
@@ -996,6 +1017,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }
         catch (err) {
+            console.error('dockview: failed to deserialize layout. Reverting changes', err);
             try {
                 /**
                  * Takes all the successfully created groups and remove all of their panels.
@@ -1125,11 +1147,13 @@ var DockviewComponent = /** @class */ (function (_super) {
             width: options.initialWidth,
             height: options.initialHeight,
         };
+        var index;
         if (options.position) {
             if ((0, options_1.isPanelOptionsWithPanel)(options.position)) {
                 var referencePanel = typeof options.position.referencePanel === 'string'
                     ? this.getGroupPanel(options.position.referencePanel)
                     : options.position.referencePanel;
+                index = options.position.index;
                 if (!referencePanel) {
                     throw new Error("referencePanel '".concat(options.position.referencePanel, "' does not exist"));
                 }
@@ -1140,6 +1164,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     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 '".concat(options.position.referenceGroup, "' does not exist"));
                 }
@@ -1150,6 +1175,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.openPanel(panel_1, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -1179,6 +1205,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: index,
                 });
             }
             else if (referenceGroup.api.location.type === 'floating' ||
@@ -1187,6 +1214,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 referenceGroup.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: index,
                 });
                 referenceGroup.api.setSize({
                     width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -1207,6 +1235,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index: index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -1225,6 +1254,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index: index,
             });
         }
         else {
@@ -1235,6 +1265,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index: index,
             });
             if (!options.inactive) {
                 this.doSetGroupAndPanelActive(group);