Add ability to rotate sprites other than 90 degree angles

CONTRIBUTING.md

@@ -0,0 +1,19 @@
+**This is a first draft not written by the original software developer!!!**
+It contains information that I (the contributor) wish I knew before trying to contribute.
+
+# Adding new tools and transforms
+Drawing Tools sit on the left of the GUI and Transformation tools sit on the right. There are 3 things you need to update when adding a tool or transformation: (I used this commit as a template: a9e22535d65e34f4e9279f1f2748c8cbbc56cbdb )
+
+## For Transforms
+
+1. Create a javascript file for your transform `src/js/tools/transform/<TOOL_FILENAME>.js`
+  - (optional) if needed, you can add utility functions for you new transform into `src/js/tools/transform/TransformUtils.js`
+2.  Add icon images to src/img/icons/transform . You will need to add two images:
+  - A small icon, 46x46, called tool-<TOOLNAME>.png
+  - A large icon, 92x92, called tool-<TOOLNAME>@2x.png
+2. Edit src/js/controller/TransformationsController.js . Add `new pskl.tools.transform.<TOOL_FILENAME>.js(),` to   ns.TransformationsController  .
+3. Add your transform file to the script list: `src/piskel-script-list.js`
+
+
+## For Tools
+Look at transforms, but use "tools" or "drawing" for file paths instead of "transform"

src/css/font-icon.css

@@ -43,6 +43,14 @@
   content: "\e604";
 }
 
+.piskel-icon-rotate-nearest-neighborleft:before {
+  content: "\e603";
+}
+
+.piskel-icon-rotate-nearest-neighborright:before {
+  content: "\e604";
+}
+
 .piskel-icon-fliph:before {
   content: "\e605";
 }

src/js/controller/TransformationsController.js

@@ -6,6 +6,7 @@
     this.tools = [
       new pskl.tools.transform.Flip(),
       new pskl.tools.transform.Rotate(),
+	  new pskl.tools.transform.RotateNearestNeighbor(), 
       new pskl.tools.transform.Clone(),
       new pskl.tools.transform.Center(),
       new pskl.tools.transform.Crop(),

src/js/tools/transform/RotateNearestNeighbor.js

@@ -0,0 +1,61 @@
+(function () {
+  var ns = $.namespace('pskl.tools.transform');
+
+  ns.RotateNearestNeighbor = function () {
+    this.toolId = 'tool-rotate-nearest-neighbor';
+    this.helpText = '(New!) Rotate to any angle using nearest neighbor interpolation';
+    this.angle = 90; // Default rotation step in degrees
+    this.tooltipDescriptors = [
+      {key : 'alt', description : 'Set Angle'},
+      {key : 'ctrl', description : 'Apply to all layers'},
+      {key : 'shift', description : 'Apply to all frames'}];
+  };
+
+
+  pskl.utils.inherit(ns.RotateNearestNeighbor, ns.AbstractTransformTool);
+
+
+  // Method to change the value of the re-assignable variable
+  ns.RotateNearestNeighbor.prototype.setAngle = function (newAngle) {
+    this.angle = newAngle;
+  };
+
+
+  // overload applyTransformation so undo/redo and setting angle work properly
+  ns.RotateNearestNeighbor.prototype.applyTransformation = function (evt) {
+    var allFrames = evt.shiftKey;
+    var allLayers = pskl.utils.UserAgent.isMac ?  evt.metaKey : evt.ctrlKey;
+
+	// if altKey then set set angle
+	if (evt.altKey) {
+      var angleInput = prompt("Enter rotation angle in degrees [-360, 360]");
+	  var angle = parseFloat(angleInput);
+	  this.setAngle(angle); // Update the angle
+    }
+
+    this.applyTool_(evt.altKey, allFrames, allLayers); // apply tool as usual
+
+    $.publish(Events.PISKEL_RESET);
+
+    this.raiseSaveStateEvent({
+      altKey : evt.altKey, // not needed?
+      allFrames : allFrames,
+      allLayers : allLayers,
+	  angle : this.angle, // Include the angle in the saved state
+    });
+  };
+
+
+  ns.RotateNearestNeighbor.prototype.applyToolOnFrame_ = function (frame, altKey) {
+	// we don't want a dialog when we undo/redo so altKey isn't used
+	// perform rotation
+	ns.TransformUtils.rotateNearestNeighbor(frame, this.angle);
+  };
+
+
+  // overload replay for undo/redo to work properly
+  ns.RotateNearestNeighbor.prototype.replay = function (frame, replayData) {
+    ns.TransformUtils.rotateNearestNeighbor(frame, replayData.angle);
+  };
+
+})();

src/js/tools/transform/TransformUtils.js

@@ -64,6 +64,62 @@
       return frame;
     },
 
+
+    rotateNearestNeighbor: function (frame, angle) {
+	  /**
+      * Rotates frame(s) using Nearest Neighbor interpolation.
+	  * Use 'alt' to set the angle in degrees. CCW is positive.
+	  *
+	  * Following the lead of the original rotation function, 
+	  * (_x,_y) is the pixel we want to SET
+	  * ( x, y) is the pixel that rotates TO (_x,_y)
+      **/
+
+	  angle = angle * (Math.PI/180); // convert degrees to radians
+
+	  var clone = frame.clone();
+      var w = frame.getWidth();
+      var h = frame.getHeight();
+
+	  // find center of frame
+	  var centerX = Math.floor(w / 2);
+	  var centerY = Math.floor(h / 2);
+
+	  var cosA = Math.cos(angle);
+	  var sinA = Math.sin(angle);
+
+	  // for each pixel in the new image, find the old pixel location we rotated FROM
+	  frame.forEachPixel(function (color, x, y) {
+
+	    // store the pixel we want to find the value of
+	    var _x = x;
+        var _y = y;
+
+		//// Find the pixel that rotates TO the position we want to find
+		// Set origin to center of image to for rotation
+		var xshift = x - centerX;
+		var yshift = y - centerY;
+
+		// Apply rotation
+		x = Math.round(xshift * cosA - yshift * sinA);
+		y = Math.round(xshift * sinA + yshift * cosA);
+
+		// Convert the coordinates back to the rectangular grid
+        x += centerX;
+        y += centerY;
+
+		// Set pixel value in the rotated frame
+		if (clone.containsPixel(x, y)) { 
+          frame.setPixel(_x, _y, clone.getPixel(x, y));
+        } else {
+          frame.setPixel(_x, _y, Constants.TRANSPARENT_COLOR);
+        }
+	  });
+
+	  return frame;
+	},
+
+
     getBoundaries : function(frames) {
       var minx = +Infinity;
       var miny = +Infinity;

src/piskel-script-list.js

@@ -242,6 +242,7 @@
   "js/tools/transform/Crop.js",
   "js/tools/transform/Flip.js",
   "js/tools/transform/Rotate.js",
+  "js/tools/transform/RotateNearestNeighbor.js",
   "js/tools/transform/TransformUtils.js",
 
   // Devtools