From a3108225f690ba4c7b992caf3ac9d5f5e419407a Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Wed, 14 May 2014 23:52:32 +0200 Subject: [PATCH 1/3] Fix : Zoom level : reduce zoom step on mac os + added keyboard shortcuts --- src/js/controller/DrawingController.js | 45 +++++++++++++++++--- src/js/service/keyboard/CheatsheetService.js | 2 + src/js/service/keyboard/KeycodeTranslator.js | 4 +- src/js/service/keyboard/ShortcutService.js | 2 +- 4 files changed, 45 insertions(+), 8 deletions(-) diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 7bbe2a05..26ea7d75 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -1,5 +1,9 @@ (function () { + var ns = $.namespace("pskl.controller"); + + var MAC_TOUCHPAD_SKIP = 8; + ns.DrawingController = function (piskelController, paletteController, container) { /** * @public @@ -43,6 +47,8 @@ this.previousMousemoveTime = 0; this.currentToolBehavior = null; + this.skipMouseWheelCounter_ = 0; + // State of clicked button (need to be stateful here, see comment in getCurrentColor_) this.currentMouseButton_ = Constants.LEFT_BUTTON; }; @@ -60,6 +66,10 @@ $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChanged_, this)); + pskl.app.shortcutService.addShortcut('0', this.resetZoom_.bind(this)); + pskl.app.shortcutService.addShortcut('+', this.increaseZoom_.bind(this)); + pskl.app.shortcutService.addShortcut('-', this.decreaseZoom_.bind(this)); + window.setTimeout(this.afterWindowResize_.bind(this), 100); }; @@ -179,20 +189,43 @@ } }; + ns.DrawingController.prototype.resetZoom_ = function () { + this.setZoom_(this.calculateZoom_()); + }; + + ns.DrawingController.prototype.increaseZoom_ = function () { + this.setZoom_(this.renderer.getZoom() + this.getZoomStep_()); + }; + + ns.DrawingController.prototype.decreaseZoom_ = function () { + this.setZoom_(this.renderer.getZoom() - this.getZoomStep_()); + }; + + ns.DrawingController.prototype.getZoomStep_ = function () { + return this.calculateZoom_() / 10; + }; + + ns.DrawingController.prototype.setZoom_ = function (zoom) { + this.compositeRenderer.setZoom(zoom); + $.publish(Events.ZOOM_CHANGED); + }; + ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) { var event = jQueryEvent.originalEvent; var delta = event.wheelDeltaY || (-2 * event.deltaY); - var currentZoom = this.renderer.getZoom(); - var perfectZoom = this.calculateZoom_(); - var step = perfectZoom / 10; + var isMacTouchpad = typeof event.webkitDirectionInvertedFromDevice === 'boolean'; + if (isMacTouchpad) { + if ((++this.skipMouseWheelCounter_%MAC_TOUCHPAD_SKIP)) { + return; + } + } if (delta > 0) { - this.compositeRenderer.setZoom(currentZoom + step); + this.increaseZoom_(); } else if (delta < 0) { - this.compositeRenderer.setZoom(currentZoom - step); + this.decreaseZoom_(); } - $.publish(Events.ZOOM_CHANGED); }; /** diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js index d3cf5a5a..58dd4a07 100644 --- a/src/js/service/keyboard/CheatsheetService.js +++ b/src/js/service/keyboard/CheatsheetService.js @@ -92,6 +92,8 @@ ns.CheatsheetService.prototype.initMarkupForMisc_ = function () { var descriptors = [ + this.toDescriptor_('0', 'Reset zoom level'), + this.toDescriptor_('+/-', 'Zoom in/Zoom out'), this.toDescriptor_('X', 'Swap primary/secondary colors'), this.toDescriptor_('D', 'Reset default colors'), this.toDescriptor_('ctrl + Z', 'Undo'), diff --git a/src/js/service/keyboard/KeycodeTranslator.js b/src/js/service/keyboard/KeycodeTranslator.js index 00005dc7..23269a20 100644 --- a/src/js/service/keyboard/KeycodeTranslator.js +++ b/src/js/service/keyboard/KeycodeTranslator.js @@ -5,7 +5,9 @@ 27 : "esc", 38 : "up", 40 : "down", - 46 : "del" + 46 : "del", + 189 : "-", + 187 : "+" }; var ns = $.namespace('pskl.service.keyboard'); diff --git a/src/js/service/keyboard/ShortcutService.js b/src/js/service/keyboard/ShortcutService.js index 49e07c68..08dda874 100644 --- a/src/js/service/keyboard/ShortcutService.js +++ b/src/js/service/keyboard/ShortcutService.js @@ -53,7 +53,7 @@ ctrl : key.indexOf('ctrl+') != -1 }); - var parts = key.split('+'); + var parts = key.split(/\+(?!$)/); key = parts[parts.length-1]; return {meta : meta, key : key}; }; From 0fec4eff4a27e4923e8c9ec6ae9a2f257833447e Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 18 May 2014 16:05:59 +0200 Subject: [PATCH 2/3] Fix: cannot detect mac touchpad : switch to throttling --- src/js/controller/DrawingController.js | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index b979cf38..028d2fed 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -1,8 +1,7 @@ (function () { var ns = $.namespace("pskl.controller"); - - var MAC_TOUCHPAD_SKIP = 8; + var MOUSEWHEEL_THROTTLING = 20; ns.DrawingController = function (piskelController, paletteController, container) { /** @@ -47,7 +46,7 @@ this.previousMousemoveTime = 0; this.currentToolBehavior = null; - this.skipMouseWheelCounter_ = 0; + this.lastMouseWheel_ = 0; // State of clicked button (need to be stateful here, see comment in getCurrentColor_) this.currentMouseButton_ = Constants.LEFT_BUTTON; @@ -227,21 +226,18 @@ }; ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) { - var event = jQueryEvent.originalEvent; - var delta = event.wheelDeltaY || (-2 * event.deltaY); + var now = Date.now(); - var isMacTouchpad = typeof event.webkitDirectionInvertedFromDevice === 'boolean'; - if (isMacTouchpad) { - if ((++this.skipMouseWheelCounter_%MAC_TOUCHPAD_SKIP)) { - return; + if (now - this.lastMouseWheel_ > MOUSEWHEEL_THROTTLING) { + this.lastMouseWheel_ = now; + var event = jQueryEvent.originalEvent; + var delta = event.wheelDeltaY || (-2 * event.deltaY); + if (delta > 0) { + this.increaseZoom_(); + } else if (delta < 0) { + this.decreaseZoom_(); } } - - if (delta > 0) { - this.increaseZoom_(); - } else if (delta < 0) { - this.decreaseZoom_(); - } }; /** From f1b6ea4ae3531c4c263a2a66f54991f945a4764c Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 18 May 2014 16:33:01 +0200 Subject: [PATCH 3/3] Fix : zoom step depends on mousewheel event delta value --- src/js/controller/DrawingController.js | 31 +++++++++++--------------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 028d2fed..b7d7eaab 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -1,7 +1,6 @@ (function () { var ns = $.namespace("pskl.controller"); - var MOUSEWHEEL_THROTTLING = 20; ns.DrawingController = function (piskelController, paletteController, container) { /** @@ -46,8 +45,6 @@ this.previousMousemoveTime = 0; this.currentToolBehavior = null; - this.lastMouseWheel_ = 0; - // State of clicked button (need to be stateful here, see comment in getCurrentColor_) this.currentMouseButton_ = Constants.LEFT_BUTTON; }; @@ -172,12 +169,14 @@ this.setZoom_(this.calculateZoom_()); }; - ns.DrawingController.prototype.increaseZoom_ = function () { - this.setZoom_(this.renderer.getZoom() + this.getZoomStep_()); + ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) { + var step = (zoomMultiplier || 1) * this.getZoomStep_(); + this.setZoom_(this.renderer.getZoom() + step); }; - ns.DrawingController.prototype.decreaseZoom_ = function () { - this.setZoom_(this.renderer.getZoom() - this.getZoomStep_()); + ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) { + var step = (zoomMultiplier || 1) * this.getZoomStep_(); + this.setZoom_(this.renderer.getZoom() - step); }; ns.DrawingController.prototype.getZoomStep_ = function () { @@ -226,17 +225,13 @@ }; ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) { - var now = Date.now(); - - if (now - this.lastMouseWheel_ > MOUSEWHEEL_THROTTLING) { - this.lastMouseWheel_ = now; - var event = jQueryEvent.originalEvent; - var delta = event.wheelDeltaY || (-2 * event.deltaY); - if (delta > 0) { - this.increaseZoom_(); - } else if (delta < 0) { - this.decreaseZoom_(); - } + var event = jQueryEvent.originalEvent; + var delta = event.wheelDeltaY || (-2 * event.deltaY); + var modifier = Math.abs(delta/120); + if (delta > 0) { + this.increaseZoom_(modifier); + } else if (delta < 0) { + this.decreaseZoom_(modifier); } };