Added back eyedropper alt key binding

js/Input.js

@@ -1,11 +1,18 @@
 const Input = (() => {
     let dragging = false;
     let currentMouseEvent = undefined;
+    let spacePressed = false;
+    let altPressed = false;
+    let ctrlPressed = false;
 
     // Hotkeys when pressing a key
     Events.on("keydown", document, KeyPress);
     // Update held keys when releasing a key
-    Events.on("keyup", window, function (e) {if (e.keyCode == 32) Events.emit("space-released");;});
+    Events.on("keyup", window, function (e) {
+        if (e.keyCode == 32) spacePressed = false;
+        if (!e.altKey) altPressed = false;
+        if (!e.ctrlKey) ctrlPressed = false;
+    });
 
     // Update variables on mouse clicks
     Events.on("mousedown", window, onMouseDown);
@@ -54,6 +61,8 @@ const Input = (() => {
      */
     function KeyPress(e) {
         var keyboardEvent = window.event? event : e;
+        altPressed = e.altKey;
+        ctrlPressed = e.ctrlKey;
 
         //if the user is typing in an input field or renaming a layer, ignore these hotkeys, unless it's an enter key
         if (document.activeElement.tagName == 'INPUT' || LayerList.isRenamingLayer()) {
@@ -145,7 +154,7 @@ const Input = (() => {
                         History.redo();
                     break;
                 case 32:
-                    Events.emit("space-pressed");
+                    spacePressed = true;
                     break;
             }
         }
@@ -159,9 +168,24 @@ const Input = (() => {
         return currentMouseEvent;
     }
 
+    function isAltPressed() {
+        return altPressed;
+    }
+
+    function isCtrlPressed() {
+        return ctrlPressed;
+    }
+
+    function isSpacePressed() {
+        return spacePressed;
+    }
+
     return {
         isDragging,
         getCurrMouseEvent,
-        getCursorPosition
+        getCursorPosition,
+        isAltPressed,
+        isCtrlPressed,
+        isSpacePressed
     }
 })();

js/Tool.js

@@ -39,7 +39,7 @@ class Tool {
 
 		switch (this.cursorType.type) {
 			case 'html':
-				canvasView.style.cursor = 'default';
+				canvasView.style.cursor = 'none';
 				break;
 			case 'cursor':
 				this.cursor = this.cursorType.style;
@@ -50,7 +50,11 @@ class Tool {
 		}
 	}
 
-	updateCursor() {}
+	updateCursor() {
+		brushPreview.style.display = 'block';
+		brushPreview.style.width = this.currSize * zoom + 'px';
+		brushPreview.style.height = this.currSize * zoom + 'px';
+	}
 
 	onMouseWheel(mousePos, mode) {}
 
@@ -58,6 +62,8 @@ class Tool {
 		this.prevMousePos = this.currMousePos;
 		this.currMousePos = cursorLocation;
 
+		this.updateCursor();
+
 		let toSub = 1;
         // Prevents the brush to be put in the middle of pixels
         if (this.currSize % 2 == 0) {
@@ -68,16 +74,14 @@ class Tool {
         brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
 
 		if (this.cursorType.type == 'html') {
-			if (cursorTarget == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
+			if (cursorTarget.className == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
 				brushPreview.style.visibility = 'visible';
+				canvasView.style.cursor = 'none';
 			}
 			else {
 				brushPreview.style.visibility = 'hidden';
+				canvasView.style.cursor = 'default';
 			}
-
-			brushPreview.style.display = 'block';
-			brushPreview.style.width = this.currSize * zoom + 'px';
-			brushPreview.style.height = this.currSize * zoom + 'px';
 		}
 	}
 
@@ -85,7 +89,9 @@ class Tool {
 		if (this.mainButton != undefined)
 			this.mainButton.parentElement.classList.remove("selected");
 		this.isSelected = false;
+
 		brushPreview.style.visibility = 'hidden';
+		canvasView.style.cursor = 'default';
 	}
 
 	onStart(mousePos) {

js/ToolManager.js

@@ -1,5 +1,6 @@
 const ToolManager = (() => {
     tools = {};
+    isPanning = false;
 
     tools["brush"] = new BrushTool("brush", {type: 'html'}, switchTool);
     tools["eraser"] = new EraserTool("eraser", {type: 'html'}, switchTool);
@@ -25,6 +26,7 @@ const ToolManager = (() => {
     Events.on("mousedown", window, onMouseDown);
     Events.on("mousewheel", window, onMouseWheel);
 
+    // Bind tool shortcuts
     Events.onCustom("tool-shortcut", onShortcut);
 
     function onShortcut(tool) {
@@ -45,7 +47,15 @@ const ToolManager = (() => {
         if (!Input.isDragging()) {
             switch(mouseEvent.which) {
                 case 1:
-                    currTool.onStart(mousePos, mouseEvent.target);
+                    if (Input.isSpacePressed()) {
+                        tools["pan"].onStart(mousePos, mouseEvent.target);
+                    }
+                    else if (Input.isAltPressed()) {
+                        tools["eyedropper"].onStart(mousePos, mouseEvent.target);
+                    }
+                    else {
+                        currTool.onStart(mousePos, mouseEvent.target);
+                    }
                     break;
                 case 2:
                     tools["pan"].onStart(mousePos, mouseEvent.target);
@@ -69,7 +79,15 @@ const ToolManager = (() => {
         if (Input.isDragging()) {
             switch (mouseEvent.which) {
                 case 1:
-                    currTool.onDrag(mousePos, mouseEvent.target);
+                    if (Input.isSpacePressed()) {
+                        tools["pan"].onDrag(mousePos, mouseEvent.target);
+                    }
+                    else if (Input.isAltPressed()) {
+                        tools["eyedropper"].onDrag(mousePos, mouseEvent.target);
+                    }
+                    else {
+                        currTool.onDrag(mousePos, mouseEvent.target);
+                    }
                     break;
                 case 2:
                     tools["pan"].onDrag(mousePos, mouseEvent.target);
@@ -92,7 +110,15 @@ const ToolManager = (() => {
         if (Input.isDragging()) {
             switch(mouseEvent.which) {
                 case 1:
-                    currTool.onEnd(mousePos);
+                    if (Input.isSpacePressed()) {
+                        tools["pan"].onEnd(mousePos, mouseEvent.target);
+                    }
+                    else if (Input.isAltPressed()) {
+                        tools["eyedropper"].onEnd(mousePos, mouseEvent.target);
+                    }
+                    else {
+                        currTool.onEnd(mousePos);
+                    }
                     break;
                 case 2:
                     tools["pan"].onEnd(mousePos);

js/tools/EyeDropperTool.js

@@ -77,7 +77,7 @@ class EyedropperTool extends Tool {
         // Returned colour
         let selectedColor;
 
-        for (let i=1; i<layers.length; i++) {
+        for (let i=1; i<layers.length-3; i++) {
             // Getting the colour of the pixel in the cursorLocation
             tmpColour = layers[i].context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;