Added back tool resizing

js/Tool.js

@@ -11,8 +11,6 @@ class Tool {
 	cursorType = {};
 	cursor = undefined;
 	cursorHTMLElement = undefined;
-	currSize = 1;
-	prevSize = 1;
 
 	// Useful coordinates
 	startMousePos = {};

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;
+            }
         }
     }
 

js/_toolButtons.js

@@ -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);

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

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) {
+        
+    }
 }

js/tools/_all.js

@@ -1,12 +0,0 @@
-new Tool('resizeline', {
-	cursor: 'default',
-});
-
-new Tool('ellipse', {
-	cursor: 'none',
-	brushPreview: true,
-});
-
-new Tool('moveselection', {
-	cursor: 'crosshair',
-});