CoCalc -- grid.test.ts

GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/base/test/browser/ui/grid/grid.test.ts
³²⁹⁶ views
1
/*---------------------------------------------------------------------------------------------
2
 *  Copyright (c) Microsoft Corporation. All rights reserved.
3
 *  Licensed under the MIT License. See License.txt in the project root for license information.
4
 *--------------------------------------------------------------------------------------------*/
5

6
import assert from 'assert';
7
import { createSerializedGrid, Direction, getRelativeLocation, Grid, GridNode, GridNodeDescriptor, ISerializableView, isGridBranchNode, IViewDeserializer, Orientation, sanitizeGridNodeDescriptor, SerializableGrid, Sizing } from '../../../../browser/ui/grid/grid.js';
8
import { Event } from '../../../../common/event.js';
9
import { deepClone } from '../../../../common/objects.js';
10
import { nodesToArrays, TestView } from './util.js';
11
import { ensureNoDisposablesAreLeakedInTestSuite } from '../../../common/utils.js';
12
import { DisposableStore } from '../../../../common/lifecycle.js';
13

14
// Simple example:
15
//
16
//  +-----+---------------+
17
//  |  4  |      2        |
18
//  +-----+---------+-----+
19
//  |        1      |     |
20
//  +---------------+  3  |
21
//  |        5      |     |
22
//  +---------------+-----+
23
//
24
//  V
25
//  +-H
26
//  | +-4
27
//  | +-2
28
//  +-H
29
//    +-V
30
//    | +-1
31
//    | +-5
32
//    +-3
33

34
suite('Grid', function () {
35

36
	const store = ensureNoDisposablesAreLeakedInTestSuite();
37
	let container: HTMLElement;
38

39
	setup(function () {
40
		container = document.createElement('div');
41
		container.style.position = 'absolute';
42
		container.style.width = `${800}px`;
43
		container.style.height = `${600}px`;
44
	});
45

46
	test('getRelativeLocation', () => {
47
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Up), [0]);
48
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Down), [1]);
49
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Left), [0, 0]);
50
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Right), [0, 1]);
51

52
		assert.deepStrictEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Up), [0, 0]);
53
		assert.deepStrictEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Down), [0, 1]);
54
		assert.deepStrictEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Left), [0]);
55
		assert.deepStrictEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Right), [1]);
56

57
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Up), [4]);
58
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Down), [5]);
59
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Left), [4, 0]);
60
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Right), [4, 1]);
61

62
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Up), [0, 0, 0]);
63
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Down), [0, 0, 1]);
64
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Left), [0, 0]);
65
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Right), [0, 1]);
66

67
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Up), [1, 2, 0]);
68
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Down), [1, 2, 1]);
69
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Left), [1, 2]);
70
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Right), [1, 3]);
71

72
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Up), [1, 2, 3]);
73
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Down), [1, 2, 4]);
74
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Left), [1, 2, 3, 0]);
75
		assert.deepStrictEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Right), [1, 2, 3, 1]);
76
	});
77

78
	test('empty', () => {
79
		const view1 = store.add(new TestView(100, Number.MAX_VALUE, 100, Number.MAX_VALUE));
80
		const gridview = store.add(new Grid(view1));
81
		container.appendChild(gridview.element);
82
		gridview.layout(800, 600);
83

84
		assert.deepStrictEqual(view1.size, [800, 600]);
85
	});
86

87
	test('two views vertically', function () {
88
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
89
		const grid = store.add(new Grid(view1));
90
		container.appendChild(grid.element);
91
		grid.layout(800, 600);
92
		assert.deepStrictEqual(view1.size, [800, 600]);
93

94
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
95
		grid.addView(view2, 200, view1, Direction.Up);
96
		assert.deepStrictEqual(view1.size, [800, 400]);
97
		assert.deepStrictEqual(view2.size, [800, 200]);
98
	});
99

100
	test('two views horizontally', function () {
101
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
102
		const grid = store.add(new Grid(view1));
103
		container.appendChild(grid.element);
104

105
		grid.layout(800, 600);
106
		assert.deepStrictEqual(view1.size, [800, 600]);
107

108
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
109
		grid.addView(view2, 300, view1, Direction.Right);
110
		assert.deepStrictEqual(view1.size, [500, 600]);
111
		assert.deepStrictEqual(view2.size, [300, 600]);
112
	});
113

114
	test('simple layout', function () {
115
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
116
		const grid = store.add(new Grid(view1));
117
		container.appendChild(grid.element);
118

119
		grid.layout(800, 600);
120
		assert.deepStrictEqual(view1.size, [800, 600]);
121

122
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
123
		grid.addView(view2, 200, view1, Direction.Up);
124
		assert.deepStrictEqual(view1.size, [800, 400]);
125
		assert.deepStrictEqual(view2.size, [800, 200]);
126

127
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
128
		grid.addView(view3, 200, view1, Direction.Right);
129
		assert.deepStrictEqual(view1.size, [600, 400]);
130
		assert.deepStrictEqual(view2.size, [800, 200]);
131
		assert.deepStrictEqual(view3.size, [200, 400]);
132

133
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
134
		grid.addView(view4, 200, view2, Direction.Left);
135
		assert.deepStrictEqual(view1.size, [600, 400]);
136
		assert.deepStrictEqual(view2.size, [600, 200]);
137
		assert.deepStrictEqual(view3.size, [200, 400]);
138
		assert.deepStrictEqual(view4.size, [200, 200]);
139

140
		const view5 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
141
		grid.addView(view5, 100, view1, Direction.Down);
142
		assert.deepStrictEqual(view1.size, [600, 300]);
143
		assert.deepStrictEqual(view2.size, [600, 200]);
144
		assert.deepStrictEqual(view3.size, [200, 400]);
145
		assert.deepStrictEqual(view4.size, [200, 200]);
146
		assert.deepStrictEqual(view5.size, [600, 100]);
147
	});
148

