mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Cleanup minimapController, center previewFilm canvas

Browse Source
This commit is contained in:
jdescottes 2014-12-21 18:38:14 +01:00
parent 1df5d0da38
commit 123ea31191
3 changed files with 94 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/js/controller/AnimatedPreviewController.js
View File

@ -168,13 +168,13 @@
containerEl.style.height = height + 'px'; containerEl.style.height = height + 'px';
containerEl.style.width = width + 'px'; containerEl.style.width = width + 'px';
var horizontalPadding = (PREVIEW_SIZE - height) / 2; var horizontalMargin = (PREVIEW_SIZE - height) / 2;
containerEl.style.marginTop = horizontalPadding + 'px'; containerEl.style.marginTop = horizontalMargin + 'px';
containerEl.style.marginBottom = horizontalPadding + 'px'; containerEl.style.marginBottom = horizontalMargin + 'px';
var verticalPadding = (PREVIEW_SIZE - width) / 2; var verticalMargin = (PREVIEW_SIZE - width) / 2;
containerEl.style.marginLeft = verticalPadding + 'px'; containerEl.style.marginLeft = verticalMargin + 'px';
containerEl.style.marginRight = verticalPadding + 'px'; containerEl.style.marginRight = verticalMargin + 'px';
}; };
ns.AnimatedPreviewController.prototype.setRenderFlag_ = function (bool) { ns.AnimatedPreviewController.prototype.setRenderFlag_ = function (bool) {

126
src/js/controller/MinimapController.js
View File

@ -8,14 +8,15 @@
this.container = container; this.container = container;
this.isClicked = false; this.isClicked = false;
this.isVisible = false;
}; };
ns.MinimapController.prototype.init = function () { ns.MinimapController.prototype.init = function () {
// Create minimap DOM elements // Create minimap DOM elements
this.cropFrame = document.createElement('DIV'); this.minimapEl = document.createElement('DIV');
this.cropFrame.className = 'minimap-crop-frame'; this.minimapEl.className = 'minimap-crop-frame';
this.cropFrame.style.display = 'none'; this.minimapEl.style.display = 'none';
$(this.container).append(this.cropFrame); $(this.container).append(this.minimapEl);
// Init mouse events // Init mouse events
$(this.container).mousedown(this.onMinimapMousedown_.bind(this)); $(this.container).mousedown(this.onMinimapMousedown_.bind(this));
@ -26,56 +27,81 @@
}; };
ns.MinimapController.prototype.renderMinimap_ = function () { ns.MinimapController.prototype.renderMinimap_ = function () {
var zoomRatio = this.getDrawingAreaZoomRatio_(); var verticalRatio = this.getVerticalRatio_();
if (zoomRatio > 1) { var horizontalRatio = this.getHorizontalRatio_();
this.displayCropFrame_(zoomRatio, this.drawingController.getRenderer().getOffset()); if (verticalRatio > 1 || horizontalRatio > 1) {
this.displayMinimap_();
} else { } else {
this.hideCropFrame_(); this.hideMinimap_();
} }
}; };
ns.MinimapController.prototype.displayCropFrame_ = function (ratio, offset) { ns.MinimapController.prototype.displayMinimap_ = function () {
this.cropFrame.style.display = 'block'; var minimapSize = this.getMinimapSize_();
var previewSize = this.getPreviewSize_();
var containerHeight = this.container.height(); var containerHeight = this.container.height();
var containerWidth = this.container.width(); var containerWidth = this.container.width();
var displaySize = this.drawingController.getRenderer().getDisplaySize();
var width = displaySize.width / ratio;
var height = displaySize.height / ratio;
this.cropFrame.style.width = Math.min(width, containerWidth) + 'px';
this.cropFrame.style.height = Math.min(height, containerHeight) + 'px';
// offset(x, y) in frame pixels
var offset = this.drawingController.getRenderer().getOffset();
var containerSize = Math.max(containerHeight, containerWidth); // the preview is centered in a square container
var margin = this.drawingController.renderer.margin; // if the sprite is not a square, a margin is needed on the appropriate coordinate
// before adding the offset coming from the drawing area
var leftMargin = (containerWidth - Math.max(minimapSize.width, previewSize.width))/2;
var leftOffset = offset.x * this.animationController.getZoom();
var left = leftMargin + leftOffset;
var frame = this.piskelController.getCurrentFrame(); var topMargin = (containerHeight - Math.max(minimapSize.height, previewSize.height))/2;
var framePreviewWidth = frame.getWidth() * this.animationController.getZoom(); var topOffset = offset.y * this.animationController.getZoom();
var framePreviewHeight = frame.getHeight() * this.animationController.getZoom(); var top = topMargin + topOffset;
var left = (containerSize - Math.max(width, framePreviewWidth))/2;
left += offset.x * this.animationController.getZoom();
left = Math.max(0, left);
this.cropFrame.style.left = left + 'px';
var top = (containerSize - Math.max(height, framePreviewHeight))/2;
top += offset.y * this.animationController.getZoom();
top = Math.max(0, top);
this.cropFrame.style.top = top + 'px';
this.minimapEl.style.display = 'block';
this.minimapEl.style.width = Math.min(minimapSize.width, containerWidth) + 'px';
this.minimapEl.style.height = Math.min(minimapSize.height, containerHeight) + 'px';
this.minimapEl.style.left = Math.max(0, left) + 'px';
this.minimapEl.style.top = Math.max(0, top) + 'px';
this.isVisible = true;
}; };
ns.MinimapController.prototype.hideCropFrame_ = function () { ns.MinimapController.prototype.getMinimapSize_ = function () {
this.cropFrame.style.display = 'none'; // Calculate the ratio to translate drawing area sizes to animated preview sizes
var drawingAreaZoom = this.drawingController.getRenderer().getZoom();
var animatedPreviewZoom = this.animationController.getZoom();
var ratio = drawingAreaZoom / animatedPreviewZoom;
var displaySize = this.drawingController.getRenderer().getDisplaySize();
var minimapWidth = displaySize.width / ratio;
var minimapHeight = displaySize.height / ratio;
return {
width : minimapWidth,
height: minimapHeight
};
};
ns.MinimapController.prototype.getPreviewSize_ = function () {
var frame = this.piskelController.getCurrentFrame();
var previewWidth = frame.getWidth() * this.animationController.getZoom();
var previewHeight = frame.getHeight() * this.animationController.getZoom();
return {
width : previewWidth,
height: previewHeight
};
};
ns.MinimapController.prototype.hideMinimap_ = function () {
this.minimapEl.style.display = 'none';
this.isVisible = false;
}; };
ns.MinimapController.prototype.onMinimapMousemove_ = function (evt) { ns.MinimapController.prototype.onMinimapMousemove_ = function (evt) {
if (this.isClicked) { if (this.isVisible && this.isClicked) {
if (this.getDrawingAreaZoomRatio_() > 1) { var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY);
var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY); this.drawingController.setOffset(coords.x, coords.y);
this.drawingController.setOffset(coords.x, coords.y);
}
} }
}; };
@ -89,12 +115,12 @@
ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) { ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) {
var frameCoords = this.animationController.getCoordinates(x, y); var frameCoords = this.animationController.getCoordinates(x, y);
var zoomRatio = this.getDrawingAreaZoomRatio_();
var frameWidth = this.piskelController.getCurrentFrame().getWidth(); var frameWidth = this.piskelController.getCurrentFrame().getWidth();
var frameHeight = this.piskelController.getCurrentFrame().getHeight(); var frameHeight = this.piskelController.getCurrentFrame().getHeight();
var width = frameWidth / zoomRatio; var width = frameWidth / this.getHorizontalRatio_();
var height = frameHeight / zoomRatio; var height = frameHeight / this.getVerticalRatio_();
return { return {
x : frameCoords.x - (width/2), x : frameCoords.x - (width/2),
@ -102,19 +128,21 @@
}; };
}; };
ns.MinimapController.prototype.getDrawingAreaZoomRatio_ = function () { ns.MinimapController.prototype.getVerticalRatio_ = function () {
var drawingAreaZoom = this.drawingController.getRenderer().getZoom(); var drawingAreaZoom = this.drawingController.getRenderer().getZoom();
var frame = this.piskelController.getCurrentFrame(); var frame = this.piskelController.getCurrentFrame();
var dim = Math.max(frame.getHeight(), frame.getWidth()); var frameTotalHeight = frame.getHeight() * drawingAreaZoom;
var drawingAreaSize = dim * drawingAreaZoom; var frameDisplayHeight = this.drawingController.getRenderer().getDisplaySize().height;
var containerHeight = this.container.height(); return frameTotalHeight / frameDisplayHeight;
var containerWidth = this.container.width(); };
var containerSize = Math.max(containerHeight, containerWidth); ns.MinimapController.prototype.getHorizontalRatio_ = function () {
var drawingAreaZoom = this.drawingController.getRenderer().getZoom();
var frame = this.piskelController.getCurrentFrame();
var frameTotalWidth = frame.getWidth() * drawingAreaZoom;
var frameDisplayWidth = this.drawingController.getRenderer().getDisplaySize().width;
var zoomRatio = drawingAreaSize / containerSize; return frameTotalWidth / frameDisplayWidth;
return zoomRatio;
}; };
})(); })();

