add rotation things

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();