ok this one is chaos

css/settings.css

@@ -28,6 +28,7 @@
   width: 280px;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
+  box-shadow: 0 0 5px 0 black;
 }
 
 .right-sticky-section.expanded .tool-icon {
@@ -39,6 +40,7 @@
   background-color: #444;
   margin-right: 0;
   padding-right: 2px;
+  border-left : 3px solid gold;
 }
 
 .settings-section {

css/spectrum/spectrum-overrides.css

@@ -29,6 +29,7 @@
   height: 100%;
   border-width: 0;
   box-sizing: border-box;
+  -moz-box-sizing:border-box;
   background-color: #444;
 }
 /* Hide the triangle */
@@ -39,7 +40,6 @@
 /*  */
 .sp-preview {
   margin-right: 0;
-  border-color: 0;
   height: 100%;
   width: 39px;
   border-width: 0;
@@ -83,6 +83,7 @@
   border: 2px solid white;
   background: none;
   box-sizing:border-box;
+  -moz-box-sizing:border-box;
   box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5);
 }
 

js/Constants.js

@@ -11,6 +11,8 @@ var Constants = {
   MAX_HEIGHT : 1024,
   MAX_WIDTH : 1024,
 
+  MINIMUM_ZOOM : 1,
+
   PREVIEW_FILM_SIZE : 120,
 
   DEFAULT_PEN_COLOR : '#000000',
@@ -48,8 +50,9 @@ var Constants = {
   GRID_STROKE_WIDTH: 1,
   ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',
 
-  LEFT_BUTTON : 'left_button_1',
+  LEFT_BUTTON : 0,
-  RIGHT_BUTTON : 'right_button_2',
+  MIDDLE_BUTTON : 1,
+  RIGHT_BUTTON : 2,
   MOUSEMOVE_THROTTLING : 10,
 
   ABSTRACT_FUNCTION : function () {throw 'abstract method should be implemented';}

js/Events.js

@@ -38,6 +38,5 @@ var Events = {
   SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
   HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
 
-  // Events triggered by keyboard
+  ZOOM_CHANGED : "ZOOM_CHANGED"
-  SELECT_TOOL : "SELECT_TOOL"
 };

js/app.js

@@ -169,6 +169,7 @@
         pskl.utils.serialization.Deserializer.deserialize(res.framesheet, function (piskel) {
           pskl.app.piskelController.setPiskel(piskel);
           pskl.app.animationController.setFPS(res.fps);
+
           $.publish(Events.HIDE_NOTIFICATION);
         });
       };
@@ -245,7 +246,7 @@
       var firstFrame = this.piskelController.getFrameAt(0);
       var canvasRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1);
       canvasRenderer.drawTransparentAs('rgba(0,0,0,0)');
-      var firstFrameCanvas = canvasRenderer.render().canvas;
+      var firstFrameCanvas = canvasRenderer.render();
       return firstFrameCanvas.toDataURL("image/png");
     },
 

js/controller/AnimatedPreviewController.js

@@ -18,7 +18,7 @@
     };
     this.renderer = new pskl.rendering.frame.FrameRenderer(this.container, renderingOptions);
 
-    $.subscribe(Events.FRAME_SIZE_CHANGED, this.updateZoom_.bind(this));
+    $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
   };
 
   ns.AnimatedPreviewController.prototype.init = function () {
@@ -67,10 +67,11 @@
     return Math.min(hZoom, wZoom);
   };
 
-  ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
+  ns.AnimatedPreviewController.prototype.onFrameSizeChange_ = function () {
     var frame = this.piskelController.getCurrentFrame();
     var zoom = this.calculateZoom_();
-    this.renderer.setZoom(zoom);
     this.renderer.setDisplaySize(frame.getWidth() * zoom, frame.getHeight() * zoom);
+    this.renderer.setZoom(zoom);
+    this.renderer.setOffset(0, 0);
   };
 })();

js/controller/DrawingController.js

