idraw/examples/board/features/main.html
2022-04-28 23:46:07 +08:00

71 lines
No EOL
2.1 KiB
HTML

<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html, body {
margin: 0; padding: 0;
background: #f0f0f088;
}
#mount {
margin-top: 50px;
margin-left: 60px;
}
#mount canvas {
border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40;
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="mount"></div>
<div>
<span>scale</span>
<input id="scale" type="number" value="1"/>
</div>
<div>
<span>scrollX</span>
<input id="scrollX" type="number" value="0"/>
</div>
<div>
<span>scrollY</span>
<input id="scrollY" type="number" value="0"/>
</div>
<div>
<select id="cursor">
<option value="auto">auto</option>
<option value="move">move</option>
<option value="grab">grab</option>
<option value="n-resize">n-resize</option>
<option value="e-resize">e-resize</option>
<option value="s-resize">s-resize</option>
<option value="w-resize">w-resize</option>
<option value="ne-resize">ne-resize</option>
<option value="nw-resize">nw-resize</option>
<option value="se-resize">se-resize</option>
<option value="sw-resize">sw-resize</option>
</select>
<button id="reset-cursor">Reset cursor</button>
</div>
<script src="../../../packages/board/dist/index.global.js"></script>
<script type="module" src="./main.js"></script>
<script>
// console.log(parent.window.location);
// parent.document.addEventListener('click', (e) => {
// console.log('xxxxxxx: ', e);
// })
</script>
</body>
</html>