15
src/js/controller/PreviewFilmController.js
View File

@ -162,6 +162,14 @@
var canvasContainer = document.createElement("div"); var canvasContainer = document.createElement("div");
canvasContainer.classList.add("canvas-container", pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND)); canvasContainer.classList.add("canvas-container", pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
var height = this.zoom * this.piskelController.getCurrentFrame().getHeight();
var horizontalMargin = (Constants.PREVIEW_FILM_SIZE - height) / 2;
canvasContainer.style.marginTop = horizontalMargin + 'px';
var width = this.zoom * this.piskelController.getCurrentFrame().getWidth();
var verticalMargin = (Constants.PREVIEW_FILM_SIZE - width) / 2;
canvasContainer.style.marginLeft = verticalMargin + 'px';
var canvasBackground = document.createElement("div"); var canvasBackground = document.createElement("div");
canvasBackground.className = "canvas-background"; canvasBackground.className = "canvas-background";
@ -227,10 +235,9 @@
* Calculate the preview zoom depending on the piskel size * Calculate the preview zoom depending on the piskel size
*/ */
ns.PreviewFilmController.prototype.calculateZoom_ = function () { ns.PreviewFilmController.prototype.calculateZoom_ = function () {
var curFrame = this.piskelController.getCurrentFrame(), var frame = this.piskelController.getCurrentFrame();
frameHeight = curFrame.getHeight(), var frameSize = Math.max(frame.getHeight(), frame.getWidth());
frameWidth = curFrame.getWidth();
return Math.min(Constants.PREVIEW_FILM_SIZE/frameHeight, Constants.PREVIEW_FILM_SIZE/frameWidth); return Constants.PREVIEW_FILM_SIZE/frameSize;
}; };
})(); })();