From 3c62a1f0fd1db74ea6c4f8e37b1e8e2034662628 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Mon, 8 Nov 2021 23:12:51 +0100 Subject: [PATCH] Added back tool resizing --- js/{_tools.js => Tool.js} | 2 -- js/ToolManager.js | 65 ++++++++++++++++++++++++--------------- js/_toolButtons.js | 28 ----------------- js/pixel-editor.js | 3 +- js/tools/ResizableTool.js | 27 ++++++++++++++++ js/tools/_all.js | 12 -------- 6 files changed, 69 insertions(+), 68 deletions(-) rename js/{_tools.js => Tool.js} (99%) delete mode 100644 js/_toolButtons.js delete mode 100644 js/tools/_all.js diff --git a/js/_tools.js b/js/Tool.js similarity index 99% rename from js/_tools.js rename to js/Tool.js index 037a130..7a50056 100644 --- a/js/_tools.js +++ b/js/Tool.js @@ -11,8 +11,6 @@ class Tool { cursorType = {}; cursor = undefined; cursorHTMLElement = undefined; - currSize = 1; - prevSize = 1; // Useful coordinates startMousePos = {}; diff --git a/js/ToolManager.js b/js/ToolManager.js index 4bcfb88..23b8244 100644 --- a/js/ToolManager.js +++ b/js/ToolManager.js @@ -34,19 +34,21 @@ const ToolManager = (() => { let mousePos = Input.getCursorPosition(mouseEvent); - switch(mouseEvent.which) { - case 1: - if (!Input.isDragging()) { + if (!Input.isDragging()) { + switch(mouseEvent.which) { + case 1: currTool.onStart(mousePos, mouseEvent.target); - } - break; - case 2: - break; - case 3: - break; - default: - break; - } + break; + case 2: + panTool.onStart(mousePos, mouseEvent.target); + break; + case 3: + currTool.onRightStart(mousePos, mouseEvent.target); + break; + default: + break; + } + } } function onMouseMove(mouseEvent) { @@ -57,7 +59,20 @@ const ToolManager = (() => { currTool.onHover(mousePos, mouseEvent.target); if (Input.isDragging()) { - currTool.onDrag(mousePos, mouseEvent.target); + switch (mouseEvent.which) { + case 1: + currTool.onDrag(mousePos, mouseEvent.target); + break; + case 2: + panTool.onDrag(mousePos, mouseEvent.target); + break; + case 3: + currTool.onRightDrag(mousePos, mouseEvent.target); + break; + default: + console.log("wtf"); + break; + } } } @@ -66,18 +81,20 @@ const ToolManager = (() => { return; let mousePos = Input.getCursorPosition(mouseEvent); - switch(mouseEvent.which) { - case 1: - if (Input.isDragging()) { + if (Input.isDragging()) { + switch(mouseEvent.which) { + case 1: currTool.onEnd(mousePos); - } - break; - case 2: - break; - case 3: - break; - default: - break; + break; + case 2: + panTool.onEnd(mousePos); + break; + case 3: + currTool.onRightEnd(mousePos, mouseEvent.target); + break; + default: + break; + } } } diff --git a/js/_toolButtons.js b/js/_toolButtons.js deleted file mode 100644 index 974f70d..0000000 --- a/js/_toolButtons.js +++ /dev/null @@ -1,28 +0,0 @@ -// ellipse -Events.on('click','ellipse-button', function(e){ - // If the user clicks twice on the button, they change the draw mode - if (currentTool.name == 'ellipse') { - if (ellipseDrawMode == 'empty') { - ellipseDrawMode = 'fill'; - setEllipseToolSvg(); - } - else { - ellipseDrawMode = 'empty'; - setEllipseToolSvg(); - } - } - else { - tool.ellipse.switchTo(); - } -}, false); - -// ellipse bigger -Events.on('click',"ellipse-bigger-button", function(){ - tool.ellipse.brushSize++; -}, false); - -// ellipse smaller -Events.on('click',"ellipse-smaller-button", function(e){ - if(tool.ellipse.brushSize > 1) - tool.ellipse.brushSize--; -}, false); \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index b7e359b..9e1d6b4 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -12,7 +12,7 @@ //=include ColorModule.js //=include _drawLine.js -//=include _tools.js +//=include Tool.js //=include tools/ResizableTool.js //=include tools/SelectionTool.js @@ -53,7 +53,6 @@ //=include SplashPage.js /**buttons**/ -//=include _toolButtons.js //=include FileManager.js //=include TopMenuModule.js //=include _ellipse.js diff --git a/js/tools/ResizableTool.js b/js/tools/ResizableTool.js index 49b5006..29b4214 100644 --- a/js/tools/ResizableTool.js +++ b/js/tools/ResizableTool.js @@ -1,5 +1,32 @@ class ResizableTool extends Tool { + startResizePos = undefined; + currSize = 1; + prevSize = 1; + constructor(name, options, switchFunc) { super(name, options, switchFunc); } + + onRightStart(mousePos, mouseEvent) { + this.startResizePos = mousePos; + } + + onRightDrag(mousePos, mouseEvent) { + //get new brush size based on x distance from original clicking location + let distanceFromClick = mousePos[0]/zoom - this.startResizePos[0]/zoom; + + let brushSizeChange = Math.round(distanceFromClick/10); + let newBrushSize = this.currSize + brushSizeChange; + + //set the brush to the new size as long as its bigger than 1 and less than 128 + this.currSize = Math.min(Math.max(1,newBrushSize), 128); + + //fix offset so the cursor stays centered + this.updateCursor(); + this.onHover(this.startResizePos, mouseEvent); + } + + onRightEnd(mousePos, mouseEvent) { + + } } \ No newline at end of file diff --git a/js/tools/_all.js b/js/tools/_all.js deleted file mode 100644 index 5dd951a..0000000 --- a/js/tools/_all.js +++ /dev/null @@ -1,12 +0,0 @@ -new Tool('resizeline', { - cursor: 'default', -}); - -new Tool('ellipse', { - cursor: 'none', - brushPreview: true, -}); - -new Tool('moveselection', { - cursor: 'crosshair', -}); \ No newline at end of file