63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Pteropus</title>
|
|
<style>
|
|
#pteropus-canvas {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="pteropus-canvas"></canvas>
|
|
<script type="module">
|
|
import init, {init_pteropus} from '../pkg/pteropus.js';
|
|
|
|
function fileDragOverHandler(event) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
async function run() {
|
|
await init();
|
|
|
|
let pteropus = await init_pteropus();
|
|
|
|
let test_file_data = null;
|
|
let needs_resize = true;
|
|
|
|
let mainCanvas = document.getElementById("pteropus-canvas");
|
|
mainCanvas.addEventListener("drop", async (event) => {
|
|
event.preventDefault();
|
|
test_file_data = event.dataTransfer.files[0]
|
|
});
|
|
mainCanvas.addEventListener("dragover", fileDragOverHandler);
|
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
needs_resize = true;
|
|
});
|
|
resizeObserver.observe(mainCanvas)
|
|
|
|
while(true)
|
|
{
|
|
await pteropus.render();
|
|
// TODO: I really want to do this asynchronously, with the drop
|
|
// event listener calling pteropus_load_file directly, but I need
|
|
// to figure out how to get that to work.
|
|
if(test_file_data) {
|
|
await pteropus.load_file(test_file_data);
|
|
test_file_data = null
|
|
}
|
|
if(needs_resize) {
|
|
await pteropus.on_resize();
|
|
needs_resize = false;
|
|
}
|
|
await new Promise(requestAnimationFrame);
|
|
}
|
|
}
|
|
|
|
run();
|
|
</script>
|
|
</body>
|
|
</html>
|