Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 571df501 编写于 作者: J Joao Moreno
浏览文件
操作

remove grid.html

上级 fc6c30ed
隐藏空白更改
内联 并排
Showing with 0 addition and 202 deletion
test/grid.html 已删除 100644 → 0
浏览文件 @ fc6c30ed
<!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>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或