mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
f499662afc
- added `/:paletteSlug/:resolution` functionality for localhost testing
- created `currFile.sublayers` for *things that should zoom with the canvas layers*
- `currFile.layers` now solely contains the canvas layers
- added `getProjectData` to `FileManager`'s exported methods
---
- added `FileManager.localStorageSave` (it's basically just: localStorage.setItem("lpe-cache",FileManager.getProjectData()))
- added `FileManager.localStorageCheck` (it's basically just: `!!localStorage.getItem("lpe-cache")`)
- added `FileManager.localStorageLoad` (it's basically just: `return localStorage.getItem("lpe-cache")`)
- added `FileManager.localStorageReset` (for debugging purity)
---
- calling `FileManager.localStorageSave()` on mouse up (we should stress test this)
---
- changed lpe file format to `{canvasWidth:number,canvasHeight:number,selectedLayer:number,colors:[],layers:[]}`
- added backward compatibility for the old lpe file format
---
- added some canvas utility functions in `canvas_util`
- added Unsettled's color similarity utility functions in `color_util2`
---
- html boilerplate - wang tiles
-
- POC - tiny text boilerplate
- POC - tiny text font scraper
---
- WIP - added two optional url route parameters `/:paletteSlug/:resolution/:prefillWidth/:prefillBinaryStr`
- WIP POC - hbs_parser.js (outputs tree data about hbs file relationships)
95 lines
3.5 KiB
JavaScript
95 lines
3.5 KiB
JavaScript
class LassoSelectionTool extends SelectionTool {
|
|
currentPixels = [];
|
|
|
|
constructor (name, options, switchFunc, moveTool) {
|
|
super(name, options, switchFunc, moveTool);
|
|
Events.on('click', this.mainButton, switchFunc, this);
|
|
|
|
this.resetTutorial();
|
|
this.addTutorialTitle("Lasso selection tool");
|
|
this.addTutorialKey("Q", " to select the lasso selection tool");
|
|
this.addTutorialKey("Left drag", " to select an area");
|
|
this.addTutorialKey("Left drag", " to move a selection");
|
|
this.addTutorialKey("Esc", " to cancel a selection")
|
|
this.addTutorialKey("Click", " outside the selection to cancel it")
|
|
this.addTutorialKey("CTRL+C", " to copy a selection")
|
|
this.addTutorialKey("CTRL+V", " to paste a selection")
|
|
this.addTutorialKey("CTRL+X", " to cut a selection")
|
|
this.addTutorialImg("/images/ToolTutorials/lassoselect-tutorial.gif");
|
|
}
|
|
|
|
onStart(mousePos, mouseTarget) {
|
|
super.onStart(mousePos, mouseTarget);
|
|
|
|
if (Util.isChildOfByClass(mouseTarget, "editor-top-menu") ||
|
|
!Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
|
|
return;
|
|
|
|
this.currentPixels = [];
|
|
this.drawSelection();
|
|
this.currentPixels.push([mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom]);
|
|
}
|
|
|
|
onDrag(mousePos, mouseTarget) {
|
|
super.onDrag(mousePos, mouseTarget);
|
|
|
|
if (!Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
|
|
return;
|
|
|
|
if (this.currentPixels[this.currentPixels.length - 1] != mousePos)
|
|
this.currentPixels.push([mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom]);
|
|
|
|
this.drawSelection();
|
|
}
|
|
|
|
onEnd(mousePos, mouseTarget) {
|
|
super.onEnd(mousePos, mouseTarget);
|
|
new HistoryState().EditCanvas();
|
|
|
|
if (Util.isChildOfByClass(mouseTarget, "editor-top-menu"))
|
|
return;
|
|
|
|
this.currentPixels.push([this.startMousePos[0] / currFile.zoom, this.startMousePos[1] / currFile.zoom]);
|
|
|
|
// Include extreme borders
|
|
this.boundingBox.maxX++;
|
|
this.boundingBox.maxY++;
|
|
|
|
// Switch to the move tool so that the user can move the selection
|
|
this.switchFunc(this.moveTool);
|
|
this.moveTool.setSelectionData(this.getSelection(), this);
|
|
}
|
|
|
|
onSelect() {
|
|
super.onSelect();
|
|
}
|
|
|
|
onDeselect() {
|
|
super.onDeselect();
|
|
}
|
|
|
|
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.fillStyle = 'rgba(0,0,0,1)';
|
|
|
|
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.drawLine(Math.floor(prevPoint[0]), Math.floor(prevPoint[1]),
|
|
Math.floor(point[0]), Math.floor(point[1]), 1);
|
|
}
|
|
}
|
|
|
|
currFile.VFXLayer.drawLine(Math.floor(point[0]), Math.floor(point[1]),
|
|
Math.floor(this.currentPixels[0][0]), Math.floor(this.currentPixels[0][1]), 1);
|
|
}
|
|
} |