From 412067ad9052d9c4a7001431b87ca6ed0ac2aaf3 Mon Sep 17 00:00:00 2001 From: smiegrin Date: Sun, 17 Jan 2016 16:30:21 -0700 Subject: [PATCH 1/2] Introduces zooming towards/away from mouse --- src/js/controller/DrawingController.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 56bc9161..a90f7f81 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -247,13 +247,37 @@ }; ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) { + var coords = this.getSpriteCoordinates(this._clientX,this._clientY); + var off = this.getOffset(); + var oldWidth = this.getContainerWidth_() / this.renderer.getZoom(); + var oldHeight = this.getContainerHeight_() / this.renderer.getZoom(); + var xRatio = (coords.x - off.x) / oldWidth; + var yRatio = (coords.y - off.y) / oldHeight; var step = (zoomMultiplier || 1) * this.getZoomStep_(); this.setZoom_(this.renderer.getZoom() + step); + var newWidth = this.getContainerWidth_() / this.renderer.getZoom(); + var newHeight = this.getContainerHeight_() / this.renderer.getZoom(); + this.setOffset( + off.x + ((oldWidth - newWidth) * xRatio), + off.y + ((oldHeight - newHeight) * yRatio) + ); }; ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) { + var coords = this.getSpriteCoordinates(this._clientX,this._clientY); + var off = this.getOffset(); + var oldWidth = this.getContainerWidth_() / this.renderer.getZoom(); + var oldHeight = this.getContainerHeight_() / this.renderer.getZoom(); + var xRatio = (coords.x - off.x) / oldWidth; + var yRatio = (coords.y - off.y) / oldHeight; var step = (zoomMultiplier || 1) * this.getZoomStep_(); this.setZoom_(this.renderer.getZoom() - step); + var newWidth = this.getContainerWidth_() / this.renderer.getZoom(); + var newHeight = this.getContainerHeight_() / this.renderer.getZoom(); + this.setOffset( + off.x - ((newWidth - oldWidth) * xRatio), + off.y - ((newHeight - oldHeight) * yRatio) + ); }; /** From f4c860ddfa214d4a3c2659d8e00f5627635bac46 Mon Sep 17 00:00:00 2001 From: Smie Date: Tue, 26 Jul 2016 09:28:18 -0600 Subject: [PATCH 2/2] Consolidates zooming into single function. --- src/js/controller/DrawingController.js | 31 +++++--------------------- 1 file changed, 5 insertions(+), 26 deletions(-) diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index a90f7f81..11af8211 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -64,8 +64,8 @@ var shortcuts = pskl.service.keyboard.Shortcuts; pskl.app.shortcutService.registerShortcut(shortcuts.MISC.RESET_ZOOM, this.resetZoom_.bind(this)); - pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_ZOOM, this.increaseZoom_.bind(this, 1)); - pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_ZOOM, this.decreaseZoom_.bind(this, 1)); + pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_ZOOM, this.updateZoom_.bind(this, 1)); + pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_ZOOM, this.updateZoom_.bind(this, -1)); window.setTimeout(function () { this.afterWindowResize_(); @@ -231,7 +231,7 @@ } else if (pskl.utils.UserAgent.isFirefox) { delta = -40 * evt.deltaY; } - var modifier = Math.abs(delta / 120); + var modifier = (delta / 120); if (pskl.utils.UserAgent.isMac ? evt.metaKey : evt.ctrlKey) { modifier = modifier * 5; @@ -239,14 +239,10 @@ evt.preventDefault(); } - if (delta > 0) { - this.increaseZoom_(modifier); - } else if (delta < 0) { - this.decreaseZoom_(modifier); - } + this.updateZoom_(modifier); }; - ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) { + ns.DrawingController.prototype.updateZoom_ = function (zoomMultiplier) { var coords = this.getSpriteCoordinates(this._clientX,this._clientY); var off = this.getOffset(); var oldWidth = this.getContainerWidth_() / this.renderer.getZoom(); @@ -257,23 +253,6 @@ this.setZoom_(this.renderer.getZoom() + step); var newWidth = this.getContainerWidth_() / this.renderer.getZoom(); var newHeight = this.getContainerHeight_() / this.renderer.getZoom(); - this.setOffset( - off.x + ((oldWidth - newWidth) * xRatio), - off.y + ((oldHeight - newHeight) * yRatio) - ); - }; - - ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) { - var coords = this.getSpriteCoordinates(this._clientX,this._clientY); - var off = this.getOffset(); - var oldWidth = this.getContainerWidth_() / this.renderer.getZoom(); - var oldHeight = this.getContainerHeight_() / this.renderer.getZoom(); - var xRatio = (coords.x - off.x) / oldWidth; - var yRatio = (coords.y - off.y) / oldHeight; - var step = (zoomMultiplier || 1) * this.getZoomStep_(); - this.setZoom_(this.renderer.getZoom() - step); - var newWidth = this.getContainerWidth_() / this.renderer.getZoom(); - var newHeight = this.getContainerHeight_() / this.renderer.getZoom(); this.setOffset( off.x - ((newWidth - oldWidth) * xRatio), off.y - ((newHeight - oldHeight) * yRatio)