added mouse events to canvas

diff --git a/static/src/canvas.js b/static/src/canvas.js
index 58c74b1f68d2695ee6ed432b6d53f351acff1a56..1ecc7470a0b311c3564e87b273a00ee81a0c4569 100644 (file)
--- a/static/src/canvas.js
+++ b/static/src/canvas.js
@@ -2,6 +2,35 @@ let canvas_element = "";
 let ctx = null;
 let canvas_op_buffer = [];
 
+let canvas_handlers_registered = false;
+function canvas_register_handlers() {
+    if (canvas_handlers_registered) return;
+
+    canvas_element.addEventListener("mousemove", (e) => {
+        let canvas_data = new Int32Array(canvas_shared_buffer);
+        let box = canvas_element.getBoundingClientRect();
+        let mx = (e.clientX - box.left) * box.width / canvas_element.width;
+        let my = (e.clientY - box.top) * box.height / canvas_element.height;
+
+        Atomics.store(canvas_data, 3, mx);
+        Atomics.store(canvas_data, 4, my);
+    });
+
+    canvas_element.addEventListener("click", (e) => {
+        let canvas_data = new Int32Array(canvas_shared_buffer);
+        let box = canvas_element.getBoundingClientRect();
+        let mx = (e.clientX - box.left) * box.width / canvas_element.width;
+        let my = (e.clientY - box.top) * box.height / canvas_element.height;
+
+        Atomics.store(canvas_data, 3, mx);
+        Atomics.store(canvas_data, 4, my);
+        Atomics.store(canvas_data, 5, 1);
+        Atomics.notify(canvas_data, 5);
+    });
+
+    canvas_handlers_registered = true;
+}
+
 function update_canvas_data() {
     let canvas_data = new Int32Array(canvas_shared_buffer);
     let box = canvas_element.getBoundingClientRect();
@@ -39,6 +68,7 @@ function canvas_process(instr) {
             canvas_element = document.getElementById("render-target");
             ctx = canvas_element.getContext('2d');
             update_canvas_data();
+            canvas_register_handlers();
             break;
         }
 

diff --git a/static/src/index.js b/static/src/index.js
index 6c7e87ec46a46d9e6f2c6802373eee9b1248d739..a02789dbaafe851e498bdc89df3b21a17f4b2fa0 100644 (file)
--- a/static/src/index.js
+++ b/static/src/index.js
@@ -4,7 +4,7 @@ let editor_theme = "chrome";
 let ui_theme = "dark";
 
 let input_shared_buffer  = new SharedArrayBuffer(1024 * Uint8Array.BYTES_PER_ELEMENT);
-let canvas_shared_buffer = new SharedArrayBuffer(3 * Int32Array.BYTES_PER_ELEMENT);
+let canvas_shared_buffer = new SharedArrayBuffer(6 * Int32Array.BYTES_PER_ELEMENT);
 
 async function clear_output() {
     let elem = document.getElementById('code-result');

diff --git a/static/src/worker.js b/static/src/worker.js
index 1090777115b6ddc8549c0ef0c253479ab33e47bb..69029231cd88cf23628f2a27049d0160c908699d 100644 (file)
--- a/static/src/worker.js
+++ b/static/src/worker.js
@@ -157,6 +157,25 @@ let import_obj = {
         stroke_text(textptr, textlen, x, y, max_width) { self.postMessage({ type: 'canvas', data: [ canvas_order_id++, 'stroke_text', S(textptr, textlen), x, y, max_width > 0 ? max_width : null ] }); },
         transform(a, b, c, d, e, f) { self.postMessage({ type: 'canvas', data: [ canvas_order_id++, 'transform', a, b, c, d, e, f ] }); },
         translate(x, y) { self.postMessage({ type: 'canvas', data: [ canvas_order_id++, 'translate', x, y ] }); },
+
+        mouse_position(outx, outy) {
+            let data = new DataView(wasm_memory.buffer);
+            let canvas_data = new Int32Array(canvas_data_buffer);
+
+            data.setFloat32(outx, Atomics.load(canvas_data, 3), true);
+            data.setFloat32(outy, Atomics.load(canvas_data, 4), true);
+        },
+
+        mouse_get_click(outx, outy) {
+            let data = new DataView(wasm_memory.buffer);
+            let canvas_data = new Int32Array(canvas_data_buffer);
+
+            Atomics.wait(canvas_data, 5, 0);
+            Atomics.store(canvas_data, 5, 0);
+
+            data.setFloat32(outx, Atomics.load(canvas_data, 3), true);
+            data.setFloat32(outy, Atomics.load(canvas_data, 4), true);
+        }
     }
 };