102 lines
2.2 KiB
JavaScript
102 lines
2.2 KiB
JavaScript
const content = document.getElementById("content");
|
|
|
|
var pencil = "o";
|
|
|
|
var fontSize = parseFloat(
|
|
window.getComputedStyle(content).getPropertyValue("font-size")
|
|
);
|
|
|
|
var test = document.getElementById("Test");
|
|
test.style.fontSize = fontSize;
|
|
var height = test.getBoundingClientRect().height;
|
|
var width = test.getBoundingClientRect().width;
|
|
|
|
var drawGrid = [];
|
|
|
|
var drawHistory = {
|
|
forward: [],
|
|
backward: [],
|
|
};
|
|
|
|
var textify = new Worker("./js/textify.js");
|
|
|
|
var previousX;
|
|
var previousY;
|
|
|
|
function moveMouse(e) {
|
|
if (e.buttons != 1) return mouseUp;
|
|
let x = Math.floor(e.clientX / width);
|
|
let y = Math.floor(e.clientY / height);
|
|
if (x == previousX && y == previousY) {
|
|
return;
|
|
}
|
|
|
|
drawLine(previousX, previousY, x, y);
|
|
drawPoint(x, y);
|
|
previousX = x;
|
|
previousY = y;
|
|
render();
|
|
}
|
|
|
|
function render() {
|
|
textify.postMessage(drawGrid);
|
|
}
|
|
|
|
function mouseUp(e) {
|
|
content.removeEventListener("mousemove", moveMouse);
|
|
}
|
|
|
|
textify.onmessage = async function (e) {
|
|
content.innerHTML = e.data;
|
|
};
|
|
|
|
content.addEventListener("mousedown", function (e) {
|
|
content.addEventListener("mousemove", moveMouse);
|
|
let x = Math.floor(e.clientX / width);
|
|
let y = Math.floor(e.clientY / height);
|
|
drawHistory.backward.unshift(JSON.stringify(drawGrid));
|
|
drawHistory.forward = [];
|
|
if (e.shiftKey) {
|
|
drawLine(previousX, previousY, x, y);
|
|
}
|
|
if (e.ctrlKey) {
|
|
fill(x, y);
|
|
}
|
|
previousX = x;
|
|
previousY = y;
|
|
render();
|
|
});
|
|
|
|
content.addEventListener("mouseup", mouseUp);
|
|
|
|
document.addEventListener("keydown", function (e) {
|
|
if (e.ctrlKey == true) {
|
|
console.log(drawHistory.backward.length);
|
|
switch (e.key) {
|
|
case "z":
|
|
if (drawHistory.backward[0]) {
|
|
drawHistory.forward.unshift(JSON.stringify(drawGrid));
|
|
drawGrid = JSON.parse(drawHistory.backward.shift());
|
|
render();
|
|
}
|
|
|
|
break;
|
|
case "y":
|
|
if (drawHistory.forward[0]) {
|
|
drawHistory.backward.unshift(JSON.stringify(drawGrid));
|
|
drawGrid = JSON.parse(drawHistory.forward.shift());
|
|
render();
|
|
}
|
|
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
return;
|
|
}
|
|
if (e.key.length == 1) {
|
|
pencil = e.key;
|
|
}
|
|
});
|