mirror of
https://github.com/Microsoft/vscode
synced 2024-09-19 18:48:00 +00:00
remove grid.html
This commit is contained in:
parent
fc6c30ed31
commit
571df5015f
202
test/grid.html
202
test/grid.html
|
@ -1,202 +0,0 @@
|
|||
<!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>
|
Loading…
Reference in a new issue