mirror of
https://github.com/microsoft/vscode.git
synced 2026-03-05 00:08:14 +00:00
202 lines
4.8 KiB
HTML
202 lines
4.8 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/grid', 'vs/base/common/event'], ({ Grid, Direction }, { Event }) => {
|
|
let dragging;
|
|
let draggingOver;
|
|
|
|
function createView() {
|
|
let id = `${++count}`;
|
|
|
|
let element = document.createElement('div');
|
|
element.className = 'box';
|
|
element.style.backgroundColor = `hsl(${Math.round(Math.random() * 360)}, 72%, 72%)`;
|
|
|
|
// element.addEventListener('dragover', ev => {
|
|
// ev.preventDefault();
|
|
|
|
// if (draggingOver === view) {
|
|
// return;
|
|
// }
|
|
|
|
// if (draggingOver) {
|
|
// draggingOver.element.style.opacity = 1;
|
|
// }
|
|
|
|
// if (dragging !== view) {
|
|
// element.style.opacity = 0.5;
|
|
// }
|
|
|
|
// draggingOver = view;
|
|
// });
|
|
|
|
// element.addEventListener('drop', ev => {
|
|
// ev.preventDefault();
|
|
|
|
// if (draggingOver) {
|
|
// draggingOver.element.style.opacity = 1;
|
|
// }
|
|
|
|
// if (!dragging) {
|
|
// return;
|
|
// }
|
|
|
|
// grid.swapViews(dragging, view);
|
|
// });
|
|
|
|
let label = document.createElement('div');
|
|
label.className = 'box-label';
|
|
label.draggable = true;
|
|
element.appendChild(label);
|
|
label.textContent = `hello${id}`;
|
|
label.addEventListener('dragstart', ev => { dragging = view; ev.dataTransfer.setData('text', id); });
|
|
label.addEventListener('dragend', () => { dragging = undefined; draggingOver = undefined; });
|
|
|
|
let remove = document.createElement('div');
|
|
remove.className = 'box-remove';
|
|
remove.textContent = 'Remove';
|
|
element.appendChild(remove);
|
|
remove.addEventListener('click', () => grid.removeView(view));
|
|
|
|
const view = {
|
|
ID: `hello${id}`,
|
|
element,
|
|
minimumWidth: 100,
|
|
maximumWidth: Number.POSITIVE_INFINITY,
|
|
minimumHeight: 100,
|
|
maximumHeight: Number.POSITIVE_INFINITY,
|
|
onDidChange: Event.None,
|
|
layout(width, height) {
|
|
label.textContent = `hello${id} (${width}, ${height})`
|
|
}
|
|
};
|
|
|
|
return view;
|
|
}
|
|
|
|
// const box = document.createElement('div');
|
|
// box.style.height = '500px';
|
|
// box.style.width = '800px';
|
|
// document.body.appendChild(box);
|
|
|
|
const view1 = createView();
|
|
const grid = new Grid(document.body, view1, { dnd: {} });
|
|
const layout = () => grid.layout(document.body.clientWidth, document.body.clientHeight);
|
|
window.onresize = () => {
|
|
layout();
|
|
debug(grid);
|
|
};
|
|
layout();
|
|
|
|
debug(grid);
|
|
console.log('-------');
|
|
const view2 = createView();
|
|
grid.addView(view2, 400, view1, Direction.Up);
|
|
debug(grid);
|
|
console.log('-------');
|
|
const view3 = createView();
|
|
grid.addView(view3, 400, view1, Direction.Right);
|
|
debug(grid);
|
|
console.log('-------');
|
|
const view4 = createView();
|
|
grid.addView(view4, 200, view2, Direction.Left);
|
|
debug(grid);
|
|
console.log('-------');
|
|
const view5 = createView();
|
|
grid.addView(view5, 200, view1, Direction.Down);
|
|
debug(grid);
|
|
console.log('-------');
|
|
// const view5 = createView();
|
|
// grid.addView(view5, 200, view2, Direction.Down);
|
|
// debug(grid);
|
|
// console.log('-------');
|
|
|
|
|
|
window.addEventListener('keypress', ev => {
|
|
if (ev.key === 'x') {
|
|
grid.orientation = (grid.orientation + 1) % 2;
|
|
}
|
|
})
|
|
});
|
|
</script>
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.box-label {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Borders */
|
|
|
|
.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> |