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