149
	test('another simple layout with automatic size distribution', function () {
150
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
151
		const grid = store.add(new Grid(view1));
152
		container.appendChild(grid.element);
153

154
		grid.layout(800, 600);
155
		assert.deepStrictEqual(view1.size, [800, 600]);
156

157
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
158
		grid.addView(view2, Sizing.Distribute, view1, Direction.Left);
159
		assert.deepStrictEqual(view1.size, [400, 600]);
160
		assert.deepStrictEqual(view2.size, [400, 600]);
161

162
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
163
		grid.addView(view3, Sizing.Distribute, view1, Direction.Right);
164
		assert.deepStrictEqual(view1.size, [266, 600]);
165
		assert.deepStrictEqual(view2.size, [266, 600]);
166
		assert.deepStrictEqual(view3.size, [268, 600]);
167

168
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
169
		grid.addView(view4, Sizing.Distribute, view2, Direction.Down);
170
		assert.deepStrictEqual(view1.size, [266, 600]);
171
		assert.deepStrictEqual(view2.size, [266, 300]);
172
		assert.deepStrictEqual(view3.size, [268, 600]);
173
		assert.deepStrictEqual(view4.size, [266, 300]);
174

175
		const view5 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
176
		grid.addView(view5, Sizing.Distribute, view3, Direction.Up);
177
		assert.deepStrictEqual(view1.size, [266, 600]);
178
		assert.deepStrictEqual(view2.size, [266, 300]);
179
		assert.deepStrictEqual(view3.size, [268, 300]);
180
		assert.deepStrictEqual(view4.size, [266, 300]);
181
		assert.deepStrictEqual(view5.size, [268, 300]);
182

183
		const view6 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
184
		grid.addView(view6, Sizing.Distribute, view3, Direction.Down);
185
		assert.deepStrictEqual(view1.size, [266, 600]);
186
		assert.deepStrictEqual(view2.size, [266, 300]);
187
		assert.deepStrictEqual(view3.size, [268, 200]);
188
		assert.deepStrictEqual(view4.size, [266, 300]);
189
		assert.deepStrictEqual(view5.size, [268, 200]);
190
		assert.deepStrictEqual(view6.size, [268, 200]);
191
	});
192

193
	test('another simple layout with split size distribution', function () {
194
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
195
		const grid = store.add(new Grid(view1));
196
		container.appendChild(grid.element);
197

198
		grid.layout(800, 600);
199
		assert.deepStrictEqual(view1.size, [800, 600]);
200

201
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
202
		grid.addView(view2, Sizing.Split, view1, Direction.Left);
203
		assert.deepStrictEqual(view1.size, [400, 600]);
204
		assert.deepStrictEqual(view2.size, [400, 600]);
205

206
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
207
		grid.addView(view3, Sizing.Split, view1, Direction.Right);
208
		assert.deepStrictEqual(view1.size, [200, 600]);
209
		assert.deepStrictEqual(view2.size, [400, 600]);
210
		assert.deepStrictEqual(view3.size, [200, 600]);
211

212
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
213
		grid.addView(view4, Sizing.Split, view2, Direction.Down);
214
		assert.deepStrictEqual(view1.size, [200, 600]);
215
		assert.deepStrictEqual(view2.size, [400, 300]);
216
		assert.deepStrictEqual(view3.size, [200, 600]);
217
		assert.deepStrictEqual(view4.size, [400, 300]);
218

219
		const view5 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
220
		grid.addView(view5, Sizing.Split, view3, Direction.Up);
221
		assert.deepStrictEqual(view1.size, [200, 600]);
222
		assert.deepStrictEqual(view2.size, [400, 300]);
223
		assert.deepStrictEqual(view3.size, [200, 300]);
224
		assert.deepStrictEqual(view4.size, [400, 300]);
225
		assert.deepStrictEqual(view5.size, [200, 300]);
226

227
		const view6 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
228
		grid.addView(view6, Sizing.Split, view3, Direction.Down);
229
		assert.deepStrictEqual(view1.size, [200, 600]);
230
		assert.deepStrictEqual(view2.size, [400, 300]);
231
		assert.deepStrictEqual(view3.size, [200, 150]);
232
		assert.deepStrictEqual(view4.size, [400, 300]);
233
		assert.deepStrictEqual(view5.size, [200, 300]);
234
		assert.deepStrictEqual(view6.size, [200, 150]);
235
	});
236

237
	test('3/2 layout with split', function () {
238
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
239
		const grid = store.add(new Grid(view1));
240
		container.appendChild(grid.element);
241

242
		grid.layout(800, 600);
243
		assert.deepStrictEqual(view1.size, [800, 600]);
244

245
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
246
		grid.addView(view2, Sizing.Split, view1, Direction.Down);
247
		assert.deepStrictEqual(view1.size, [800, 300]);
248
		assert.deepStrictEqual(view2.size, [800, 300]);
249

250
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
251
		grid.addView(view3, Sizing.Split, view2, Direction.Right);
252
		assert.deepStrictEqual(view1.size, [800, 300]);
253
		assert.deepStrictEqual(view2.size, [400, 300]);
254
		assert.deepStrictEqual(view3.size, [400, 300]);
255

256
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
257
		grid.addView(view4, Sizing.Split, view1, Direction.Right);
258
		assert.deepStrictEqual(view1.size, [400, 300]);
259
		assert.deepStrictEqual(view2.size, [400, 300]);
260
		assert.deepStrictEqual(view3.size, [400, 300]);
261
		assert.deepStrictEqual(view4.size, [400, 300]);
262

263
		const view5 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
264
		grid.addView(view5, Sizing.Split, view1, Direction.Right);
265
		assert.deepStrictEqual(view1.size, [200, 300]);
266
		assert.deepStrictEqual(view2.size, [400, 300]);
267
		assert.deepStrictEqual(view3.size, [400, 300]);
268
		assert.deepStrictEqual(view4.size, [400, 300]);
269
		assert.deepStrictEqual(view5.size, [200, 300]);
270
	});
271

272
	test('sizing should be correct after branch demotion #50564', function () {
273
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
274
		const grid = store.add(new Grid(view1));
275
		container.appendChild(grid.element);
276

277
		grid.layout(800, 600);
278

279
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
280
		grid.addView(view2, Sizing.Split, view1, Direction.Right);
281

282
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
283
		grid.addView(view3, Sizing.Split, view2, Direction.Down);
284

285
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
286
		grid.addView(view4, Sizing.Split, view2, Direction.Right);
287
		assert.deepStrictEqual(view1.size, [400, 600]);
288
		assert.deepStrictEqual(view2.size, [200, 300]);
289
		assert.deepStrictEqual(view3.size, [400, 300]);
290
		assert.deepStrictEqual(view4.size, [200, 300]);
291

292
		grid.removeView(view3);
293
		assert.deepStrictEqual(view1.size, [400, 600]);
294
		assert.deepStrictEqual(view2.size, [200, 600]);
295
		assert.deepStrictEqual(view4.size, [200, 600]);
296
	});
297

298
	test('sizing should be correct after branch demotion #50675', function () {
299
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
300
		const grid = store.add(new Grid(view1));
301
		container.appendChild(grid.element);
302

303
		grid.layout(800, 600);
304

305
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
306
		grid.addView(view2, Sizing.Distribute, view1, Direction.Down);
307

308
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
309
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
310

311
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
312
		grid.addView(view4, Sizing.Distribute, view3, Direction.Right);
313
		assert.deepStrictEqual(view1.size, [800, 200]);
314
		assert.deepStrictEqual(view2.size, [800, 200]);
315
		assert.deepStrictEqual(view3.size, [400, 200]);
316
		assert.deepStrictEqual(view4.size, [400, 200]);
317

318
		grid.removeView(view3, Sizing.Distribute);
319
		assert.deepStrictEqual(view1.size, [800, 200]);
320
		assert.deepStrictEqual(view2.size, [800, 200]);
321
		assert.deepStrictEqual(view4.size, [800, 200]);
322
	});
