2020-03-04 16:36:40 +03:00
|
|
|
var isRectSelecting = false;
|
2020-03-04 17:46:25 +03:00
|
|
|
let startX;
|
|
|
|
let startY;
|
2020-03-05 15:34:29 +03:00
|
|
|
let endX;
|
|
|
|
let endY;
|
2020-03-04 21:38:35 +03:00
|
|
|
let workingLayer;
|
|
|
|
let imageData;
|
2020-03-04 16:36:40 +03:00
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
function startRectSelection(mouseEvent) {
|
|
|
|
// Putting the vfx layer on top of everything
|
|
|
|
VFXCanvas.style.zIndex = MAX_Z_INDEX;
|
2020-03-04 21:38:35 +03:00
|
|
|
// Saving the layer the user is working on
|
|
|
|
workingLayer = currentLayer;
|
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
// Saving the start coords of the rect
|
2020-03-04 21:38:35 +03:00
|
|
|
let cursorPos = getCursorPosition(mouseEvent);
|
|
|
|
startX = Math.floor(cursorPos[0] / zoom) + 0.5;
|
|
|
|
startY = Math.floor(cursorPos[1] / zoom) + 0.5;
|
2020-03-04 17:46:25 +03:00
|
|
|
|
|
|
|
// Drawing the rect
|
|
|
|
drawRect(startX, startY);
|
2020-03-04 16:36:40 +03:00
|
|
|
}
|
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
function updateRectSelection(mouseEvent) {
|
2020-03-04 21:38:35 +03:00
|
|
|
let pos = getCursorPosition(mouseEvent);
|
2020-03-04 17:46:25 +03:00
|
|
|
|
|
|
|
// Drawing the rect
|
2020-03-04 21:38:35 +03:00
|
|
|
drawRect(Math.floor(pos[0] / zoom) + 0.5, Math.floor(pos[1] / zoom) + 0.5);
|
2020-03-04 16:36:40 +03:00
|
|
|
}
|
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
function endRectSelection(mouseEvent) {
|
2020-03-04 21:38:35 +03:00
|
|
|
// Getting the end position
|
|
|
|
let currentPos = getCursorPosition(mouseEvent);
|
2020-03-05 15:34:29 +03:00
|
|
|
endX = currentPos[0] / zoom;
|
|
|
|
endY = currentPos[1] / zoom;
|
2020-03-04 21:38:35 +03:00
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
// Putting the vfx layer behind everything
|
|
|
|
isRectSelecting = false;
|
2020-03-04 21:38:35 +03:00
|
|
|
// Getting the selected pixels
|
2020-03-05 15:34:29 +03:00
|
|
|
imageData = currentLayer.context.createImageData(endX - startX, endY - startY);
|
|
|
|
|
|
|
|
// Selecting the move tool
|
|
|
|
currentTool = 'moveselection';
|
|
|
|
currentToolTemp = currentTool;
|
|
|
|
// Updating the cursor
|
|
|
|
updateCursor();
|
|
|
|
|
|
|
|
// TODO: find out why the imagedata is blank
|
|
|
|
for (i=0; i<imageData.data.length; i++) {
|
|
|
|
console.log("rgba(" + imageData.data[i] + ',' + imageData.data[i + 1] + ',' + imageData.data[i + 2] + ',' + imageData.data[i + 3] + ')');
|
|
|
|
}
|
2020-03-04 21:38:35 +03:00
|
|
|
|
|
|
|
// NOW
|
|
|
|
// Select the move tool
|
|
|
|
// the move tool moves stuff only if the cursor is on the selected area
|
|
|
|
// the move tool stops working when esc is pressed
|
|
|
|
// when the move tool is disabled, the control is given to the brush tool
|
|
|
|
// on click: start dragging
|
|
|
|
// on drag: render preview by changing the position of the image data and change the position of the selection rect
|
|
|
|
// IMPORTANT: the image data must be deleted from the original layer
|
|
|
|
// the image data must be copied to a temporary layer
|
|
|
|
// the image data is added to the original layer when the move tool is disabled
|
|
|
|
|
2020-03-05 15:34:29 +03:00
|
|
|
currentLayer.context.putImageData(imageData, startX, startY);
|
2020-03-04 17:46:25 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function drawRect(x, y) {
|
|
|
|
console.log("Currently selecting");
|
|
|
|
// Getting the vfx context
|
|
|
|
let vfxContext = VFXCanvas.getContext("2d");
|
|
|
|
|
|
|
|
// Clearing the vfx canvas
|
|
|
|
vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
|
2020-03-04 21:38:35 +03:00
|
|
|
vfxContext.lineWidth = 1;
|
|
|
|
vfxContext.setLineDash([4]);
|
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
// Drawing the rect
|
|
|
|
vfxContext.beginPath();
|
|
|
|
vfxContext.rect(startX, startY, x - startX, y - startY);
|
2020-03-04 21:38:35 +03:00
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
vfxContext.stroke();
|
2020-03-04 21:38:35 +03:00
|
|
|
|
|
|
|
// TODO: make the rect blink from black to white in case of dark backgrounds
|
2020-03-04 17:46:25 +03:00
|
|
|
}
|
|
|
|
|
2020-03-04 21:38:35 +03:00
|
|
|
function applyChanges() {
|
|
|
|
VFXCanvas.style.zIndex = MIN_Z_INDEX;
|
2020-03-05 15:34:29 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
// Checks whether the pointer is inside the selected area or not
|
|
|
|
function cursorInSelectedArea() {
|
|
|
|
let cursorPos = getCursorPosition(currentMouseEvent);
|
|
|
|
let x = cursorPos[0] / zoom;
|
|
|
|
let y = cursorPos[1] / zoom;
|
|
|
|
|
|
|
|
let leftX = Math.min(startX, endX);
|
|
|
|
let rightX = Math.max(startX, endX);
|
|
|
|
let topY = Math.max(startY, endY);
|
|
|
|
let bottomY = Math.min(startY, endY);
|
|
|
|
|
|
|
|
// ISSUE: is it <= or <? test it
|
|
|
|
if (leftX <= x && x <= rightX) {
|
|
|
|
if (bottomY <= y && y <= topY) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
2020-03-04 21:38:35 +03:00
|
|
|
}
|