mirror of
https://github.com/mathuo/dockview
synced 2025-02-02 14:35:46 +00:00
Merge pull request #275 from mathuo/274-gridview-tests
test: gridview tests
This commit is contained in:
mathuo
GitHub
commit
fbe6c65186
@ -100,67 +100,67 @@ describe('dockviewComponent', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// test('event leakage', () => {
|
||||
// Emitter.setLeakageMonitorEnabled(true);
|
||||
test('event leakage', () => {
|
||||
Emitter.setLeakageMonitorEnabled(true);
|
||||
|
||||
// dockview = new DockviewComponent({
|
||||
// parentElement: container,
|
||||
// components: {
|
||||
// default: PanelContentPartTest,
|
||||
// },
|
||||
// });
|
||||
dockview = new DockviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
default: PanelContentPartTest,
|
||||
},
|
||||
});
|
||||
|
||||
// dockview.layout(500, 1000);
|
||||
dockview.layout(500, 1000);
|
||||
|
||||
// dockview.addPanel({
|
||||
// id: 'panel1',
|
||||
// component: 'default',
|
||||
// });
|
||||
dockview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
// const panel2 = dockview.addPanel({
|
||||
// id: 'panel2',
|
||||
// component: 'default',
|
||||
// });
|
||||
const panel2 = dockview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
// dockview.removePanel(panel2);
|
||||
dockview.removePanel(panel2);
|
||||
|
||||
// const panel3 = dockview.addPanel({
|
||||
// id: 'panel3',
|
||||
// component: 'default',
|
||||
// position: {
|
||||
// direction: 'right',
|
||||
// referencePanel: 'panel1',
|
||||
// },
|
||||
// });
|
||||
const panel3 = dockview.addPanel({
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'right',
|
||||
referencePanel: 'panel1',
|
||||
},
|
||||
});
|
||||
|
||||
// const panel4 = dockview.addPanel({
|
||||
// id: 'panel4',
|
||||
// component: 'default',
|
||||
// position: {
|
||||
// direction: 'above',
|
||||
// },
|
||||
// });
|
||||
const panel4 = dockview.addPanel({
|
||||
id: 'panel4',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'above',
|
||||
},
|
||||
});
|
||||
|
||||
// dockview.moveGroupOrPanel(
|
||||
// panel4.group,
|
||||
// panel3.group.id,
|
||||
// panel3.id,
|
||||
// 'center'
|
||||
// );
|
||||
dockview.moveGroupOrPanel(
|
||||
panel4.group,
|
||||
panel3.group.id,
|
||||
panel3.id,
|
||||
'center'
|
||||
);
|
||||
|
||||
// dockview.dispose();
|
||||
dockview.dispose();
|
||||
|
||||
// if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
|
||||
// for (const entry of Array.from(
|
||||
// Emitter.MEMORY_LEAK_WATCHER.events
|
||||
// )) {
|
||||
// console.log('disposal', entry[1]);
|
||||
// }
|
||||
// throw new Error('not all listeners disposed');
|
||||
// }
|
||||
if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
|
||||
for (const entry of Array.from(
|
||||
Emitter.MEMORY_LEAK_WATCHER.events
|
||||
)) {
|
||||
console.log('disposal', entry[1]);
|
||||
}
|
||||
throw new Error('not all listeners disposed');
|
||||
}
|
||||
|
||||
// Emitter.setLeakageMonitorEnabled(false);
|
||||
// });
|
||||
Emitter.setLeakageMonitorEnabled(false);
|
||||
});
|
||||
|
||||
test('duplicate panel', () => {
|
||||
dockview.layout(500, 1000);
|
||||
@ -2449,7 +2449,7 @@ describe('dockviewComponent', () => {
|
||||
});
|
||||
});
|
||||
|
||||
test('check', () => {
|
||||
test('check dockview component is rendering to the DOM as expected', () => {
|
||||
const container = document.createElement('div');
|
||||
|
||||
const dockview = new DockviewComponent({
|
||||
@ -2470,16 +2470,22 @@ describe('dockviewComponent', () => {
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
expect(dockview.element.querySelectorAll('.view').length).toBe(1);
|
||||
|
||||
const panel2 = dockview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
expect(dockview.element.querySelectorAll('.view').length).toBe(1);
|
||||
|
||||
const panel3 = dockview.addPanel({
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
expect(dockview.element.querySelectorAll('.view').length).toBe(1);
|
||||
|
||||
dockview.moveGroupOrPanel(
|
||||
panel3.group,
|
||||
panel3.group.id,
|
||||
@ -2488,6 +2494,7 @@ describe('dockviewComponent', () => {
|
||||
);
|
||||
|
||||
expect(dockview.groups.length).toBe(2);
|
||||
expect(dockview.element.querySelectorAll('.view').length).toBe(2);
|
||||
|
||||
dockview.moveGroupOrPanel(
|
||||
panel3.group,
|
||||
@ -2497,6 +2504,7 @@ describe('dockviewComponent', () => {
|
||||
);
|
||||
|
||||
expect(dockview.groups.length).toBe(3);
|
||||
expect(dockview.element.querySelectorAll('.view').length).toBe(4);
|
||||
|
||||
dockview.moveGroupOrPanel(
|
||||
panel2.group,
|
||||
@ -2507,7 +2515,6 @@ describe('dockviewComponent', () => {
|
||||
|
||||
expect(dockview.groups.length).toBe(2);
|
||||
|
||||
const viewQuery = container.querySelectorAll('.split-view-container');
|
||||
expect(viewQuery).toBeTruthy();
|
||||
expect(dockview.element.querySelectorAll('.view').length).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,6 +18,10 @@ class MockGridview implements IGridView {
|
||||
>().event;
|
||||
element: HTMLElement = document.createElement('div');
|
||||
|
||||
constructor() {
|
||||
this.element.className = 'mock-grid-view';
|
||||
}
|
||||
|
||||
layout(width: number, height: number): void {
|
||||
//
|
||||
}
|
||||
@ -116,4 +120,574 @@ describe('gridview', () => {
|
||||
|
||||
checkOrientationFlipsAtEachLevel((gridview as any).root as BranchNode);
|
||||
});
|
||||
|
||||
test('removeView: remove leaf from branch where branch becomes leaf and parent is root', () => {
|
||||
const gridview = new Gridview(
|
||||
false,
|
||||
{ separatorBorder: '' },
|
||||
Orientation.HORIZONTAL
|
||||
);
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(3);
|
||||
|
||||
gridview.removeView([1, 0], Sizing.Distribute);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(2);
|
||||
});
|
||||
|
||||
test('removeView: remove leaf from branch where branch remains branch and parent is root', () => {
|
||||
const gridview = new Gridview(
|
||||
false,
|
||||
{ separatorBorder: '' },
|
||||
Orientation.HORIZONTAL
|
||||
);
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 1]);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 333,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 333,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 334,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(4);
|
||||
|
||||
gridview.removeView([1, 0], Sizing.Distribute);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(3);
|
||||
});
|
||||
|
||||
test('removeView: remove leaf where parent is root', () => {
|
||||
const gridview = new Gridview(
|
||||
false,
|
||||
{ separatorBorder: '' },
|
||||
Orientation.HORIZONTAL
|
||||
);
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(3);
|
||||
|
||||
gridview.removeView([0], Sizing.Distribute);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'VERTICAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(2);
|
||||
});
|
||||
|
||||
test('removeView: remove leaf from branch where branch becomes leaf and parent is not root', () => {
|
||||
const gridview = new Gridview(
|
||||
false,
|
||||
{ separatorBorder: '' },
|
||||
Orientation.HORIZONTAL
|
||||
);
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 250,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 250,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(4);
|
||||
|
||||
gridview.removeView([1, 0, 0], Sizing.Distribute);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(3);
|
||||
});
|
||||
|
||||
test('removeView: remove leaf from branch where branch remains branch and parent is not root', () => {
|
||||
const gridview = new Gridview(
|
||||
false,
|
||||
{ separatorBorder: '' },
|
||||
Orientation.HORIZONTAL
|
||||
);
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 1]);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 166,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 166,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 168,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(5);
|
||||
|
||||
gridview.removeView([1, 0, 1], Sizing.Distribute);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 250,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 250,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(4);
|
||||
});
|
||||
|
||||
test('removeView: remove leaf where parent is root', () => {
|
||||
const gridview = new Gridview(
|
||||
false,
|
||||
{ separatorBorder: '' },
|
||||
Orientation.HORIZONTAL
|
||||
);
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
|
||||
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]);
|
||||
gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 1]);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 166,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 166,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 168,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 500,
|
||||
type: 'branch',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(5);
|
||||
|
||||
gridview.removeView([1, 1], Sizing.Distribute);
|
||||
|
||||
expect(gridview.serialize()).toEqual({
|
||||
height: 1000,
|
||||
orientation: 'HORIZONTAL',
|
||||
root: {
|
||||
data: [
|
||||
{
|
||||
data: {},
|
||||
size: 500,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 166,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 166,
|
||||
type: 'leaf',
|
||||
},
|
||||
{
|
||||
data: {},
|
||||
size: 168,
|
||||
type: 'leaf',
|
||||
},
|
||||
],
|
||||
size: 1000,
|
||||
type: 'branch',
|
||||
},
|
||||
width: 1000,
|
||||
});
|
||||
expect(
|
||||
gridview.element.querySelectorAll('.mock-grid-view').length
|
||||
).toBe(4);
|
||||
});
|
||||
});
|
||||
|
||||
@ -678,60 +678,82 @@ export class Gridview implements IDisposable {
|
||||
throw new Error('Invalid location');
|
||||
}
|
||||
|
||||
const node = parent.children[index];
|
||||
const nodeToRemove = parent.children[index];
|
||||
|
||||
if (!(node instanceof LeafNode)) {
|
||||
if (!(nodeToRemove instanceof LeafNode)) {
|
||||
throw new Error('Invalid location');
|
||||
}
|
||||
|
||||
parent.removeChild(index, sizing);
|
||||
nodeToRemove.dispose();
|
||||
|
||||
if (parent.children.length === 0) {
|
||||
return node.view;
|
||||
if (parent.children.length !== 1) {
|
||||
return nodeToRemove.view;
|
||||
}
|
||||
|
||||
if (parent.children.length > 1) {
|
||||
return node.view;
|
||||
}
|
||||
// if the parent has only one child and we know the parent is a BranchNode we can make the tree
|
||||
// more efficiently spaced by replacing the parent BranchNode with the child.
|
||||
// if that child is a LeafNode then we simply replace the BranchNode with the child otherwise if the child
|
||||
// is a BranchNode too we should spread it's children into the grandparent.
|
||||
|
||||
// refer to the remaining child as the sibling
|
||||
const sibling = parent.children[0];
|
||||
|
||||
if (pathToParent.length === 0) {
|
||||
// parent is root
|
||||
// if the parent is root
|
||||
|
||||
if (sibling instanceof LeafNode) {
|
||||
return node.view;
|
||||
// if the sibling is a leaf node no action is required
|
||||
return nodeToRemove.view;
|
||||
}
|
||||
|
||||
// we must promote sibling to be the new root
|
||||
// otherwise the sibling is a branch node. since the parent is the root and the root has only one child
|
||||
// which is a branch node we can just set this branch node to be the new root node
|
||||
|
||||
// for good housekeeping we'll removing the sibling from it's existing tree
|
||||
parent.removeChild(0, sizing);
|
||||
|
||||
// and set that sibling node to be root
|
||||
this.root = sibling;
|
||||
return node.view;
|
||||
|
||||
return nodeToRemove.view;
|
||||
}
|
||||
|
||||
// otherwise the parent is apart of a large sub-tree
|
||||
|
||||
const [grandParent, ..._] = [...pathToParent].reverse();
|
||||
const [parentIndex, ...__] = [...rest].reverse();
|
||||
|
||||
const isSiblingVisible = parent.isChildVisible(0);
|
||||
|
||||
// either way we need to remove the sibling from it's existing tree
|
||||
parent.removeChild(0, sizing);
|
||||
|
||||
// note the sizes of all of the grandparents children
|
||||
const sizes = grandParent.children.map((_size, i) =>
|
||||
grandParent.getChildSize(i)
|
||||
);
|
||||
grandParent.removeChild(parentIndex, sizing);
|
||||
|
||||
// remove the parent from the grandparent since we are moving the sibling to take the parents place
|
||||
// this parent is no longer used and can be disposed of
|
||||
grandParent.removeChild(parentIndex, sizing).dispose();
|
||||
|
||||
if (sibling instanceof BranchNode) {
|
||||
// replace the parent with the siblings children
|
||||
sizes.splice(
|
||||
parentIndex,
|
||||
1,
|
||||
...sibling.children.map((c) => c.size)
|
||||
);
|
||||
|
||||
// and add those siblings to the grandparent
|
||||
for (let i = 0; i < sibling.children.length; i++) {
|
||||
const child = sibling.children[i];
|
||||
grandParent.addChild(child, child.size, parentIndex + i);
|
||||
}
|
||||
} else {
|
||||
// otherwise create a new leaf node and add that to the grandparent
|
||||
|
||||
const newSibling = new LeafNode(
|
||||
sibling.view,
|
||||
orthogonal(sibling.orientation),
|
||||
@ -740,14 +762,19 @@ export class Gridview implements IDisposable {
|
||||
const siblingSizing = isSiblingVisible
|
||||
? sibling.orthogonalSize
|
||||
: Sizing.Invisible(sibling.orthogonalSize);
|
||||
|
||||
grandParent.addChild(newSibling, siblingSizing, parentIndex);
|
||||
}
|
||||
|
||||
// the containing node of the sibling is no longer required and can be disposed of
|
||||
sibling.dispose();
|
||||
|
||||
// resize everything
|
||||
for (let i = 0; i < sizes.length; i++) {
|
||||
grandParent.resizeChild(i, sizes[i]);
|
||||
}
|
||||
|
||||
return node.view;
|
||||
return nodeToRemove.view;
|
||||
}
|
||||
|
||||
public layout(width: number, height: number): void {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user