fixed screen dragging. super smooth now

src/Controllers/CanvasController.js

@@ -29,6 +29,7 @@ class CanvasController{
         this.canvas.addEventListener('mouseup', function(evt) {
             evt.preventDefault();
             this.updateMouseLocation(evt.offsetX, evt.offsetY)
+            this.mouseUp();
             this.left_click=false;
             this.right_click=false;
         }.bind(this));
@@ -80,11 +81,15 @@ class CanvasController{
     }
 
     mouseMove() {
-        alert("mouse move must be overriden");
+        alert("mouse move must be overridden");
     }
 
     mouseDown() {
-        alert("mouse down must be overriden");
+        alert("mouse down must be overridden");
+    }
+
+    mouseUp(){
+        alert("mouse up must be overridden")
     }
 }
 

src/Controllers/EditorController.js

@@ -20,6 +20,8 @@ class EditorController extends CanvasController{
         this.editOrganism();
     }
 
+    mouseUp(){}
+
     editOrganism() {
         if (this.edit_cell_type == null || this.mode != Modes.Edit)
             return;

src/Controllers/EnvironmentController.js

@@ -11,8 +11,6 @@ class EnvironmentController extends CanvasController{
         this.mode = Modes.Drag;
         this.org_to_clone = null;
         this.defineZoomControls();
-        this.prev_x;
-        this.prev_y;
         this.scale = 1;
     }
 
@@ -50,9 +48,15 @@ class EnvironmentController extends CanvasController{
     }
 
     mouseDown() {
+        this.start_x = this.mouse_x;
+        this.start_y = this.mouse_y;
         this.performModeAction();
     }
 
+    mouseUp() {
+
+    }
+
     performModeAction() {
         var mode = this.mode;
         var right_click = this.right_click;
@@ -104,10 +108,8 @@ class EnvironmentController extends CanvasController{
                 case Modes.Drag:
                     var cur_top = parseInt($('#env-canvas').css('top'), 10);
                     var cur_left = parseInt($('#env-canvas').css('left'), 10);
-                    var new_top = cur_top + ((this.mouse_y - this.prev_y)/this.scale);
-                    var new_left = cur_left + ((this.mouse_x - this.prev_x)/this.scale);
-                    this.prev_x = this.mouse_x;
-                    this.prev_y = this.mouse_y;
+                    var new_top = cur_top + ((this.mouse_y - this.start_y)*this.scale);
+                    var new_left = cur_left + ((this.mouse_x - this.start_x)*this.scale);
                     $('#env-canvas').css('top', new_top+'px');
                     $('#env-canvas').css('left', new_left+'px');
                     break;