323

324
	test('getNeighborViews should work on single view layout', function () {
325
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
326
		const grid = store.add(new Grid(view1));
327
		container.appendChild(grid.element);
328

329
		grid.layout(800, 600);
330

331
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Up), []);
332
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Right), []);
333
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Down), []);
334
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Left), []);
335

336
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Up, true), [view1]);
337
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Right, true), [view1]);
338
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Down, true), [view1]);
339
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Left, true), [view1]);
340
	});
341

342
	test('getNeighborViews should work on simple layout', function () {
343
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
344
		const grid = store.add(new Grid(view1));
345
		container.appendChild(grid.element);
346

347
		grid.layout(800, 600);
348

349
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
350
		grid.addView(view2, Sizing.Distribute, view1, Direction.Down);
351

352
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
353
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
354

355
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Up), []);
356
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Right), []);
357
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Down), [view2]);
358
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Left), []);
359

360
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Up, true), [view3]);
361
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Right, true), [view1]);
362
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Down, true), [view2]);
363
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Left, true), [view1]);
364

365
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Up), [view1]);
366
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Right), []);
367
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Down), [view3]);
368
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Left), []);
369

370
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Up, true), [view1]);
371
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Right, true), [view2]);
372
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Down, true), [view3]);
373
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Left, true), [view2]);
374

375
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Up), [view2]);
376
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Right), []);
377
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Down), []);
378
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Left), []);
379

380
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Up, true), [view2]);
381
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Right, true), [view3]);
382
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Down, true), [view1]);
383
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Left, true), [view3]);
384
	});
385

386
	test('getNeighborViews should work on a complex layout', function () {
387
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
388
		const grid = store.add(new Grid(view1));
389
		container.appendChild(grid.element);
390

391
		grid.layout(800, 600);
392

393
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
394
		grid.addView(view2, Sizing.Distribute, view1, Direction.Down);
395

396
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
397
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
398

399
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
400
		grid.addView(view4, Sizing.Distribute, view2, Direction.Right);
401

402
		const view5 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
403
		grid.addView(view5, Sizing.Distribute, view4, Direction.Down);
404

405
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Up), []);
406
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Right), []);
407
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Down), [view2, view4]);
408
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Left), []);
409
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Up), [view1]);
410
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Right), [view4, view5]);
411
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Down), [view3]);
412
		assert.deepStrictEqual(grid.getNeighborViews(view2, Direction.Left), []);
413
		assert.deepStrictEqual(grid.getNeighborViews(view4, Direction.Up), [view1]);
414
		assert.deepStrictEqual(grid.getNeighborViews(view4, Direction.Right), []);
415
		assert.deepStrictEqual(grid.getNeighborViews(view4, Direction.Down), [view5]);
416
		assert.deepStrictEqual(grid.getNeighborViews(view4, Direction.Left), [view2]);
417
		assert.deepStrictEqual(grid.getNeighborViews(view5, Direction.Up), [view4]);
418
		assert.deepStrictEqual(grid.getNeighborViews(view5, Direction.Right), []);
419
		assert.deepStrictEqual(grid.getNeighborViews(view5, Direction.Down), [view3]);
420
		assert.deepStrictEqual(grid.getNeighborViews(view5, Direction.Left), [view2]);
421
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Up), [view2, view5]);
422
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Right), []);
423
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Down), []);
424
		assert.deepStrictEqual(grid.getNeighborViews(view3, Direction.Left), []);
425
	});
426

427
	test('getNeighborViews should work on another simple layout', function () {
428
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
429
		const grid = store.add(new Grid(view1));
430
		container.appendChild(grid.element);
431

432
		grid.layout(800, 600);
433

434
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
435
		grid.addView(view2, Sizing.Distribute, view1, Direction.Right);
436

437
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
438
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
439

440
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
441
		grid.addView(view4, Sizing.Distribute, view2, Direction.Right);
442

443
		assert.deepStrictEqual(grid.getNeighborViews(view4, Direction.Up), []);
444
		assert.deepStrictEqual(grid.getNeighborViews(view4, Direction.Right), []);
445
		assert.deepStrictEqual(grid.getNeighborViews(view4, Direction.Down), [view3]);
446
		assert.deepStrictEqual(grid.getNeighborViews(view4, Direction.Left), [view2]);
447
	});
448

449
	test('getNeighborViews should only return immediate neighbors', function () {
450
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
451
		const grid = store.add(new Grid(view1));
452
		container.appendChild(grid.element);
453

454
		grid.layout(800, 600);
455

456
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
457
		grid.addView(view2, Sizing.Distribute, view1, Direction.Right);
458

459
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
460
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
461

462
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
463
		grid.addView(view4, Sizing.Distribute, view2, Direction.Right);
464

465
		assert.deepStrictEqual(grid.getNeighborViews(view1, Direction.Right), [view2, view3]);
466
	});
467

468
	test('hiding splitviews and restoring sizes', function () {
469
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
470
		const grid = store.add(new Grid(view1));
471
		container.appendChild(grid.element);
472

473
		grid.layout(800, 600);
474

475
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
476
		grid.addView(view2, Sizing.Distribute, view1, Direction.Right);
477

478
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
479
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
480

481
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
482
		grid.addView(view4, Sizing.Distribute, view2, Direction.Right);
483

484
		const size1 = view1.size;
485
		const size2 = view2.size;
486
		const size3 = view3.size;
487
		const size4 = view4.size;
488

489
		grid.maximizeView(view1);
490

491
		// Views 2, 3, 4 are hidden
492
		// Splitview (2,4) and ((2,4),3) are hidden
493
		assert.deepStrictEqual(view1.size, [800, 600]);
494
		assert.deepStrictEqual(view2.size, [0, 0]);
495
		assert.deepStrictEqual(view3.size, [0, 0]);
496
		assert.deepStrictEqual(view4.size, [0, 0]);
497

498
		grid.exitMaximizedView();
499

500
		assert.deepStrictEqual(view1.size, size1);
501
		assert.deepStrictEqual(view2.size, size2);
502
		assert.deepStrictEqual(view3.size, size3);
503
		assert.deepStrictEqual(view4.size, size4);
504

505
		// Views 1, 3, 4 are hidden
506
		// All splitviews are still visible => only orthogonalsize is 0
507
		grid.maximizeView(view2);
508

509
		assert.deepStrictEqual(view1.size, [0, 600]);
510
		assert.deepStrictEqual(view2.size, [800, 600]);
511
		assert.deepStrictEqual(view3.size, [800, 0]);
512
		assert.deepStrictEqual(view4.size, [0, 600]);
513

514
		grid.exitMaximizedView();
515

516
		assert.deepStrictEqual(view1.size, size1);
517
		assert.deepStrictEqual(view2.size, size2);
518
		assert.deepStrictEqual(view3.size, size3);
519
		assert.deepStrictEqual(view4.size, size4);
520
	});
