From 8a94293635beb02ffd5691ccd82c05e1ff1f5350 Mon Sep 17 00:00:00 2001
From: raphael <raphael@cloud13.de>
Date: Fri, 22 May 2020 21:25:20 +0200
Subject: [PATCH] fix rotation also add rotation for bg layer images

---
 src/js/main.js       |  3 +++
 src/js/whiteboard.js | 61 ++++++++++++++++++++++++++++++++------------
 2 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/src/js/main.js b/src/js/main.js
index 36a4852..77dc050 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -571,6 +571,9 @@ function initWhiteboard() {
                                         headercolor: "#0082c9",
                                     });
 
+                                    // render newly added icons
+                                    dom.i2svg();
+
                                     showPDFPageAsImage(1);
                                     function showPDFPageAsImage(pageNumber) {
                                         // Fetch the page
diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js
index 8141b17..343a6e8 100644
--- a/src/js/whiteboard.js
+++ b/src/js/whiteboard.js
@@ -118,7 +118,7 @@ const whiteboard = {
         this.ctx = this.canvas.getContext("2d");
         this.oldGCO = this.ctx.globalCompositeOperation;
 
-        $(window).resize(function () {
+        window.addEventListener("resize", function () {
             // Handel resize
             const dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); // Copy the buffer
             _this.canvas.width = $(window).width();
@@ -773,34 +773,39 @@ const whiteboard = {
             imgDiv.remove();
             _this.setTool(oldTool);
         });
+        var rotationAngle = 0;
+        var recoupLeft = 0;
+        var recoupTop = 0;
+        var p = imgDiv.position();
+        var left = 200;
+        var top = 200;
         imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () {
             var draw = $(this).attr("draw");
             _this.imgDragActive = false;
-            _this.refreshCursorAppearance();
+
             var width = imgDiv.width();
             var height = imgDiv.height();
-            var p = imgDiv.position();
-            var left = Math.round(p.left * 100) / 100;
-            var top = Math.round(p.top * 100) / 100;
+
             if (draw == "1") {
                 //draw image to canvas
-                _this.drawImgToCanvas(url, width, height, left, top);
+                _this.drawImgToCanvas(url, width, height, left, top, rotationAngle);
             } else {
                 //Add image to background
-                _this.drawImgToBackground(url, width, height, left, top);
+                _this.drawImgToBackground(url, width, height, left, top, rotationAngle);
             }
             _this.sendFunction({
                 t: "addImgBG",
                 draw: draw,
                 url: url,
-                d: [width, height, left, top],
+                d: [width, height, left, top, rotationAngle],
             });
             _this.drawId++;
             imgDiv.remove();
+            _this.refreshCursorAppearance();
             _this.setTool(oldTool);
         });
         _this.mouseOverlay.append(imgDiv);
-        var recoupLeft, recoupTop;
+
         imgDiv.draggable({
             start: function (event, ui) {
                 var left = parseInt($(this).css("left"), 10);
@@ -814,15 +819,23 @@ const whiteboard = {
                 ui.position.left += recoupLeft;
                 ui.position.top += recoupTop;
             },
+            stop: function (event, ui) {
+                left = ui.position.left;
+                top = ui.position.top;
+            },
         });
         imgDiv.resizable();
         var params = {
             // Callback fired on rotation start.
             start: function (event, ui) {},
             // Callback fired during rotation.
-            rotate: function (event, ui) {},
+            rotate: function (event, ui) {
+                //console.log(ui)
+            },
             // Callback fired on rotation end.
-            stop: function (event, ui) {},
+            stop: function (event, ui) {
+                rotationAngle = ui.angle.current;
+            },
             handle: imgDiv.find(".rotationHandle"),
         };
         imgDiv.rotatable(params);
@@ -830,7 +843,7 @@ const whiteboard = {
         // render newly added icons
         dom.i2svg();
     },
-    drawImgToBackground(url, width, height, left, top) {
+    drawImgToBackground(url, width, height, left, top, rotationAngle) {
         this.imgContainer.append(
             '<img crossorigin="anonymous" style="width:' +
                 width +
@@ -840,7 +853,9 @@ const whiteboard = {
                 top +
                 "px; left:" +
                 left +
-                'px;" src="' +
+                "px; transform: rotate(" +
+                rotationAngle +
+                'rad);" src="' +
                 url +
                 '">'
         );
@@ -953,11 +968,17 @@ const whiteboard = {
             .find(".textContent")
             .css({ color: color });
     },
-    drawImgToCanvas(url, width, height, left, top, doneCallback) {
+    drawImgToCanvas(url, width, height, left, top, rotationAngle, doneCallback) {
         var _this = this;
         var img = document.createElement("img");
         img.onload = function () {
-            _this.ctx.drawImage(img, left, top, width, height);
+            rotationAngle = rotationAngle ? rotationAngle : 0;
+            _this.ctx.save();
+            _this.ctx.translate(left + width / 2, top + height / 2);
+            _this.ctx.rotate(rotationAngle);
+            _this.ctx.drawImage(img, -(width / 2), -(height / 2), width, height);
+            _this.ctx.restore();
+            //_this.ctx.drawImage(img, left, top, width, height);
             if (doneCallback) {
                 doneCallback();
             }
@@ -1111,10 +1132,18 @@ const whiteboard = {
                         data[1],
                         data[2],
                         data[3],
+                        data[4],
                         doneCallback
                     );
                 } else {
-                    _this.drawImgToBackground(content["url"], data[0], data[1], data[2], data[3]);
+                    _this.drawImgToBackground(
+                        content["url"],
+                        data[0],
+                        data[1],
+                        data[2],
+                        data[3],
+                        data[4]
+                    );
                 }
             } else if (tool === "addTextBox") {
                 _this.addTextBox(data[0], data[1], data[2], data[3], data[4]);