dockview 1.5.2 → 1.6.0

package/dist/esm/dockview/dockviewComponent.js

@@ -1,26 +1,64 @@
 import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
-import { Position } from '../dnd/droptarget';
+import { directionToPosition, Droptarget } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
-import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewPanel } from './dockviewPanel';
 import { CompositeDisposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
 import { Watermark } from './components/watermark/watermark';
 import { sequentialNumberGenerator } from '../math';
 import { createComponent } from '../panel/componentFactory';
+import { isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, } from './options';
 import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
-import { Orientation } from '../splitview/core/splitview';
+import { Orientation, Sizing } from '../splitview/core/splitview';
 import { DefaultTab } from './components/tab/defaultTab';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { DefaultGroupPanelView } from './defaultGroupPanelView';
-const nextGroupId = sequentialNumberGenerator();
+import { getPanelData } from '../dnd/dataTransfer';
+import { DockviewDropTargets } from '../groupview/dnd';
 export class DockviewComponent extends BaseGrid {
+    get orientation() {
+        return this.gridview.orientation;
+    }
+    get totalPanels() {
+        return this.panels.length;
+    }
+    get panels() {
+        return this.groups.flatMap((group) => group.panels);
+    }
+    get deserializer() {
+        return this._deserializer;
+    }
+    set deserializer(value) {
+        this._deserializer = value;
+    }
+    get options() {
+        return this._options;
+    }
+    get activePanel() {
+        const activeGroup = this.activeGroup;
+        if (!activeGroup) {
+            return undefined;
+        }
+        return activeGroup.activePanel;
+    }
+    set tabHeight(height) {
+        this.options.tabHeight = height;
+        this._groups.forEach((value) => {
+            value.value.model.header.height = height;
+        });
+    }
+    get tabHeight() {
+        return this.options.tabHeight;
+    }
     constructor(element, options) {
         super(element, {
             proportionalLayout: true,
             orientation: options.orientation || Orientation.HORIZONTAL,
             styles: options.styles,
         });
+        this.nextGroupId = sequentialNumberGenerator();
+        this.watermark = null;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
         this._onDidRemovePanel = new Emitter();
@@ -31,7 +69,10 @@ export class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.addDisposables(this._onDidDrop, Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+        this.element.classList.add('dv-dockview');
+        this.addDisposables(this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+            this.updateWatermark();
+        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }));
         this._options = options;
@@ -51,38 +92,74 @@ export class DockviewComponent extends BaseGrid {
             !this.options.watermarkFrameworkComponent) {
             this.options.watermarkComponent = Watermark;
         }
+        const dropTarget = new Droptarget(this.element, {
+            canDisplayOverlay: (event, position) => {
+                const data = getPanelData();
+                if (data) {
+                    if (data.viewId !== this.id) {
+                        return false;
+                    }
+                    return true;
+                }
+                if (this.options.showDndOverlay) {
+                    return this.options.showDndOverlay({
+                        nativeEvent: event,
+                        position: position,
+                        target: DockviewDropTargets.Edge,
+                        getData: getPanelData,
+                    });
+                }
+                return false;
+            },
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+            overlayModel: {
+                activationSize: { type: 'pixels', value: 10 },
+                size: { type: 'pixels', value: 20 },
+            },
+        });
+        this.addDisposables(dropTarget, dropTarget.onDrop((event) => {
+            const data = getPanelData();
+            if (data) {
+                this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, data.panelId || undefined, 'center');
+            }
+            else {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
+            }
+        }));
         this._api = new DockviewApi(this);
-    }
-    get totalPanels() {
-        return this.panels.length;
-    }
-    get panels() {
-        return this.groups.flatMap((group) => group.panels);
-    }
-    get deserializer() {
-        return this._deserializer;
-    }
-    set deserializer(value) {
-        this._deserializer = value;
-    }
-    get options() {
-        return this._options;
-    }
-    get activePanel() {
-        const activeGroup = this.activeGroup;
-        if (!activeGroup) {
-            return undefined;
+        this.updateWatermark();
+    }
+    orthogonalize(position) {
+        switch (position) {
+            case 'top':
+            case 'bottom':
+                if (this.gridview.orientation === Orientation.HORIZONTAL) {
+                    // we need to add to a vertical splitview but the current root is a horizontal splitview.
+                    // insert a vertical splitview at the root level and add the existing view as a child
+                    this.gridview.insertOrthogonalSplitviewAtRoot();
+                }
+                break;
+            case 'left':
+            case 'right':
+                if (this.gridview.orientation === Orientation.VERTICAL) {
+                    // we need to add to a horizontal splitview but the current root is a vertical splitview.
+                    // insert a horiziontal splitview at the root level and add the existing view as a child
+                    this.gridview.insertOrthogonalSplitviewAtRoot();
+                }
+                break;
+            default:
+                break;
+        }
+        switch (position) {
+            case 'top':
+            case 'left':
+                return this.createGroupAtLocation([0]); // insert into first position
+            case 'bottom':
+            case 'right':
+                return this.createGroupAtLocation([this.gridview.length]); // insert into last position
+            default:
+                throw new Error(`unsupported position ${position}`);
         }
-        return activeGroup.activePanel;
-    }
-    set tabHeight(height) {
-        this.options.tabHeight = height;
-        this._groups.forEach((value) => {
-            value.value.model.header.height = height;
-        });
-    }
-    get tabHeight() {
-        return this.options.tabHeight;
     }
     updateOptions(options) {
         const hasOrientationChanged = typeof options.orientation === 'string' &&
@@ -132,8 +209,7 @@ export class DockviewComponent extends BaseGrid {
             options.group = this.activeGroup;
         }
         if (options.includePanel && options.group) {
-            if (options.group.activePanel !==
-                options.group.panels[0]) {
+            if (options.group.activePanel !== options.group.panels[0]) {
                 options.group.model.moveToPrevious({ suppressRoll: true });
                 return;
             }
@@ -166,14 +242,14 @@ export class DockviewComponent extends BaseGrid {
     fromJSON(data) {
         this.clear();
         if (!this.deserializer) {
-            throw new Error('invalid deserializer');
+            throw new Error('no deserializer provided');
         }
         const { grid, panels, options, activeGroup } = data;
         if (typeof (options === null || options === void 0 ? void 0 : options.tabHeight) === 'number') {
             this.tabHeight = options.tabHeight;
         }
-        if (!this.deserializer) {
-            throw new Error('no deserializer provided');
+        if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
+            throw new Error('root must be of type branch');
         }
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
@@ -186,19 +262,20 @@ export class DockviewComponent extends BaseGrid {
                 this._onDidAddGroup.fire(group);
                 for (const child of views) {
                     const panel = this.deserializer.fromJSON(panels[child], group);
-                    const isActive = typeof activeView === 'string' && activeView === panel.id;
+                    const isActive = typeof activeView === 'string' &&
+                        activeView === panel.id;
                     group.model.openPanel(panel, {
                         skipSetPanelActive: !isActive,
-                        skipSetGroupActive: true
+                        skipSetGroupActive: true,
                     });
                 }
                 if (!group.activePanel && group.panels.length > 0) {
                     group.model.openPanel(group.panels[group.panels.length - 1], {
-                        skipSetGroupActive: true
+                        skipSetGroupActive: true,
                     });
                 }
                 return group;
-            }
+            },
         });
         if (typeof activeGroup === 'string') {
             const panel = this.getPanel(activeGroup);
@@ -237,12 +314,31 @@ export class DockviewComponent extends BaseGrid {
             throw new Error(`panel with id ${options.id} already exists`);
         }
         let referenceGroup;
-        if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
-            const referencePanel = this.getGroupPanel(options.position.referencePanel);
-            if (!referencePanel) {
-                throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+        if (options.position) {
+            if (isPanelOptionsWithPanel(options.position)) {
+                const referencePanel = typeof options.position.referencePanel === 'string'
+                    ? this.getGroupPanel(options.position.referencePanel)
+                    : options.position.referencePanel;
+                if (!referencePanel) {
+                    throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+                }
+                referenceGroup = this.findGroup(referencePanel);
+            }
+            else if (isPanelOptionsWithGroup(options.position)) {
+                referenceGroup =
+                    typeof options.position.referenceGroup === 'string'
+                        ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
+                        : options.position.referenceGroup;
+                if (!referenceGroup) {
+                    throw new Error(`referencePanel ${options.position.referenceGroup} does not exist`);
+                }
+            }
+            else {
+                const group = this.orthogonalize(directionToPosition(options.position.direction));
+                const panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+                return panel;
             }
-            referenceGroup = this.findGroup(referencePanel);
         }
         else {
             referenceGroup = this.activeGroup;
@@ -250,7 +346,7 @@ export class DockviewComponent extends BaseGrid {
         let panel;
         if (referenceGroup) {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-            if (target === Position.Center) {
+            if (target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
@@ -279,10 +375,7 @@ export class DockviewComponent extends BaseGrid {
         }
         group.model.removePanel(panel);
         panel.dispose();
-        const retainGroupForWatermark = this.size === 1;
-        if (!retainGroupForWatermark &&
-            group.size === 0 &&
-            options.removeEmptyGroup) {
+        if (group.size === 0 && options.removeEmptyGroup) {
             this.removeGroup(group);
         }
     }
@@ -294,24 +387,67 @@ export class DockviewComponent extends BaseGrid {
             ? { 'watermark-name': this.options.watermarkFrameworkComponent }
             : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
     }
-    addEmptyGroup(options) {
+    updateWatermark() {
+        if (this.groups.length === 0) {
+            if (!this.watermark) {
+                this.watermark = this.createWatermarkComponent();
+                this.watermark.init({
+                    containerApi: new DockviewApi(this),
+                    params: {},
+                    title: '',
+                    api: null,
+                });
+                const watermarkContainer = document.createElement('div');
+                watermarkContainer.className = 'dv-watermark-container';
+                watermarkContainer.appendChild(this.watermark.element);
+                this.element.appendChild(watermarkContainer);
+            }
+        }
+        else if (this.watermark) {
+            this.watermark.element.parentElement.remove();
+            this.watermark.dispose();
+            this.watermark = null;
+        }
+    }
+    addGroup(options) {
+        var _a;
         const group = this.createGroup();
         if (options) {
-            const referencePanel = this.panels.find((panel) => panel.id === options.referencePanel);
-            if (!referencePanel) {
-                throw new Error(`reference panel ${options.referencePanel} does not exist`);
+            let referenceGroup;
+            if (isGroupOptionsWithPanel(options)) {
+                const referencePanel = typeof options.referencePanel === 'string'
+                    ? this.panels.find((panel) => panel.id === options.referencePanel)
+                    : options.referencePanel;
+                if (!referencePanel) {
+                    throw new Error(`reference panel ${options.referencePanel} does not exist`);
+                }
+                referenceGroup = this.findGroup(referencePanel);
+                if (!referenceGroup) {
+                    throw new Error(`reference group for reference panel ${options.referencePanel} does not exist`);
+                }
+            }
+            else if (isGroupOptionsWithGroup(options)) {
+                referenceGroup =
+                    typeof options.referenceGroup === 'string'
+                        ? (_a = this._groups.get(options.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
+                        : options.referenceGroup;
+                if (!referenceGroup) {
+                    throw new Error(`reference group ${options.referenceGroup} does not exist`);
+                }
             }
-            const referenceGroup = this.findGroup(referencePanel);
-            if (!referenceGroup) {
-                throw new Error(`reference group for reference panel ${options.referencePanel} does not exist`);
+            else {
+                const group = this.orthogonalize(directionToPosition(options.direction));
+                return group;
             }
             const target = toTarget(options.direction || 'within');
             const location = getGridLocation(referenceGroup.element);
             const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
             this.doAddGroup(group, relativeLocation);
+            return group;
         }
         else {
             this.doAddGroup(group);
+            return group;
         }
     }
     removeGroup(group, skipActive = false) {
@@ -329,7 +465,13 @@ export class DockviewComponent extends BaseGrid {
         const sourceGroup = groupId
             ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
-        if (!target || target === Position.Center) {
+        if (itemId === undefined) {
+            if (sourceGroup) {
+                this.moveGroup(sourceGroup, referenceGroup, target);
+            }
+            return;
+        }
+        if (!target || target === 'center') {
             const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
                 this.panels.find((panel) => panel.id === itemId);
             if (!groupItem) {
@@ -377,6 +519,28 @@ export class DockviewComponent extends BaseGrid {
             }
         }
     }
+    moveGroup(sourceGroup, referenceGroup, target) {
+        if (sourceGroup) {
+            if (!target || target === 'center') {
+                const activePanel = sourceGroup.activePanel;
+                const panels = [...sourceGroup.panels].map((p) => sourceGroup.model.removePanel(p.id));
+                if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
+                    this.doRemoveGroup(sourceGroup);
+                }
+                for (const panel of panels) {
+                    referenceGroup.model.openPanel(panel, {
+                        skipSetPanelActive: panel !== activePanel,
+                    });
+                }
+            }
+            else {
+                this.gridview.removeView(getGridLocation(sourceGroup.element));
+                const referenceLocation = getGridLocation(referenceGroup.element);
+                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                this.gridview.addView(sourceGroup, Sizing.Distribute, dropLocation);
+            }
+        }
+    }
     doSetGroupActive(group, skipFocus) {
         var _a, _b;
         const isGroupAlreadyFocused = this._activeGroup === group;
@@ -398,9 +562,9 @@ export class DockviewComponent extends BaseGrid {
             id = undefined;
         }
         if (!id) {
-            id = nextGroupId.next();
+            id = this.nextGroupId.next();
             while (this._groups.has(id)) {
-                id = nextGroupId.next();
+                id = this.nextGroupId.next();
             }
         }
         const view = new GroupPanel(this, id, options);
@@ -433,7 +597,7 @@ export class DockviewComponent extends BaseGrid {
             content: this.createContentComponent(options.id, options.component),
             tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
         });
-        const panel = new DockviewGroupPanel(options.id, this, this._api, group);
+        const panel = new DockviewPanel(options.id, this, this._api, group);
         panel.init({
             view,
             title: options.title || options.id,

package/dist/{cjs/dockview/dockviewGroupPanel.d.ts → esm/dockview/dockviewPanel.d.ts}

@@ -1,12 +1,23 @@
 import { DockviewApi } from '../api/component.api';
-import { DockviewPanelApiImpl } from '../api/groupPanelApi';
-import { GroupPanelUpdateEvent, GroupviewPanelState, IDockviewPanel, IGroupPanelInitParameters } from '../groupview/groupPanel';
+import { DockviewPanelApi, DockviewPanelApiImpl } from '../api/dockviewPanelApi';
+import { GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanelInitParameters } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
-import { CompositeDisposable } from '../lifecycle';
-import { Parameters } from '../panel/types';
+import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { IPanel, Parameters } from '../panel/types';
 import { IGroupPanelView } from './defaultGroupPanelView';
 import { DockviewComponent } from './dockviewComponent';
-export declare class DockviewGroupPanel extends CompositeDisposable implements IDockviewPanel {
+export interface IDockviewPanel extends IDisposable, IPanel {
+    readonly view?: IGroupPanelView;
+    readonly group: GroupPanel;
+    readonly api: DockviewPanelApi;
+    readonly title: string;
+    readonly params: Record<string, any> | undefined;
+    updateParentGroup(group: GroupPanel, isGroupActive: boolean): void;
+    init(params: IGroupPanelInitParameters): void;
+    toJSON(): GroupviewPanelState;
+    update(event: GroupPanelUpdateEvent): void;
+}
+export declare class DockviewPanel extends CompositeDisposable implements IDockviewPanel {
     readonly id: string;
     private readonly containerApi;
     private readonly mutableDisposable;

package/dist/esm/dockview/{dockviewGroupPanel.js → dockviewPanel.js}

@@ -1,18 +1,6 @@
-import { DockviewPanelApiImpl } from '../api/groupPanelApi';
-import { CompositeDisposable, MutableDisposable } from '../lifecycle';
-export class DockviewGroupPanel extends CompositeDisposable {
-    constructor(id, accessor, containerApi, group) {
-        super();
-        this.id = id;
-        this.containerApi = containerApi;
-        this.mutableDisposable = new MutableDisposable();
-        this._title = '';
-        this._group = group;
-        this.api = new DockviewPanelApiImpl(this, this._group);
-        this.addDisposables(this.api.onActiveChange(() => {
-            accessor.setActivePanel(this);
-        }));
-    }
+import { DockviewPanelApiImpl, } from '../api/dockviewPanelApi';
+import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
+export class DockviewPanel extends CompositeDisposable {
     get params() {
         return this._params;
     }
@@ -25,6 +13,22 @@ export class DockviewGroupPanel extends CompositeDisposable {
     get view() {
         return this._view;
     }
+    constructor(id, accessor, containerApi, group) {
+        super();
+        this.id = id;
+        this.containerApi = containerApi;
+        this.mutableDisposable = new MutableDisposable();
+        this._title = '';
+        this._group = group;
+        this.api = new DockviewPanelApiImpl(this, this._group);
+        this.addDisposables(this.api.onActiveChange(() => {
+            accessor.setActivePanel(this);
+        }), this.api.onDidSizeChange((event) => {
+            // forward the resize event to the group since if you want to resize a panel
+            // you are actually just resizing the panels parent which is the group
+            this.group.api.setSize(event);
+        }));
+    }
     init(params) {
         var _a;
         this._params = params.params;

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

@@ -1,7 +1,6 @@
 import { DockviewApi } from '../api/component.api';
 import { Direction } from '../gridview/baseComponentGridview';
 import { IGridView } from '../gridview/gridview';
-import { IDockviewPanel } from '../groupview/groupPanel';
 import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
@@ -9,6 +8,8 @@ import { FrameworkFactory } from '../types';
 import { DockviewDropTargets } from '../groupview/dnd';
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
+import { Position } from '../dnd/droptarget';
+import { IDockviewPanel } from './dockviewPanel';
 export interface GroupPanelFrameworkComponentFactory {
     content: FrameworkFactory<IContentRenderer>;
     tab: FrameworkFactory<ITabRenderer>;
@@ -44,7 +45,8 @@ export interface ViewFactoryData {
 export interface DockviewDndOverlayEvent {
     nativeEvent: DragEvent;
     target: DockviewDropTargets;
-    group: GroupPanel;
+    position: Position;
+    group?: GroupPanel;
     getData: () => PanelTransfer | undefined;
 }
 export interface DockviewComponentOptions extends DockviewRenderFunctions {
@@ -57,6 +59,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     defaultTabComponent?: string;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
     createGroupControlElement?: (group: GroupPanel) => IGroupControlRenderer;
+    singleTabMode?: 'fullwidth' | 'default';
 }
 export interface PanelOptions {
     component: string;
@@ -67,18 +70,36 @@ export interface PanelOptions {
     id: string;
     title?: string;
 }
+type RelativePanel = {
+    direction?: Direction;
+    referencePanel: string | IDockviewPanel;
+};
+type RelativeGroup = {
+    direction?: Direction;
+    referenceGroup: string | GroupPanel;
+};
+type AbsolutePosition = {
+    direction: Omit<Direction, 'within'>;
+};
+export type AddPanelPositionOptions = RelativePanel | RelativeGroup | AbsolutePosition;
+export declare function isPanelOptionsWithPanel(data: AddPanelPositionOptions): data is RelativePanel;
+export declare function isPanelOptionsWithGroup(data: AddPanelPositionOptions): data is RelativeGroup;
 export interface AddPanelOptions extends Omit<PanelOptions, 'component' | 'tabComponent'> {
     component: string;
     tabComponent?: string;
-    position?: {
-        direction?: Direction;
-        referencePanel?: string;
-    };
-}
-export interface AddGroupOptions {
-    direction?: 'left' | 'right' | 'above' | 'below';
-    referencePanel: string;
+    position?: AddPanelPositionOptions;
 }
+type AddGroupOptionsWithPanel = {
+    referencePanel: string | IDockviewPanel;
+    direction?: Omit<Direction, 'within'>;
+};
+type AddGroupOptionsWithGroup = {
+    referenceGroup: string | GroupPanel;
+    direction?: Omit<Direction, 'within'>;
+};
+export type AddGroupOptions = AddGroupOptionsWithGroup | AddGroupOptionsWithPanel | AbsolutePosition;
+export declare function isGroupOptionsWithPanel(data: AddGroupOptions): data is AddGroupOptionsWithPanel;
+export declare function isGroupOptionsWithGroup(data: AddGroupOptions): data is AddGroupOptionsWithGroup;
 export interface MovementOptions2 {
     group?: IGridView;
 }
@@ -86,3 +107,4 @@ export interface MovementOptions extends MovementOptions2 {
     includePanel?: boolean;
     group?: GroupPanel;
 }
+export {};

package/dist/esm/dockview/options.js

@@ -1 +1,24 @@
-export {};
+export function isPanelOptionsWithPanel(data) {
+    if (data.referencePanel) {
+        return true;
+    }
+    return false;
+}
+export function isPanelOptionsWithGroup(data) {
+    if (data.referenceGroup) {
+        return true;
+    }
+    return false;
+}
+export function isGroupOptionsWithPanel(data) {
+    if (data.referencePanel) {
+        return true;
+    }
+    return false;
+}
+export function isGroupOptionsWithGroup(data) {
+    if (data.referenceGroup) {
+        return true;
+    }
+    return false;
+}

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

@@ -0,0 +1,2 @@
+import { SerializedDockview } from './dockviewComponent';
+export declare function validateSerializedDockview(data: SerializedDockview): void;