mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Started selection dragging
This commit is contained in:
Nicola
parent
de2479b007
commit
06f534e38e
@ -68,16 +68,15 @@ class MoveSelectionTool extends DrawingTool {
|
||||
onDrag(mousePos) {
|
||||
super.onDrag(mousePos);
|
||||
|
||||
this.currSelection = this.selectionTool.moveAnts(mousePos[0]/currFile.zoom,
|
||||
mousePos[1]/currFile.zoom, this.currSelection.width, this.currSelection.height);
|
||||
|
||||
// TODO: add (or subtract?) vector (boundingBoxCenter - canvasCenter);
|
||||
this.selectionTool.moveOffset = [Math.floor(mousePos[0] / currFile.zoom - currFile.canvasSize[0] / 2),
|
||||
Math.floor(mousePos[1] / currFile.zoom - currFile.canvasSize[1] / 2)];
|
||||
// clear the entire tmp layer
|
||||
currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
|
||||
currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
|
||||
// put the image data on the tmp layer with offset
|
||||
currFile.TMPLayer.context.putImageData(
|
||||
this.currSelection.data,
|
||||
Math.floor(mousePos[0] / currFile.zoom - this.currSelection.width / 2),
|
||||
Math.floor(mousePos[1] / currFile.zoom - this.currSelection.height / 2));
|
||||
currFile.TMPLayer.context.putImageData(this.currSelection,
|
||||
this.selectionTool.moveOffset[0], this.selectionTool.moveOffset[1]);
|
||||
this.selectionTool.drawSelectedArea();
|
||||
}
|
||||
|
||||
onEnd(mousePos) {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
class RectangularSelectionTool extends SelectionTool {
|
||||
currSelection = {};
|
||||
|
||||
constructor (name, options, switchFunc, moveTool) {
|
||||
super(name, options, switchFunc, moveTool);
|
||||
@ -46,6 +45,7 @@ class RectangularSelectionTool extends SelectionTool {
|
||||
|
||||
onEnd(mousePos) {
|
||||
super.onEnd(mousePos);
|
||||
|
||||
new HistoryState().EditCanvas();
|
||||
|
||||
// Getting the end position
|
||||
@ -69,40 +69,10 @@ class RectangularSelectionTool extends SelectionTool {
|
||||
this.boundingBox.minY = this.startMousePos[1] - 1;
|
||||
this.boundingBox.maxY = this.endMousePos[1] + 1;
|
||||
|
||||
// Switch to the move tool so that the user can move the selection
|
||||
this.switchFunc(this.moveTool);
|
||||
// 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);
|
||||
|
||||
/*
|
||||
// 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(
|
||||
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], this.startMousePos[1],
|
||||
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]);
|
||||
|
||||
this.moveTool.setSelectionData(this.currSelection, this);*/
|
||||
|
||||
this.moveTool.setSelectionData(this.getSelection(), this);
|
||||
}
|
||||
|
||||
copySelection() {
|
||||
|
||||
@ -13,9 +13,12 @@ class SelectionTool extends Tool {
|
||||
boundingBox = {minX: 9999999, maxX: -1, minY: 9999999, maxY: -1};
|
||||
currSelection = {};
|
||||
|
||||
outlineData = undefined;
|
||||
previewData = undefined;
|
||||
selectedPixel = undefined;
|
||||
|
||||
moveOffset = [0, 0];
|
||||
|
||||
constructor(name, options, switchFunc, moveTool) {
|
||||
super(name, options);
|
||||
|
||||
@ -31,6 +34,7 @@ class SelectionTool extends Tool {
|
||||
|
||||
this.boundingBox = {minX: 9999999, maxX: -1, minY: 9999999, maxY: -1};
|
||||
this.currSelection = {};
|
||||
this.moveOffset = [0, 0];
|
||||
|
||||
this.updateBoundingBox(mouseX, mouseY);
|
||||
}
|
||||
@ -49,7 +53,8 @@ class SelectionTool extends Tool {
|
||||
copySelection(){}
|
||||
|
||||
cursorInSelectedArea(mousePos) {
|
||||
let floored = [Math.floor(mousePos[0] / currFile.zoom), Math.floor(mousePos[1] / currFile.zoom)];
|
||||
let floored = [Math.floor(mousePos[0] / currFile.zoom) + this.moveOffset[0],
|
||||
Math.floor(mousePos[1] / currFile.zoom) + this.moveOffset[1]];
|
||||
|
||||
if (this.currSelection[floored] != undefined)
|
||||
return true;
|
||||
@ -114,15 +119,11 @@ class SelectionTool extends Tool {
|
||||
let selected = [];
|
||||
let visited = {};
|
||||
let data = currFile.VFXLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
|
||||
|
||||
/*
|
||||
currFile.VFXLayer.context.fillStyle = "red";
|
||||
currFile.VFXLayer.context.fillRect(this.boundingBox.minX, this.boundingBox.minY, 1, 1);
|
||||
currFile.VFXLayer.context.fillRect(this.boundingBox.maxX, this.boundingBox.minY, 1, 1);
|
||||
currFile.VFXLayer.context.fillRect(this.boundingBox.minX, this.boundingBox.maxY, 1, 1);
|
||||
currFile.VFXLayer.context.fillRect(this.boundingBox.maxX, this.boundingBox.maxY, 1, 1);
|
||||
*/
|
||||
let currLayerData = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
|
||||
|
||||
// BFS: a pixel that causes the algorithm to visit a pixel of the bounding box is outside the
|
||||
// selection. Otherwise, since the algorithm stops visiting when it reaches the outline,
|
||||
// the pixel is inside the selection (and so are all the ones that have been visited)
|
||||
for (let x=this.boundingBox.minX-1; x<=this.boundingBox.maxX+1; x++) {
|
||||
for (let y=this.boundingBox.minY-1; y<=this.boundingBox.maxY+1; y++) {
|
||||
if (visited[[x, y]] == undefined) {
|
||||
@ -136,9 +137,39 @@ class SelectionTool extends Tool {
|
||||
}
|
||||
}
|
||||
|
||||
// Save the selection outline
|
||||
this.outlineData = currFile.VFXLayer.context.getImageData(this.boundingBox.minX,
|
||||
this.boundingBox.minY, this.boundingBox.maxX - this.boundingBox.minX,
|
||||
this.boundingBox.maxY - this.boundingBox.minY);
|
||||
// Create the image data containing the selected pixels
|
||||
this.previewData = new ImageData(currFile.canvasSize[0], currFile.canvasSize[1]);
|
||||
|
||||
// Save the selected pixels so that they can be moved and pasted back in the right place
|
||||
for (const key in this.currSelection) {
|
||||
currFile.VFXLayer.context.fillStyle = "blue";
|
||||
currFile.VFXLayer.context.fillRect(parseInt(key.split(",")[0]), parseInt(key.split(",")[1]), 1, 1);
|
||||
let x = parseInt(key.split(",")[0]);
|
||||
let y = parseInt(key.split(",")[1]);
|
||||
let index = (y * currFile.canvasSize[1] + x) * 4;
|
||||
|
||||
for (let i=0; i<4; i++) {
|
||||
// Save the pixel
|
||||
this.previewData.data[index + i] = currLayerData[index + i];
|
||||
// Delete the data below
|
||||
currLayerData[index + i] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
this.drawSelectedArea();
|
||||
|
||||
return this.previewData;
|
||||
}
|
||||
|
||||
drawSelectedArea() {
|
||||
for (const key in this.currSelection) {
|
||||
let x = parseInt(key.split(",")[0]);
|
||||
let y = parseInt(key.split(",")[1]);
|
||||
|
||||
currFile.TMPLayer.context.fillStyle = "rgba(10, 0, 40, 0.3)";
|
||||
currFile.TMPLayer.context.fillRect(x + this.moveOffset[0], y + this.moveOffset[1], 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user