mirror of
https://github.com/microsoft/vscode.git
synced 2026-08-21 10:01:35 +01:00
161 lines
3.9 KiB
HTML
161 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Grid Example</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="../out/vs/loader.js"></script>
|
|
<script>
|
|
require.config({ baseUrl: '../out' });
|
|
let count = 0;
|
|
|
|
function debug(grid) {
|
|
function _debug(node, indent = '') {
|
|
if (node.children) {
|
|
console.log(`${indent}|- * ${node.orientation === 1 ? 'horizontal' : 'vertical'} (${node.size}, ${node.orthogonalSize})`);
|
|
indent = indent + ' ';
|
|
for (const child of node.children) {
|
|
_debug(child, indent);
|
|
}
|
|
} else {
|
|
console.log(`${indent}|- ${(node.view).ID} (${node.width}, ${node.height})`);
|
|
}
|
|
}
|
|
|
|
_debug(grid.gridview.root);
|
|
}
|
|
|
|
require(['vs/base/browser/ui/grid/gridview', 'vs/base/common/event'], ({ SplitGridView, Direction }, { Event }) => {
|
|
function createView() {
|
|
let id = ++count;
|
|
|
|
let element = document.createElement('div');
|
|
element.style.width = '100%';
|
|
element.style.height = '100%';
|
|
element.style.backgroundColor = `hsl(${Math.round(Math.random() * 360)}, 72%, 72%)`;
|
|
element.textContent = `hello${id}`;
|
|
|
|
return {
|
|
ID: `hello${id}`,
|
|
element,
|
|
minimumWidth: 100,
|
|
maximumWidth: Number.POSITIVE_INFINITY,
|
|
minimumHeight: 100,
|
|
maximumHeight: Number.POSITIVE_INFINITY,
|
|
onDidChange: Event.None,
|
|
layout(width, height) {
|
|
element.textContent = `hello${id} (${width}, ${height})`
|
|
}
|
|
};
|
|
}
|
|
|
|
const view1 = createView();
|
|
const grid = new SplitGridView(document.body, view1);
|
|
const layout = () => grid.layout(document.body.clientWidth, document.body.clientHeight);
|
|
window.onresize = () => {
|
|
layout();
|
|
debug(grid);
|
|
};
|
|
layout();
|
|
|
|
debug(grid);
|
|
console.log('-------');
|
|
const view2 = createView();
|
|
grid.splitView(view1, Direction.Down, view2, 400);
|
|
debug(grid);
|
|
console.log('-------');
|
|
const view3 = createView();
|
|
grid.splitView(view2, Direction.Right, view3, 400);
|
|
debug(grid);
|
|
console.log('-------');
|
|
const view4 = createView();
|
|
grid.splitView(view3, Direction.Right, view4, 200);
|
|
debug(grid);
|
|
console.log('-------');
|
|
const view5 = createView();
|
|
grid.splitView(view2, Direction.Down, view5, 200);
|
|
debug(grid);
|
|
console.log('-------');
|
|
// grid.splitView(createView(), 400, [1]);
|
|
// debug(grid);
|
|
// console.log('-------');
|
|
// grid.splitView(createView(), 300, [1, 1]);
|
|
// debug(grid);
|
|
// console.log('-------');
|
|
// grid.splitView(createView(), 200, [1, 1, 1]);
|
|
// debug(grid);
|
|
// console.log('-------');
|
|
// grid.splitView(createView(), 100, [1, 1, 1, 1]);
|
|
// debug(grid);
|
|
// console.log('-------');
|
|
// grid.splitView(createView(), 50, [1, 1, 1, 2]);
|
|
// debug(grid);
|
|
// console.log('-------');
|
|
});
|
|
</script>
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.node {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid #3c3c3c;
|
|
text-align: center;
|
|
line-height: 16px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.action:hover {
|
|
cursor: pointer;
|
|
background-color: #ffffff54;
|
|
}
|
|
|
|
.split-view-view {
|
|
position: relative;
|
|
}
|
|
|
|
.monaco-grid-view .monaco-split-view2>.split-view-container>.split-view-view:not(:first-child)::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: black;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.monaco-grid-view .monaco-split-view2.horizontal>.split-view-container>.split-view-view:not(:first-child)::before {
|
|
height: 100%;
|
|
width: 1px;
|
|
}
|
|
|
|
.monaco-grid-view .monaco-split-view2.vertical>.split-view-container>.split-view-view:not(:first-child)::before {
|
|
height: 1px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
</body>
|
|
|
|
</html> |