mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Fixed pixel grid bug
This commit is contained in:
parent
05beab6929
commit
55f514b92e
@ -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");
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user