From b10e87d2b77ee3e468d615aae6f24851ca29661c Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 23 Nov 2014 21:37:34 +0100 Subject: [PATCH 1/3] Fix for issue #189 : user can move the viewport via click n drag of middle mouse button --- src/js/controller/DrawingController.js | 118 +++++++++++++---------- src/js/controller/MinimapController.js | 1 + src/js/controller/drawing/DragHandler.js | 78 +++++++++++++++ src/piskel-script-list.js | 1 + 4 files changed, 148 insertions(+), 50 deletions(-) create mode 100644 src/js/controller/drawing/DragHandler.js diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index 76b6f79c..538cbe1e 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -10,6 +10,8 @@ this.paletteController = paletteController; + this.dragHandler = new ns.drawing.DragHandler(this); + /** * @public */ @@ -138,13 +140,12 @@ var frame = this.piskelController.getCurrentFrame(); var coords = this.getSpriteCoordinates(event.clientX, event.clientY); + this.isClicked = true; + this.setCurrentButton(event); + if (event.button === Constants.MIDDLE_BUTTON) { - if (frame.containsPixel(coords.x, coords.y)) { - $.publish(Events.SELECT_PRIMARY_COLOR, [frame.getPixel(coords.x, coords.y)]); - } + this.dragHandler.startDrag(event.clientX, event.clientY); } else { - this.isClicked = true; - this.setCurrentButton(event); this.currentToolBehavior.hideHighlightedPixel(this.overlayFrame); this.currentToolBehavior.applyToolAt( @@ -174,29 +175,6 @@ } }; - ns.DrawingController.prototype.resetZoom_ = function () { - this.setZoom_(this.calculateZoom_()); - }; - - ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) { - var step = (zoomMultiplier || 1) * this.getZoomStep_(); - this.setZoom_(this.renderer.getZoom() + step); - }; - - ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) { - var step = (zoomMultiplier || 1) * this.getZoomStep_(); - this.setZoom_(this.renderer.getZoom() - step); - }; - - ns.DrawingController.prototype.getZoomStep_ = function () { - return this.calculateZoom_() / 10; - }; - - ns.DrawingController.prototype.setZoom_ = function (zoom) { - this.compositeRenderer.setZoom(zoom); - $.publish(Events.ZOOM_CHANGED); - }; - /** * @private */ @@ -209,19 +187,22 @@ var currentFrame = this.piskelController.getCurrentFrame(); if (this.isClicked) { - $.publish(Events.MOUSE_EVENT, [event, this]); - // Warning : do not call setCurrentButton here - // mousemove do not have the correct mouse button information on all browsers - this.currentToolBehavior.moveToolAt( - coords.x | 0, - coords.y | 0, - this.getCurrentColor_(), - currentFrame, - this.overlayFrame, - event - ); + if(this.currentMouseButton_ == Constants.MIDDLE_BUTTON) { + this.dragHandler.updateDrag(x, y); + } else { + $.publish(Events.MOUSE_EVENT, [event, this]); + // Warning : do not call setCurrentButton here + // mousemove do not have the correct mouse button information on all browsers + this.currentToolBehavior.moveToolAt( + coords.x | 0, + coords.y | 0, + this.getCurrentColor_(), + currentFrame, + this.overlayFrame, + event + ); + } } else { - this.currentToolBehavior.moveUnactiveToolAt( coords.x, coords.y, @@ -250,6 +231,8 @@ * @private */ ns.DrawingController.prototype.onMouseup_ = function (event) { + var frame = this.piskelController.getCurrentFrame(); + var coords = this.getSpriteCoordinates(event.clientX, event.clientY); if(this.isClicked) { $.publish(Events.MOUSE_EVENT, [event, this]); // A mouse button was clicked on the drawing canvas before this mouseup event, @@ -260,17 +243,24 @@ this.isClicked = false; this.setCurrentButton(event); - var coords = this.getSpriteCoordinates(event.clientX, event.clientY); - this.currentToolBehavior.releaseToolAt( - coords.x, - coords.y, - this.getCurrentColor_(), - this.piskelController.getCurrentFrame(), - this.overlayFrame, - event - ); + if (event.button === Constants.MIDDLE_BUTTON) { + if (this.dragHandler.isDragging()) { + this.dragHandler.stopDrag(); + } else if (frame.containsPixel(coords.x, coords.y)) { + $.publish(Events.SELECT_PRIMARY_COLOR, [frame.getPixel(coords.x, coords.y)]); + } + } else { + this.currentToolBehavior.releaseToolAt( + coords.x, + coords.y, + this.getCurrentColor_(), + this.piskelController.getCurrentFrame(), + this.overlayFrame, + event + ); - $.publish(Events.TOOL_RELEASED); + $.publish(Events.TOOL_RELEASED); + } } }; @@ -390,8 +380,36 @@ return this.compositeRenderer; }; + ns.DrawingController.prototype.getOffset = function () { + return this.compositeRenderer.getOffset(); + }; + ns.DrawingController.prototype.setOffset = function (x, y) { this.compositeRenderer.setOffset(x, y); $.publish(Events.ZOOM_CHANGED); }; + + ns.DrawingController.prototype.resetZoom_ = function () { + this.setZoom_(this.calculateZoom_()); + }; + + ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) { + var step = (zoomMultiplier || 1) * this.getZoomStep_(); + this.setZoom_(this.renderer.getZoom() + step); + }; + + ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) { + var step = (zoomMultiplier || 1) * this.getZoomStep_(); + this.setZoom_(this.renderer.getZoom() - step); + }; + + ns.DrawingController.prototype.getZoomStep_ = function () { + return this.calculateZoom_() / 10; + }; + + ns.DrawingController.prototype.setZoom_ = function (zoom) { + this.compositeRenderer.setZoom(zoom); + $.publish(Events.ZOOM_CHANGED); + }; + })(); \ No newline at end of file diff --git a/src/js/controller/MinimapController.js b/src/js/controller/MinimapController.js index 211f66b0..83888e61 100644 --- a/src/js/controller/MinimapController.js +++ b/src/js/controller/MinimapController.js @@ -52,6 +52,7 @@ if (this.isClicked) { if (this.getDrawingAreaZoomRatio_() > 1) { var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY); + console.log(coords); this.drawingController.setOffset(coords.x, coords.y); } } diff --git a/src/js/controller/drawing/DragHandler.js b/src/js/controller/drawing/DragHandler.js new file mode 100644 index 00000000..74be407b --- /dev/null +++ b/src/js/controller/drawing/DragHandler.js @@ -0,0 +1,78 @@ +(function () { + var ns = $.namespace('pskl.controller.drawing'); + + /** + * Dedicated handler to drag the drawing canvas using the mouse + * Will store the initial coordinates as well as the status of the drag + * @param {DrawingController} drawingController + */ + ns.DragHandler = function (drawingController) { + this.drawingController = drawingController; + + this.isDragging_ = false; + this.updateOrigin_(-1, -1); + }; + + /** + * Initialize a drag session. + * @param {Number} x : x coordinate of the mouse event that initiated the drag + * @param {Number} y : y coordinate of the mouse event that initiated the drag + */ + ns.DragHandler.prototype.startDrag = function (x, y) { + var coords = this.drawingController.getSpriteCoordinates(x, y); + this.updateOrigin_(coords.x, coords.y); + }; + + /** + * Update the drag status + * @param {Number} x : x coordinate of the mouse event that triggered the update + * @param {Number} y : y coordinate of the mouse event that triggered the update + */ + ns.DragHandler.prototype.updateDrag = function (x, y) { + var currentOffset = this.drawingController.getOffset(); + var offset = this.calculateOffset_(x, y); + if (currentOffset.y !== offset.y || currentOffset.x !== offset.x) { + this.isDragging_ = true; + this.drawingController.setOffset(offset.x, offset.y); + + // retrieve the updated coordinates after moving the sprite + // and store them as the new drag origin + var coords = this.drawingController.getSpriteCoordinates(x, y); + this.updateOrigin_(coords.x, coords.y); + } + }; + + /** + * Stop the drag session + */ + ns.DragHandler.prototype.stopDrag = function () { + this.isDragging_ = false; + this.origin = null; + }; + + /** + * Will return true if the drag handler effectively MOVED the offset + * during the current drag session + */ + ns.DragHandler.prototype.isDragging = function () { + return this.isDragging_; + }; + + ns.DragHandler.prototype.calculateOffset_ = function (x, y) { + var coords = this.drawingController.getSpriteCoordinates(x, y); + var currentOffset = this.drawingController.getOffset(); + + var offset = { + x : currentOffset.x - (coords.x - this.origin.x), + y : currentOffset.y - (coords.y - this.origin.y) + }; + + return offset; + }; + + ns.DragHandler.prototype.updateOrigin_ = function (x, y) { + this.origin = this.origin || {}; + this.origin.x = x; + this.origin.y = y; + }; +})(); \ No newline at end of file diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 9f1a8bef..cbfedc78 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -78,6 +78,7 @@ "js/controller/piskel/PublicPiskelController.js", "js/controller/CursorCoordinatesController.js", "js/controller/DrawingController.js", + "js/controller/drawing/DragHandler.js", "js/controller/PreviewFilmController.js", "js/controller/LayersListController.js", "js/controller/AnimatedPreviewController.js", From fad483ce7a2e53cb07bc6699c4cf76393a8be9df Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 23 Nov 2014 21:44:51 +0100 Subject: [PATCH 2/3] Increased movement speed --- src/js/controller/drawing/DragHandler.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/js/controller/drawing/DragHandler.js b/src/js/controller/drawing/DragHandler.js index 74be407b..8b1e59a6 100644 --- a/src/js/controller/drawing/DragHandler.js +++ b/src/js/controller/drawing/DragHandler.js @@ -1,6 +1,12 @@ (function () { var ns = $.namespace('pskl.controller.drawing'); + /** + * Multiplier applied between the mouse movement and viewport movement + * @type {Number} + */ + var MULTIPLIER = 2; + /** * Dedicated handler to drag the drawing canvas using the mouse * Will store the initial coordinates as well as the status of the drag @@ -63,8 +69,8 @@ var currentOffset = this.drawingController.getOffset(); var offset = { - x : currentOffset.x - (coords.x - this.origin.x), - y : currentOffset.y - (coords.y - this.origin.y) + x : currentOffset.x - MULTIPLIER * (coords.x - this.origin.x), + y : currentOffset.y - MULTIPLIER * (coords.y - this.origin.y) }; return offset; From 5afec1625896e2f663d3834d47b626d4a220aa29 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 23 Nov 2014 21:48:32 +0100 Subject: [PATCH 3/3] Cleanup of console.log in MinimapController.js-n --- src/js/controller/MinimapController.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/controller/MinimapController.js b/src/js/controller/MinimapController.js index 83888e61..211f66b0 100644 --- a/src/js/controller/MinimapController.js +++ b/src/js/controller/MinimapController.js @@ -52,7 +52,6 @@ if (this.isClicked) { if (this.getDrawingAreaZoomRatio_() > 1) { var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY); - console.log(coords); this.drawingController.setOffset(coords.x, coords.y); } }