* - tour - touring some programming systems

about summary refs log tree commit diff stats

path: root/js/magic-bird/imgs/extracted-1688-map/MapPartsWhite/towns_white/50.png

diff options

author	elioat <elioat@tilde.institute>	2025-01-12 08:54:02 -0500
committer	elioat <elioat@tilde.institute>	2025-01-12 08:54:02 -0500
commit	b0fde81d0ae35673277e2ffccd209b8e78675bf5 (patch)
tree	62809862e50a50ea019530ff3ca846834315dd17 /js/magic-bird/imgs/extracted-1688-map/MapPartsWhite/towns_white/50.png
parent	5547204f98172f130c6138a3b7f7c7f5fe1940ed (diff)
download	tour-b0fde81d0ae35673277e2ffccd209b8e78675bf5.tar.gz

Diffstat (limited to 'js/magic-bird/imgs/extracted-1688-map/MapPartsWhite/towns_white/50.png')

0 files changed, 0 insertions, 0 deletions

nk.js?id=d960c0347a85cf86a3c2227530e5bcee5836b49c'>^

3c6b5ba ^

3f6e81d ^

46fa843 ^

3f6e81d ^

7aa3e02 ^

3f6e81d ^

7aa3e02 ^

3f6e81d ^

3c6b5ba ^

3f6e81d ^

8b8fdf4 ^

3f6e81d ^

8b8fdf4 ^

3f6e81d ^

8b8fdf4 ^

3f6e81d ^

8b8fdf4 ^

321c41f ^

8b8fdf4 ^

321c41f ^

8b8fdf4 ^

321c41f ^

8b8fdf4 ^

321c41f ^

8b8fdf4 ^

321c41f ^

8b8fdf4 ^

321c41f ^

3f6e81d ^

e71fd1a ^

3c6b5ba ^

8b8fdf4 ^

11b0eb3 ^

3c6b5ba ^

11b0eb3 ^

3c6b5ba ^

8b8fdf4 ^

3c6b5ba ^

8b8fdf4 ^

0aa2204 ^

8b8fdf4 ^

e71fd1a ^

8b8fdf4 ^

e71fd1a ^

8b8fdf4 ^

11b0eb3 ^

3f6e81d ^

3c6b5ba ^

3f6e81d ^

7aa3e02 ^

e71fd1a ^

3f6e81d ^

b92f7fa ^

e71fd1a ^

b92f7fa ^

3f6e81d ^

8b8fdf4 ^

e71fd1a ^

1
2
3

5
6

11
12

13
14

17
18

19
20

22
23
24

25
26
27

28
29

81
82
83

84
85
86

95
96

156
157

164
165

167
168
169

170
171

177
178

194
195

198
199
200

203
204

205
206

208
209

211
212
213

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


context:
space:
mode: