From 0af4fc36b8ef35160fee0f8ae3a5a4f6226bba57 Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 12:16:27 -0400 Subject: [PATCH 01/12] Enable focus of canvas element --- src/template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/template.html b/src/template.html index 98559a85..29aadcb7 100644 --- a/src/template.html +++ b/src/template.html @@ -4,7 +4,7 @@ Anim - +

Formula text:

From d59a914b491a7ec52d54cd5579439853fcdc391a Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 12:20:53 -0400 Subject: [PATCH 02/12] Attach listeners to canvas element --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 0bdd7200..c17b1054 100644 --- a/src/index.js +++ b/src/index.js @@ -3709,7 +3709,7 @@ window.addEventListener('load', () => { rtv.keys.ctrl = false; }); - window.addEventListener('keydown', (evt) => { + rtv.c.addEventListener('keydown', (evt) => { const { key } = evt; if (key === 'Escape' && rtv.presenting && rtv.tool !== 'camera' && rtv.tool !== 'pen') { @@ -3807,7 +3807,7 @@ window.addEventListener('load', () => { } }); - window.addEventListener('keyup', ({ key }) => { + rtv.c.addEventListener('keyup', ({ key }) => { if (key === 'Tab') { rtv.keys.tab = false; } @@ -3880,7 +3880,7 @@ window.addEventListener('load', () => { } })); - ['mousemove', 'touchmove'].forEach((key) => window.addEventListener(key, (evt) => { + ['mousemove', 'touchmove'].forEach((key) => rtv.c.addEventListener(key, (evt) => { // update mouse rtv.mouse.pos = getMousePos(rtv.c, evt); rtv.mouse.grid = constrainToGrid(rtv.mouse.pos); From d0555dcea70f7ba5ead7ce3567079ceddd53e9e2 Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 14:41:06 -0400 Subject: [PATCH 03/12] Try to fix bugs and refactor listeners --- src/index.js | 364 +++++++++++++++++++-------------------------------- 1 file changed, 133 insertions(+), 231 deletions(-) diff --git a/src/index.js b/src/index.js index c17b1054..1cd66e6f 100644 --- a/src/index.js +++ b/src/index.js @@ -3709,125 +3709,109 @@ window.addEventListener('load', () => { rtv.keys.ctrl = false; }); - rtv.c.addEventListener('keydown', (evt) => { - const { key } = evt; + window.addEventListener('keydown', (evt) => { + switch (evt.key) { + case 'Tab': + rtv.keys.tab = true; + break; - if (key === 'Escape' && rtv.presenting && rtv.tool !== 'camera' && rtv.tool !== 'pen') { - rtv.presenting = false; - document.body.style.cursor = ''; - document.body.style.overflow = 'auto'; // Enable and show scrollbar - return false; - } + case 'Meta': + rtv.keys.meta = true; + break; - if (key === 'Escape') { - enterSelect(); - } + case 'Shift': + rtv.keys.shift = true; + break; - if (key === 'Tab') { - rtv.keys.tab = true; - } + case 'Control': + rtv.keys.ctrl = true; + break; - if (key === 'Meta') { - rtv.keys.meta = true; - } + case 'Enter': + if (rtv.keys.meta || rtv.keys.ctrl) present(); + break; - if (key === 'Shift') { - rtv.keys.shift = true; - } + case ' ': + evt.preventDefault(); - if (key === 'Control') { - rtv.keys.ctrl = true; + // no default } + }); - if (key === 'Backspace') { - if (rtv.keys.ctrl) { - const N = rtv.objs.length; - for (let i = 0; i < N; i++) { - const obj = rtv.objs[i]; - if (obj.is_selected()) { - obj.deleted = true; - } - } - } - } + rtv.c.addEventListener('keydown', (evt) => { + const { key } = evt; - if (key === 'z' && (rtv.keys.meta || rtv.keys.ctrl)) { - undo(); - return; - } + if (key === 'Escape') { + if (rtv.presenting && rtv.tool !== 'camera' && rtv.tool !== 'pen') { + rtv.presenting = false; + document.body.style.cursor = ''; + document.body.style.overflow = 'auto'; // Enable and show scrollbar + return; + } - if ((rtv.keys.meta || rtv.keys.ctrl) && key === 'Enter') { - present(); - return true; + enterSelect(); } - if (document.getElementById('formula_text') === document.activeElement) { - return true; + if (rtv.keys.ctrl && key === 'Backspace') { + rtv.objs.forEach((obj) => { + if (obj.is_selected) obj.deleted = true; + }); } - let captured = false; - const N = rtv.objs.length; - for (let i = 0; i < N; i++) { - const obj = rtv.objs[i]; - - if (typeof obj.onkeydown === 'function') { - if (obj.onkeydown(evt)) { - captured = true; - evt.preventDefault(); // Prevent default if event has been handled - if (key === 'ArrowUp' || key === 'ArrowDown') { - // stops text selection from propagating as you iterate the array - break; - } - } - } + if (key === 'z' && (rtv.keys.meta || rtv.keys.ctrl)) { + undo(); + return; } - if (captured) { + if (rtv.objs.some((obj) => { + if (obj?.onkeydown(evt)) return key === 'ArrowUp' || key === 'ArrowDown'; return false; + })) { + evt.preventDefault(); + return; } if (rtv.frames.onkeydown(evt)) { - return false; + evt.preventDefault(); + return; } rtv.cam.onkeydown(evt); rtv.pen.onkeydown(evt); - if (key === ' ') { - return false; - } - - if (rtv.tool === 'select' && evt.target === document.body) { + if (rtv.tool === 'select') { const tools = { t: 'text', s: 'shape', c: 'camera', v: 'vector', }; - if (key in tools) { - rtv.tool = tools[key]; - } + if (key in tools) rtv.tool = tools[key]; } }); - rtv.c.addEventListener('keyup', ({ key }) => { - if (key === 'Tab') { - rtv.keys.tab = false; - } + window.addEventListener('keyup', ({ key }) => { + switch (key) { + case 'Tab': + rtv.keys.tab = false; + break; - if (key === 'Meta') { - rtv.keys.meta = false; - } + case 'Meta': + rtv.keys.meta = false; + break; - if (key === 'Shift') { - rtv.keys.shift = false; - } + case 'Shift': + rtv.keys.shift = false; + break; - if (key === 'Control') { - rtv.keys.ctrl = false; + case 'Control': + rtv.keys.ctrl = false; + break; + + // no default } saveState(); }); - ['mousedown', 'touchstart'].forEach((key) => rtv.c.addEventListener(key, (evt) => { + ['mousedown', 'touchstart'].forEach((evtName) => rtv.c.addEventListener(evtName, (evt) => { rtv.mouse.down = true; rtv.mouse.start = getMousePos(rtv.c, evt); @@ -3835,49 +3819,10 @@ window.addEventListener('load', () => { math.compile('click()').evaluate(parser.scope); } catch { /* Continue */ } - if (rtv.cam.mouse_down(evt)) { - return; - } - - if (rtv.pen.mouse_down(evt)) { - return; - } - - if (rtv.presenting) { - return false; - } - - let captured = false; - for (let i = rtv.objs.length - 1; i >= 0; i--) { - const obj = rtv.objs[i]; - if (typeof obj.mouse_down === 'function') { - if (obj.mouse_down(evt)) { - captured = true; - break; - } - } - } - - if (captured) { - return false; - } - - if (rtv.frames.mouse_down()) { - return; - } - - // didn't touch an obj, if tool is move start a rect - let objSelected = false; - const N = rtv.objs.length; - for (let i = 0; i < N; i++) { - if (rtv.objs[i].is_selected()) { - objSelected = true; - } - } - - if (rtv.tool === 'select' && objSelected === false) { - rtv.selecting = true; - } + if (rtv.cam.mouse_down(evt) || rtv.pen.mouse_down(evt) || rtv.presenting) return; + if (rtv.objs.some((obj) => obj?.mouse_down(evt))) evt.preventDefault(); + if (rtv.frames.mouse_down()) return; + if (rtv.tool === 'select') rtv.selecting = true; })); ['mousemove', 'touchmove'].forEach((key) => rtv.c.addEventListener(key, (evt) => { @@ -3889,61 +3834,28 @@ window.addEventListener('load', () => { parser.set('_y', rtv.mouse.graph.x); parser.set('_z', rtv.mouse.graph.y); - if (rtv.pen.mouse_move(evt)) { - return; - } - - if (rtv.mouse.down) { - let captured = false; - const N = rtv.objs.length; - for (let i = N - 1; i >= 0; i--) { - const obj = rtv.objs[i]; - if (!captured && typeof obj.mouse_drag === 'function') { - captured = obj.mouse_drag(evt); - } - } + if (rtv.pen.mouse_move(evt)) return; - if (!captured) { - rtv.cam.mouse_drag(evt); - } - } else { - const N = rtv.objs.length; - for (let i = 0; i < N; i++) { - const obj = rtv.objs[i]; - if (typeof obj.mouse_move === 'function') { - obj.mouse_move(evt); - } - } - } + if (rtv.mouse.down) rtv.objs.some((obj) => obj?.mouse_drag(evt)); + else rtv.objs.forEach((obj) => obj?.mouse_move(evt)); - if (rtv.presenting) { - rtv.mouse.time = MOUSE_DURATION; - } + if (rtv.presenting) rtv.mouse.time = MOUSE_DURATION; rtv.mouse.last = getMousePos(rtv.c, evt); rtv.mouse.gridLast = constrainToGrid(rtv.mouse.pos); })); - ['mouseup', 'touchend'].forEach((key) => rtv.c.addEventListener(key, (evt) => { + ['mouseup', 'touchend'].forEach((evtName) => rtv.c.addEventListener(evtName, (evt) => { rtv.mouse.down = false; if (rtv.presenting) { // maybe tap some text - let captured = false; - const N = rtv.objs.length; - for (let i = 0; i < N; i++) { - const obj = rtv.objs[i]; - if (!captured && typeof obj.mouse_up === 'function') { - captured = obj.mouse_up(evt); - } - } + rtv.objs.some((obj) => obj?.mouse_up()); - return false; + evt.preventDefault(); } - if (rtv.frames.mouse_up(evt)) { - return; - } + if (rtv.frames.mouse_up(evt)) return; if (rtv.menu.mouse_up(evt)) { rtv.new_line = null; @@ -3958,96 +3870,86 @@ window.addEventListener('load', () => { return; } - if (rtv.tool === 'select') { - let captured = false; - const N = rtv.objs.length; - for (let i = N - 1; i >= 0; i--) { - const obj = rtv.objs[i]; - if (!captured && typeof obj.mouse_up === 'function') { - captured = obj.mouse_up(evt); - } - } - } else if (rtv.tool === 'text') { - // add a num obj at mouse pos - const n = new Text('', rtv.mouse.grid); + switch (rtv.tool) { + case 'select': + rtv.objs.some((obj) => obj?.mouse_up()); + break; - const N = rtv.objs.length; - for (let i = 0; i < N; i++) { - const obj = rtv.objs[i]; - if (typeof obj.is_selected === 'function') { - obj.selected = false; - } - } + case 'text': { + rtv.objs.forEach((obj) => { obj.selected = false; }); - n.select(); - rtv.objs.push(n); - } else if (rtv.tool === 'shape' || rtv.tool === 'vector') { - // add a num obj at mouse pos - if (rtv.new_line) { - // add a point - rtv.new_line.add_point({ x: rtv.mouse.grid.x, y: rtv.mouse.grid.y }); - } else { - const l = new Shape([0, 0, 0, 1], [{ x: rtv.mouse.grid.x, y: rtv.mouse.grid.y }]); + // add a num obj at mouse pos + const newText = new Text('', rtv.mouse.grid); + newText.select(); + rtv.objs.push(newText); + } break; + + case 'shape': + case 'vector': + // add a num obj at mouse pos + if (rtv.new_line) { + // add a point + rtv.new_line.add_point({ x: rtv.mouse.grid.x, y: rtv.mouse.grid.y }); + } else { + const l = new Shape([0, 0, 0, 1], [{ x: rtv.mouse.grid.x, y: rtv.mouse.grid.y }]); + + switch (rtv.tool) { + case 'vector': + l.properties[rtv.frame].v = true; + break; - if (rtv.tool === 'vector') { - l.properties[rtv.frame].v = true; - } else if (rtv.tool === 'circle') { - l.properties[rtv.frame].circle = true; + case 'circle': + l.properties[rtv.frame].circle = true; + break; + + // no default + } + + rtv.objs.push(l); + rtv.new_line = l; } + return; - rtv.objs.push(l); - rtv.new_line = l; - } + case 'circle': { + const newCircle = new Circle([0, 0, 0, 1], rtv.mouse.grid); + rtv.objs.push(newCircle); + } break; - return; - } else if (rtv.tool === 'circle') { - const newCircle = new Circle([0, 0, 0, 1], rtv.mouse.grid); - rtv.objs.push(newCircle); - } else if (rtv.tool === 'network') { - const n = new Network(rtv.mouse.grid); - rtv.objs.push(n); + case 'network': { + const newNetwork = new Network(rtv.mouse.grid); + rtv.objs.push(newNetwork); + } break; + + // no default } if (rtv.selecting) { rtv.selecting = false; - const { x } = rtv.mouse.start; - const { y } = rtv.mouse.start; - const x2 = rtv.mouse.pos.x; - const y2 = rtv.mouse.pos.y; + const { x, y } = rtv.mouse.start; + const { x: x2, y: y2 } = rtv.mouse.pos; const xx = Math.min(x, x2); const yy = Math.min(y, y2); const xx2 = Math.max(x, x2); const yy2 = Math.max(y, y2); - rtv.selected_objs = []; - - for (let i = 0; i < rtv.objs.length; i++) { - const obj = rtv.objs[i]; + rtv.selected_objs = rtv.objs.filter((obj) => { if (typeof obj.in_rect === 'function') { obj.in_rect(xx, yy, xx2, yy2); - if (obj.is_selected()) { - rtv.selected_objs.push(obj); - } + return obj.is_selected(); } - } - - const scopy = copy(rtv.selected_objs); - for (let i = 0; i < scopy.length; i++) { - const obj = scopy[i]; - const props = copy(obj.properties[rtv.frame]); - obj.properties = { 1: props }; - } + return false; + }); - if (scopy.length > 0) { + if (rtv.selected_objs.length) { // store as text rep - const string = JSON.stringify(scopy); - document.getElementById('selected_objects_text').value = string; + document.getElementById('selected_objects_text').value = JSON.stringify( + rtv.selected_objs.map( + (obj) => ({ ...obj, properties: { 1: obj.properties[rtv.frame] } }), + ), + ); } - - saveState(); - return false; } saveState(); From 3b6ff3464a646bf42a9a8b90e0f05e4d63a7b1a1 Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 18:46:35 -0400 Subject: [PATCH 04/12] Enable user to exit presentation mode without focusing canvas --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index 1cd66e6f..c84565c7 100644 --- a/src/index.js +++ b/src/index.js @@ -1096,6 +1096,7 @@ export function present() { * Sets page up for presentation mode. */ function setUpPresentationMode() { + rtv.c.focus(); enterSelect(); // Enter select mode document.body.style.cursor = 'none'; // Hide cursor document.body.style.overflow = 'hidden'; // Disable and hide scrollbars From 61406e4a0dc7909b69b99335a51ba5f997b86649 Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 18:47:34 -0400 Subject: [PATCH 05/12] Run camera mouse drag listener (accidentally removed it before) --- src/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index c84565c7..0419859c 100644 --- a/src/index.js +++ b/src/index.js @@ -3837,8 +3837,13 @@ window.addEventListener('load', () => { if (rtv.pen.mouse_move(evt)) return; - if (rtv.mouse.down) rtv.objs.some((obj) => obj?.mouse_drag(evt)); - else rtv.objs.forEach((obj) => obj?.mouse_move(evt)); + if (rtv.mouse.down) { + if (!rtv.objs.some((obj) => obj?.mouse_drag(evt))) { + rtv.cam.mouse_drag(); + } + } else { + rtv.objs.forEach((obj) => obj?.mouse_move(evt)); + } if (rtv.presenting) rtv.mouse.time = MOUSE_DURATION; From f920b13f0fd1e6ec214733fd5c58989e25941671 Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 19:17:18 -0400 Subject: [PATCH 06/12] Run all event listeners beforehand --- src/index.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 0419859c..b58893f5 100644 --- a/src/index.js +++ b/src/index.js @@ -3734,6 +3734,7 @@ window.addEventListener('load', () => { case ' ': evt.preventDefault(); + break; // no default } @@ -3764,10 +3765,15 @@ window.addEventListener('load', () => { return; } - if (rtv.objs.some((obj) => { - if (obj?.onkeydown(evt)) return key === 'ArrowUp' || key === 'ArrowDown'; + let captured = false; + rtv.objs.forEach((obj) => { + if (obj?.onkeydown(evt)) { + captured = true; + return key === 'ArrowDown'; + } return false; - })) { + }); + if (captured) { evt.preventDefault(); return; } From a43dfd2a1ef11614346bdd5fdecd8d140189c74d Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 19:26:42 -0400 Subject: [PATCH 07/12] Focus canvas on page load --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index b58893f5..f9026d72 100644 --- a/src/index.js +++ b/src/index.js @@ -3588,6 +3588,7 @@ window.addEventListener('load', () => { rtv.c = document.getElementById('viewport'); rtv.c.style.backgroundColor = CANVAS_BG; + rtv.c.focus(); rtv.ctx = rtv.c.getContext('2d'); From 41b5d32bdaf8ec55b78e0daf8cf87dc1dee85a0f Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 19:30:57 -0400 Subject: [PATCH 08/12] Fix optional chaining syntax --- src/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index f9026d72..81b272c7 100644 --- a/src/index.js +++ b/src/index.js @@ -3768,7 +3768,7 @@ window.addEventListener('load', () => { let captured = false; rtv.objs.forEach((obj) => { - if (obj?.onkeydown(evt)) { + if (obj.onkeydown?.(evt)) { captured = true; return key === 'ArrowDown'; } @@ -3828,7 +3828,7 @@ window.addEventListener('load', () => { } catch { /* Continue */ } if (rtv.cam.mouse_down(evt) || rtv.pen.mouse_down(evt) || rtv.presenting) return; - if (rtv.objs.some((obj) => obj?.mouse_down(evt))) evt.preventDefault(); + if (rtv.objs.some((obj) => obj.mouse_down?.(evt))) evt.preventDefault(); if (rtv.frames.mouse_down()) return; if (rtv.tool === 'select') rtv.selecting = true; })); @@ -3845,11 +3845,11 @@ window.addEventListener('load', () => { if (rtv.pen.mouse_move(evt)) return; if (rtv.mouse.down) { - if (!rtv.objs.some((obj) => obj?.mouse_drag(evt))) { + if (!rtv.objs.some((obj) => obj.mouse_drag?.(evt))) { rtv.cam.mouse_drag(); } } else { - rtv.objs.forEach((obj) => obj?.mouse_move(evt)); + rtv.objs.forEach((obj) => obj.mouse_move?.(evt)); } if (rtv.presenting) rtv.mouse.time = MOUSE_DURATION; @@ -3863,7 +3863,7 @@ window.addEventListener('load', () => { if (rtv.presenting) { // maybe tap some text - rtv.objs.some((obj) => obj?.mouse_up()); + rtv.objs.some((obj) => obj.mouse_up?.()); evt.preventDefault(); } @@ -3885,7 +3885,7 @@ window.addEventListener('load', () => { switch (rtv.tool) { case 'select': - rtv.objs.some((obj) => obj?.mouse_up()); + rtv.objs.some((obj) => obj.mouse_up?.()); break; case 'text': { From 3f380b338c3aaf97dda464d0ac49c96155b5227d Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 19:33:39 -0400 Subject: [PATCH 09/12] Attach listeners in order of execution --- src/index.js | 60 ++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/index.js b/src/index.js index 81b272c7..22fedbe9 100644 --- a/src/index.js +++ b/src/index.js @@ -3711,36 +3711,6 @@ window.addEventListener('load', () => { rtv.keys.ctrl = false; }); - window.addEventListener('keydown', (evt) => { - switch (evt.key) { - case 'Tab': - rtv.keys.tab = true; - break; - - case 'Meta': - rtv.keys.meta = true; - break; - - case 'Shift': - rtv.keys.shift = true; - break; - - case 'Control': - rtv.keys.ctrl = true; - break; - - case 'Enter': - if (rtv.keys.meta || rtv.keys.ctrl) present(); - break; - - case ' ': - evt.preventDefault(); - break; - - // no default - } - }); - rtv.c.addEventListener('keydown', (evt) => { const { key } = evt; @@ -3795,6 +3765,36 @@ window.addEventListener('load', () => { } }); + window.addEventListener('keydown', (evt) => { + switch (evt.key) { + case 'Tab': + rtv.keys.tab = true; + break; + + case 'Meta': + rtv.keys.meta = true; + break; + + case 'Shift': + rtv.keys.shift = true; + break; + + case 'Control': + rtv.keys.ctrl = true; + break; + + case 'Enter': + if (rtv.keys.meta || rtv.keys.ctrl) present(); + break; + + case ' ': + evt.preventDefault(); + break; + + // no default + } + }); + window.addEventListener('keyup', ({ key }) => { switch (key) { case 'Tab': From 977a8eb6d2fe8d861e86766cee39944cbc69d3be Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 19:34:32 -0400 Subject: [PATCH 10/12] Remove unnecessary case --- src/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/index.js b/src/index.js index 22fedbe9..523e941e 100644 --- a/src/index.js +++ b/src/index.js @@ -3787,10 +3787,6 @@ window.addEventListener('load', () => { if (rtv.keys.meta || rtv.keys.ctrl) present(); break; - case ' ': - evt.preventDefault(); - break; - // no default } }); From da153f8528550e401c54848d34488135d0449d33 Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 19:44:31 -0400 Subject: [PATCH 11/12] Move keys to enter modes to src/resources.js --- src/index.js | 8 ++------ src/resources.js | 7 +++++++ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 523e941e..fb148109 100644 --- a/src/index.js +++ b/src/index.js @@ -26,6 +26,7 @@ import { PI2, MAT_NUM_WIDTH, CHAR, + MODE_KEYS, } from './resources'; // custom functions! @@ -3757,12 +3758,7 @@ window.addEventListener('load', () => { rtv.cam.onkeydown(evt); rtv.pen.onkeydown(evt); - if (rtv.tool === 'select') { - const tools = { - t: 'text', s: 'shape', c: 'camera', v: 'vector', - }; - if (key in tools) rtv.tool = tools[key]; - } + if (rtv.tool === 'select' && key in MODE_KEYS) rtv.tool = MODE_KEYS[key]; }); window.addEventListener('keydown', (evt) => { diff --git a/src/resources.js b/src/resources.js index 7eeb3255..f210ddd7 100644 --- a/src/resources.js +++ b/src/resources.js @@ -5,6 +5,13 @@ import './style.css'; export const VERSION = packageJson.version; // Version const IS_MAC = navigator.platform.toUpperCase().includes('MAC'); // Running on macOS? +export const MODE_KEYS = { + c: 'camera', + s: 'shape', + t: 'text', + v: 'vector', +}; + // Text and image border export const BORDER_OPACITY = 0.2; From 341694cb104fb9a9685ff2416ea4fa79a707fa1d Mon Sep 17 00:00:00 2001 From: catruge <49883288+catruge@users.noreply.github.com> Date: Tue, 25 May 2021 19:49:09 -0400 Subject: [PATCH 12/12] Access "key" property directly from "evt" --- src/index.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index fb148109..dbf90cc3 100644 --- a/src/index.js +++ b/src/index.js @@ -3713,9 +3713,7 @@ window.addEventListener('load', () => { }); rtv.c.addEventListener('keydown', (evt) => { - const { key } = evt; - - if (key === 'Escape') { + if (evt.key === 'Escape') { if (rtv.presenting && rtv.tool !== 'camera' && rtv.tool !== 'pen') { rtv.presenting = false; document.body.style.cursor = ''; @@ -3726,13 +3724,13 @@ window.addEventListener('load', () => { enterSelect(); } - if (rtv.keys.ctrl && key === 'Backspace') { + if (rtv.keys.ctrl && evt.key === 'Backspace') { rtv.objs.forEach((obj) => { if (obj.is_selected) obj.deleted = true; }); } - if (key === 'z' && (rtv.keys.meta || rtv.keys.ctrl)) { + if (evt.key === 'z' && (rtv.keys.meta || rtv.keys.ctrl)) { undo(); return; } @@ -3741,7 +3739,7 @@ window.addEventListener('load', () => { rtv.objs.forEach((obj) => { if (obj.onkeydown?.(evt)) { captured = true; - return key === 'ArrowDown'; + return evt.key === 'ArrowDown'; } return false; }); @@ -3758,7 +3756,7 @@ window.addEventListener('load', () => { rtv.cam.onkeydown(evt); rtv.pen.onkeydown(evt); - if (rtv.tool === 'select' && key in MODE_KEYS) rtv.tool = MODE_KEYS[key]; + if (rtv.tool === 'select' && evt.key in MODE_KEYS) rtv.tool = MODE_KEYS[evt.key]; }); window.addEventListener('keydown', (evt) => {