bd99027852
- Added MinimapController that displays a frame on the animated preview when zoomed in - Added bounds for the offset to make sure it doesn't go crazy - Added new utility Math.js with a minmax function - TODO : the minimap controller has a lot of dependencies, see if could be cleaned up - TODO : DrawingController knows the size of the picture it has to render only indirectly, which makes it hard in some cases (such as boundary checking performed during setOffset)
85 lines
No EOL
3.2 KiB
JavaScript
85 lines
No EOL
3.2 KiB
JavaScript
(function () {
|
|
var ns = $.namespace('pskl.controller');
|
|
|
|
ns.MinimapController = function (piskelController, animationController, drawingController, container) {
|
|
this.piskelController = piskelController;
|
|
this.animationController = animationController;
|
|
this.drawingController = drawingController;
|
|
this.container = container;
|
|
|
|
this.isClicked = false;
|
|
};
|
|
|
|
ns.MinimapController.prototype.init = function () {
|
|
this.cropFrame = document.createElement('DIV');
|
|
this.cropFrame.className = 'minimap-crop-frame';
|
|
this.cropFrame.style.display = 'none';
|
|
$(this.container).mousedown(this.onMinimapMousedown_.bind(this));
|
|
$(this.container).mousemove(this.onMinimapMousemove_.bind(this));
|
|
$(this.container).mouseup(this.onMinimapMouseup_.bind(this));
|
|
$(this.container).append(this.cropFrame);
|
|
};
|
|
|
|
ns.MinimapController.prototype.onDrawingControllerMove_ = function () {
|
|
var zoomRatio = this.getDrawingAreaZoomRatio_();
|
|
if (zoomRatio > 1) {
|
|
this.displayCropFrame_(zoomRatio, this.drawingController.getRenderer().getOffset());
|
|
} else {
|
|
this.hideCropFrame_();
|
|
}
|
|
};
|
|
|
|
ns.MinimapController.prototype.displayCropFrame_ = function (ratio, offset) {
|
|
this.cropFrame.style.display = 'block';
|
|
this.cropFrame.style.top = (offset.y * this.animationController.renderer.getZoom()) + 'px';
|
|
this.cropFrame.style.left = (offset.x * this.animationController.renderer.getZoom()) + 'px';
|
|
var zoomRatio = this.getDrawingAreaZoomRatio_();
|
|
this.cropFrame.style.width = (this.container.width() / zoomRatio) + 'px';
|
|
this.cropFrame.style.height = (this.container.height() / zoomRatio) + 'px';
|
|
|
|
};
|
|
|
|
ns.MinimapController.prototype.hideCropFrame_ = function () {
|
|
this.cropFrame.style.display = 'none';
|
|
};
|
|
|
|
ns.MinimapController.prototype.onMinimapMousemove_ = function (evt) {
|
|
if (this.isClicked) {
|
|
if (this.getDrawingAreaZoomRatio_() > 1) {
|
|
var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY);
|
|
this.drawingController.setOffset(coords.x, coords.y);
|
|
}
|
|
}
|
|
};
|
|
|
|
ns.MinimapController.prototype.onMinimapMousedown_ = function (evt) {
|
|
this.isClicked = true;
|
|
};
|
|
|
|
ns.MinimapController.prototype.onMinimapMouseup_ = function (evt) {
|
|
this.isClicked = false;
|
|
};
|
|
|
|
ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) {
|
|
var frameCoords = this.animationController.renderer.getCoordinates(x, y);
|
|
var zoomRatio = this.getDrawingAreaZoomRatio_();
|
|
var frameWidth = this.piskelController.getCurrentFrame().getWidth();
|
|
var frameHeight = this.piskelController.getCurrentFrame().getHeight();
|
|
|
|
var width = frameWidth / zoomRatio;
|
|
var height = frameHeight / zoomRatio;
|
|
|
|
return {
|
|
x : frameCoords.x - (width/2),
|
|
y : frameCoords.y - (height/2)
|
|
};
|
|
};
|
|
|
|
ns.MinimapController.prototype.getDrawingAreaZoomRatio_ = function () {
|
|
var drawingAreaZoom = this.drawingController.getRenderer().getZoom();
|
|
var drawingAreaFullHeight = this.piskelController.getCurrentFrame().getHeight() * drawingAreaZoom;
|
|
var zoomRatio = drawingAreaFullHeight / this.drawingController.getRenderer().getDisplaySize().height;
|
|
|
|
return zoomRatio;
|
|
};
|
|
})(); |