pixel-editor/js/Tool.js

168 lines
4.7 KiB
JavaScript
Raw Normal View History

// REFACTOR: this is a nice base for the Tool class
//tools container / list, automatically managed when you create a new Tool();
var tool = {};
//class for tools
class Tool {
name = "AbstractTool";
2021-10-31 14:49:38 +03:00
isSelected = false;
switchFunction = undefined;
2021-10-27 11:02:21 +03:00
// Cursor and brush size
cursorType = {};
2021-10-27 11:02:21 +03:00
cursor = undefined;
cursorHTMLElement = undefined;
2021-10-27 11:02:21 +03:00
// Useful coordinates
startMousePos = {};
2021-10-27 11:02:21 +03:00
currMousePos = {};
prevMousePos = {};
endMousePos = {};
2021-10-27 11:02:21 +03:00
// HTML elements
mainButton = undefined;
brushPreview = document.getElementById("brush-preview");
// Tool tutorial
2022-01-25 02:33:23 +03:00
toolTutorial = document.getElementById("tool-tutorial");
tutorialTimer = undefined;
tutorialString = "";
2021-10-27 11:02:21 +03:00
constructor (name, options) {
this.name = name;
this.cursorType = options;
2021-10-27 11:43:51 +03:00
this.mainButton = document.getElementById(name + "-button");
if (this.mainButton != undefined) {
// Timer to show the tutorial
Events.on("mouseenter", this.mainButton, function(){
2022-01-30 02:09:43 +03:00
this.setTutorial();
this.tutorialTimer = setTimeout(this.showTutorial.bind(this), 750)
}.bind(this));
// Clear the callback if the user cancels the hovering
Events.on("mouseleave", this.mainButton, function() {
if (this.tutorialTimer != undefined)
clearTimeout(this.tutorialTimer);
this.tutorialTimer = undefined;
this.hideTutorial();
}.bind(this))
this.hideTutorial();
}
}
showTutorial() {
2022-01-30 02:09:43 +03:00
let tutorialRect = this.toolTutorial.getBoundingClientRect();
if ((this.mainButton.getBoundingClientRect().top - 48 + (tutorialRect.bottom - tutorialRect.top)) > window.innerHeight) {
this.toolTutorial.style.top = window.innerHeight - 48 - (tutorialRect.bottom - tutorialRect.top) + "px";
}
else {
this.toolTutorial.style.top = this.mainButton.getBoundingClientRect().top - 48 + "px";
}
this.toolTutorial.style.display = "inline-block";
this.toolTutorial.className = "fade-in";
}
hideTutorial() {
this.toolTutorial.className = "fade-out";
setTimeout(function(){this.toolTutorial.style.display = "none"}.bind(this), 200);
2021-10-27 11:02:21 +03:00
}
2022-01-25 02:33:23 +03:00
resetTutorial() {
this.tutorialString = "";
}
setTutorial() {
this.toolTutorial.innerHTML = this.tutorialString;
2022-01-25 02:33:23 +03:00
}
addTutorialKey(key, text) {
this.tutorialString += '<li><span class="keyboard-key">' + key + '</span> ' + text + '</li>';
2022-01-25 02:33:23 +03:00
}
addTutorialText(key, text) {
this.tutorialString += '<li>' + key + ': ' + text + '</li>';
2022-01-25 02:33:23 +03:00
}
addTutorialImg(imgPath) {
this.tutorialString += '</ul><img src="' + imgPath + '"/>';
}
addTutorialTitle(text) {
this.tutorialString += "<h3>" + text + "</h3><ul>";
2022-01-25 02:33:23 +03:00
}
onSelect() {
2021-11-09 00:25:30 +03:00
if (this.mainButton != undefined)
this.mainButton.parentElement.classList.add("selected");
2021-10-31 14:49:38 +03:00
this.isSelected = true;
2021-10-31 20:31:45 +03:00
2022-02-01 01:12:28 +03:00
// Update the cursor
2021-10-31 20:31:45 +03:00
switch (this.cursorType.type) {
case 'html':
currFile.canvasView.style.cursor = 'none';
2021-10-31 20:31:45 +03:00
break;
case 'cursor':
2021-11-01 14:31:09 +03:00
this.cursor = this.cursorType.style;
currFile.canvasView.style.cursor = this.cursor || 'default';
2021-10-31 20:31:45 +03:00
break;
default:
break;
}
2022-02-01 01:12:28 +03:00
// Reset the topbar
TopMenuModule.resetInfos();
}
2021-11-09 14:53:19 +03:00
updateCursor() {
this.brushPreview.style.display = 'block';
this.brushPreview.style.width = this.currSize * currFile.zoom + 'px';
this.brushPreview.style.height = this.currSize * currFile.zoom + 'px';
2021-11-09 14:53:19 +03:00
}
2021-10-27 11:43:51 +03:00
2021-11-01 14:31:09 +03:00
onMouseWheel(mousePos, mode) {}
2021-10-27 11:02:21 +03:00
onHover(cursorLocation, cursorTarget) {
this.prevMousePos = this.currMousePos;
this.currMousePos = cursorLocation;
2021-11-09 14:53:19 +03:00
this.updateCursor();
let toSub = 1;
// Prevents the brush to be put in the middle of pixels
2021-10-27 11:02:21 +03:00
if (this.currSize % 2 == 0) {
toSub = 0.5;
}
this.brushPreview.style.left = (Math.floor(cursorLocation[0] / currFile.zoom) * currFile.zoom + currFile.currentLayer.canvas.offsetLeft - this.currSize * currFile.zoom / 2 - currFile.zoom / 2 + toSub * currFile.zoom) + 'px';
this.brushPreview.style.top = (Math.floor(cursorLocation[1] / currFile.zoom) * currFile.zoom + currFile.currentLayer.canvas.offsetTop - this.currSize * currFile.zoom / 2 - currFile.zoom / 2 + toSub * currFile.zoom) + 'px';
2021-10-27 11:02:21 +03:00
2021-10-31 20:31:45 +03:00
if (this.cursorType.type == 'html') {
2021-11-09 14:53:19 +03:00
if (cursorTarget.className == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
this.brushPreview.style.visibility = 'visible';
currFile.canvasView.style.cursor = 'none';
2021-10-31 20:31:45 +03:00
}
else {
this.brushPreview.style.visibility = 'hidden';
currFile.canvasView.style.cursor = 'default';
2021-10-31 20:31:45 +03:00
}
2021-10-27 11:02:21 +03:00
}
}
2021-10-27 11:02:21 +03:00
onDeselect() {
2021-11-09 00:25:30 +03:00
if (this.mainButton != undefined)
this.mainButton.parentElement.classList.remove("selected");
2021-10-31 14:49:38 +03:00
this.isSelected = false;
2021-11-09 14:53:19 +03:00
this.brushPreview.style.visibility = 'hidden';
currFile.canvasView.style.cursor = 'default';
}
2022-01-22 14:18:10 +03:00
onStart(mousePos, mouseTarget) {
2021-10-27 11:02:21 +03:00
this.startMousePos = mousePos;
}
2022-01-22 14:18:10 +03:00
onDrag(mousePos, mouseTarget) {
}
2022-01-22 14:18:10 +03:00
onEnd(mousePos, mouseTarget) {
2021-10-27 11:02:21 +03:00
this.endMousePos = mousePos;
}
}