pixel-editor/js/_tools.js

172 lines
4.1 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-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
currSize = 1;
prevSize = 1;
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;
biggerButton = undefined;
smallerButton = undefined;
constructor (name, options) {
this.name = name;
this.cursorType = options;
}
onSelect() {
2021-10-27 11:02:21 +03:00
/*
//copy options to this object
if (options.cursor) {
//passed statically as a string
if (typeof options.cursor == 'string') this.cursor = options.cursor;
//passed a function which should be used as a getter function
if (typeof options.cursor == 'function') Object.defineProperty(this, 'cursor', { get: options.cursor});
if (options.imageCursor) this.cursor = "url(\'/pixel-editor/"+options.imageCursor+".png\'), auto";
2021-10-27 11:02:21 +03:00
if (options.brushPreview) {
this.brushPreview = true;
}
}*/
}
2021-10-27 11:02:21 +03:00
onHover(cursorLocation, cursorTarget) {
this.prevMousePos = this.currMousePos;
this.currMousePos = cursorLocation;
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;
}
2021-10-27 11:02:21 +03:00
brushPreview.style.left = (Math.floor(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
switch (this.cursorType.type) {
case 'html':
if (cursorTarget == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas')
brushPreview.style.visibility = 'visible';
else
brushPreview.style.visibility = 'hidden';
brushPreview.style.display = 'block';
brushPreview.style.width = this.currSize * zoom + 'px';
brushPreview.style.height = this.currSize * zoom + 'px';
break;
case 'cursor':
canvasView.style.cursor = this.cursor || 'default';
break;
default:
break;
}
}
2021-10-27 11:02:21 +03:00
onDeselect() {
}
2021-10-27 11:02:21 +03:00
onStart(mousePos) {
this.startMousePos = mousePos;
}
2021-10-27 11:02:21 +03:00
onDrag(mousePos) {
}
2021-10-27 11:02:21 +03:00
onEnd(mousePos) {
this.endMousePos = mousePos;
}
2021-10-27 11:02:21 +03:00
increaseSize() {
if (this.currSize < 128) {
this.currSize++;
this.updateCursor();
}
}
2021-10-27 11:02:21 +03:00
decreaseSize() {
if (this.currSize > 0) {
this.currSize--;
this.updateCursor();
}
}
2021-10-27 11:02:21 +03:00
get size() {
return this.currSize;
}
//switch to this tool (replaced global changeTool())
switchTo () {
// Ending any selection in progress
2021-10-27 11:02:21 +03:00
/*if (currentTool.name.includes("select") && !this.name.includes("select") && !selectionCanceled) {
endSelection();
2021-10-27 11:02:21 +03:00
}*/
var tools = document.getElementById("tools-menu").children;
for (var i = 0; i < tools.length; i++) {
tools[i].classList.remove("selected");
}
let buttonNode = document.getElementById(this.name + "-button");
//give the button of the selected tool the .selected class if the tool has a button
if(buttonNode != null && buttonNode.parentNode != null) {
document.getElementById(this.name+"-button").parentNode.classList.add("selected");
}
//change cursor
this.updateCursor();
}
updateCursor () {
//switch to that tools cursor
canvasView.style.cursor = this.cursor || 'default';
2021-10-27 11:02:21 +03:00
//moveSelection
2021-10-27 11:02:21 +03:00
/*if (currentTool.name == 'moveselection') {
if (cursorInSelectedArea()) {
canMoveSelection = true;
canvasView.style.cursor = 'move';
brushPreview.style.display = 'none';
}
else {
canvasView.style.cursor = 'crosshair';
}
2021-10-27 11:02:21 +03:00
}*/
}
}
/*global dragging currentTool, currentToolTemp, selectionCanceled, endSelection*/
/**
* Class selectionTool extends Tool {
* imageDataToMove
* startDataPos
* currDataPos
* finalDataPos
* canMove
*
* movePreview()
*
* // start and end selection just overwrite the onStart and onEnd methods
*
* }
*
*/