Added back zoom

js/ToolManager.js

@@ -4,8 +4,15 @@ const ToolManager = (() => {
     rectangleTool = new RectangleTool("rectangle", {type: 'html'}, switchTool);
     lineTool = new LineTool("line", {type: 'html'}, switchTool);
     fillTool = new FillTool("fill", {type: 'cursor', style: 'crosshair'}, switchTool);
+    
     eyedropperTool = new EyedropperTool("eyedropper", {type: 'cursor', style: 'crosshair'}, switchTool);
     panTool = new PanTool("pan", {type: 'custom'}, switchTool);
+    zoomTool = new ZoomTool("zoom", {type:'custom'});
+
+    rectSelectTool = new RectangularSelectionTool("rectangularselection", 
+        {type: 'cursor', style:'crosshair'}, switchTool);
+    moveSelectionTool = new MoveSelectionTool("moveselection", 
+        {type:'cursor', style:'crosshair'}, switchTool);
 
     currTool = brushTool;
     currTool.onSelect();
@@ -14,6 +21,12 @@ const ToolManager = (() => {
     Events.on("mouseup", window, onMouseUp);
     Events.on("mousemove", window, onMouseMove);
     Events.on("mousedown", window, onMouseDown);
+    Events.on("mousewheel", window, onMouseWheel);
+
+    function onMouseWheel(mouseEvent) {
+        let mousePos = Input.getCursorPosition(mouseEvent);
+        zoomTool.onMouseWheel(mousePos, mouseEvent.deltaY < 0 ? 'in' : 'out');
+    }
 
     function onMouseDown(mouseEvent) {
         if (!Startup.documentCreated())

js/_changeZoom.js

@@ -1,75 +0,0 @@
-/** Changes the zoom level of the canvas
- * @param {*} direction 'in' or 'out'
- * @param {*} cursorLocation The position of the cursor when the user zoomed
- */
-function changeZoom (direction, cursorLocation) {
-	// Computing current width and height
-	let oldWidth = canvasSize[0] * zoom;
-	let oldHeight = canvasSize[1] * zoom;
-	let newWidth, newHeight;
-	let prevZoom = zoom;
-	let zoomed = false;
-
-	//change zoom level
-	//if you want to zoom out, and the zoom isnt already at the smallest level
-	if (direction == 'out' && zoom > MIN_ZOOM_LEVEL) {
-		zoomed = true;
-		if (zoom > 2)
-			zoom -= Math.ceil(zoom / 10);
-		else
-			zoom -= Math.ceil(zoom * 2 / 10) / 2;
-
-		newWidth = canvasSize[0] * zoom;
-		newHeight = canvasSize[1] * zoom;
-
-		//adjust canvas position
-		layers[0].setCanvasOffset(
-			layers[0].canvas.offsetLeft + (oldWidth - newWidth) * cursorLocation[0]/oldWidth, 
-			layers[0].canvas.offsetTop + (oldHeight - newHeight) * cursorLocation[1]/oldHeight);
-	}
-	//if you want to zoom in
-	else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
-		zoomed = true;
-		if (zoom > 2)
-			zoom += Math.ceil(zoom/10);
-		else {
-			if (zoom + zoom/10 > 2) {
-				zoom += Math.ceil(zoom/10);
-				zoom = Math.ceil(zoom);
-			}
-			else {
-				zoom += Math.ceil(zoom * 2 / 10) / 2;
-			}
-		}
-			
-		newWidth = canvasSize[0] * zoom;
-		newHeight = canvasSize[1] * zoom;
-
-		//adjust canvas position
-		layers[0].setCanvasOffset(
-			layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), 
-			layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight));
-	}
-
-	//resize canvas
-	layers[0].resize();
-	// adjust brush size
-	ToolManager.currentTool().updateCursor();
-
-	// Adjust pixel grid thickness
-	if (zoomed) {
-		if (zoom <= 7)
-			disablePixelGrid();
-		else if (zoom >= 20 && direction == 'in') {
-			enablePixelGrid();
-			repaintPixelGrid((zoom - prevZoom) * 0.6);
-		}
-		else if (prevZoom >= 20 && direction == 'out') {
-			enablePixelGrid();
-			repaintPixelGrid((zoom - prevZoom) * 0.6);
-		}
-		else {
-			enablePixelGrid();
-		}
-	}
-}

js/_tools.js

@@ -43,7 +43,7 @@ class Tool {
 				canvasView.style.cursor = 'default';
 				break;
 			case 'cursor':
-				this.cursor = "crosshair";
+				this.cursor = this.cursorType.style;
 				canvasView.style.cursor = this.cursor || 'default';
 				break;
 			default:
@@ -53,6 +53,8 @@ class Tool {
 
 	updateCursor() {}
 
+	onMouseWheel(mousePos, mode) {}
+
 	onHover(cursorLocation, cursorTarget) {
 		this.prevMousePos = this.currMousePos;
 		this.currMousePos = cursorLocation;

js/pixel-editor.js

@@ -29,7 +29,6 @@
 //=include _palettes.js
 
 /**functions**/
-//=include _changeZoom.js
 //=include _checkerboard.js
 //=include _copyPaste.js
 //=include _resizeCanvas.js

js/tools/EyeDropperTool.js

@@ -8,9 +8,12 @@ class EyedropperTool extends Tool {
         Events.on('click', this.mainButton, switchFunction, this);
     }
 
-    onStart(mousePos) {
+    onStart(mousePos, target) {
         super.onStart(mousePos);
 
+        if (target.className != 'drawingCanvas')
+            return;
+
         this.eyedropperPreview.style.display = 'block';
         this.onDrag(mousePos);
 	}

js/tools/MoveSelectionTool.js

@@ -0,0 +1,5 @@
+class MoveSelectionTool extends Tool {
+    constructor (name, options, switchFunc) {
+        super(name, options, switchFunc);
+    }
+}

js/tools/RectangularSelectionTool.js

@@ -0,0 +1,5 @@
+class RectangularSelectionTool extends Tool {
+    constructor (name, options, switchFunc) {
+        super(name, options, switchFunc);
+    }
+}

js/tools/ZoomTool.js

@@ -0,0 +1,82 @@
+class ZoomTool extends Tool {
+    constructor (name, options) {
+        super(name, options, undefined);
+    }
+    onMouseWheel(mousePos, mode) {
+        super.onMouseWheel(mousePos, mode);
+
+        // Computing current width and height
+        let oldWidth = canvasSize[0] * zoom;
+        let oldHeight = canvasSize[1] * zoom;
+        let newWidth, newHeight;
+        let prevZoom = zoom;
+        let zoomed = false;
+
+        //change zoom level
+        //if you want to zoom out, and the zoom isnt already at the smallest level
+        if (mode == 'out' && zoom > MIN_ZOOM_LEVEL) {
+            zoomed = true;
+            if (zoom > 2)
+                zoom -= Math.ceil(zoom / 10);
+            else
+                zoom -= Math.ceil(zoom * 2 / 10) / 2;
+
+            newWidth = canvasSize[0] * zoom;
+            newHeight = canvasSize[1] * zoom;
+
+            //adjust canvas position
+            layers[0].setCanvasOffset(
+                layers[0].canvas.offsetLeft + (oldWidth - newWidth) * mousePos[0]/oldWidth, 
+                layers[0].canvas.offsetTop + (oldHeight - newHeight) * mousePos[1]/oldHeight);
+        }
+        //if you want to zoom in
+        else if (mode == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
+            zoomed = true;
+            if (zoom > 2)
+                zoom += Math.ceil(zoom/10);
+            else {
+                if (zoom + zoom/10 > 2) {
+                    zoom += Math.ceil(zoom/10);
+                    zoom = Math.ceil(zoom);
+                }
+                else {
+                    zoom += Math.ceil(zoom * 2 / 10) / 2;
+                }
+            }
+                
+            newWidth = canvasSize[0] * zoom;
+            newHeight = canvasSize[1] * zoom;
+
+            //adjust canvas position
+            layers[0].setCanvasOffset(
+                layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*mousePos[0]/oldWidth), 
+                layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*mousePos[1]/oldHeight));
+        }
+
+        //resize canvas
+        layers[0].resize();
+        // adjust brush size
+        ToolManager.currentTool().updateCursor();
+
+        // Adjust pixel grid thickness
+        if (zoomed) {
+            if (zoom <= 7)
+                disablePixelGrid();
+            else if (zoom >= 20 && mode == 'in') {
+                enablePixelGrid();
+                repaintPixelGrid((zoom - prevZoom) * 0.6);
+            }
+            else if (prevZoom >= 20 && mode == 'out') {
+                enablePixelGrid();
+                repaintPixelGrid((zoom - prevZoom) * 0.6);
+            }
+            else {
+                enablePixelGrid();
+            }
+        }
+
+        for (let i=1; i<layers.length; i++) {
+            layers[i].copyData(layers[0]);
+        }
+    }
+}