@@ -1,6 +1,6 @@
 (function () {
   var ns = $.namespace("pskl.controller");
-  ns.DrawingController = function (piskelController, paletteController,container) {
+  ns.DrawingController = function (piskelController, paletteController, container) {
     /**
      * @public
      */
@@ -40,7 +40,6 @@
 
     // State of drawing controller:
     this.isClicked = false;
-    this.isRightClicked = false;
     this.previousMousemoveTime = 0;
     this.currentToolBehavior = null;
   };
@@ -52,7 +51,7 @@
       this.currentToolBehavior = toolBehavior;
       this.overlayFrame.clear();
     }, this));
-    
+
     $(window).resize($.proxy(this.startResizeTimer_, this));
 
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
@@ -86,7 +85,14 @@
   },
 
   ns.DrawingController.prototype.afterWindowResize_ = function () {
+    var initialWidth = this.compositeRenderer.getDisplaySize().width;
     this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
+    this.centerColumnWrapperHorizontally_();
+    var ratio = this.compositeRenderer.getDisplaySize().width / initialWidth;
+    var newZoom = ratio * this.compositeRenderer.getZoom();
+    this.compositeRenderer.setZoom(newZoom);
+
+    $.publish(Events.ZOOM_CHANGED);
   },
 
   /**
@@ -99,32 +105,37 @@
   },
 
   ns.DrawingController.prototype.onFrameSizeChanged_ = function () {
-    this.compositeRenderer.setZoom(this.calculateZoom_());
     this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
+    this.compositeRenderer.setZoom(this.calculateZoom_());
+    this.compositeRenderer.setOffset(0, 0);
+    $.publish(Events.ZOOM_CHANGED);
   };
 
   /**
    * @private
    */
   ns.DrawingController.prototype.onMousedown_ = function (event) {
-    this.isClicked = true;
+    var frame = this.piskelController.getCurrentFrame();
-
-    if(event.button == 2) { // right click
-      this.isRightClicked = true;
-    }
-
     var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
 
-    this.currentToolBehavior.applyToolAt(
+    if (event.button === Constants.MIDDLE_BUTTON) {
-      coords.x,
+      if (frame.containsPixel(coords.x, coords.y)) {
-      coords.y,
+        $.publish(Events.SELECT_PRIMARY_COLOR, [frame.getPixel(coords.x, coords.y)]);
-      this.getCurrentColor_(),
+      }
-      this.piskelController.getCurrentFrame(),
+    } else {
-      this.overlayFrame,
+      this.isClicked = true;
-      this.wrapEvtInfo_(event)
-    );
 
-    $.publish(Events.LOCALSTORAGE_REQUEST);
+      this.currentToolBehavior.applyToolAt(
+        coords.x,
+        coords.y,
+        this.getCurrentColor_(event),
+        frame,
+        this.overlayFrame,
+        event
+      );
+
+      $.publish(Events.LOCALSTORAGE_REQUEST);
+    }
   };
 
   /**
@@ -133,6 +144,7 @@
   ns.DrawingController.prototype.onMousemove_ = function (event) {
     var currentTime = new Date().getTime();
     // Throttling of the mousemove event:
+
     if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) {
       var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
 
@@ -141,10 +153,10 @@
         this.currentToolBehavior.moveToolAt(
           coords.x,
           coords.y,
-          this.getCurrentColor_(),
+          this.getCurrentColor_(event),
           this.piskelController.getCurrentFrame(),
           this.overlayFrame,
-          this.wrapEvtInfo_(event)
+          event
         );
 
         // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
@@ -156,10 +168,10 @@
         this.currentToolBehavior.moveUnactiveToolAt(
           coords.x,
           coords.y,
-          this.getCurrentColor_(),
+          this.getCurrentColor_(event),
           this.piskelController.getCurrentFrame(),
           this.overlayFrame,
-          this.wrapEvtInfo_(event)
+          event
         );
       }
       this.previousMousemoveTime = currentTime;
@@ -170,56 +182,44 @@
     var event = jQueryEvent.originalEvent;
     var delta = event.wheelDeltaY || (-2 * event.deltaY);
     var currentZoom = this.renderer.getZoom();
+
+    var perfectZoom = this.calculateZoom_();
+    var step = perfectZoom / 10;
+
     if (delta > 0) {
-      this.compositeRenderer.setZoom(currentZoom + 1);
+      this.compositeRenderer.setZoom(currentZoom + step);
     } else if (delta < 0) {
-      this.compositeRenderer.setZoom(currentZoom - 1);
+      this.compositeRenderer.setZoom(currentZoom - step);
     }
-    pskl.app.minimapController.onDrawingControllerMove_();
+    $.publish(Events.ZOOM_CHANGED);
   };
 
   /**
    * @private
    */
   ns.DrawingController.prototype.onMouseup_ = function (event) {
-    if(this.isClicked || this.isRightClicked) {
+    if(this.isClicked) {
       // A mouse button was clicked on the drawing canvas before this mouseup event,
       // the user was probably drawing on the canvas.
       // Note: The mousemove movement (and the mouseup) may end up outside
       // of the drawing canvas.
 
       this.isClicked = false;
-      this.isRightClicked = false;
 
       var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
-      //console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
       this.currentToolBehavior.releaseToolAt(
         coords.x,
         coords.y,
-        this.getCurrentColor_(),
+        this.getCurrentColor_(event),
         this.piskelController.getCurrentFrame(),
         this.overlayFrame,
-        this.wrapEvtInfo_(event)
+        event
       );
 
       $.publish(Events.TOOL_RELEASED);
     }
   };
 
-  /**
-   * @private
-   */
-  ns.DrawingController.prototype.wrapEvtInfo_ = function (event) {
-    var evtInfo = {};
-    if (event.button === 0) {
-      evtInfo.button = Constants.LEFT_BUTTON;
-    } else if (event.button == 2) {
-      evtInfo.button = Constants.RIGHT_BUTTON;
-    }
-    return evtInfo;
-  };
-
-
   /**
    * @private
    */
@@ -230,11 +230,13 @@
   /**
    * @private
    */
-  ns.DrawingController.prototype.getCurrentColor_ = function () {
+  ns.DrawingController.prototype.getCurrentColor_ = function (event) {
-    if(this.isRightClicked) {
+    if(event.button == Constants.RIGHT_BUTTON) {
       return this.paletteController.getSecondaryColor();
-    } else {
+    } else if(event.button == Constants.LEFT_BUTTON) {
       return this.paletteController.getPrimaryColor();
+    } else {
+      return Constants.DEFAULT_PEN_COLOR;
     }
   };
 
@@ -279,8 +281,11 @@
   ns.DrawingController.prototype.getAvailableWidth_ = function () {
     var leftSectionWidth = $('.left-column').outerWidth(true),
     rightSectionWidth = $('.right-column').outerWidth(true),
-    availableWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth;
+    toolsContainerWidth = $('#tool-section').outerWidth(true),
-    return availableWidth;
+    settingsContainerWidth = $('#application-action-section').outerWidth(true),
+    availableWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth - toolsContainerWidth - settingsContainerWidth;
+
+    return availableWidth-50;
   };
 
   ns.DrawingController.prototype.getContainerHeight_ = function () {
@@ -308,6 +313,6 @@
 
   ns.DrawingController.prototype.setOffset = function (x, y) {
     this.compositeRenderer.setOffset(x, y);
-    pskl.app.minimapController.onDrawingControllerMove_();
+    $.publish(Events.ZOOM_CHANGED);
   };
 })();

js/controller/MinimapController.js

@@ -21,9 +21,11 @@
     $(this.container).mousedown(this.onMinimapMousedown_.bind(this));
     $('body').mousemove(this.onMinimapMousemove_.bind(this));
     $('body').mouseup(this.onMinimapMouseup_.bind(this));
+
+    $.subscribe(Events.ZOOM_CHANGED, $.proxy(this.renderMinimap_, this));
   };
 
-  ns.MinimapController.prototype.onDrawingControllerMove_ = function () {
+  ns.MinimapController.prototype.renderMinimap_ = function () {
     var zoomRatio = this.getDrawingAreaZoomRatio_();
     if (zoomRatio > 1) {
       this.displayCropFrame_(zoomRatio, this.drawingController.getRenderer().getOffset());

js/controller/PiskelController.js

@@ -16,8 +16,8 @@
 
     this.layerIdCounter = 1;
 
-    $.publish(Events.PISKEL_RESET);
     $.publish(Events.FRAME_SIZE_CHANGED);
+    $.publish(Events.PISKEL_RESET);
   };
 
   ns.PiskelController.prototype.init = function () {

js/drawingtools/BaseTool.js

@@ -8,11 +8,11 @@
 
   ns.BaseTool = function() {};
 
-  ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay) {};
+  ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {};
 
-  ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
+  ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {};
 
-  ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
+  ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
     if (overlay.containsPixel(col, row)) {
       if (!isNaN(this.highlightedPixelCol) &&
         !isNaN(this.highlightedPixelRow) &&
@@ -31,7 +31,7 @@
     }
   };
 
-  ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};
+  ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
 
   /**
    * Bresenham line algorihtm: Get an array of pixels from

js/drawingtools/Circle.js

@@ -20,7 +20,7 @@
   /**
    * @override
    */
-  ns.Circle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.Circle.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     this.startCol = col;
     this.startRow = row;
 
@@ -28,7 +28,7 @@
     overlay.setPixel(col, row, color);
   };
 
-  ns.Circle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+  ns.Circle.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
     overlay.clear();
     if(color == Constants.TRANSPARENT_COLOR) {
       color = Constants.SELECTION_TRANSPARENT_COLOR;
@@ -41,7 +41,7 @@
   /**
    * @override
    */
-  ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
+  ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
     overlay.clear();
     if(frame.containsPixel(col, row)) { // cancel if outside of canvas
       // draw in frame to finalize

js/drawingtools/ColorPicker.js

@@ -16,12 +16,12 @@
   /**
    * @override
    */
-  ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, context) {
+  ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     if (frame.containsPixel(col, row)) {
       var sampledColor = frame.getPixel(col, row);
-      if (context.button == Constants.LEFT_BUTTON) {
+      if (event.button == Constants.LEFT_BUTTON) {
         $.publish(Events.SELECT_PRIMARY_COLOR, [sampledColor]);
-      } else if (context.button == Constants.RIGHT_BUTTON) {
+      } else if (event.button == Constants.RIGHT_BUTTON) {
         $.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]);
       }
     }

js/drawingtools/Eraser.js

@@ -17,7 +17,7 @@
   /**
    * @override
    */
-  ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
-    this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay);
+    this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event);
   };
 })();

