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

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

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

10
js/tools/BrushTool.js
View File

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

10
js/tools/EraserTool.js
View File

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

16
js/tools/EyeDropperTool.js
View File

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

24
js/tools/FillTool.js
View File

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

24
js/tools/LineTool.js
View File

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

36
js/tools/MoveSelectionTool.js
View File

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

12
js/tools/PanTool.js
View File

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

34
js/tools/RectangleTool.js
View File

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

34
js/tools/RectangularSelectionTool.js
View File

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

2
js/tools/ResizableTool.js
View File

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

70
js/tools/ZoomTool.js
View File

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

144
js/tools/_ellipse.js Normal file
View File

@ -0,0 +1,144 @@
// Saving the empty rect svg
var emptyEllipseSVG = document.getElementById("ellipse-empty-button-svg");
// and the full rect svg so that I can change them when the user changes rect modes
var fullEllipseSVG = document.getElementById("ellipse-full-button-svg");
// The start mode is empty ellipse
var ellipseDrawMode = 'empty';
// I'm not drawing a ellipse at the beginning
var isDrawingEllipse = false;
// Ellipse coordinates
let startEllipseX;
let startEllipseY;
let endEllipseX;
let endEllipseY;
// TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
/** Starts drawing the ellipse, saves the start coordinates
*
* @param {*} mouseEvent
*/
function startEllipseDrawing(mouseEvent) {
// Putting the vfx layer on top of everything
VFXLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;;
// Updating flag
isDrawingEllipse = true;
// Saving the start coords of the ellipse
let cursorPos = Input.getCursorPosition(mouseEvent);
startEllipseX = Math.floor(cursorPos[0] / zoom) + 0.5;
startEllipseY = Math.floor(cursorPos[1] / zoom) + 0.5;
drawEllipse(startEllipseX, startEllipseY);
}
// TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
/** Updates the ellipse preview depending on the position of the mouse
*
* @param {*} mouseEvent The mouseEvent from which we'll get the mouse position
*/
function updateEllipseDrawing(mouseEvent) {
let pos = Input.getCursorPosition(mouseEvent);
// Drawing the ellipse at the right position
drawEllipse(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
}
// TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
/** Finishes drawing the ellipse, decides the end coordinates and moves the preview ellipse to the
* current layer
*
* @param {*} mouseEvent event from which we'll get the mouse position
*/
function endEllipseDrawing(mouseEvent) {
// Getting the end position
let currentPos = Input.getCursorPosition(mouseEvent);
let vfxContext = VFXLayer.context;
endEllipseX = Math.round(currentPos[0] / zoom) + 0.5;
endEllipseY = Math.round(currentPos[1] / zoom) + 0.5;
// Inverting end and start (start must always be the top left corner)
if (endEllipseX < startEllipseX) {
let tmp = endEllipseX;
endEllipseX = startEllipseX;
startEllipseX = tmp;
}
// Same for the y
if (endEllipseY < startEllipseY) {
let tmp = endEllipseY;
endEllipseY = startEllipseY;
startEllipseY = tmp;
}
// Resetting this
isDrawingEllipse = false;
// Drawing the ellipse
startEllipseY -= 0.5;
endEllipseY -= 0.5;
endEllipseX -= 0.5;
startEllipseX -= 0.5;
// Setting the correct linewidth
currentLayer.context.lineWidth = tool.ellipse.brushSize;
// Drawing the ellipse using 4 lines
currentLayer.drawLine(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
currentLayer.drawLine(endEllipseX, startEllipseY, endEllipseX, endEllipseY, tool.ellipse.brushSize);
currentLayer.drawLine(endEllipseX, endEllipseY, startEllipseX, endEllipseY, tool.ellipse.brushSize);
currentLayer.drawLine(startEllipseX, endEllipseY, startEllipseX, startEllipseY, tool.ellipse.brushSize);
// If I have to fill it, I do so
if (ellipseDrawMode == 'fill') {
currentLayer.context.fillRect(startEllipseX, startEllipseY, endEllipseX - startEllipseX, endEllipseY - startEllipseY);
}
// Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
}
// TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
/** Draws a ellipse with end coordinates given by x and y on the VFX layer (draws
* the preview for the ellipse tool)
*
* @param {*} x The current end x of the ellipse
* @param {*} y The current end y of the ellipse
*/
function drawEllipse(x, y) {
// Getting the vfx context
let vfxContext = VFXLayer.context;
// Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
// Drawing the ellipse
vfxContext.lineWidth = tool.ellipse.brushSize;
// Drawing the ellipse
vfxContext.beginPath();
if ((tool.ellipse.brushSize % 2 ) == 0) {
vfxContext.rect(startEllipseX - 0.5, startEllipseY - 0.5, x - startEllipseX, y - startEllipseY);
}
else {
vfxContext.rect(startEllipseX, startEllipseY, x - startEllipseX, y - startEllipseY);
}
vfxContext.setLineDash([]);
vfxContext.stroke();
}
/** Sets the correct tool icon depending on its mode
*
*/
function setEllipseToolSvg() {
console.log("set eilipse svg");
if (ellipseDrawMode == 'empty') {
emptyEllipseSVG.setAttribute('display', 'visible');
fullEllipseSVG.setAttribute('display', 'none');
}
else {
emptyEllipseSVG.setAttribute('display', 'none');
fullEllipseSVG.setAttribute('display', 'visible');
}
}