pteropus/web/pteropus-frame.js

53 lines
1.5 KiB
JavaScript

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);
let fileUploadButton = document.getElementById("file-upload-file-input");
fileUploadButton.addEventListener("change", () => {
const files = fileUploadButton.files;
if(files.length > 0) {
test_file_data = files[0]
}
});
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();