2021-11-01 15:02:18 +03:00
|
|
|
class RectangularSelectionTool extends SelectionTool {
|
2021-11-09 00:25:30 +03:00
|
|
|
currSelection = {};
|
|
|
|
|
|
|
|
constructor (name, options, switchFunc, moveTool) {
|
2021-12-29 01:38:28 +03:00
|
|
|
super(name, options, switchFunc, 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
|
2021-12-06 19:37:43 +03:00
|
|
|
currFile.VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
|
2021-11-01 15:02:18 +03:00
|
|
|
|
|
|
|
// Saving the start coords of the rect
|
2022-01-06 01:54:29 +03:00
|
|
|
this.startMousePos = [Math.floor(mousePos[0] / currFile.zoom),
|
|
|
|
Math.floor(mousePos[1] / currFile.zoom)];
|
|
|
|
this.endMousePos = [this.startMousePos[0], this.startMousePos[1]];
|
2021-11-01 15:02:18 +03:00
|
|
|
|
|
|
|
// Avoiding external selections
|
|
|
|
if (this.startMousePos[0] < 0) {
|
|
|
|
this.startMousePos[0] = 0;
|
|
|
|
}
|
2021-12-06 19:37:43 +03:00
|
|
|
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;
|
|
|
|
}
|
2021-12-06 19:37:43 +03:00
|
|
|
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
|
2022-01-06 01:54:29 +03:00
|
|
|
this.endMousePos = [Math.floor(mousePos[0] / currFile.zoom), Math.floor(mousePos[1] / currFile.zoom)];
|
|
|
|
this.drawSelection(Math.floor(mousePos[0] / currFile.zoom), Math.floor(mousePos[1] / currFile.zoom));
|
2021-11-01 15:02:18 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
onEnd(mousePos) {
|
|
|
|
super.onEnd(mousePos);
|
2021-11-09 14:19:57 +03:00
|
|
|
new HistoryState().EditCanvas();
|
2021-11-01 15:02:18 +03:00
|
|
|
|
|
|
|
// Getting the end position
|
2022-01-06 01:54:29 +03:00
|
|
|
this.endMousePos = [Math.floor(mousePos[0] / currFile.zoom), Math.floor(mousePos[1] / currFile.zoom)];
|
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
|
|
|
|
2022-01-06 01:54:29 +03:00
|
|
|
this.boundingBox.minX = this.startMousePos[0] - 1;
|
|
|
|
this.boundingBox.maxX = this.endMousePos[0] + 1;
|
|
|
|
this.boundingBox.minY = this.startMousePos[1] - 1;
|
|
|
|
this.boundingBox.maxY = this.endMousePos[1] + 1;
|
|
|
|
|
|
|
|
// Obtain the selected pixels
|
|
|
|
this.getSelection();
|
|
|
|
// Switch to the move tool so that the user can move the selection
|
|
|
|
this.switchFunc(this.moveTool);
|
|
|
|
this.moveTool.setSelectionData(null, this);
|
|
|
|
|
|
|
|
/*
|
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,
|
|
|
|
|
2021-12-06 19:37:43 +03:00
|
|
|
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
|
2022-01-06 01:54:29 +03:00
|
|
|
currFile.currentLayer.context.clearRect(this.startMousePos[0], this.startMousePos[1],
|
2021-11-09 00:25:30 +03:00
|
|
|
dataWidth + 1, dataHeight + 1);
|
|
|
|
// Moving those pixels from the current layer to the tmp layer
|
2021-12-06 19:37:43 +03:00
|
|
|
currFile.TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]);
|
2021-11-09 00:25:30 +03:00
|
|
|
|
2022-01-06 01:54:29 +03:00
|
|
|
this.moveTool.setSelectionData(this.currSelection, this);*/
|
|
|
|
|
2021-11-01 15:02:18 +03:00
|
|
|
}
|
|
|
|
|
2021-12-29 01:14:37 +03:00
|
|
|
copySelection() {
|
|
|
|
super.copySelection();
|
|
|
|
}
|
|
|
|
|
|
|
|
cutSelection() {
|
|
|
|
super.cutSelection();
|
|
|
|
currFile.currentLayer.context.clearRect(this.currSelection.left-0.5, this.currSelection.top-0.5,
|
|
|
|
this.currSelection.width, this.currSelection.height);
|
|
|
|
}
|
|
|
|
|
|
|
|
pasteSelection() {
|
|
|
|
super.pasteSelection();
|
|
|
|
if (this.currSelection == undefined)
|
|
|
|
return;
|
|
|
|
// Clearing the tmp (move preview) and vfx (ants) layers
|
|
|
|
currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
|
|
|
|
currFile.VFXLayer.context.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
|
|
|
|
|
|
|
|
// I have to save the underlying data, so that the transparent pixels in the clipboard
|
|
|
|
// don't override the coloured pixels in the canvas
|
|
|
|
let underlyingImageData = currFile.currentLayer.context.getImageData(
|
|
|
|
this.currSelection.left, this.currSelection.top,
|
|
|
|
this.currSelection.width+1, this.currSelection.height+1
|
|
|
|
);
|
|
|
|
let pasteData = this.currSelection.data.data.slice();
|
|
|
|
|
|
|
|
for (let i=0; i<underlyingImageData.data.length; i+=4) {
|
|
|
|
let currentMovePixel = [
|
|
|
|
pasteData[i], pasteData[i+1], pasteData[i+2], pasteData[i+3]
|
|
|
|
];
|
|
|
|
|
|
|
|
let currentUnderlyingPixel = [
|
|
|
|
underlyingImageData.data[i], underlyingImageData.data[i+1],
|
|
|
|
underlyingImageData.data[i+2], underlyingImageData.data[i+3]
|
|
|
|
];
|
|
|
|
|
|
|
|
// If the pixel of the clipboard is empty, but the one below it isn't, I use the pixel below
|
|
|
|
if (Util.isPixelEmpty(currentMovePixel)) {
|
|
|
|
if (!Util.isPixelEmpty(currentUnderlyingPixel)) {
|
|
|
|
pasteData[i] = currentUnderlyingPixel[0];
|
|
|
|
pasteData[i+1] = currentUnderlyingPixel[1];
|
|
|
|
pasteData[i+2] = currentUnderlyingPixel[2];
|
|
|
|
pasteData[i+3] = currentUnderlyingPixel[3];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
currFile.currentLayer.context.putImageData(new ImageData(pasteData, this.currSelection.width+1),
|
|
|
|
this.currSelection.left, this.currSelection.top
|
|
|
|
);
|
|
|
|
|
|
|
|
currFile.currentLayer.updateLayerPreview();
|
|
|
|
currFile.VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
|
|
|
|
}
|
|
|
|
|
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
|
2021-12-06 19:37:43 +03:00
|
|
|
let vfxContext = currFile.VFXLayer.context;
|
2021-11-01 15:02:18 +03:00
|
|
|
|
|
|
|
// Clearing the vfx canvas
|
2021-12-06 19:37:43 +03:00
|
|
|
vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
|
2022-01-06 01:54:29 +03:00
|
|
|
|
|
|
|
currFile.VFXLayer.drawLine(this.startMousePos[0], this.startMousePos[1], this.endMousePos[0], this.startMousePos[1], 1);
|
|
|
|
currFile.VFXLayer.drawLine(this.endMousePos[0], this.startMousePos[1], this.endMousePos[0], this.endMousePos[1], 1);
|
|
|
|
currFile.VFXLayer.drawLine(this.endMousePos[0], this.endMousePos[1], this.startMousePos[0], this.endMousePos[1], 1);
|
|
|
|
currFile.VFXLayer.drawLine(this.startMousePos[0], this.endMousePos[1], this.startMousePos[0], this.startMousePos[1], 1);
|
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
|
2021-12-06 19:37:43 +03:00
|
|
|
let vfxContext = currFile.VFXLayer.context;
|
2021-11-09 00:25:30 +03:00
|
|
|
let ret = this.currSelection;
|
|
|
|
|
|
|
|
// Clearing the vfx canvas
|
2021-12-06 19:37:43 +03:00
|
|
|
vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
|
2021-11-09 00:25:30 +03:00
|
|
|
|
|
|
|
// Fixing the coordinates
|
2022-01-06 01:54:29 +03:00
|
|
|
this.currSelection.left = Math.floor(x - (width / 2));
|
|
|
|
this.currSelection.top = Math.floor(y - (height / 2));
|
|
|
|
this.currSelection.right = this.currSelection.left + Math.floor(width);
|
|
|
|
this.currSelection.bottom = this.currSelection.top + Math.floor(height);
|
2021-11-09 00:25:30 +03:00
|
|
|
|
|
|
|
// Drawing the rect
|
2022-01-06 01:54:29 +03:00
|
|
|
currFile.VFXLayer.drawLine(this.currSelection.left, this.currSelection.top, this.currSelection.right, this.currSelection.top, 1);
|
|
|
|
currFile.VFXLayer.drawLine(this.currSelection.right, this.currSelection.top, this.currSelection.right, this.currSelection.bottom, 1);
|
|
|
|
currFile.VFXLayer.drawLine(this.currSelection.right, this.currSelection.bottom, this.currSelection.left, this.currSelection.bottom, 1);
|
|
|
|
currFile.VFXLayer.drawLine(this.currSelection.left, this.currSelection.bottom, this.currSelection.left, this.currSelection.top, 1);
|
2021-11-09 00:25:30 +03:00
|
|
|
|
|
|
|
return ret;
|
|
|
|
}
|
2021-11-01 14:31:09 +03:00
|
|
|
}
|