path: root/js/inknswitch/ink.js

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js')
    .then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(err) {
        console.error('Service Worker registration failed:', err);
    });
}

document.getElementById('noteArea').focus(); // ensures that textarea is focused when the page loads

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';

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);
};

const handleMouseDown = (e) => {
    startDrawing(e);
};

const handleMouseMove = (e) => {
    if (drawing) {
        draw(e);
    }
};

const handleMouseUp = (e) => {
    if (drawing) {
        draw(e);
        drawing = false;
        saveCanvasImage();
    }
};

const handleTouchStart = (e) => {
    e.preventDefault();
    startDrawing(e.touches[0]);
};

const handleTouchMove = (e) => {
    e.preventDefault();
    if (drawing) {
        draw(e.touches[0]);
    }
};

const handleTouchEnd = (e) => {
    e.preventDefault();
    saveCanvasImage();
};

canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);

canvas.addEventListener('touchstart', handleTouchStart, false);
canvas.addEventListener('touchmove', handleTouchMove, false);
canvas.addEventListener('touchend', handleTouchEnd, false);

const savedImage = localStorage.getItem('canvasImage');
if (savedImage) {
    const img = new Image();
    img.onload = () => {
        ctx.drawImage(img, 0, 0);
    };
    img.src = savedImage;
}

const saveCanvasAsImage = () => {
    const confirmDownload = confirm('Do you really want to save the canvas as an image?');
    if (confirmDownload) {
        const dataUrl = canvas.toDataURL();
        const a = document.createElement('a');
        a.href = dataUrl;
        a.download = 'canvas.png';
        a.click();
    }
}

const clearCanvas = () => {
    const confirmClear = confirm('Do you really want to clear the canvas?');
    if (confirmClear) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        localStorage.removeItem('canvasImage');
    }
}

// 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 = 'crosshair';
        canvas.focus();
        noteArea.blur();
    } else {
        // Note mode
        canvas.style.pointerEvents = 'none';
        noteArea.style.pointerEvents = 'auto';
        noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
        noteArea.style.color = 'black';
        canvas.blur();
        noteArea.focus();
    }
    localStorage.setItem('noteContents', noteArea.value);
    localStorage.setItem('noteContent', noteArea.value);
    document.getElementById('mode').innerHTML = canvas.style.pointerEvents === 'none' ? 'typing' : 'drawing';
};

const toggleButton = document.getElementById('toggle');
toggleButton.addEventListener('click', toggle);

const helpText = "This is a modal note taking tool. With it, you can type text that'll be saved to the browser, and you can draw pictures that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap either cmd + d, ctrl + d or cmd + 1, or ctrl + 1. When in drawing mode, tap c to clear the canvas, tap s to save the contents of the canvas to a png."

const handleSelectChange = () => {
    if (selectElement.value === 'clear') {
        clearCanvas();
    } else if (selectElement.value === 'save') {
        saveCanvasAsImage();
    } else if (selectElement.value === 'help') {
        alert(helpText);
    }

    // Reset select element to default option
    selectElement.selectedIndex = 0;
};

const selectElement = document.getElementById('menu');
selectElement.addEventListener('change', handleSelectChange);

const handleKeyDown = (e) => {
    // Cmd or Ctrl and D/Cmd or Ctrl and 1 to toggle modes
    if (((e.metaKey || e.ctrlKey) && e.key === 'd') || ((e.metaKey || e.ctrlKey) && e.key === '1')) {
        e.preventDefault();
        toggle();
    }

    // C key to clear the canvas
    if (e.key === 'c' && canvas.style.pointerEvents === 'auto') {
        clearCanvas();
    }

    // S key to save the canvas as an image
    if (e.key === 's' && canvas.style.pointerEvents === 'auto') {
        saveCanvasAsImage();
    }

    localStorage.setItem('noteContent', noteArea.value);
};

document.addEventListener('keydown', handleKeyDown);