dockview-core 1.6.0

package/dist/esm/dockview/dockviewComponent.js

@@ -0,0 +1,612 @@
+import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
+import { directionToPosition, Droptarget } from '../dnd/droptarget';
+import { tail, sequenceEquals } from '../array';
+import { DockviewPanel } from './dockviewPanel';
+import { CompositeDisposable } from '../lifecycle';
+import { Event, Emitter } from '../events';
+import { Watermark } from './components/watermark/watermark';
+import { DockviewDropTargets, } from './types';
+import { sequentialNumberGenerator } from '../math';
+import { DefaultDockviewDeserialzier } from './deserializer';
+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, Sizing } from '../splitview/splitview';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewPanelModel } from './dockviewPanelModel';
+import { getPanelData } from '../dnd/dataTransfer';
+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 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._deserializer = new DefaultDockviewDeserialzier(this);
+        this.watermark = null;
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        this._onDidRemovePanel = new Emitter();
+        this.onDidRemovePanel = this._onDidRemovePanel.event;
+        this._onDidAddPanel = new Emitter();
+        this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidLayoutFromJSON = new Emitter();
+        this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        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;
+        if (!this.options.components) {
+            this.options.components = {};
+        }
+        if (!this.options.frameworkComponents) {
+            this.options.frameworkComponents = {};
+        }
+        if (!this.options.frameworkTabComponents) {
+            this.options.frameworkTabComponents = {};
+        }
+        if (!this.options.tabComponents) {
+            this.options.tabComponents = {};
+        }
+        if (!this.options.watermarkComponent &&
+            !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);
+        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}`);
+        }
+    }
+    updateOptions(options) {
+        const hasOrientationChanged = typeof options.orientation === 'string' &&
+            this.gridview.orientation !== options.orientation;
+        this._options = Object.assign(Object.assign({}, this.options), options);
+        if (hasOrientationChanged) {
+            this.gridview.orientation = options.orientation;
+        }
+        this.layout(this.gridview.width, this.gridview.height, true);
+    }
+    focus() {
+        var _a;
+        (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    getGroupPanel(id) {
+        return this.panels.find((panel) => panel.id === id);
+    }
+    setActivePanel(panel) {
+        this.doSetGroupActive(panel.group);
+        panel.group.model.openPanel(panel);
+    }
+    moveToNext(options = {}) {
+        var _a;
+        if (!options.group) {
+            if (!this.activeGroup) {
+                return;
+            }
+            options.group = this.activeGroup;
+        }
+        if (options.includePanel && options.group) {
+            if (options.group.activePanel !==
+                options.group.panels[options.group.panels.length - 1]) {
+                options.group.model.moveToNext({ suppressRoll: true });
+                return;
+            }
+        }
+        const location = getGridLocation(options.group.element);
+        const next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
+        this.doSetGroupActive(next);
+    }
+    moveToPrevious(options = {}) {
+        var _a;
+        if (!options.group) {
+            if (!this.activeGroup) {
+                return;
+            }
+            options.group = this.activeGroup;
+        }
+        if (options.includePanel && options.group) {
+            if (options.group.activePanel !== options.group.panels[0]) {
+                options.group.model.moveToPrevious({ suppressRoll: true });
+                return;
+            }
+        }
+        const location = getGridLocation(options.group.element);
+        const next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
+        if (next) {
+            this.doSetGroupActive(next);
+        }
+    }
+    /**
+     * Serialize the current state of the layout
+     *
+     * @returns A JSON respresentation of the layout
+     */
+    toJSON() {
+        var _a;
+        const data = this.gridview.serialize();
+        const panels = this.panels.reduce((collection, panel) => {
+            collection[panel.id] = panel.toJSON();
+            return collection;
+        }, {});
+        return {
+            grid: data,
+            panels,
+            activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
+            options: { tabHeight: this.tabHeight },
+        };
+    }
+    fromJSON(data) {
+        this.clear();
+        const { grid, panels, options, activeGroup } = data;
+        if (typeof (options === null || options === void 0 ? void 0 : options.tabHeight) === 'number') {
+            this.tabHeight = options.tabHeight;
+        }
+        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) => {
+                const { id, locked, hideHeader, views, activeView } = node.data;
+                const group = this.createGroup({
+                    id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                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;
+                    group.model.openPanel(panel, {
+                        skipSetPanelActive: !isActive,
+                        skipSetGroupActive: true,
+                    });
+                }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
+                        skipSetGroupActive: true,
+                    });
+                }
+                return group;
+            },
+        });
+        if (typeof activeGroup === 'string') {
+            const panel = this.getPanel(activeGroup);
+            if (panel) {
+                this.doSetGroupActive(panel);
+            }
+        }
+        this.gridview.layout(this.width, this.height);
+        this._onDidLayoutFromJSON.fire();
+    }
+    clear() {
+        const groups = Array.from(this._groups.values()).map((_) => _.value);
+        const hasActiveGroup = !!this.activeGroup;
+        const hasActivePanel = !!this.activePanel;
+        for (const group of groups) {
+            // remove the group will automatically remove the panels
+            this.removeGroup(group, true);
+        }
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+        if (hasActivePanel) {
+            this._onDidActivePanelChange.fire(undefined);
+        }
+        this.gridview.clear();
+    }
+    closeAllGroups() {
+        for (const entry of this._groups.entries()) {
+            const [_, group] = entry;
+            group.value.model.closeAllPanels();
+        }
+    }
+    addPanel(options) {
+        var _a, _b;
+        if (this.panels.find((_) => _.id === options.id)) {
+            throw new Error(`panel with id ${options.id} already exists`);
+        }
+        let referenceGroup;
+        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;
+            }
+        }
+        else {
+            referenceGroup = this.activeGroup;
+        }
+        let panel;
+        if (referenceGroup) {
+            const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
+            if (target === 'center') {
+                panel = this.createPanel(options, referenceGroup);
+                referenceGroup.model.openPanel(panel);
+            }
+            else {
+                const location = getGridLocation(referenceGroup.element);
+                const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
+                const group = this.createGroupAtLocation(relativeLocation);
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+            }
+        }
+        else {
+            const group = this.createGroupAtLocation();
+            panel = this.createPanel(options, group);
+            group.model.openPanel(panel);
+        }
+        return panel;
+    }
+    removePanel(panel, options = {
+        removeEmptyGroup: true,
+        skipDispose: false,
+    }) {
+        const group = panel.group;
+        if (!group) {
+            throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
+        }
+        group.model.removePanel(panel);
+        panel.dispose();
+        if (group.size === 0 && options.removeEmptyGroup) {
+            this.removeGroup(group);
+        }
+    }
+    createWatermarkComponent() {
+        var _a;
+        return createComponent('watermark-id', 'watermark-name', this.options.watermarkComponent
+            ? { 'watermark-name': this.options.watermarkComponent }
+            : {}, this.options.watermarkFrameworkComponent
+            ? { 'watermark-name': this.options.watermarkFrameworkComponent }
+            : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
+    }
+    updateWatermark() {
+        var _a, _b;
+        if (this.groups.length === 0) {
+            if (!this.watermark) {
+                this.watermark = this.createWatermarkComponent();
+                this.watermark.init({
+                    containerApi: new DockviewApi(this),
+                });
+                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();
+            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.watermark = null;
+        }
+    }
+    addGroup(options) {
+        var _a;
+        const group = this.createGroup();
+        if (options) {
+            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`);
+                }
+            }
+            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) {
+        const panels = [...group.panels]; // reassign since group panels will mutate
+        for (const panel of panels) {
+            this.removePanel(panel, {
+                removeEmptyGroup: false,
+                skipDispose: false,
+            });
+        }
+        super.doRemoveGroup(group, { skipActive });
+    }
+    moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
+        var _a;
+        const sourceGroup = groupId
+            ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
+            : undefined;
+        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) {
+                throw new Error(`No panel with id ${itemId}`);
+            }
+            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
+                this.doRemoveGroup(sourceGroup);
+            }
+            referenceGroup.model.openPanel(groupItem, { index });
+        }
+        else {
+            const referenceLocation = getGridLocation(referenceGroup.element);
+            const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+            if (sourceGroup && sourceGroup.size < 2) {
+                const [targetParentLocation, to] = tail(targetLocation);
+                const sourceLocation = getGridLocation(sourceGroup.element);
+                const [sourceParentLocation, from] = tail(sourceLocation);
+                if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
+                    // special case when 'swapping' two views within same grid location
+                    // if a group has one tab - we are essentially moving the 'group'
+                    // which is equivalent to swapping two views in this case
+                    this.gridview.moveView(sourceParentLocation, from, to);
+                }
+                else {
+                    // source group will become empty so delete the group
+                    const targetGroup = this.doRemoveGroup(sourceGroup, {
+                        skipActive: true,
+                        skipDispose: true,
+                    });
+                    // after deleting the group we need to re-evaulate the ref location
+                    const updatedReferenceLocation = getGridLocation(referenceGroup.element);
+                    const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target);
+                    this.doAddGroup(targetGroup, location);
+                }
+            }
+            else {
+                const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
+                    this.panels.find((panel) => panel.id === itemId);
+                if (!groupItem) {
+                    throw new Error(`No panel with id ${itemId}`);
+                }
+                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                const group = this.createGroupAtLocation(dropLocation);
+                group.model.openPanel(groupItem);
+            }
+        }
+    }
+    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;
+        super.doSetGroupActive(group, skipFocus);
+        if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel)) {
+            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
+        }
+    }
+    createGroup(options) {
+        if (!options) {
+            options = { tabHeight: this.tabHeight };
+        }
+        if (typeof options.tabHeight !== 'number') {
+            options.tabHeight = this.tabHeight;
+        }
+        let id = options === null || options === void 0 ? void 0 : options.id;
+        if (id && this._groups.has(options.id)) {
+            console.warn(`Duplicate group id ${options === null || options === void 0 ? void 0 : options.id}. reassigning group id to avoid errors`);
+            id = undefined;
+        }
+        if (!id) {
+            id = this.nextGroupId.next();
+            while (this._groups.has(id)) {
+                id = this.nextGroupId.next();
+            }
+        }
+        const view = new DockviewGroupPanel(this, id, options);
+        view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
+        if (!this._groups.has(view.id)) {
+            const disposable = new CompositeDisposable(view.model.onMove((event) => {
+                const { groupId, itemId, target, index } = event;
+                this.moveGroupOrPanel(view, groupId, itemId, target, index);
+            }), view.model.onDidDrop((event) => {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
+            }), view.model.onDidAddPanel((event) => {
+                this._onDidAddPanel.fire(event.panel);
+            }), view.model.onDidRemovePanel((event) => {
+                this._onDidRemovePanel.fire(event.panel);
+            }), view.model.onDidActivePanelChange((event) => {
+                this._onDidActivePanelChange.fire(event.panel);
+            }));
+            this._groups.set(view.id, { value: view, disposable });
+        }
+        // TODO: must be called after the above listeners have been setup,
+        // not an ideal pattern
+        view.initialize();
+        if (typeof this.options.tabHeight === 'number') {
+            view.model.header.height = this.options.tabHeight;
+        }
+        return view;
+    }
+    createPanel(options, group) {
+        const contentComponent = options.component;
+        const tabComponent = options.tabComponent || this.options.defaultTabComponent;
+        const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
+        const panel = new DockviewPanel(options.id, this, this._api, group, view);
+        panel.init({
+            title: options.title || options.id,
+            params: (options === null || options === void 0 ? void 0 : options.params) || {},
+        });
+        return panel;
+    }
+    createGroupAtLocation(location = [0]) {
+        const group = this.createGroup();
+        this.doAddGroup(group, location);
+        return group;
+    }
+    findGroup(panel) {
+        var _a;
+        return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    dispose() {
+        super.dispose();
+        this._onDidActivePanelChange.dispose();
+        this._onDidAddPanel.dispose();
+        this._onDidRemovePanel.dispose();
+        this._onDidLayoutFromJSON.dispose();
+    }
+}

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

