Rotation API

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
     SharedArrayBuffer: 'readonly'
   },
   parserOptions: {
-    ecmaVersion: 5
+    ecmaVersion: 6
   },
   rules: {
     /*

.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion": 6
+}

README.md

@@ -71,6 +71,7 @@ map.whenReady(function() {
 * [editable](#editable)
 * [fullResolutionSrc](#Full-resolution%20download)
 * [mode](#mode)
+* [rotation](#rotation)
 * [selected](#selected)
 * [suppressToolbar](#Suppress-Toolbar)
 
@@ -176,6 +177,20 @@ img = L.distortableImageOverlay('example.jpg', {
 }).addTo(map);
 ```
 
+### Rotation
+
+`rotation` (*optional*, default: {deg: 0, rad: 0}, value: *hash*)
+
+Set the initial rotation angle of your image, in degrees or radians. Set the unit as the key, and the angle as the value.
+
+```js
+img = L.distortableImageOverlay('example.jpg', {
+  rotation: {
+    deg: 180
+  },
+}).addTo(map);
+```
+
 ### Selected
 
 `selected` (*optional*, default: false, value: *boolean*)
@@ -509,6 +524,46 @@ img.setCorners(scaledCorners);
   <ul><li>Returns the center (<a href="http://en.wikipedia.org/wiki/Centroid">centroid</a>) of the image.</li></ul>
 </details>
 
+<details><summary><code><b>getAngle(<i>[unit = 'deg']</i> &#60;string>)</b>: Number</code></summary>
+  <ul>
+    <li>Returns the image's rotation angle in <code>units</code>, or in degrees by default.
+    <li><code>Number</code> will always be >= 0.</li>
+    <li><code>unit</code> (<i>optional</i>, default: 'deg', value: <i>string 'deg'|'rad'</i>) <br>
+  ex.
+<pre>
+img.getAngle();
+img.getAngle('deg');
+img.getAngle('rad');
+</pre></li>
+  </ul>
+</details>
+
+<details><summary><code><b>setAngle(<i>angle</i> &#60;number>, <i>[unit = 'deg']</i> &#60;string>)</b>: this</code></summary>
+  <ul>
+    <li>Sets the image's rotation to <code>angle</code> in <code>units</code>, or in degrees by default.</li>
+    <li><code>unit</code> (<i>optional</i>, default: 'deg', value: <i>string 'deg'|'rad'</i>) <br>
+  ex.
+<pre>
+img.setAngle(180);
+img.setAngle(180, 'deg');
+img.setAngle(Math.PI, 'rad');
+</pre></li>
+  </ul>
+</details>
+
+<details><summary><code><b>rotateBy(<i>angle</i> &#60;number>, <i>[unit = 'deg']</i> &#60;string>)</b>: this</code></summary>
+  <ul>
+    <li>Rotates the image relative to its current angle by <code>angle</code> in <code>units</code>, or in degrees by default.</li>
+    <li><code>unit</code> (<i>optional</i>, default: 'deg', value: <i>string 'deg'|'rad'</i>) <br>
+  ex.
+<pre>
+img.rotateBy(180);
+img.rotateBy(180, 'deg');
+img.rotateBy(Math.PI, 'rad');
+</pre></li>
+  </ul>
+</details>
+
 <details><summary><code><b>scaleBy(<i>factor</i> &#60;number>)</b>: this</code></summary>
   <ul>
     <li>Scales the image by the given factor and calls <code>#setCorners</code>.</li>
@@ -518,10 +573,6 @@ img.setCorners(scaledCorners);
   </ul>
 </details>
 
-<details><summary><code><b>rotateBy(<i>rad</i> &#60;number>)</b>: this</code></summary>
-  <ul><li>Rotates the image by the given radian angle and calls <code>#setCorners</code>.</li></ul>
-</details>
-
 <details><summary><code><b>isSelected()</b>: Boolean</code></summary>
   <ul><li>Returns true if the individual image instance is selected.</li></ul>
 </details>
@@ -691,58 +742,54 @@ These are the defaults:
 
 ```javascript
 var translation = {
-    deleteImage: 'Delete Image',
-    deleteImages: 'Delete Images',
-    distortImage: 'Distort Image',
-    dragImage: 'Drag Image',
-    exportImage: 'Export Image',
-    exportImages: 'Export Images',
-    removeBorder: 'Remove Border',
-    addBorder: 'Add Border',
-    freeRotateImage: 'Free rotate Image',
-    geolocateImage: 'Geolocate Image',
-    lockMode: 'Lock Mode',
-    lockImages: 'Lock Images',
-    makeImageOpaque: 'Make Image Opaque',
-    makeImageTransparent: 'Make Image Transparent',
-    restoreOriginalImageDimensions: 'Restore Original Image Dimensions',
-    rotateImage: 'Rotate Image',
-    scaleImage: 'Scale Image',
-    stackToFront: 'Stack to Front',
-    stackToBack: 'Stack to Back',
-    unlockImages: 'Unlock Images',
-    confirmImageDelete:
-    'Are you sure? This image will be permanently deleted from the map.',
-    confirmImagesDeletes:
-    'images will be permanently deleted from the map. Do you really want to do this?',
+  deleteImage: 'Delete Image',
+  deleteImages: 'Delete Images',
+  distortImage: 'Distort Image',
+  dragImage: 'Drag Image',
+  exportImage: 'Export Image',
+  exportImages: 'Export Images',
+  removeBorder: 'Remove Border',
+  addBorder: 'Add Border',
+  freeRotateImage: 'Free rotate Image',
+  geolocateImage: 'Geolocate Image',
+  lockMode: 'Lock Mode',
+  lockImages: 'Lock Images',
+  makeImageOpaque: 'Make Image Opaque',
+  makeImageTransparent: 'Make Image Transparent',
+  restoreOriginalImageDimensions: 'Restore Original Image Dimensions',
+  rotateImage: 'Rotate Image',
+  scaleImage: 'Scale Image',
+  stackToFront: 'Stack to Front',
+  stackToBack: 'Stack to Back',
+  unlockImages: 'Unlock Images',
+  confirmImageDelete: 'Are you sure? This image will be permanently deleted from the map.',
+  confirmImagesDeletes: 'Are you sure? These images will be permanently deleted from the map.',
 };
 ```
 
 **L.DistortableImageOverlay**
 
-```javascript
+```js
 img = L.distortableImageOverlay('example.jpg', {
-    selected: true,
-    fullResolutionSrc: 'large.jpg',
-    translation: {
-        deleteImage: 'Obriši sliku',
-        distortImage: 'Izobliči sliku',
-        dragImage: 'Pomjeri sliku',
-        // ...
-    }
-}
+  translation: {
+    deleteImage: 'Obriši sliku',
+    distortImage: 'Izobliči sliku',
+    dragImage: 'Pomjeri sliku',
+    // ...
+  },
+}).addTo(map);
 ```
 
 **L.DistortableCollection**
 
 ```javascript
 imgGroup = L.distortableCollection({
-    translation: {
-        deleteImages: 'Obriši slike',
-        exportImages: 'Izvezi slike',
-        // ...
-    }
-})
+  translation: {
+    deleteImages: 'Obriši slike',
+    exportImages: 'Izvezi slike',
+    // ...
+  },
+}).addTo(map);
 ```
 
 ## Contributing

package.json

@@ -1,11 +1,11 @@
 {
   "name": "leaflet-distortableimage",
-  "version": "0.12.6",
+  "version": "0.13.6",
   "description": "Leaflet plugin enabling image overlays to be distorted, stretched, and warped (built for Public Lab's MapKnitter: http://publiclab.org).",
   "scripts": {
     "build": "cross-env NODE_ENV=production grunt build",
     "dev": "npm run build; cross-env NODE_ENV=development webpack-dev-server",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "grunt test",
     "linter": "./node_modules/.bin/eslint ."
   },
   "browserslist": "> 0.2%, IE 9, last 2 versions",
@@ -50,16 +50,16 @@
     "eslint": "^6.4.0",
     "eslint-config-google": "^0.14.0",
     "glob": "^7.1.6",
-    "grunt": "^1.0.3",
+    "grunt": "^1.1.0",
     "grunt-cli": "^1.3.2",
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-jshint": "^2.0.0",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-karma": "^3.0.1",
     "grunt-svg-sprite": "^1.5.0",
     "grunt-svgmin": "^6.0.0",
-    "husky": "^4.2.1",
     "grunt-webpack": "^3.1.3",
+    "husky": "^4.2.1",
     "karma": "^4.3.0",
     "karma-babel-preprocessor": "^8.0.1",
     "karma-coverage": "^2.0.1",