From 49620ff8fb102e9ae72cba72d0b7296ed9b1d5a2 Mon Sep 17 00:00:00 2001
From: "A.Olokhtonov" <a.olokhtonov@norsi-trans.ru>
Date: Sat, 7 Sep 2024 13:48:22 +0300
Subject: [PATCH] Fix image selection order, fix image upload typo. Bind
 hotkeys to switch between tools

---
 client/aux.js             |  2 +-
 client/index.js           |  1 +
 client/webgl_geometry.js  |  4 +++-
 client/webgl_listeners.js | 35 ++++++++++++++++++++++++++++++++++-
 client/webgl_shaders.js   |  7 +++++--
 5 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/client/aux.js b/client/aux.js
index 8b1f784..0ad3ad2 100644
--- a/client/aux.js
+++ b/client/aux.js
@@ -27,7 +27,7 @@ async function insert_image(state, context, file) {
 
     if (resp.ok) {
         const image_id = await resp.text();
-        const event = image_event(image_id, canvasp.x, canvasp.y, bitmap.width. bitmap.height);
+        const event = image_event(image_id, canvasp.x, canvasp.y, bitmap.width, bitmap.height);
         await queue_event(state, event);
     }
 }
diff --git a/client/index.js b/client/index.js
index 68c0181..1aef4d9 100644
--- a/client/index.js
+++ b/client/index.js
@@ -174,6 +174,7 @@ async function main() {
 
         'moving': false,
         'drawing': false,
+        'erasing': false,
         'spacedown': false,
         'colorpicking': false,
         'zooming': false,
diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js
index 3ad59ed..e5ef986 100644
--- a/client/webgl_geometry.js
+++ b/client/webgl_geometry.js
@@ -247,7 +247,9 @@ function scale_image(context, image, corner, canvasp) {
 }
 
 function image_at(context, x, y) {
-    for (const image of context.images) {
+    // Iterate back to front to pick the image at the front first
+    for (let i = context.images.length - 1; i >= 0; --i) {
+        const image = context.images[i];
         const at = image.at;
         const w = image.width;
         const h = image.height;
diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js
index 93cf029..abd7a0d 100644
--- a/client/webgl_listeners.js
+++ b/client/webgl_listeners.js
@@ -116,6 +116,12 @@ async function paste(e, state, context) {
 }
 
 function keydown(e, state, context) {
+    if (config.debug_print) {
+        console.debug('keydown', e.code);
+    }
+
+    const doing_things = (state.moving || state.drawing || state.erasing || state.colorpicking || state.imagemoving || state.imagescaling || state.linedrawing);
+
     if (e.code === 'Space' && !state.drawing) {
         state.spacedown = true;
         context.canvas.classList.add('movemode');
@@ -124,18 +130,41 @@ function keydown(e, state, context) {
         zenmode();
     } else if (e.code === 'ControlLeft' || e.paddingcode === 'ControlRight') {
         enter_picker_mode(state, context);
-    } else if (e.code === 'KeyD') {
+    } else if (e.code === 'Slash') {
         document.querySelector('.debug-window').classList.toggle('dhide');
+        e.preventDefault();
     } else if (e.code === 'KeyZ') {
         if (e.ctrlKey) {
             queue_event(state, undo_event(state));
         } else {
             state.zoomdown = true;
         }
+    } else if (e.code === 'KeyS') {
+        if (!doing_things) {
+            switch_tool(state, document.querySelector('.tool[data-tool="pointer"]')); 
+        }
+    } else if (e.code === 'KeyD') {
+        if (!doing_things) {
+            switch_tool(state, document.querySelector('.tool[data-tool="pencil"]'));
+        }
+    } else if (e.code === 'KeyE') {
+        if (!doing_things) {
+            switch_tool(state, document.querySelector('.tool[data-tool="eraser"]'));
+        }
+    } else if (e.code === 'KeyR') {
+        if (!doing_things) {
+            switch_tool(state, document.querySelector('.tool[data-tool="ruler"]'));
+        }
+    } else if (e.code === 'Esc') {
+        cancel_everything(state, context);
     }
 }
 
 function keyup(e, state, context) {
+    if (config.debug_print) {
+        console.debug('keydown', e.code);
+    }
+
     if (e.code === 'Space' && state.spacedown) {
         state.spacedown = false;
         state.moving = false;
@@ -784,3 +813,7 @@ async function on_drop(e, state, context) {
 
     return false;
 }
+
+function cancel_everything(state, context) {
+    
+}
diff --git a/client/webgl_shaders.js b/client/webgl_shaders.js
index 1ea5bef..65ce282 100644
--- a/client/webgl_shaders.js
+++ b/client/webgl_shaders.js
@@ -100,6 +100,8 @@ const sdf_fs_src = `#version 300 es
             float fade = 0.5 * length(fwidth(v_texcoord));
             float alpha = 1.0 - smoothstep(-fade, fade, dist);
 
+            //if (alpha > 0.5) alpha = 0.5;
+
             FragColor = vec4(v_color * alpha, alpha);
         } else {
             FragColor = vec4(0.2, 0.0, 0.0, 0.2);
@@ -280,9 +282,10 @@ function init_webgl(state, context) {
 
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    //gl.blendEquation(gl.MAX);
 
-    gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.GEQUAL);
+    //gl.enable(gl.DEPTH_TEST);
+    //gl.depthFunc(gl.GEQUAL);
 
     context.gpu_timer_ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
     if (context.gpu_timer_ext === null) {