Added canvas preview to layer menu

Decided to apply the same width / height ratio of the canvas to the preview.
This commit is contained in:
unsettledgames 2020-06-19 15:16:22 +02:00
parent 066582e309
commit c498a495d5
5 changed files with 45 additions and 19 deletions

View File

@ -130,9 +130,9 @@ body {
canvas {
display:inline-block;
height:100%;
height:50px;
width:50px;
background-color:red;
background-color:lightgrey;
left:4px;
}

View File

@ -13,6 +13,8 @@ function HistoryStateEditCanvas () {
this.canvas = currentCanvas;
redoStates.push(this);
currentLayer.updateLayerPreview();
};
this.redo = function () {
@ -21,6 +23,8 @@ function HistoryStateEditCanvas () {
this.canvas = currentCanvas;
undoStates.push(this);
currentLayer.updateLayerPreview();
};
//add self to undo array

View File

@ -34,6 +34,10 @@
2 - Add a Replace feature so that people can replace a colour without editing the one in the palette
(right click->replace colour in layers? in that case we'd have to implement multiple layers selection)
KNOWN BUGS:
1 - Must delete existing layers when creating a new pixel
THINGS TO TEST:
1 - Undo / redo
@ -221,6 +225,32 @@ class Layer {
this.menuEntry.getElementsByClassName("default-icon")[1].style.display = "none";
this.menuEntry.getElementsByClassName("edited-icon")[1].style.display = "inline-block";
}
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];
// Computing width and height for the preview image
let previewWidth = destination.width;
let previewHeight = destination.height;
// If the sprite is rectangular, I apply the ratio to the preview as well
if (widthRatio < 1) {
previewWidth = destination.width * widthRatio;
}
else if (widthRatio > 1) {
previewHeight = destination.height * heightRatio;
}
// La appiccico sulla preview
destination.getContext('2d').clearRect(0, 0, destination.width, destination.height);
destination.getContext('2d').drawImage(this.canvas,
// This is necessary to center the preview in the canvas
(destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2,
previewWidth, previewHeight);
}
}
// Finds a layer given its name

View File

@ -107,7 +107,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
}
}
else if (currentTool.name == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
console.log('filling')
//console.log('filling')
//get cursor postion
var cursorLocation = getCursorPosition(mouseEvent);
@ -118,6 +118,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
//fill starting at the location
fill(cursorLocation);
currentLayer.updateLayerPreview();
}
else if (currentTool.name == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
let mode;
@ -125,21 +126,6 @@ window.addEventListener("mouseup", function (mouseEvent) {
mode = "in";
}
}
else if (currentTool == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
//console.log('filling');
//if you clicked on anything but the canvas, do nothing
if (!mouseEvent.target == currentLayer.canvas) return;
//get cursor postion
var cursorLocation = getCursorPosition(mouseEvent);
//offset to match cursor point
cursorLocation[0] += 2;
cursorLocation[1] += 12;
//fill starting at the location
fill(cursorLocation);
}
else if (currentTool == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
let mode;
if (mouseEvent.which == 1){
@ -160,6 +146,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
}
else if (currentTool.name == 'rectangle') {
endRectDrawing(mouseEvent);
currentLayer.updateLayerPreview();
}
dragging = false;
@ -228,6 +215,8 @@ function draw (mouseEvent) {
//for the darkest 50% of colors, change the brush preview to dark mode
if (colorLightness>127) brushPreview.classList.remove('dark');
else brushPreview.classList.add('dark');
currentLayer.updateLayerPreview();
}
// Decided to write a different implementation in case of differences between the brush and the eraser tool
else if (currentTool.name == 'eraser') {
@ -249,6 +238,8 @@ function draw (mouseEvent) {
lastPos = cursorLocation;
}
}
currentLayer.updateLayerPreview();
}
else if (currentTool.name == 'rectangle')
{

View File

@ -84,6 +84,7 @@ function endSelection() {
isPasting = false;
isCutting = false;
lastMovePos = undefined;
currentLayer.updateLayerPreview();
new HistoryStateEditCanvas();
}