pixel-editor/js/tools/LineTool.js
Nicola b616579c65 Continued tool tutorials
Also fixed fill tool history bug
2022-01-25 23:47:01 +01:00

103 lines
3.3 KiB
JavaScript

class LineTool extends ResizableTool {
constructor(name, options, switchFunction) {
super(name, options);
Events.on('click', this.mainButton, switchFunction, this);
Events.on('click', this.biggerButton, this.increaseSize.bind(this));
Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
this.resetTutorial();
this.addTutorialTitle("Line tool");
this.addTutorialKey("L", " to select the line");
this.addTutorialKey("Left drag", " to draw a line");
this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("line-tutorial.gif");
}
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;
this.startMousePos[0] = Math.floor(mousePos[0]) + 0.5;
this.startMousePos[1] = Math.floor(mousePos[1]) + 0.5;
new HistoryState().EditCanvas();
}
onDrag(mousePos, cursorTarget) {
super.onDrag(mousePos);
// Drawing the line at the right position
this.drawLine(mousePos);
}
/** 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);
const tmpContext = currFile.TMPLayer.context;
const tmpCanvas = currFile.TMPLayer.canvas;
// Setting the correct linewidth and colour
currFile.currentLayer.context.lineWidth = this.currSize;
// Drawing the line
currFile.currentLayer.context.drawImage(tmpCanvas, 0, 0);
// Update the layer preview
currFile.currentLayer.updateLayerPreview();
// Clearing the tmp canvas
tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
}
onSelect() {
super.onSelect();
}
onDeselect() {
super.onDeselect();
}
drawLine(mousePos) {
let x0 = Math.floor(this.startMousePos[0]/currFile.zoom);
let y0 = Math.floor(this.startMousePos[1]/currFile.zoom);
let x1 = Math.floor(mousePos[0]/currFile.zoom);
let y1 = Math.floor(mousePos[1]/currFile.zoom);
let dx = Math.abs(x1-x0);
let dy = Math.abs(y1-y0);
let sx = (x0 < x1 ? 1 : -1);
let sy = (y0 < y1 ? 1 : -1);
let err = dx-dy;
const canvas = document.getElementById('tmp-canvas');
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
while (true) {
context.fillRect(x0-Math.floor(this.currSize/2), y0-Math.floor(this.currSize/2), this.currSize, this.currSize);
//if we've reached the end goal, exit the loop
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy) {
err -=dy;
x0+=sx;
}
if (e2 < dx) {
err +=dx;
y0+=sy;
}
}
}
}