From 3c6b5bad54e05eec4c5da37c1e4293bb862398ab Mon Sep 17 00:00:00 2001 From: elioat Date: Fri, 12 Jan 2024 21:52:59 -0500 Subject: * --- js/inknswitch/index.html | 13 +++++++++++++ js/inknswitch/ink.js | 48 ++++++++++++++++++++++++++++++++---------------- 2 files changed, 45 insertions(+), 16 deletions(-) (limited to 'js') diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html index 91f9ff2..535c41d 100644 --- a/js/inknswitch/index.html +++ b/js/inknswitch/index.html @@ -27,9 +27,22 @@ margin: 0 auto; display: block; } + #toggleButton { + border: 1px solid black; + background-color: transparent; + padding: 0.5em 1em; + position: fixed; + top: 10px; + right: 10px; + z-index: 1000; + } + #toggleButton:hover { + cursor: pointer; + } +

diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js index bd5fb6d..58b923b 100644 --- a/js/inknswitch/ink.js +++ b/js/inknswitch/ink.js @@ -1,7 +1,7 @@ const canvas = document.getElementById('drawingArea'); const ctx = canvas.getContext('2d'); -const noteArea = document.getElementById('noteArea'); +const noteArea = document.getElementById('noteArea'); noteArea.value = localStorage.getItem('noteContent') || ''; noteArea.style.width = '100vw'; @@ -20,7 +20,7 @@ let drawing = false; let prevX = 0; let prevY = 0; -canvas.style.pointerEvents = 'none'; // Disable mouse events on the canvas +canvas.style.pointerEvents = 'none'; const getCursorPosition = (e) => { const rect = canvas.getBoundingClientRect(); @@ -62,13 +62,11 @@ const saveCanvasImage = () => { }; canvas.addEventListener('mousedown', startDrawing); - canvas.addEventListener('mousemove', (e) => { if (drawing) { draw(e); } }); - canvas.addEventListener('mouseup', (e) => { if (drawing) { draw(e); @@ -86,22 +84,40 @@ if (savedImage) { img.src = savedImage; } +// Toggle between drawing and note mode +const toggle = () => { + if (canvas.style.pointerEvents === 'none') { + // Drawing mode + canvas.style.pointerEvents = 'auto'; + noteArea.style.pointerEvents = 'none'; + noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)'; + noteArea.style.color = '#bbb'; + canvas.style.cursor = 'pointer'; + toggleButton.textContent = 'Write' + } else { + // Note mode + canvas.style.pointerEvents = 'none'; + noteArea.style.pointerEvents = 'auto'; + noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)'; + noteArea.style.color = 'black'; + toggleButton.textContent = 'Draw' + } +}; + +const toggleButton = document.getElementById('toggleButton'); +toggleButton.style.pointerEvents = 'auto'; +toggleButton.addEventListener('click', toggleMode); +toggleButton.addEventListener('touchend', toggleMode); + +function toggleMode() { + toggle(); +} + 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.pointerEvents === 'none') { - canvas.style.pointerEvents = 'auto'; - noteArea.style.pointerEvents = 'none'; - noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.25)'; - noteArea.style.color = '#bbb'; - canvas.style.cursor = 'pointer'; - } else { - canvas.style.pointerEvents = 'none'; - noteArea.style.pointerEvents = 'auto'; - noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)'; - noteArea.style.color = 'black'; - } + toggle(); } // C key to clear the canvas -- cgit 1.4.1-2-gfad0