@@ -0,0 +1,31 @@
+import { IFrameworkPart } from '../panel/types';
+import { DockviewComponent } from '../dockview/dockviewComponent';
+import { GridviewPanelApi } from '../api/gridviewPanelApi';
+import { GroupOptions, IDockviewGroupPanelModel, IHeader } from './dockviewGroupPanelModel';
+import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
+export interface IDockviewGroupPanel extends IGridviewPanel {
+    model: IDockviewGroupPanelModel;
+    locked: boolean;
+    readonly size: number;
+    readonly panels: IDockviewPanel[];
+    readonly activePanel: IDockviewPanel | undefined;
+}
+export type IDockviewGroupPanelPublic = IDockviewGroupPanel;
+export type DockviewGroupPanelApi = GridviewPanelApi;
+export declare class DockviewGroupPanel extends GridviewPanel implements IDockviewGroupPanel {
+    private readonly _model;
+    get panels(): IDockviewPanel[];
+    get activePanel(): IDockviewPanel | undefined;
+    get size(): number;
+    get model(): IDockviewGroupPanelModel;
+    get locked(): boolean;
+    set locked(value: boolean);
+    get header(): IHeader;
+    constructor(accessor: DockviewComponent, id: string, options: GroupOptions);
+    initialize(): void;
+    setActive(isActive: boolean): void;
+    layout(width: number, height: number): void;
+    getComponent(): IFrameworkPart;
+    toJSON(): any;
+}

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -0,0 +1,50 @@
+import { DockviewGroupPanelModel, } from './dockviewGroupPanelModel';
+import { GridviewPanel } from '../gridview/gridviewPanel';
+export class DockviewGroupPanel extends GridviewPanel {
+    get panels() {
+        return this._model.panels;
+    }
+    get activePanel() {
+        return this._model.activePanel;
+    }
+    get size() {
+        return this._model.size;
+    }
+    get model() {
+        return this._model;
+    }
+    get locked() {
+        return this._model.locked;
+    }
+    set locked(value) {
+        this._model.locked = value;
+    }
+    get header() {
+        return this._model.header;
+    }
+    constructor(accessor, id, options) {
+        super(id, 'groupview_default', {
+            minimumHeight: 100,
+            minimumWidth: 100,
+        });
+        this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
+    }
+    initialize() {
+        this._model.initialize();
+    }
+    setActive(isActive) {
+        super.setActive(isActive);
+        this.model.setActive(isActive);
+    }
+    layout(width, height) {
+        super.layout(width, height);
+        this.model.layout(width, height);
+    }
+    getComponent() {
+        return this._model;
+    }
+    toJSON() {
+        // TODO fix typing
+        return this.model.toJSON();
+    }
+}