add rotation things

package-lock.json

@@ -5294,6 +5294,11 @@
       "integrity": "sha1-vLQEXI3QU5wTS8FIjN0+dop6nlE=",
       "dev": true
     },
+    "jquery-ui-rotatable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jquery-ui-rotatable/-/jquery-ui-rotatable-1.1.0.tgz",
+      "integrity": "sha512-ThzjlshKMOiof4YtYvIgUnYcBtEZeGwdsIPNKUpamHnFQFGG/YfaeyzSkPCcYHXrJQopGsmEdahmrZ6P7CFNlg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "express": "4.*",
     "formidable": "1.*",
     "fs-extra": "7.*",
+    "jquery-ui-rotatable": "^1.1.0",
     "jsdom": "^14.0.0",
     "pdfjs-dist": "^2.3.200",
     "socket.io": "2.*",

src/js/index.js

@@ -1,6 +1,7 @@
 import "jquery-ui/ui/core";
 import "jquery-ui/ui/widgets/draggable";
 import "jquery-ui/ui/widgets/resizable";
+import "jquery-ui-rotatable/jquery.ui.rotatable"
 import "jquery-ui/themes/base/resizable.css";
 import "../css/main.css";
 

src/js/whiteboard.js

@@ -607,6 +607,27 @@ const whiteboard = {
         _this.mouseOverlay.append(imgDiv);
         imgDiv.draggable();
         imgDiv.resizable();
+        var params = {
+            // Callback fired on rotation start.
+            start: function (event, ui) {
+            },
+            // Callback fired during rotation.
+            rotate: function (event, ui) {
+            },
+            // Callback fired on rotation end.
+            stop: function (event, ui) {
+            },
+            // Set the rotation center
+            rotationCenterOffset: {
+                top: 20,
+                left: 20
+            },
+            transforms: {
+                translate: '(50%, 50%)',
+                scale: '(2)'
+            }
+        };
+        imgDiv.rotatable();
 
         // render newly added icons
         dom.i2svg();