diff options
| -rw-r--r-- | js/inknswitch/ink.js | 25 |
1 files changed, 16 insertions, 9 deletions
diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js index 62666af..1fbbf7c 100644 --- a/js/inknswitch/ink.js +++ b/js/inknswitch/ink.js @@ -7,17 +7,20 @@ noteArea.value = localStorage.getItem('noteContent') || ''; noteArea.style.width = '100vw'; noteArea.style.height = '100vh'; noteArea.style.boxSizing = 'border-box'; -noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; +noteArea.style.position = 'absolute'; +noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)'; +noteArea.style.zIndex = '1'; canvas.width = window.innerWidth; canvas.height = window.innerHeight; -canvas.style.position = 'fixed'; +canvas.style.position = 'absolute'; +canvas.style.zIndex = '0'; let drawing = false; let prevX = 0; let prevY = 0; -canvas.style.display = 'none'; +canvas.style.pointerEvents = 'none'; // Disable mouse events on the canvas const getCursorPosition = (e) => { const rect = canvas.getBoundingClientRect(); @@ -87,17 +90,21 @@ document.addEventListener('keydown', (e) => { // Cmd or Ctrl and D key to toggle modes if ((e.metaKey || e.ctrlKey) && e.key === 'd') { e.preventDefault(); - if (canvas.style.display === 'none') { - canvas.style.display = 'block'; - noteArea.style.display = 'none'; + if (canvas.style.pointerEvents === 'none') { + canvas.style.pointerEvents = 'auto'; + noteArea.style.pointerEvents = 'none'; + noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)'; + noteArea.style.color = '#bbb'; } else { - canvas.style.display = 'none'; - noteArea.style.display = 'block'; + canvas.style.pointerEvents = 'none'; + noteArea.style.pointerEvents = 'auto'; + noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)'; + noteArea.style.color = 'black'; } } // C key to clear the canvas - if (e.key === 'c' && canvas.style.display === 'block') { + if (e.key === 'c' && canvas.style.pointerEvents === 'auto') { const confirmClear = confirm('Do you really want to clear the canvas?'); if (confirmClear) { ctx.clearRect(0, 0, canvas.width, canvas.height); |