101 lines
3.1 KiB
JavaScript
101 lines
3.1 KiB
JavaScript
import init, {init_pteropus, PteropusInitError} from '../pkg/pteropus.js';
|
|
|
|
function fileDragOverHandler(event) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
async function run() {
|
|
await init();
|
|
|
|
let pteropus;
|
|
try {
|
|
pteropus = await init_pteropus();
|
|
} catch(e) {
|
|
const errorParagraph = document.createElement("p");
|
|
if(e instanceof PteropusInitError) {
|
|
const errorMessage = document.createTextNode(e.message);
|
|
errorParagraph.appendChild(errorMessage);
|
|
} else {
|
|
const errorMessage = document.createTextNode("Something unexpected happened.");
|
|
errorParagraph.appendChild(errorMessage);
|
|
}
|
|
document.getElementById("whole-window").replaceWith(errorParagraph);
|
|
return;
|
|
}
|
|
|
|
let test_file_data = null;
|
|
let needs_resize = true;
|
|
let clear_scene = false;
|
|
|
|
const 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);
|
|
|
|
const fileUploadButton = document.getElementById("file-upload-file-input");
|
|
fileUploadButton.addEventListener("change", () => {
|
|
const files = fileUploadButton.files;
|
|
if(files.length > 0) {
|
|
test_file_data = files[0]
|
|
}
|
|
});
|
|
|
|
const clearSceneButton = document.getElementById("clear-scene-button");
|
|
clearSceneButton.addEventListener("click", () => {
|
|
clear_scene = true;
|
|
});
|
|
|
|
[
|
|
{
|
|
buttonId: "load-small-sample-button",
|
|
url: "small_sample.tiff"
|
|
},
|
|
{
|
|
buttonId: "load-medium-sample-button",
|
|
url: "medium_sample.tiff"
|
|
},
|
|
{
|
|
buttonId: "load-large-sample-button",
|
|
url: "large_sample.tiff"
|
|
}
|
|
].forEach( (sample) => {
|
|
let loadSampleButton = document.getElementById(sample.buttonId);
|
|
loadSampleButton.addEventListener("click", async () => {
|
|
const response = await fetch(sample.url);
|
|
if(!response.ok) {
|
|
console.error("Couild not load sample file.")
|
|
}
|
|
test_file_data = await response.blob()
|
|
});
|
|
});
|
|
|
|
while(true)
|
|
{
|
|
await pteropus.render();
|
|
if(needs_resize) {
|
|
await pteropus.on_resize();
|
|
needs_resize = false;
|
|
}
|
|
if(clear_scene) {
|
|
await pteropus.clear_scene();
|
|
clear_scene = false;
|
|
}
|
|
// 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
|
|
}
|
|
await new Promise(requestAnimationFrame);
|
|
}
|
|
}
|
|
|
|
run();
|