521

522
	test('hasMaximizedView', function () {
523
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
524
		const grid = store.add(new Grid(view1));
525
		container.appendChild(grid.element);
526

527
		grid.layout(800, 600);
528

529
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
530
		grid.addView(view2, Sizing.Distribute, view1, Direction.Right);
531

532
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
533
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
534

535
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
536
		grid.addView(view4, Sizing.Distribute, view2, Direction.Right);
537

538
		function checkIsMaximized(view: TestView) {
539
			grid.maximizeView(view);
540

541
			assert.deepStrictEqual(grid.hasMaximizedView(), true);
542

543
			// When a view is maximized, no view can be expanded even if it is maximized
544
			assert.deepStrictEqual(grid.isViewExpanded(view1), false);
545
			assert.deepStrictEqual(grid.isViewExpanded(view2), false);
546
			assert.deepStrictEqual(grid.isViewExpanded(view3), false);
547
			assert.deepStrictEqual(grid.isViewExpanded(view4), false);
548

549
			grid.exitMaximizedView();
550

551
			assert.deepStrictEqual(grid.hasMaximizedView(), false);
552
		}
553

554
		checkIsMaximized(view1);
555
		checkIsMaximized(view2);
556
		checkIsMaximized(view3);
557
		checkIsMaximized(view4);
558
	});
559

560
	test('Changes to the grid unmaximize the view', function () {
561
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
562
		const grid = store.add(new Grid(view1));
563
		container.appendChild(grid.element);
564

565
		grid.layout(800, 600);
566

567
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
568
		grid.addView(view2, Sizing.Distribute, view1, Direction.Right);
569

570
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
571
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
572

573
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
574

575
		// Adding a view unmaximizes the view
576
		grid.maximizeView(view1);
577
		assert.deepStrictEqual(grid.hasMaximizedView(), true);
578
		grid.addView(view4, Sizing.Distribute, view2, Direction.Right);
579

580
		assert.deepStrictEqual(grid.hasMaximizedView(), false);
581
		assert.deepStrictEqual(grid.isViewVisible(view1), true);
582
		assert.deepStrictEqual(grid.isViewVisible(view2), true);
583
		assert.deepStrictEqual(grid.isViewVisible(view3), true);
584
		assert.deepStrictEqual(grid.isViewVisible(view4), true);
585

586
		// Removing a view unmaximizes the view
587
		grid.maximizeView(view1);
588
		assert.deepStrictEqual(grid.hasMaximizedView(), true);
589
		grid.removeView(view4);
590

591
		assert.deepStrictEqual(grid.hasMaximizedView(), false);
592
		assert.deepStrictEqual(grid.isViewVisible(view1), true);
593
		assert.deepStrictEqual(grid.isViewVisible(view2), true);
594
		assert.deepStrictEqual(grid.isViewVisible(view3), true);
595

596
		// Changing the visibility of any view while a view is maximized, unmaximizes the view
597
		grid.maximizeView(view1);
598
		assert.deepStrictEqual(grid.hasMaximizedView(), true);
599
		grid.setViewVisible(view3, true);
600

601
		assert.deepStrictEqual(grid.hasMaximizedView(), false);
602
		assert.deepStrictEqual(grid.isViewVisible(view1), true);
603
		assert.deepStrictEqual(grid.isViewVisible(view2), true);
604
		assert.deepStrictEqual(grid.isViewVisible(view3), true);
605
	});
606

607
	test('Changes to the grid sizing unmaximize the view', function () {
608
		const view1 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
609
		const grid = store.add(new Grid(view1));
610
		container.appendChild(grid.element);
611

612
		grid.layout(800, 600);
613

614
		const view2 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
615
		grid.addView(view2, Sizing.Distribute, view1, Direction.Right);
616

617
		const view3 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
618
		grid.addView(view3, Sizing.Distribute, view2, Direction.Down);
619

620
		const view4 = store.add(new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
621
		grid.addView(view4, Sizing.Distribute, view2, Direction.Right);
622

623
		// Maximizing a different view unmaximizes the current one and maximizes the new one
624
		grid.maximizeView(view1);
625
		assert.deepStrictEqual(grid.hasMaximizedView(), true);
626
		grid.maximizeView(view2);
627

628
		assert.deepStrictEqual(grid.hasMaximizedView(), true);
629
		assert.deepStrictEqual(grid.isViewVisible(view1), false);
630
		assert.deepStrictEqual(grid.isViewVisible(view2), true);
631
		assert.deepStrictEqual(grid.isViewVisible(view3), false);
632
		assert.deepStrictEqual(grid.isViewVisible(view4), false);
633

634
		// Distributing the size unmaximizes the view
635
		grid.maximizeView(view1);
636
		assert.deepStrictEqual(grid.hasMaximizedView(), true);
637
		grid.distributeViewSizes();
638

639
		assert.deepStrictEqual(grid.hasMaximizedView(), false);
640
		assert.deepStrictEqual(grid.isViewVisible(view1), true);
641
		assert.deepStrictEqual(grid.isViewVisible(view2), true);
642
		assert.deepStrictEqual(grid.isViewVisible(view3), true);
643
		assert.deepStrictEqual(grid.isViewVisible(view4), true);
644

645
		// Expanding a different view unmaximizes the view
646
		grid.maximizeView(view1);
647
		assert.deepStrictEqual(grid.hasMaximizedView(), true);
648
		grid.expandView(view2);
649

650
		assert.deepStrictEqual(grid.hasMaximizedView(), false);
651
		assert.deepStrictEqual(grid.isViewVisible(view1), true);
652
		assert.deepStrictEqual(grid.isViewVisible(view2), true);
653
		assert.deepStrictEqual(grid.isViewVisible(view3), true);
654
		assert.deepStrictEqual(grid.isViewVisible(view4), true);
655

656
		// Expanding the maximized view unmaximizes the view
657
		grid.maximizeView(view1);
658
		assert.deepStrictEqual(grid.hasMaximizedView(), true);
659
		grid.expandView(view1);
660

661
		assert.deepStrictEqual(grid.hasMaximizedView(), false);
662
		assert.deepStrictEqual(grid.isViewVisible(view1), true);
663
		assert.deepStrictEqual(grid.isViewVisible(view2), true);
664
		assert.deepStrictEqual(grid.isViewVisible(view3), true);
665
		assert.deepStrictEqual(grid.isViewVisible(view4), true);
666
	});
667
});
668

