<html> <head> <meta charset="utf-8"> <title>Splitview</title> <style> #container { width: 800px; height: 600px; border: 1px solid black; } .view { width: 100%; height: 100%; text-align: center; vertical-align: middle; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; font-size: 20px; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div id="buttons"></div> <div id="container"></div> <script src="/static/vs/loader.js"></script> <script> require.config({ baseUrl: '/static' }); const params = location.search.split(/[?&]/); const testGrid = params.findIndex(p => p === 'grid') >= 0; const testDeserialization = params.findIndex(p => p === 'deserialize') >= 0; if (testGrid) { require(['vs/base/browser/ui/grid/grid', 'vs/base/common/event'], ({ Grid, Sizing, Direction, SerializableGrid }, { Event }) => { const buttons = document.getElementById('buttons'); let grid; class View { static ID = 0; constructor(label, minimumWidth, maximumWidth, minimumHeight, maximumHeight, snap) { this.id = View.ID++; this.label = label; this.minimumWidth = minimumWidth; this.maximumWidth = maximumWidth; this.minimumHeight = minimumHeight; this.maximumHeight = maximumHeight; this.snap = snap; this.onDidChange = Event.None; this.element = document.createElement('div'); this.element.className = 'view'; this.element.style.backgroundColor = `hsl(${(this.id * 41) % 360}, 50%, 70%)`; this.element.textContent = this.label; this.button = document.createElement('button'); this.button.onclick = () => grid.setViewVisible(this, !grid.isViewVisible(this)); buttons.appendChild(this.button); this.setVisible(true); } layout(width, height, top, left) { this.element.innerHTML = `(${top}, ${left})<br />(${width}, ${height})`; } setVisible(visible) { this.button.textContent = visible ? `hide ${this.label}` : `show ${this.label}`; } } const editor = new View('editor', 200, Number.POSITIVE_INFINITY, 200, Number.POSITIVE_INFINITY); const statusbar = new View('status', 0, Number.POSITIVE_INFINITY, 20, 20); const activitybar = new View('activity', 50, 50, 0, Number.POSITIVE_INFINITY); const sidebar = new View('sidebar', 200, Number.POSITIVE_INFINITY, 0, Number.POSITIVE_INFINITY, true); const panel = new View('panel', 0, Number.POSITIVE_INFINITY, 200, Number.POSITIVE_INFINITY, true); if (testDeserialization) { const viewMap = { ['activitybar']: activitybar, ['editor']: editor, ['panel']: panel, ['sidebar']: sidebar, ['statusbar']: statusbar }; const gridViewDescriptor = { root: { type: 'branch', size: 800, data: [ { type: 'branch', size: 580, data: [ { type: 'leaf', size: activitybar.maximumWidth, data: { type: 'activitybar' }, visible: true }, { type: 'leaf', size: 200, data: { type: 'sidebar' }, visible: true }, { type: 'branch', size: 550, data: [ { type: 'leaf', size: 380, data: { type: 'editor' }, visible: true }, { type: 'leaf', size: 200, data: { type: 'panel' }, visible: true } ] } ] }, { type: 'leaf', size: statusbar.maximumHeight, data: { type: "statusbar" }, visible: true } ] }, orientation: 0, width: 800, height: 600 }; const fromJSON = ({ type }) => viewMap[type]; grid = SerializableGrid.deserialize( gridViewDescriptor, { fromJSON }, { proportionalLayout: false } ); container.appendChild(grid.element); grid.layout(800, 600); } else { grid = new Grid(editor, {}); const container = document.getElementById('container'); container.appendChild(grid.element); grid.layout(800, 600); grid.addView(statusbar, Sizing.Distribute, editor, Direction.Down); grid.addView(activitybar, Sizing.Distribute, editor, Direction.Left); grid.addView(sidebar, 250, editor, Direction.Left); grid.addView(panel, 200, editor, Direction.Down); } }); } else { require(['vs/base/browser/ui/splitview/splitview', 'vs/base/common/event'], ({ SplitView, Sizing }, { Event }) => { const buttons = document.getElementById('buttons'); let splitview; class View { static ID = 0; constructor(minimumSize, maximumSize) { this.id = View.ID++; this.element = document.createElement('div'); this.element.className = 'view'; this.element.style.backgroundColor = `hsl(${(this.id * 41) % 360}, 50%, 70%)`; this.element.textContent = `${this.id}`; this.minimumSize = typeof minimumSize === 'number' ? minimumSize : 100; this.maximumSize = typeof maximumSize === 'number' ? maximumSize : Number.POSITIVE_INFINITY; this.onDidChange = Event.None; this.snap = !minimumSize && !maximumSize; this.button = document.createElement('button'); this.button.onclick = () => splitview.setViewVisible(this.id, !splitview.isViewVisible(this.id)); buttons.appendChild(this.button); this.setVisible(true); } layout(size, orientation) { this.element.style.lineHeight = `${size}px`; } setVisible(visible) { this.button.textContent = visible ? `hide ${this.id}` : `show ${this.id}`; } } const container = document.getElementById('container'); const views = [new View(100, 100), new View(), new View(), new View(), new View()]; if (testDeserialization) { const splitViewDescriptor = { views: [ { view: views[0], size: 100, visible: true }, { view: views[1], size: 100, visible: false }, { view: views[2], size: 100, visible: true }, { view: views[3], size: 200, visible: true }, { view: views[4], size: 200, visible: true } ] }; splitview = new SplitView(container, { descriptor: splitViewDescriptor, orientation: 0 }); splitview.layout(600); } else { // Create a new split view from scratch splitview = new SplitView(container, {}); splitview.layout(600); splitview.addView(views[0], Sizing.Distribute); splitview.addView(views[1], Sizing.Distribute); splitview.addView(views[2], Sizing.Distribute); splitview.addView(views[3], Sizing.Distribute); splitview.addView(views[4], Sizing.Distribute); } }); } </script> </body> </html>