mirror of
https://github.com/mathuo/dockview
synced 2025-03-12 00:42:04 +00:00
feat: adjust gridview logic
This commit is contained in:
mathuo
parent
12b4a0d27b
commit
319cf65ac2
@ -2046,7 +2046,7 @@ describe('gridview', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
test('that a deep layout with fromJSON dimensions identical to the current dimensions loads', async () => {
|
test('that a deep HORIZONTAL layout with fromJSON dimensions identical to the current dimensions loads', async () => {
|
||||||
const container = document.createElement('div');
|
const container = document.createElement('div');
|
||||||
|
|
||||||
const gridview = new GridviewComponent({
|
const gridview = new GridviewComponent({
|
||||||
@ -2056,12 +2056,12 @@ describe('gridview', () => {
|
|||||||
components: { default: TestGridview },
|
components: { default: TestGridview },
|
||||||
});
|
});
|
||||||
|
|
||||||
gridview.layout(5000, 5000);
|
gridview.layout(6000, 5000);
|
||||||
|
|
||||||
gridview.fromJSON({
|
gridview.fromJSON({
|
||||||
grid: {
|
grid: {
|
||||||
height: 5000,
|
height: 5000,
|
||||||
width: 5000,
|
width: 6000,
|
||||||
orientation: Orientation.HORIZONTAL,
|
orientation: Orientation.HORIZONTAL,
|
||||||
root: {
|
root: {
|
||||||
type: 'branch',
|
type: 'branch',
|
||||||
@ -2069,7 +2069,7 @@ describe('gridview', () => {
|
|||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
type: 'leaf',
|
type: 'leaf',
|
||||||
size: 1000,
|
size: 2000,
|
||||||
data: {
|
data: {
|
||||||
id: 'panel_1',
|
id: 'panel_1',
|
||||||
component: 'default',
|
component: 'default',
|
||||||
@ -2078,7 +2078,7 @@ describe('gridview', () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'branch',
|
type: 'branch',
|
||||||
size: 2000,
|
size: 3000,
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
type: 'branch',
|
type: 'branch',
|
||||||
@ -2095,7 +2095,7 @@ describe('gridview', () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'branch',
|
type: 'branch',
|
||||||
size: 1000,
|
size: 2000,
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
type: 'leaf',
|
type: 'leaf',
|
||||||
@ -2132,7 +2132,7 @@ describe('gridview', () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'leaf',
|
type: 'leaf',
|
||||||
size: 2000,
|
size: 1000,
|
||||||
data: {
|
data: {
|
||||||
id: 'panel_6',
|
id: 'panel_6',
|
||||||
component: 'default',
|
component: 'default',
|
||||||
@ -2148,7 +2148,7 @@ describe('gridview', () => {
|
|||||||
expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
|
expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
|
||||||
grid: {
|
grid: {
|
||||||
height: 5000,
|
height: 5000,
|
||||||
width: 5000,
|
width: 6000,
|
||||||
orientation: Orientation.HORIZONTAL,
|
orientation: Orientation.HORIZONTAL,
|
||||||
root: {
|
root: {
|
||||||
type: 'branch',
|
type: 'branch',
|
||||||
@ -2156,7 +2156,7 @@ describe('gridview', () => {
|
|||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
type: 'leaf',
|
type: 'leaf',
|
||||||
size: 1000,
|
size: 2000,
|
||||||
data: {
|
data: {
|
||||||
id: 'panel_1',
|
id: 'panel_1',
|
||||||
component: 'default',
|
component: 'default',
|
||||||
@ -2165,7 +2165,7 @@ describe('gridview', () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'branch',
|
type: 'branch',
|
||||||
size: 2000,
|
size: 3000,
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
type: 'branch',
|
type: 'branch',
|
||||||
@ -2182,7 +2182,7 @@ describe('gridview', () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'branch',
|
type: 'branch',
|
||||||
size: 1000,
|
size: 2000,
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
type: 'leaf',
|
type: 'leaf',
|
||||||
@ -2217,9 +2217,374 @@ describe('gridview', () => {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_6',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
activePanel: 'panel_1',
|
||||||
|
});
|
||||||
|
|
||||||
|
gridview.layout(6000, 5000, true);
|
||||||
|
|
||||||
|
expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
|
||||||
|
grid: {
|
||||||
|
height: 5000,
|
||||||
|
width: 6000,
|
||||||
|
orientation: Orientation.HORIZONTAL,
|
||||||
|
root: {
|
||||||
|
type: 'branch',
|
||||||
|
size: 5000,
|
||||||
|
data: [
|
||||||
{
|
{
|
||||||
type: 'leaf',
|
type: 'leaf',
|
||||||
size: 2000,
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 3000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 4000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_2',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 2000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_4',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_5',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_6',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
activePanel: 'panel_1',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('that a deep VERTICAL layout with fromJSON dimensions identical to the current dimensions loads', async () => {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
|
||||||
|
const gridview = new GridviewComponent({
|
||||||
|
parentElement: container,
|
||||||
|
proportionalLayout: true,
|
||||||
|
orientation: Orientation.VERTICAL,
|
||||||
|
components: { default: TestGridview },
|
||||||
|
});
|
||||||
|
|
||||||
|
gridview.layout(5000, 6000);
|
||||||
|
|
||||||
|
gridview.fromJSON({
|
||||||
|
grid: {
|
||||||
|
height: 6000,
|
||||||
|
width: 5000,
|
||||||
|
orientation: Orientation.VERTICAL,
|
||||||
|
root: {
|
||||||
|
type: 'branch',
|
||||||
|
size: 5000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 3000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 4000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_2',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 2000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_4',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_5',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_6',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
activePanel: 'panel_1',
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
|
||||||
|
grid: {
|
||||||
|
height: 6000,
|
||||||
|
width: 5000,
|
||||||
|
orientation: Orientation.VERTICAL,
|
||||||
|
root: {
|
||||||
|
type: 'branch',
|
||||||
|
size: 5000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 3000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 4000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_2',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 2000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_4',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_5',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_6',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
activePanel: 'panel_1',
|
||||||
|
});
|
||||||
|
|
||||||
|
gridview.layout(5000, 6000, true);
|
||||||
|
|
||||||
|
expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
|
||||||
|
grid: {
|
||||||
|
height: 6000,
|
||||||
|
width: 5000,
|
||||||
|
orientation: Orientation.VERTICAL,
|
||||||
|
root: {
|
||||||
|
type: 'branch',
|
||||||
|
size: 5000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_1',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 3000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 4000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_2',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'branch',
|
||||||
|
size: 2000,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_3',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 2000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_4',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
|
data: {
|
||||||
|
id: 'panel_5',
|
||||||
|
component: 'default',
|
||||||
|
snap: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'leaf',
|
||||||
|
size: 1000,
|
||||||
data: {
|
data: {
|
||||||
id: 'panel_6',
|
id: 'panel_6',
|
||||||
component: 'default',
|
component: 'default',
|
||||||
|
|||||||
@ -149,7 +149,7 @@ export class BranchNode extends CompositeDisposable implements IView {
|
|||||||
: true,
|
: true,
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
size: this.size,
|
size: this.orthogonalSize,
|
||||||
};
|
};
|
||||||
|
|
||||||
this.children = childDescriptors.map((c) => c.node);
|
this.children = childDescriptors.map((c) => c.node);
|
||||||
@ -235,7 +235,7 @@ export class BranchNode extends CompositeDisposable implements IView {
|
|||||||
this._size = orthogonalSize;
|
this._size = orthogonalSize;
|
||||||
this._orthogonalSize = size;
|
this._orthogonalSize = size;
|
||||||
|
|
||||||
this.splitview.layout(this.size, this.orthogonalSize);
|
this.splitview.layout(orthogonalSize, size);
|
||||||
}
|
}
|
||||||
|
|
||||||
public addChild(
|
public addChild(
|
||||||
|
|||||||
@ -400,8 +400,9 @@ export class Gridview implements IDisposable {
|
|||||||
orientation,
|
orientation,
|
||||||
this.proportionalLayout,
|
this.proportionalLayout,
|
||||||
this.styles,
|
this.styles,
|
||||||
orthogonalSize, // <- size - flips at each depth
|
|
||||||
node.size, // <- orthogonal size - flips at each depth
|
node.size, // <- orthogonal size - flips at each depth
|
||||||
|
orthogonalSize, // <- size - flips at each depth
|
||||||
|
|
||||||
children
|
children
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
@ -457,8 +458,7 @@ export class Gridview implements IDisposable {
|
|||||||
|
|
||||||
if (oldRoot.children.length === 0) {
|
if (oldRoot.children.length === 0) {
|
||||||
// no data so no need to add anything back in
|
// no data so no need to add anything back in
|
||||||
} else
|
} else if (oldRoot.children.length === 1) {
|
||||||
if (oldRoot.children.length === 1) {
|
|
||||||
// can remove one level of redundant branching if there is only a single child
|
// can remove one level of redundant branching if there is only a single child
|
||||||
const childReference = oldRoot.children[0];
|
const childReference = oldRoot.children[0];
|
||||||
const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
|
const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user