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);
//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
for (var i=0;i<tempImage.data.length;i+=4) {
@ -332,7 +332,7 @@ const ColorModule = (() => {
}
//put temp image back onto canvas
currentLayer.context.putImageData(tempImage,0,0);
currFile.currentLayer.context.putImageData(tempImage,0,0);
}
function getCurrentPalette() {
@ -395,9 +395,10 @@ const ColorModule = (() => {
//create array out of colors object
let colorPaletteArray = [];
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
let imageData = layers[i].context.getImageData(0, 0, layers[i].canvasSize[0], layers[i].canvasSize[1]).data;
for (let i=0; i<currFile.layers.length; i++) {
if (currFile.layers[i].hasCanvas()) {
let imageData = currFile.layers[i].context.getImageData(
0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
let dataLength = imageData.length;
for (let j=0; j<dataLength; j += 4) {
@ -429,9 +430,9 @@ const ColorModule = (() => {
if (refLayer)
color = refLayer.context.fillStyle;
for (let i=0; i<layers.length - 1; i++) {
layers[i].context.fillStyle = color;
layers[i].context.strokeStyle = color;
for (let i=0; i<currFile.layers.length - 1; i++) {
currFile.layers[i].context.fillStyle = 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';
//turn pixel grid off
pixelGrid.togglePixelGrid('off');
currFile.pixelGrid.togglePixelGrid('off');
}
//switch to basic mode
else {
@ -32,7 +32,7 @@ const EditorState = (() => {
}
// Selecting the current layer
currentLayer.selectLayer();
currFile.currentLayer.selectLayer();
// Flatten the layers
LayerList.flatten(true);
}
@ -47,7 +47,7 @@ const EditorState = (() => {
pixelEditorMode = 'Basic';
document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode';
pixelGrid.togglePixelGrid('on');
currFile.pixelGrid.togglePixelGrid('on');
}
}

327
js/File.js
View File

@ -1,12 +1,319 @@
// A file has layers
// It probably contains the LayerList, which should include the layers array
// A file contains sprite scaling and canvas resizing
class File {
// Canvas, canvas state
canvasSize = [];
zoom = 7;
canvasView = document.getElementById("canvas-view");
/*
let canvasSize
let canvasView
let layerList
// Layers
layers = [];
currentLayer = undefined;
VFXLayer = undefined;
TMPLayer = undefined;
pixelGrid = undefined;
checkerBoard = undefined
resizeCanvas()
scaleSprite()
*/
// Canvas resize attributes
// 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...'){
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 {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1];
var fileName = 'pixel-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1];
selectedPalette = 'none';
}
@ -33,7 +33,7 @@ const FileManager = (() => {
var paletteAbbreviation = palettes[selectedPalette].name;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
} else {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
var fileName = 'pixel-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1]+'.png';
selectedPalette = 'none';
}
@ -58,7 +58,7 @@ const FileManager = (() => {
linkHolder.click();
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() {
@ -70,20 +70,20 @@ const FileManager = (() => {
// Creating a tmp canvas to flatten everything
var exportCanvas = document.createElement("canvas");
var emptyCanvas = document.createElement("canvas");
var layersCopy = layers.slice();
var layersCopy = currFile.layers.slice();
exportCanvas.width = layers[0].canvasSize[0];
exportCanvas.height = layers[0].canvasSize[1];
exportCanvas.width = currFile.canvasSize[0];
exportCanvas.height = currFile.canvasSize[1];
emptyCanvas.width = layers[0].canvasSize[0];
emptyCanvas.height = layers[0].canvasSize[1];
emptyCanvas.width = currFile.canvasSize[0];
emptyCanvas.height = currFile.canvasSize[1];
// Sorting the layers by z index
layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
// Merging every layer on the export canvas
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);
}
// 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
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');
//draw the image onto the canvas
currentLayer.context.drawImage(img, 0, 0);
currFile.currentLayer.context.drawImage(img, 0, 0);
ColorModule.createPaletteFromLayers();
//track google event
@ -195,11 +195,11 @@ const FileManager = (() => {
// use a dictionary
let dictionary = {};
// 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);
// save canvas size
dictionary['canvasWidth'] = currentLayer.canvasSize[0];
dictionary['canvasHeight'] = currentLayer.canvasSize[1];
dictionary['canvasWidth'] = currFile.canvasSize[0];
dictionary['canvasHeight'] = currFile.canvasSize[1];
// save editor mode
dictionary['editorMode'] = EditorState.getCurrentMode();
// save palette

76
js/History.js
View File

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

6
js/Input.js
View File

@ -31,7 +31,7 @@ const Input = (() => {
currentMouseEvent = event;
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();
}
}
@ -49,8 +49,8 @@ const Input = (() => {
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= currentLayer.canvas.offsetLeft;
y -= currentLayer.canvas.offsetTop;
x -= currFile.currentLayer.canvas.offsetLeft;
y -= currFile.currentLayer.canvas.offsetTop;
return [Math.round(x), Math.round(y)];
}

100
js/LayerList.js
View File

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

2
js/Settings.js
View File

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

51
js/Startup.js
View File

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

18
js/Tool.js
View File

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

2
js/ToolManager.js
View File

@ -19,7 +19,7 @@ const ToolManager = (() => {
currTool = tools["brush"];
currTool.onSelect();
canvasView.style.cursor = 'default';
currFile.canvasView.style.cursor = 'default';
Events.on("mouseup", window, onMouseUp);
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();
// 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);
// Initializing the input fields
data.width = layers[0].canvasSize[0];
data.height = layers[1].canvasSize[1];
data.width = currFile.canvasSize[0];
data.height = currFile.canvasSize[1];
startData.width = parseInt(data.width);
startData.height = parseInt(data.height);
@ -41,8 +41,8 @@ function openResizeSpriteWindow() {
*
*/
function initResizeSpriteInputs() {
document.getElementById("rs-width").value = layers[0].canvasSize[0];
document.getElementById("rs-height").value = layers[0].canvasSize[1];
document.getElementById("rs-width").value = currFile.canvasSize[0];
document.getElementById("rs-height").value = currFile.canvasSize[1];
document.getElementById("rs-width-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
let imageDatasCopy = [];
oldWidth = layers[0].canvasSize[0];
oldHeight = layers[1].canvasSize[1];
oldWidth = currFile.canvasSize[0];
oldHeight = currFile.canvasSize[1];
rcPivot = "middle";
// Updating values if the user didn't press enter
@ -105,15 +105,15 @@ function resizeSprite(event, ratio) {
newHeight = data.height;
}
else {
newWidth = layers[0].canvasSize[0] * ratio[0];
newHeight = layers[1].canvasSize[1] * ratio[1];
newWidth = currFile.canvasSize[0] * ratio[0];
newHeight = currFile.canvasSize[1] * ratio[1];
}
// Get all the image datas
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
rsImageDatas.push(layers[i].context.getImageData(
0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1])
for (let i=0; i<currFile.layers.length; i++) {
if (currFile.layers[i].hasCanvas()) {
rsImageDatas.push(currFile.layers[i].context.getImageData(
0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
);
}
}
@ -127,15 +127,15 @@ function resizeSprite(event, ratio) {
}
// Resizing the canvas
resizeCanvas(null, {x: newWidth, y: newHeight});
currFile.resizeCanvas(null, {x: newWidth, y: newHeight});
// Put the image datas on the new canvases
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
layers[i].context.putImageData(
for (let i=0; i<currFile.layers.length; i++) {
if (currFile.layers[i].hasCanvas()) {
currFile.layers[i].context.putImageData(
resizeImageData(rsImageDatas[layerIndex], newWidth, newHeight, currentAlgo), 0, 0
);
layers[i].updateLayerPreview();
currFile.layers[i].updateLayerPreview();
layerIndex++;
}
}
@ -147,8 +147,8 @@ function resizeSprite(event, ratio) {
startData.height = data.height;
}
else {
startData.width = layers[0].canvasSize[0];
startData.height = layers[0].canvasSize[1];
startData.width = currFile.canvasSize[0];
startData.height = currFile.canvasSize[1];
}
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() {
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)
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;
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 rectY;
// 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;
}
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;
}
else {
rectY = this.canvasSize[1];
rectY = currFile.canvasSize[1];
}
// 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
// first menuEntry is used (the one that appears on load)
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
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
// to just type layer.context, we should discuss this
this.context = this.canvas.getContext('2d');
@ -69,20 +69,22 @@ class Layer {
this.initialize();
}
hasCanvas() {
return this.menuEntry != null;
}
// Initializes the canvas
initialize() {
//resize canvas
this.canvas.width = this.canvasSize[0];
this.canvas.height = this.canvasSize[1];
this.canvas.style.width = (this.canvas.width*zoom)+'px';
this.canvas.style.height = (this.canvas.height*zoom)+'px';
this.canvas.style.width = (this.canvas.width*currFile.zoom)+'px';
this.canvas.style.height = (this.canvas.height*currFile.zoom)+'px';
//show canvas
this.canvas.style.display = 'block';
//center canvas in window
this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
this.canvas.style.left = 64+currFile.canvasView.clientWidth/2-(currFile.canvasSize[0]*currFile.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.mozImageSmoothingEnabled = false;
@ -94,8 +96,8 @@ class Layer {
if (this.oldLayerName != null) {
let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
for (let i=0; i<layers.length; i++) {
if (name === layers[i].name) {
for (let i=0; i<currFile.layers.length; i++) {
if (name === currFile.layers[i].name) {
name += ' (1)';
i = 0;
}
@ -103,25 +105,25 @@ class Layer {
this.name = 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;
}
}
hover() {
// Hides all the layers but the current one
for (let i=1; i<layers.length - nAppLayers; i++) {
if (layers[i] !== this) {
layers[i].canvas.style.opacity = 0.3;
for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
if (currFile.layers[i] !== this) {
currFile.layers[i].canvas.style.opacity = 0.3;
}
}
}
unhover() {
// Shows all the layers again
for (let i=1; i<layers.length - nAppLayers; i++) {
if (layers[i] !== this) {
layers[i].canvas.style.opacity = 1;
for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
if (currFile.layers[i] !== this) {
currFile.layers[i].canvas.style.opacity = 1;
}
}
}
@ -135,8 +137,8 @@ class Layer {
// Resizes canvas
resize() {
let newWidth = (this.canvas.width * zoom) + 'px';
let newHeight = (this.canvas.height *zoom)+ 'px';
let newWidth = (this.canvas.width * currFile.zoom) + 'px';
let newHeight = (this.canvas.height *currFile.zoom)+ 'px';
this.canvas.style.width = newWidth;
this.canvas.style.height = newHeight;
@ -144,7 +146,7 @@ class Layer {
setCanvasOffset (offsetLeft, offsetTop) {
//horizontal offset
var minXOffset = -this.canvasSize[0] * zoom;
var minXOffset = -currFile.canvasSize[0] * currFile.zoom;
var maxXOffset = window.innerWidth - 300;
if (offsetLeft < minXOffset)
@ -155,7 +157,7 @@ class Layer {
this.canvas.style.left = offsetLeft +'px';
//vertical offset
var minYOffset = -this.canvasSize[1] * zoom + 164;
var minYOffset = -currFile.canvasSize[1] * currFile.zoom + 164;
var maxYOffset = window.innerHeight - 100;
if (offsetTop < minYOffset)
@ -178,19 +180,19 @@ class Layer {
selectLayer(layer) {
if (layer == null) {
// Deselecting the old layer
currentLayer.deselectLayer();
currFile.currentLayer.deselectLayer();
// Selecting the current layer
this.isSelected = true;
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 {
currentLayer.deselectLayer();
currFile.currentLayer.deselectLayer();
layer.isSelected = true;
layer.menuEntry.classList.add("selected-layer");
currentLayer = layer;
currFile.currentLayer = layer;
}
}
@ -256,8 +258,8 @@ class Layer {
updateLayerPreview() {
// Getting the canvas
let destination = this.menuEntry.getElementsByTagName("canvas")[0];
let widthRatio = this.canvasSize[0] / this.canvasSize[1];
let heightRatio = this.canvasSize[1] / this.canvasSize[0];
let widthRatio = currFile.canvasSize[0] / currFile.canvasSize[1];
let heightRatio = currFile.canvasSize[1] / currFile.canvasSize[0];
// Computing width and height for the preview image
let previewWidth = destination.width;
@ -291,10 +293,10 @@ class Layer {
// If the current tool is the brush
if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
// 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') {
// 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

2
js/layers/PixelGrid.js
View File

@ -63,7 +63,7 @@ class PixelGrid extends Layer {
*
*/
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
// (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,'=====================================')
//if they clicked on the delete button [lospec]
if (e.target.className == 'delete-color-button') {
//saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: canvas.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
new HistoryState().DeleteColor(jsc.picker.owner.toString());
ColorModule.deleteColor(jsc.picker.owner.styleElement);

4
js/pixel-editor.js
View File

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

10
js/tools/BrushTool.js
View File

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

10
js/tools/EraserTool.js
View File

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

16
js/tools/EyeDropperTool.js
View File

@ -24,8 +24,8 @@ class EyedropperTool extends Tool {
this.selectedColor = this.pickColor(mousePos);
this.eyedropperPreview.style.borderColor = '#' + Color.rgbToHex(this.selectedColor);
this.eyedropperPreview.style.left = mousePos[0] + currentLayer.canvas.offsetLeft - 30 + 'px';
this.eyedropperPreview.style.top = mousePos[1] + currentLayer.canvas.offsetTop - 30 + 'px';
this.eyedropperPreview.style.left = mousePos[0] + currFile.currentLayer.canvas.offsetLeft - 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);
@ -53,8 +53,8 @@ class EyedropperTool extends Tool {
document.querySelector("#colors-menu li.selected")?.classList.remove("selected");
//set current color
for (let i=2; i<layers.length; i++) {
layers[i].context.fillStyle = '#' + colorHex;
for (let i=2; i<currFile.layers.length; i++) {
currFile.layers[i].context.fillStyle = '#' + colorHex;
}
//make color selected
@ -77,13 +77,13 @@ class EyedropperTool extends Tool {
// Returned colour
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
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 (layers[i].canvas.style.zIndex > max || Util.isPixelEmpty(selectedColor) || selectedColor === undefined) {
max = layers[i].canvas.style.zIndex;
if (currFile.layers[i].canvas.style.zIndex > max || Util.isPixelEmpty(selectedColor) || selectedColor === undefined) {
max = currFile.layers[i].canvas.style.zIndex;
if (!Util.isPixelEmpty(tmpColour)) {
selectedColor = tmpColour;

24
js/tools/FillTool.js
View File

@ -11,7 +11,7 @@ class FillTool extends Tool {
if (target.className != 'drawingCanvas')
return;
this.fill(mousePos);
currentLayer.updateLayerPreview();
currFile.currentLayer.updateLayerPreview();
new HistoryState().EditCanvas();
}
@ -40,20 +40,20 @@ class FillTool extends Tool {
}
//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
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)
//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
let clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2], tempImage.data[startingPosition+3]];
//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 (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
//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
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
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;
reachLeft = 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);
if (x > 0) {
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 (!reachRight) {
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) {

24
js/tools/LineTool.js
View File

@ -11,7 +11,7 @@ class LineTool extends ResizableTool {
super.onStart(mousePos);
// 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[1] = Math.floor(mousePos[1]) + 0.5;
@ -34,18 +34,18 @@ class LineTool extends ResizableTool {
onEnd(mousePos) {
super.onEnd(mousePos);
const tmpContext = TMPLayer.context;
const tmpCanvas = TMPLayer.canvas;
const tmpContext = currFile.TMPLayer.context;
const tmpCanvas = currFile.TMPLayer.canvas;
// Setting the correct linewidth and colour
currentLayer.context.lineWidth = this.currSize;
currFile.currentLayer.context.lineWidth = this.currSize;
// Drawing the line
currentLayer.context.drawImage(tmpCanvas, 0, 0);
currFile.currentLayer.context.drawImage(tmpCanvas, 0, 0);
// Update the layer preview
currentLayer.updateLayerPreview();
currFile.currentLayer.updateLayerPreview();
// 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() {
@ -57,10 +57,10 @@ class LineTool extends ResizableTool {
}
drawLine(mousePos) {
let x0 = Math.floor(this.startMousePos[0]/zoom);
let y0 = Math.floor(this.startMousePos[1]/zoom);
let x1 = Math.floor(mousePos[0]/zoom);
let y1 = Math.floor(mousePos[1]/zoom);
let x0 = Math.floor(this.startMousePos[0]/currFile.zoom);
let y0 = Math.floor(this.startMousePos[1]/currFile.zoom);
let x1 = Math.floor(mousePos[0]/currFile.zoom);
let y1 = Math.floor(mousePos[1]/currFile.zoom);
let dx = Math.abs(x1-x0);
let dy = Math.abs(y1-y0);
@ -72,7 +72,7 @@ class LineTool extends ResizableTool {
const context = canvas.getContext('2d');
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) {
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.currSelection = this.lastCopiedSelection;
// 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);
}
@ -47,7 +47,7 @@ class MoveSelectionTool extends Tool {
this.currSelection = this.lastCopiedSelection;
// 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);
new HistoryState().EditCanvas();
@ -65,16 +65,16 @@ class MoveSelectionTool extends Tool {
onDrag(mousePos) {
super.onDrag(mousePos);
this.currSelection = this.selectionTool.moveAnts(mousePos[0]/zoom,
mousePos[1]/zoom, this.currSelection.width, this.currSelection.height);
this.currSelection = this.selectionTool.moveAnts(mousePos[0]/currFile.zoom,
mousePos[1]/currFile.zoom, this.currSelection.width, this.currSelection.height);
// 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
TMPLayer.context.putImageData(
currFile.TMPLayer.context.putImageData(
this.currSelection.data,
Math.round(mousePos[0] / zoom) - this.currSelection.width / 2,
Math.round(mousePos[1] / zoom) - this.currSelection.height / 2);
Math.round(mousePos[0] / currFile.zoom) - this.currSelection.width / 2,
Math.round(mousePos[1] / currFile.zoom) - this.currSelection.height / 2);
}
onEnd(mousePos) {
@ -99,17 +99,17 @@ class MoveSelectionTool extends Tool {
super.onHover(mousePos);
if (this.cursorInSelectedArea(mousePos)) {
canvasView.style.cursor = 'move';
currFile.canvasView.style.cursor = 'move';
}
else {
canvasView.style.cursor = 'default';
currFile.canvasView.style.cursor = 'default';
}
}
cursorInSelectedArea(cursorPos) {
// Getting the coordinates relatively to the canvas
let x = cursorPos[0] / zoom;
let y = cursorPos[1] / zoom;
let x = cursorPos[0] / currFile.zoom;
let y = cursorPos[1] / currFile.zoom;
if (this.currSelection.left <= x && x <= this.currSelection.right) {
if (y <= this.currSelection.bottom && y >= this.currSelection.top) {
@ -124,12 +124,12 @@ class MoveSelectionTool extends Tool {
if (this.currSelection == undefined)
return;
// Clearing the tmp (move preview) and vfx (ants) layers
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.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
// 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.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 = undefined;
currentLayer.updateLayerPreview();
VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
currFile.currentLayer.updateLayerPreview();
currFile.VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
// Switch to brush
this.switchFunc(this.endTool);

12
js/tools/PanTool.js
View File

@ -8,29 +8,29 @@ class PanTool extends Tool {
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) {
super.onDrag(mousePos);
// 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
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
for (let i=1; i<currFile.layers.length; i++) {
currFile.layers[i].copyData(currFile.layers[0]);
}
}
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() {
super.onSelect();
canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
}
onDeselect() {

34
js/tools/RectangleTool.js
View File

@ -39,10 +39,10 @@ class RectangleTool extends ResizableTool {
super.onStart(mousePos);
// 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[1] = Math.floor(mousePos[1] / zoom) + 0.5;
this.startMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
this.startMousePos[1] = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
new HistoryState().EditCanvas();
}
@ -50,7 +50,7 @@ class RectangleTool extends ResizableTool {
onDrag(mousePos, cursorTarget) {
// 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
@ -60,12 +60,10 @@ class RectangleTool extends ResizableTool {
*/
onEnd(mousePos) {
super.onEnd(mousePos);
console.log("Rect end");
let tmpContext = currFile.TMPLayer.context;
let tmpContext = TMPLayer.context;
let endRectX = Math.floor(mousePos[0] / zoom) + 0.5;
let endRectY = Math.floor(mousePos[1] / zoom) + 0.5;
let endRectX = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
let endRectY = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
let startRectX = this.startMousePos[0];
let startRectY = this.startMousePos[1];
@ -89,23 +87,23 @@ class RectangleTool extends ResizableTool {
startRectX -= 0.5;
// Setting the correct linewidth and colour
currentLayer.context.lineWidth = this.currSize;
currFile.currentLayer.context.lineWidth = this.currSize;
// Drawing the rect using 4 lines
currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize);
currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
currFile.currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
currFile.currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
currFile.currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
// If I have to fill it, I do so
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
currentLayer.updateLayerPreview();
currFile.currentLayer.updateLayerPreview();
// 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() {
@ -124,10 +122,10 @@ class RectangleTool extends ResizableTool {
*/
drawRect(x, y) {
// Getting the tmp context
let tmpContext = TMPLayer.context;
let tmpContext = currFile.TMPLayer.context;
// 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
tmpContext.lineWidth = this.currSize;

34
js/tools/RectangularSelectionTool.js
View File

@ -15,25 +15,25 @@ class RectangularSelectionTool extends SelectionTool {
super.onStart(mousePos);
// 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
this.startMousePos[0] = Math.round(this.startMousePos[0] / zoom) - 0.5;
this.startMousePos[1] = Math.round(this.startMousePos[1] / zoom) - 0.5;
this.startMousePos[0] = Math.round(this.startMousePos[0] / currFile.zoom) - 0.5;
this.startMousePos[1] = Math.round(this.startMousePos[1] / currFile.zoom) - 0.5;
// Avoiding external selections
if (this.startMousePos[0] < 0) {
this.startMousePos[0] = 0;
}
else if (this.startMousePos[0] > currentLayer.canvas.width) {
this.startMousePos[0] = currentLayer.canvas.width;
else if (this.startMousePos[0] > currFile.currentLayer.canvas.width) {
this.startMousePos[0] = currFile.currentLayer.canvas.width;
}
if (this.startMousePos[1] < 0) {
this.startMousePos[1] = 0;
}
else if (this.startMousePos[1] > currentLayer.canvas.height) {
this.startMousePos[1] = currentLayer.canvas.height;
else if (this.startMousePos[1] > currFile.currentLayer.canvas.height) {
this.startMousePos[1] = currFile.currentLayer.canvas.height;
}
// Drawing the rect
@ -44,7 +44,7 @@ class RectangularSelectionTool extends SelectionTool {
super.onDrag(mousePos);
// 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) {
@ -52,8 +52,8 @@ class RectangularSelectionTool extends SelectionTool {
new HistoryState().EditCanvas();
// Getting the end position
this.endMousePos[0] = Math.round(this.endMousePos[0] / zoom) + 0.5;
this.endMousePos[1] = Math.round(this.endMousePos[1] / zoom) + 0.5;
this.endMousePos[0] = Math.round(this.endMousePos[0] / currFile.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)
if (this.endMousePos[0] < this.startMousePos[0]) {
@ -81,17 +81,17 @@ class RectangularSelectionTool extends SelectionTool {
width: dataWidth,
height: dataHeight,
data: currentLayer.context.getImageData(
data: currFile.currentLayer.context.getImageData(
this.startMousePos[0], this.startMousePos[1],
dataWidth + 1, dataHeight + 1)
};
// 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
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);
// 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);
console.log("data set");
@ -107,10 +107,10 @@ class RectangularSelectionTool extends SelectionTool {
drawSelection(x, y) {
// Getting the vfx context
let vfxContext = VFXLayer.context;
let vfxContext = currFile.VFXLayer.context;
// 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.strokeStyle = 'black';
vfxContext.setLineDash([4]);
@ -133,11 +133,11 @@ class RectangularSelectionTool extends SelectionTool {
*/
moveAnts(x, y, width, height) {
// Getting the vfx context
let vfxContext = VFXLayer.context;
let vfxContext = currFile.VFXLayer.context;
let ret = this.currSelection;
// 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.setLineDash([4]);

2
js/tools/ResizableTool.js
View File

@ -13,7 +13,7 @@ class ResizableTool extends Tool {
onRightDrag(mousePos, mouseEvent) {
//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 newBrushSize = this.currSize + brushSizeChange;

70
js/tools/ZoomTool.js
View File

@ -6,77 +6,77 @@ class ZoomTool extends Tool {
super.onMouseWheel(mousePos, mode);
// Computing current width and height
let oldWidth = canvasSize[0] * zoom;
let oldHeight = canvasSize[1] * zoom;
let oldWidth = currFile.canvasSize[0] * currFile.zoom;
let oldHeight = currFile.canvasSize[1] * currFile.zoom;
let newWidth, newHeight;
let prevZoom = zoom;
let prevZoom = currFile.zoom;
let zoomed = false;
//change zoom 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;
if (zoom > 2)
zoom -= Math.ceil(zoom / 10);
if (currFile.zoom > 2)
currFile.zoom -= Math.ceil(currFile.zoom / 10);
else
zoom -= Math.ceil(zoom * 2 / 10) / 2;
currFile.zoom -= Math.ceil(currFile.zoom * 2 / 10) / 2;
newWidth = canvasSize[0] * zoom;
newHeight = canvasSize[1] * zoom;
newWidth = currFile.canvasSize[0] * currFile.zoom;
newHeight = currFile.canvasSize[1] * currFile.zoom;
//adjust canvas position
layers[0].setCanvasOffset(
layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth,
layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
currFile.layers[0].setCanvasOffset(
currFile.layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth,
currFile.layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
}
//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;
if (zoom > 2)
zoom += Math.ceil(zoom/10);
if (currFile.zoom > 2)
currFile.zoom += Math.ceil(currFile.zoom/10);
else {
if (zoom + zoom/10 > 2) {
zoom += Math.ceil(zoom/10);
zoom = Math.ceil(zoom);
if (currFile.zoom + currFile.zoom/10 > 2) {
currFile.zoom += Math.ceil(currFile.zoom/10);
currFile.zoom = Math.ceil(currFile.zoom);
}
else {
zoom += Math.ceil(zoom * 2 / 10) / 2;
currFile.zoom += Math.ceil(currFile.zoom * 2 / 10) / 2;
}
}
newWidth = canvasSize[0] * zoom;
newHeight = canvasSize[1] * zoom;
newWidth = currFile.canvasSize[0] * currFile.zoom;
newHeight = currFile.canvasSize[1] * currFile.zoom;
//adjust canvas position
layers[0].setCanvasOffset(
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].setCanvasOffset(
currFile.layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth),
currFile.layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight));
}
//resize canvas
layers[0].resize();
currFile.layers[0].resize();
// adjust brush size
ToolManager.currentTool().updateCursor();
// Adjust pixel grid thickness
if (zoomed) {
if (zoom <= 7)
pixelGrid.disablePixelGrid();
else if (zoom >= 20 && mode == 'in') {
pixelGrid.enablePixelGrid();
pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6);
if (currFile.zoom <= 7)
currFile.pixelGrid.disablePixelGrid();
else if (currFile.zoom >= 20 && mode == 'in') {
currFile.pixelGrid.enablePixelGrid();
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
}
else if (prevZoom >= 20 && mode == 'out') {
pixelGrid.enablePixelGrid();
pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6);
currFile.pixelGrid.enablePixelGrid();
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
}
else {
pixelGrid.enablePixelGrid();
currFile.pixelGrid.enablePixelGrid();
}
}
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
for (let i=1; i<currFile.layers.length; i++) {
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>
<button>Edit</button>
<ul>
<li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
<li><button id="resize-sprite-button" onclick = "openResizeSpriteWindow()">Scale sprite</button></li>
<li><button onclick = "trimCanvas()">Trim canvas</button></li>
<li><button id="resize-canvas-button" onclick = "currFile.openResizeCanvasWindow()">Resize canvas</button></li>
<li><button id="resize-sprite-button" onclick = "currFile.openResizeSpriteWindow()">Scale sprite</button></li>
<li><button onclick = "currFile.trimCanvas()">Trim canvas</button></li>
<li><button id="undo-button" class="disabled">Undo</button></li>
<li><button id="redo-button" class="disabled">Redo</button></li>
</ul>