2021-07-22 20:26:40 +03:00
|
|
|
// REFACTOR: this is a nice base for the Tool class
|
2020-04-15 03:01:31 +03:00
|
|
|
//tools container / list, automatically managed when you create a new Tool();
|
|
|
|
var tool = {};
|
|
|
|
|
|
|
|
//class for tools
|
|
|
|
class Tool {
|
2021-10-25 20:23:06 +03:00
|
|
|
name = "AbstractTool";
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
// Cursor and brush size
|
2021-10-25 20:23:06 +03:00
|
|
|
cursorType = {};
|
2021-10-27 11:02:21 +03:00
|
|
|
cursor = undefined;
|
2021-10-25 20:23:06 +03:00
|
|
|
cursorHTMLElement = undefined;
|
2021-10-27 11:02:21 +03:00
|
|
|
currSize = 1;
|
|
|
|
prevSize = 1;
|
2021-10-25 20:23:06 +03:00
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
// Useful coordinates
|
2021-10-25 20:23:06 +03:00
|
|
|
startMousePos = {};
|
2021-10-27 11:02:21 +03:00
|
|
|
currMousePos = {};
|
2021-10-25 20:23:06 +03:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2021-10-25 20:23:06 +03:00
|
|
|
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-25 20:23:06 +03:00
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
if (options.brushPreview) {
|
|
|
|
this.brushPreview = true;
|
|
|
|
}
|
|
|
|
}*/
|
2021-10-25 20:23:06 +03:00
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
onHover(cursorLocation, cursorTarget) {
|
|
|
|
this.prevMousePos = this.currMousePos;
|
|
|
|
this.currMousePos = cursorLocation;
|
|
|
|
|
2021-10-25 20:23:06 +03:00
|
|
|
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) {
|
2021-10-25 20:23:06 +03:00
|
|
|
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-25 20:23:06 +03:00
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
onDeselect() {
|
2021-10-25 20:23:06 +03:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
onStart(mousePos) {
|
|
|
|
this.startMousePos = mousePos;
|
2021-10-25 20:23:06 +03:00
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
onDrag(mousePos) {
|
2021-10-25 20:23:06 +03:00
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
onEnd(mousePos) {
|
|
|
|
this.endMousePos = mousePos;
|
2021-10-25 20:23:06 +03:00
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
increaseSize() {
|
|
|
|
if (this.currSize < 128) {
|
|
|
|
this.currSize++;
|
|
|
|
this.updateCursor();
|
2020-04-15 03:01:31 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
decreaseSize() {
|
|
|
|
if (this.currSize > 0) {
|
|
|
|
this.currSize--;
|
|
|
|
this.updateCursor();
|
|
|
|
}
|
2020-04-15 03:01:31 +03:00
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
get size() {
|
|
|
|
return this.currSize;
|
2020-04-15 03:01:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
//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) {
|
2020-04-15 03:01:31 +03:00
|
|
|
endSelection();
|
2021-10-27 11:02:21 +03:00
|
|
|
}*/
|
2020-04-15 03:01:31 +03:00
|
|
|
|
|
|
|
var tools = document.getElementById("tools-menu").children;
|
|
|
|
|
|
|
|
for (var i = 0; i < tools.length; i++) {
|
|
|
|
tools[i].classList.remove("selected");
|
|
|
|
}
|
|
|
|
|
2020-04-20 20:26:00 +03:00
|
|
|
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");
|
|
|
|
}
|
2020-04-15 03:01:31 +03:00
|
|
|
|
|
|
|
//change cursor
|
|
|
|
this.updateCursor();
|
|
|
|
}
|
2020-07-21 17:01:00 +03:00
|
|
|
|
|
|
|
updateCursor () {
|
|
|
|
//switch to that tools cursor
|
|
|
|
canvasView.style.cursor = this.cursor || 'default';
|
2021-10-27 11:02:21 +03:00
|
|
|
|
2020-07-21 17:01:00 +03:00
|
|
|
//moveSelection
|
2021-10-27 11:02:21 +03:00
|
|
|
/*if (currentTool.name == 'moveselection') {
|
2020-07-21 17:01:00 +03:00
|
|
|
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
|
|
|
}*/
|
2020-07-21 17:01:00 +03:00
|
|
|
}
|
2020-04-15 03:01:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-10-25 20:23:06 +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
|
|
|
|
*
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
*/
|