pixel-editor/js/layers/PixelGrid.js
2021-12-11 10:48:14 +01:00

112 lines
4.0 KiB
JavaScript

// OPTIMIZABLE: render the grid only for the current viewport
class PixelGrid extends Layer {
// Start colour of the pixel grid (can be changed in the preferences)
pixelGridColor = "#000000";
// Distance between one line and another in HTML pixels
lineDistance = 10;
// The grid is not visible by default
pixelGridVisible = false;
// The grid is enabled, but is disabled in order to save performance with big sprites
pixelGridEnabled = true;
constructor(width, height, canvas, menuEntry) {
super(width, height, canvas, menuEntry);
this.initialize();
Events.onCustom("refreshPixelGrid", this.fillPixelGrid.bind(this));
Events.onCustom("switchedToAdvanced", this.togglePixelGrid.bind(this));
Events.onCustom("switchedToBasic", this.togglePixelGrid.bind(this));
}
initialize() {
super.initialize();
this.fillPixelGrid();
}
disablePixelGrid() {
this.pixelGridEnabled = false;
this.canvas.style.display = "none";
}
enablePixelGrid() {
if (!this.pixelGridVisible)
return;
this.pixelGridEnabled = true;
this.canvas.style.display = "inline-block";
}
hidePixelGrid() {
let button = document.getElementById("toggle-pixelgrid-button");
this.pixelGridVisible = false;
button.innerHTML = "Show pixel grid";
this.canvas.style.display = "none";
}
showPixelGrid() {
let button = document.getElementById("toggle-pixelgrid-button");
this.pixelGridVisible = true;
button.innerHTML = "Hide pixel grid";
this.canvas.style.display = "inline-block";
}
repaintPixelGrid(factor) {
this.lineDistance += factor;
this.fillPixelGrid();
}
/** Shows or hides the pixel grid depening on its current visibility
* (triggered by the show pixel grid button in the top menu)
*
*/
togglePixelGrid(newState) {
//Set the state based on the passed newState variable, otherwise just toggle it
if (newState == 'on')
this.showPixelGrid();
else if (newState == 'off')
this.hidePixelGrid();
else
if (this.pixelGridVisible)
this.hidePixelGrid();
else
this.showPixelGrid();
}
/** Fills the pixelGridCanvas with the pixelgrid
*
*/
fillPixelGrid() {
let originalSize = currFile.canvasSize;
// The pixelGridCanvas is lineDistance times bigger so that the lines don't take 1 canvas pixel
// (which would cover the whole canvas with the pixelGridColour), but they take 1/lineDistance canvas pixels
this.canvas.width = originalSize[0] * Math.round(this.lineDistance);
this.canvas.height = originalSize[1] * Math.round(this.lineDistance);
this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
console.log("Line ditance: " + this.lineDistance)
// OPTIMIZABLE, could probably be a bit more elegant
// Draw horizontal lines
for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {
this.context.beginPath();
this.context.moveTo(i * Math.round(this.lineDistance) + 0.5, 0);
this.context.lineTo(i * Math.round(this.lineDistance) + 0.5,
originalSize[1] * Math.round(this.lineDistance));
this.context.stroke();
this.context.closePath();
}
// Draw vertical lines
for (let i=0; i<this.canvas.height / Math.round(this.lineDistance); i++) {
this.context.beginPath();
this.context.moveTo(0, i * Math.round(this.lineDistance) + 0.5);
this.context.lineTo(originalSize[0] * Math.round(this.lineDistance),
i * Math.round(this.lineDistance) + 0.5);
this.context.stroke();
this.context.closePath();
}
if (!this.pixelGridVisible) {
this.canvas.style.display = 'none';
}
}
}