mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
80 lines
2.2 KiB
JavaScript
80 lines
2.2 KiB
JavaScript
|
class VSymmetryLayer extends Layer {
|
||
|
// is hidden && enabled
|
||
|
isEnabled = false;
|
||
|
// Distance between one line and another in HTML pixels
|
||
|
lineDistance = 10;
|
||
|
|
||
|
constructor(width, height, canvas, menuEntry) {
|
||
|
super(width, height, canvas, menuEntry);
|
||
|
this.initialize();
|
||
|
Events.onCustom("refreshVerticalAxis", this.fillAxis.bind(this));
|
||
|
}
|
||
|
|
||
|
initialize() {
|
||
|
super.initialize();
|
||
|
this.fillAxis();
|
||
|
}
|
||
|
|
||
|
// Enable or not
|
||
|
disableAxis() {
|
||
|
// get toggle h axis button
|
||
|
let toggleButton = document.getElementById("toggle-v-symmetry-button");
|
||
|
toggleButton.innerHTML = "Show Vertical Axis";
|
||
|
this.isEnabled = false;
|
||
|
this.canvas.style.display = "none";
|
||
|
}
|
||
|
|
||
|
enableAxis() {
|
||
|
// get toggle h axis button
|
||
|
let toggleButton = document.getElementById("toggle-v-symmetry-button");
|
||
|
toggleButton.innerHTML = "Hide Vertical Axis";
|
||
|
this.isEnabled = true;
|
||
|
this.canvas.style.display = "inline-block";
|
||
|
}
|
||
|
|
||
|
repaint(factor) {
|
||
|
this.lineDistance += factor;
|
||
|
this.fillAxis();
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Shows or hides axis depending on its current visibility
|
||
|
* (triggered by the show h symmetry button in the top menu)
|
||
|
*/
|
||
|
toggleVAxis() {
|
||
|
console.log("toggleVAxis");
|
||
|
if (this.isEnabled) {
|
||
|
this.disableAxis();
|
||
|
} else {
|
||
|
this.enableAxis();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* It fills the canvas
|
||
|
*/
|
||
|
fillAxis() {
|
||
|
let originalSize = currFile.canvasSize;
|
||
|
this.canvas.width = originalSize[0] * Math.round(this.lineDistance);
|
||
|
this.canvas.height = originalSize[1] * Math.round(this.lineDistance);
|
||
|
|
||
|
this.context.strokeStyle = Settings.getCurrSettings().vAxisGridColour;
|
||
|
|
||
|
// Draw horizontal axis
|
||
|
this.drawVAxis();
|
||
|
|
||
|
if (!this.isEnabled) {
|
||
|
this.canvas.style.display = 'none';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
drawVAxis() {
|
||
|
// Get middle y
|
||
|
let midX = Math.round(this.canvas.width / 2);
|
||
|
this.context.beginPath();
|
||
|
this.context.moveTo(midX, 0);
|
||
|
this.context.lineTo(midX, this.canvas.height);
|
||
|
this.context.stroke();
|
||
|
this.context.closePath();
|
||
|
}
|
||
|
}
|