path: root/js/inknswitch/ink.js

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.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 = 'absolute';
canvas.style.zIndex = '0';

let drawing = false;
let prevX = 0;
let prevY = 0;

canvas.style.pointerEvents = 'none'; // Disable mouse events on the canvas

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.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.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.pointerEvents === 'auto') {
        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);
});