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

Started lasso selection preview

This commit is contained in:
Nicola 2021-12-28 22:51:18 +01:00
parent fd3daecba5
commit 8df8b3ac54
6 changed files with 62 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/_splash-page.scss
View File

@ -155,9 +155,9 @@
.sp-template {
display: flex;
align-items: center;
text-transform: uppercase;
width:16%;
width:5.5em;
border-radius:5%;
margin-right:4%;
margin-top:4%;

5
js/ToolManager.js
View File

@ -38,7 +38,6 @@ const ToolManager = (() => {
}
function onMouseWheel(mouseEvent) {
console.log("MOUSE WHEEL");
if (!EditorState.documentCreated || Dialogue.isOpen())
return;
@ -125,11 +124,11 @@ const ToolManager = (() => {
tools["eyedropper"].onEnd(mousePos, mouseEvent.target);
}
else if (!currFile.currentLayer.isLocked || !((Object.getPrototypeOf(currTool) instanceof DrawingTool))) {
currTool.onEnd(mousePos);
currTool.onEnd(mousePos, mouseEvent.target);
}
break;
case 2:
tools["pan"].onEnd(mousePos);
tools["pan"].onEnd(mousePos, mouseEvent.target);
break;
case 3:
currTool.onRightEnd(mousePos, mouseEvent.target);

8
js/layers/Layer.js
View File

@ -293,12 +293,14 @@ class Layer {
while (true) {
//set pixel
// 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
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') {
// 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

2
js/layers/PixelGrid.js
View File

@ -82,8 +82,6 @@ class PixelGrid extends Layer {
this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
console.log("Line ditance: " + this.lineDistance)
// OPTIMIZABLE, could probably be a bit more elegant
// Draw horizontal lines
for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {

57
js/tools/LassoSelectionTool.js
View File

@ -1,29 +1,76 @@
class LassoSelectionTool extends SelectionTool {
currentPixels = []
constructor (name, options, switchFunc, moveTool) {
super(name, options, switchFunc, moveTool);
Events.on('click', this.mainButton, switchFunc, this);
}
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) {
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) {
super.onEnd(mousePos);
}
onSelect(mousePos) {
super.onSelect(mousePos);
onSelect() {
super.onSelect();
}
onDeselect(mousePos) {
super.onDeselect(mousePos);
onDeselect() {
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();
}
}

2
views/tools-menu.hbs
View File

@ -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 = "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>