mirror of
https://github.com/mathuo/dockview
synced 2025-05-05 11:08:25 +00:00
feat: retain size when moving groups
This commit is contained in:
parent
05084030db
commit
e2e91834ff
@ -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 { IDockviewPanel } from '../../dockview/dockviewPanel';
|
||||
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
|
||||
import { fireEvent, queryByTestId } from '@testing-library/dom';
|
||||
import { getPanelData } from '../../dnd/dataTransfer';
|
||||
@ -262,6 +262,112 @@ describe('dockviewComponent', () => {
|
||||
dockview.dispose();
|
||||
});
|
||||
|
||||
describe('move group', () => {
|
||||
test('horizontal', () => {
|
||||
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(600, 1000);
|
||||
|
||||
const panel1 = dockview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
});
|
||||
const panel2 = dockview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
position: { direction: 'right' },
|
||||
});
|
||||
const panel3 = dockview.addPanel({
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
position: { direction: 'right' },
|
||||
});
|
||||
|
||||
expect(panel1.api.width).toBe(200);
|
||||
expect(panel2.api.width).toBe(200);
|
||||
expect(panel3.api.width).toBe(200);
|
||||
|
||||
panel3.api.setSize({ width: 300 });
|
||||
|
||||
expect(panel1.api.width).toBe(200);
|
||||
expect(panel2.api.width).toBe(100);
|
||||
expect(panel3.api.width).toBe(300);
|
||||
|
||||
dockview.moveGroup({
|
||||
from: { group: panel3.api.group },
|
||||
to: { group: panel1.api.group, position: 'right' },
|
||||
});
|
||||
|
||||
expect(panel1.api.width).toBe(200);
|
||||
expect(panel2.api.width).toBe(100);
|
||||
expect(panel3.api.width).toBe(300);
|
||||
});
|
||||
|
||||
test('vertical', () => {
|
||||
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, 600);
|
||||
|
||||
const panel1 = dockview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
});
|
||||
const panel2 = dockview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
position: { direction: 'below' },
|
||||
});
|
||||
const panel3 = dockview.addPanel({
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
position: { direction: 'below' },
|
||||
});
|
||||
|
||||
expect(panel1.api.height).toBe(200);
|
||||
expect(panel2.api.height).toBe(200);
|
||||
expect(panel3.api.height).toBe(200);
|
||||
|
||||
panel3.api.setSize({ height: 300 });
|
||||
|
||||
expect(panel1.api.height).toBe(200);
|
||||
expect(panel2.api.height).toBe(100);
|
||||
expect(panel3.api.height).toBe(300);
|
||||
|
||||
dockview.moveGroup({
|
||||
from: { group: panel3.api.group },
|
||||
to: { group: panel1.api.group, position: 'bottom' },
|
||||
});
|
||||
|
||||
expect(panel1.api.height).toBe(200);
|
||||
expect(panel2.api.height).toBe(100);
|
||||
expect(panel3.api.height).toBe(300);
|
||||
});
|
||||
});
|
||||
|
||||
test('set active panel', () => {
|
||||
dockview.layout(500, 1000);
|
||||
|
||||
|
@ -2068,7 +2068,24 @@ export class DockviewComponent
|
||||
target
|
||||
);
|
||||
|
||||
this.gridview.addView(from, Sizing.Distribute, dropLocation);
|
||||
let size: number;
|
||||
|
||||
switch (this.gridview.orientation) {
|
||||
case Orientation.VERTICAL:
|
||||
size =
|
||||
referenceLocation.length % 2 == 0
|
||||
? from.api.width
|
||||
: from.api.height;
|
||||
break;
|
||||
case Orientation.HORIZONTAL:
|
||||
size =
|
||||
referenceLocation.length % 2 == 0
|
||||
? from.api.height
|
||||
: from.api.width;
|
||||
break;
|
||||
}
|
||||
|
||||
this.gridview.addView(from, size, dropLocation);
|
||||
}
|
||||
|
||||
from.panels.forEach((panel) => {
|
||||
|
Loading…
Reference in New Issue
Block a user