Fixed new pixel creation bug and preview canvas blurriness

It's now possible to create a new project of a different size from the one decided when opening the app. Also fixed a bug that made the layer preview canvases blurry. They're now pixel perfect.
This commit is contained in:
unsettledgames 2020-06-20 22:49:02 +02:00
parent ab4129546c
commit d9d1406d57
5 changed files with 66 additions and 19 deletions

View File

@ -22,6 +22,17 @@ body {
/* Disable Android and iOS callouts*/ /* Disable Android and iOS callouts*/
} }
.preview-canvas {
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Safari */
image-rendering:optimize-contrast; /* CSS3 Proposed */
image-rendering:crisp-edges; /* CSS4 Proposed */
image-rendering:pixelated; /* CSS4 Proposed */
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
}
#layers-menu { #layers-menu {
width:200px; width:200px;
top: 48px; top: 48px;

View File

@ -8,6 +8,10 @@ var nSquaresFilled = 0;
function fillCheckerboard() { function fillCheckerboard() {
// Getting checkerboard context // Getting checkerboard context
var context = checkerBoard.context; var context = checkerBoard.context;
context.clearRect(0, 0, canvasSize[0], canvasSize[1]);
console.log(canvasSize);
console.log(checkerBoardSquareSize);
// Cycling through the canvas (using it as a matrix) // Cycling through the canvas (using it as a matrix)
for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) { for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {

View File

@ -118,9 +118,6 @@ class Layer {
if (menuEntry != null) { if (menuEntry != null) {
menuEntry.id = "layer" + id; menuEntry.id = "layer" + id;
}
if (menuEntry != null) {
menuEntry.onclick = () => this.select(); menuEntry.onclick = () => this.select();
menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock(); menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock();
menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility(); menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility();
@ -130,6 +127,8 @@ class Layer {
menuEntry.addEventListener("dragover", this.layerDragOver, false); menuEntry.addEventListener("dragover", this.layerDragOver, false);
menuEntry.addEventListener("dragleave", this.layerDragLeave, false); menuEntry.addEventListener("dragleave", this.layerDragLeave, false);
menuEntry.addEventListener("dragend", this.layerDragEnd, false); menuEntry.addEventListener("dragend", this.layerDragEnd, false);
menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false;
} }
this.initialize(); this.initialize();

View File

@ -5,23 +5,50 @@ function newPixel (width, height, palette) {
layerList = document.getElementById("layers-menu"); layerList = document.getElementById("layers-menu");
layerListEntry = layerList.firstElementChild; layerListEntry = layerList.firstElementChild;
firstPixel = false; // Setting up the current layer
currentLayer = new Layer(width, height, canvas, layerListEntry);
canvas.style.zIndex = 2;
} }
else { else {
let nLayers = layers.length;
for (let i=2; i < layers.length - 2; i++) {
let currentEntry = layers[i].menuEntry;
let associatedLayer;
if (currentEntry != null) {
// Getting the associated layer
associatedLayer = getLayerByID(currentEntry.id);
// Deleting its canvas
associatedLayer.canvas.remove();
// Adding the id to the unused ones
unusedIDs.push(currentEntry.id);
// Removing the entry from the menu
currentEntry.remove();
}
}
// Removing the old layers from the list
for (let i=2; i<nLayers - 2; i++) {
layers.splice(2, 1);
}
// Setting up the current layer
layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
currentLayer = layers[1];
layerCount = 1;
canvas = currentLayer.canvas;
context = currentLayer.context;
canvas.style.zIndex = 2;
// TODO: clean layers before creating a new pixel // TODO: clean layers before creating a new pixel
// Devo togliere tutte le entries tranne la prima // Devo togliere tutte le entries tranne la prima
// Devo pulire la preview della prima entry // Devo pulire la preview della prima entry
// Devo cancellare tutte le tele tranne quella con id pixel-canvas // Devo cancellare tutte le tele tranne quella con id pixel-canvas
} }
// Setting up the current layer
currentLayer = new Layer(width, height, canvas, layerListEntry);
canvas.style.zIndex = 2;
// Cloning the entry so that when I change something on the first layer, those changes aren't
// propagated to the other ones
layerListEntry = layerListEntry.cloneNode(true);
// Adding the checkerboard behind it // Adding the checkerboard behind it
checkerBoard = new Layer(width, height, checkerBoardCanvas); checkerBoard = new Layer(width, height, checkerBoardCanvas);
@ -33,11 +60,16 @@ function newPixel (width, height, palette) {
canvasSize = currentLayer.canvasSize; canvasSize = currentLayer.canvasSize;
if (firstPixel) {
// Cloning the entry so that when I change something on the first layer, those changes aren't
// propagated to the other ones
layerListEntry = layerListEntry.cloneNode(true);
// Adding the first layer and the checkerboard to the list of layers // Adding the first layer and the checkerboard to the list of layers
layers.push(checkerBoard); layers.push(checkerBoard);
layers.push(currentLayer); layers.push(currentLayer);
layers.push(VFXLayer); layers.push(VFXLayer);
layers.push(TMPLayer); layers.push(TMPLayer);
}
//remove current palette //remove current palette
colors = document.getElementsByClassName('color-button'); colors = document.getElementsByClassName('color-button');
@ -92,4 +124,5 @@ function newPixel (width, height, palette) {
document.getElementById('save-as-button').classList.remove('disabled'); document.getElementById('save-as-button').classList.remove('disabled');
documentCreated = true; documentCreated = true;
firstPixel = false;
} }

View File

@ -128,7 +128,7 @@
<!-- LAYER MENU --> <!-- LAYER MENU -->
<ul id = "layers-menu"> <ul id = "layers-menu">
<li class = "layers-menu-entry selected-layer" draggable = "true"> <li class = "layers-menu-entry selected-layer" draggable = "true">
<canvas></canvas> <canvas class = "preview-canvas"></canvas>
<ul class="layer-buttons"> <ul class="layer-buttons">
<li class = "layer-button"> <li class = "layer-button">
<button title="Lock layer" class="lock-layer-button"> <button title="Lock layer" class="lock-layer-button">