mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Added back rect selection

Browse Source
This commit is contained in:
unsettledgames
2021-11-08 22:25:30 +01:00
parent a56d7092fc
commit ea45fa4842
12 changed files with 193 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/tools/FillTool.js
View File

@@ -53,7 +53,7 @@ class FillTool extends Tool {
//the color of the cluster that is being filled
let clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2], tempImage.data[startingPosition+3]];
//the new color to fill with
//the color to fill with
let fillColor = Color.hexToRgb(currentLayer.context.fillStyle);
//if you try to fill with the same color that's already there, exit the function
@@ -61,7 +61,6 @@ class FillTool extends Tool {
clusterColor[1] == fillColor.g &&
clusterColor[2] == fillColor.b &&
clusterColor[3] != 0) {
console.log("Returned");
return;
}
@@ -90,6 +89,7 @@ class FillTool extends Tool {
++y;
reachLeft = false;
reachRight = false;
while (y++ < canvasSize[1] - 1 && matchStartColor(tempImage, pixelPos, clusterColor)) {
colorPixel(tempImage, pixelPos, fillColor);
if (x > 0) {

111
js/tools/MoveSelectionTool.js
View File

@@ -1,14 +1,39 @@
class MoveSelectionTool extends Tool {
constructor (name, options, switchFunc) {
currSelection = undefined;
selectionTool = undefined;
endTool = undefined;
switchFunc = undefined;
constructor (name, options, switchFunc, endTool) {
super(name, options, switchFunc);
this.switchFunc = switchFunc;
this.endTool = endTool;
}
onStart(mousePos) {
super.onStart(mousePos);
if (!this.cursorInSelectedArea(mousePos)) {
this.endSelection();
}
}
onDrag(mousePos) {
super.onDrag(mousePos);
if (this.cursorInSelectedArea(mousePos)) {
this.currSelection = this.selectionTool.moveAnts(mousePos[0]/zoom,
mousePos[1]/zoom, this.currSelection.width, this.currSelection.height);
// clear the entire tmp layer
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
// put the image data on the tmp layer with offset
TMPLayer.context.putImageData(
this.currSelection.data,
Math.round(mousePos[0] / zoom) - this.currSelection.width / 2,
Math.round(mousePos[1] / zoom) - this.currSelection.height / 2);
}
}
onEnd(mousePos) {
@@ -16,10 +41,90 @@ class MoveSelectionTool extends Tool {
}
onSelect() {
super.onSelect(mousePos);
super.onSelect();
}
onDeselect() {
super.onDeselect(mousePos);
super.onDeselect();
}
setSelectionData(data, tool) {
this.currSelection = data;
this.selectionTool = tool;
this.firstTimeMove = true;
}
onHover(mousePos) {
super.onHover(mousePos);
if (this.cursorInSelectedArea(mousePos)) {
canvasView.style.cursor = 'move';
}
else {
canvasView.style.cursor = 'default';
}
}
cursorInSelectedArea(cursorPos) {
// Getting the coordinates relatively to the canvas
let x = cursorPos[0] / zoom;
let y = cursorPos[1] / zoom;
if (this.currSelection.left <= x && x <= this.currSelection.right) {
if (y <= this.currSelection.bottom && y >= this.currSelection.top) {
return true;
}
return false;
}
return false;
}
endSelection() {
// Clearing the tmp (move preview) and vfx (ants) layers
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, 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 = currentLayer.context.getImageData(
this.currSelection.left, this.currSelection.top,
this.currSelection.width, this.currSelection.height
);
for (let i=0; i<underlyingImageData.data.length; i+=4) {
let currentMovePixel = [
this.currSelection.data.data[i], this.currSelection.data.data[i+1],
this.currSelection.data.data[i+2], this.currSelection.data.data[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(underlyingImageData)) {
this.currSelection.data.data[i] = currentUnderlyingPixel[0];
this.currSelection.data.data[i+1] = currentUnderlyingPixel[1];
this.currSelection.data.data[i+2] = currentUnderlyingPixel[2];
this.currSelection.data.data[i+3] = currentUnderlyingPixel[3];
}
}
}
currentLayer.context.putImageData(
this.currSelection.data,
this.currSelection.left,
this.currSelection.top);
this.currSelection = undefined;
currentLayer.updateLayerPreview();
VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
// Saving history
new HistoryState().EditCanvas();
// Switch to brush
this.switchFunc(this.endTool);
}
}

7
js/tools/RectangleTool.js
View File

@@ -20,7 +20,7 @@ class RectangleTool extends ResizableTool {
changeFillType() {
if (this.isSelected)
if (this.currFillMode == 'empty') {
this.currFillMode = 'full';
this.currFillMode = 'fill';
this.emptyRectangleSVG.setAttribute('display', 'none');
this.fullRectangleSVG.setAttribute('display', 'visible');
}
@@ -36,8 +36,6 @@ class RectangleTool extends ResizableTool {
onStart(mousePos) {
super.onStart(mousePos);
console.log("Rect start");
// Putting the tmp layer on top of everything
TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
@@ -46,8 +44,6 @@ class RectangleTool extends ResizableTool {
}
onDrag(mousePos, cursorTarget) {
super.onDrag(mousePos);
console.log("dragging");
// Drawing the rect at the right position
this.drawRect(Math.floor(mousePos[0] / zoom) + 0.5, Math.floor(mousePos[1] / zoom) + 0.5);
@@ -123,7 +119,6 @@ class RectangleTool extends ResizableTool {
* @param {*} y The current end y of the rectangle
*/
drawRect(x, y) {
console.log("here");
// Getting the tmp context
let tmpContext = TMPLayer.context;

74
js/tools/RectangularSelectionTool.js
View File

@@ -1,7 +1,13 @@
class RectangularSelectionTool extends SelectionTool {
constructor (name, options, switchFunc) {
switchFunc = undefined;
moveTool = undefined;
currSelection = {};
constructor (name, options, switchFunc, moveTool) {
super(name, options, switchFunc);
this.switchFunc = switchFunc;
this.moveTool = moveTool;
Events.on('click', this.mainButton, switchFunc, this);
}
@@ -33,14 +39,14 @@ class RectangularSelectionTool extends SelectionTool {
}
// Drawing the rect
this.drawRect(this.startMousePos[0], this.startMousePos[1]);
this.drawSelection(this.startMousePos[0], this.startMousePos[1]);
}
onDrag(mousePos) {
super.onDrag(mousePos);
// Drawing the rect
this.drawRect(Math.round(mousePos[0] / zoom) + 0.5, Math.round(mousePos[1] / zoom) + 0.5);
this.drawSelection(Math.round(mousePos[0] / zoom) + 0.5, Math.round(mousePos[1] / zoom) + 0.5);
}
onEnd(mousePos) {
@@ -62,6 +68,33 @@ class RectangularSelectionTool extends SelectionTool {
this.endMousePos[1] = this.startMousePos[1];
this.startMousePos[1] = tmp;
}
// 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: 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
currentLayer.context.clearRect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5,
dataWidth + 1, dataHeight + 1);
// Moving those pixels from the current layer to the tmp layer
TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]);
this.moveTool.setSelectionData(this.currSelection, this);
}
onSelect() {
@@ -72,7 +105,7 @@ class RectangularSelectionTool extends SelectionTool {
super.onDeselect();
}
drawRect(x, y) {
drawSelection(x, y) {
// Getting the vfx context
let vfxContext = VFXLayer.context;
@@ -88,4 +121,37 @@ class RectangularSelectionTool extends SelectionTool {
vfxContext.stroke();
}
/** 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
let vfxContext = VFXLayer.context;
let ret = this.currSelection;
// Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
vfxContext.lineWidth = 1;
vfxContext.setLineDash([4]);
// Fixing the coordinates
this.currSelection.left = Math.round(Math.round(x) - 0.5 - Math.round(width / 2)) + 0.5;
this.currSelection.top = Math.round(Math.round(y) - 0.5 - Math.round(height / 2)) + 0.5;
this.currSelection.right = this.currSelection.left + Math.round(width);
this.currSelection.bottom = this.currSelection.top + Math.round(height);
// Drawing the rect
vfxContext.beginPath();
vfxContext.rect(this.currSelection.left, this.currSelection.top, width, height);
vfxContext.stroke();
return ret;
}
}