resizable axis based on zoom

This commit is contained in:
Marco Marinò 2022-02-05 22:24:13 +01:00
parent 7467353e70
commit c10af4623e
4 changed files with 34 additions and 2 deletions

View File

@ -123,9 +123,9 @@ const Startup = (() => {
currFile.layers.push(currFile.checkerBoard); currFile.layers.push(currFile.checkerBoard);
currFile.layers.push(currFile.currentLayer); currFile.layers.push(currFile.currentLayer);
currFile.layers.push(currFile.TMPLayer); currFile.layers.push(currFile.TMPLayer);
currFile.layers.push(currFile.pixelGrid);
currFile.layers.push(currFile.hSymmetricLayer); currFile.layers.push(currFile.hSymmetricLayer);
currFile.layers.push(currFile.vSymmetricLayer); currFile.layers.push(currFile.vSymmetricLayer);
currFile.layers.push(currFile.pixelGrid);
currFile.layers.push(currFile.VFXLayer); currFile.layers.push(currFile.VFXLayer);
} }
} }

View File

@ -28,15 +28,26 @@ class HSymmetryLayer extends Layer {
// get toggle h axis button // get toggle h axis button
let toggleButton = document.getElementById("toggle-h-symmetry-button"); let toggleButton = document.getElementById("toggle-h-symmetry-button");
toggleButton.innerHTML = "Hide Horizontal Symmetry"; toggleButton.innerHTML = "Hide Horizontal Symmetry";
this.isEnabled = true; this.isEnabled = true;
this.canvas.style.display = "inline-block"; this.canvas.style.display = "inline-block";
} }
initPaint() {
this.lineDistance = 5;
this.fillAxis();
}
repaint(factor) { repaint(factor) {
this.lineDistance += factor; this.lineDistance += factor;
this.fillAxis(); this.fillAxis();
} }
normalPaint() {
this.lineDistance = 10;
this.fillAxis();
}
/** /**
* Shows or hides axis depending on its current visibility * Shows or hides axis depending on its current visibility
* (triggered by the show h symmetry button in the top menu) * (triggered by the show h symmetry button in the top menu)

View File

@ -30,6 +30,12 @@ class VSymmetryLayer extends Layer {
toggleButton.innerHTML = "Hide Vertical Axis"; toggleButton.innerHTML = "Hide Vertical Axis";
this.isEnabled = true; this.isEnabled = true;
this.canvas.style.display = "inline-block"; this.canvas.style.display = "inline-block";
this.initPaint();
}
initPaint() {
this.lineDistance = 5;
this.fillAxis();
} }
repaint(factor) { repaint(factor) {
@ -37,6 +43,11 @@ class VSymmetryLayer extends Layer {
this.fillAxis(); this.fillAxis();
} }
normalPaint() {
this.lineDistance = 10;
this.fillAxis();
}
/** /**
* Shows or hides axis depending on its current visibility * Shows or hides axis depending on its current visibility
* (triggered by the show h symmetry button in the top menu) * (triggered by the show h symmetry button in the top menu)

View File

@ -60,18 +60,28 @@ class ZoomTool extends Tool {
// Adjust pixel grid thickness // Adjust pixel grid thickness
if (zoomed) { if (zoomed) {
if (currFile.zoom <= 7)
if (currFile.zoom <= 7) {
currFile.pixelGrid.disablePixelGrid(); currFile.pixelGrid.disablePixelGrid();
currFile.hSymmetricLayer.repaint((currFile.zoom - prevZoom) * 1.8);
currFile.vSymmetricLayer.repaint((currFile.zoom - prevZoom) * 1.8);
}
else if (currFile.zoom >= 20 && mode == 'in') { else if (currFile.zoom >= 20 && mode == 'in') {
currFile.pixelGrid.enablePixelGrid(); currFile.pixelGrid.enablePixelGrid();
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6); currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
currFile.hSymmetricLayer.normalPaint();
currFile.vSymmetricLayer.normalPaint();
} }
else if (prevZoom >= 20 && mode == 'out') { else if (prevZoom >= 20 && mode == 'out') {
currFile.pixelGrid.enablePixelGrid(); currFile.pixelGrid.enablePixelGrid();
currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6); currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
currFile.hSymmetricLayer.normalPaint();
currFile.vSymmetricLayer.normalPaint();
} }
else { else {
currFile.pixelGrid.enablePixelGrid(); currFile.pixelGrid.enablePixelGrid();
currFile.hSymmetricLayer.normalPaint();
currFile.vSymmetricLayer.normalPaint();
} }
} }