js/drawingtools/Move.js

@@ -20,13 +20,13 @@
   /**
    * @override
    */
-  ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     this.startCol = col;
     this.startRow = row;
     this.frameClone = frame.clone();
   };
 
-  ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+  ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
     var colDiff = col - this.startCol, rowDiff = row - this.startRow;
     this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
   };
@@ -48,7 +48,7 @@
   /**
    * @override
    */
-  ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
+  ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
     this.moveToolAt(col, row, color, frame, overlay);
   };
 })();

js/drawingtools/PaintBucket.js

@@ -16,7 +16,7 @@
   /**
    * @override
    */
-  ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
 
     pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
   };

js/drawingtools/Rectangle.js

@@ -20,7 +20,7 @@
   /**
    * @override
    */
-  ns.Rectangle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.Rectangle.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     this.startCol = col;
     this.startRow = row;
 
@@ -28,7 +28,7 @@
     overlay.setPixel(col, row, color);
   };
 
-  ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+  ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
     overlay.clear();
     if(color == Constants.TRANSPARENT_COLOR) {
       color = Constants.SELECTION_TRANSPARENT_COLOR;
@@ -41,7 +41,7 @@
   /**
    * @override
    */
-  ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
+  ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
     overlay.clear();
     if(frame.containsPixel(col, row)) { // cancel if outside of canvas
       // draw in frame to finalize

js/drawingtools/SimplePen.js

@@ -16,11 +16,11 @@
   };
 
   pskl.utils.inherit(ns.SimplePen, ns.BaseTool);
-  
+
   /**
    * @override
    */
-  ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     if (frame.containsPixel(col, row)) {
       frame.setPixel(col, row, color);
     }
@@ -28,7 +28,7 @@
     this.previousRow = row;
   };
 
