78 lines
2.0 KiB
HTML
78 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Ink</title>
|
|
<style>
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<button on:click="DRAW">Draw</button>
|
|
</nav>
|
|
<script type="module">
|
|
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
|
|
import { SpatialInk } from '../src/canvas/spatial-ink.ts';
|
|
|
|
SpatialGeometry.register();
|
|
SpatialInk.register();
|
|
|
|
const drawButton = document.querySelector('button');
|
|
|
|
async function draw(e) {
|
|
if (e.target === drawButton) return;
|
|
|
|
const ink = document.createElement('spatial-ink');
|
|
ink.style.cursor = 'var(--tracing-cursor, crosshair)';
|
|
ink.style.position = 'fixed';
|
|
ink.style.inset = '0 0 0 0';
|
|
ink.style.zIndex = 'calc(infinity)';
|
|
|
|
document.body.appendChild(ink);
|
|
|
|
const rect = await ink.draw(e);
|
|
const geometry = document.createElement('spatial-geometry');
|
|
geometry.x = rect.x;
|
|
geometry.y = rect.y;
|
|
geometry.height = rect.height;
|
|
geometry.width = rect.width;
|
|
|
|
ink.points = ink.points.map(([x, y, p]) => [x - rect.x, y - rect.y, p]);
|
|
ink.style.cursor = '';
|
|
ink.style.position = '';
|
|
ink.style.inset = '';
|
|
ink.style.zIndex = '';
|
|
geometry.appendChild(ink);
|
|
|
|
document.body.appendChild(geometry);
|
|
}
|
|
|
|
let isDrawing = false;
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target !== drawButton) return;
|
|
|
|
isDrawing = !isDrawing;
|
|
|
|
if (isDrawing) {
|
|
document.addEventListener('pointerdown', draw);
|
|
drawButton.textContent = 'Drawing';
|
|
} else {
|
|
document.removeEventListener('pointerdown', draw);
|
|
drawButton.textContent = 'Draw';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|