pixel-editor/js/tools/RectangularSelectionTool.js

157 lines
5.7 KiB
JavaScript
Raw Normal View History

2021-11-01 15:02:18 +03:00
class RectangularSelectionTool extends SelectionTool {
2021-11-09 00:25:30 +03:00
switchFunc = undefined;
moveTool = undefined;
currSelection = {};
constructor (name, options, switchFunc, moveTool) {
2021-11-01 14:31:09 +03:00
super(name, options, switchFunc);
2021-11-01 15:02:18 +03:00
2021-11-09 00:25:30 +03:00
this.switchFunc = switchFunc;
this.moveTool = moveTool;
2021-11-01 15:02:18 +03:00
Events.on('click', this.mainButton, switchFunc, this);
}
onStart(mousePos) {
super.onStart(mousePos);
// Putting the vfx layer on top of everything
currFile.VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
2021-11-01 15:02:18 +03:00
// Saving the start coords of the rect
this.startMousePos[0] = Math.round(this.startMousePos[0] / currFile.zoom) - 0.5;
this.startMousePos[1] = Math.round(this.startMousePos[1] / currFile.zoom) - 0.5;
2021-11-01 15:02:18 +03:00
// Avoiding external selections
if (this.startMousePos[0] < 0) {
this.startMousePos[0] = 0;
}
else if (this.startMousePos[0] > currFile.currentLayer.canvas.width) {
this.startMousePos[0] = currFile.currentLayer.canvas.width;
2021-11-01 15:02:18 +03:00
}
if (this.startMousePos[1] < 0) {
this.startMousePos[1] = 0;
}
else if (this.startMousePos[1] > currFile.currentLayer.canvas.height) {
this.startMousePos[1] = currFile.currentLayer.canvas.height;
2021-11-01 15:02:18 +03:00
}
// Drawing the rect
2021-11-09 00:25:30 +03:00
this.drawSelection(this.startMousePos[0], this.startMousePos[1]);
2021-11-01 15:02:18 +03:00
}
onDrag(mousePos) {
super.onDrag(mousePos);
// Drawing the rect
this.drawSelection(Math.round(mousePos[0] / currFile.zoom) + 0.5, Math.round(mousePos[1] / currFile.zoom) + 0.5);
2021-11-01 15:02:18 +03:00
}
onEnd(mousePos) {
super.onEnd(mousePos);
new HistoryState().EditCanvas();
2021-11-01 15:02:18 +03:00
// Getting the end position
this.endMousePos[0] = Math.round(this.endMousePos[0] / currFile.zoom) + 0.5;
this.endMousePos[1] = Math.round(this.endMousePos[1] / currFile.zoom) + 0.5;
2021-11-01 15:02:18 +03:00
// Inverting end and start (start must always be the top left corner)
if (this.endMousePos[0] < this.startMousePos[0]) {
let tmp = this.endMousePos[0];
this.endMousePos[0] = this.startMousePos[0];
this.startMousePos[0] = tmp;
}
// Same for the y
if (this.endMousePos[1] < this.startMousePos[1]) {
let tmp = this.endMousePos[1];
this.endMousePos[1] = this.startMousePos[1];
this.startMousePos[1] = tmp;
}
2021-11-09 00:25:30 +03:00
// Switch to the move tool so that the user can move the selection
this.switchFunc(this.moveTool);
// Preparing data for the move tool
let dataWidth = this.endMousePos[0] - this.startMousePos[0];
let dataHeight = this.endMousePos[1] - this.startMousePos[1];
this.currSelection = {
left: this.startMousePos[0], right: this.endMousePos[0],
top: this.startMousePos[1], bottom: this.endMousePos[1],
width: dataWidth,
height: dataHeight,
data: currFile.currentLayer.context.getImageData(
2021-11-09 00:25:30 +03:00
this.startMousePos[0], this.startMousePos[1],
dataWidth + 1, dataHeight + 1)
};
// Moving the selection to the TMP layer. It will be moved back to the original
// layer if the user will cancel or end the selection
currFile.currentLayer.context.clearRect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5,
2021-11-09 00:25:30 +03:00
dataWidth + 1, dataHeight + 1);
// Moving those pixels from the current layer to the tmp layer
currFile.TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]);
2021-11-09 00:25:30 +03:00
this.moveTool.setSelectionData(this.currSelection, this);
2021-11-10 00:59:17 +03:00
console.log("data set");
2021-11-01 15:02:18 +03:00
}
onSelect() {
super.onSelect();
}
onDeselect() {
super.onDeselect();
}
2021-11-09 00:25:30 +03:00
drawSelection(x, y) {
2021-11-01 15:02:18 +03:00
// Getting the vfx context
let vfxContext = currFile.VFXLayer.context;
2021-11-01 15:02:18 +03:00
// Clearing the vfx canvas
vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
2021-11-01 15:02:18 +03:00
vfxContext.lineWidth = 1;
vfxContext.strokeStyle = 'black';
vfxContext.setLineDash([4]);
// Drawing the rect
vfxContext.beginPath();
vfxContext.rect(this.startMousePos[0], this.startMousePos[1], x - this.startMousePos[0], y - this.startMousePos[1]);
vfxContext.stroke();
2021-11-01 14:31:09 +03:00
}
2021-11-09 00:25:30 +03:00
/** Moves the rect ants to the specified position
*
* @param {*} x X coordinate of the rect ants
* @param {*} y Y coordinat of the rect ants
* @param {*} width Width of the selection
* @param {*} height Height of the selectione
*
* @return The data regarding the current position and size of the selection
*/
moveAnts(x, y, width, height) {
// Getting the vfx context
let vfxContext = currFile.VFXLayer.context;
2021-11-09 00:25:30 +03:00
let ret = this.currSelection;
// Clearing the vfx canvas
vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
2021-11-09 00:25:30 +03:00
vfxContext.lineWidth = 1;
vfxContext.setLineDash([4]);
// Fixing the coordinates
this.currSelection.left = Math.round(Math.round(x) - 0.5 - Math.round(width / 2)) + 0.5;
this.currSelection.top = Math.round(Math.round(y) - 0.5 - Math.round(height / 2)) + 0.5;
this.currSelection.right = this.currSelection.left + Math.round(width);
this.currSelection.bottom = this.currSelection.top + Math.round(height);
// Drawing the rect
vfxContext.beginPath();
vfxContext.rect(this.currSelection.left, this.currSelection.top, width, height);
vfxContext.stroke();
return ret;
}
2021-11-01 14:31:09 +03:00
}