Fixed pixel grid bug

This commit is contained in:
unsettledgames 2021-12-07 23:01:49 +01:00
parent 05beab6929
commit 55f514b92e
5 changed files with 31 additions and 31 deletions

View File

@ -10,6 +10,9 @@ const EditorState = (() => {
} }
function switchMode(newMode) { function switchMode(newMode) {
if (!firstFile && newMode == "Basic" && !confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
return;
}
//switch to advanced mode //switch to advanced mode
if (newMode == 'Advanced') { if (newMode == 'Advanced') {
Events.emit("switchedToAdvanced"); Events.emit("switchedToAdvanced");

View File

@ -28,9 +28,6 @@ const LayerList = (() => {
} }
function hideMenu() { function hideMenu() {
if (EditorState.documentCreated()) { if (EditorState.documentCreated()) {
if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
return;
}
// Selecting the current layer // Selecting the current layer
currFile.currentLayer.selectLayer(); currFile.currentLayer.selectLayer();
// Flatten the layers // Flatten the layers

View File

@ -103,6 +103,7 @@ const Startup = (() => {
// Adding the checkerboard behind it // Adding the checkerboard behind it
currFile.checkerBoard = new Checkerboard(width, height, null); currFile.checkerBoard = new Checkerboard(width, height, null);
// Pixel grid // Pixel grid
console.log("CREATED GRID");
currFile.pixelGrid = new PixelGrid(width, height, "pixel-grid"); currFile.pixelGrid = new PixelGrid(width, height, "pixel-grid");
// Creating the vfx layer on top of everything // Creating the vfx layer on top of everything

View File

@ -12,14 +12,14 @@ class PixelGrid extends Layer {
constructor(width, height, canvas, menuEntry) { constructor(width, height, canvas, menuEntry) {
super(width, height, canvas, menuEntry); super(width, height, canvas, menuEntry);
this.initialize(); this.initialize();
Events.onCustom("refreshPixelGrid", this.fillPixelGrid.bind(this));
Events.onCustom("switchedToAdvanced", this.togglePixelGrid.bind(this));
Events.onCustom("switchedToBasic", this.togglePixelGrid.bind(this));
} }
initialize() { initialize() {
super.initialize(); super.initialize();
this.fillPixelGrid(); this.fillPixelGrid();
Events.onCustom("refreshPixelGrid", this.fillPixelGrid.bind(this));
Events.onCustom("switchedToAdvanced", this.disablePixelGrid.bind(this));
Events.onCustom("switchedToBasic", this.enablePixelGrid.bind(this));
} }
disablePixelGrid() { disablePixelGrid() {
@ -28,10 +28,25 @@ class PixelGrid extends Layer {
} }
enablePixelGrid() { enablePixelGrid() {
if (!this.pixelGridVisible)
return;
this.pixelGridEnabled = true; this.pixelGridEnabled = true;
this.canvas.style.display = "inline-block"; 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) { repaintPixelGrid(factor) {
this.lineDistance += factor; this.lineDistance += factor;
this.fillPixelGrid(); this.fillPixelGrid();
@ -42,24 +57,16 @@ class PixelGrid extends Layer {
* *
*/ */
togglePixelGrid(newState) { togglePixelGrid(newState) {
// 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 //Set the state based on the passed newState variable, otherwise just toggle it
if (newState == 'on') this.pixelGridVisible = true; if (newState == 'on')
else if (newState == 'off') this.pixelGridVisible = false; this.showPixelGrid();
else this.pixelGridVisible = !this.pixelGridVisible; else if (newState == 'off')
this.hidePixelGrid();
// If it was visible, I hide it else
if (this.pixelGridVisible) { if (this.pixelGridVisible)
button.innerHTML = "Hide pixel grid"; this.hidePixelGrid();
this.canvas.style.display = "inline-block"; else
} this.showPixelGrid();
// Otherwise, I show it
else {
button.innerHTML = "Show pixel grid";
this.canvas.style.display = "none";
}
} }
/** Fills the pixelGridCanvas with the pixelgrid /** Fills the pixelGridCanvas with the pixelgrid

View File

@ -1,8 +0,0 @@
Input <- Startup, LayerList, TopMenuModule: Could be resolved by using custom events
FileManager <- LayerList, File, Startup, EditorState, ColorModule
Startup <- ColorModule, ToolManager, LayerList, EditorState, Layer(++)
TopMenuModule -> Startup