669
class TestSerializableView extends TestView implements ISerializableView {
670

671
	constructor(
672
		readonly name: string,
673
		minimumWidth: number,
674
		maximumWidth: number,
675
		minimumHeight: number,
676
		maximumHeight: number
677
	) {
678
		super(minimumWidth, maximumWidth, minimumHeight, maximumHeight);
679
	}
680

681
	toJSON() {
682
		return { name: this.name };
683
	}
684
}
685

686
class TestViewDeserializer implements IViewDeserializer<TestSerializableView> {
687

688
	private views = new Map<string, TestSerializableView>();
689

690
	constructor(private readonly store: Pick<DisposableStore, 'add'>) { }
691

692
	fromJSON(json: any): TestSerializableView {
693
		const view = this.store.add(new TestSerializableView(json.name, 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
694
		this.views.set(json.name, view);
695
		return view;
696
	}
697

698
	getView(id: string): TestSerializableView {
699
		const view = this.views.get(id);
700
		if (!view) {
701
			throw new Error('Unknown view');
702
		}
703
		return view;
704
	}
705
}
706

707
function nodesToNames(node: GridNode<TestSerializableView>): any {
708
	if (isGridBranchNode(node)) {
709
		return node.children.map(nodesToNames);
710
	} else {
711
		return node.view.name;
712
	}
713
}
714

715
suite('SerializableGrid', function () {
716

717
	const store = ensureNoDisposablesAreLeakedInTestSuite();
718
	let container: HTMLElement;
719

720
	setup(function () {
721
		container = document.createElement('div');
722
		container.style.position = 'absolute';
723
		container.style.width = `${800}px`;
724
		container.style.height = `${600}px`;
725
	});
726

727
	test('serialize empty', function () {
728
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
729
		const grid = store.add(new SerializableGrid(view1));
730
		container.appendChild(grid.element);
731
		grid.layout(800, 600);
732

733
		const actual = grid.serialize();
734
		assert.deepStrictEqual(actual, {
735
			orientation: 0,
736
			width: 800,
737
			height: 600,
738
			root: {
739
				type: 'branch',
740
				data: [
741
					{
742
						type: 'leaf',
743
						data: {
744
							name: 'view1',
745
						},
746
						size: 600
747
					}
748
				],
749
				size: 800
750
			}
751
		});
752
	});
753

754
	test('serialize simple layout', function () {
755
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
756
		const grid = store.add(new SerializableGrid(view1));
757
		container.appendChild(grid.element);
758
		grid.layout(800, 600);
759

760
		const view2 = store.add(new TestSerializableView('view2', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
761
		grid.addView(view2, 200, view1, Direction.Up);
762

763
		const view3 = store.add(new TestSerializableView('view3', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
764
		grid.addView(view3, 200, view1, Direction.Right);
765

766
		const view4 = store.add(new TestSerializableView('view4', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
767
		grid.addView(view4, 200, view2, Direction.Left);
768

769
		const view5 = store.add(new TestSerializableView('view5', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
770
		grid.addView(view5, 100, view1, Direction.Down);
771

772
		assert.deepStrictEqual(grid.serialize(), {
773
			orientation: 0,
774
			width: 800,
775
			height: 600,
776
			root: {
777
				type: 'branch',
778
				data: [
779
					{
780
						type: 'branch',
781
						data: [
782
							{ type: 'leaf', data: { name: 'view4' }, size: 200 },
783
							{ type: 'leaf', data: { name: 'view2' }, size: 600 }
784
						],
785
						size: 200
786
					},
787
					{
788
						type: 'branch',
789
						data: [
790
							{
791
								type: 'branch',
792
								data: [
793
									{ type: 'leaf', data: { name: 'view1' }, size: 300 },
794
									{ type: 'leaf', data: { name: 'view5' }, size: 100 }
795
								],
796
								size: 600
797
							},
798
							{ type: 'leaf', data: { name: 'view3' }, size: 200 }
799
						],
800
						size: 400
801
					}
802
				],
803
				size: 800
804
			}
805
		});
806
	});
807

808
	test('deserialize empty', function () {
809
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
810
		const grid = store.add(new SerializableGrid(view1));
811
		container.appendChild(grid.element);
812
		grid.layout(800, 600);
813

814
		const json = grid.serialize();
815
		grid.dispose();
816

817
		const deserializer = new TestViewDeserializer(store);
818
		const grid2 = store.add(SerializableGrid.deserialize(json, deserializer));
819
		grid2.layout(800, 600);
820

821
		assert.deepStrictEqual(nodesToNames(grid2.getViews()), ['view1']);
822
	});
823

824
	test('deserialize simple layout', function () {
825
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
826
		const grid = store.add(new SerializableGrid(view1));
827
		container.appendChild(grid.element);
828

829
		grid.layout(800, 600);
830

831
		const view2 = store.add(new TestSerializableView('view2', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
832
		grid.addView(view2, 200, view1, Direction.Up);
833

834
		const view3 = store.add(new TestSerializableView('view3', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
835
		grid.addView(view3, 200, view1, Direction.Right);
836

837
		const view4 = store.add(new TestSerializableView('view4', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
838
		grid.addView(view4, 200, view2, Direction.Left);
839

840
		const view5 = store.add(new TestSerializableView('view5', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
841
		grid.addView(view5, 100, view1, Direction.Down);
842

843
		const json = grid.serialize();
844
		grid.dispose();
845

846
		const deserializer = new TestViewDeserializer(store);
847
		const grid2 = store.add(SerializableGrid.deserialize(json, deserializer));
848

849
		const view1Copy = deserializer.getView('view1');
850
		const view2Copy = deserializer.getView('view2');
851
		const view3Copy = deserializer.getView('view3');
852
		const view4Copy = deserializer.getView('view4');
853
		const view5Copy = deserializer.getView('view5');
854

855
		assert.deepStrictEqual(nodesToArrays(grid2.getViews()), [[view4Copy, view2Copy], [[view1Copy, view5Copy], view3Copy]]);
856

857
		grid2.layout(800, 600);
858

859
		assert.deepStrictEqual(view1Copy.size, [600, 300]);
860
		assert.deepStrictEqual(view2Copy.size, [600, 200]);
861
		assert.deepStrictEqual(view3Copy.size, [200, 400]);
862
		assert.deepStrictEqual(view4Copy.size, [200, 200]);
863
		assert.deepStrictEqual(view5Copy.size, [600, 100]);
864
	});
865

866
	test('deserialize simple layout with scaling', function () {
867
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
868
		const grid = store.add(new SerializableGrid(view1));
869
		container.appendChild(grid.element);
870

871
		grid.layout(800, 600);
872

873
		const view2 = store.add(new TestSerializableView('view2', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
874
		grid.addView(view2, 200, view1, Direction.Up);
875

876
		const view3 = store.add(new TestSerializableView('view3', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
877
		grid.addView(view3, 200, view1, Direction.Right);
878

879
		const view4 = store.add(new TestSerializableView('view4', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
880
		grid.addView(view4, 200, view2, Direction.Left);
881

882
		const view5 = store.add(new TestSerializableView('view5', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
883
		grid.addView(view5, 100, view1, Direction.Down);
884

885
		const json = grid.serialize();
886
		grid.dispose();
887

888
		const deserializer = new TestViewDeserializer(store);
889
		const grid2 = store.add(SerializableGrid.deserialize(json, deserializer));
890

891
		const view1Copy = deserializer.getView('view1');
892
		const view2Copy = deserializer.getView('view2');
893
		const view3Copy = deserializer.getView('view3');
894
		const view4Copy = deserializer.getView('view4');
895
		const view5Copy = deserializer.getView('view5');
896

897
		grid2.layout(400, 800); // [/2, *4/3]
898
		assert.deepStrictEqual(view1Copy.size, [300, 400]);
899
		assert.deepStrictEqual(view2Copy.size, [300, 267]);
900
		assert.deepStrictEqual(view3Copy.size, [100, 533]);
901
		assert.deepStrictEqual(view4Copy.size, [100, 267]);
902
		assert.deepStrictEqual(view5Copy.size, [300, 133]);
903
	});
904

905
	test('deserialize 4 view layout (ben issue #2)', function () {
906
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
907
		const grid = store.add(new SerializableGrid(view1));
908
		container.appendChild(grid.element);
909
		grid.layout(800, 600);
910

911
		const view2 = store.add(new TestSerializableView('view2', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
912
		grid.addView(view2, Sizing.Split, view1, Direction.Down);
913

914
		const view3 = store.add(new TestSerializableView('view3', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
915
		grid.addView(view3, Sizing.Split, view2, Direction.Down);
916

917
		const view4 = store.add(new TestSerializableView('view4', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
918
		grid.addView(view4, Sizing.Split, view3, Direction.Right);
919

920
		const json = grid.serialize();
921
		grid.dispose();
922

923
		const deserializer = new TestViewDeserializer(store);
924
		const grid2 = store.add(SerializableGrid.deserialize(json, deserializer));
925

926
		const view1Copy = deserializer.getView('view1');
927
		const view2Copy = deserializer.getView('view2');
928
		const view3Copy = deserializer.getView('view3');
929
		const view4Copy = deserializer.getView('view4');
930

931
		grid2.layout(800, 600);
932

933
		assert.deepStrictEqual(view1Copy.size, [800, 300]);
934
		assert.deepStrictEqual(view2Copy.size, [800, 150]);
935
		assert.deepStrictEqual(view3Copy.size, [400, 150]);
936
		assert.deepStrictEqual(view4Copy.size, [400, 150]);
937
	});
938

939
	test('deserialize 2 view layout (ben issue #3)', function () {
940
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
941
		const grid = store.add(new SerializableGrid(view1));
942
		container.appendChild(grid.element);
943

944
		grid.layout(800, 600);
945

946
		const view2 = store.add(new TestSerializableView('view2', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
947
		grid.addView(view2, Sizing.Split, view1, Direction.Right);
948

949
		const json = grid.serialize();
950
		grid.dispose();
951

952
		const deserializer = new TestViewDeserializer(store);
953
		const grid2 = store.add(SerializableGrid.deserialize(json, deserializer));
954

955
		const view1Copy = deserializer.getView('view1');
956
		const view2Copy = deserializer.getView('view2');
957

958
		grid2.layout(800, 600);
959

960
		assert.deepStrictEqual(view1Copy.size, [400, 600]);
961
		assert.deepStrictEqual(view2Copy.size, [400, 600]);
962
	});
963

964
	test('deserialize simple view layout #50609', function () {
965
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
966
		const grid = store.add(new SerializableGrid(view1));
967
		container.appendChild(grid.element);
968

969
		grid.layout(800, 600);
970

971
		const view2 = store.add(new TestSerializableView('view2', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
972
		grid.addView(view2, Sizing.Split, view1, Direction.Right);
973

974
		const view3 = store.add(new TestSerializableView('view3', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
975
		grid.addView(view3, Sizing.Split, view2, Direction.Down);
976

977
		grid.removeView(view1, Sizing.Split);
978

979
		const json = grid.serialize();
980
		grid.dispose();
981

982
		const deserializer = new TestViewDeserializer(store);
983
		const grid2 = store.add(SerializableGrid.deserialize(json, deserializer));
984

985
		const view2Copy = deserializer.getView('view2');
986
		const view3Copy = deserializer.getView('view3');
987

988
		grid2.layout(800, 600);
989

990
		assert.deepStrictEqual(view2Copy.size, [800, 300]);
991
		assert.deepStrictEqual(view3Copy.size, [800, 300]);
992
	});
993

994
	test('sanitizeGridNodeDescriptor', () => {
995
		const nodeDescriptor: GridNodeDescriptor<any> = { groups: [{ size: 0.2 }, { size: 0.2 }, { size: 0.6, groups: [{}, {}] }] };
996
		const nodeDescriptorCopy = deepClone(nodeDescriptor);
997
		sanitizeGridNodeDescriptor(nodeDescriptorCopy, true);
998
		assert.deepStrictEqual(nodeDescriptorCopy, { groups: [{ size: 0.2 }, { size: 0.2 }, { size: 0.6, groups: [{ size: 0.5 }, { size: 0.5 }] }] });
999
	});
1000

1001
	test('createSerializedGrid', () => {
1002
		const gridDescriptor = { orientation: Orientation.VERTICAL, groups: [{ size: 0.2, data: 'a' }, { size: 0.2, data: 'b' }, { size: 0.6, groups: [{ data: 'c' }, { data: 'd' }] }] };
1003
		const serializedGrid = createSerializedGrid(gridDescriptor);
1004
		assert.deepStrictEqual(serializedGrid, {
1005
			root: {
1006
				type: 'branch',
1007
				size: undefined,
1008
				data: [
1009
					{ type: 'leaf', size: 0.2, data: 'a' },
1010
					{ type: 'leaf', size: 0.2, data: 'b' },
1011
					{
1012
						type: 'branch', size: 0.6, data: [
1013
							{ type: 'leaf', size: 0.5, data: 'c' },
1014
							{ type: 'leaf', size: 0.5, data: 'd' }
1015
						]
1016
					}
1017
				]
1018
			},
1019
			orientation: Orientation.VERTICAL,
1020
			width: 1,
1021
			height: 1
1022
		});
1023
	});
1024

1025
	test('createSerializedGrid - issue #85601, should not allow single children groups', () => {
1026
		const serializedGrid = createSerializedGrid({ orientation: Orientation.HORIZONTAL, groups: [{ groups: [{}, {}], size: 0.5 }, { groups: [{}], size: 0.5 }] });
1027
		const views: ISerializableView[] = [];
1028
		const deserializer = new class implements IViewDeserializer<ISerializableView> {
1029
			fromJSON(): ISerializableView {
1030
				const view: ISerializableView = {
1031
					element: document.createElement('div'),
1032
					layout: () => null,
1033
					minimumWidth: 0,
1034
					maximumWidth: Number.POSITIVE_INFINITY,
1035
					minimumHeight: 0,
1036
					maximumHeight: Number.POSITIVE_INFINITY,
1037
					onDidChange: Event.None,
1038
					toJSON: () => ({})
1039
				};
1040
				views.push(view);
1041
				return view;
1042
			}
1043
		};
1044

1045
		const grid = store.add(SerializableGrid.deserialize(serializedGrid, deserializer));
1046
		assert.strictEqual(views.length, 3);
1047

1048
		// should not throw
1049
		grid.removeView(views[2]);
1050
	});
1051

1052
	test('from', () => {
1053
		const createView = (): ISerializableView => ({
1054
			element: document.createElement('div'),
1055
			layout: () => null,
1056
			minimumWidth: 0,
1057
			maximumWidth: Number.POSITIVE_INFINITY,
1058
			minimumHeight: 0,
1059
			maximumHeight: Number.POSITIVE_INFINITY,
1060
			onDidChange: Event.None,
1061
			toJSON: () => ({})
1062
		});
1063

1064
		const a = createView();
1065
		const b = createView();
1066
		const c = createView();
1067
		const d = createView();
1068

1069
		const gridDescriptor = { orientation: Orientation.VERTICAL, groups: [{ size: 0.2, data: a }, { size: 0.2, data: b }, { size: 0.6, groups: [{ data: c }, { data: d }] }] };
1070
		const grid = SerializableGrid.from(gridDescriptor);
1071

1072
		assert.deepStrictEqual(nodesToArrays(grid.getViews()), [a, b, [c, d]]);
1073
		grid.dispose();
1074
	});
1075

1076
	test('serialize should store visibility and previous size', function () {
1077
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1078
		const grid = store.add(new SerializableGrid(view1));
1079
		container.appendChild(grid.element);
1080
		grid.layout(800, 600);
1081

1082
		const view2 = store.add(new TestSerializableView('view2', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1083
		grid.addView(view2, 200, view1, Direction.Up);
1084

1085
		const view3 = store.add(new TestSerializableView('view3', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1086
		grid.addView(view3, 200, view1, Direction.Right);
1087

1088
		const view4 = store.add(new TestSerializableView('view4', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1089
		grid.addView(view4, 200, view2, Direction.Left);
1090

1091
		const view5 = store.add(new TestSerializableView('view5', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1092
		grid.addView(view5, 100, view1, Direction.Down);
1093

1094
		assert.deepStrictEqual(view1.size, [600, 300]);
1095
		assert.deepStrictEqual(view2.size, [600, 200]);
1096
		assert.deepStrictEqual(view3.size, [200, 400]);
1097
		assert.deepStrictEqual(view4.size, [200, 200]);
1098
		assert.deepStrictEqual(view5.size, [600, 100]);
1099

1100
		grid.setViewVisible(view5, false);
1101

1102
		assert.deepStrictEqual(view1.size, [600, 400]);
1103
		assert.deepStrictEqual(view2.size, [600, 200]);
1104
		assert.deepStrictEqual(view3.size, [200, 400]);
1105
		assert.deepStrictEqual(view4.size, [200, 200]);
1106
		assert.deepStrictEqual(view5.size, [600, 0]);
1107

1108
		grid.setViewVisible(view5, true);
1109

1110
		assert.deepStrictEqual(view1.size, [600, 300]);
1111
		assert.deepStrictEqual(view2.size, [600, 200]);
1112
		assert.deepStrictEqual(view3.size, [200, 400]);
1113
		assert.deepStrictEqual(view4.size, [200, 200]);
1114
		assert.deepStrictEqual(view5.size, [600, 100]);
1115

1116
		grid.setViewVisible(view5, false);
1117

1118
		assert.deepStrictEqual(view1.size, [600, 400]);
1119
		assert.deepStrictEqual(view2.size, [600, 200]);
1120
		assert.deepStrictEqual(view3.size, [200, 400]);
1121
		assert.deepStrictEqual(view4.size, [200, 200]);
1122
		assert.deepStrictEqual(view5.size, [600, 0]);
1123

1124
		grid.setViewVisible(view5, false);
1125

1126
		const json = grid.serialize();
1127
		assert.deepStrictEqual(json, {
1128
			orientation: 0,
1129
			width: 800,
1130
			height: 600,
1131
			root: {
1132
				type: 'branch',
1133
				data: [
1134
					{
1135
						type: 'branch',
1136
						data: [
1137
							{ type: 'leaf', data: { name: 'view4' }, size: 200 },
1138
							{ type: 'leaf', data: { name: 'view2' }, size: 600 }
1139
						],
1140
						size: 200
1141
					},
1142
					{
1143
						type: 'branch',
1144
						data: [
1145
							{
1146
								type: 'branch',
1147
								data: [
1148
									{ type: 'leaf', data: { name: 'view1' }, size: 400 },
1149
									{ type: 'leaf', data: { name: 'view5' }, size: 100, visible: false }
1150
								],
1151
								size: 600
1152
							},
1153
							{ type: 'leaf', data: { name: 'view3' }, size: 200 }
1154
						],
1155
						size: 400
1156
					}
1157
				],
1158
				size: 800
1159
			}
1160
		});
1161

1162
		grid.dispose();
1163

1164
		const deserializer = new TestViewDeserializer(store);
1165
		const grid2 = store.add(SerializableGrid.deserialize(json, deserializer));
1166

1167
		const view1Copy = deserializer.getView('view1');
1168
		const view2Copy = deserializer.getView('view2');
1169
		const view3Copy = deserializer.getView('view3');
1170
		const view4Copy = deserializer.getView('view4');
1171
		const view5Copy = deserializer.getView('view5');
1172

1173
		assert.deepStrictEqual(nodesToArrays(grid2.getViews()), [[view4Copy, view2Copy], [[view1Copy, view5Copy], view3Copy]]);
1174

1175
		grid2.layout(800, 600);
1176
		assert.deepStrictEqual(view1Copy.size, [600, 400]);
1177
		assert.deepStrictEqual(view2Copy.size, [600, 200]);
1178
		assert.deepStrictEqual(view3Copy.size, [200, 400]);
1179
		assert.deepStrictEqual(view4Copy.size, [200, 200]);
1180
		assert.deepStrictEqual(view5Copy.size, [600, 0]);
1181

1182
		assert.deepStrictEqual(grid2.isViewVisible(view1Copy), true);
1183
		assert.deepStrictEqual(grid2.isViewVisible(view2Copy), true);
1184
		assert.deepStrictEqual(grid2.isViewVisible(view3Copy), true);
1185
		assert.deepStrictEqual(grid2.isViewVisible(view4Copy), true);
1186
		assert.deepStrictEqual(grid2.isViewVisible(view5Copy), false);
1187

1188
		grid2.setViewVisible(view5Copy, true);
1189

1190
		assert.deepStrictEqual(view1Copy.size, [600, 300]);
1191
		assert.deepStrictEqual(view2Copy.size, [600, 200]);
1192
		assert.deepStrictEqual(view3Copy.size, [200, 400]);
1193
		assert.deepStrictEqual(view4Copy.size, [200, 200]);
1194
		assert.deepStrictEqual(view5Copy.size, [600, 100]);
1195

1196
		assert.deepStrictEqual(grid2.isViewVisible(view1Copy), true);
1197
		assert.deepStrictEqual(grid2.isViewVisible(view2Copy), true);
1198
		assert.deepStrictEqual(grid2.isViewVisible(view3Copy), true);
1199
		assert.deepStrictEqual(grid2.isViewVisible(view4Copy), true);
1200
		assert.deepStrictEqual(grid2.isViewVisible(view5Copy), true);
1201
	});
1202

1203
	test('serialize should store visibility and previous size even for first leaf', function () {
1204
		const view1 = store.add(new TestSerializableView('view1', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1205
		const grid = store.add(new SerializableGrid(view1));
1206
		container.appendChild(grid.element);
1207
		grid.layout(800, 600);
1208

1209
		const view2 = store.add(new TestSerializableView('view2', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1210
		grid.addView(view2, 200, view1, Direction.Up);
1211

1212
		const view3 = store.add(new TestSerializableView('view3', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1213
		grid.addView(view3, 200, view1, Direction.Right);
1214

1215
		const view4 = store.add(new TestSerializableView('view4', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1216
		grid.addView(view4, 200, view2, Direction.Left);
1217

1218
		const view5 = store.add(new TestSerializableView('view5', 50, Number.MAX_VALUE, 50, Number.MAX_VALUE));
1219
		grid.addView(view5, 100, view1, Direction.Down);
1220

1221
		assert.deepStrictEqual(view1.size, [600, 300]);
1222
		assert.deepStrictEqual(view2.size, [600, 200]);
1223
		assert.deepStrictEqual(view3.size, [200, 400]);
1224
		assert.deepStrictEqual(view4.size, [200, 200]);
1225
		assert.deepStrictEqual(view5.size, [600, 100]);
1226

1227
		grid.setViewVisible(view4, false);
1228

1229
		assert.deepStrictEqual(view1.size, [600, 300]);
1230
		assert.deepStrictEqual(view2.size, [800, 200]);
1231
		assert.deepStrictEqual(view3.size, [200, 400]);
1232
		assert.deepStrictEqual(view4.size, [0, 200]);
1233
		assert.deepStrictEqual(view5.size, [600, 100]);
1234

1235
		const json = grid.serialize();
1236
		assert.deepStrictEqual(json, {
1237
			orientation: 0,
1238
			width: 800,
1239
			height: 600,
1240
			root: {
1241
				type: 'branch',
1242
				data: [
1243
					{
1244
						type: 'branch',
1245
						data: [
1246
							{ type: 'leaf', data: { name: 'view4' }, size: 200, visible: false },
1247
							{ type: 'leaf', data: { name: 'view2' }, size: 800 }
1248
						],
1249
						size: 200
1250
					},
1251
					{
1252
						type: 'branch',
1253
						data: [
1254
							{
1255
								type: 'branch',
1256
								data: [
1257
									{ type: 'leaf', data: { name: 'view1' }, size: 300 },
1258
									{ type: 'leaf', data: { name: 'view5' }, size: 100 }
1259
								],
1260
								size: 600
1261
							},
1262
							{ type: 'leaf', data: { name: 'view3' }, size: 200 }
1263
						],
1264
						size: 400
1265
					}
1266
				],
1267
				size: 800
1268
			}
1269
		});
1270

1271
		grid.dispose();
1272

1273
		const deserializer = new TestViewDeserializer(store);
1274
		const grid2 = store.add(SerializableGrid.deserialize(json, deserializer));
1275

1276
		const view1Copy = deserializer.getView('view1');
1277
		const view2Copy = deserializer.getView('view2');
1278
		const view3Copy = deserializer.getView('view3');
1279
		const view4Copy = deserializer.getView('view4');
1280
		const view5Copy = deserializer.getView('view5');
1281

1282
		assert.deepStrictEqual(nodesToArrays(grid2.getViews()), [[view4Copy, view2Copy], [[view1Copy, view5Copy], view3Copy]]);
1283

1284
		grid2.layout(800, 600);
1285
		assert.deepStrictEqual(view1Copy.size, [600, 300]);
1286
		assert.deepStrictEqual(view2Copy.size, [800, 200]);
1287
		assert.deepStrictEqual(view3Copy.size, [200, 400]);
1288
		assert.deepStrictEqual(view4Copy.size, [0, 200]);
1289
		assert.deepStrictEqual(view5Copy.size, [600, 100]);
1290

1291
		assert.deepStrictEqual(grid2.isViewVisible(view1Copy), true);
1292
		assert.deepStrictEqual(grid2.isViewVisible(view2Copy), true);
1293
		assert.deepStrictEqual(grid2.isViewVisible(view3Copy), true);
1294
		assert.deepStrictEqual(grid2.isViewVisible(view4Copy), false);
1295
		assert.deepStrictEqual(grid2.isViewVisible(view5Copy), true);
1296

1297
		grid2.setViewVisible(view4Copy, true);
1298

1299
		assert.deepStrictEqual(view1Copy.size, [600, 300]);
1300
		assert.deepStrictEqual(view2Copy.size, [600, 200]);
1301
		assert.deepStrictEqual(view3Copy.size, [200, 400]);
1302
		assert.deepStrictEqual(view4Copy.size, [200, 200]);
1303
		assert.deepStrictEqual(view5Copy.size, [600, 100]);
1304

1305
		assert.deepStrictEqual(grid2.isViewVisible(view1Copy), true);
1306
		assert.deepStrictEqual(grid2.isViewVisible(view2Copy), true);
1307
		assert.deepStrictEqual(grid2.isViewVisible(view3Copy), true);
1308
		assert.deepStrictEqual(grid2.isViewVisible(view4Copy), true);
1309
		assert.deepStrictEqual(grid2.isViewVisible(view5Copy), true);
1310
	});
1311
});
1312

1313
Product

Resources

Company
