pixel-editor/js/_rectSelect.js

179 lines
4.8 KiB
JavaScript
Raw Normal View History

// RECT SELECTION TOOL
var isRectSelecting = false;
let startX;
let startY;
let endX;
let endY;
/** Starts the selection: saves the canvas, sets the start coordinates
*
* @param {*} mouseEvent
*/
function startRectSelection(mouseEvent) {
2020-04-04 10:41:56 +03:00
// Saving the canvas
new HistoryState().EditCanvas();
2020-04-04 10:41:56 +03:00
// Putting the vfx layer on top of everything
2021-07-22 19:11:55 +03:00
VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
2020-04-04 10:41:56 +03:00
// Saving the start coords of the rect
2021-07-22 20:05:58 +03:00
let cursorPos = Input.getCursorPosition(mouseEvent);
2020-04-04 10:41:56 +03:00
startX = Math.round(cursorPos[0] / zoom) - 0.5;
startY = Math.round(cursorPos[1] / zoom) - 0.5;
// Avoiding external selections
if (startX < 0) {
startX = 0;
}
else if (startX > currentLayer.canvas.width) {
startX = currentLayer.canvas.width;
}
if (startY < 0) {
startY = 0;
}
else if (startY > currentLayer.canvas.height) {
startY = currentLayer.canvas.height;
}
// Drawing the rect
drawRect(startX, startY);
selectionCanceled = false;
}
/** Updates the selection
*
* @param {*} mouseEvent
*/
function updateRectSelection(mouseEvent) {
2021-07-22 20:05:58 +03:00
let pos = Input.getCursorPosition(mouseEvent);
// Drawing the rect
2020-03-05 18:13:23 +03:00
drawRect(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
}
/** Ends the selection: sets the end coordiantes
*
* @param {*} mouseEvent
*/
function endRectSelection(mouseEvent) {
// Getting the end position
2021-07-22 20:05:58 +03:00
let currentPos = Input.getCursorPosition(mouseEvent);
2020-03-15 18:32:48 +03:00
endX = Math.round(currentPos[0] / zoom) + 0.5;
endY = Math.round(currentPos[1] / zoom) + 0.5;
2020-03-05 18:13:23 +03:00
// Inverting end and start (start must always be the top left corner)
if (endX < startX) {
let tmp = endX;
endX = startX;
startX = tmp;
}
// Same for the y
if (endY < startY) {
let tmp = endY;
endY = startY;
startY = tmp;
}
// Selecting the move tool
currentTool = tool.moveselection;
currentToolTemp = currentTool;
2020-03-05 18:13:23 +03:00
// Resetting this
isRectSelecting = false;
// Updating the cursor
currentTool.updateCursor();
}
/** Cuts the selection from its canvas and puts it in the tmp layer so it can be moved
*
* @param {*} mousePosition
*/
function cutSelection(mousePosition) {
// Getting the selected pixels
2020-03-15 18:32:48 +03:00
imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
2020-04-09 18:20:40 +03:00
currentLayer.context.clearRect(startX - 0.5, startY - 0.5, endX - startX + 1, endY - startY + 1);
2020-03-05 18:13:23 +03:00
// Moving those pixels from the current layer to the tmp layer
2020-04-09 18:20:40 +03:00
TMPLayer.context.putImageData(imageDataToMove, startX + 1, startY);
}
/** Draws a dashed rectangle representing the selection
*
* @param {*} x Current end x coordinate of the selection
* @param {*} y Current end y coordinate of the selection
*/
function drawRect(x, y) {
2020-04-04 10:41:56 +03:00
// Getting the vfx context
2021-07-22 19:11:55 +03:00
let vfxContext = VFXLayer.context;
2020-04-04 10:41:56 +03:00
// Clearing the vfx canvas
2021-07-22 19:11:55 +03:00
vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
2020-04-04 10:41:56 +03:00
vfxContext.lineWidth = 1;
vfxContext.strokeStyle = 'black';
vfxContext.setLineDash([4]);
2020-04-04 10:41:56 +03:00
// Drawing the rect
vfxContext.beginPath();
vfxContext.rect(startX, startY, x - startX, y - startY);
2020-04-04 10:41:56 +03:00
vfxContext.stroke();
}
function applyChanges() {
2021-07-22 19:11:55 +03:00
VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
}
// Checks whether the pointer is inside the selected area or not
function cursorInSelectedArea() {
// Getting the cursor position
2021-07-22 20:05:58 +03:00
let cursorPos = Input.getCursorPosition(Input.getCurrMouseEvent());
// Getting the coordinates relatively to the canvas
2020-04-04 10:41:56 +03:00
let x = cursorPos[0] / zoom;
let y = cursorPos[1] / zoom;
// This is to avoid rightX or topY being less than leftX or bottomY
2020-04-04 10:41:56 +03:00
let leftX = Math.min(startX, endX);
let rightX = Math.max(startX, endX);
let topY = Math.max(startY, endY);
let bottomY = Math.min(startY, endY);
2020-04-04 10:41:56 +03:00
if (leftX <= x && x <= rightX) {
if (bottomY <= y && y <= topY) {
return true;
}
2020-04-04 10:41:56 +03:00
return false;
}
2020-04-04 10:41:56 +03:00
return false;
2020-03-05 18:13:23 +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 selectin
*/
2020-03-05 18:13:23 +03:00
function moveSelection(x, y, width, height) {
2020-04-04 10:41:56 +03:00
// Getting the vfx context
2021-07-22 19:11:55 +03:00
let vfxContext = VFXLayer.context;
2020-03-05 18:13:23 +03:00
2020-04-04 10:41:56 +03:00
// Clearing the vfx canvas
2021-07-22 19:11:55 +03:00
vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
2020-04-04 10:41:56 +03:00
vfxContext.lineWidth = 1;
vfxContext.setLineDash([4]);
2020-03-05 18:13:23 +03:00
// Fixing the coordinates
startX = Math.round(Math.round(x) - 0.5 - Math.round(width / 2)) + 0.5;
startY = Math.round(Math.round(y) - 0.5 - Math.round(height / 2)) + 0.5;
2020-04-04 10:41:56 +03:00
endX = startX + Math.round(width);
endY = startY + Math.round(height);
2020-03-05 18:13:23 +03:00
2020-04-04 10:41:56 +03:00
// Drawing the rect
vfxContext.beginPath();
vfxContext.rect(startX, startY, width, height);
2020-03-05 18:13:23 +03:00
2020-04-04 10:41:56 +03:00
vfxContext.stroke();
}