Removed getCursorPosition

js/ColorModule.js

@@ -20,7 +20,6 @@ const ColorModule = (() => {
         animation:100,
         filter: ".noshrink",
         draggable: ".draggable-colour",
-        // REFACTOR: Don't touch dragging, simulate a mouseup event instead
         onEnd: function() {Events.simulateMouseEvent(window, "mouseup");}
     });
 

js/Input.js

@@ -22,6 +22,25 @@ const Input = (() => {
         dragging = false;
     }
 
+    function getCursorPosition(e) {
+        var x;
+        var y;
+        
+        if (e.pageX != undefined && e.pageY != undefined) {
+            x = e.pageX;
+            y = e.pageY;
+        }
+        else {
+            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;			
+        }
+    
+        x -= currentLayer.canvas.offsetLeft;
+        y -= currentLayer.canvas.offsetTop;
+    
+        return [Math.round(x), Math.round(y)];
+    }
+
     /** Just listens to hotkeys and calls the linked functions
      * 
      * @param {*} e 
@@ -155,6 +174,7 @@ const Input = (() => {
     return {
         spacePressed,
         isDragging,
-        getCurrMouseEvent
+        getCurrMouseEvent,
+        getCursorPosition
     }
 })();

js/_ellipse.js

@@ -26,7 +26,7 @@ function startEllipseDrawing(mouseEvent) {
     isDrawingEllipse = true;
 
     // Saving the start coords of the ellipse
-    let cursorPos = getCursorPosition(mouseEvent);
+    let cursorPos = Input.getCursorPosition(mouseEvent);
     startEllipseX = Math.floor(cursorPos[0] / zoom) + 0.5;
     startEllipseY = Math.floor(cursorPos[1] / zoom) + 0.5;
 
@@ -39,7 +39,7 @@ function startEllipseDrawing(mouseEvent) {
  * @param {*} mouseEvent The mouseEvent from which we'll get the mouse position
  */
 function updateEllipseDrawing(mouseEvent) {
-	let pos = getCursorPosition(mouseEvent);
+	let pos = Input.getCursorPosition(mouseEvent);
 
 	// Drawing the ellipse at the right position
 	drawEllipse(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
@@ -53,7 +53,7 @@ function updateEllipseDrawing(mouseEvent) {
  */
 function endEllipseDrawing(mouseEvent) {
 	// Getting the end position
-	let currentPos = getCursorPosition(mouseEvent);
+	let currentPos = Input.getCursorPosition(mouseEvent);
 	let vfxContext = VFXLayer.context;
 
 	endEllipseX = Math.round(currentPos[0] / zoom) + 0.5;

js/_getCursorPosition.js

@@ -1,19 +0,0 @@
-//gets cursor position relative to canvas
-function getCursorPosition(e) {
-    var x;
-    var y;
-    
-    if (e.pageX != undefined && e.pageY != undefined) {
-        x = e.pageX;
-        y = e.pageY;
-    }
-    else {
-        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
-        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;			
-    }
-
-    x -= currentLayer.canvas.offsetLeft;
-    y -= currentLayer.canvas.offsetTop;
-
-    return [Math.round(x), Math.round(y)];
-}

js/_mouseEvents.js

@@ -1,3 +1,6 @@
+// REFACTOR: let's keep this one global for now, unfortunately it's used by just some tools to keep track of 
+// their state: I'd wait after we refactor the tools themselves before removing this variable, which should
+// ideally be updated in Input.js
 var lastMouseMovePos;
 
 //mousedown - start drawing
@@ -9,7 +12,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	//prevent right mouse clicks and such, which will open unwanted menus
 	//mouseEvent.preventDefault();
 
-	lastMouseClickPos = getCursorPosition(mouseEvent);
+	lastMouseClickPos = Input.getCursorPosition(mouseEvent);
 
 	//left or right click ?
 	if (mouseEvent.which == 1) {
@@ -82,7 +85,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	if (!documentCreated || Dialogue.isOpen() || !currentLayer.isVisible || currentLayer.isLocked) return;
 
 	if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
-		var cursorLocation = getCursorPosition(mouseEvent);
+		var cursorLocation = Input.getCursorPosition(mouseEvent);
 		var selectedColor = getEyedropperColor(cursorLocation);
 		const rgbColor = {r:selectedColor[0],g:selectedColor[1],b:selectedColor[2]};
 		var newColor = Color.rgbToHex(rgbColor);
@@ -115,7 +118,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	else if (currentTool.name == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
 
 		//get cursor postion
-		var cursorLocation = getCursorPosition(mouseEvent);
+		var cursorLocation = Input.getCursorPosition(mouseEvent);
 
 		//offset to match cursor point
 		cursorLocation[0] += 2;
@@ -140,7 +143,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
             mode = 'out';
         }
 
-        changeZoom(mode, getCursorPosition(mouseEvent));
+        changeZoom(mode, Input.getCursorPosition(mouseEvent));
 
         for (let i=1; i<layers.length; i++) {
             layers[i].copyData(layers[0]);
@@ -161,7 +164,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	currentTool = currentToolTemp;
 
 	currentTool.updateCursor();
-	var cursorLocation = getCursorPosition(mouseEvent);
+	var cursorLocation = Input.getCursorPosition(mouseEvent);
 	currentTool.moveBrushPreview(cursorLocation);
 
 
@@ -197,7 +200,7 @@ window.addEventListener("mousedown", draw, false);
 function draw (mouseEvent) {
 	if (!Dialogue.isOpen())
 	{
-		lastMouseMovePos = getCursorPosition(mouseEvent);
+		lastMouseMovePos = Input.getCursorPosition(mouseEvent);
 
 		var cursorLocation = lastMouseMovePos;
 
@@ -295,7 +298,7 @@ function draw (mouseEvent) {
 				layers[i].copyData(layers[0]);
 			}
 			// Updating cursorLocation with new layer position
-			lastMouseMovePos = getCursorPosition(mouseEvent);
+			lastMouseMovePos = Input.getCursorPosition(mouseEvent);
 			cursorLocation = lastMouseMovePos;
 			// Moving brush preview
 			currentTool.moveBrushPreview(cursorLocation);
@@ -398,7 +401,7 @@ function draw (mouseEvent) {
 
 			// If I'm dragging, I move the preview
 			if (Input.isDragging() && cursorInSelectedArea()) {
-				updateMovePreview(getCursorPosition(mouseEvent));
+				updateMovePreview(Input.getCursorPosition(mouseEvent));
 			}
 		}
 		else if (currentTool.name === "line") {
@@ -433,7 +436,7 @@ canvasView.addEventListener("wheel", function(mouseEvent){
 	}
 
 	// Changing zoom and position of the first layer
-	changeZoom(mode, getCursorPosition(mouseEvent));
+	changeZoom(mode, Input.getCursorPosition(mouseEvent));
 
 	for (let i=1; i<layers.length; i++) {
 		// Copying first layer's data into the other layers

js/_rectSelect.js

@@ -15,7 +15,7 @@ function startRectSelection(mouseEvent) {
     VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
 
     // Saving the start coords of the rect
-    let cursorPos = getCursorPosition(mouseEvent);
+    let cursorPos = Input.getCursorPosition(mouseEvent);
     startX = Math.round(cursorPos[0] / zoom) - 0.5;
     startY = Math.round(cursorPos[1] / zoom) - 0.5;
 
@@ -44,7 +44,7 @@ function startRectSelection(mouseEvent) {
  * @param {*} mouseEvent 
  */
 function updateRectSelection(mouseEvent) {
-	let pos = getCursorPosition(mouseEvent);
+	let pos = Input.getCursorPosition(mouseEvent);
 
 	// Drawing the rect
 	drawRect(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
@@ -56,7 +56,7 @@ function updateRectSelection(mouseEvent) {
  */
 function endRectSelection(mouseEvent) {
 	// Getting the end position
-	let currentPos = getCursorPosition(mouseEvent);
+	let currentPos = Input.getCursorPosition(mouseEvent);
 	endX = Math.round(currentPos[0] / zoom) + 0.5;
 	endY = Math.round(currentPos[1] / zoom) + 0.5;
 
@@ -126,7 +126,7 @@ function applyChanges() {
 // Checks whether the pointer is inside the selected area or not
 function cursorInSelectedArea() {
     // Getting the cursor position
-    let cursorPos = getCursorPosition(Input.getCurrMouseEvent());
+    let cursorPos = Input.getCursorPosition(Input.getCurrMouseEvent());
     // Getting the coordinates relatively to the canvas
     let x = cursorPos[0] / zoom;
     let y = cursorPos[1] / zoom;

js/_rectangle.js

@@ -25,7 +25,7 @@ function startRectDrawing(mouseEvent) {
     isDrawingRect = true;
 
     // Saving the start coords of the rect
-    let cursorPos = getCursorPosition(mouseEvent);
+    let cursorPos = Input.getCursorPosition(mouseEvent);
     startRectX = Math.floor(cursorPos[0] / zoom) + 0.5;
     startRectY = Math.floor(cursorPos[1] / zoom) + 0.5;
 
@@ -37,7 +37,7 @@ function startRectDrawing(mouseEvent) {
  * @param {*} mouseEvent The mouseEvent from which we'll get the mouse position
  */
 function updateRectDrawing(mouseEvent) {
-	let pos = getCursorPosition(mouseEvent);
+	let pos = Input.getCursorPosition(mouseEvent);
 
 	// Drawing the rect at the right position
 	drawRectangle(Math.floor(pos[0] / zoom) + 0.5, Math.floor(pos[1] / zoom) + 0.5);
@@ -50,7 +50,7 @@ function updateRectDrawing(mouseEvent) {
  */
 function endRectDrawing(mouseEvent) {
 	// Getting the end position
-	let currentPos = getCursorPosition(mouseEvent);
+	let currentPos = Input.getCursorPosition(mouseEvent);
 	let tmpContext = TMPLayer.context;
 
 	endRectX = Math.floor(currentPos[0] / zoom) + 0.5;

js/pixel-editor.js

@@ -28,7 +28,6 @@
 //=include _changeZoom.js
 //=include ColorModule.js
 //=include _drawLine.js
-//=include _getCursorPosition.js
 //=include _fill.js
 //=include _line.js
 //=include _checkerboard.js