Commit 11c73bc7 authored by Tomáš Hübelbauer's avatar Tomáš Hübelbauer

Implement undo, PNG save, JSON save and checkerboard background

parent 5019c2d7
# Implement Redo
Also hook Ctrl+Z and Ctrl+Y up.
# Implement saving
This should be split up into two tasks:
- Saving bitmap (PNG)
- Saving vector (SVG)
No other types will be supported.
# Implement Undo and Redo
Flatten out `instructions` even more to get rid of stroke `segments`.
Implement keyboard shortcuts for it, too.
......@@ -9,6 +9,13 @@ body {
margin: 0;
}
#toolDiv {
left: 1em;
position: absolute;
top: 1em;
}
#paintCanvas {
background: url('img/checkerboard.png');
flex: 1;
}
......@@ -7,6 +7,11 @@
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div id="toolDiv">
<button id="savePngButton">Save PNG</button>
<button id="saveJsonButton">Save JSON</button>
<button id="undoButton">Undo</button>
</div>
<canvas id="paintCanvas"></canvas>
</body>
</html>
......@@ -3,12 +3,39 @@ const thickness = 15;
let timestamp = 0;
window.addEventListener('load', _ => {
const savePngButton = document.getElementById('savePngButton');
const saveJsonButton = document.getElementById('saveJsonButton');
const undoButton = document.getElementById('undoButton');
const paintCanvas = document.getElementById('paintCanvas');
window.dispatchEvent(new Event('resize'));
savePngButton.addEventListener('click', _ => {
const timestamp = (new Date()).toISOString().replace('T', '-').replace(/:/g, '-');
const downloadA = document.createElement('a');
downloadA.download = `${timestamp}.png`;
downloadA.href = paintCanvas.toDataURL();
document.body.appendChild(downloadA);
downloadA.click();
document.body.removeChild(downloadA);
});
saveJsonButton.addEventListener('click', _ => {
const timestamp = (new Date()).toISOString().replace('T', '-').replace(/:/g, '-');
const downloadA = document.createElement('a');
downloadA.download = `${timestamp}.json`;
downloadA.href = 'data:application/json;charset=utf8,' + encodeURIComponent(JSON.stringify({ instructions, timestamp: new Date() }, null, 2));
document.body.appendChild(downloadA);
downloadA.click();
document.body.removeChild(downloadA);
});
undoButton.addEventListener('click', _ => {
if (confirm(`Are you sure? There's no redo yet.`)) {
instructions.pop();
}
});
paintCanvas.addEventListener('pointerdown', ({ offsetX: x, offsetY: y, pressure }) => {
instructions.push({ type: 'stroke', points: [ { x, y, pressure } ] });
instructions.push({ type: 'stroke', points: [{ x, y, pressure }] });
});
paintCanvas.addEventListener('pointermove', ({ offsetX: x, offsetY: y, pressure, buttons }) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment