mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Started lasso selection preview
This commit is contained in:
parent
fd3daecba5
commit
8df8b3ac54
|
@ -157,7 +157,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
width:16%;
|
width:5.5em;
|
||||||
border-radius:5%;
|
border-radius:5%;
|
||||||
margin-right:4%;
|
margin-right:4%;
|
||||||
margin-top:4%;
|
margin-top:4%;
|
||||||
|
|
|
@ -38,7 +38,6 @@ const ToolManager = (() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseWheel(mouseEvent) {
|
function onMouseWheel(mouseEvent) {
|
||||||
console.log("MOUSE WHEEL");
|
|
||||||
if (!EditorState.documentCreated || Dialogue.isOpen())
|
if (!EditorState.documentCreated || Dialogue.isOpen())
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
@ -125,11 +124,11 @@ const ToolManager = (() => {
|
||||||
tools["eyedropper"].onEnd(mousePos, mouseEvent.target);
|
tools["eyedropper"].onEnd(mousePos, mouseEvent.target);
|
||||||
}
|
}
|
||||||
else if (!currFile.currentLayer.isLocked || !((Object.getPrototypeOf(currTool) instanceof DrawingTool))) {
|
else if (!currFile.currentLayer.isLocked || !((Object.getPrototypeOf(currTool) instanceof DrawingTool))) {
|
||||||
currTool.onEnd(mousePos);
|
currTool.onEnd(mousePos, mouseEvent.target);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
tools["pan"].onEnd(mousePos);
|
tools["pan"].onEnd(mousePos, mouseEvent.target);
|
||||||
break;
|
break;
|
||||||
case 3:
|
case 3:
|
||||||
currTool.onRightEnd(mousePos, mouseEvent.target);
|
currTool.onRightEnd(mousePos, mouseEvent.target);
|
||||||
|
|
|
@ -293,12 +293,14 @@ class Layer {
|
||||||
while (true) {
|
while (true) {
|
||||||
//set pixel
|
//set pixel
|
||||||
// If the current tool is the brush
|
// If the current tool is the brush
|
||||||
if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
|
// REFACTOR: this is terrible
|
||||||
|
if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse'
|
||||||
|
|| ToolManager.currentTool().name == 'lassoselect') {
|
||||||
// I fill the rect
|
// I fill the rect
|
||||||
currFile.currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
this.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
||||||
} else if (ToolManager.currentTool().name == 'eraser') {
|
} else if (ToolManager.currentTool().name == 'eraser') {
|
||||||
// In case I'm using the eraser I must clear the rect
|
// In case I'm using the eraser I must clear the rect
|
||||||
currFile.currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
this.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
||||||
}
|
}
|
||||||
|
|
||||||
//if we've reached the end goal, exit the loop
|
//if we've reached the end goal, exit the loop
|
||||||
|
|
|
@ -82,8 +82,6 @@ class PixelGrid extends Layer {
|
||||||
|
|
||||||
this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
|
this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
|
||||||
|
|
||||||
console.log("Line ditance: " + this.lineDistance)
|
|
||||||
|
|
||||||
// OPTIMIZABLE, could probably be a bit more elegant
|
// OPTIMIZABLE, could probably be a bit more elegant
|
||||||
// Draw horizontal lines
|
// Draw horizontal lines
|
||||||
for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {
|
for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {
|
||||||
|
|
|
@ -1,29 +1,76 @@
|
||||||
class LassoSelectionTool extends SelectionTool {
|
class LassoSelectionTool extends SelectionTool {
|
||||||
|
currentPixels = []
|
||||||
|
|
||||||
constructor (name, options, switchFunc, moveTool) {
|
constructor (name, options, switchFunc, moveTool) {
|
||||||
super(name, options, switchFunc, moveTool);
|
super(name, options, switchFunc, moveTool);
|
||||||
|
|
||||||
|
Events.on('click', this.mainButton, switchFunc, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
onStart(mousePos) {
|
onStart(mousePos) {
|
||||||
super.onStart(mousePos);
|
super.onStart(mousePos);
|
||||||
|
|
||||||
|
// Putting the vfx layer on top of everything
|
||||||
|
currFile.VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
|
||||||
|
// clearSelection();
|
||||||
|
this.currentPixels = [];
|
||||||
|
this.drawSelection();
|
||||||
|
this.currentPixels.push([mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom]);
|
||||||
}
|
}
|
||||||
|
|
||||||
onDrag(mousePos) {
|
onDrag(mousePos) {
|
||||||
super.onDrag(mousePos);
|
super.onDrag(mousePos);
|
||||||
|
|
||||||
|
if (this.currentPixels[this.currentPixels.length - 1] != mousePos)
|
||||||
|
this.currentPixels.push([mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom]);
|
||||||
|
this.drawSelection();
|
||||||
|
console.log("here selection");
|
||||||
}
|
}
|
||||||
|
|
||||||
onEnd(mousePos) {
|
onEnd(mousePos) {
|
||||||
super.onEnd(mousePos);
|
super.onEnd(mousePos);
|
||||||
}
|
}
|
||||||
|
|
||||||
onSelect(mousePos) {
|
onSelect() {
|
||||||
super.onSelect(mousePos);
|
super.onSelect();
|
||||||
}
|
}
|
||||||
|
|
||||||
onDeselect(mousePos) {
|
onDeselect() {
|
||||||
super.onDeselect(mousePos);
|
super.onDeselect();
|
||||||
}
|
}
|
||||||
|
|
||||||
drawSelection(mousePos) {
|
drawSelection() {
|
||||||
|
if (this.currentPixels.length <= 1)
|
||||||
|
return;
|
||||||
|
let point = [];
|
||||||
|
let prevPoint = [];
|
||||||
|
|
||||||
|
currFile.VFXLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
|
||||||
|
//currFile.VFXLayer.context.setLineDash([2, 2]);
|
||||||
|
currFile.VFXLayer.context.strokeStyle = 'rgba(0,0,0,1)';
|
||||||
|
currFile.VFXLayer.context.fillStyle = 'rgba(0,0,0,1)';
|
||||||
|
currFile.VFXLayer.context.lineWidth = 1;
|
||||||
|
currFile.VFXLayer.context.beginPath();
|
||||||
|
|
||||||
|
for (var index = 0; index < this.currentPixels.length; index ++) {
|
||||||
|
point = this.currentPixels[index];
|
||||||
|
|
||||||
|
if (index == 0)
|
||||||
|
currFile.VFXLayer.context.moveTo(point[0], point[1]);
|
||||||
|
else {
|
||||||
|
prevPoint = this.currentPixels[index- 1];
|
||||||
|
currFile.VFXLayer.context.lineTo(point[0], point[1]);
|
||||||
|
currFile.VFXLayer.drawLine(Math.floor(prevPoint[0]), Math.floor(prevPoint[1]),
|
||||||
|
Math.floor(point[0]), Math.floor(point[1]), 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
currFile.VFXLayer.drawLine(Math.floor(prevPoint[0]), Math.floor(prevPoint[1]),
|
||||||
|
Math.floor(this.startMousePos[0] / currFile.zoom), Math.floor(this.startMousePos[1] / currFile.zoom), 1);
|
||||||
|
currFile.VFXLayer.context.lineTo(this.startMousePos[0] / currFile.zoom, this.startMousePos[1] / currFile.zoom);
|
||||||
|
|
||||||
|
currFile.VFXLayer.context.fillStyle = 'rgba(0,0,0,0.3)';
|
||||||
|
currFile.VFXLayer.context.fill();
|
||||||
|
currFile.VFXLayer.context.closePath();
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -50,7 +50,7 @@
|
||||||
|
|
||||||
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
|
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
|
||||||
|
|
||||||
<li><button title = "Lasso Selection Tool (Q)" id = "lasso-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
|
<li><button title = "Lasso Selection Tool (Q)" id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
|
||||||
|
|
||||||
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
|
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user