Added Rotate tool + abstract Transform tool

src/js/controller/TransformationsController.js

@@ -8,7 +8,8 @@
     };
 
     this.tools = [
-      toDescriptor('flip', 'F', new pskl.tools.transform.Flip())
+      toDescriptor('flip', 'F', new pskl.tools.transform.Flip()),
+      toDescriptor('rotate', 'V', new pskl.tools.transform.Rotate())
     ];
 
     this.toolIconRenderer = new pskl.tools.IconMarkupRenderer();
@@ -24,23 +25,17 @@
 
   ns.TransformationsController.prototype.onTransformationClick = function (evt) {
     var toolId = evt.target.dataset.toolId;
-    var tool = pskl.utils.Array.find(this.tools, function (tool) {
+    this.tools.forEach(function (tool) {
-      return tool.id === toolId;
+      if (tool.instance.toolId === toolId) {
-    });
+        tool.instance.apply(evt);
-    if (tool) {
+      }
-      tool.instance.apply(evt);
+    }.bind(this));
-    }
   };
 
-  /**
-   * @private
-   */
   ns.TransformationsController.prototype.createToolsDom_ = function() {
-    var html = '';
+    var html = this.tools.reduce(function (p, tool) {
-    for(var i = 0 ; i < this.tools.length ; i++) {
+      return p + this.toolIconRenderer.render(tool.instance, tool.shortcut);
-      var tool = this.tools[i];
+    }.bind(this), '');
-      html += this.toolIconRenderer.render(tool.instance, tool.shortcut);
-    }
     this.toolsContainer.innerHTML = html;
   };
 })();

src/js/tools/transform/Flip.js

@@ -7,26 +7,18 @@
     this.tooltipDescriptors = [];
   };
 
-  pskl.utils.inherit(ns.Flip, pskl.tools.Tool);
+  pskl.utils.inherit(ns.Flip, ns.Transform);
 
-  ns.Flip.prototype.apply = function (evt) {
+  ns.Flip.prototype.applyToolOnFrame_ = function (frame, altKey) {
-    var allFrames = evt.shiftKey;
-    var allLayers = evt.ctrlKey;
-    if (evt.altKey) {
-      this.flip('vertical', allFrames, allLayers);
-    } else {
-      this.flip('horizontal', allFrames, allLayers);
-    }
-  };
-
-  ns.Flip.prototype.flipFrame_ = function (frame, axis) {
     var clone = frame.clone();
     var w = frame.getWidth();
     var h = frame.getHeight();
+
+    var isVertical = !altKey;
     clone.forEachPixel(function (color, x, y) {
-      if (axis === 'horizontal') {
+      if (isVertical) {
         x = w-x-1;
-      } else if (axis === 'vertical') {
+      } else {
         y = h-y-1;
       }
       frame.pixels[x][y] = color;
@@ -34,19 +26,4 @@
     frame.version++;
   };
 
-  ns.Flip.prototype.flip = function (axis, allFrames, allLayers) {
-    var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
-    var layers = allLayers ? pskl.app.piskelController.getLayers(): [pskl.app.piskelController.getCurrentLayer()];
-    layers.forEach(function (layer) {
-      var frames = allFrames ? layer.getFrames(): [layer.getFrameAt(currentFrameIndex)];
-      frames.forEach(function (frame) {
-        this.flipFrame_(frame, axis);
-      }.bind(this));
-    }.bind(this));
-    $.publish(Events.PISKEL_RESET);
-    $.publish(Events.PISKEL_SAVE_STATE, {
-      type : pskl.service.HistoryService.SNAPSHOT
-    });
-  };
-
 })();

src/js/tools/transform/Rotate.js

@@ -0,0 +1,32 @@
+(function () {
+  var ns = $.namespace('pskl.tools.transform');
+
+  ns.Rotate = function () {
+    this.toolId = "tool-rotate";
+    this.helpText = "Rotate tool";
+    this.tooltipDescriptors = [];
+  };
+
+  pskl.utils.inherit(ns.Rotate, ns.Transform);
+
+  ns.Rotate.prototype.applyToolOnFrame_ = function (frame, altKey) {
+    var clone = frame.clone();
+    var w = frame.getWidth();
+    var h = frame.getHeight();
+
+    var isClockwise = altKey;
+    clone.forEachPixel(function (color, x, y) {
+      var _x = x, _y = y;
+      if (isClockwise) {
+        y = x;
+        x = w-_y-1;
+      } else {
+        x = y;
+        y = h-_x-1;
+      }
+      frame.pixels[x][y] = color;
+    });
+    frame.version++;
+  };
+
+})();

src/js/tools/transform/Transform.js

@@ -0,0 +1,33 @@
+(function () {
+  var ns = $.namespace('pskl.tools.transform');
+
+  ns.Transform = function () {
+    this.toolId = "tool-transform";
+    this.helpText = "Transform tool";
+    this.tooltipDescriptors = [];
+  };
+
+  pskl.utils.inherit(ns.Transform, pskl.tools.Tool);
+
+  ns.Transform.prototype.apply = function (evt) {
+    var allFrames = evt.shiftKey;
+    var allLayers = evt.ctrlKey;
+    this.applyTool_(evt.altKey, allFrames, allLayers);
+  };
+
+  ns.Transform.prototype.applyTool_ = function (altKey, allFrames, allLayers) {
+    var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
+    var layers = allLayers ? pskl.app.piskelController.getLayers(): [pskl.app.piskelController.getCurrentLayer()];
+    layers.forEach(function (layer) {
+      var frames = allFrames ? layer.getFrames(): [layer.getFrameAt(currentFrameIndex)];
+      frames.forEach(function (frame) {
+        this.applyToolOnFrame_(frame, altKey);
+      }.bind(this));
+    }.bind(this));
+    $.publish(Events.PISKEL_RESET);
+    $.publish(Events.PISKEL_SAVE_STATE, {
+      type : pskl.service.HistoryService.SNAPSHOT
+    });
+  };
+
+})();

src/piskel-script-list.js

@@ -162,7 +162,9 @@
   "js/tools/drawing/selection/ShapeSelect.js",
   "js/tools/drawing/ColorPicker.js",
   "js/tools/drawing/ColorSwap.js",
+  "js/tools/transform/Transform.js",
   "js/tools/transform/Flip.js",
+  "js/tools/transform/Rotate.js",
 
   // Devtools
   "js/devtools/DrawingTestPlayer.js",