trimill.xyz/flaskr/templates/projects/griddraw/index.js
2022-06-23 02:23:38 -04:00

40 lines
1.5 KiB
JavaScript

window.onload = () => {
window.mouseButton = null;
window.canvas = createCanvas("#canvas-wrapper", window.innerWidth, window.innerHeight, 30, mouseOver);
window.colorpicker = createColorpicker(
".picking-area", ".picker",
".hue-picking-area", ".hue-picker",
"#hexcode", "#colordisplay"
);
d3.select("#undo").on("click", window.canvas.undo);
d3.select("#redo").on("click", window.canvas.redo);
d3.select("#clear").on("click", window.canvas.clear);
d3.select("#setbg").on("click", ()=>window.canvas.setbg(HSVtoRGB(window.colorpicker.color)));
d3.select("#setlines").on("click", ()=>window.canvas.setlinecol(HSVtoRGB(window.colorpicker.color)));
d3.select("#togglelines").on("click", ()=>window.canvas.setlinecol(null));
window.colorpicker.updateColorOutput();
};
function mouseOver(mouse) {
const x = Math.floor(mouse[0]/window.canvas.spacing);
const y = Math.floor(mouse[1]/window.canvas.spacing);
if(window.mouseButton == 0) {
window.canvas.setCell(x, y, HSVtoRGB(window.colorpicker.color));
} else if(window.mouseButton == 1) {
const cell = d3.select("#cell-"+x+"-"+y);
if(cell.size() > 0) {
const color = cell.style("fill");
const hsvcol = HEXtoHSV(RGBtoHEX(color));
window.colorpicker.color = hsvcol;
window.colorpicker.updateColorOutput();
}
} else if(window.mouseButton == 2) {
window.canvas.setCell(x, y, null);
}
}
window.addEventListener("scroll", ()=>{window.scrollTo(0, 0)});