mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Removed all global variables, worked on File class and put canvas resizing functions in File

Browse Source
This commit is contained in:
unsettledgames 2021-12-06 17:37:43 +01:00
parent d972f9c530
commit b2f5521750
32 changed files with 668 additions and 704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
js/ColorModule.js
View File

@ -318,7 +318,7 @@ const ColorModule = (() => {
if (typeof newColor === 'string') newColor = Color.hexToRgb(newColor); if (typeof newColor === 'string') newColor = Color.hexToRgb(newColor);
//create temporary image from canvas to search through //create temporary image from canvas to search through
var tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var tempImage = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
//loop through all pixels //loop through all pixels
for (var i=0;i<tempImage.data.length;i+=4) { for (var i=0;i<tempImage.data.length;i+=4) {
@ -332,7 +332,7 @@ const ColorModule = (() => {
} }
//put temp image back onto canvas //put temp image back onto canvas
currentLayer.context.putImageData(tempImage,0,0); currFile.currentLayer.context.putImageData(tempImage,0,0);
} }
function getCurrentPalette() { function getCurrentPalette() {
@ -395,9 +395,10 @@ const ColorModule = (() => {
//create array out of colors object //create array out of colors object
let colorPaletteArray = []; let colorPaletteArray = [];
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (layers[i].menuEntry != null) { if (currFile.layers[i].hasCanvas()) {
let imageData = layers[i].context.getImageData(0, 0, layers[i].canvasSize[0], layers[i].canvasSize[1]).data; let imageData = currFile.layers[i].context.getImageData(
0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
let dataLength = imageData.length; let dataLength = imageData.length;
for (let j=0; j<dataLength; j += 4) { for (let j=0; j<dataLength; j += 4) {
@ -429,9 +430,9 @@ const ColorModule = (() => {
if (refLayer) if (refLayer)
color = refLayer.context.fillStyle; color = refLayer.context.fillStyle;
for (let i=0; i<layers.length - 1; i++) { for (let i=0; i<currFile.layers.length - 1; i++) {
layers[i].context.fillStyle = color; currFile.layers[i].context.fillStyle = color;
layers[i].context.strokeStyle = color; currFile.layers[i].context.strokeStyle = color;
} }
} }

6
js/EditorState.js
View File

@ -21,7 +21,7 @@ const EditorState = (() => {
document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode'; document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode';
//turn pixel grid off //turn pixel grid off
pixelGrid.togglePixelGrid('off'); currFile.pixelGrid.togglePixelGrid('off');
} }
//switch to basic mode //switch to basic mode
else { else {
@ -32,7 +32,7 @@ const EditorState = (() => {
} }
// Selecting the current layer // Selecting the current layer
currentLayer.selectLayer(); currFile.currentLayer.selectLayer();
// Flatten the layers // Flatten the layers
LayerList.flatten(true); LayerList.flatten(true);
} }
@ -47,7 +47,7 @@ const EditorState = (() => {
pixelEditorMode = 'Basic'; pixelEditorMode = 'Basic';
document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode'; document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode';
pixelGrid.togglePixelGrid('on'); currFile.pixelGrid.togglePixelGrid('on');
} }
} }

325
js/File.js
View File

@ -1,12 +1,319 @@
// A file has layers class File {
// It probably contains the LayerList, which should include the layers array // Canvas, canvas state
// A file contains sprite scaling and canvas resizing canvasSize = [];
zoom = 7;
canvasView = document.getElementById("canvas-view");
/* // Layers
let canvasSize layers = [];
let canvasView currentLayer = undefined;
let layerList VFXLayer = undefined;
TMPLayer = undefined;
pixelGrid = undefined;
checkerBoard = undefined
resizeCanvas() // Canvas resize attributes
scaleSprite() // Resize canvas pop up window
resizeCanvasContainer = document.getElementById("resize-canvas");
// Start pivot
rcPivot = "middle";
// Selected pivot button
currentPivotObject = undefined;
// Border offsets
rcBorders = {left: 0, right: 0, top: 0, bottom: 0};
// Sprite scaling attributes
openResizeCanvasWindow() {
// Initializes the inputs
this.initResizeCanvasInputs();
Dialogue.showDialogue('resize-canvas');
}
initResizeCanvasInputs() {
// Getting the pivot buttons
let buttons = document.getElementsByClassName("pivot-button");
// Adding the event handlers for them
for (let i=0; i<buttons.length; i++) {
Events.on("click", buttons[i], this.changePivot.bind(this));
if (buttons[i].getAttribute("value").includes("middle")) {
this.currentPivotObject = buttons[i];
}
}
document.getElementById("rc-width").value = currFile.canvasSize[0];
document.getElementById("rc-height").value = currFile.canvasSize[1];
Events.on("change", "rc-border-left", this.rcChangedBorder.bind(this));
Events.on("change", "rc-border-right", this.rcChangedBorder.bind(this));
Events.on("change", "rc-border-top", this.rcChangedBorder.bind(this));
Events.on("change", "rc-border-bottom", this.rcChangedBorder.bind(this));
Events.on("change", "rc-width", this.rcChangedSize.bind(this));
Events.on("change", "rc-height", this.rcChangedSize.bind(this));
Events.on("click", "resize-canvas-confirm", this.resizeCanvas.bind(this));
}
/** Fired when a border offset is changed: it updates the width and height
*/ */
rcChangedBorder() {
this.rcUpdateBorders();
document.getElementById("rc-width").value = parseInt(currFile.canvasSize[0]) +
this.rcBorders.left + this.rcBorders.right;
document.getElementById("rc-height").value = parseInt(currFile.canvasSize[1]) +
this.rcBorders.top + this.rcBorders.bottom;
}
/** Fired when width or height are changed: updates the border offsets
*/
rcChangedSize() {
let widthOffset = Math.abs(document.getElementById("rc-width").value) - currFile.canvasSize[0];
let heightOffset = Math.abs(document.getElementById("rc-height").value) - currFile.canvasSize[1];
let left = Math.round(widthOffset / 2);
let right = widthOffset - left;
let top = Math.round(heightOffset / 2);
let bottom = heightOffset - top;
document.getElementById("rc-border-left").value = left;
document.getElementById("rc-border-right").value = right;
document.getElementById("rc-border-top").value = top;
document.getElementById("rc-border-bottom").value = bottom;
this.rcBorders.left = left;
this.rcBorders.right = right;
this.rcBorders.top = top;
this.rcBorders.bottom = bottom;
}
/** Resizes the canvas
*
* @param {*} event The event that triggered the canvas resizing
* @param {*} size The new size of the picture
* @param {*} customData Used when ctrl+z ing
* @param {*} saveHistory Should I save the history? You shouldn't if you're undoing
*/
resizeCanvas(event, size, customData, saveHistory = true) {
console.log("resizing");
let imageDatas = [];
let leftOffset = 0;
let topOffset = 0;
let copiedDataIndex = 0;
// If I'm undoing and I'm not trimming, I manually put the values in the window
if (size != null && customData == null) {
document.getElementById("rc-width").value = size.x;
document.getElementById("rc-height").value = size.y;
this.rcChangedSize();
}
this.rcUpdateBorders();
// Save all imageDatas
for (let i=0; i<currFile.layers.length; i++) {
if (currFile.layers[i].hasCanvas()) {
imageDatas.push(currFile.layers[i].context.getImageData(
0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
);
}
}
// Saving the history only if I'm not already undoing or redoing
if (saveHistory && event != null) {
// Saving history
new HistoryState().ResizeCanvas(
{x: parseInt(currFile.canvasSize[0]) + this.rcBorders.left + this.rcBorders.right,
y: parseInt(currFile.canvasSize[1]) + this.rcBorders.top + this.rcBorders.bottom},
{x: currFile.canvasSize[0],
y: currFile.canvasSize[1]},
imageDatas.slice(), customData != null && saveHistory
);
}
currFile.canvasSize[0] = parseInt(currFile.canvasSize[0]) +
this.rcBorders.left + this.rcBorders.right;
currFile.canvasSize[1] = parseInt(currFile.canvasSize[1]) +
this.rcBorders.top + this.rcBorders.bottom;
// Resize the canvases
for (let i=0; i<currFile.layers.length; i++) {
currFile.layers[i].canvas.width = currFile.canvasSize[0];
currFile.layers[i].canvas.height = currFile.canvasSize[1];
currFile.layers[i].resize();
}
// Regenerate the checkerboard
currFile.checkerBoard.fillCheckerboard();
currFile.pixelGrid.fillPixelGrid();
// Put the imageDatas in the right position
switch (this.rcPivot)
{
case 'topleft':
leftOffset = 0;
topOffset = 0;
break;
case 'top':
leftOffset = (this.rcBorders.left + this.rcBorders.right) / 2;
topOffset = 0;
break;
case 'topright':
leftOffset = this.rcBorders.left + this.rcBorders.right;
topOffset = 0;
break;
case 'left':
leftOffset = 0;
topOffset = (this.rcBorders.top + this.rcBorders.bottom) / 2;
break;
case 'middle':
leftOffset = (this.rcBorders.left + this.rcBorders.right) / 2;
topOffset = (this.rcBorders.top + this.rcBorders.bottom) / 2;
break;
case 'right':
leftOffset = this.rcBorders.left + this.rcBorders.right;
topOffset = (this.rcBorders.top + this.rcBorders.bottom) / 2;
break;
case 'bottomleft':
leftOffset = 0;
topOffset = this.rcBorders.top + this.rcBorders.bottom;
break;
case 'bottom':
leftOffset = (this.rcBorders.left + this.rcBorders.right) / 2;
topOffset = this.rcBorders.top + this.rcBorders.bottom;
break;
case 'bottomright':
leftOffset = this.rcBorders.left + this.rcBorders.right;
topOffset = this.rcBorders.top + this.rcBorders.bottom;
break;
default:
break;
}
// Putting all the data for each layer with the right offsets (decided by the pivot)
for (let i=0; i<currFile.layers.length; i++) {
if (currFile.layers[i].hasCanvas()) {
if (customData == undefined) {
currFile.layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
}
else {
currFile.layers[i].context.putImageData(customData[copiedDataIndex], 0, 0);
}
currFile.layers[i].updateLayerPreview();
copiedDataIndex++;
}
}
Dialogue.closeDialogue();
}
/** Trims the canvas so tat the sprite is perfectly contained in it
*
* @param {*} event
* @param {*} saveHistory Should I save the history? You shouldn't if you're undoing
*/
trimCanvas(event, saveHistory) {
let minY = Infinity;
let minX = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
let tmp;
let imageDatas = [];
let historySave = saveHistory == null;
let prevPivot = rcPivot;
this.rcPivot = "topleft";
// Computing the min and max coordinates in which there's a non empty pixel
for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
let imageData = currFile.layers[i].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
let pixelPosition;
for (let i=imageData.data.length - 1; i>= 0; i-=4) {
if (!Util.isPixelEmpty(
[imageData.data[i - 3], imageData.data[i - 2],
-imageData.data[i - 1], imageData.data[i]])) {
pixelPosition = getPixelPosition(i);
// max x
if (pixelPosition[0] > maxX) {
maxX = pixelPosition[0];
}
// min x
if (pixelPosition[0] < minX) {
minX = pixelPosition[0];
}
// max y
if (pixelPosition[1] > maxY) {
maxY = pixelPosition[1];
}
// min y
if (pixelPosition[1] < minY) {
minY = pixelPosition[1];
}
}
}
}
tmp = minY;
minY = maxY;
maxY = tmp;
minY = currFile.canvasSize[1] - minY;
maxY = currFile.canvasSize[1] - maxY;
// Setting the borders coherently with the values I've just computed
this.rcBorders.right = (maxX - currFile.canvasSize[0]) + 1;
this.rcBorders.left = -minX;
this.rcBorders.top = maxY - currFile.canvasSize[1] + 1;
this.rcBorders.bottom = -minY;
// Saving the data
for (let i=0; i<currFile.layers.length; i++) {
if (currFile.layers[i].hasCanvas()) {
imageDatas.push(currFile.layers[i].context.getImageData(minX - 1, currFile.layers[i].canvasSize[1] - maxY, maxX-minX + 1, maxY-minY + 1));
}
}
//console.log("sx: " + borders.left + "dx: " + borders.right + "top: " + borders.top + "btm: " + borders.bottom);
document.getElementById("rc-border-left").value = this.rcBorders.left;
document.getElementById("rc-border-right").value = this.rcBorders.right;
document.getElementById("rc-border-top").value = this.rcBorders.top;
document.getElementById("rc-border-bottom").value = this.rcBorders.bottom;
// Resizing the canvas with the decided border offsets
this.resizeCanvas(null, null, imageDatas.slice(), historySave);
// Resetting the previous pivot
this.rcPivot = prevPivot;
}
rcUpdateBorders() {
// Getting input
this.rcBorders.left = document.getElementById("rc-border-left").value;
this.rcBorders.right = document.getElementById("rc-border-right").value;
this.rcBorders.top = document.getElementById("rc-border-top").value;
this.rcBorders.bottom = document.getElementById("rc-border-bottom").value;
// Validating input
this.rcBorders.left == "" ? this.rcBorders.left = 0 : this.rcBorders.left = Math.round(parseInt(this.rcBorders.left));
this.rcBorders.right == "" ? this.rcBorders.right = 0 : this.rcBorders.right = Math.round(parseInt(this.rcBorders.right));
this.rcBorders.top == "" ? this.rcBorders.top = 0 : this.rcBorders.top = Math.round(parseInt(this.rcBorders.top));
this.rcBorders.bottom == "" ? this.rcBorders.bottom = 0 : this.rcBorders.bottom = Math.round(parseInt(this.rcBorders.bottom));
}
changePivot(event) {
this.rcPivot = event.target.getAttribute("value");
// Setting the selected class
this.currentPivotObject.classList.remove("rc-selected-pivot");
this.currentPivotObject = event.target;
this.currentPivotObject.classList.add("rc-selected-pivot");
}
}
let currFile = new File();

30
js/FileManager.js
View File

@ -13,9 +13,9 @@ const FileManager = (() => {
if (selectedPalette != 'Choose a palette...'){ if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].abbreviation; var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]; var fileName = 'pixel-'+paletteAbbreviation+'-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1];
} else { } else {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]; var fileName = 'pixel-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1];
selectedPalette = 'none'; selectedPalette = 'none';
} }
@ -33,7 +33,7 @@ const FileManager = (() => {
var paletteAbbreviation = palettes[selectedPalette].name; var paletteAbbreviation = palettes[selectedPalette].name;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png'; var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
} else { } else {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png'; var fileName = 'pixel-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1]+'.png';
selectedPalette = 'none'; selectedPalette = 'none';
} }
@ -58,7 +58,7 @@ const FileManager = (() => {
linkHolder.click(); linkHolder.click();
if (typeof ga !== 'undefined') if (typeof ga !== 'undefined')
ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/ ga('send', 'event', 'Pixel Editor Save', selectedPalette, currFile.canvasSize[0]+'/'+currFile.canvasSize[1]); /*global ga*/
} }
function exportProject() { function exportProject() {
@ -70,20 +70,20 @@ const FileManager = (() => {
// Creating a tmp canvas to flatten everything // Creating a tmp canvas to flatten everything
var exportCanvas = document.createElement("canvas"); var exportCanvas = document.createElement("canvas");
var emptyCanvas = document.createElement("canvas"); var emptyCanvas = document.createElement("canvas");
var layersCopy = layers.slice(); var layersCopy = currFile.layers.slice();
exportCanvas.width = layers[0].canvasSize[0]; exportCanvas.width = currFile.canvasSize[0];
exportCanvas.height = layers[0].canvasSize[1]; exportCanvas.height = currFile.canvasSize[1];
emptyCanvas.width = layers[0].canvasSize[0]; emptyCanvas.width = currFile.canvasSize[0];
emptyCanvas.height = layers[0].canvasSize[1]; emptyCanvas.height = currFile.canvasSize[1];
// Sorting the layers by z index // Sorting the layers by z index
layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1); layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
// Merging every layer on the export canvas // Merging every layer on the export canvas
for (let i=0; i<layersCopy.length; i++) { for (let i=0; i<layersCopy.length; i++) {
if (layersCopy[i].menuEntry != null && layersCopy[i].isVisible) { if (layersCopy[i].hasCanvas() && layersCopy[i].isVisible) {
LayerList.mergeLayers(exportCanvas.getContext('2d'), layersCopy[i].context); LayerList.mergeLayers(exportCanvas.getContext('2d'), layersCopy[i].context);
} }
// I'm not going to find out why the layer ordering screws up if you don't copy // I'm not going to find out why the layer ordering screws up if you don't copy
@ -105,7 +105,7 @@ const FileManager = (() => {
//track google event //track google event
if (typeof ga !== 'undefined') if (typeof ga !== 'undefined')
ga('send', 'event', 'Pixel Editor Export', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/ ga('send', 'event', 'Pixel Editor Export', selectedPalette, currFile.canvasSize[0]+'/'+currFile.canvasSize[1]); /*global ga*/
} }
} }
@ -157,7 +157,7 @@ const FileManager = (() => {
EditorState.switchMode('Advanced'); EditorState.switchMode('Advanced');
//draw the image onto the canvas //draw the image onto the canvas
currentLayer.context.drawImage(img, 0, 0); currFile.currentLayer.context.drawImage(img, 0, 0);
ColorModule.createPaletteFromLayers(); ColorModule.createPaletteFromLayers();
//track google event //track google event
@ -195,11 +195,11 @@ const FileManager = (() => {
// use a dictionary // use a dictionary
let dictionary = {}; let dictionary = {};
// sorting layers by increasing z-index // sorting layers by increasing z-index
let layersCopy = layers.slice(); let layersCopy = currFile.layers.slice();
layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1); layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
// save canvas size // save canvas size
dictionary['canvasWidth'] = currentLayer.canvasSize[0]; dictionary['canvasWidth'] = currFile.canvasSize[0];
dictionary['canvasHeight'] = currentLayer.canvasSize[1]; dictionary['canvasHeight'] = currFile.canvasSize[1];
// save editor mode // save editor mode
dictionary['editorMode'] = EditorState.getCurrentMode(); dictionary['editorMode'] = EditorState.getCurrentMode();
// save palette // save palette

76
js/History.js
View File

@ -108,11 +108,11 @@ class HistoryState {
resizeSprite(null, [1 / this.xRatio, 1 / this.yRatio]); resizeSprite(null, [1 / this.xRatio, 1 / this.yRatio]);
// Also putting the old data // Also putting the old data
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (layers[i].menuEntry != null) { if (currFile.layers[i].hasCanvas()) {
layers[i].context.putImageData(this.oldData[layerIndex], 0, 0); currFile.layers[i].context.putImageData(this.oldData[layerIndex], 0, 0);
layerIndex++; layerIndex++;
layers[i].updateLayerPreview(); currFile.layers[i].updateLayerPreview();
} }
} }
}; };
@ -132,11 +132,11 @@ class HistoryState {
this.undo = function() { this.undo = function() {
let dataIndex = 0; let dataIndex = 0;
// Resizing the canvas // Resizing the canvas
resizeCanvas(null, oldSize, null, false); currFile.resizeCanvas(null, oldSize, null, false);
// Putting the image datas // Putting the image datas
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (layers[i].menuEntry != null) { if (currFile.layers[i].hasCanvas()) {
layers[i].context.putImageData(this.imageDatas[dataIndex], 0, 0); currFile.layers[i].context.putImageData(this.imageDatas[dataIndex], 0, 0);
dataIndex++; dataIndex++;
} }
} }
@ -144,10 +144,10 @@ class HistoryState {
this.redo = function() { this.redo = function() {
if (!this.trim) { if (!this.trim) {
resizeCanvas(null, newSize, null, false); currFile.resizeCanvas(null, newSize, null, false);
} }
else { else {
trimCanvas(null, false); currFile.trimCanvas(null, false);
} }
}; };
} }
@ -174,14 +174,14 @@ class HistoryState {
this.belowImageData = belowImageData; this.belowImageData = belowImageData;
this.undo = function() { this.undo = function() {
canvasView.append(aboveLayer.canvas); currFile.canvasView.append(aboveLayer.canvas);
LayerList.getLayerListEntries().insertBefore(aboveLayer.menuEntry, afterAbove); LayerList.getLayerListEntries().insertBefore(aboveLayer.menuEntry, afterAbove);
belowLayer.context.clearRect(0, 0, belowLayer.canvasSize[0], belowLayer.canvasSize[1]); belowLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
belowLayer.context.putImageData(this.belowImageData, 0, 0); belowLayer.context.putImageData(this.belowImageData, 0, 0);
belowLayer.updateLayerPreview(); belowLayer.updateLayerPreview();
layers.splice(layerIndex, 0, aboveLayer); currFile.layers.splice(layerIndex, 0, aboveLayer);
}; };
this.redo = function() { this.redo = function() {
@ -190,7 +190,7 @@ class HistoryState {
// Deleting the above layer // Deleting the above layer
aboveLayer.canvas.remove(); aboveLayer.canvas.remove();
aboveLayer.menuEntry.remove(); aboveLayer.menuEntry.remove();
layers.splice(layers.indexOf(aboveLayer), 1); currFile.layers.splice(currFile.layers.indexOf(aboveLayer), 1);
}; };
} }
@ -218,13 +218,13 @@ class HistoryState {
this.undo = function() { this.undo = function() {
LayerList.getLayerListEntries().insertBefore(this.aboveLayer.menuEntry, this.belowLayer.menuEntry); LayerList.getLayerListEntries().insertBefore(this.aboveLayer.menuEntry, this.belowLayer.menuEntry);
canvasView.append(this.aboveLayer.canvas); currFile.canvasView.append(this.aboveLayer.canvas);
belowLayer.context.clearRect(0, 0, this.belowLayer.canvasSize[0], this.belowLayer.canvasSize[1]); belowLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
belowLayer.context.putImageData(this.belowData, 0, 0); belowLayer.context.putImageData(this.belowData, 0, 0);
belowLayer.updateLayerPreview(); belowLayer.updateLayerPreview();
layers.splice(this.aboveIndex, 0, this.aboveLayer); currFile.layers.splice(this.aboveIndex, 0, this.aboveLayer);
}; };
this.redo = function() { this.redo = function() {
@ -268,14 +268,14 @@ class HistoryState {
this.index = index; this.index = index;
this.undo = function() { this.undo = function() {
canvasView.append(this.deleted.canvas); currFile.canvasView.append(this.deleted.canvas);
if (this.before != null) { if (this.before != null) {
LayerList.getLayerListEntries().insertBefore(this.deleted.menuEntry, this.before); LayerList.getLayerListEntries().insertBefore(this.deleted.menuEntry, this.before);
} }
else { else {
LayerList.getLayerListEntries().prepend(this.deleted.menuEntry); LayerList.getLayerListEntries().prepend(this.deleted.menuEntry);
} }
layers.splice(this.index, 0, this.deleted); currFile.layers.splice(this.index, 0, this.deleted);
}; };
this.redo = function() { this.redo = function() {
@ -327,21 +327,21 @@ class HistoryState {
this.index = index; this.index = index;
this.undo = function() { this.undo = function() {
if (layers.length - nAppLayers > this.index + 1) { if (currFile.layers.length - nAppLayers > this.index + 1) {
layers[this.index + 1].selectLayer(); currFile.layers[this.index + 1].selectLayer();
} }
else { else {
layers[this.index - 1].selectLayer(); currFile.layers[this.index - 1].selectLayer();
} }
this.added.canvas.remove(); this.added.canvas.remove();
this.added.menuEntry.remove(); this.added.menuEntry.remove();
layers.splice(index, 1); currFile.layers.splice(index, 1);
}; };
this.redo = function() { this.redo = function() {
canvasView.append(this.added.canvas); currFile.canvasView.append(this.added.canvas);
LayerList.getLayerListEntries().prepend(this.added.menuEntry); LayerList.getLayerListEntries().prepend(this.added.menuEntry);
layers.splice(this.index, 0, this.added); layers.splice(this.index, 0, this.added);
}; };
@ -349,12 +349,12 @@ class HistoryState {
//prototype for undoing canvas changes //prototype for undoing canvas changes
EditCanvas() { EditCanvas() {
this.canvasState = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); this.canvasState = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
this.layerID = currentLayer.id; this.layerID = currFile.currentLayer.id;
this.undo = function () { this.undo = function () {
var stateLayer = LayerList.getLayerByID(this.layerID); var stateLayer = LayerList.getLayerByID(this.layerID);
var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = stateLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
stateLayer.context.putImageData(this.canvasState, 0, 0); stateLayer.context.putImageData(this.canvasState, 0, 0);
this.canvasState = currentCanvas; this.canvasState = currentCanvas;
@ -364,7 +364,7 @@ class HistoryState {
this.redo = function () { this.redo = function () {
var stateLayer = LayerList.getLayerByID(this.layerID); var stateLayer = LayerList.getLayerByID(this.layerID);
var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = stateLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
stateLayer.context.putImageData(this.canvasState, 0, 0); stateLayer.context.putImageData(this.canvasState, 0, 0);
@ -390,11 +390,11 @@ class HistoryState {
//prototype for undoing deleted colors //prototype for undoing deleted colors
DeleteColor(colorValue) { DeleteColor(colorValue) {
this.colorValue = colorValue; this.colorValue = colorValue;
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); this.canvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
this.undo = function () { this.undo = function () {
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0); currFile.currentLayer.context.putImageData(this.canvas, 0, 0);
ColorModule.addColor(this.colorValue); ColorModule.addColor(this.colorValue);
@ -402,8 +402,8 @@ class HistoryState {
}; };
this.redo = function () { this.redo = function () {
var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); var currentCanvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0); currFile.currentLayer.context.putImageData(this.canvas, 0, 0);
ColorModule.deleteColor(this.colorValue); ColorModule.deleteColor(this.colorValue);
@ -415,11 +415,11 @@ class HistoryState {
EditColor(newColorValue, oldColorValue) { EditColor(newColorValue, oldColorValue) {
this.newColorValue = newColorValue; this.newColorValue = newColorValue;
this.oldColorValue = oldColorValue; this.oldColorValue = oldColorValue;
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); this.canvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
this.undo = function () { this.undo = function () {
let currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); let currentCanvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0); currFile.currentLayer.context.putImageData(this.canvas, 0, 0);
//find new color in palette and change it back to old color //find new color in palette and change it back to old color
let colors = document.getElementsByClassName('color-button'); let colors = document.getElementsByClassName('color-button');
@ -435,8 +435,8 @@ class HistoryState {
}; };
this.redo = function () { this.redo = function () {
let currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); let currentCanvas = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
currentLayer.context.putImageData(this.canvas, 0, 0); currFile.currentLayer.context.putImageData(this.canvas, 0, 0);
//find old color in palette and change it back to new color //find old color in palette and change it back to new color
let colors = document.getElementsByClassName('color-button'); let colors = document.getElementsByClassName('color-button');

6
js/Input.js
View File

@ -31,7 +31,7 @@ const Input = (() => {
currentMouseEvent = event; currentMouseEvent = event;
dragging = false; dragging = false;
if (currentLayer != null && !Util.isChildOfByClass(event.target, "layers-menu-entry")) { if (currFile.currentLayer != null && !Util.isChildOfByClass(event.target, "layers-menu-entry")) {
LayerList.closeOptionsMenu(); LayerList.closeOptionsMenu();
} }
} }
@ -49,8 +49,8 @@ const Input = (() => {
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
} }
x -= currentLayer.canvas.offsetLeft; x -= currFile.currentLayer.canvas.offsetLeft;
y -= currentLayer.canvas.offsetTop; y -= currFile.currentLayer.canvas.offsetTop;
return [Math.round(x), Math.round(y)]; return [Math.round(x), Math.round(y)];
} }

100
js/LayerList.js
View File

@ -21,11 +21,11 @@ const LayerList = (() => {
function addLayer(id, saveHistory = true) { function addLayer(id, saveHistory = true) {
// layers.length - 3 // layers.length - 3
let index = layers.length - 3; let index = currFile.layers.length - 3;
// Creating a new canvas // Creating a new canvas
let newCanvas = document.createElement("canvas"); let newCanvas = document.createElement("canvas");
// Setting up the new canvas // Setting up the new canvas
canvasView.append(newCanvas); currFile.canvasView.append(newCanvas);
Layer.maxZIndex+=2; Layer.maxZIndex+=2;
newCanvas.style.zIndex = Layer.maxZIndex; newCanvas.style.zIndex = Layer.maxZIndex;
newCanvas.classList.add("drawingCanvas"); newCanvas.classList.add("drawingCanvas");
@ -42,11 +42,11 @@ const LayerList = (() => {
Layer.layerCount++; Layer.layerCount++;
// Creating a layer object // Creating a layer object
let newLayer = new Layer(currentLayer.canvasSize[0], currentLayer.canvasSize[1], newCanvas, toAppend); let newLayer = new Layer(currFile.canvasSize[0], currFile.canvasSize[1], newCanvas, toAppend);
newLayer.context.fillStyle = currentLayer.context.fillStyle; newLayer.context.fillStyle = currFile.currentLayer.context.fillStyle;
newLayer.copyData(currentLayer); newLayer.copyData(currFile.currentLayer);
layers.splice(index, 0, newLayer); currFile.layers.splice(index, 0, newLayer);
// Insert it before the Add layer button // Insert it before the Add layer button
layerList.insertBefore(toAppend, layerList.childNodes[0]); layerList.insertBefore(toAppend, layerList.childNodes[0]);
@ -134,10 +134,10 @@ const LayerList = (() => {
// Finds a layer given its id // Finds a layer given its id
function getLayerByID(id) { function getLayerByID(id) {
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (layers[i].menuEntry != null) { if (currFile.layers[i].hasCanvas()) {
if (layers[i].menuEntry.id == id) { if (currFile.layers[i].menuEntry.id == id) {
return layers[i]; return currFile.layers[i];
} }
} }
} }
@ -147,10 +147,10 @@ const LayerList = (() => {
// Finds a layer given its name // Finds a layer given its name
function getLayerByName(name) { function getLayerByName(name) {
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (layers[i].menuEntry != null) { if (currFile.layers[i].hasCanvas()) {
if (layers[i].menuEntry.getElementsByTagName("p")[0].innerHTML == name) { if (currFile.layers[i].menuEntry.getElementsByTagName("p")[0].innerHTML == name) {
return layers[i]; return currFile.layers[i];
} }
} }
} }
@ -159,9 +159,9 @@ const LayerList = (() => {
} }
function startRenamingLayer(event) { function startRenamingLayer(event) {
let p = currentLayer.menuEntry.getElementsByTagName("p")[0]; let p = currFile.currentLayer.menuEntry.getElementsByTagName("p")[0];
currentLayer.oldLayerName = p.innerHTML; currFile.currentLayer.oldLayerName = p.innerHTML;
p.setAttribute("contenteditable", true); p.setAttribute("contenteditable", true);
p.classList.add("layer-name-editable"); p.classList.add("layer-name-editable");
@ -182,8 +182,8 @@ const LayerList = (() => {
return -1; return -1;
} }
let layerIndex = layers.indexOf(currentLayer); let layerIndex = currFile.layers.indexOf(currFile.currentLayer);
let toDuplicate = currentLayer; let toDuplicate = currFile.currentLayer;
let menuEntries = layerList.children; let menuEntries = layerList.children;
// Increasing z-indexes of the layers above // Increasing z-indexes of the layers above
@ -195,14 +195,14 @@ const LayerList = (() => {
// Creating a new canvas // Creating a new canvas
let newCanvas = document.createElement("canvas"); let newCanvas = document.createElement("canvas");
// Setting up the new canvas // Setting up the new canvas
canvasView.append(newCanvas); currFile.canvasView.append(newCanvas);
newCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex) + 2; newCanvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex) + 2;
newCanvas.classList.add("drawingCanvas"); newCanvas.classList.add("drawingCanvas");
if (!layerListEntry) return console.warn('skipping adding layer because no document'); if (!layerListEntry) return console.warn('skipping adding layer because no document');
// Clone the default layer // Clone the default layer
let toAppend = currentLayer.menuEntry.cloneNode(true); let toAppend = currFile.currentLayer.menuEntry.cloneNode(true);
// Setting the default name for the layer // Setting the default name for the layer
toAppend.getElementsByTagName('p')[0].innerHTML += " copy"; toAppend.getElementsByTagName('p')[0].innerHTML += " copy";
// Removing the selected class // Removing the selected class
@ -211,41 +211,41 @@ const LayerList = (() => {
Layer.layerCount++; Layer.layerCount++;
// Creating a layer object // Creating a layer object
let newLayer = new Layer(currentLayer.canvasSize[0], currentLayer.canvasSize[1], newCanvas, toAppend); let newLayer = new Layer(currFile.canvasSize[0], currFile.canvasSize[1], newCanvas, toAppend);
newLayer.context.fillStyle = currentLayer.context.fillStyle; newLayer.context.fillStyle = currFile.currentLayer.context.fillStyle;
newLayer.copyData(currentLayer); newLayer.copyData(currFile.currentLayer);
layers.splice(layerIndex, 0, newLayer); currFile.layers.splice(layerIndex, 0, newLayer);
// Insert it before the Add layer button // Insert it before the Add layer button
layerList.insertBefore(toAppend, currentLayer.menuEntry); layerList.insertBefore(toAppend, currFile.currentLayer.menuEntry);
// Copy the layer content // Copy the layer content
newLayer.context.putImageData(currentLayer.context.getImageData( newLayer.context.putImageData(currFile.currentLayer.context.getImageData(
0, 0, currentLayer.canvasSize[0], currentLayer.canvasSize[1]), 0, 0); 0, 0, currFile.canvasSize[0], currFile.canvasSize[1]), 0, 0);
newLayer.updateLayerPreview(); newLayer.updateLayerPreview();
// Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history // Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
if (saveHistory) { if (saveHistory) {
new HistoryState().DuplicateLayer(newLayer, currentLayer); new HistoryState().DuplicateLayer(newLayer, currFile.currentLayer);
} }
} }
function deleteLayer(saveHistory = true) { function deleteLayer(saveHistory = true) {
// Cannot delete all the layers // Cannot delete all the layers
if (layers.length != 4) { if (currFile.layers.length != 4) {
let layerIndex = layers.indexOf(currentLayer); let layerIndex = currFile.layers.indexOf(currFile.currentLayer);
let toDelete = layers[layerIndex]; let toDelete = currFile.layers[layerIndex];
let previousSibling = toDelete.menuEntry.previousElementSibling; let previousSibling = toDelete.menuEntry.previousElementSibling;
// Adding the ids to the unused ones // Adding the ids to the unused ones
Layer.unusedIDs.push(toDelete.id); Layer.unusedIDs.push(toDelete.id);
// Selecting the next layer // Selecting the next layer
if (layerIndex != (layers.length - 4)) { if (layerIndex != (currFile.layers.length - 4)) {
layers[layerIndex + 1].selectLayer(); currFile.layers[layerIndex + 1].selectLayer();
} }
// or the previous one if the next one doesn't exist // or the previous one if the next one doesn't exist
else { else {
layers[layerIndex - 1].selectLayer(); currFile.layers[layerIndex - 1].selectLayer();
} }
// Deleting canvas and entry // Deleting canvas and entry
@ -253,7 +253,7 @@ const LayerList = (() => {
toDelete.menuEntry.remove(); toDelete.menuEntry.remove();
// Removing the layer from the list // Removing the layer from the list
layers.splice(layerIndex, 1); currFile.layers.splice(layerIndex, 1);
if (saveHistory) { if (saveHistory) {
new HistoryState().DeleteLayer(toDelete, previousSibling, layerIndex); new HistoryState().DeleteLayer(toDelete, previousSibling, layerIndex);
@ -266,10 +266,10 @@ const LayerList = (() => {
function merge(saveHistory = true) { function merge(saveHistory = true) {
// Saving the layer that should be merged // Saving the layer that should be merged
let toMerge = currentLayer; let toMerge = currFile.currentLayer;
let toMergeIndex = layers.indexOf(toMerge); let toMergeIndex = currFile.layers.indexOf(toMerge);
// Getting layer below // Getting layer below
let layerBelow = LayerList.getLayerByID(currentLayer.menuEntry.nextElementSibling.id); let layerBelow = LayerList.getLayerByID(currFile.currentLayer.menuEntry.nextElementSibling.id);
// If I have something to merge with // If I have something to merge with
if (layerBelow != null) { if (layerBelow != null) {
@ -278,19 +278,19 @@ const LayerList = (() => {
if (saveHistory) { if (saveHistory) {
new HistoryState().MergeLayer(toMergeIndex, toMerge, new HistoryState().MergeLayer(toMergeIndex, toMerge,
layerBelow.context.getImageData(0, 0, layerBelow.canvasSize[0], layerBelow.canvasSize[1]), layerBelow.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
layerBelow); layerBelow);
} }
LayerList.mergeLayers(currentLayer.context, toMerge.context); LayerList.mergeLayers(currFile.currentLayer.context, toMerge.context);
// Deleting the above layer // Deleting the above layer
toMerge.canvas.remove(); toMerge.canvas.remove();
toMerge.menuEntry.remove(); toMerge.menuEntry.remove();
layers.splice(toMergeIndex, 1); currFile.layers.splice(toMergeIndex, 1);
// Updating the layer preview // Updating the layer preview
currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
} }
} }
@ -312,9 +312,9 @@ const LayerList = (() => {
let visibleLayers = []; let visibleLayers = [];
let nToFlatten = 0; let nToFlatten = 0;
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (layers[i].menuEntry != null && layers[i].isVisible) { if (currFile.layers[i].hasCanvas() && currFile.layers[i].isVisible) {
visibleLayers.push(layers[i]); visibleLayers.push(currFile.layers[i]);
} }
} }
@ -328,7 +328,7 @@ const LayerList = (() => {
nToFlatten++; nToFlatten++;
console.log(visibleLayers[i].menuEntry.nextElementSibling); console.log(visibleLayers[i].menuEntry.nextElementSibling);
new HistoryState().FlattenTwoVisibles( new HistoryState().FlattenTwoVisibles(
visibleLayers[i + 1].context.getImageData(0, 0, visibleLayers[i].canvasSize[0], visibleLayers[i].canvasSize[1]), visibleLayers[i + 1].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
visibleLayers[i].menuEntry.nextElementSibling, visibleLayers[i].menuEntry.nextElementSibling,
layers.indexOf(visibleLayers[i]), layers.indexOf(visibleLayers[i]),
visibleLayers[i], visibleLayers[i + 1] visibleLayers[i], visibleLayers[i + 1]
@ -339,12 +339,12 @@ const LayerList = (() => {
// Deleting the above layer // Deleting the above layer
visibleLayers[i].canvas.remove(); visibleLayers[i].canvas.remove();
visibleLayers[i].menuEntry.remove(); visibleLayers[i].menuEntry.remove();
layers.splice(layers.indexOf(visibleLayers[i]), 1); currFile.layers.splice(currFile.layers.indexOf(visibleLayers[i]), 1);
} }
new HistoryState().FlattenVisible(nToFlatten); new HistoryState().FlattenVisible(nToFlatten);
// Updating the layer preview // Updating the layer preview
currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
} }
} }
@ -369,7 +369,7 @@ const LayerList = (() => {
function closeOptionsMenu(event) { function closeOptionsMenu(event) {
Layer.layerOptions.style.visibility = "hidden"; Layer.layerOptions.style.visibility = "hidden";
currentLayer.rename(); currFile.currentLayer.rename();
renamingLayer = false; renamingLayer = false;
} }

2
js/Settings.js
View File

@ -45,7 +45,7 @@ const Settings = (() => {
settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates'); settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates');
settings.pixelGridColour = Util.getValue('setting-pixelGridColour'); settings.pixelGridColour = Util.getValue('setting-pixelGridColour');
// Filling pixel grid again if colour changed // Filling pixel grid again if colour changed
pixelGrid.fillPixelGrid(); currFile.pixelGrid.fillPixelGrid();
//save settings object to cookie //save settings object to cookie
var cookieValue = JSON.stringify(settings); var cookieValue = JSON.stringify(settings);

51
js/Startup.js
View File

@ -53,7 +53,7 @@ const Startup = (() => {
// Deleting the default layer // Deleting the default layer
LayerList.deleteLayer(false); LayerList.deleteLayer(false);
// Selecting the new one // Selecting the new one
layers[1].selectLayer(); currFile.layers[1].selectLayer();
} }
console.log("Starting with mode " + EditorState.getCurrentMode()); console.log("Starting with mode " + EditorState.getCurrentMode());
@ -63,17 +63,20 @@ const Startup = (() => {
} }
function initLayers(width, height) { function initLayers(width, height) {
// Setting the general canvasSize
currFile.canvasSize = [width, height];
// If this is the first pixel I'm creating since the app has started // If this is the first pixel I'm creating since the app has started
if (firstPixel) { if (firstPixel) {
// Creating the first layer // Creating the first layer
currentLayer = new Layer(width, height, 'pixel-canvas', ""); currFile.currentLayer = new Layer(width, height, 'pixel-canvas', "");
currentLayer.canvas.style.zIndex = 2; currFile.currentLayer.canvas.style.zIndex = 2;
} }
else { else {
// Deleting all the extra layers and canvases, leaving only one // Deleting all the extra layers and canvases, leaving only one
let nLayers = layers.length; let nLayers = currFile.layers.length;
for (let i=2; i < layers.length - nAppLayers; i++) { for (let i=2; i < currFile.layers.length - nAppLayers; i++) {
let currentEntry = layers[i].menuEntry; let currentEntry = currFile.layers[i].menuEntry;
let associatedLayer; let associatedLayer;
if (currentEntry != null) { if (currentEntry != null) {
@ -84,7 +87,7 @@ const Startup = (() => {
associatedLayer.canvas.remove(); associatedLayer.canvas.remove();
// Adding the id to the unused ones // Adding the id to the unused ones
unusedIDs.push(currentEntry.id); Layer.unusedIDs.push(currentEntry.id);
// Removing the entry from the menu // Removing the entry from the menu
currentEntry.remove(); currentEntry.remove();
} }
@ -92,40 +95,32 @@ const Startup = (() => {
// Removing the old layers from the list // Removing the old layers from the list
for (let i=2; i<nLayers - nAppLayers; i++) { for (let i=2; i<nLayers - nAppLayers; i++) {
layers.splice(2, 1); currFile.layers.splice(2, 1);
} }
// Setting up the current layer // Setting up the current layer
layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry); currFile.layers[1] = new Layer(width, height, currFile.layers[1].canvas, currFile.layers[1].menuEntry);
currentLayer = layers[1]; currFile.currentLayer = currFile.layers[1];
currentLayer.canvas.style.zIndex = 2; currFile.currentLayer.canvas.style.zIndex = 2;
// Updating canvas size to the new size
for (let i=0; i<nLayers; i++) {
layers[i].canvasSize = [width, height];
}
} }
// Adding the checkerboard behind it // Adding the checkerboard behind it
checkerBoard = new Checkerboard(width, height, null); currFile.checkerBoard = new Checkerboard(width, height, null);
// Pixel grid // Pixel grid
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
VFXLayer = new Layer(width, height, 'vfx-canvas'); currFile.VFXLayer = new Layer(width, height, 'vfx-canvas');
// Tmp layer to draw previews on // Tmp layer to draw previews on
TMPLayer = new Layer(width, height, 'tmp-canvas'); currFile.TMPLayer = new Layer(width, height, 'tmp-canvas');
// Setting the general canvasSize
canvasSize = currentLayer.canvasSize;
if (firstPixel) { if (firstPixel) {
// Adding the first layer and the checkerboard to the list of layers // Adding the first layer and the checkerboard to the list of layers
layers.push(checkerBoard); currFile.layers.push(currFile.checkerBoard);
layers.push(currentLayer); currFile.layers.push(currFile.currentLayer);
layers.push(TMPLayer); currFile.layers.push(currFile.TMPLayer);
layers.push(pixelGrid); currFile.layers.push(currFile.pixelGrid);
layers.push(VFXLayer); currFile.layers.push(currFile.VFXLayer);
} }
} }

18
js/Tool.js
View File

@ -40,11 +40,11 @@ class Tool {
switch (this.cursorType.type) { switch (this.cursorType.type) {
case 'html': case 'html':
canvasView.style.cursor = 'none'; currFile.canvasView.style.cursor = 'none';
break; break;
case 'cursor': case 'cursor':
this.cursor = this.cursorType.style; this.cursor = this.cursorType.style;
canvasView.style.cursor = this.cursor || 'default'; currFile.canvasView.style.cursor = this.cursor || 'default';
break; break;
default: default:
break; break;
@ -53,8 +53,8 @@ class Tool {
updateCursor() { updateCursor() {
this.brushPreview.style.display = 'block'; this.brushPreview.style.display = 'block';
this.brushPreview.style.width = this.currSize * zoom + 'px'; this.brushPreview.style.width = this.currSize * currFile.zoom + 'px';
this.brushPreview.style.height = this.currSize * zoom + 'px'; this.brushPreview.style.height = this.currSize * currFile.zoom + 'px';
} }
onMouseWheel(mousePos, mode) {} onMouseWheel(mousePos, mode) {}
@ -71,17 +71,17 @@ class Tool {
toSub = 0.5; toSub = 0.5;
} }
this.brushPreview.style.left = (Math.floor(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px'; this.brushPreview.style.left = (Math.floor(cursorLocation[0] / currFile.zoom) * currFile.zoom + currFile.currentLayer.canvas.offsetLeft - this.currSize * currFile.zoom / 2 - currFile.zoom / 2 + toSub * currFile.zoom) + 'px';
this.brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px'; this.brushPreview.style.top = (Math.floor(cursorLocation[1] / currFile.zoom) * currFile.zoom + currFile.currentLayer.canvas.offsetTop - this.currSize * currFile.zoom / 2 - currFile.zoom / 2 + toSub * currFile.zoom) + 'px';
if (this.cursorType.type == 'html') { if (this.cursorType.type == 'html') {
if (cursorTarget.className == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') { if (cursorTarget.className == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
this.brushPreview.style.visibility = 'visible'; this.brushPreview.style.visibility = 'visible';
canvasView.style.cursor = 'none'; currFile.canvasView.style.cursor = 'none';
} }
else { else {
this.brushPreview.style.visibility = 'hidden'; this.brushPreview.style.visibility = 'hidden';
canvasView.style.cursor = 'default'; currFile.canvasView.style.cursor = 'default';
} }
} }
} }
@ -92,7 +92,7 @@ class Tool {
this.isSelected = false; this.isSelected = false;
this.brushPreview.style.visibility = 'hidden'; this.brushPreview.style.visibility = 'hidden';
canvasView.style.cursor = 'default'; currFile.canvasView.style.cursor = 'default';
} }
onStart(mousePos) { onStart(mousePos) {

2
js/ToolManager.js
View File

@ -19,7 +19,7 @@ const ToolManager = (() => {
currTool = tools["brush"]; currTool = tools["brush"];
currTool.onSelect(); currTool.onSelect();
canvasView.style.cursor = 'default'; currFile.canvasView.style.cursor = 'default';
Events.on("mouseup", window, onMouseUp); Events.on("mouseup", window, onMouseUp);
Events.on("mousemove", window, onMouseMove); Events.on("mousemove", window, onMouseMove);

311
js/_resizeCanvas.js
View File

@ -1,311 +0,0 @@
// REFACTOR: method of File class probably
/* This scripts contains all the code used to handle the canvas resizing */
// Resize canvas pop up window
let resizeCanvasContainer = document.getElementById("resize-canvas");
// Start pivot
let rcPivot = "middle";
// Selected pivot button
let currentPivotObject;
// Border offsets
let rcBorders = {left: 0, right: 0, top: 0, bottom: 0};
/** Opens the canvas resize window
*
*/
function openResizeCanvasWindow() {
// Initializes the inputs
initResizeCanvasInputs();
Dialogue.showDialogue('resize-canvas');
}
/** Initializes the canvas resizing input
*
*/
function initResizeCanvasInputs() {
// Getting the pivot buttons
let buttons = document.getElementsByClassName("pivot-button");
// Adding the event handlers for them
for (let i=0; i<buttons.length; i++) {
buttons[i].addEventListener("click", changePivot);
if (buttons[i].getAttribute("value").includes("middle")) {
currentPivotObject = buttons[i];
}
}
document.getElementById("rc-width").value = layers[0].canvasSize[0];
document.getElementById("rc-height").value = layers[0].canvasSize[1];
document.getElementById("rc-border-left").addEventListener("change", rcChangedBorder);
document.getElementById("rc-border-right").addEventListener("change", rcChangedBorder);
document.getElementById("rc-border-top").addEventListener("change", rcChangedBorder);
document.getElementById("rc-border-bottom").addEventListener("change", rcChangedBorder);
document.getElementById("rc-width").addEventListener("change", rcChangedSize);
document.getElementById("rc-height").addEventListener("change", rcChangedSize);
document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
console.log("Pivot selezionato: " + currentPivotObject);
}
/** Fired when a border offset is changed: it updates the width and height
*
* @param {*} event
*/
function rcChangedBorder(event) {
rcUpdateBorders();
document.getElementById("rc-width").value = parseInt(layers[0].canvasSize[0]) + rcBorders.left + rcBorders.right;
document.getElementById("rc-height").value = parseInt(layers[0].canvasSize[1]) + rcBorders.top + rcBorders.bottom;
}
/** Fired when width or height are changed: updates the border offsets
*
* @param {*} event
*/
function rcChangedSize(event) {
let widthOffset = Math.abs(document.getElementById("rc-width").value) - layers[0].canvasSize[0];
let heightOffset = Math.abs(document.getElementById("rc-height").value) - layers[0].canvasSize[1];
let left = Math.round(widthOffset / 2);
let right = widthOffset - left;
let top = Math.round(heightOffset / 2);
let bottom = heightOffset - top;
document.getElementById("rc-border-left").value = left;
document.getElementById("rc-border-right").value = right;
document.getElementById("rc-border-top").value = top;
document.getElementById("rc-border-bottom").value = bottom;
rcBorders.left = left;
rcBorders.right = right;
rcBorders.top = top;
rcBorders.bottom = bottom;
}
/** Resizes the canvas
*
* @param {*} event The event that triggered the canvas resizing
* @param {*} size The new size of the picture
* @param {*} customData Used when ctrl+z ing
* @param {*} saveHistory Should I save the history? You shouldn't if you're undoing
*/
function resizeCanvas(event, size, customData, saveHistory = true) {
let imageDatas = [];
let leftOffset = 0;
let topOffset = 0;
let copiedDataIndex = 0;
// If I'm undoing and I'm not trimming, I manually put the values in the window
if (size != null && customData == null) {
document.getElementById("rc-width").value = size.x;
document.getElementById("rc-height").value = size.y;
rcChangedSize();
}
rcUpdateBorders();
// Save all imageDatas
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
imageDatas.push(layers[i].context.getImageData(0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1]));
}
}
// Saving the history only if I'm not already undoing or redoing
if (saveHistory && event != null) {
// Saving history
new HistoryState().ResizeCanvas(
{x: parseInt(layers[0].canvasSize[0]) + rcBorders.left + rcBorders.right,
y: parseInt(layers[0].canvasSize[1]) + rcBorders.top + rcBorders.bottom},
{x: layers[0].canvasSize[0],
y: layers[0].canvasSize[1]},
imageDatas.slice(), customData != null && saveHistory
);
}
// Resize the canvases
for (let i=0; i<layers.length; i++) {
layers[i].canvasSize[0] = parseInt(layers[i].canvasSize[0]) + rcBorders.left + rcBorders.right;
layers[i].canvasSize[1] = parseInt(layers[i].canvasSize[1]) + rcBorders.top + rcBorders.bottom;
layers[i].canvas.width = layers[i].canvasSize[0];
layers[i].canvas.height = layers[i].canvasSize[1];
layers[i].resize();
}
// Regenerate the checkerboard
checkerBoard.fillCheckerboard();
pixelGrid.fillPixelGrid();
// Put the imageDatas in the right position
switch (rcPivot)
{
case 'topleft':
leftOffset = 0;
topOffset = 0;
break;
case 'top':
leftOffset = (rcBorders.left + rcBorders.right) / 2;
topOffset = 0;
break;
case 'topright':
leftOffset = rcBorders.left + rcBorders.right;
topOffset = 0;
break;
case 'left':
leftOffset = 0;
topOffset = (rcBorders.top + rcBorders.bottom) / 2;
break;
case 'middle':
leftOffset = (rcBorders.left + rcBorders.right) / 2;
topOffset = (rcBorders.top + rcBorders.bottom) / 2;
break;
case 'right':
leftOffset = rcBorders.left + rcBorders.right;
topOffset = (rcBorders.top + rcBorders.bottom) / 2;
break;
case 'bottomleft':
leftOffset = 0;
topOffset = rcBorders.top + rcBorders.bottom;
break;
case 'bottom':
leftOffset = (rcBorders.left + rcBorders.right) / 2;
topOffset = rcBorders.top + rcBorders.bottom;
break;
case 'bottomright':
leftOffset = rcBorders.left + rcBorders.right;
topOffset = rcBorders.top + rcBorders.bottom;
break;
default:
console.log('Pivot does not exist, please report an issue at https://github.com/lospec/pixel-editor');
break;
}
// Putting all the data for each layer with the right offsets (decided by the pivot)
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
if (customData == undefined) {
layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
}
else {
layers[i].context.putImageData(customData[copiedDataIndex], 0, 0);
}
layers[i].updateLayerPreview();
copiedDataIndex++;
}
}
Dialogue.closeDialogue();
}
/** Trims the canvas so tat the sprite is perfectly contained in it
*
* @param {*} event
* @param {*} saveHistory Should I save the history? You shouldn't if you're undoing
*/
function trimCanvas(event, saveHistory) {
let minY = Infinity;
let minX = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
let tmp;
let imageDatas = [];
let historySave = saveHistory == null;
let prevPivot = rcPivot;
rcPivot = "topleft";
console.log("debug");
// Computing the min and max coordinates in which there's a non empty pixel
for (let i=1; i<layers.length - nAppLayers; i++) {
let imageData = layers[i].context.getImageData(0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1]);
let pixelPosition;
for (let i=imageData.data.length - 1; i>= 0; i-=4) {
if (!Util.isPixelEmpty(
[imageData.data[i - 3], imageData.data[i - 2],
-imageData.data[i - 1], imageData.data[i]])) {
pixelPosition = getPixelPosition(i);
// max x
if (pixelPosition[0] > maxX) {
maxX = pixelPosition[0];
}
// min x
if (pixelPosition[0] < minX) {
minX = pixelPosition[0];
}
// max y
if (pixelPosition[1] > maxY) {
maxY = pixelPosition[1];
}
// min y
if (pixelPosition[1] < minY) {
minY = pixelPosition[1];
}
}
}
}
tmp = minY;
minY = maxY;
maxY = tmp;
minY = layers[0].canvasSize[1] - minY;
maxY = layers[0].canvasSize[1] - maxY;
// Setting the borders coherently with the values I've just computed
rcBorders.right = (maxX - layers[0].canvasSize[0]) + 1;
rcBorders.left = -minX;
rcBorders.top = maxY - layers[0].canvasSize[1] + 1;
rcBorders.bottom = -minY;
// Saving the data
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
imageDatas.push(layers[i].context.getImageData(minX - 1, layers[i].canvasSize[1] - maxY, maxX-minX + 1, maxY-minY + 1));
}
}
console.log(imageDatas);
//console.log("sx: " + borders.left + "dx: " + borders.right + "top: " + borders.top + "btm: " + borders.bottom);
document.getElementById("rc-border-left").value = rcBorders.left;
document.getElementById("rc-border-right").value = rcBorders.right;
document.getElementById("rc-border-top").value = rcBorders.top;
document.getElementById("rc-border-bottom").value = rcBorders.bottom;
// Resizing the canvas with the decided border offsets
resizeCanvas(null, null, imageDatas.slice(), historySave);
// Resetting the previous pivot
rcPivot = prevPivot;
}
function rcUpdateBorders() {
// Getting input
rcBorders.left = document.getElementById("rc-border-left").value;
rcBorders.right = document.getElementById("rc-border-right").value;
rcBorders.top = document.getElementById("rc-border-top").value;
rcBorders.bottom = document.getElementById("rc-border-bottom").value;
// Validating input
rcBorders.left == "" ? rcBorders.left = 0 : rcBorders.left = Math.round(parseInt(rcBorders.left));
rcBorders.right == "" ? rcBorders.right = 0 : rcBorders.right = Math.round(parseInt(rcBorders.right));
rcBorders.top == "" ? rcBorders.top = 0 : rcBorders.top = Math.round(parseInt(rcBorders.top));
rcBorders.bottom == "" ? rcBorders.bottom = 0 : rcBorders.bottom = Math.round(parseInt(rcBorders.bottom));
}
function changePivot(event) {
rcPivot = event.target.getAttribute("value");
// Setting the selected class
currentPivotObject.classList.remove("rc-selected-pivot");
currentPivotObject = event.target;
currentPivotObject.classList.add("rc-selected-pivot");
}

40
js/_resizeSprite.js
View File

@ -20,13 +20,13 @@ function openResizeSpriteWindow() {
initResizeSpriteInputs(); initResizeSpriteInputs();
// Computing the current ratio // Computing the current ratio
currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1]; currentRatio = currFile.canvasSize[0] / currFile.canvasSize[1];
console.log("Current ratio: " + currentRatio); console.log("Current ratio: " + currentRatio);
// Initializing the input fields // Initializing the input fields
data.width = layers[0].canvasSize[0]; data.width = currFile.canvasSize[0];
data.height = layers[1].canvasSize[1]; data.height = currFile.canvasSize[1];
startData.width = parseInt(data.width); startData.width = parseInt(data.width);
startData.height = parseInt(data.height); startData.height = parseInt(data.height);
@ -41,8 +41,8 @@ function openResizeSpriteWindow() {
* *
*/ */
function initResizeSpriteInputs() { function initResizeSpriteInputs() {
document.getElementById("rs-width").value = layers[0].canvasSize[0]; document.getElementById("rs-width").value = currFile.canvasSize[0];
document.getElementById("rs-height").value = layers[0].canvasSize[1]; document.getElementById("rs-height").value = currFile.canvasSize[1];
document.getElementById("rs-width-percentage").value = 100; document.getElementById("rs-width-percentage").value = 100;
document.getElementById("rs-height-percentage").value = 100; document.getElementById("rs-height-percentage").value = 100;
@ -76,8 +76,8 @@ function resizeSprite(event, ratio) {
// Copy of the imageDatas that will be stored in the history // Copy of the imageDatas that will be stored in the history
let imageDatasCopy = []; let imageDatasCopy = [];
oldWidth = layers[0].canvasSize[0]; oldWidth = currFile.canvasSize[0];
oldHeight = layers[1].canvasSize[1]; oldHeight = currFile.canvasSize[1];
rcPivot = "middle"; rcPivot = "middle";
// Updating values if the user didn't press enter // Updating values if the user didn't press enter
@ -105,15 +105,15 @@ function resizeSprite(event, ratio) {
newHeight = data.height; newHeight = data.height;
} }
else { else {
newWidth = layers[0].canvasSize[0] * ratio[0]; newWidth = currFile.canvasSize[0] * ratio[0];
newHeight = layers[1].canvasSize[1] * ratio[1]; newHeight = currFile.canvasSize[1] * ratio[1];
} }
// Get all the image datas // Get all the image datas
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (layers[i].menuEntry != null) { if (currFile.layers[i].hasCanvas()) {
rsImageDatas.push(layers[i].context.getImageData( rsImageDatas.push(currFile.layers[i].context.getImageData(
0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1]) 0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
); );
} }
} }
@ -127,15 +127,15 @@ function resizeSprite(event, ratio) {
} }
// Resizing the canvas // Resizing the canvas
resizeCanvas(null, {x: newWidth, y: newHeight}); currFile.resizeCanvas(null, {x: newWidth, y: newHeight});
// Put the image datas on the new canvases // Put the image datas on the new canvases
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (layers[i].menuEntry != null) { if (currFile.layers[i].hasCanvas()) {
layers[i].context.putImageData( currFile.layers[i].context.putImageData(
resizeImageData(rsImageDatas[layerIndex], newWidth, newHeight, currentAlgo), 0, 0 resizeImageData(rsImageDatas[layerIndex], newWidth, newHeight, currentAlgo), 0, 0
); );
layers[i].updateLayerPreview(); currFile.layers[i].updateLayerPreview();
layerIndex++; layerIndex++;
} }
} }
@ -147,8 +147,8 @@ function resizeSprite(event, ratio) {
startData.height = data.height; startData.height = data.height;
} }
else { else {
startData.width = layers[0].canvasSize[0]; startData.width = currFile.canvasSize[0];
startData.height = layers[0].canvasSize[1]; startData.height = currFile.canvasSize[1];
} }
startData.widthPercentage = 100; startData.widthPercentage = 100;

27
js/data/variables.js
View File

@ -1,27 +0,0 @@
//init variables
var canvasSize; // REFACTOR: Canvas class / getCanvasSize method
var zoom = 7; // REFACTOR: EditorState class/IIFE? Leave this one for later
var lastMouseClickPos = [0,0]; // REFACTOR: Input IIFE via getter? <- probably editor state as it is changed by tools
// REFACTOR: File class?
var canvasView = document.getElementById("canvas-view");
// Layers
// REFACTOR: File class / IIFE?
var layers = [];
// REFACTOR: File class?
var currentLayer;
// VFX layer used to draw previews of the selection and things like that
// REFACTOR: File class
var VFXLayer;
// TMP layer
// REFACTOR: File class
var TMPLayer;
// Pixel grid layer
// REFACTOR: File class
let pixelGrid;
// REFACTOR: File class
let checkerBoard;

14
js/layers/Checkerboard.js
View File

@ -27,29 +27,29 @@ class Checkerboard extends Layer {
* *
*/ */
fillCheckerboard() { fillCheckerboard() {
this.context.clearRect(0, 0, this.canvasSize[0], this.canvasSize[1]); this.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
// Cycling through the canvas (using it as a matrix) // Cycling through the canvas (using it as a matrix)
for (let i=0; i<this.canvasSize[0] / this.checkerBoardSquareSize; i++) { for (let i=0; i<currFile.canvasSize[0] / this.checkerBoardSquareSize; i++) {
this.nSquaresFilled = 0; this.nSquaresFilled = 0;
for (let j=0; j<this.canvasSize[1] / this.checkerBoardSquareSize; j++) { for (let j=0; j<currFile.canvasSize[1] / this.checkerBoardSquareSize; j++) {
let rectX; let rectX;
let rectY; let rectY;
// Managing the not perfect squares (the ones at the sides if the canvas' sizes are not powers of checkerBoardSquareSize // Managing the not perfect squares (the ones at the sides if the canvas' sizes are not powers of checkerBoardSquareSize
if (i * this.checkerBoardSquareSize < this.canvasSize[0]) { if (i * this.checkerBoardSquareSize < currFile.canvasSize[0]) {
rectX = i * this.checkerBoardSquareSize; rectX = i * this.checkerBoardSquareSize;
} }
else { else {
rectX = this.canvasSize[0]; rectX = currFile.canvasSize[0];
} }
if (j * this.checkerBoardSquareSize < this.canvasSize[1]) { if (j * this.checkerBoardSquareSize < currFile.canvasSize[1]) {
rectY = j * this.checkerBoardSquareSize; rectY = j * this.checkerBoardSquareSize;
} }
else { else {
rectY = this.canvasSize[1]; rectY = currFile.canvasSize[1];
} }
// Selecting the colour // Selecting the colour

60
js/layers/Layer.js
View File

@ -19,10 +19,10 @@ class Layer {
// If it's an HTML element it is added, if it's a string nothing happens, if it's undefined the // If it's an HTML element it is added, if it's a string nothing happens, if it's undefined the
// first menuEntry is used (the one that appears on load) // first menuEntry is used (the one that appears on load)
constructor(width, height, canvas, menuEntry) { constructor(width, height, canvas, menuEntry) {
// REFACTOR: this could just be an attribute of a Canvas class
this.canvasSize = [width, height];
// REFACTOR: the canvas should actually be a Canvas instance // REFACTOR: the canvas should actually be a Canvas instance
this.canvas = Util.getElement(canvas); this.canvas = Util.getElement(canvas);
this.canvas.width = width;
this.canvas.height = height;
// REFACTOR: the context could be an attribute of the canvas class, but it's a bit easier // REFACTOR: the context could be an attribute of the canvas class, but it's a bit easier
// to just type layer.context, we should discuss this // to just type layer.context, we should discuss this
this.context = this.canvas.getContext('2d'); this.context = this.canvas.getContext('2d');
@ -69,20 +69,22 @@ class Layer {
this.initialize(); this.initialize();
} }
hasCanvas() {
return this.menuEntry != null;
}
// Initializes the canvas // Initializes the canvas
initialize() { initialize() {
//resize canvas //resize canvas
this.canvas.width = this.canvasSize[0]; this.canvas.style.width = (this.canvas.width*currFile.zoom)+'px';
this.canvas.height = this.canvasSize[1]; this.canvas.style.height = (this.canvas.height*currFile.zoom)+'px';
this.canvas.style.width = (this.canvas.width*zoom)+'px';
this.canvas.style.height = (this.canvas.height*zoom)+'px';
//show canvas //show canvas
this.canvas.style.display = 'block'; this.canvas.style.display = 'block';
//center canvas in window //center canvas in window
this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px'; this.canvas.style.left = 64+currFile.canvasView.clientWidth/2-(currFile.canvasSize[0]*currFile.zoom/2)+'px';
this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px'; this.canvas.style.top = 48+currFile.canvasView.clientHeight/2-(currFile.canvasSize[1]*currFile.zoom/2)+'px';
this.context.imageSmoothingEnabled = false; this.context.imageSmoothingEnabled = false;
this.context.mozImageSmoothingEnabled = false; this.context.mozImageSmoothingEnabled = false;
@ -94,8 +96,8 @@ class Layer {
if (this.oldLayerName != null) { if (this.oldLayerName != null) {
let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML; let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
for (let i=0; i<layers.length; i++) { for (let i=0; i<currFile.layers.length; i++) {
if (name === layers[i].name) { if (name === currFile.layers[i].name) {
name += ' (1)'; name += ' (1)';
i = 0; i = 0;
} }
@ -103,25 +105,25 @@ class Layer {
this.name = name; this.name = name;
this.menuEntry.getElementsByTagName("p")[0].innerHTML = name; this.menuEntry.getElementsByTagName("p")[0].innerHTML = name;
new HistoryState().RenameLayer(this.oldLayerName, name, currentLayer); new HistoryState().RenameLayer(this.oldLayerName, name, currFile.currentLayer);
this.oldLayerName = null; this.oldLayerName = null;
} }
} }
hover() { hover() {
// Hides all the layers but the current one // Hides all the layers but the current one
for (let i=1; i<layers.length - nAppLayers; i++) { for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
if (layers[i] !== this) { if (currFile.layers[i] !== this) {
layers[i].canvas.style.opacity = 0.3; currFile.layers[i].canvas.style.opacity = 0.3;
} }
} }
} }
unhover() { unhover() {
// Shows all the layers again // Shows all the layers again
for (let i=1; i<layers.length - nAppLayers; i++) { for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
if (layers[i] !== this) { if (currFile.layers[i] !== this) {
layers[i].canvas.style.opacity = 1; currFile.layers[i].canvas.style.opacity = 1;
} }
} }
} }
@ -135,8 +137,8 @@ class Layer {
// Resizes canvas // Resizes canvas
resize() { resize() {
let newWidth = (this.canvas.width * zoom) + 'px'; let newWidth = (this.canvas.width * currFile.zoom) + 'px';
let newHeight = (this.canvas.height *zoom)+ 'px'; let newHeight = (this.canvas.height *currFile.zoom)+ 'px';
this.canvas.style.width = newWidth; this.canvas.style.width = newWidth;
this.canvas.style.height = newHeight; this.canvas.style.height = newHeight;
@ -144,7 +146,7 @@ class Layer {
setCanvasOffset (offsetLeft, offsetTop) { setCanvasOffset (offsetLeft, offsetTop) {
//horizontal offset //horizontal offset
var minXOffset = -this.canvasSize[0] * zoom; var minXOffset = -currFile.canvasSize[0] * currFile.zoom;
var maxXOffset = window.innerWidth - 300; var maxXOffset = window.innerWidth - 300;
if (offsetLeft < minXOffset) if (offsetLeft < minXOffset)
@ -155,7 +157,7 @@ class Layer {
this.canvas.style.left = offsetLeft +'px'; this.canvas.style.left = offsetLeft +'px';
//vertical offset //vertical offset
var minYOffset = -this.canvasSize[1] * zoom + 164; var minYOffset = -currFile.canvasSize[1] * currFile.zoom + 164;
var maxYOffset = window.innerHeight - 100; var maxYOffset = window.innerHeight - 100;
if (offsetTop < minYOffset) if (offsetTop < minYOffset)
@ -178,19 +180,19 @@ class Layer {
selectLayer(layer) { selectLayer(layer) {
if (layer == null) { if (layer == null) {
// Deselecting the old layer // Deselecting the old layer
currentLayer.deselectLayer(); currFile.currentLayer.deselectLayer();
// Selecting the current layer // Selecting the current layer
this.isSelected = true; this.isSelected = true;
this.menuEntry.classList.add("selected-layer"); this.menuEntry.classList.add("selected-layer");
currentLayer = LayerList.getLayerByName(this.menuEntry.getElementsByTagName("p")[0].innerHTML); currFile.currentLayer = LayerList.getLayerByName(this.menuEntry.getElementsByTagName("p")[0].innerHTML);
} }
else { else {
currentLayer.deselectLayer(); currFile.currentLayer.deselectLayer();
layer.isSelected = true; layer.isSelected = true;
layer.menuEntry.classList.add("selected-layer"); layer.menuEntry.classList.add("selected-layer");
currentLayer = layer; currFile.currentLayer = layer;
} }
} }
@ -256,8 +258,8 @@ class Layer {
updateLayerPreview() { updateLayerPreview() {
// Getting the canvas // Getting the canvas
let destination = this.menuEntry.getElementsByTagName("canvas")[0]; let destination = this.menuEntry.getElementsByTagName("canvas")[0];
let widthRatio = this.canvasSize[0] / this.canvasSize[1]; let widthRatio = currFile.canvasSize[0] / currFile.canvasSize[1];
let heightRatio = this.canvasSize[1] / this.canvasSize[0]; let heightRatio = currFile.canvasSize[1] / currFile.canvasSize[0];
// Computing width and height for the preview image // Computing width and height for the preview image
let previewWidth = destination.width; let previewWidth = destination.width;
@ -291,10 +293,10 @@ class Layer {
// If the current tool is the brush // If the current tool is the brush
if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') { if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
// I fill the rect // I fill the rect
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize); currFile.currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} else if (ToolManager.currentTool().name == 'eraser') { } else if (ToolManager.currentTool().name == 'eraser') {
// In case I'm using the eraser I must clear the rect // In case I'm using the eraser I must clear the rect
currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize); currFile.currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} }
//if we've reached the end goal, exit the loop //if we've reached the end goal, exit the loop

2
js/layers/PixelGrid.js
View File

@ -63,7 +63,7 @@ class PixelGrid extends Layer {
* *
*/ */
fillPixelGrid() { fillPixelGrid() {
let originalSize = this.canvasSize; let originalSize = currFile.canvasSize;
// The pixelGridCanvas is lineDistance times bigger so that the lines don't take 1 canvas pixel // 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 // (which would cover the whole canvas with the pixelGridColour), but they take 1/lineDistance canvas pixels

1
js/lib/jscolor.js
View File

@ -550,7 +550,6 @@ if (!window.jscolor) { window.jscolor = (function () {
//console.log(e.target,'=====================================') //console.log(e.target,'=====================================')
//if they clicked on the delete button [lospec] //if they clicked on the delete button [lospec]
if (e.target.className == 'delete-color-button') { 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 HistoryState().DeleteColor(jsc.picker.owner.toString()); new HistoryState().DeleteColor(jsc.picker.owner.toString());
ColorModule.deleteColor(jsc.picker.owner.styleElement); ColorModule.deleteColor(jsc.picker.owner.styleElement);

4
js/pixel-editor.js
View File

@ -9,6 +9,7 @@
//=include Dialogue.js //=include Dialogue.js
//=include History.js //=include History.js
//=include File.js
//=include ColorModule.js //=include ColorModule.js
//=include Tool.js //=include Tool.js
@ -50,10 +51,9 @@
//=include PaletteBlock.js //=include PaletteBlock.js
//=include SplashPage.js //=include SplashPage.js
/**buttons**/ /**menus**/
//=include FileManager.js //=include FileManager.js
//=include TopMenuModule.js //=include TopMenuModule.js
//=include _ellipse.js
/**event listeners**/ /**event listeners**/
//=include Input.js //=include Input.js

10
js/tools/BrushTool.js
View File

@ -19,15 +19,15 @@ class BrushTool extends ResizableTool {
return; return;
//draw line to current pixel //draw line to current pixel
if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') { if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
currentLayer.drawLine(Math.floor(this.prevMousePos[0]/zoom), currFile.currentLayer.drawLine(Math.floor(this.prevMousePos[0]/currFile.zoom),
Math.floor(this.prevMousePos[1]/zoom), Math.floor(this.prevMousePos[1]/currFile.zoom),
Math.floor(this.currMousePos[0]/zoom), Math.floor(this.currMousePos[0]/currFile.zoom),
Math.floor(this.currMousePos[1]/zoom), Math.floor(this.currMousePos[1]/currFile.zoom),
this.currSize this.currSize
); );
} }
currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
} }
onEnd(mousePos) { onEnd(mousePos) {

10
js/tools/EraserTool.js
View File

@ -19,15 +19,15 @@ class EraserTool extends ResizableTool {
return; return;
//draw line to current pixel //draw line to current pixel
if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') { if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
currentLayer.drawLine(Math.floor(this.prevMousePos[0]/zoom), currFile.currentLayer.drawLine(Math.floor(this.prevMousePos[0]/currFile.zoom),
Math.floor(this.prevMousePos[1]/zoom), Math.floor(this.prevMousePos[1]/currFile.zoom),
Math.floor(this.currMousePos[0]/zoom), Math.floor(this.currMousePos[0]/currFile.zoom),
Math.floor(this.currMousePos[1]/zoom), Math.floor(this.currMousePos[1]/currFile.zoom),
this.currSize this.currSize
); );
} }
currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
} }
onEnd(mousePos) { onEnd(mousePos) {

16
js/tools/EyeDropperTool.js
View File

@ -24,8 +24,8 @@ class EyedropperTool extends Tool {
this.selectedColor = this.pickColor(mousePos); this.selectedColor = this.pickColor(mousePos);
this.eyedropperPreview.style.borderColor = '#' + Color.rgbToHex(this.selectedColor); this.eyedropperPreview.style.borderColor = '#' + Color.rgbToHex(this.selectedColor);
this.eyedropperPreview.style.left = mousePos[0] + currentLayer.canvas.offsetLeft - 30 + 'px'; this.eyedropperPreview.style.left = mousePos[0] + currFile.currentLayer.canvas.offsetLeft - 30 + 'px';
this.eyedropperPreview.style.top = mousePos[1] + currentLayer.canvas.offsetTop - 30 + 'px'; this.eyedropperPreview.style.top = mousePos[1] + currFile.currentLayer.canvas.offsetTop - 30 + 'px';
const colorLightness = Math.max(this.selectedColor.r,this.selectedColor.g,this.selectedColor.b); const colorLightness = Math.max(this.selectedColor.r,this.selectedColor.g,this.selectedColor.b);
@ -53,8 +53,8 @@ class EyedropperTool extends Tool {
document.querySelector("#colors-menu li.selected")?.classList.remove("selected"); document.querySelector("#colors-menu li.selected")?.classList.remove("selected");
//set current color //set current color
for (let i=2; i<layers.length; i++) { for (let i=2; i<currFile.layers.length; i++) {
layers[i].context.fillStyle = '#' + colorHex; currFile.layers[i].context.fillStyle = '#' + colorHex;
} }
//make color selected //make color selected
@ -77,13 +77,13 @@ class EyedropperTool extends Tool {
// Returned colour // Returned colour
let selectedColor; let selectedColor;
for (let i=1; i<layers.length-3; i++) { for (let i=1; i<currFile.layers.length-3; i++) {
// Getting the colour of the pixel in the cursorLocation // Getting the colour of the pixel in the cursorLocation
tmpColour = layers[i].context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data; tmpColour = currFile.layers[i].context.getImageData(Math.floor(cursorLocation[0]/currFile.zoom),Math.floor(cursorLocation[1]/currFile.zoom),1,1).data;
// If it's not empty, I check if it's on the top of the previous colour // If it's not empty, I check if it's on the top of the previous colour
if (layers[i].canvas.style.zIndex > max || Util.isPixelEmpty(selectedColor) || selectedColor === undefined) { if (currFile.layers[i].canvas.style.zIndex > max || Util.isPixelEmpty(selectedColor) || selectedColor === undefined) {
max = layers[i].canvas.style.zIndex; max = currFile.layers[i].canvas.style.zIndex;
if (!Util.isPixelEmpty(tmpColour)) { if (!Util.isPixelEmpty(tmpColour)) {
selectedColor = tmpColour; selectedColor = tmpColour;

24
js/tools/FillTool.js
View File

@ -11,7 +11,7 @@ class FillTool extends Tool {
if (target.className != 'drawingCanvas') if (target.className != 'drawingCanvas')
return; return;
this.fill(mousePos); this.fill(mousePos);
currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
new HistoryState().EditCanvas(); new HistoryState().EditCanvas();
} }
@ -40,20 +40,20 @@ class FillTool extends Tool {
} }
//temporary image holds the data while we change it //temporary image holds the data while we change it
let tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); let tempImage = currFile.currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
//this is an array that holds all of the pixels at the top of the cluster //this is an array that holds all of the pixels at the top of the cluster
let topmostPixelsArray = [[Math.floor(cursorLocation[0]/zoom), Math.floor(cursorLocation[1]/zoom)]]; let topmostPixelsArray = [[Math.floor(cursorLocation[0]/currFile.zoom), Math.floor(cursorLocation[1]/currFile.zoom)]];
//console.log('topmostPixelsArray:',topmostPixelsArray) //console.log('topmostPixelsArray:',topmostPixelsArray)
//the offset of the pixel in the temp image data to start with //the offset of the pixel in the temp image data to start with
let startingPosition = (topmostPixelsArray[0][1] * canvasSize[0] + topmostPixelsArray[0][0]) * 4; let startingPosition = (topmostPixelsArray[0][1] * currFile.canvasSize[0] + topmostPixelsArray[0][0]) * 4;
//the color of the cluster that is being filled //the color of the cluster that is being filled
let clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2], tempImage.data[startingPosition+3]]; let clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2], tempImage.data[startingPosition+3]];
//the color to fill with //the color to fill with
let fillColor = Color.hexToRgb(currentLayer.context.fillStyle); let fillColor = Color.hexToRgb(currFile.currentLayer.context.fillStyle);
//if you try to fill with the same color that's already there, exit the function //if you try to fill with the same color that's already there, exit the function
if (clusterColor[0] == fillColor.r && if (clusterColor[0] == fillColor.r &&
@ -78,18 +78,18 @@ class FillTool extends Tool {
//this variable holds the index of where the starting values for the current pixel are in the data array //this variable holds the index of where the starting values for the current pixel are in the data array
//we multiply the number of rows down (y) times the width of each row, then add x. at the end we multiply by 4 because //we multiply the number of rows down (y) times the width of each row, then add x. at the end we multiply by 4 because
//each pixel has 4 values, rgba //each pixel has 4 values, rgba
let pixelPos = (y * canvasSize[0] + x) * 4; let pixelPos = (y * currFile.canvasSize[0] + x) * 4;
//move up in the image until you reach the top or the pixel you hit was not the right color //move up in the image until you reach the top or the pixel you hit was not the right color
while (y-- >= 0 && matchStartColor(tempImage, pixelPos, clusterColor)) { while (y-- >= 0 && matchStartColor(tempImage, pixelPos, clusterColor)) {
pixelPos -= canvasSize[0] * 4; pixelPos -= currFile.canvasSize[0] * 4;
} }
pixelPos += canvasSize[0] * 4; pixelPos += currFile.canvasSize[0] * 4;
++y; ++y;
reachLeft = false; reachLeft = false;
reachRight = false; reachRight = false;
while (y++ < canvasSize[1] - 1 && matchStartColor(tempImage, pixelPos, clusterColor)) { while (y++ < currFile.canvasSize[1] - 1 && matchStartColor(tempImage, pixelPos, clusterColor)) {
colorPixel(tempImage, pixelPos, fillColor); colorPixel(tempImage, pixelPos, fillColor);
if (x > 0) { if (x > 0) {
if (matchStartColor(tempImage, pixelPos - 4, clusterColor)) { if (matchStartColor(tempImage, pixelPos - 4, clusterColor)) {
@ -103,7 +103,7 @@ class FillTool extends Tool {
} }
} }
if (x < canvasSize[0] - 1) { if (x < currFile.canvasSize[0] - 1) {
if (matchStartColor(tempImage, pixelPos + 4, clusterColor)) { if (matchStartColor(tempImage, pixelPos + 4, clusterColor)) {
if (!reachRight) { if (!reachRight) {
topmostPixelsArray.push([x + 1, y]); topmostPixelsArray.push([x + 1, y]);
@ -115,10 +115,10 @@ class FillTool extends Tool {
} }
} }
pixelPos += canvasSize[0] * 4; pixelPos += currFile.canvasSize[0] * 4;
} }
} }
currentLayer.context.putImageData(tempImage, 0, 0); currFile.currentLayer.context.putImageData(tempImage, 0, 0);
} }
onDrag(mousePos, cursorTarget) { onDrag(mousePos, cursorTarget) {

24
js/tools/LineTool.js
View File

@ -11,7 +11,7 @@ class LineTool extends ResizableTool {
super.onStart(mousePos); super.onStart(mousePos);
// Putting the tmp layer on top of everything // Putting the tmp layer on top of everything
TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1; currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
this.startMousePos[0] = Math.floor(mousePos[0]) + 0.5; this.startMousePos[0] = Math.floor(mousePos[0]) + 0.5;
this.startMousePos[1] = Math.floor(mousePos[1]) + 0.5; this.startMousePos[1] = Math.floor(mousePos[1]) + 0.5;
@ -34,18 +34,18 @@ class LineTool extends ResizableTool {
onEnd(mousePos) { onEnd(mousePos) {
super.onEnd(mousePos); super.onEnd(mousePos);
const tmpContext = TMPLayer.context; const tmpContext = currFile.TMPLayer.context;
const tmpCanvas = TMPLayer.canvas; const tmpCanvas = currFile.TMPLayer.canvas;
// Setting the correct linewidth and colour // Setting the correct linewidth and colour
currentLayer.context.lineWidth = this.currSize; currFile.currentLayer.context.lineWidth = this.currSize;
// Drawing the line // Drawing the line
currentLayer.context.drawImage(tmpCanvas, 0, 0); currFile.currentLayer.context.drawImage(tmpCanvas, 0, 0);
// Update the layer preview // Update the layer preview
currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
// Clearing the tmp canvas // Clearing the tmp canvas
tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height); tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
} }
onSelect() { onSelect() {
@ -57,10 +57,10 @@ class LineTool extends ResizableTool {
} }
drawLine(mousePos) { drawLine(mousePos) {
let x0 = Math.floor(this.startMousePos[0]/zoom); let x0 = Math.floor(this.startMousePos[0]/currFile.zoom);
let y0 = Math.floor(this.startMousePos[1]/zoom); let y0 = Math.floor(this.startMousePos[1]/currFile.zoom);
let x1 = Math.floor(mousePos[0]/zoom); let x1 = Math.floor(mousePos[0]/currFile.zoom);
let y1 = Math.floor(mousePos[1]/zoom); let y1 = Math.floor(mousePos[1]/currFile.zoom);
let dx = Math.abs(x1-x0); let dx = Math.abs(x1-x0);
let dy = Math.abs(y1-y0); let dy = Math.abs(y1-y0);
@ -72,7 +72,7 @@ class LineTool extends ResizableTool {
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height);
canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1; canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
while (true) { while (true) {
context.fillRect(x0-Math.floor(this.currSize/2), y0-Math.floor(this.currSize/2), this.currSize, this.currSize); context.fillRect(x0-Math.floor(this.currSize/2), y0-Math.floor(this.currSize/2), this.currSize, this.currSize);

36
js/tools/MoveSelectionTool.js
View File

@ -30,7 +30,7 @@ class MoveSelectionTool extends Tool {
this.endSelection(); this.endSelection();
this.currSelection = this.lastCopiedSelection; this.currSelection = this.lastCopiedSelection;
// Cut the data // Cut the data
currentLayer.context.clearRect(this.currSelection.left-0.5, this.currSelection.top-0.5, currFile.currentLayer.context.clearRect(this.currSelection.left-0.5, this.currSelection.top-0.5,
this.currSelection.width, this.currSelection.height); this.currSelection.width, this.currSelection.height);
} }
@ -47,7 +47,7 @@ class MoveSelectionTool extends Tool {
this.currSelection = this.lastCopiedSelection; this.currSelection = this.lastCopiedSelection;
// Putting the vfx layer on top of everything // Putting the vfx layer on top of everything
VFXLayer.canvas.style.zIndex = MAX_Z_INDEX; currFile.VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
this.onDrag(this.currMousePos); this.onDrag(this.currMousePos);
new HistoryState().EditCanvas(); new HistoryState().EditCanvas();
@ -65,16 +65,16 @@ class MoveSelectionTool extends Tool {
onDrag(mousePos) { onDrag(mousePos) {
super.onDrag(mousePos); super.onDrag(mousePos);
this.currSelection = this.selectionTool.moveAnts(mousePos[0]/zoom, this.currSelection = this.selectionTool.moveAnts(mousePos[0]/currFile.zoom,
mousePos[1]/zoom, this.currSelection.width, this.currSelection.height); mousePos[1]/currFile.zoom, this.currSelection.width, this.currSelection.height);
// clear the entire tmp layer // clear the entire tmp layer
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height); TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
// put the image data on the tmp layer with offset // put the image data on the tmp layer with offset
TMPLayer.context.putImageData( currFile.TMPLayer.context.putImageData(
this.currSelection.data, this.currSelection.data,
Math.round(mousePos[0] / zoom) - this.currSelection.width / 2, Math.round(mousePos[0] / currFile.zoom) - this.currSelection.width / 2,
Math.round(mousePos[1] / zoom) - this.currSelection.height / 2); Math.round(mousePos[1] / currFile.zoom) - this.currSelection.height / 2);
} }
onEnd(mousePos) { onEnd(mousePos) {
@ -99,17 +99,17 @@ class MoveSelectionTool extends Tool {
super.onHover(mousePos); super.onHover(mousePos);
if (this.cursorInSelectedArea(mousePos)) { if (this.cursorInSelectedArea(mousePos)) {
canvasView.style.cursor = 'move'; currFile.canvasView.style.cursor = 'move';
} }
else { else {
canvasView.style.cursor = 'default'; currFile.canvasView.style.cursor = 'default';
} }
} }
cursorInSelectedArea(cursorPos) { cursorInSelectedArea(cursorPos) {
// Getting the coordinates relatively to the canvas // Getting the coordinates relatively to the canvas
let x = cursorPos[0] / zoom; let x = cursorPos[0] / currFile.zoom;
let y = cursorPos[1] / zoom; let y = cursorPos[1] / currFile.zoom;
if (this.currSelection.left <= x && x <= this.currSelection.right) { if (this.currSelection.left <= x && x <= this.currSelection.right) {
if (y <= this.currSelection.bottom && y >= this.currSelection.top) { if (y <= this.currSelection.bottom && y >= this.currSelection.top) {
@ -124,12 +124,12 @@ class MoveSelectionTool extends Tool {
if (this.currSelection == undefined) if (this.currSelection == undefined)
return; return;
// Clearing the tmp (move preview) and vfx (ants) layers // Clearing the tmp (move preview) and vfx (ants) layers
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height); currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height); currFile.VFXLayer.context.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
// I have to save the underlying data, so that the transparent pixels in the clipboard // I have to save the underlying data, so that the transparent pixels in the clipboard
// don't override the coloured pixels in the canvas // don't override the coloured pixels in the canvas
let underlyingImageData = currentLayer.context.getImageData( let underlyingImageData = currFile.currentLayer.context.getImageData(
this.currSelection.left, this.currSelection.top, this.currSelection.left, this.currSelection.top,
this.currSelection.width+1, this.currSelection.height+1 this.currSelection.width+1, this.currSelection.height+1
); );
@ -162,13 +162,13 @@ class MoveSelectionTool extends Tool {
} }
} }
currentLayer.context.putImageData(new ImageData(pasteData, this.currSelection.width+1), currFile.currentLayer.context.putImageData(new ImageData(pasteData, this.currSelection.width+1),
this.currSelection.left, this.currSelection.top this.currSelection.left, this.currSelection.top
); );
this.currSelection = undefined; this.currSelection = undefined;
currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
VFXLayer.canvas.style.zIndex = MIN_Z_INDEX; currFile.VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
// Switch to brush // Switch to brush
this.switchFunc(this.endTool); this.switchFunc(this.endTool);

12
js/tools/PanTool.js
View File

@ -8,29 +8,29 @@ class PanTool extends Tool {
onStart(mousePos) { onStart(mousePos) {
super.onStart(mousePos); super.onStart(mousePos);
canvasView.style.cursor = "url(\'/pixel-editor/pan-held.png\'), auto"; currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan-held.png\'), auto";
} }
onDrag(mousePos) { onDrag(mousePos) {
super.onDrag(mousePos); super.onDrag(mousePos);
// Setting first layer position // Setting first layer position
layers[0].setCanvasOffset(layers[0].canvas.offsetLeft + (mousePos[0] - this.startMousePos[0]), layers[0].canvas.offsetTop + (mousePos[1] - this.startMousePos[1])); currFile.layers[0].setCanvasOffset(currFile.layers[0].canvas.offsetLeft + (mousePos[0] - this.startMousePos[0]), currFile.layers[0].canvas.offsetTop + (mousePos[1] - this.startMousePos[1]));
// Copying that position to the other layers // Copying that position to the other layers
for (let i=1; i<layers.length; i++) { for (let i=1; i<currFile.layers.length; i++) {
layers[i].copyData(layers[0]); currFile.layers[i].copyData(currFile.layers[0]);
} }
} }
onEnd(mousePos) { onEnd(mousePos) {
super.onEnd(mousePos); super.onEnd(mousePos);
canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto"; currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
} }
onSelect() { onSelect() {
super.onSelect(); super.onSelect();
canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto"; currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
} }
onDeselect() { onDeselect() {

34
js/tools/RectangleTool.js
View File

@ -39,10 +39,10 @@ class RectangleTool extends ResizableTool {
super.onStart(mousePos); super.onStart(mousePos);
// Putting the tmp layer on top of everything // Putting the tmp layer on top of everything
TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1; currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
this.startMousePos[0] = Math.floor(mousePos[0] / zoom) + 0.5; this.startMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
this.startMousePos[1] = Math.floor(mousePos[1] / zoom) + 0.5; this.startMousePos[1] = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
new HistoryState().EditCanvas(); new HistoryState().EditCanvas();
} }
@ -50,7 +50,7 @@ class RectangleTool extends ResizableTool {
onDrag(mousePos, cursorTarget) { onDrag(mousePos, cursorTarget) {
// Drawing the rect at the right position // Drawing the rect at the right position
this.drawRect(Math.floor(mousePos[0] / zoom) + 0.5, Math.floor(mousePos[1] / zoom) + 0.5); this.drawRect(Math.floor(mousePos[0] / currFile.zoom) + 0.5, Math.floor(mousePos[1] / currFile.zoom) + 0.5);
} }
/** Finishes drawing the rect, decides the end coordinates and moves the preview rectangle to the /** Finishes drawing the rect, decides the end coordinates and moves the preview rectangle to the
@ -60,12 +60,10 @@ class RectangleTool extends ResizableTool {
*/ */
onEnd(mousePos) { onEnd(mousePos) {
super.onEnd(mousePos); super.onEnd(mousePos);
console.log("Rect end"); let tmpContext = currFile.TMPLayer.context;
let tmpContext = TMPLayer.context; let endRectX = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
let endRectY = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
let endRectX = Math.floor(mousePos[0] / zoom) + 0.5;
let endRectY = Math.floor(mousePos[1] / zoom) + 0.5;
let startRectX = this.startMousePos[0]; let startRectX = this.startMousePos[0];
let startRectY = this.startMousePos[1]; let startRectY = this.startMousePos[1];
@ -89,23 +87,23 @@ class RectangleTool extends ResizableTool {
startRectX -= 0.5; startRectX -= 0.5;
// Setting the correct linewidth and colour // Setting the correct linewidth and colour
currentLayer.context.lineWidth = this.currSize; currFile.currentLayer.context.lineWidth = this.currSize;
// Drawing the rect using 4 lines // Drawing the rect using 4 lines
currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize); currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize);
currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize); currFile.currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize); currFile.currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize); currFile.currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
// If I have to fill it, I do so // If I have to fill it, I do so
if (this.currFillMode == 'fill') { if (this.currFillMode == 'fill') {
currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY); currFile.currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
} }
// Update the layer preview // Update the layer preview
currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
// Clearing the tmp canvas // Clearing the tmp canvas
tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height); tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
} }
onSelect() { onSelect() {
@ -124,10 +122,10 @@ class RectangleTool extends ResizableTool {
*/ */
drawRect(x, y) { drawRect(x, y) {
// Getting the tmp context // Getting the tmp context
let tmpContext = TMPLayer.context; let tmpContext = currFile.TMPLayer.context;
// Clearing the tmp canvas // Clearing the tmp canvas
tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height); tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
// Drawing the rect // Drawing the rect
tmpContext.lineWidth = this.currSize; tmpContext.lineWidth = this.currSize;

34
js/tools/RectangularSelectionTool.js
View File

@ -15,25 +15,25 @@ class RectangularSelectionTool extends SelectionTool {
super.onStart(mousePos); super.onStart(mousePos);
// Putting the vfx layer on top of everything // Putting the vfx layer on top of everything
VFXLayer.canvas.style.zIndex = MAX_Z_INDEX; currFile.VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
// Saving the start coords of the rect // Saving the start coords of the rect
this.startMousePos[0] = Math.round(this.startMousePos[0] / zoom) - 0.5; this.startMousePos[0] = Math.round(this.startMousePos[0] / currFile.zoom) - 0.5;
this.startMousePos[1] = Math.round(this.startMousePos[1] / zoom) - 0.5; this.startMousePos[1] = Math.round(this.startMousePos[1] / currFile.zoom) - 0.5;
// Avoiding external selections // Avoiding external selections
if (this.startMousePos[0] < 0) { if (this.startMousePos[0] < 0) {
this.startMousePos[0] = 0; this.startMousePos[0] = 0;
} }
else if (this.startMousePos[0] > currentLayer.canvas.width) { else if (this.startMousePos[0] > currFile.currentLayer.canvas.width) {
this.startMousePos[0] = currentLayer.canvas.width; this.startMousePos[0] = currFile.currentLayer.canvas.width;
} }
if (this.startMousePos[1] < 0) { if (this.startMousePos[1] < 0) {
this.startMousePos[1] = 0; this.startMousePos[1] = 0;
} }
else if (this.startMousePos[1] > currentLayer.canvas.height) { else if (this.startMousePos[1] > currFile.currentLayer.canvas.height) {
this.startMousePos[1] = currentLayer.canvas.height; this.startMousePos[1] = currFile.currentLayer.canvas.height;
} }
// Drawing the rect // Drawing the rect
@ -44,7 +44,7 @@ class RectangularSelectionTool extends SelectionTool {
super.onDrag(mousePos); super.onDrag(mousePos);
// Drawing the rect // Drawing the rect
this.drawSelection(Math.round(mousePos[0] / zoom) + 0.5, Math.round(mousePos[1] / zoom) + 0.5); this.drawSelection(Math.round(mousePos[0] / currFile.zoom) + 0.5, Math.round(mousePos[1] / currFile.zoom) + 0.5);
} }
onEnd(mousePos) { onEnd(mousePos) {
@ -52,8 +52,8 @@ class RectangularSelectionTool extends SelectionTool {
new HistoryState().EditCanvas(); new HistoryState().EditCanvas();
// Getting the end position // Getting the end position
this.endMousePos[0] = Math.round(this.endMousePos[0] / zoom) + 0.5; this.endMousePos[0] = Math.round(this.endMousePos[0] / currFile.zoom) + 0.5;
this.endMousePos[1] = Math.round(this.endMousePos[1] / zoom) + 0.5; this.endMousePos[1] = Math.round(this.endMousePos[1] / currFile.zoom) + 0.5;
// Inverting end and start (start must always be the top left corner) // Inverting end and start (start must always be the top left corner)
if (this.endMousePos[0] < this.startMousePos[0]) { if (this.endMousePos[0] < this.startMousePos[0]) {
@ -81,17 +81,17 @@ class RectangularSelectionTool extends SelectionTool {
width: dataWidth, width: dataWidth,
height: dataHeight, height: dataHeight,
data: currentLayer.context.getImageData( data: currFile.currentLayer.context.getImageData(
this.startMousePos[0], this.startMousePos[1], this.startMousePos[0], this.startMousePos[1],
dataWidth + 1, dataHeight + 1) dataWidth + 1, dataHeight + 1)
}; };
// Moving the selection to the TMP layer. It will be moved back to the original // Moving the selection to the TMP layer. It will be moved back to the original
// layer if the user will cancel or end the selection // layer if the user will cancel or end the selection
currentLayer.context.clearRect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5, currFile.currentLayer.context.clearRect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5,
dataWidth + 1, dataHeight + 1); dataWidth + 1, dataHeight + 1);
// Moving those pixels from the current layer to the tmp layer // Moving those pixels from the current layer to the tmp layer
TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]); currFile.TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]);
this.moveTool.setSelectionData(this.currSelection, this); this.moveTool.setSelectionData(this.currSelection, this);
console.log("data set"); console.log("data set");
@ -107,10 +107,10 @@ class RectangularSelectionTool extends SelectionTool {
drawSelection(x, y) { drawSelection(x, y) {
// Getting the vfx context // Getting the vfx context
let vfxContext = VFXLayer.context; let vfxContext = currFile.VFXLayer.context;
// Clearing the vfx canvas // Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height); vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
vfxContext.lineWidth = 1; vfxContext.lineWidth = 1;
vfxContext.strokeStyle = 'black'; vfxContext.strokeStyle = 'black';
vfxContext.setLineDash([4]); vfxContext.setLineDash([4]);
@ -133,11 +133,11 @@ class RectangularSelectionTool extends SelectionTool {
*/ */
moveAnts(x, y, width, height) { moveAnts(x, y, width, height) {
// Getting the vfx context // Getting the vfx context
let vfxContext = VFXLayer.context; let vfxContext = currFile.VFXLayer.context;
let ret = this.currSelection; let ret = this.currSelection;
// Clearing the vfx canvas // Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height); vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
vfxContext.lineWidth = 1; vfxContext.lineWidth = 1;
vfxContext.setLineDash([4]); vfxContext.setLineDash([4]);

2
js/tools/ResizableTool.js
View File

@ -13,7 +13,7 @@ class ResizableTool extends Tool {
onRightDrag(mousePos, mouseEvent) { onRightDrag(mousePos, mouseEvent) {
//get new brush size based on x distance from original clicking location //get new brush size based on x distance from original clicking location
let distanceFromClick = mousePos[0]/zoom - this.startResizePos[0]/zoom; let distanceFromClick = mousePos[0]/currFile.zoom - this.startResizePos[0]/currFile.zoom;
let brushSizeChange = Math.round(distanceFromClick/10); let brushSizeChange = Math.round(distanceFromClick/10);
let newBrushSize = this.currSize + brushSizeChange; let newBrushSize = this.currSize + brushSizeChange;

70
js/tools/ZoomTool.js
View File

@ -6,77 +6,77 @@ class ZoomTool extends Tool {
super.onMouseWheel(mousePos, mode); super.onMouseWheel(mousePos, mode);
// Computing current width and height // Computing current width and height
let oldWidth = canvasSize[0] * zoom; let oldWidth = currFile.canvasSize[0] * currFile.zoom;
let oldHeight = canvasSize[1] * zoom; let oldHeight = currFile.canvasSize[1] * currFile.zoom;
let newWidth, newHeight; let newWidth, newHeight;
let prevZoom = zoom; let prevZoom = currFile.zoom;
let zoomed = false; let zoomed = false;
//change zoom level //change zoom level
//if you want to zoom out, and the zoom isnt already at the smallest level //if you want to zoom out, and the zoom isnt already at the smallest level
if (mode == 'out' && zoom > MIN_ZOOM_LEVEL) { if (mode == 'out' && currFile.zoom > MIN_ZOOM_LEVEL) {
zoomed = true; zoomed = true;
if (zoom > 2) if (currFile.zoom > 2)
zoom -= Math.ceil(zoom / 10); currFile.zoom -= Math.ceil(currFile.zoom / 10);
else else
zoom -= Math.ceil(zoom * 2 / 10) / 2; currFile.zoom -= Math.ceil(currFile.zoom * 2 / 10) / 2;
newWidth = canvasSize[0] * zoom; newWidth = currFile.canvasSize[0] * currFile.zoom;
newHeight = canvasSize[1] * zoom; newHeight = currFile.canvasSize[1] * currFile.zoom;
//adjust canvas position //adjust canvas position
layers[0].setCanvasOffset( currFile.layers[0].setCanvasOffset(
layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth, currFile.layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth,
layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight); currFile.layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
} }
//if you want to zoom in //if you want to zoom in
else if (mode == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) { else if (mode == 'in' && currFile.zoom + Math.ceil(currFile.zoom/10) < window.innerHeight/4) {
zoomed = true; zoomed = true;
if (zoom > 2) if (currFile.zoom > 2)
zoom += Math.ceil(zoom/10); currFile.zoom += Math.ceil(currFile.zoom/10);
else { else {
if (zoom + zoom/10 > 2) { if (currFile.zoom + currFile.zoom/10 > 2) {
zoom += Math.ceil(zoom/10); currFile.zoom += Math.ceil(currFile.zoom/10);
zoom = Math.ceil(zoom); currFile.zoom = Math.ceil(currFile.zoom);
} }
else { else {
zoom += Math.ceil(zoom * 2 / 10) / 2; currFile.zoom += Math.ceil(currFile.zoom * 2 / 10) / 2;
} }
} }
newWidth = canvasSize[0] * zoom; newWidth = currFile.canvasSize[0] * currFile.zoom;
newHeight = canvasSize[1] * zoom; newHeight = currFile.canvasSize[1] * currFile.zoom;
//adjust canvas position //adjust canvas position
layers[0].setCanvasOffset( currFile.layers[0].setCanvasOffset(
layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth), currFile.layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth),
layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight)); currFile.layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight));
} }
//resize canvas //resize canvas
layers[0].resize(); currFile.layers[0].resize();
// adjust brush size // adjust brush size
ToolManager.currentTool().updateCursor(); ToolManager.currentTool().updateCursor();
// Adjust pixel grid thickness // Adjust pixel grid thickness
if (zoomed) { if (zoomed) {
if (zoom <= 7) if (currFile.zoom <= 7)
pixelGrid.disablePixelGrid(); currFile.pixelGrid.disablePixelGrid();
else if (zoom >= 20 && mode == 'in') { else if (currFile.zoom >= 20 && mode == 'in') {
pixelGrid.enablePixelGrid(); currFile.pixelGrid.enablePixelGrid();
pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6); currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
} }
else if (prevZoom >= 20 && mode == 'out') { else if (prevZoom >= 20 && mode == 'out') {
pixelGrid.enablePixelGrid(); currFile.pixelGrid.enablePixelGrid();
pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6); currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
} }
else { else {
pixelGrid.enablePixelGrid(); currFile.pixelGrid.enablePixelGrid();
} }
} }
for (let i=1; i<layers.length; i++) { for (let i=1; i<currFile.layers.length; i++) {
layers[i].copyData(layers[0]); currFile.layers[i].copyData(currFile.layers[0]);
} }
} }
} }

0
js/_ellipse.js → js/tools/_ellipse.js
View File

6
views/main-menu.hbs
View File

@ -13,9 +13,9 @@
<li> <li>
<button>Edit</button> <button>Edit</button>
<ul> <ul>
<li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li> <li><button id="resize-canvas-button" onclick = "currFile.openResizeCanvasWindow()">Resize canvas</button></li>
<li><button id="resize-sprite-button" onclick = "openResizeSpriteWindow()">Scale sprite</button></li> <li><button id="resize-sprite-button" onclick = "currFile.openResizeSpriteWindow()">Scale sprite</button></li>
<li><button onclick = "trimCanvas()">Trim canvas</button></li> <li><button onclick = "currFile.trimCanvas()">Trim canvas</button></li>
<li><button id="undo-button" class="disabled">Undo</button></li> <li><button id="undo-button" class="disabled">Undo</button></li>
<li><button id="redo-button" class="disabled">Redo</button></li> <li><button id="redo-button" class="disabled">Redo</button></li>
</ul> </ul>