mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Finished refactoring History, added Startup IIFE

This commit is contained in:
unsettledgames 2021-07-15 17:10:07 +02:00
parent 4f4091ebb3
commit 7c80e8f342
12 changed files with 92 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js/ColorModule.js
View File

@ -3,7 +3,7 @@
*/
const ColorModule = (() => {
// Array containing the colours of the current palette
const currentPalette = [];
let currentPalette = [];
// Reference to the HTML palette
const coloursList = document.getElementById("palette-list");
@ -41,7 +41,7 @@ const ColorModule = (() => {
newColor.a = 255;
//save undo state
new HistoryStates.EditColor(hexElementValue.toLowerCase(), Color.rgbToHex(oldColor));
new HistoryState().EditColor(hexElementValue.toLowerCase(), Color.rgbToHex(oldColor));
//get the currently selected color
const currentlyEditedColor = document.getElementsByClassName('jscolor-active')[0];
@ -138,7 +138,7 @@ const ColorModule = (() => {
currentLayer.context.fillStyle = '#' + newColor;
//add history state
new HistoryStates.AddColor(addedColor.firstElementChild.jscolor.toString());
new HistoryState().AddColor(addedColor.firstElementChild.jscolor.toString());
//show color picker
addedColor.firstElementChild.jscolor.show();
@ -338,11 +338,20 @@ const ColorModule = (() => {
currentLayer.context.putImageData(tempImage,0,0);
}
function getCurrentPalette() {
return currentPalette;
}
function resetPalette() {
currentPalette = [];
}
return {
currentPalette,
getCurrentPalette,
addColor,
deleteColor,
replaceAllOfColor,
addToSimplePalette
addToSimplePalette,
resetPalette
}
})();

164
js/History.js
View File

@ -20,6 +20,8 @@ const History = (() => {
//rename to add undo state
function saveHistoryState (state) {
console.log("saved history");
console.log(state);
//get current canvas data and save to undoStates array
undoStates.push(state);
@ -36,49 +38,35 @@ const History = (() => {
}
function undo () {
//if there are any states saved to undo
if (undoStates.length > 0) {
document.getElementById('redo-button').classList.remove('disabled');
// get state
var undoState = undoStates[undoStates.length-1];
// add it to redo states
redoStates.push(undoState);
//remove from the undo list
undoStates.splice(undoStates.length-1,1);
//restore the state
undoState.undo();
//if theres none left to undo, disable the option
if (undoStates.length == 0)
document.getElementById('undo-button').classList.add('disabled');
}
undoOrRedo('undo');
}
function redo () {
console.log("Redo");
if (redoStates.length > 0) {
undoOrRedo('redo');
}
//enable undo button
document.getElementById('undo-button').classList.remove('disabled');
function undoOrRedo(mode) {
if (redoStates.length <= 0 && mode == 'redo') return;
if (undoStates.length <= 0 && mode == 'undo') return;
//get state
var redoState = redoStates[redoStates.length-1];
// Add it to undo states
undoStates.push(redoState);
// Enable button
document.getElementById(mode + '-button').classList.remove('disabled');
//remove from redo array (do this before restoring the state, else the flatten state will break)
redoStates.splice(redoStates.length-1,1);
//restore the state
redoState.redo();
//if theres none left to redo, disable the option
if (redoStates.length == 0)
document.getElementById('redo-button').classList.add('disabled');
if (mode == 'undo') {
const undoState = undoStates.pop();
redoStates.push(undoState);
undoState.undo();
}
else {
const redoState = redoStates.pop();
undoStates.push(redoState);
redoState.redo();
}
// if theres none left, disable the option
if (redoStates.length == 0) document.getElementById('redo-button').classList.add('disabled');
if (undoStates.length == 0) document.getElementById('undo-button').classList.add('disabled');
}
return {
@ -88,8 +76,12 @@ const History = (() => {
}
})();
const HistoryStates = {
ResizeSprite: function(xRatio, yRatio, algo, oldData) {
class HistoryState {
constructor() {
History.saveHistoryState(this);
}
ResizeSprite (xRatio, yRatio, algo, oldData) {
this.xRatio = xRatio;
this.yRatio = yRatio;
this.algo = algo;
@ -115,11 +107,9 @@ const HistoryStates = {
currentAlgo = algo;
resizeSprite(null, [this.xRatio, this.yRatio]);
};
History.saveHistoryState(this);
},
}
ResizeCanvas: function (newSize, oldSize, imageDatas, trim) {
ResizeCanvas (newSize, oldSize, imageDatas, trim) {
this.oldSize = oldSize;
this.newSize = newSize;
this.imageDatas = imageDatas;
@ -146,11 +136,9 @@ const HistoryStates = {
trimCanvas(null, false);
}
};
}
History.saveHistoryState(this);
},
FlattenVisible: function(flattened) {
FlattenVisible(flattened) {
this.nFlattened = flattened;
this.undo = function() {
@ -164,11 +152,9 @@ const HistoryStates = {
redo();
}
};
}
History.saveHistoryState(this);
},
FlattenTwoVisibles: function(belowImageData, afterAbove, layerIndex, aboveLayer, belowLayer) {
FlattenTwoVisibles(belowImageData, afterAbove, layerIndex, aboveLayer, belowLayer) {
this.aboveLayer = aboveLayer;
this.belowLayer = belowLayer;
this.belowImageData = belowImageData;
@ -192,11 +178,9 @@ const HistoryStates = {
aboveLayer.menuEntry.remove();
layers.splice(layers.indexOf(aboveLayer), 1);
};
}
History.saveHistoryState(this);
},
FlattenAll: function(nFlattened) {
FlattenAll(nFlattened) {
this.nFlattened = nFlattened;
this.undo = function() {
@ -210,11 +194,9 @@ const HistoryStates = {
redo();
}
};
}
History.saveHistoryState(this);
},
MergeLayer: function(aboveIndex, aboveLayer, belowData, belowLayer) {
MergeLayer(aboveIndex, aboveLayer, belowData, belowLayer) {
this.aboveIndex = aboveIndex;
this.belowData = belowData;
this.aboveLayer = aboveLayer;
@ -235,11 +217,9 @@ const HistoryStates = {
aboveLayer.selectLayer();
merge(false);
};
}
History.saveHistoryState(this);
},
RenameLayer: function(oldName, newName, layer) {
RenameLayer(oldName, newName, layer) {
this.edited = layer;
this.oldName = oldName;
this.newName = newName;
@ -251,11 +231,9 @@ const HistoryStates = {
this.redo = function() {
layer.menuEntry.getElementsByTagName("p")[0].innerHTML = newName;
};
}
History.saveHistoryState(this);
},
DuplicateLayer: function(addedLayer, copiedLayer) {
DuplicateLayer(addedLayer, copiedLayer) {
this.addedLayer = addedLayer;
this.copiedLayer = copiedLayer;
@ -268,11 +246,9 @@ const HistoryStates = {
copiedLayer.selectLayer();
duplicateLayer(null, false);
};
}
History.saveHistoryState(this);
},
DeleteLayer: function(layerData, before, index) {
DeleteLayer(layerData, before, index) {
this.deleted = layerData;
this.before = before;
this.index = index;
@ -292,11 +268,9 @@ const HistoryStates = {
this.deleted.selectLayer();
deleteLayer(false);
};
}
History.saveHistoryState(this);
},
MoveTwoLayers: function(layer, oldIndex, newIndex) {
MoveTwoLayers(layer, oldIndex, newIndex) {
this.layer = layer;
this.oldIndex = oldIndex;
this.newIndex = newIndex;
@ -308,11 +282,9 @@ const HistoryStates = {
this.redo = function() {
layer.canvas.style.zIndex = newIndex;
};
}
History.saveHistoryState(this);
},
MoveLayer: function(afterToDrop, toDrop, staticc, nMoved) {
MoveLayer(afterToDrop, toDrop, staticc, nMoved) {
this.beforeToDrop = afterToDrop;
this.toDrop = toDrop;
@ -334,11 +306,9 @@ const HistoryStates = {
this.redo = function() {
moveLayers(toDrop.menuEntry.id, staticc.menuEntry.id, true);
};
}
History.saveHistoryState(this);
},
AddLayer: function(layerData, index) {
AddLayer(layerData, index) {
this.added = layerData;
this.index = index;
@ -361,12 +331,10 @@ const HistoryStates = {
layerList.prepend(this.added.menuEntry);
layers.splice(this.index, 0, this.added);
};
History.saveHistoryState(this);
},
}
//prototype for undoing canvas changes
EditCanvas: function() {
EditCanvas() {
this.canvasState = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
this.layerID = currentLayer.id;
@ -390,13 +358,10 @@ const HistoryStates = {
stateLayer.updateLayerPreview();
};
//add self to undo array
History.saveHistoryState(this);
},
}
//prototype for undoing added colors
AddColor: function(colorValue) {
AddColor(colorValue) {
this.colorValue = colorValue;
this.undo = function () {
@ -406,13 +371,10 @@ const HistoryStates = {
this.redo = function () {
ColorModule.addColor(this.colorValue);
};
//add self to undo array
History.saveHistoryState(this);
},
}
//prototype for undoing deleted colors
DeleteColor: function(colorValue) {
DeleteColor(colorValue) {
this.colorValue = colorValue;
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
@ -433,13 +395,10 @@ const HistoryStates = {
this.canvas = currentCanvas;
};
//add self to undo array
History.saveHistoryState(this);
},
}
//prototype for undoing colors edits
EditColor: function(newColorValue, oldColorValue) {
EditColor(newColorValue, oldColorValue) {
this.newColorValue = newColorValue;
this.oldColorValue = oldColorValue;
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
@ -477,8 +436,5 @@ const HistoryStates = {
this.canvas = currentCanvas;
};
//add self to undo array
History.saveHistoryState(this);
}
}

3
js/Startup.js Normal file
View File

@ -0,0 +1,3 @@
const Startup = (() => {
})();

2
js/_fill.js
View File

@ -22,7 +22,7 @@ function fill(cursorLocation) {
}
//save history state
new HistoryStates.EditCanvas();
new HistoryState().EditCanvas();
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
//console.log('filling at '+ Math.floor(cursorLocation[0]/zoom) + ','+ Math.floor(cursorLocation[1]/zoom));

2
js/_jscolor.js
View File

@ -551,7 +551,7 @@ if (!window.jscolor) { window.jscolor = (function () {
//if they clicked on the delete button [lospec]
if (e.target.className == 'delete-color-button') {
//saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: canvas.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
new HistoryStates.DeleteColor(jsc.picker.owner.toString());
new HistoryState().DeleteColor(jsc.picker.owner.toString());
ColorModule.deleteColor(jsc.picker.owner.styleElement);
}

14
js/_layer.js
View File

@ -189,7 +189,7 @@ class Layer {
let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
this.name = name;
new HistoryStates.RenameLayer(oldLayerName, name, currentLayer);
new HistoryState().RenameLayer(oldLayerName, name, currentLayer);
oldLayerName = null;
}
}
@ -310,7 +310,7 @@ function flatten(onlyVisible) {
merge();
}
new HistoryStates.FlattenAll(nToFlatten);
new HistoryState().FlattenAll(nToFlatten);
}
else {
// Getting all the visible layers
@ -332,7 +332,7 @@ function flatten(onlyVisible) {
for (let i=0; i<visibleLayers.length - 1; i++) {
nToFlatten++;
console.log(visibleLayers[i].menuEntry.nextElementSibling);
new HistoryStates.FlattenTwoVisibles(
new HistoryState().FlattenTwoVisibles(
visibleLayers[i + 1].context.getImageData(0, 0, visibleLayers[i].canvasSize[0], visibleLayers[i].canvasSize[1]),
visibleLayers[i].menuEntry.nextElementSibling,
layers.indexOf(visibleLayers[i]),
@ -347,7 +347,7 @@ function flatten(onlyVisible) {
layers.splice(layers.indexOf(visibleLayers[i]), 1);
}
new HistoryStates.FlattenVisible(nToFlatten);
new HistoryState().FlattenVisible(nToFlatten);
// Updating the layer preview
currentLayer.updateLayerPreview();
}
@ -410,7 +410,7 @@ function deleteLayer(saveHistory = true) {
layers.splice(layerIndex, 1);
if (saveHistory) {
new HistoryStates.DeleteLayer(toDelete, previousSibling, layerIndex);
new HistoryState().DeleteLayer(toDelete, previousSibling, layerIndex);
}
}
@ -463,7 +463,7 @@ function duplicateLayer(event, saveHistory = true) {
newLayer.updateLayerPreview();
// Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
if (saveHistory) {
new HistoryStates.DuplicateLayer(newLayer, currentLayer);
new HistoryState().DuplicateLayer(newLayer, currentLayer);
}
}
@ -556,7 +556,7 @@ function addLayer(id, saveHistory = true) {
}
// Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
if (saveHistory) {
new HistoryStates.AddLayer(newLayer, index);
new HistoryState().AddLayer(newLayer, index);
}
return newLayer;

2
js/_mouseEvents.js
View File

@ -23,7 +23,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
currentTool = tool.eyedropper;
else if (mouseEvent.target.className == 'drawingCanvas' &&
(currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle' || currentTool.name == 'ellipse' || currentTool.name === 'line'))
new HistoryStates.EditCanvas();
new HistoryState().EditCanvas();
else if (currentTool.name == 'moveselection') {
if (!cursorInSelectedArea() &&
((mouseEvent.target.id == 'canvas-view') || mouseEvent.target.className == 'drawingCanvas')) {

2
js/_move.js
View File

@ -106,5 +106,5 @@ function endSelection() {
currentLayer.updateLayerPreview();
// Saving the history
new HistoryStates.EditCanvas();
new HistoryState().EditCanvas();
}

3
js/_newPixel.js
View File

@ -8,7 +8,7 @@ let firstPixel = true;
*/
function newPixel (width, height, fileContent = null) {
// The palette is empty, at the beginning
ColorModule.currentPalette.length = 0;
ColorModule.resetPalette();
// If this is the first pixel I'm creating since the app has started
if (firstPixel) {
@ -99,7 +99,6 @@ function newPixel (width, height, fileContent = null) {
// If the user selected a palette and isn't opening a file, I load the selected palette
if (selectedPalette != 'Choose a palette...' && fileContent == null) {
console.log('HELO', selectedPalette, palettes[selectedPalette])
//if this palette isnt the one specified in the url, then reset the url
if (!palettes[selectedPalette].specified)
history.pushState(null, null, '/pixel-editor');

2
js/_rectSelect.js
View File

@ -10,7 +10,7 @@ let endY;
*/
function startRectSelection(mouseEvent) {
// Saving the canvas
new HistoryStates.EditCanvas();
new HistoryState().EditCanvas();
// Putting the vfx layer on top of everything
VFXCanvas.style.zIndex = MAX_Z_INDEX;

2
js/_resizeCanvas.js
View File

@ -116,7 +116,7 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
// Saving the history only if I'm not already undoing or redoing
if (saveHistory && event != null) {
// Saving history
new HistoryStates.ResizeCanvas(
new HistoryState().ResizeCanvas(
{x: parseInt(layers[0].canvasSize[0]) + rcBorders.left + rcBorders.right,
y: parseInt(layers[0].canvasSize[1]) + rcBorders.top + rcBorders.bottom},

2
js/_resizeSprite.js
View File

@ -121,7 +121,7 @@ function resizeSprite(event, ratio) {
// Copying the image data
imageDatasCopy = rsImageDatas.slice();
// Saving the history
new HistoryStates.ResizeSprite(newWidth / oldWidth, newHeight / oldHeight, currentAlgo, imageDatasCopy);
new HistoryState().ResizeSprite(newWidth / oldWidth, newHeight / oldHeight, currentAlgo, imageDatasCopy);
}
// Resizing the canvas