From d825f4e0905d20d0aada5bf442adfccb892265a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C5=A1per=20Dobrovoljc?= Date: Wed, 23 Oct 2024 15:43:29 +0200 Subject: [PATCH] Naloga 1: drag and drop --- naloga_1/index.html | 17 +++++++++++++++-- naloga_1/script.js | 25 ++++++++++++++++--------- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/naloga_1/index.html b/naloga_1/index.html index cf333de..6449c23 100644 --- a/naloga_1/index.html +++ b/naloga_1/index.html @@ -7,7 +7,20 @@ - - + + +
+ +
\ No newline at end of file diff --git a/naloga_1/script.js b/naloga_1/script.js index 10254e4..7af7a6f 100644 --- a/naloga_1/script.js +++ b/naloga_1/script.js @@ -1,12 +1,21 @@ -async function main() { - const canvas = document.getElementById("canvas"); +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); - /** - * @type RenderingContext - */ - const ctx = canvas.getContext("2d"); +const dropZone = document.getElementById("drop-zone"); +dropZone.addEventListener("dragenter", (e) => e.preventDefault()); +dropZone.addEventListener("dragover", (e) => e.preventDefault()); +dropZone.addEventListener("drop", (e) => { + const reader = new FileReader(); + reader.addEventListener("loadend", async () => { + const data = JSON.parse(reader.result); + await run(data); + }); + reader.readAsText(e.dataTransfer.files[0]); + e.preventDefault(); +}); - const { models, scene } = await fetch("test.json").then(res => res.json()); +async function run({ models, scene }) { + ctx.clearRect(0, 0, canvas.width, canvas.height); for (const { model, transforms } of scene) { let m = Matrix.identity(); @@ -38,8 +47,6 @@ async function main() { } } -main(); - class Matrix extends Array { /** * @param {number[][]} matrix