mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Started selection dragging

This commit is contained in:
Nicola 2022-01-06 23:12:09 +01:00
parent de2479b007
commit 06f534e38e
3 changed files with 53 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js/tools/MoveSelectionTool.js
View File

@ -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) {

38
js/tools/RectangularSelectionTool.js
View File

@ -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() {

53
js/tools/SelectionTool.js
View File

@ -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);
}
}