rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-08 17:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug: duplicate .close() call

Browse Source
This commit is contained in:
mathuo 2024-10-31 19:31:11 +00:00
parent ee7cf637bb
commit adaeb16b98
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
5 changed files with 229 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts
View File

@ -1,4 +1,4 @@
import { fromPartial } from "@total-typescript/shoehorn";
import { fromPartial } from '@total-typescript/shoehorn';
export function setupMockWindow() {
const listeners: Record<string, (() => void)[]> = {};
@ -16,6 +16,14 @@ export function setupMockWindow() {
listener();
}
},
removeEventListener: (type: string, listener: () => void) => {
if (listeners[type]) {
const index = listeners[type].indexOf(listener);
if (index > -1) {
listeners[type].splice(index, 1);
}
}
},
dispatchEvent: (event: Event) => {
const items = listeners[event.type];
if (!items) {
@ -24,7 +32,9 @@ export function setupMockWindow() {
items.forEach((item) => item());
},
document: document,
close: jest.fn(),
close: () => {
listeners['beforeunload']?.forEach((f) => f());
},
get innerWidth() {
return width++;
},

148
packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -8,7 +8,7 @@ import { PanelUpdateEvent } from '../../panel/types';
import { Orientation } from '../../splitview/splitview';
import { CompositeDisposable } from '../../lifecycle';
import { Emitter } from '../../events';
import { IDockviewPanel } from '../../dockview/dockviewPanel';
import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel';
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
import { fireEvent, queryByTestId } from '@testing-library/dom';
import { getPanelData } from '../../dnd/dataTransfer';
@ -116,8 +116,6 @@ describe('dockviewComponent', () => {
}
},
});
window.open = jest.fn();
});
test('update className', () => {
@ -4886,6 +4884,150 @@ describe('dockviewComponent', () => {
]);
});
test('popout / floating layouts', async () => {
jest.useRealTimers();
const container = document.createElement('div');
window.open = () => setupMockWindow();
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 500);
let panel1 = dockview.addPanel({
id: 'panel_1',
component: 'default',
});
let panel2 = dockview.addPanel({
id: 'panel_2',
component: 'default',
});
let panel3 = dockview.addPanel({
id: 'panel_3',
component: 'default',
});
let panel4 = dockview.addPanel({
id: 'panel_4',
component: 'default',
});
expect(panel1.api.location.type).toBe('grid');
expect(panel2.api.location.type).toBe('grid');
expect(panel3.api.location.type).toBe('grid');
expect(panel4.api.location.type).toBe('grid');
dockview.addFloatingGroup(panel2);
dockview.addFloatingGroup(panel3);
expect(panel1.api.location.type).toBe('grid');
expect(panel2.api.location.type).toBe('floating');
expect(panel3.api.location.type).toBe('floating');
expect(panel4.api.location.type).toBe('grid');
await dockview.addPopoutGroup(panel2);
await dockview.addPopoutGroup(panel4);
expect(panel1.api.location.type).toBe('grid');
expect(panel2.api.location.type).toBe('popout');
expect(panel3.api.location.type).toBe('floating');
expect(panel4.api.location.type).toBe('popout');
const state = dockview.toJSON();
dockview.fromJSON(state);
/**
* exhaust task queue since popout group completion is async but not awaited in `fromJSON(...)`
*/
await new Promise((resolve) => setTimeout(resolve, 0));
expect(dockview.panels.length).toBe(4);
panel1 = dockview.api.getPanel('panel_1') as DockviewPanel;
panel2 = dockview.api.getPanel('panel_2') as DockviewPanel;
panel3 = dockview.api.getPanel('panel_3') as DockviewPanel;
panel4 = dockview.api.getPanel('panel_4') as DockviewPanel;
expect(panel1.api.location.type).toBe('grid');
expect(panel2.api.location.type).toBe('popout');
expect(panel3.api.location.type).toBe('floating');
expect(panel4.api.location.type).toBe('popout');
dockview.clear();
expect(dockview.groups.length).toBe(0);
expect(dockview.panels.length).toBe(0);
});
test('close popout window object', async () => {
const container = document.createElement('div');
const mockWindow = setupMockWindow();
window.open = () => mockWindow;
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 500);
let panel1 = dockview.addPanel({
id: 'panel_1',
component: 'default',
});
let panel2 = dockview.addPanel({
id: 'panel_2',
component: 'default',
position: { referencePanel: panel1, direction: 'within' },
});
let panel3 = dockview.addPanel({
id: 'panel_3',
component: 'default',
});
dockview.addFloatingGroup(panel2);
await dockview.addPopoutGroup(panel2);
expect(panel1.group.api.location.type).toBe('grid');
expect(panel2.group.api.location.type).toBe('popout');
expect(panel3.group.api.location.type).toBe('grid');
mockWindow.close();
expect(panel1.group.api.location.type).toBe('grid');
expect(panel2.group.api.location.type).toBe('grid');
expect(panel3.group.api.location.type).toBe('grid');
dockview.clear();
expect(dockview.groups.length).toBe(0);
expect(dockview.panels.length).toBe(0);
});
test('remove all panels from popout group', async () => {
const container = document.createElement('div');

50
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -541,7 +541,6 @@ export class DockviewComponent
addPopoutGroup(
itemToPopout: DockviewPanel | DockviewGroupPanel,
options?: {
skipRemoveGroup?: boolean;
position?: Box;
popoutUrl?: string;
onDidOpen?: (event: { id: string; window: Window }) => void;
@ -593,9 +592,12 @@ export class DockviewComponent
}
);
let windowExplicitlyClosed = false;
const popoutWindowDisposable = new CompositeDisposable(
_window,
_window.onDidClose(() => {
windowExplicitlyClosed = true;
popoutWindowDisposable.dispose();
})
);
@ -627,8 +629,16 @@ export class DockviewComponent
const referenceLocation = itemToPopout.api.location.type;
const group =
options?.overridePopoutGroup ??
/**
* The group that is being added doesn't already exist within the DOM, the most likely occurance
* of this case is when being called from the `fromJSON(...)` method
*/
const isGroupAddedToDom =
referenceGroup.element.parentElement !== null;
const group = !isGroupAddedToDom
? referenceGroup
: options?.overridePopoutGroup ??
this.createGroup({ id: groupId });
group.model.renderContainer = overlayRenderContainer;
group.layout(
@ -636,10 +646,11 @@ export class DockviewComponent
_window.window!.innerHeight
);
if (!options?.overridePopoutGroup) {
if (!this._groups.has(group.api.id)) {
this._onDidAddGroup.fire(group);
}
if (!options?.overridePopoutGroup && isGroupAddedToDom) {
if (itemToPopout instanceof DockviewPanel) {
this.movingLock(() => {
const panel =
@ -664,6 +675,7 @@ export class DockviewComponent
break;
}
}
}
popoutContainer.classList.add('dv-dockview');
popoutContainer.style.overflow = 'hidden';
@ -676,7 +688,10 @@ export class DockviewComponent
getWindow: () => _window.window!,
};
if (itemToPopout.api.location.type === 'grid') {
if (
isGroupAddedToDom &&
itemToPopout.api.location.type === 'grid'
) {
itemToPopout.api.setVisible(false);
}
@ -698,8 +713,12 @@ export class DockviewComponent
const value = {
window: _window,
popoutGroup: group,
referenceGroup: this.getPanel(referenceGroup.id)
referenceGroup: !isGroupAddedToDom
? undefined
: referenceGroup
? this.getPanel(referenceGroup.id)
? referenceGroup.id
: undefined
: undefined,
disposable: {
dispose: () => {
@ -727,7 +746,10 @@ export class DockviewComponent
),
overlayRenderContainer,
Disposable.from(() => {
if (this.getPanel(referenceGroup.id)) {
if (
isGroupAddedToDom &&
this.getPanel(referenceGroup.id)
) {
this.movingLock(() =>
moveGroupWithoutDestroying({
from: group,
@ -745,14 +767,21 @@ export class DockviewComponent
});
}
} else if (this.getPanel(group.id)) {
const removedGroup = this.doRemoveGroup(group, {
this.doRemoveGroup(group, {
skipDispose: true,
skipActive: true,
skipPopoutReturn: true,
});
const removedGroup = group;
removedGroup.model.renderContainer =
this.overlayRenderContainer;
removedGroup.model.location = { type: 'grid' };
returnedGroup = removedGroup;
this.doAddGroup(removedGroup, [0]);
this.doSetGroupAndPanelActive(removedGroup);
}
})
);
@ -1279,7 +1308,6 @@ export class DockviewComponent
? this.getPanel(gridReferenceGroup)
: undefined) ?? group,
{
skipRemoveGroup: true,
position: position ?? undefined,
overridePopoutGroup: gridReferenceGroup
? group
@ -1299,6 +1327,10 @@ export class DockviewComponent
}
}
} catch (err) {
console.error(
'dockview: failed to deserialize layout. Reverting changes',
err
);
/**
* Takes all the successfully created groups and remove all of their panels.
*/

1
packages/dockview-core/src/popoutWindow.ts
View File

@ -59,7 +59,6 @@ export class PopoutWindow extends CompositeDisposable {
});
this._window.disposable.dispose();
this._window.value.close();
this._window = null;
this._onDidClose.fire();

7
packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View File

@ -103,7 +103,8 @@ export const GridActions = (props: {
if (state) {
try {
props.api?.fromJSON(JSON.parse(state));
} catch {
} catch (err) {
console.error('failed to load state', err);
localStorage.removeItem('dv-demo-state');
}
}
@ -121,8 +122,12 @@ export const GridActions = (props: {
const onReset = () => {
if (props.api) {
try {
props.api.clear();
defaultConfig(props.api);
} catch (err) {
localStorage.removeItem('dv-demo-state');
}
}
};