From 3f6e81d826516509c7097a10a617f9eaa6c5ce1a Mon Sep 17 00:00:00 2001 From: elioat Date: Fri, 12 Jan 2024 19:58:17 -0500 Subject: * --- js/inknswitch/index.html | 37 ++++++++++++++++ js/inknswitch/ink.js | 109 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 146 insertions(+) create mode 100644 js/inknswitch/index.html create mode 100644 js/inknswitch/ink.js (limited to 'js') diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html new file mode 100644 index 0000000..c6fa0b6 --- /dev/null +++ b/js/inknswitch/index.html @@ -0,0 +1,37 @@ + + + + + + ink n switch + + + + + + + + \ No newline at end of file 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 -- cgit 1.4.1-2-gfad0