mirror of
https://github.com/mathuo/dockview
synced 2025-03-11 16:32:06 +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 gridview = new GridviewComponent({
|
||||
@ -2056,12 +2056,12 @@ describe('gridview', () => {
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(5000, 5000);
|
||||
gridview.layout(6000, 5000);
|
||||
|
||||
gridview.fromJSON({
|
||||
grid: {
|
||||
height: 5000,
|
||||
width: 5000,
|
||||
width: 6000,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
root: {
|
||||
type: 'branch',
|
||||
@ -2069,7 +2069,7 @@ describe('gridview', () => {
|
||||
data: [
|
||||
{
|
||||
type: 'leaf',
|
||||
size: 1000,
|
||||
size: 2000,
|
||||
data: {
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
@ -2078,7 +2078,7 @@ describe('gridview', () => {
|
||||
},
|
||||
{
|
||||
type: 'branch',
|
||||
size: 2000,
|
||||
size: 3000,
|
||||
data: [
|
||||
{
|
||||
type: 'branch',
|
||||
@ -2095,7 +2095,7 @@ describe('gridview', () => {
|
||||
},
|
||||
{
|
||||
type: 'branch',
|
||||
size: 1000,
|
||||
size: 2000,
|
||||
data: [
|
||||
{
|
||||
type: 'leaf',
|
||||
@ -2132,7 +2132,7 @@ describe('gridview', () => {
|
||||
},
|
||||
{
|
||||
type: 'leaf',
|
||||
size: 2000,
|
||||
size: 1000,
|
||||
data: {
|
||||
id: 'panel_6',
|
||||
component: 'default',
|
||||
@ -2148,7 +2148,7 @@ describe('gridview', () => {
|
||||
expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
|
||||
grid: {
|
||||
height: 5000,
|
||||
width: 5000,
|
||||
width: 6000,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
root: {
|
||||
type: 'branch',
|
||||
@ -2156,7 +2156,7 @@ describe('gridview', () => {
|
||||
data: [
|
||||
{
|
||||
type: 'leaf',
|
||||
size: 1000,
|
||||
size: 2000,
|
||||
data: {
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
@ -2165,7 +2165,7 @@ describe('gridview', () => {
|
||||
},
|
||||
{
|
||||
type: 'branch',
|
||||
size: 2000,
|
||||
size: 3000,
|
||||
data: [
|
||||
{
|
||||
type: 'branch',
|
||||
@ -2182,7 +2182,7 @@ describe('gridview', () => {
|
||||
},
|
||||
{
|
||||
type: 'branch',
|
||||
size: 1000,
|
||||
size: 2000,
|
||||
data: [
|
||||
{
|
||||
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',
|
||||
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: {
|
||||
id: 'panel_6',
|
||||
component: 'default',
|
||||
|
||||
@ -149,7 +149,7 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
: true,
|
||||
};
|
||||
}),
|
||||
size: this.size,
|
||||
size: this.orthogonalSize,
|
||||
};
|
||||
|
||||
this.children = childDescriptors.map((c) => c.node);
|
||||
@ -235,7 +235,7 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
this._size = orthogonalSize;
|
||||
this._orthogonalSize = size;
|
||||
|
||||
this.splitview.layout(this.size, this.orthogonalSize);
|
||||
this.splitview.layout(orthogonalSize, size);
|
||||
}
|
||||
|
||||
public addChild(
|
||||
|
||||
@ -400,8 +400,9 @@ export class Gridview implements IDisposable {
|
||||
orientation,
|
||||
this.proportionalLayout,
|
||||
this.styles,
|
||||
orthogonalSize, // <- size - flips at each depth
|
||||
node.size, // <- orthogonal size - flips at each depth
|
||||
orthogonalSize, // <- size - flips at each depth
|
||||
|
||||
children
|
||||
);
|
||||
} else {
|
||||
@ -457,8 +458,7 @@ export class Gridview implements IDisposable {
|
||||
|
||||
if (oldRoot.children.length === 0) {
|
||||
// no data so no need to add anything back in
|
||||
} else
|
||||
if (oldRoot.children.length === 1) {
|
||||
} else if (oldRoot.children.length === 1) {
|
||||
// can remove one level of redundant branching if there is only a single child
|
||||
const childReference = oldRoot.children[0];
|
||||
const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
|
||||
|
||||
Loading…
Reference in New Issue
Block a user