103 lines
3.3 KiB
JavaScript
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;
|
|
}
|
|
}
|
|
}
|
|
} |