-  ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+  ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
     if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
       // The pen movement is too fast for the mousemove frequency, there is a gap between the
       // current point and the previously drawn one.

js/drawingtools/Stroke.js

@@ -20,7 +20,7 @@
   /**
    * @override
    */
-  ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     this.startCol = col;
     this.startRow = row;
 
@@ -36,7 +36,7 @@
     overlay.setPixel(col, row, color);
   };
 
-  ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+  ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
     overlay.clear();
 
     // When the user moussemove (before releasing), we dynamically compute the
@@ -62,7 +62,7 @@
   /**
    * @override
    */
-  ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
+  ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
     // If the stroke tool is released outside of the canvas, we cancel the stroke:
     // TODO: Mutualize this check in common method
     if(frame.containsPixel(col, row)) {

js/drawingtools/VerticalMirrorPen.js

@@ -26,7 +26,7 @@
   /**
    * @override
    */
-  ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     this.superclass.applyToolAt.call(this, col, row, color, frame, overlay);
 
     var mirroredCol = this.getSymmetricCol_(col, frame);

js/drawingtools/selectiontools/BaseSelect.js

@@ -20,7 +20,7 @@
   /**
    * @override
    */
-  ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+  ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
     this.startCol = col;
     this.startRow = row;
 
@@ -47,7 +47,7 @@
   /**
    * @override
    */
-  ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+  ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
     if(this.mode == "select") {
 
       this.onSelect_(col, row, color, frame, overlay);
@@ -61,7 +61,7 @@
   /**
    * @override
    */
-  ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
+  ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
     if(this.mode == "select") {
       this.onSelectEnd_(col, row, color, frame, overlay);
     } else if(this.mode == "moveSelection") {
@@ -76,7 +76,7 @@
    * instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
    * @override
    */
-  ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
+  ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
 
     if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
       // We're hovering the selection, show the move tool:

js/rendering/PiskelRenderer.js

@@ -5,7 +5,7 @@
   ns.PiskelRenderer = function (piskelController) {
     var frames = [];
     for (var i = 0 ; i < piskelController.getFrameCount() ; i++) {
-      frames.push(this.piskelController.getFrameAt(i));
+      frames.push(piskelController.getFrameAt(i));
     }
     ns.FramesheetRenderer.call(this, frames);
   };

js/rendering/frame/FrameRenderer.js

@@ -77,17 +77,18 @@
   };
 
   ns.FrameRenderer.prototype.setZoom = function (zoom) {
-    // back up center coordinates
+    if (zoom > Constants.MINIMUM_ZOOM) {
-    var centerX = this.offset.x + (this.displayWidth/(2*this.zoom));
+      // back up center coordinates
-    var centerY = this.offset.y + (this.displayHeight/(2*this.zoom));
+      var centerX = this.offset.x + (this.displayWidth/(2*this.zoom));
+      var centerY = this.offset.y + (this.displayHeight/(2*this.zoom));
 
-    this.zoom = Math.max(1, zoom);
+      this.zoom = zoom;
-
+      // recenter
-    // recenter
+      this.setOffset(
-    this.setOffset(
+        centerX - (this.displayWidth/(2*this.zoom)),
-      centerX - (this.displayWidth/(2*this.zoom)),
+        centerY - (this.displayHeight/(2*this.zoom))
-      centerY - (this.displayHeight/(2*this.zoom))
+      );
-    );
+    }
   };
 
   ns.FrameRenderer.prototype.getZoom = function () {

piskel-boot.js

@@ -31,7 +31,7 @@
       script = "build/piskel-packaged-min.js";
     }
     var loaderInterval = window.setInterval(function () {
-      if (document.querySelectorAll("._ctl").length === 0) {
+      if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
         window.clearInterval(loaderInterval);
         loadScript(script, "pskl.app.init()");
       } else {

piskel-script-list.js

@@ -6,12 +6,14 @@ exports.scripts = [
   // GIF Encoding libraries
   "js/lib/gif/gif.worker.js",
   "js/lib/gif/gif.js",
+  // Spectrum color-picker library
   "js/lib/spectrum/spectrum.js",
 
   // Application wide configuration
   "js/Constants.js",
   "js/Events.js",
 
+
   // Libraries
   "js/utils/core.js",
   "js/utils/UserAgent.js",
@@ -93,7 +95,6 @@ exports.scripts = [
   "js/drawingtools/selectiontools/RectangleSelect.js",
   "js/drawingtools/selectiontools/ShapeSelect.js",
   "js/drawingtools/ColorPicker.js",
-
   // Application controller and initialization
   "js/app.js"
 ];