dockview-core 1.8.3 → 1.8.5

package/dist/esm/dockview/dockviewComponent.js

@@ -1,805 +1,933 @@
-import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
-import { directionToPosition, Droptarget } from '../dnd/droptarget';
-import { tail, sequenceEquals, remove } 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';
-import { Overlay } from '../dnd/overlay';
-import { toggleClass, watchElementResize } from '../dom';
-import { DockviewFloatingGroupPanel, } from './dockviewFloatingGroupPanel';
-const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
-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;
-    }
-    constructor(options) {
-        super({
-            proportionalLayout: true,
-            orientation: options.orientation || Orientation.HORIZONTAL,
-            styles: options.styles,
-            parentElement: options.parentElement,
-        });
-        this.nextGroupId = sequentialNumberGenerator();
-        this._deserializer = new DefaultDockviewDeserialzier(this);
-        this.watermark = null;
-        this._onWillDragPanel = new Emitter();
-        this.onWillDragPanel = this._onWillDragPanel.event;
-        this._onWillDragGroup = new Emitter();
-        this.onWillDragGroup = this._onWillDragGroup.event;
-        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.floatingGroups = [];
-        toggleClass(this.gridview.element, 'dv-dockview', true);
-        this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, 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;
-                    }
-                    if (position === 'center') {
-                        // center drop target is only allowed if there are no panels in the grid
-                        // floating panels are allowed
-                        return this.gridview.length === 0;
-                    }
-                    return true;
-                }
-                if (this.options.showDndOverlay) {
-                    if (position === 'center' && this.gridview.length !== 0) {
-                        /**
-                         * for external events only show the four-corner drag overlays, disable
-                         * the center position so that external drag events can fall through to the group
-                         * and panel drop target handlers
-                         */
-                        return false;
-                    }
-                    return this.options.showDndOverlay({
-                        nativeEvent: event,
-                        position: position,
-                        target: DockviewDropTargets.Edge,
-                        getData: getPanelData,
-                    });
-                }
-                return false;
-            },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: {
-                activationSize: { type: 'pixels', value: 10 },
-                size: { type: 'pixels', value: 20 },
-            },
-        });
-        this.addDisposables(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 }));
-            }
-        }), dropTarget);
-        this._api = new DockviewApi(this);
-        this.updateWatermark();
-    }
-    addFloatingGroup(item, coord, options) {
-        var _a, _b, _c, _d, _e, _f;
-        let group;
-        if (item instanceof DockviewPanel) {
-            group = this.createGroup();
-            this.removePanel(item, {
-                removeEmptyGroup: true,
-                skipDispose: true,
-            });
-            group.model.openPanel(item);
-        }
-        else {
-            group = item;
-            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
-                options.skipRemoveGroup;
-            if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
-            }
-        }
-        group.model.isFloating = true;
-        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
-        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
-        const overlay = new Overlay({
-            container: this.gridview.element,
-            content: group.element,
-            height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
-            width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
-            left: overlayLeft,
-            top: overlayTop,
-            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
-                ? undefined
-                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-            minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
-                ? undefined
-                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-        });
-        const el = group.element.querySelector('.void-container');
-        if (!el) {
-            throw new Error('failed to find drag handle');
-        }
-        overlay.setupDrag(el, {
-            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
-                ? options.inDragMode
-                : false,
-        });
-        const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
-        const disposable = watchElementResize(group.element, (entry) => {
-            const { width, height } = entry.contentRect;
-            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
-        });
-        floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
-            // this is either a resize or a move
-            // to inform the panels .layout(...) the group with it's current size
-            // don't care about resize since the above watcher handles that
-            group.layout(group.height, group.width);
-        }), overlay.onDidChangeEnd(() => {
-            this._bufferOnDidLayoutChange.fire();
-        }), group.onDidChange((event) => {
-            overlay.setBounds({
-                height: event === null || event === void 0 ? void 0 : event.height,
-                width: event === null || event === void 0 ? void 0 : event.width,
-            });
-        }), {
-            dispose: () => {
-                disposable.dispose();
-                group.model.isFloating = false;
-                remove(this.floatingGroups, floatingGroupPanel);
-                this.updateWatermark();
-            },
-        });
-        this.floatingGroups.push(floatingGroupPanel);
-        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':
-            case 'center':
-                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) {
-        var _a, _b;
-        const hasOrientationChanged = typeof options.orientation === 'string' &&
-            this.gridview.orientation !== options.orientation;
-        const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
-            options.floatingGroupBounds !== this.options.floatingGroupBounds;
-        this._options = Object.assign(Object.assign({}, this.options), options);
-        if (hasOrientationChanged) {
-            this.gridview.orientation = options.orientation;
-        }
-        if (hasFloatingGroupOptionsChanged) {
-            for (const group of this.floatingGroups) {
-                switch (this.options.floatingGroupBounds) {
-                    case 'boundedWithinViewport':
-                        group.overlay.minimumInViewportHeight = undefined;
-                        group.overlay.minimumInViewportWidth = undefined;
-                        break;
-                    case undefined:
-                        group.overlay.minimumInViewportHeight =
-                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
-                        group.overlay.minimumInViewportWidth =
-                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
-                        break;
-                    default:
-                        group.overlay.minimumInViewportHeight =
-                            (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
-                        group.overlay.minimumInViewportWidth =
-                            (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
-                }
-                group.overlay.setBounds({});
-            }
-        }
-        this.layout(this.gridview.width, this.gridview.height, true);
-    }
-    layout(width, height, forceResize) {
-        super.layout(width, height, forceResize);
-        if (this.floatingGroups) {
-            for (const floating of this.floatingGroups) {
-                // ensure floting groups stay within visible boundaries
-                floating.overlay.setBounds();
-            }
-        }
-    }
-    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;
-        }, {});
-        const floats = this.floatingGroups.map((floatingGroup) => {
-            return {
-                data: floatingGroup.group.toJSON(),
-                position: floatingGroup.overlay.toJSON(),
-            };
-        });
-        const result = {
-            grid: data,
-            panels,
-            activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
-        };
-        if (floats.length > 0) {
-            result.floatingGroups = floats;
-        }
-        return result;
-    }
-    fromJSON(data) {
-        var _a;
-        this.clear();
-        const { grid, panels, activeGroup } = data;
-        if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
-            throw new Error('root must be of type branch');
-        }
-        // take note of the existing dimensions
-        const width = this.width;
-        const height = this.height;
-        const createGroupFromSerializedState = (data) => {
-            const { id, locked, hideHeader, views, activeView } = 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;
-        };
-        this.gridview.deserialize(grid, {
-            fromJSON: (node) => {
-                return createGroupFromSerializedState(node.data);
-            },
-        });
-        this.layout(width, height, true);
-        const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
-        for (const serializedFloatingGroup of serializedFloatingGroups) {
-            const { data, position } = serializedFloatingGroup;
-            const group = createGroupFromSerializedState(data);
-            this.addFloatingGroup(group, {
-                x: position.left,
-                y: position.top,
-                height: position.height,
-                width: position.width,
-            }, { skipRemoveGroup: true, inDragMode: false });
-        }
-        for (const floatingGroup of this.floatingGroups) {
-            floatingGroup.overlay.setBounds();
-        }
-        if (typeof activeGroup === 'string') {
-            const panel = this.getPanel(activeGroup);
-            if (panel) {
-                this.doSetGroupActive(panel);
-            }
-        }
-        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, { skipActive: 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 && options.floating) {
-            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
-        }
-        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 (options.floating) {
-                const group = this.createGroup();
-                panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
-                const o = typeof options.floating === 'object' &&
-                    options.floating !== null
-                    ? options.floating
-                    : {};
-                this.addFloatingGroup(group, o, {
-                    inDragMode: false,
-                    skipRemoveGroup: true,
-                });
-            }
-            else if (referenceGroup.api.isFloating || 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 if (options.floating) {
-            const group = this.createGroup();
-            panel = this.createPanel(options, group);
-            group.model.openPanel(panel);
-            const o = typeof options.floating === 'object' &&
-                options.floating !== null
-                ? options.floating
-                : {};
-            this.addFloatingGroup(group, o, {
-                inDragMode: false,
-                skipRemoveGroup: true,
-            });
-        }
-        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);
-        if (!options.skipDispose) {
-            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.filter((x) => !x.api.isFloating).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.gridview.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, options) {
-        var _a;
-        const panels = [...group.panels]; // reassign since group panels will mutate
-        for (const panel of panels) {
-            this.removePanel(panel, {
-                removeEmptyGroup: false,
-                skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
-            });
-        }
-        this.doRemoveGroup(group, options);
-    }
-    doRemoveGroup(group, options) {
-        const floatingGroup = this.floatingGroups.find((_) => _.group === group);
-        if (floatingGroup) {
-            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                floatingGroup.group.dispose();
-                this._groups.delete(group.id);
-            }
-            floatingGroup.dispose();
-            return floatingGroup.group;
-        }
-        return super.doRemoveGroup(group, options);
-    }
-    moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
-        var _a;
-        const sourceGroup = sourceGroupId
-            ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
-            : undefined;
-        if (sourceItemId === undefined) {
-            if (sourceGroup) {
-                this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
-            }
-            return;
-        }
-        if (!destinationTarget || destinationTarget === 'center') {
-            const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
-                this.panels.find((panel) => panel.id === sourceItemId);
-            if (!groupItem) {
-                throw new Error(`No panel with id ${sourceItemId}`);
-            }
-            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                this.doRemoveGroup(sourceGroup);
-            }
-            destinationGroup.model.openPanel(groupItem, {
-                index: destinationIndex,
-            });
-        }
-        else {
-            const referenceLocation = getGridLocation(destinationGroup.element);
-            const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-            if (sourceGroup && sourceGroup.size < 2) {
-                const [targetParentLocation, to] = tail(targetLocation);
-                const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
-                if (!isFloating) {
-                    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);
-                    }
-                }
-                // 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(destinationGroup.element);
-                const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                this.doAddGroup(targetGroup, location);
-            }
-            else {
-                const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
-                    this.panels.find((panel) => panel.id === sourceItemId);
-                if (!groupItem) {
-                    throw new Error(`No panel with id ${sourceItemId}`);
-                }
-                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-                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 {
-                const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
-                if (floatingGroup) {
-                    floatingGroup.dispose();
-                }
-                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 = {};
-        }
-        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.onTabDragStart((event) => {
-                this._onWillDragPanel.fire(event);
-            }), view.model.onGroupDragStart((event) => {
-                this._onWillDragGroup.fire(event);
-            }), 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();
-        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;
-    }
-}
+import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
+import { directionToPosition, Droptarget } from '../dnd/droptarget';
+import { tail, sequenceEquals, remove } 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';
+import { Overlay } from '../dnd/overlay';
+import { toggleClass, watchElementResize } from '../dom';
+import { DockviewFloatingGroupPanel, } from './dockviewFloatingGroupPanel';
+const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
+function typeValidate3(data, path) {
+    if (typeof data.id !== 'string') {
+        throw new Error(`${path}.id must be a string`);
+    }
+    if (typeof data.activeView !== 'string' ||
+        typeof data.activeView !== 'undefined') {
+        throw new Error(`${path}.activeView must be a string of undefined`);
+    }
+}
+function typeValidate2(data, path) {
+    if (typeof data.size !== 'number' && typeof data.size !== 'undefined') {
+        throw new Error(`${path}.size must be a number or undefined`);
+    }
+    if (typeof data.visible !== 'boolean' &&
+        typeof data.visible !== 'undefined') {
+        throw new Error(`${path}.visible must be a boolean or undefined`);
+    }
+    if (data.type === 'leaf') {
+        if (typeof data.data !== 'object' ||
+            data.data === null ||
+            Array.isArray(data.data)) {
+            throw new Error('object must be a non-null object');
+        }
+        typeValidate3(data.data, `${path}.data`);
+    }
+    else if (data.type === 'branch') {
+        if (!Array.isArray(data.data)) {
+            throw new Error(`${path}.data must be an array`);
+        }
+    }
+    else {
+        throw new Error(`${path}.type must be onew of {'branch', 'leaf'}`);
+    }
+}
+function typeValidate(data) {
+    if (typeof data !== 'object' || data === null) {
+        throw new Error('object must be a non-null object');
+    }
+    const { grid, panels, activeGroup, floatingGroups } = data;
+    if (typeof grid !== 'object' || grid === null) {
+        throw new Error("'.grid' must be a non-null object");
+    }
+    if (typeof grid.height !== 'number') {
+        throw new Error("'.grid.height' must be a number");
+    }
+    if (typeof grid.width !== 'number') {
+        throw new Error("'.grid.width' must be a number");
+    }
+    if (typeof grid.root !== 'object' || grid.root === null) {
+        throw new Error("'.grid.root' must be a non-null object");
+    }
+    if (grid.root.type !== 'branch') {
+        throw new Error(".grid.root.type must be of type 'branch'");
+    }
+    if (grid.orientation !== Orientation.HORIZONTAL &&
+        grid.orientation !== Orientation.VERTICAL) {
+        throw new Error(`'.grid.width' must be one of {${Orientation.HORIZONTAL}, ${Orientation.VERTICAL}}`);
+    }
+    typeValidate2(grid.root, '.grid.root');
+}
+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;
+    }
+    constructor(options) {
+        var _a;
+        super({
+            proportionalLayout: true,
+            orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
+            styles: options.styles,
+            parentElement: options.parentElement,
+            disableAutoResizing: options.disableAutoResizing,
+        });
+        this.nextGroupId = sequentialNumberGenerator();
+        this._deserializer = new DefaultDockviewDeserialzier(this);
+        this.watermark = null;
+        this._onWillDragPanel = new Emitter();
+        this.onWillDragPanel = this._onWillDragPanel.event;
+        this._onWillDragGroup = new Emitter();
+        this.onWillDragGroup = this._onWillDragGroup.event;
+        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.floatingGroups = [];
+        toggleClass(this.gridview.element, 'dv-dockview', true);
+        this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, 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;
+                    }
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return this.gridview.length === 0;
+                    }
+                    return true;
+                }
+                if (this.options.showDndOverlay) {
+                    if (position === 'center' && this.gridview.length !== 0) {
+                        /**
+                         * for external events only show the four-corner drag overlays, disable
+                         * the center position so that external drag events can fall through to the group
+                         * and panel drop target handlers
+                         */
+                        return false;
+                    }
+                    return this.options.showDndOverlay({
+                        nativeEvent: event,
+                        position: position,
+                        target: DockviewDropTargets.Edge,
+                        getData: getPanelData,
+                    });
+                }
+                return false;
+            },
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            overlayModel: {
+                activationSize: { type: 'pixels', value: 10 },
+                size: { type: 'pixels', value: 20 },
+            },
+        });
+        this.addDisposables(dropTarget.onDrop((event) => {
+            var _a;
+            const data = getPanelData();
+            if (data) {
+                this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined, 'center');
+            }
+            else {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
+            }
+        }), dropTarget);
+        this._api = new DockviewApi(this);
+        this.updateWatermark();
+    }
+    addFloatingGroup(item, coord, options) {
+        var _a, _b, _c, _d, _e, _f;
+        let group;
+        if (item instanceof DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+        }
+        else {
+            group = item;
+            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        group.model.isFloating = true;
+        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
+        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+        const overlay = new Overlay({
+            container: this.gridview.element,
+            content: group.element,
+            height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
+            width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+            left: overlayLeft,
+            top: overlayTop,
+            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                ? undefined
+                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+            minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                ? undefined
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+        });
+        const el = group.element.querySelector('.void-container');
+        if (!el) {
+            throw new Error('failed to find drag handle');
+        }
+        overlay.setupDrag(el, {
+            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
+                ? options.inDragMode
+                : false,
+        });
+        const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
+        const disposable = watchElementResize(group.element, (entry) => {
+            const { width, height } = entry.contentRect;
+            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
+        });
+        floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
+            // this is either a resize or a move
+            // to inform the panels .layout(...) the group with it's current size
+            // don't care about resize since the above watcher handles that
+            group.layout(group.height, group.width);
+        }), overlay.onDidChangeEnd(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }), group.onDidChange((event) => {
+            overlay.setBounds({
+                height: event === null || event === void 0 ? void 0 : event.height,
+                width: event === null || event === void 0 ? void 0 : event.width,
+            });
+        }), {
+            dispose: () => {
+                disposable.dispose();
+                group.model.isFloating = false;
+                remove(this.floatingGroups, floatingGroupPanel);
+                this.updateWatermark();
+            },
+        });
+        this.floatingGroups.push(floatingGroupPanel);
+        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':
+            case 'center':
+                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) {
+        var _a, _b;
+        const hasOrientationChanged = typeof options.orientation === 'string' &&
+            this.gridview.orientation !== options.orientation;
+        const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            options.floatingGroupBounds !== this.options.floatingGroupBounds;
+        this._options = Object.assign(Object.assign({}, this.options), options);
+        if (hasOrientationChanged) {
+            this.gridview.orientation = options.orientation;
+        }
+        if (hasFloatingGroupOptionsChanged) {
+            for (const group of this.floatingGroups) {
+                switch (this.options.floatingGroupBounds) {
+                    case 'boundedWithinViewport':
+                        group.overlay.minimumInViewportHeight = undefined;
+                        group.overlay.minimumInViewportWidth = undefined;
+                        break;
+                    case undefined:
+                        group.overlay.minimumInViewportHeight =
+                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                        group.overlay.minimumInViewportWidth =
+                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                        break;
+                    default:
+                        group.overlay.minimumInViewportHeight =
+                            (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                        group.overlay.minimumInViewportWidth =
+                            (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+                }
+                group.overlay.setBounds({});
+            }
+        }
+        this.layout(this.gridview.width, this.gridview.height, true);
+    }
+    layout(width, height, forceResize) {
+        super.layout(width, height, forceResize);
+        if (this.floatingGroups) {
+            for (const floating of this.floatingGroups) {
+                // ensure floting groups stay within visible boundaries
+                floating.overlay.setBounds();
+            }
+        }
+    }
+    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.doSetGroupAndPanelActive(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.doSetGroupAndPanelActive(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;
+        }, {});
+        const floats = this.floatingGroups.map((floatingGroup) => {
+            return {
+                data: floatingGroup.group.toJSON(),
+                position: floatingGroup.overlay.toJSON(),
+            };
+        });
+        const result = {
+            grid: data,
+            panels,
+            activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
+        };
+        if (floats.length > 0) {
+            result.floatingGroups = floats;
+        }
+        return result;
+    }
+    fromJSON(data) {
+        var _a;
+        this.clear();
+        if (typeof data !== 'object' || data === null) {
+            throw new Error('serialized layout must be a non-null object');
+        }
+        const { grid, panels, activeGroup } = data;
+        if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
+            throw new Error('root must be of type branch');
+        }
+        try {
+            // take note of the existing dimensions
+            const width = this.width;
+            const height = this.height;
+            const createGroupFromSerializedState = (data) => {
+                const { id, locked, hideHeader, views, activeView } = data;
+                if (typeof id !== 'string') {
+                    throw new Error('group id must be of type string');
+                }
+                const group = this.createGroup({
+                    id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                const createdPanels = [];
+                for (const child of views) {
+                    /**
+                     * Run the deserializer step seperately since this may fail to due corrupted external state.
+                     * In running this section first we avoid firing lots of 'add' events in the event of a failure
+                     * due to a corruption of input data.
+                     */
+                    const panel = this._deserializer.fromJSON(panels[child], group);
+                    createdPanels.push(panel);
+                }
+                this._onDidAddGroup.fire(group);
+                for (let i = 0; i < views.length; i++) {
+                    const panel = createdPanels[i];
+                    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;
+            };
+            this.gridview.deserialize(grid, {
+                fromJSON: (node) => {
+                    return createGroupFromSerializedState(node.data);
+                },
+            });
+            this.layout(width, height, true);
+            const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+            for (const serializedFloatingGroup of serializedFloatingGroups) {
+                const { data, position } = serializedFloatingGroup;
+                const group = createGroupFromSerializedState(data);
+                this.addFloatingGroup(group, {
+                    x: position.left,
+                    y: position.top,
+                    height: position.height,
+                    width: position.width,
+                }, { skipRemoveGroup: true, inDragMode: false });
+            }
+            for (const floatingGroup of this.floatingGroups) {
+                floatingGroup.overlay.setBounds();
+            }
+            if (typeof activeGroup === 'string') {
+                const panel = this.getPanel(activeGroup);
+                if (panel) {
+                    this.doSetGroupAndPanelActive(panel);
+                }
+            }
+        }
+        catch (err) {
+            /**
+             * Takes all the successfully created groups and remove all of their panels.
+             */
+            for (const group of this.groups) {
+                for (const panel of group.panels) {
+                    this.removePanel(panel, {
+                        removeEmptyGroup: false,
+                        skipDispose: false,
+                    });
+                }
+            }
+            /**
+             * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+             * the underlying HTMLElement existing in the Gridview.
+             */
+            for (const group of this.groups) {
+                group.dispose();
+                this._groups.delete(group.id);
+                this._onDidRemoveGroup.fire(group);
+            }
+            // iterate over a reassigned array since original array will be modified
+            for (const floatingGroup of [...this.floatingGroups]) {
+                floatingGroup.dispose();
+            }
+            // fires clean-up events and clears the underlying HTML gridview.
+            this.clear();
+            /**
+             * even though we have cleaned-up we still want to inform the caller of their error
+             * and we'll do this through re-throwing the original error since afterall you would
+             * expect trying to load a corrupted layout to result in an error and not silently fail...
+             */
+            throw err;
+        }
+        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, { skipActive: true });
+        }
+        if (hasActiveGroup) {
+            this.doSetGroupAndPanelActive(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 && options.floating) {
+            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+        }
+        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 (options.floating) {
+                const group = this.createGroup();
+                const o = typeof options.floating === 'object' &&
+                    options.floating !== null
+                    ? options.floating
+                    : {};
+                this.addFloatingGroup(group, o, {
+                    inDragMode: false,
+                    skipRemoveGroup: true,
+                });
+                this._onDidAddGroup.fire(group);
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
+            }
+            else if (referenceGroup.api.isFloating || 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 if (options.floating) {
+            const group = this.createGroup();
+            const o = typeof options.floating === 'object' &&
+                options.floating !== null
+                ? options.floating
+                : {};
+            this.addFloatingGroup(group, o, {
+                inDragMode: false,
+                skipRemoveGroup: true,
+            });
+            this._onDidAddGroup.fire(group);
+            panel = this.createPanel(options, group);
+            group.model.openPanel(panel);
+            this.doSetGroupAndPanelActive(group);
+        }
+        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);
+        if (!options.skipDispose) {
+            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.filter((x) => !x.api.isFloating).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.gridview.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, options) {
+        var _a;
+        const panels = [...group.panels]; // reassign since group panels will mutate
+        for (const panel of panels) {
+            this.removePanel(panel, {
+                removeEmptyGroup: false,
+                skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
+            });
+        }
+        const activePanel = this.activePanel;
+        this.doRemoveGroup(group, options);
+        if (this.activePanel !== activePanel) {
+            this._onDidActivePanelChange.fire(this.activePanel);
+        }
+    }
+    doRemoveGroup(group, options) {
+        const floatingGroup = this.floatingGroups.find((_) => _.group === group);
+        if (floatingGroup) {
+            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                floatingGroup.group.dispose();
+                this._groups.delete(group.id);
+                this._onDidRemoveGroup.fire(group);
+            }
+            floatingGroup.dispose();
+            if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+                const groups = Array.from(this._groups.values());
+                this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+            }
+            return floatingGroup.group;
+        }
+        return super.doRemoveGroup(group, options);
+    }
+    moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
+        var _a, _b, _c;
+        const sourceGroup = sourceGroupId
+            ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
+            : undefined;
+        if (sourceItemId === undefined) {
+            if (sourceGroup) {
+                this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
+            }
+            return;
+        }
+        if (!destinationTarget || destinationTarget === 'center') {
+            const groupItem = (_b = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _b !== void 0 ? _b : this.panels.find((panel) => panel.id === sourceItemId);
+            if (!groupItem) {
+                throw new Error(`No panel with id ${sourceItemId}`);
+            }
+            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
+                this.doRemoveGroup(sourceGroup);
+            }
+            destinationGroup.model.openPanel(groupItem, {
+                index: destinationIndex,
+            });
+        }
+        else {
+            const referenceLocation = getGridLocation(destinationGroup.element);
+            const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
+            if (sourceGroup && sourceGroup.size < 2) {
+                const [targetParentLocation, to] = tail(targetLocation);
+                const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
+                if (!isFloating) {
+                    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);
+                    }
+                }
+                // 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(destinationGroup.element);
+                const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
+                this.doAddGroup(targetGroup, location);
+            }
+            else {
+                const groupItem = (_c = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _c !== void 0 ? _c : this.panels.find((panel) => panel.id === sourceItemId);
+                if (!groupItem) {
+                    throw new Error(`No panel with id ${sourceItemId}`);
+                }
+                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
+                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 {
+                const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
+                if (floatingGroup) {
+                    floatingGroup.dispose();
+                }
+                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);
+            }
+        }
+    }
+    doSetGroupAndPanelActive(group, skipFocus) {
+        var _a, _b;
+        const activePanel = this.activePanel;
+        super.doSetGroupActive(group, skipFocus);
+        if (((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel) !== activePanel) {
+            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
+        }
+    }
+    createGroup(options) {
+        if (!options) {
+            options = {};
+        }
+        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.onTabDragStart((event) => {
+                this._onWillDragPanel.fire(event);
+            }), view.model.onGroupDragStart((event) => {
+                this._onWillDragGroup.fire(event);
+            }), 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();
+        return view;
+    }
+    createPanel(options, group) {
+        var _a, _b, _c;
+        const contentComponent = options.component;
+        const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : 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: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
+            params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},
+        });
+        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;
+    }
+}
 //# sourceMappingURL=dockviewComponent.js.map