mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
// REFACTOR: inherit from Layer, override init method (call super as well)
|
|
// OPTIMIZABLE: only draw the grid for the current viewport. The grid should be refreshed
|
|
// everytime the user pans the view
|
|
|
|
// Start colour of the pixel grid (can be changed in the preferences)
|
|
let pixelGridColor = "#000000";
|
|
// Distance between one line and another in HTML pixels
|
|
let lineDistance = 11;
|
|
// The grid is not visible by default
|
|
let pixelGridVisible = false;
|
|
// The grid is enabled, but is disabled in order to save performance with big sprites
|
|
let pixelGridEnabled = true;
|
|
|
|
function disablePixelGrid() {
|
|
pixelGridEnabled = false;
|
|
pixelGrid.canvas.style.display = "none";
|
|
}
|
|
|
|
function enablePixelGrid() {
|
|
pixelGridEnabled = true;
|
|
pixelGrid.canvas.style.display = "inline-block";
|
|
}
|
|
|
|
function repaintPixelGrid(factor) {
|
|
lineDistance += factor;
|
|
fillPixelGrid();
|
|
}
|
|
|
|
/** Shows or hides the pixel grid depening on its current visibility
|
|
* (triggered by the show pixel grid button in the top menu)
|
|
*
|
|
*/
|
|
function togglePixelGrid(newState) {
|
|
// Ignore the event if the grid is disabled
|
|
if (!pixelGridEnabled) return;
|
|
|
|
// Getting the button because I have to change its text
|
|
let button = document.getElementById("toggle-pixelgrid-button");
|
|
|
|
//Set the state based on the passed newState variable, otherwise just toggle it
|
|
if (newState == 'on') pixelGridVisible = true;
|
|
else if (newState == 'off') pixelGridVisible = false;
|
|
else pixelGridVisible = !pixelGridVisible;
|
|
|
|
// If it was visible, I hide it
|
|
if (pixelGridVisible) {
|
|
button.innerHTML = "Hide pixel grid";
|
|
pixelGrid.canvas.style.display = "inline-block";
|
|
}
|
|
// Otherwise, I show it
|
|
else {
|
|
button.innerHTML = "Show pixel grid";
|
|
pixelGrid.canvas.style.display = "none";
|
|
}
|
|
}
|
|
|
|
/** Fills the pixelGridCanvas with the pixelgrid
|
|
*
|
|
*/
|
|
function fillPixelGrid() {
|
|
let context = pixelGrid.context;
|
|
let originalSize = layers[0].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
|
|
pixelGrid.canvas.width = originalSize[0] * Math.round(lineDistance);
|
|
pixelGrid.canvas.height = originalSize[1] * Math.round(lineDistance);
|
|
|
|
context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
|
|
|
|
// OPTIMIZABLE, could probably be a bit more elegant
|
|
// Draw horizontal lines
|
|
for (let i=0; i<pixelGrid.canvas.width / Math.round(lineDistance); i++) {
|
|
context.beginPath();
|
|
context.moveTo(i * Math.round(lineDistance) + 0.5, 0);
|
|
context.lineTo(i * Math.round(lineDistance) + 0.5, originalSize[1] * Math.round(lineDistance));
|
|
context.stroke();
|
|
context.closePath();
|
|
}
|
|
|
|
// Draw vertical lines
|
|
for (let i=0; i<pixelGrid.canvas.height / Math.round(lineDistance); i++) {
|
|
context.beginPath();
|
|
context.moveTo(0, i * Math.round(lineDistance) + 0.5);
|
|
context.lineTo(originalSize[0] * Math.round(lineDistance), i * Math.round(lineDistance) + 0.5);
|
|
context.stroke();
|
|
context.closePath();
|
|
}
|
|
|
|
if (!pixelGridVisible) {
|
|
pixelGrid.canvas.style.display = 'none';
|
|
}
|
|
} |