1 files changed, 109 insertions, 0 deletions
diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js
new file mode 100644
index 0000000..62666af
--- /dev/null
+++ b/js/inknswitch/ink.js
@@ -0,0 +1,109 @@
+const canvas = document.getElementById('drawingArea');
+const ctx = canvas.getContext('2d');
+const noteArea = document.getElementById('noteArea');
+
+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)';
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+canvas.style.position = 'fixed';
+
+let drawing = false;
+let prevX = 0;
+let prevY = 0;
+
+canvas.style.display = 'none';
+
+const getCursorPosition = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    return {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+    };
+};
+
+const startDrawing = (e) => {
+    drawing = true;
+    const { x, y } = getCursorPosition(e);
+    prevX = x;
+    prevY = y;
+};
+
+const drawLine = (x1, y1, x2, y2) => {
+    ctx.beginPath();
+    ctx.lineWidth = 5;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = '#000';
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+};
+
+const draw = (e) => {
+    if (drawing) {
+        const { x, y } = getCursorPosition(e);
+        drawLine(prevX, prevY, x, y);
+        prevX = x;
+        prevY = y;
+    }
+};
+
+const saveCanvasImage = () => {
+    const dataUrl = canvas.toDataURL();
+    localStorage.setItem('canvasImage', dataUrl);
+};
+
+canvas.addEventListener('mousedown', startDrawing);
+
+canvas.addEventListener('mousemove', (e) => {
+    if (drawing) {
+        draw(e);
+    }
+});
+
+canvas.addEventListener('mouseup', (e) => {
+    if (drawing) {
+        draw(e);
+        drawing = false;
+        saveCanvasImage();
+    }
+});
+
+const savedImage = localStorage.getItem('canvasImage');
+if (savedImage) {
+    const img = new Image();
+    img.onload = () => {
+        ctx.drawImage(img, 0, 0);
+    };
+    img.src = savedImage;
+}
+
+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';
+        } else {
+            canvas.style.display = 'none';
+            noteArea.style.display = 'block';
+        }
+    }
+
+    // C key to clear the canvas
+    if (e.key === 'c' && canvas.style.display === 'block') {
+        const confirmClear = confirm('Do you really want to clear the canvas?');
+        if (confirmClear) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            localStorage.removeItem('canvasImage');
+        }
+    }
+
+    localStorage.setItem('noteContent', noteArea.value);
+});
\ No newline at end of file