Removed all global variables, worked on File class and put canvas resizing functions in File
This commit is contained in:
unsettledgames
parent
d972f9c530
commit
b2f5521750
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
327
js/File.js
|
|
@ -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();
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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
100
js/LayerList.js
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
18
js/Tool.js
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue