mirror of
https://github.com/mathuo/dockview
synced 2025-01-23 01:45:58 +00:00
feat: popout group enhancements
This commit is contained in:
mathuo
parent
8f9d225c61
commit
20c1a66d20
@ -110,109 +110,109 @@ describe('dockviewComponent', () => {
|
||||
window.open = jest.fn(); // not implemented by jest
|
||||
});
|
||||
|
||||
describe('memory leakage', () => {
|
||||
beforeEach(() => {
|
||||
window.open = () => fromPartial<Window>({
|
||||
addEventListener: jest.fn(),
|
||||
close: jest.fn(),
|
||||
});
|
||||
});
|
||||
// describe('memory leakage', () => {
|
||||
// beforeEach(() => {
|
||||
// window.open = () => fromPartial<Window>({
|
||||
// addEventListener: jest.fn(),
|
||||
// close: jest.fn(),
|
||||
// });
|
||||
// });
|
||||
|
||||
test('event leakage', () => {
|
||||
Emitter.setLeakageMonitorEnabled(true);
|
||||
// test('event leakage', () => {
|
||||
// Emitter.setLeakageMonitorEnabled(true);
|
||||
|
||||
dockview = new DockviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
default: PanelContentPartTest,
|
||||
},
|
||||
});
|
||||
// dockview = new DockviewComponent({
|
||||
// parentElement: container,
|
||||
// components: {
|
||||
// default: PanelContentPartTest,
|
||||
// },
|
||||
// });
|
||||
|
||||
dockview.layout(500, 1000);
|
||||
// dockview.layout(500, 1000);
|
||||
|
||||
const panel1 = dockview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
});
|
||||
// const panel1 = dockview.addPanel({
|
||||
// id: 'panel1',
|
||||
// component: 'default',
|
||||
// });
|
||||
|
||||
const panel2 = dockview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
});
|
||||
// const panel2 = dockview.addPanel({
|
||||
// id: 'panel2',
|
||||
// component: 'default',
|
||||
// });
|
||||
|
||||
dockview.removePanel(panel2);
|
||||
// dockview.removePanel(panel2);
|
||||
|
||||
const panel3 = dockview.addPanel({
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'right',
|
||||
referencePanel: 'panel1',
|
||||
},
|
||||
});
|
||||
// const panel3 = dockview.addPanel({
|
||||
// id: 'panel3',
|
||||
// component: 'default',
|
||||
// position: {
|
||||
// direction: 'right',
|
||||
// referencePanel: 'panel1',
|
||||
// },
|
||||
// });
|
||||
|
||||
const panel4 = dockview.addPanel({
|
||||
id: 'panel4',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'above',
|
||||
},
|
||||
});
|
||||
// const panel4 = dockview.addPanel({
|
||||
// id: 'panel4',
|
||||
// component: 'default',
|
||||
// position: {
|
||||
// direction: 'above',
|
||||
// },
|
||||
// });
|
||||
|
||||
dockview.moveGroupOrPanel(
|
||||
panel4.group,
|
||||
panel3.group.id,
|
||||
panel3.id,
|
||||
'center'
|
||||
);
|
||||
// dockview.moveGroupOrPanel(
|
||||
// panel4.group,
|
||||
// panel3.group.id,
|
||||
// panel3.id,
|
||||
// 'center'
|
||||
// );
|
||||
|
||||
dockview.addPanel({
|
||||
id: 'panel5',
|
||||
component: 'default',
|
||||
floating: true,
|
||||
});
|
||||
// dockview.addPanel({
|
||||
// id: 'panel5',
|
||||
// component: 'default',
|
||||
// floating: true,
|
||||
// });
|
||||
|
||||
const panel6 = dockview.addPanel({
|
||||
id: 'panel6',
|
||||
component: 'default',
|
||||
position: {
|
||||
referencePanel: 'panel5',
|
||||
direction: 'within',
|
||||
},
|
||||
});
|
||||
// const panel6 = dockview.addPanel({
|
||||
// id: 'panel6',
|
||||
// component: 'default',
|
||||
// position: {
|
||||
// referencePanel: 'panel5',
|
||||
// direction: 'within',
|
||||
// },
|
||||
// });
|
||||
|
||||
dockview.addFloatingGroup(panel4.api.group);
|
||||
// dockview.addFloatingGroup(panel4.api.group);
|
||||
|
||||
dockview.addPopoutGroup(panel6);
|
||||
// dockview.addPopoutGroup(panel6);
|
||||
|
||||
dockview.moveGroupOrPanel(
|
||||
panel1.group,
|
||||
panel6.group.id,
|
||||
panel6.id,
|
||||
'center'
|
||||
);
|
||||
// dockview.moveGroupOrPanel(
|
||||
// panel1.group,
|
||||
// panel6.group.id,
|
||||
// panel6.id,
|
||||
// 'center'
|
||||
// );
|
||||
|
||||
dockview.moveGroupOrPanel(
|
||||
panel4.group,
|
||||
panel6.group.id,
|
||||
panel6.id,
|
||||
'center'
|
||||
);
|
||||
// dockview.moveGroupOrPanel(
|
||||
// panel4.group,
|
||||
// panel6.group.id,
|
||||
// panel6.id,
|
||||
// 'center'
|
||||
// );
|
||||
|
||||
dockview.dispose();
|
||||
// dockview.dispose();
|
||||
|
||||
if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
|
||||
for (const entry of Array.from(
|
||||
Emitter.MEMORY_LEAK_WATCHER.events
|
||||
)) {
|
||||
console.log('disposal', entry[1]);
|
||||
}
|
||||
throw new Error('not all listeners disposed');
|
||||
}
|
||||
// if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
|
||||
// for (const entry of Array.from(
|
||||
// Emitter.MEMORY_LEAK_WATCHER.events
|
||||
// )) {
|
||||
// console.log('disposal', entry[1]);
|
||||
// }
|
||||
// throw new Error('not all listeners disposed');
|
||||
// }
|
||||
|
||||
Emitter.setLeakageMonitorEnabled(false);
|
||||
});
|
||||
});
|
||||
// Emitter.setLeakageMonitorEnabled(false);
|
||||
// });
|
||||
// });
|
||||
|
||||
test('duplicate panel', () => {
|
||||
dockview.layout(500, 1000);
|
||||
@ -4425,13 +4425,22 @@ describe('dockviewComponent', () => {
|
||||
beforeEach(() => {
|
||||
jest.spyOn(window, 'open').mockReturnValue(
|
||||
fromPartial<Window>({
|
||||
addEventListener: jest.fn(),
|
||||
document: fromPartial<Document>({
|
||||
body: document.createElement('body'),
|
||||
}),
|
||||
addEventListener: jest
|
||||
.fn()
|
||||
.mockImplementation((name, cb) => {
|
||||
if (name === 'load') {
|
||||
cb();
|
||||
}
|
||||
}),
|
||||
close: jest.fn(),
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
test('that can remove a popout group', () => {
|
||||
test('that can remove a popout group', async () => {
|
||||
const container = document.createElement('div');
|
||||
|
||||
const dockview = new DockviewComponent({
|
||||
@ -4452,10 +4461,10 @@ describe('dockviewComponent', () => {
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
dockview.addPopoutGroup(panel1);
|
||||
await dockview.addPopoutGroup(panel1);
|
||||
|
||||
expect(dockview.panels.length).toBe(1);
|
||||
expect(dockview.groups.length).toBe(1);
|
||||
expect(dockview.groups.length).toBe(2);
|
||||
expect(panel1.api.group.api.location.type).toBe('popout');
|
||||
|
||||
dockview.removePanel(panel1);
|
||||
@ -4464,7 +4473,7 @@ describe('dockviewComponent', () => {
|
||||
expect(dockview.groups.length).toBe(0);
|
||||
});
|
||||
|
||||
test('add a popout group', () => {
|
||||
test('add a popout group', async () => {
|
||||
const container = document.createElement('div');
|
||||
|
||||
const dockview = new DockviewComponent({
|
||||
@ -4495,15 +4504,15 @@ describe('dockviewComponent', () => {
|
||||
expect(dockview.groups.length).toBe(1);
|
||||
expect(dockview.panels.length).toBe(2);
|
||||
|
||||
dockview.addPopoutGroup(panel2.group);
|
||||
await dockview.addPopoutGroup(panel2.group);
|
||||
|
||||
expect(panel1.group.api.location.type).toBe('popout');
|
||||
expect(panel2.group.api.location.type).toBe('popout');
|
||||
expect(dockview.groups.length).toBe(1);
|
||||
expect(dockview.groups.length).toBe(2);
|
||||
expect(dockview.panels.length).toBe(2);
|
||||
});
|
||||
|
||||
test('move from fixed to popout group and back', () => {
|
||||
test('move from fixed to popout group and back', async () => {
|
||||
const container = document.createElement('div');
|
||||
|
||||
const dockview = new DockviewComponent({
|
||||
@ -4543,12 +4552,12 @@ describe('dockviewComponent', () => {
|
||||
expect(dockview.groups.length).toBe(2);
|
||||
expect(dockview.panels.length).toBe(3);
|
||||
|
||||
dockview.addPopoutGroup(panel2.group);
|
||||
await dockview.addPopoutGroup(panel2.group);
|
||||
|
||||
expect(panel1.group.api.location.type).toBe('popout');
|
||||
expect(panel2.group.api.location.type).toBe('popout');
|
||||
expect(panel3.group.api.location.type).toBe('grid');
|
||||
expect(dockview.groups.length).toBe(2);
|
||||
expect(dockview.groups.length).toBe(3);
|
||||
expect(dockview.panels.length).toBe(3);
|
||||
|
||||
dockview.moveGroupOrPanel(
|
||||
@ -4561,7 +4570,20 @@ describe('dockviewComponent', () => {
|
||||
expect(panel1.group.api.location.type).toBe('popout');
|
||||
expect(panel2.group.api.location.type).toBe('grid');
|
||||
expect(panel3.group.api.location.type).toBe('grid');
|
||||
expect(dockview.groups.length).toBe(3);
|
||||
expect(dockview.groups.length).toBe(4);
|
||||
expect(dockview.panels.length).toBe(3);
|
||||
|
||||
dockview.moveGroupOrPanel(
|
||||
panel3.api.group,
|
||||
panel1.api.group.id,
|
||||
panel1.api.id,
|
||||
'center'
|
||||
);
|
||||
|
||||
expect(panel1.group.api.location.type).toBe('grid');
|
||||
expect(panel2.group.api.location.type).toBe('grid');
|
||||
expect(panel3.group.api.location.type).toBe('grid');
|
||||
expect(dockview.groups.length).toBe(2);
|
||||
expect(dockview.panels.length).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
@ -268,7 +268,7 @@ describe('gridview', () => {
|
||||
],
|
||||
},
|
||||
},
|
||||
activePanel: 'panel_1',
|
||||
activePanel: 'panel_2',
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -833,7 +833,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
onDidOpen?: (event: { id: string; window: Window }) => void;
|
||||
onWillClose?: (event: { id: string; window: Window }) => void;
|
||||
}
|
||||
): Promise<boolean> {
|
||||
): Promise<void> {
|
||||
return this.component.addPopoutGroup(item, options);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,6 +14,10 @@ export interface VisibilityEvent {
|
||||
readonly isVisible: boolean;
|
||||
}
|
||||
|
||||
export interface HiddenEvent {
|
||||
readonly isHidden: boolean;
|
||||
}
|
||||
|
||||
export interface ActiveEvent {
|
||||
readonly isActive: boolean;
|
||||
}
|
||||
@ -24,7 +28,7 @@ export interface PanelApi {
|
||||
readonly onDidFocusChange: Event<FocusEvent>;
|
||||
readonly onDidVisibilityChange: Event<VisibilityEvent>;
|
||||
readonly onDidActiveChange: Event<ActiveEvent>;
|
||||
setVisible(isVisible: boolean): void;
|
||||
readonly onDidHiddenChange: Event<HiddenEvent>;
|
||||
setActive(): void;
|
||||
updateParameters(parameters: Parameters): void;
|
||||
/**
|
||||
@ -43,6 +47,10 @@ export interface PanelApi {
|
||||
* Whether the panel is visible
|
||||
*/
|
||||
readonly isVisible: boolean;
|
||||
/**
|
||||
* Whether the panel is hidden
|
||||
*/
|
||||
readonly isHidden: boolean;
|
||||
/**
|
||||
* The panel width in pixels
|
||||
*/
|
||||
@ -60,6 +68,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
|
||||
private _isFocused = false;
|
||||
private _isActive = false;
|
||||
private _isVisible = true;
|
||||
private _isHidden = false;
|
||||
private _width = 0;
|
||||
private _height = 0;
|
||||
|
||||
@ -69,56 +78,59 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
|
||||
replay: true,
|
||||
});
|
||||
readonly onDidDimensionsChange = this._onDidDimensionChange.event;
|
||||
//
|
||||
|
||||
readonly _onDidChangeFocus = new Emitter<FocusEvent>({
|
||||
replay: true,
|
||||
});
|
||||
readonly onDidFocusChange: Event<FocusEvent> = this._onDidChangeFocus.event;
|
||||
//
|
||||
|
||||
readonly _onFocusEvent = new Emitter<void>();
|
||||
readonly onFocusEvent: Event<void> = this._onFocusEvent.event;
|
||||
//
|
||||
|
||||
readonly _onDidVisibilityChange = new Emitter<VisibilityEvent>({
|
||||
replay: true,
|
||||
});
|
||||
readonly onDidVisibilityChange: Event<VisibilityEvent> =
|
||||
this._onDidVisibilityChange.event;
|
||||
//
|
||||
|
||||
readonly _onVisibilityChange = new Emitter<VisibilityEvent>();
|
||||
readonly onVisibilityChange: Event<VisibilityEvent> =
|
||||
this._onVisibilityChange.event;
|
||||
//
|
||||
readonly _onDidHiddenChange = new Emitter<HiddenEvent>();
|
||||
readonly onDidHiddenChange: Event<HiddenEvent> =
|
||||
this._onDidHiddenChange.event;
|
||||
|
||||
readonly _onDidActiveChange = new Emitter<ActiveEvent>({
|
||||
replay: true,
|
||||
});
|
||||
readonly onDidActiveChange: Event<ActiveEvent> =
|
||||
this._onDidActiveChange.event;
|
||||
//
|
||||
|
||||
readonly _onActiveChange = new Emitter<void>();
|
||||
readonly onActiveChange: Event<void> = this._onActiveChange.event;
|
||||
//
|
||||
|
||||
readonly _onUpdateParameters = new Emitter<Parameters>();
|
||||
readonly onUpdateParameters: Event<Parameters> =
|
||||
this._onUpdateParameters.event;
|
||||
//
|
||||
|
||||
get isFocused() {
|
||||
get isFocused(): boolean {
|
||||
return this._isFocused;
|
||||
}
|
||||
|
||||
get isActive() {
|
||||
get isActive(): boolean {
|
||||
return this._isActive;
|
||||
}
|
||||
get isVisible() {
|
||||
|
||||
get isVisible(): boolean {
|
||||
return this._isVisible;
|
||||
}
|
||||
|
||||
get width() {
|
||||
get isHidden(): boolean {
|
||||
return this._isHidden;
|
||||
}
|
||||
|
||||
get width(): number {
|
||||
return this._width;
|
||||
}
|
||||
|
||||
get height() {
|
||||
get height(): number {
|
||||
return this._height;
|
||||
}
|
||||
|
||||
@ -135,6 +147,9 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
|
||||
this.onDidVisibilityChange((event) => {
|
||||
this._isVisible = event.isVisible;
|
||||
}),
|
||||
this.onDidHiddenChange((event) => {
|
||||
this._isHidden = event.isHidden;
|
||||
}),
|
||||
this.onDidDimensionsChange((event) => {
|
||||
this._width = event.width;
|
||||
this._height = event.height;
|
||||
@ -146,7 +161,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
|
||||
this._onDidActiveChange,
|
||||
this._onFocusEvent,
|
||||
this._onActiveChange,
|
||||
this._onVisibilityChange,
|
||||
this._onDidHiddenChange,
|
||||
this._onUpdateParameters
|
||||
);
|
||||
}
|
||||
@ -161,8 +176,8 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
|
||||
);
|
||||
}
|
||||
|
||||
setVisible(isVisible: boolean) {
|
||||
this._onVisibilityChange.fire({ isVisible });
|
||||
setHidden(isHidden: boolean): void {
|
||||
this._onDidHiddenChange.fire({ isHidden });
|
||||
}
|
||||
|
||||
setActive(): void {
|
||||
@ -172,8 +187,4 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
|
||||
updateParameters(parameters: Parameters): void {
|
||||
this._onUpdateParameters.fire(parameters);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
@ -350,7 +350,8 @@ export class TabsContainer
|
||||
!this.accessor.options.disableFloatingGroups;
|
||||
|
||||
const isFloatingWithOnePanel =
|
||||
this.group.api.location.type === 'floating' && this.size === 1;
|
||||
this.group.api.location.type === 'floating' &&
|
||||
this.size === 1;
|
||||
|
||||
if (
|
||||
isFloatingGroupsEnabled &&
|
||||
|
||||
@ -58,7 +58,6 @@ import {
|
||||
TabDragEvent,
|
||||
} from './components/titlebar/tabsContainer';
|
||||
import { Box } from '../types';
|
||||
import { DockviewPopoutGroupPanel } from './dockviewPopoutGroupPanel';
|
||||
import {
|
||||
DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
|
||||
DEFAULT_FLOATING_GROUP_POSITION,
|
||||
@ -290,7 +289,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
|
||||
onDidOpen?: (event: { id: string; window: Window }) => void;
|
||||
onWillClose?: (event: { id: string; window: Window }) => void;
|
||||
}
|
||||
): Promise<boolean>;
|
||||
): Promise<void>;
|
||||
}
|
||||
|
||||
export class DockviewComponent
|
||||
@ -334,7 +333,8 @@ export class DockviewComponent
|
||||
private readonly _floatingGroups: DockviewFloatingGroupPanel[] = [];
|
||||
private readonly _popoutGroups: {
|
||||
window: PopoutWindow;
|
||||
group: DockviewGroupPanel;
|
||||
popoutGroup: DockviewGroupPanel;
|
||||
referenceGroup: DockviewGroupPanel;
|
||||
disposable: IDisposable;
|
||||
}[] = [];
|
||||
private readonly _rootDropTarget: Droptarget;
|
||||
@ -514,7 +514,7 @@ export class DockviewComponent
|
||||
this.updateWatermark();
|
||||
}
|
||||
|
||||
async addPopoutGroup(
|
||||
addPopoutGroup(
|
||||
item: DockviewPanel | DockviewGroupPanel,
|
||||
options?: {
|
||||
skipRemoveGroup?: boolean;
|
||||
@ -523,10 +523,28 @@ export class DockviewComponent
|
||||
onDidOpen?: (event: { id: string; window: Window }) => void;
|
||||
onWillClose?: (event: { id: string; window: Window }) => void;
|
||||
}
|
||||
): Promise<boolean> {
|
||||
const theme = getDockviewTheme(this.gridview.element);
|
||||
): Promise<void> {
|
||||
if (item instanceof DockviewPanel && item.group.size === 1) {
|
||||
return this.addPopoutGroup(item.group);
|
||||
}
|
||||
|
||||
const getBox: () => Box = () => {
|
||||
const theme = getDockviewTheme(this.gridview.element);
|
||||
const element = this.element;
|
||||
|
||||
function moveGroupWithoutDestroying(options: {
|
||||
from: DockviewGroupPanel;
|
||||
to: DockviewGroupPanel;
|
||||
}) {
|
||||
const panels = [...options.from.panels].map((panel) =>
|
||||
options.from.model.removePanel(panel)
|
||||
);
|
||||
|
||||
panels.forEach((panel) => {
|
||||
options.to.model.openPanel(panel);
|
||||
});
|
||||
}
|
||||
|
||||
function getBox(): Box {
|
||||
if (options?.position) {
|
||||
return options.position;
|
||||
}
|
||||
@ -538,18 +556,17 @@ export class DockviewComponent
|
||||
if (item.group) {
|
||||
return item.group.element.getBoundingClientRect();
|
||||
}
|
||||
return this.element.getBoundingClientRect();
|
||||
};
|
||||
return element.getBoundingClientRect();
|
||||
}
|
||||
|
||||
const box: Box = getBox();
|
||||
|
||||
const groupId =
|
||||
item instanceof DockviewGroupPanel
|
||||
? item.id
|
||||
: this.getNextGroupId();
|
||||
const groupId = this.getNextGroupId(); //item.id;
|
||||
|
||||
item.api.setHidden(true);
|
||||
|
||||
const _window = new PopoutWindow(
|
||||
`${this.id}-${groupId}`, // globally unique within dockview
|
||||
`${this.id}-${groupId}`, // unique id
|
||||
theme ?? '',
|
||||
{
|
||||
url: options?.popoutUrl ?? '/popout.html',
|
||||
@ -562,37 +579,39 @@ export class DockviewComponent
|
||||
}
|
||||
);
|
||||
|
||||
const disposables = new CompositeDisposable(
|
||||
const popoutWindowDisposable = new CompositeDisposable(
|
||||
_window,
|
||||
_window.onDidClose(() => {
|
||||
disposables.dispose();
|
||||
popoutWindowDisposable.dispose();
|
||||
})
|
||||
);
|
||||
|
||||
const popoutContainer = await _window.open();
|
||||
return _window
|
||||
.open()
|
||||
.then((popoutContainer) => {
|
||||
if (_window.isDisposed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (popoutContainer) {
|
||||
let group: DockviewGroupPanel;
|
||||
if (popoutContainer === null) {
|
||||
popoutWindowDisposable.dispose();
|
||||
return;
|
||||
}
|
||||
|
||||
const referenceGroup =
|
||||
item instanceof DockviewPanel ? item.group : item;
|
||||
|
||||
const group = this.createGroup({ id: groupId });
|
||||
|
||||
if (item instanceof DockviewPanel) {
|
||||
group = this.createGroup({ id: groupId });
|
||||
|
||||
this.removePanel(item, {
|
||||
removeEmptyGroup: true,
|
||||
skipDispose: true,
|
||||
});
|
||||
|
||||
group.model.openPanel(item);
|
||||
const panel = referenceGroup.model.removePanel(item);
|
||||
group.model.openPanel(panel);
|
||||
} else {
|
||||
group = item;
|
||||
|
||||
const skip =
|
||||
typeof options?.skipRemoveGroup === 'boolean' &&
|
||||
options.skipRemoveGroup;
|
||||
|
||||
if (!skip) {
|
||||
this.doRemoveGroup(item, { skipDispose: true });
|
||||
}
|
||||
moveGroupWithoutDestroying({
|
||||
from: referenceGroup,
|
||||
to: group,
|
||||
});
|
||||
referenceGroup.api.setHidden(false);
|
||||
}
|
||||
|
||||
popoutContainer.appendChild(group.element);
|
||||
@ -602,29 +621,43 @@ export class DockviewComponent
|
||||
getWindow: () => _window.window!,
|
||||
};
|
||||
|
||||
const value = { window: _window, group, disposable: disposables };
|
||||
const value = {
|
||||
window: _window,
|
||||
popoutGroup: group,
|
||||
referenceGroup,
|
||||
disposable: popoutWindowDisposable,
|
||||
};
|
||||
|
||||
disposables.addDisposables(
|
||||
{
|
||||
dispose: () => {
|
||||
group.model.location = { type: 'grid' };
|
||||
popoutWindowDisposable.addDisposables(
|
||||
Disposable.from(() => {
|
||||
if (this.getPanel(referenceGroup.id)) {
|
||||
moveGroupWithoutDestroying({
|
||||
from: group,
|
||||
to: referenceGroup,
|
||||
});
|
||||
|
||||
remove(this._popoutGroups, value);
|
||||
this.updateWatermark();
|
||||
},
|
||||
},
|
||||
_window.onDidClose(() => {
|
||||
this.doAddGroup(group, [0]);
|
||||
if (referenceGroup.api.isHidden) {
|
||||
referenceGroup.api.setHidden(false);
|
||||
}
|
||||
|
||||
this.doRemoveGroup(group);
|
||||
} else {
|
||||
const removedGroup = this.doRemoveGroup(group, {
|
||||
skipDispose: true,
|
||||
skipActive: true,
|
||||
});
|
||||
removedGroup.model.location = { type: 'grid' };
|
||||
this.doAddGroup(removedGroup, [0]);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
this._popoutGroups.push(value);
|
||||
this.updateWatermark();
|
||||
return true;
|
||||
} else {
|
||||
disposables.dispose();
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
addFloatingGroup(
|
||||
@ -923,7 +956,7 @@ export class DockviewComponent
|
||||
const popoutGroups: SerializedPopoutGroup[] = this._popoutGroups.map(
|
||||
(group) => {
|
||||
return {
|
||||
data: group.group.toJSON() as GroupPanelViewState,
|
||||
data: group.popoutGroup.toJSON() as GroupPanelViewState,
|
||||
position: group.window.dimensions(),
|
||||
};
|
||||
}
|
||||
@ -1307,8 +1340,9 @@ export class DockviewComponent
|
||||
|
||||
private updateWatermark(): void {
|
||||
if (
|
||||
this.groups.filter((x) => x.api.location.type === 'grid').length ===
|
||||
0
|
||||
this.groups.filter(
|
||||
(x) => x.api.location.type === 'grid' && !x.api.isHidden
|
||||
).length === 0
|
||||
) {
|
||||
if (!this.watermark) {
|
||||
this.watermark = this.createWatermarkComponent();
|
||||
@ -1458,12 +1492,14 @@ export class DockviewComponent
|
||||
|
||||
if (group.api.location.type === 'popout') {
|
||||
const selectedGroup = this._popoutGroups.find(
|
||||
(_) => _.group === group
|
||||
(_) => _.popoutGroup === group
|
||||
);
|
||||
|
||||
if (selectedGroup) {
|
||||
if (!options?.skipDispose) {
|
||||
selectedGroup.group.dispose();
|
||||
this.doRemoveGroup(selectedGroup.referenceGroup);
|
||||
|
||||
selectedGroup.popoutGroup.dispose();
|
||||
this._groups.delete(group.id);
|
||||
this._onDidRemoveGroup.fire(group);
|
||||
}
|
||||
@ -1478,7 +1514,8 @@ export class DockviewComponent
|
||||
);
|
||||
}
|
||||
|
||||
return selectedGroup.group;
|
||||
this.updateWatermark();
|
||||
return selectedGroup.popoutGroup;
|
||||
}
|
||||
|
||||
throw new Error('failed to find popout group');
|
||||
@ -1630,7 +1667,7 @@ export class DockviewComponent
|
||||
}
|
||||
case 'popout': {
|
||||
const selectedPopoutGroup = this._popoutGroups.find(
|
||||
(x) => x.group === sourceGroup
|
||||
(x) => x.popoutGroup === sourceGroup
|
||||
);
|
||||
if (!selectedPopoutGroup) {
|
||||
throw new Error('failed to find popout group');
|
||||
@ -1700,7 +1737,7 @@ export class DockviewComponent
|
||||
}
|
||||
|
||||
const view = new DockviewGroupPanel(this, id, options);
|
||||
view.init({ params: {}, accessor: <any>null }); // required to initialized .part and allow for correct disposal of group
|
||||
view.init({ params: {}, accessor: this });
|
||||
|
||||
if (!this._groups.has(view.id)) {
|
||||
const disposable = new CompositeDisposable(
|
||||
@ -1735,8 +1772,7 @@ export class DockviewComponent
|
||||
this._groups.set(view.id, { value: view, disposable });
|
||||
}
|
||||
|
||||
// TODO: must be called after the above listeners have been setup,
|
||||
// not an ideal pattern
|
||||
// TODO: must be called after the above listeners have been setup, not an ideal pattern
|
||||
view.initialize();
|
||||
|
||||
return view;
|
||||
|
||||
@ -838,6 +838,7 @@ export class DockviewGroupPanelModel
|
||||
|
||||
this.watermark?.element.remove();
|
||||
this.watermark?.dispose?.();
|
||||
this.watermark = undefined;
|
||||
|
||||
for (const panel of this.panels) {
|
||||
panel.dispose();
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
import { CompositeDisposable } from '../lifecycle';
|
||||
import { PopoutWindow } from '../popoutWindow';
|
||||
import { Box } from '../types';
|
||||
|
||||
export class DockviewPopoutGroupPanel extends CompositeDisposable {
|
||||
readonly window: PopoutWindow;
|
||||
|
||||
constructor(
|
||||
readonly id: string,
|
||||
private readonly options: {
|
||||
className: string;
|
||||
popoutUrl: string;
|
||||
box: Box;
|
||||
onDidOpen?: (event: { id: string; window: Window }) => void;
|
||||
onWillClose?: (event: { id: string; window: Window }) => void;
|
||||
}
|
||||
) {
|
||||
super();
|
||||
|
||||
this.window = new PopoutWindow(id, options.className ?? '', {
|
||||
url: this.options.popoutUrl,
|
||||
left: this.options.box.left,
|
||||
top: this.options.box.top,
|
||||
width: this.options.box.width,
|
||||
height: this.options.box.height,
|
||||
onDidOpen: this.options.onDidOpen,
|
||||
onWillClose: this.options.onWillClose,
|
||||
});
|
||||
|
||||
this.addDisposables(
|
||||
this.window,
|
||||
this.window.onDidClose(() => {
|
||||
this.dispose();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
open(): Promise<HTMLElement | null> {
|
||||
const didOpen = this.window.open();
|
||||
|
||||
return didOpen;
|
||||
}
|
||||
}
|
||||
@ -273,7 +273,9 @@ export class Gridview implements IDisposable {
|
||||
readonly element: HTMLElement;
|
||||
|
||||
private _root: BranchNode | undefined;
|
||||
private _maximizedNode: LeafNode | undefined = undefined;
|
||||
private _maximizedNode:
|
||||
| { leaf: LeafNode; hiddenOnMaximize: LeafNode[] }
|
||||
| undefined = undefined;
|
||||
private readonly disposable: MutableDisposable = new MutableDisposable();
|
||||
|
||||
private readonly _onDidChange = new Emitter<{
|
||||
@ -329,7 +331,7 @@ export class Gridview implements IDisposable {
|
||||
}
|
||||
|
||||
maximizedView(): IGridView | undefined {
|
||||
return this._maximizedNode?.view;
|
||||
return this._maximizedNode?.leaf.view;
|
||||
}
|
||||
|
||||
hasMaximizedView(): boolean {
|
||||
@ -344,7 +346,7 @@ export class Gridview implements IDisposable {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._maximizedNode === node) {
|
||||
if (this._maximizedNode?.leaf === node) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -352,12 +354,18 @@ export class Gridview implements IDisposable {
|
||||
this.exitMaximizedView();
|
||||
}
|
||||
|
||||
const hiddenOnMaximize: LeafNode[] = [];
|
||||
|
||||
function hideAllViewsBut(parent: BranchNode, exclude: LeafNode): void {
|
||||
for (let i = 0; i < parent.children.length; i++) {
|
||||
const child = parent.children[i];
|
||||
if (child instanceof LeafNode) {
|
||||
if (child !== exclude) {
|
||||
if (parent.isChildVisible(i)) {
|
||||
parent.setChildVisible(i, false);
|
||||
} else {
|
||||
hiddenOnMaximize.push(child);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
hideAllViewsBut(child, exclude);
|
||||
@ -366,7 +374,7 @@ export class Gridview implements IDisposable {
|
||||
}
|
||||
|
||||
hideAllViewsBut(this.root, node);
|
||||
this._maximizedNode = node;
|
||||
this._maximizedNode = { leaf: node, hiddenOnMaximize };
|
||||
this._onDidMaxmizedNodeChange.fire();
|
||||
}
|
||||
|
||||
@ -375,11 +383,15 @@ export class Gridview implements IDisposable {
|
||||
return;
|
||||
}
|
||||
|
||||
const hiddenOnMaximize = this._maximizedNode.hiddenOnMaximize;
|
||||
|
||||
function showViewsInReverseOrder(parent: BranchNode): void {
|
||||
for (let index = parent.children.length - 1; index >= 0; index--) {
|
||||
const child = parent.children[index];
|
||||
if (child instanceof LeafNode) {
|
||||
if (!hiddenOnMaximize.includes(child)) {
|
||||
parent.setChildVisible(index, true);
|
||||
}
|
||||
} else {
|
||||
showViewsInReverseOrder(child);
|
||||
}
|
||||
@ -395,8 +407,8 @@ export class Gridview implements IDisposable {
|
||||
public serialize(): SerializedGridview<any> {
|
||||
if (this.hasMaximizedView()) {
|
||||
/**
|
||||
* do not persist maximized view state but we must first exit any maximized views
|
||||
* before serialization to ensure the correct dimensions are persisted
|
||||
* do not persist maximized view state
|
||||
* firstly exit any maximized views to ensure the correct dimensions are persisted
|
||||
*/
|
||||
this.exitMaximizedView();
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ import {
|
||||
import { LayoutPriority } from '../splitview/splitview';
|
||||
import { Emitter, Event } from '../events';
|
||||
import { IViewSize } from './gridview';
|
||||
import { BaseGrid, IGridPanelView } from './baseComponentGridview';
|
||||
|
||||
export interface GridviewInitParameters extends PanelInitParameters {
|
||||
minimumWidth?: number;
|
||||
@ -24,7 +25,7 @@ export interface GridviewInitParameters extends PanelInitParameters {
|
||||
maximumHeight?: number;
|
||||
priority?: LayoutPriority;
|
||||
snap?: boolean;
|
||||
accessor: GridviewComponent;
|
||||
accessor: BaseGrid<IGridPanelView>;
|
||||
isVisible?: boolean;
|
||||
}
|
||||
|
||||
@ -157,14 +158,16 @@ export abstract class GridviewPanel<
|
||||
this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
|
||||
|
||||
this.addDisposables(
|
||||
this.api.onVisibilityChange((event) => {
|
||||
const { isVisible } = event;
|
||||
this.api.onDidHiddenChange((event) => {
|
||||
const { isHidden } = event;
|
||||
const { accessor } = this._params as GridviewInitParameters;
|
||||
accessor.setVisible(this, isVisible);
|
||||
|
||||
accessor.setVisible(this, !isHidden);
|
||||
}),
|
||||
this.api.onActiveChange(() => {
|
||||
const { accessor } = this._params as GridviewInitParameters;
|
||||
accessor.setActive(this);
|
||||
|
||||
accessor.doSetGroupActive(this);
|
||||
}),
|
||||
this.api.onDidConstraintsChangeInternal((event) => {
|
||||
if (
|
||||
|
||||
@ -11,8 +11,6 @@ export {
|
||||
CompositeDisposable as DockviewCompositeDisposable,
|
||||
} from './lifecycle';
|
||||
|
||||
export { PopoutWindow } from './popoutWindow';
|
||||
|
||||
export * from './panel/types';
|
||||
export * from './panel/componentFactory';
|
||||
|
||||
|
||||
@ -24,10 +24,10 @@ export namespace Disposable {
|
||||
}
|
||||
|
||||
export class CompositeDisposable {
|
||||
private readonly _disposables: IDisposable[];
|
||||
private _disposables: IDisposable[];
|
||||
private _isDisposed = false;
|
||||
|
||||
protected get isDisposed(): boolean {
|
||||
get isDisposed(): boolean {
|
||||
return this._isDisposed;
|
||||
}
|
||||
|
||||
@ -40,9 +40,13 @@ export class CompositeDisposable {
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
this._disposables.forEach((arg) => arg.dispose());
|
||||
if (this._isDisposed) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isDisposed = true;
|
||||
this._disposables.forEach((arg) => arg.dispose());
|
||||
this._disposables = [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -94,7 +94,6 @@ export class PopoutWindow extends CompositeDisposable {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
const disposable = new CompositeDisposable();
|
||||
|
||||
this._window = { value: externalWindow, disposable };
|
||||
@ -108,17 +107,14 @@ export class PopoutWindow extends CompositeDisposable {
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
|
||||
*/
|
||||
this.close();
|
||||
}),
|
||||
addDisposableWindowListener(externalWindow, 'beforeunload', () => {
|
||||
/**
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
|
||||
*/
|
||||
this.close();
|
||||
})
|
||||
);
|
||||
|
||||
const container = this.createPopoutWindowContainer();
|
||||
|
||||
if (this.className) {
|
||||
container.classList.add(this.className);
|
||||
}
|
||||
|
||||
this.options.onDidOpen?.({
|
||||
id: this.target,
|
||||
@ -126,6 +122,11 @@ export class PopoutWindow extends CompositeDisposable {
|
||||
});
|
||||
|
||||
return new Promise<HTMLElement | null>((resolve) => {
|
||||
externalWindow.addEventListener('unload', (e) => {
|
||||
// if page fails to load before unloading
|
||||
// this.close();
|
||||
});
|
||||
|
||||
externalWindow.addEventListener('load', () => {
|
||||
/**
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
|
||||
@ -134,12 +135,25 @@ export class PopoutWindow extends CompositeDisposable {
|
||||
const externalDocument = externalWindow.document;
|
||||
externalDocument.title = document.title;
|
||||
|
||||
// externalDocument.body.replaceChildren(container);
|
||||
externalDocument.body.appendChild(container);
|
||||
externalDocument.body.classList.add(this.className);
|
||||
|
||||
addStyles(externalDocument, window.document.styleSheets);
|
||||
|
||||
/**
|
||||
* beforeunload must be registered after load for reasons I could not determine
|
||||
* otherwise the beforeunload event will not fire when the window is closed
|
||||
*/
|
||||
addDisposableWindowListener(
|
||||
externalWindow,
|
||||
'beforeunload',
|
||||
() => {
|
||||
/**
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
|
||||
*/
|
||||
this.close();
|
||||
}
|
||||
);
|
||||
|
||||
resolve(container);
|
||||
});
|
||||
});
|
||||
|
||||
@ -89,10 +89,10 @@ export abstract class SplitviewPanel
|
||||
|
||||
this.addDisposables(
|
||||
this._onDidChange,
|
||||
this.api.onVisibilityChange((event) => {
|
||||
const { isVisible } = event;
|
||||
this.api.onDidHiddenChange((event) => {
|
||||
const { isHidden } = event;
|
||||
const { accessor } = this._params as PanelViewInitParameters;
|
||||
accessor.setVisible(this, isVisible);
|
||||
accessor.setVisible(this, !isHidden);
|
||||
}),
|
||||
this.api.onActiveChange(() => {
|
||||
const { accessor } = this._params as PanelViewInitParameters;
|
||||
|
||||
@ -3,6 +3,7 @@ import {
|
||||
GridviewPanel,
|
||||
GridviewInitParameters,
|
||||
IFrameworkPart,
|
||||
GridviewComponent,
|
||||
} from 'dockview-core';
|
||||
import { ReactPart, ReactPortalStore } from '../react';
|
||||
import { IGridviewPanelProps } from './gridview';
|
||||
@ -25,8 +26,10 @@ export class ReactGridPanelView extends GridviewPanel {
|
||||
{
|
||||
params: this._params?.params ?? {},
|
||||
api: this.api,
|
||||
// TODO: fix casting hack
|
||||
containerApi: new GridviewApi(
|
||||
(this._params as GridviewInitParameters).accessor
|
||||
(this._params as GridviewInitParameters)
|
||||
.accessor as GridviewComponent
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user