feature : zoom

- 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)

js/controller/MinimapController.js

@@ -0,0 +1,85 @@
+(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;
+  };
+})();