pixel-editor/js/tools/RectangleTool.js

152 lines
5.6 KiB
JavaScript
Raw Normal View History

2021-11-01 15:02:18 +03:00
class RectangleTool extends ResizableTool {
2021-10-31 14:49:38 +03:00
// Saving the empty rect svg
emptyRectangleSVG = document.getElementById("rectangle-empty-button-svg");
// and the full rect svg so that I can change them when the user changes rect modes
fullRectangleSVG = document.getElementById("rectangle-full-button-svg");
// Current fill mode
currFillMode = 'empty';
switchFunction = null;
constructor(name, options, switchFunction) {
super(name, options);
this.switchFunction = switchFunction;
Events.on('click', this.mainButton, this.changeFillType.bind(this));
Events.on('click', this.biggerButton, this.increaseSize.bind(this));
Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
this.resetTutorial();
this.addTutorialTitle("Rectangle tool");
this.addTutorialKey("U", " to select the rectangle");
this.addTutorialKey("U while selected", " to change fill mode (empty or fill)");
this.addTutorialKey("Left drag", " to draw a rectangle");
this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("rectangle-tutorial.gif");
2021-10-31 14:49:38 +03:00
}
changeFillType() {
if (this.isSelected)
if (this.currFillMode == 'empty') {
2021-11-09 00:25:30 +03:00
this.currFillMode = 'fill';
2021-10-31 14:49:38 +03:00
this.emptyRectangleSVG.setAttribute('display', 'none');
this.fullRectangleSVG.setAttribute('display', 'visible');
}
else {
this.currFillMode = 'empty'
this.emptyRectangleSVG.setAttribute('display', 'visible');
this.fullRectangleSVG.setAttribute('display', 'none');
}
else
this.switchFunction(this);
}
onStart(mousePos) {
super.onStart(mousePos);
// Putting the tmp layer on top of everything
currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
2021-10-31 14:49:38 +03:00
this.startMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
this.startMousePos[1] = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
new HistoryState().EditCanvas();
2021-10-31 14:49:38 +03:00
}
onDrag(mousePos, cursorTarget) {
// Drawing the rect at the right position
this.drawRect(Math.floor(mousePos[0] / currFile.zoom) + 0.5, Math.floor(mousePos[1] / currFile.zoom) + 0.5);
2021-10-31 14:49:38 +03:00
}
/** Finishes drawing the rect, decides the end coordinates and moves the preview rectangle to the
* current layer
*
* @param {*} mousePos The position of the mouse when the user stopped dragging
*/
onEnd(mousePos) {
super.onEnd(mousePos);
let tmpContext = currFile.TMPLayer.context;
2021-10-31 14:49:38 +03:00
let endRectX = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
let endRectY = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
2021-10-31 14:49:38 +03:00
let startRectX = this.startMousePos[0];
let startRectY = this.startMousePos[1];
// Inverting end and start (start must always be the top left corner)
if (endRectX < startRectX) {
let tmp = endRectX;
endRectX = startRectX;
startRectX = tmp;
}
// Same for the y
if (endRectY < startRectY) {
let tmp = endRectY;
endRectY = startRectY;
startRectY = tmp;
}
// Drawing the rect
startRectY -= 0.5;
endRectY -= 0.5;
endRectX -= 0.5;
startRectX -= 0.5;
// Setting the correct linewidth and colour
currFile.currentLayer.context.lineWidth = this.currSize;
2021-10-31 14:49:38 +03:00
// Drawing the rect using 4 lines
currFile.currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize);
currFile.currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
currFile.currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
currFile.currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
2021-10-31 14:49:38 +03:00
// If I have to fill it, I do so
if (this.currFillMode == 'fill') {
currFile.currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
2021-10-31 14:49:38 +03:00
}
// Update the layer preview
currFile.currentLayer.updateLayerPreview();
2021-10-31 14:49:38 +03:00
// Clearing the tmp canvas
tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
2021-10-31 14:49:38 +03:00
}
onSelect() {
super.onSelect();
}
onDeselect() {
super.onDeselect();
}
/** Draws a rectangle with end coordinates given by x and y on the tmp layer (draws
* the preview for the rectangle tool)
*
* @param {*} x The current end x of the rectangle
* @param {*} y The current end y of the rectangle
*/
drawRect(x, y) {
// Getting the tmp context
let tmpContext = currFile.TMPLayer.context;
2021-10-31 14:49:38 +03:00
// Clearing the tmp canvas
tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
2021-10-31 14:49:38 +03:00
// Drawing the rect
tmpContext.lineWidth = this.currSize;
// Drawing the rect
tmpContext.beginPath();
if ((this.currSize % 2 ) == 0) {
tmpContext.rect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5, x - this.startMousePos[0], y - this.startMousePos[1]);
}
else {
tmpContext.rect(this.startMousePos[0], this.startMousePos[1], x - this.startMousePos[0], y - this.startMousePos[1]);
}
tmpContext.setLineDash([]);
tmpContext.stroke();
}
}