From 123ea31191fb2ce241c880c2a2e4af993129ea0f Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 21 Dec 2014 18:38:14 +0100 Subject: [PATCH] Cleanup minimapController, center previewFilm canvas --- .../controller/AnimatedPreviewController.js | 12 +- src/js/controller/MinimapController.js | 126 +++++++++++------- src/js/controller/PreviewFilmController.js | 15 ++- 3 files changed, 94 insertions(+), 59 deletions(-) diff --git a/src/js/controller/AnimatedPreviewController.js b/src/js/controller/AnimatedPreviewController.js index 2ada9fad..7045aa19 100644 --- a/src/js/controller/AnimatedPreviewController.js +++ b/src/js/controller/AnimatedPreviewController.js @@ -168,13 +168,13 @@ containerEl.style.height = height + 'px'; containerEl.style.width = width + 'px'; - var horizontalPadding = (PREVIEW_SIZE - height) / 2; - containerEl.style.marginTop = horizontalPadding + 'px'; - containerEl.style.marginBottom = horizontalPadding + 'px'; + var horizontalMargin = (PREVIEW_SIZE - height) / 2; + containerEl.style.marginTop = horizontalMargin + 'px'; + containerEl.style.marginBottom = horizontalMargin + 'px'; - var verticalPadding = (PREVIEW_SIZE - width) / 2; - containerEl.style.marginLeft = verticalPadding + 'px'; - containerEl.style.marginRight = verticalPadding + 'px'; + var verticalMargin = (PREVIEW_SIZE - width) / 2; + containerEl.style.marginLeft = verticalMargin + 'px'; + containerEl.style.marginRight = verticalMargin + 'px'; }; ns.AnimatedPreviewController.prototype.setRenderFlag_ = function (bool) { diff --git a/src/js/controller/MinimapController.js b/src/js/controller/MinimapController.js index e64e6149..97e2c269 100644 --- a/src/js/controller/MinimapController.js +++ b/src/js/controller/MinimapController.js @@ -8,14 +8,15 @@ this.container = container; this.isClicked = false; + this.isVisible = false; }; ns.MinimapController.prototype.init = function () { // Create minimap DOM elements - this.cropFrame = document.createElement('DIV'); - this.cropFrame.className = 'minimap-crop-frame'; - this.cropFrame.style.display = 'none'; - $(this.container).append(this.cropFrame); + this.minimapEl = document.createElement('DIV'); + this.minimapEl.className = 'minimap-crop-frame'; + this.minimapEl.style.display = 'none'; + $(this.container).append(this.minimapEl); // Init mouse events $(this.container).mousedown(this.onMinimapMousedown_.bind(this)); @@ -26,56 +27,81 @@ }; ns.MinimapController.prototype.renderMinimap_ = function () { - var zoomRatio = this.getDrawingAreaZoomRatio_(); - if (zoomRatio > 1) { - this.displayCropFrame_(zoomRatio, this.drawingController.getRenderer().getOffset()); + var verticalRatio = this.getVerticalRatio_(); + var horizontalRatio = this.getHorizontalRatio_(); + if (verticalRatio > 1 || horizontalRatio > 1) { + this.displayMinimap_(); } else { - this.hideCropFrame_(); + this.hideMinimap_(); } }; - ns.MinimapController.prototype.displayCropFrame_ = function (ratio, offset) { - this.cropFrame.style.display = 'block'; + ns.MinimapController.prototype.displayMinimap_ = function () { + var minimapSize = this.getMinimapSize_(); + var previewSize = this.getPreviewSize_(); var containerHeight = this.container.height(); 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); - var margin = this.drawingController.renderer.margin; + // the preview is centered in a square container + // 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 framePreviewWidth = frame.getWidth() * this.animationController.getZoom(); - var framePreviewHeight = frame.getHeight() * this.animationController.getZoom(); - - 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'; + var topMargin = (containerHeight - Math.max(minimapSize.height, previewSize.height))/2; + var topOffset = offset.y * this.animationController.getZoom(); + var top = topMargin + topOffset; + 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 () { - this.cropFrame.style.display = 'none'; + ns.MinimapController.prototype.getMinimapSize_ = function () { + // 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) { - if (this.isClicked) { - if (this.getDrawingAreaZoomRatio_() > 1) { - var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY); - this.drawingController.setOffset(coords.x, coords.y); - } + if (this.isVisible && this.isClicked) { + var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY); + this.drawingController.setOffset(coords.x, coords.y); } }; @@ -89,12 +115,12 @@ ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) { var frameCoords = this.animationController.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; + var width = frameWidth / this.getHorizontalRatio_(); + var height = frameHeight / this.getVerticalRatio_(); return { 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 frame = this.piskelController.getCurrentFrame(); - var dim = Math.max(frame.getHeight(), frame.getWidth()); - var drawingAreaSize = dim * drawingAreaZoom; + var frameTotalHeight = frame.getHeight() * drawingAreaZoom; + var frameDisplayHeight = this.drawingController.getRenderer().getDisplaySize().height; - var containerHeight = this.container.height(); - var containerWidth = this.container.width(); + return frameTotalHeight / frameDisplayHeight; + }; - 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 zoomRatio; + return frameTotalWidth / frameDisplayWidth; }; })(); \ No newline at end of file diff --git a/src/js/controller/PreviewFilmController.js b/src/js/controller/PreviewFilmController.js index 0571c02e..47777a1d 100644 --- a/src/js/controller/PreviewFilmController.js +++ b/src/js/controller/PreviewFilmController.js @@ -162,6 +162,14 @@ var canvasContainer = document.createElement("div"); 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"); canvasBackground.className = "canvas-background"; @@ -227,10 +235,9 @@ * Calculate the preview zoom depending on the piskel size */ ns.PreviewFilmController.prototype.calculateZoom_ = function () { - var curFrame = this.piskelController.getCurrentFrame(), - frameHeight = curFrame.getHeight(), - frameWidth = curFrame.getWidth(); + var frame = this.piskelController.getCurrentFrame(); + var frameSize = Math.max(frame.getHeight(), frame.getWidth()); - return Math.min(Constants.PREVIEW_FILM_SIZE/frameHeight, Constants.PREVIEW_FILM_SIZE/frameWidth); + return Constants.PREVIEW_FILM_SIZE/frameSize; }; })(); \ No newline at end of file