dockview-core 1.8.5 → 1.9.0

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

@@ -10,8 +10,9 @@ import { Orientation } from '../splitview/splitview';
 import { GroupOptions, GroupPanelViewState, GroupviewDropEvent } from './dockviewGroupPanelModel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { Parameters } from '../panel/types';
-import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
+import { Box } from '../types';
+import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlayRenderContainer';
 export interface PanelReference {
     update: (event: {
         params: {
@@ -22,12 +23,11 @@ export interface PanelReference {
 }
 export interface SerializedFloatingGroup {
     data: GroupPanelViewState;
-    position: {
-        height: number;
-        width: number;
-        left: number;
-        top: number;
-    };
+    position: Box;
+}
+export interface SerializedPopoutGroup {
+    data: GroupPanelViewState;
+    position: Box | null;
 }
 export interface SerializedDockview {
     grid: {
@@ -39,6 +39,7 @@ export interface SerializedDockview {
     panels: Record<string, GroupviewPanelState>;
     activeGroup?: string;
     floatingGroups?: SerializedFloatingGroup[];
+    popoutGroups?: SerializedPopoutGroup[];
 }
 export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
@@ -49,7 +50,6 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
-    readonly floatingGroups: IDockviewFloatingGroupPanel[];
     readonly onDidDrop: Event<DockviewDropEvent>;
     readonly orientation: Orientation;
     updateOptions(options: DockviewComponentUpdateOptions): void;
@@ -79,6 +79,10 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
         x: number;
         y: number;
     }): void;
+    addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: {
+        position?: Box;
+        popoutUrl?: string;
+    }): void;
 }
 export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent {
     private readonly nextGroupId;
@@ -86,6 +90,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _api;
     private _options;
     private watermark;
+    readonly overlayRenderContainer: OverlayRenderContainer;
     private readonly _onWillDragPanel;
     readonly onWillDragPanel: Event<TabDragEvent>;
     private readonly _onWillDragGroup;
@@ -100,13 +105,20 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onDidLayoutFromJSON: Event<void>;
     private readonly _onDidActivePanelChange;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
-    readonly floatingGroups: DockviewFloatingGroupPanel[];
+    private readonly _floatingGroups;
+    private readonly _popoutGroups;
     get orientation(): Orientation;
     get totalPanels(): number;
     get panels(): IDockviewPanel[];
     get options(): DockviewComponentOptions;
     get activePanel(): IDockviewPanel | undefined;
+    get renderer(): DockviewPanelRenderer;
     constructor(options: DockviewComponentOptions);
+    addPopoutGroup(item: DockviewPanel | DockviewGroupPanel, options?: {
+        skipRemoveGroup?: boolean;
+        position?: Box;
+        popoutUrl?: string;
+    }): void;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, coord?: {
         x?: number;
         y?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"dockviewComponent.d.ts","sourceRoot":"","sources":["../../../src/dockview/dockviewComponent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dockviewComponent.d.ts","sourceRoot":"","sources":["../../../src/dockview/dockviewComponent.ts"],"names":[],"mappings":"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"}

package/dist/esm/dockview/dockviewComponent.js

@@ -2,7 +2,7 @@ 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 { CompositeDisposable, Disposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
 import { Watermark } from './components/watermark/watermark';
 import { DockviewDropTargets, } from './types';
@@ -18,8 +18,29 @@ 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;
+import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { DockviewPopoutGroupPanel } from './dockviewPopoutGroupPanel';
+import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
+import { OverlayRenderContainer, } from '../overlayRenderContainer';
+function getTheme(element) {
+    function toClassList(element) {
+        const list = [];
+        for (let i = 0; i < element.classList.length; i++) {
+            list.push(element.classList.item(i));
+        }
+        return list;
+    }
+    let theme = undefined;
+    let parent = element;
+    while (parent !== null) {
+        theme = toClassList(parent).find((cls) => cls.startsWith('dockview-theme-'));
+        if (typeof theme === 'string') {
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    return theme;
+}
 function typeValidate3(data, path) {
     if (typeof data.id !== 'string') {
         throw new Error(`${path}.id must be a string`);
@@ -100,6 +121,10 @@ export class DockviewComponent extends BaseGrid {
         }
         return activeGroup.activePanel;
     }
+    get renderer() {
+        var _a;
+        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+    }
     constructor(options) {
         var _a;
         super({
@@ -126,12 +151,27 @@ export class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.floatingGroups = [];
+        this._floatingGroups = [];
+        this._popoutGroups = [];
+        const gready = document.createElement('div');
+        gready.className = 'dv-overlay-render-container';
+        this.gridview.element.appendChild(gready);
+        this.overlayRenderContainer = new OverlayRenderContainer(gready);
         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)(() => {
+        toggleClass(this.element, 'dv-debug', !!options.debug);
+        this.addDisposables(this.overlayRenderContainer, 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();
+        }), Disposable.from(() => {
+            // iterate over a copy of the array since .dispose() mutates the original array
+            for (const group of [...this._floatingGroups]) {
+                group.dispose();
+            }
+            // iterate over a copy of the array since .dispose() mutates the original array
+            for (const group of [...this._popoutGroups]) {
+                group.dispose();
+            }
         }));
         this._options = options;
         if (!this.options.components) {
@@ -201,6 +241,55 @@ export class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
+    addPopoutGroup(item, options) {
+        var _a;
+        let group;
+        let box = options === null || options === void 0 ? void 0 : options.position;
+        if (item instanceof DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+            if (!box) {
+                box = this.element.getBoundingClientRect();
+            }
+        }
+        else {
+            group = item;
+            if (!box) {
+                box = group.element.getBoundingClientRect();
+            }
+            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        const theme = getTheme(this.gridview.element);
+        const popoutWindow = new DockviewPopoutGroupPanel(`${this.id}-${group.id}`, // globally unique within dockview
+        group, {
+            className: theme !== null && theme !== void 0 ? theme : '',
+            popoutUrl: (_a = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _a !== void 0 ? _a : '/popout.html',
+            box: {
+                left: window.screenX + box.left,
+                top: window.screenY + box.top,
+                width: box.width,
+                height: box.height,
+            },
+        });
+        popoutWindow.addDisposables({
+            dispose: () => {
+                remove(this._popoutGroups, popoutWindow);
+                this.updateWatermark();
+            },
+        }, popoutWindow.window.onDidClose(() => {
+            this.doAddGroup(group, [0]);
+        }));
+        this._popoutGroups.push(popoutWindow);
+        this.updateWatermark();
+    }
     addFloatingGroup(item, coord, options) {
         var _a, _b, _c, _d, _e, _f;
         let group;
@@ -220,9 +309,13 @@ export class DockviewComponent extends BaseGrid {
                 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;
+        group.model.location = 'floating';
+        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
+            ? Math.max(coord.x, 0)
+            : DEFAULT_FLOATING_GROUP_POSITION.left;
+        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
+            ? Math.max(coord.y, 0)
+            : DEFAULT_FLOATING_GROUP_POSITION.top;
         const overlay = new Overlay({
             container: this.gridview.element,
             content: group.element,
@@ -266,12 +359,12 @@ export class DockviewComponent extends BaseGrid {
         }), {
             dispose: () => {
                 disposable.dispose();
-                group.model.isFloating = false;
-                remove(this.floatingGroups, floatingGroupPanel);
+                group.model.location = 'grid';
+                remove(this._floatingGroups, floatingGroupPanel);
                 this.updateWatermark();
             },
         });
-        this.floatingGroups.push(floatingGroupPanel);
+        this._floatingGroups.push(floatingGroupPanel);
         this.updateWatermark();
     }
     orthogonalize(position) {
@@ -318,7 +411,7 @@ export class DockviewComponent extends BaseGrid {
             this.gridview.orientation = options.orientation;
         }
         if (hasFloatingGroupOptionsChanged) {
-            for (const group of this.floatingGroups) {
+            for (const group of this._floatingGroups) {
                 switch (this.options.floatingGroupBounds) {
                     case 'boundedWithinViewport':
                         group.overlay.minimumInViewportHeight = undefined;
@@ -343,8 +436,8 @@ export class DockviewComponent extends BaseGrid {
     }
     layout(width, height, forceResize) {
         super.layout(width, height, forceResize);
-        if (this.floatingGroups) {
-            for (const floating of this.floatingGroups) {
+        if (this._floatingGroups) {
+            for (const floating of this._floatingGroups) {
                 // ensure floting groups stay within visible boundaries
                 floating.overlay.setBounds();
             }
@@ -412,10 +505,16 @@ export class DockviewComponent extends BaseGrid {
             collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
-        const floats = this.floatingGroups.map((floatingGroup) => {
+        const floats = this._floatingGroups.map((group) => {
             return {
-                data: floatingGroup.group.toJSON(),
-                position: floatingGroup.overlay.toJSON(),
+                data: group.group.toJSON(),
+                position: group.overlay.toJSON(),
+            };
+        });
+        const popoutGroups = this._popoutGroups.map((group) => {
+            return {
+                data: group.group.toJSON(),
+                position: group.window.dimensions(),
             };
         });
         const result = {
@@ -426,10 +525,13 @@ export class DockviewComponent extends BaseGrid {
         if (floats.length > 0) {
             result.floatingGroups = floats;
         }
+        if (popoutGroups.length > 0) {
+            result.popoutGroups = popoutGroups;
+        }
         return result;
     }
     fromJSON(data) {
-        var _a;
+        var _a, _b;
         this.clear();
         if (typeof data !== 'object' || data === null) {
             throw new Error('serialized layout must be a non-null object');
@@ -496,7 +598,16 @@ export class DockviewComponent extends BaseGrid {
                     width: position.width,
                 }, { skipRemoveGroup: true, inDragMode: false });
             }
-            for (const floatingGroup of this.floatingGroups) {
+            const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
+            for (const serializedPopoutGroup of serializedPopoutGroups) {
+                const { data, position } = serializedPopoutGroup;
+                const group = createGroupFromSerializedState(data);
+                this.addPopoutGroup(group, {
+                    skipRemoveGroup: true,
+                    position: position !== null && position !== void 0 ? position : undefined,
+                });
+            }
+            for (const floatingGroup of this._floatingGroups) {
                 floatingGroup.overlay.setBounds();
             }
             if (typeof activeGroup === 'string') {
@@ -528,7 +639,7 @@ export class DockviewComponent extends BaseGrid {
                 this._onDidRemoveGroup.fire(group);
             }
             // iterate over a reassigned array since original array will be modified
-            for (const floatingGroup of [...this.floatingGroups]) {
+            for (const floatingGroup of [...this._floatingGroups]) {
                 floatingGroup.dispose();
             }
             // fires clean-up events and clears the underlying HTML gridview.
@@ -620,7 +731,8 @@ export class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel);
                 this.doSetGroupAndPanelActive(group);
             }
-            else if (referenceGroup.api.isFloating || target === 'center') {
+            else if (referenceGroup.api.location === 'floating' ||
+                target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
@@ -664,6 +776,7 @@ export class DockviewComponent extends BaseGrid {
         }
         group.model.removePanel(panel);
         if (!options.skipDispose) {
+            this.overlayRenderContainer.detatch(panel);
             panel.dispose();
         }
         if (group.size === 0 && options.removeEmptyGroup) {
@@ -680,7 +793,7 @@ export class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
+        if (this.groups.filter((x) => x.api.location === 'grid').length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -755,19 +868,40 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     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);
+        if (group.api.location === 'floating') {
+            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);
+                }
+                remove(this._floatingGroups, floatingGroup);
+                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;
             }
-            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);
+            throw new Error('failed to find floating group');
+        }
+        if (group.api.location === 'popout') {
+            const selectedGroup = this._popoutGroups.find((_) => _.group === group);
+            if (selectedGroup) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                    selectedGroup.group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+                selectedGroup.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 selectedGroup.group;
             }
-            return floatingGroup.group;
+            throw new Error('failed to find popout group');
         }
         return super.doRemoveGroup(group, options);
     }
@@ -799,8 +933,7 @@ export class DockviewComponent extends BaseGrid {
             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) {
+                if (sourceGroup.api.location === 'grid') {
                     const sourceLocation = getGridLocation(sourceGroup.element);
                     const [sourceParentLocation, from] = tail(sourceLocation);
                     if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
@@ -846,12 +979,25 @@ export class DockviewComponent extends BaseGrid {
                 }
             }
             else {
-                const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
-                if (floatingGroup) {
-                    floatingGroup.dispose();
-                }
-                else {
-                    this.gridview.removeView(getGridLocation(sourceGroup.element));
+                switch (sourceGroup.api.location) {
+                    case 'grid':
+                        this.gridview.removeView(getGridLocation(sourceGroup.element));
+                        break;
+                    case 'floating': {
+                        const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === sourceGroup);
+                        if (!selectedFloatingGroup) {
+                            throw new Error('failed to find floating group');
+                        }
+                        selectedFloatingGroup.dispose();
+                        break;
+                    }
+                    case 'popout': {
+                        const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
+                        if (!selectedPopoutGroup) {
+                            throw new Error('failed to find popout group');
+                        }
+                        selectedPopoutGroup.dispose();
+                    }
                 }
                 const referenceLocation = getGridLocation(referenceGroup.element);
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
@@ -913,7 +1059,7 @@ export class DockviewComponent extends BaseGrid {
         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);
+        const panel = new DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
         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 : {},