Fix image selection order, fix image upload typo. Bind hotkeys to switch between tools

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);
     }
 }

client/index.js

@@ -174,6 +174,7 @@ async function main() {
 
         'moving': false,
         'drawing': false,
+        'erasing': false,
         'spacedown': false,
         'colorpicking': false,
         'zooming': false,

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;

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) {
+    
+}

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) {