rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-03-12 08:52:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: allow center drops when no grid panels

Browse Source
This commit is contained in:
mathuo 2023-07-05 20:24:15 +01:00
parent c1bf5deaf9
commit f364bb70a6
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
3 changed files with 161 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2287,6 +2287,126 @@ describe('dockviewComponent', () => {
});
});
test('orthogonal realigment #4', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent({
parentElement: container,
components: {
default: PanelContentPartTest,
},
tabComponents: {
test_tab_id: PanelTabPartTest,
},
orientation: Orientation.HORIZONTAL,
});
dockview.layout(1000, 1000);
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
dockview.addPanel({
id: 'panel1',
component: 'default',
position: {
direction: 'above',
},
});
expect(dockview.orientation).toBe(Orientation.VERTICAL);
expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
activeGroup: '1',
grid: {
root: {
type: 'branch',
data: [
{
type: 'leaf',
data: {
views: ['panel1'],
id: '1',
activeView: 'panel1',
},
size: 1000,
},
],
size: 1000,
},
height: 1000,
width: 1000,
orientation: Orientation.VERTICAL,
},
panels: {
panel1: {
id: 'panel1',
contentComponent: 'default',
title: 'panel1',
},
},
});
});
test('orthogonal realigment #5', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent({
parentElement: container,
components: {
default: PanelContentPartTest,
},
tabComponents: {
test_tab_id: PanelTabPartTest,
},
orientation: Orientation.VERTICAL,
});
dockview.layout(1000, 1000);
expect(dockview.orientation).toBe(Orientation.VERTICAL);
dockview.addPanel({
id: 'panel1',
component: 'default',
position: {
direction: 'left',
},
});
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
activeGroup: '1',
grid: {
root: {
type: 'branch',
data: [
{
type: 'leaf',
data: {
views: ['panel1'],
id: '1',
activeView: 'panel1',
},
size: 1000,
},
],
size: 1000,
},
height: 1000,
width: 1000,
orientation: Orientation.HORIZONTAL,
},
panels: {
panel1: {
id: 'panel1',
contentComponent: 'default',
title: 'panel1',
},
},
});
});
test('that a empty component has no groups', () => {
const container = document.createElement('div');
@ -3635,4 +3755,36 @@ describe('dockviewComponent', () => {
expect(dockview.groups.length).toBe(1);
expect(dockview.panels.length).toBe(2);
});
test('that moving the last panel to be floating should leave an empty gridview', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent({
parentElement: container,
components: {
default: PanelContentPartTest,
},
tabComponents: {
test_tab_id: PanelTabPartTest,
},
orientation: Orientation.HORIZONTAL,
});
dockview.layout(1000, 500);
const panel1 = dockview.addPanel({
id: 'panel_1',
component: 'default',
});
expect(
dockview.element.querySelectorAll('.view-container > .view').length
).toBe(1);
dockview.addFloatingGroup(panel1);
expect(
dockview.element.querySelectorAll('.view-container > .view').length
).toBe(0);
});
});

1
packages/dockview-core/src/dockview/dockviewComponent.scss
View File

@ -8,7 +8,6 @@
left: 0px;
height: 100%;
width: 100%;
z-index: 9997;
}
}

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

@ -247,6 +247,13 @@ export class DockviewComponent
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;
}
@ -261,7 +268,7 @@ export class DockviewComponent
return false;
},
acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
overlayModel: {
activationSize: { type: 'pixels', value: 10 },
size: { type: 'pixels', value: 20 },
@ -399,6 +406,7 @@ export class DockviewComponent
switch (position) {
case 'top':
case 'left':
case 'center':
return this.createGroupAtLocation([0]); // insert into first position
case 'bottom':
case 'right':