1 files changed, 32 insertions, 16 deletions

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