mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge pull request #233 from juliandescottes/enhancement-move-viewport
Enhancement move viewport
This commit is contained in:
commit
fe110a3d8e
@ -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);
|
||||
};
|
||||
|
||||
})();
|
84
src/js/controller/drawing/DragHandler.js
Normal file
84
src/js/controller/drawing/DragHandler.js
Normal file
@ -0,0 +1,84 @@
|
||||
(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
|
||||
* @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 - MULTIPLIER * (coords.x - this.origin.x),
|
||||
y : currentOffset.y - MULTIPLIER * (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;
|
||||
};
|
||||
})();
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user