From bdff756704a1ed4beca31452617f0be0d5fcaa31 Mon Sep 17 00:00:00 2001
From: raphael <raphael@cloud13.de>
Date: Tue, 24 Mar 2020 20:22:37 +0100
Subject: [PATCH] add shortcut function and move js libs

---
 public/index.html                            |  19 +-
 public/js/keybinds.js                        |  42 +++
 public/js/{ => libs}/fontawseome5.8.1.min.js |   0
 public/js/{ => libs}/jqColorPicker.min.js    |   0
 public/js/{ => libs}/jquery-3.2.1.min.js     |   0
 public/js/{ => libs}/jquery-ui.min.js        |   0
 public/js/libs/keymage.min.js                |  14 +
 public/js/{ => libs}/socketio2.0.4.min.js    |   0
 public/js/main.js                            | 137 ++++++--
 public/js/whiteboard.js                      | 337 ++++++++++---------
 10 files changed, 362 insertions(+), 187 deletions(-)
 create mode 100644 public/js/keybinds.js
 rename public/js/{ => libs}/fontawseome5.8.1.min.js (100%)
 rename public/js/{ => libs}/jqColorPicker.min.js (100%)
 rename public/js/{ => libs}/jquery-3.2.1.min.js (100%)
 rename public/js/{ => libs}/jquery-ui.min.js (100%)
 create mode 100644 public/js/libs/keymage.min.js
 rename public/js/{ => libs}/socketio2.0.4.min.js (100%)

diff --git a/public/index.html b/public/index.html
index 6a51ddf..bea4e22 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,14 +5,19 @@
 	<title>Whiteboard</title>
 	<meta charset="utf-8" />
 
-	<!--- JS References -!-->
-	<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
-	<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
-	<script type="text/javascript" src="./js/fontawseome5.8.1.min.js"></script>
-	<!--- for dragabbles -!-->
-	<script type="text/javascript" src="./js/socketio2.0.4.min.js"></script>
-	<script type="text/javascript" src="./js/jqColorPicker.min.js"></script>
+	<!--- jquery and dragabbles -!-->
+	<script type="text/javascript" src="./js/libs/jquery-3.2.1.min.js"></script>
+	<script type="text/javascript" src="./js/libs/jquery-ui.min.js"></script>
+	<!--- For icons -!-->
+	<script type="text/javascript" src="./js/libs/fontawseome5.8.1.min.js"></script>
+	<!--- Socket connection -!-->
+	<script type="text/javascript" src="./js/libs/socketio2.0.4.min.js"></script>
+	<!--- Colorpicker -!-->
+	<script type="text/javascript" src="./js/libs/jqColorPicker.min.js"></script>
+	<!--- For keybindings -!-->
+	<script type="text/javascript" src="./js/libs/keymage.min.js"></script>
 
+	<script type="text/javascript" src="./js/keybinds.js"></script>
 	<script type="text/javascript" src="./js/whiteboard.js"></script>
 	<script type="text/javascript" src="./js/main.js"></script>
 
diff --git a/public/js/keybinds.js b/public/js/keybinds.js
new file mode 100644
index 0000000..f2b9c61
--- /dev/null
+++ b/public/js/keybinds.js
@@ -0,0 +1,42 @@
+/* -----------
+ KEYBINDINGS
+----------- */ 
+
+//> defmod is "command" on OS X and "ctrl" elsewhere
+//Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j. 
+
+var keybinds = {
+    // 'key(s)' : 'function',
+    'defmod-shift-z' : 'clearWhiteboard',
+    'defmod-z' : 'undoStep', 
+    'defmod-x' : 'setTool_recSelect',
+    'defmod-m' : 'setTool_mouse',
+    'defmod-p' : 'setTool_pen',
+    'defmod-l' : 'setTool_line',
+    'defmod-r' : 'setTool_rect',
+    'defmod-c' : 'setTool_circle',
+    'defmod-d' : 'switchLineRecCircle',
+    'defmod-a' : 'setTool_text',
+    'defmod-e' : 'setTool_eraser',
+    'defmod-up' : 'thickness_bigger',
+    'defmod-down' : 'thickness_smaller',
+    'shift-c' : 'openColorPicker',
+    'shift-0' : 'setDrawColorBlack',
+    'shift-1' : 'setDrawColorBlue',
+    'shift-2' : 'setDrawColorGreen',
+    'shift-3' : 'setDrawColorYellow',
+    'shift-4' : 'setDrawColorRed',
+    'defmod-s' : 'saveWhiteboardAsImage',
+    'defmod-j' : 'saveWhiteboardAsJson',
+    'defmod-w' : 'uploadWhiteboardToWebDav',
+    'shift-j' : 'uploadJsonToWhiteboard',
+    'shift-s' : 'shareWhiteboard',
+    'tab' : 'hideShowControls',
+    'up' : 'moveDraggableUp',
+    'down' : 'moveDraggableDown',
+    'left' : 'moveDraggableLeft',
+    'right' : 'moveDraggableRight',
+    'enter' : 'dropDraggable',
+    'escape' : 'cancelAllActions',
+    'del' : 'deleteSelection'
+}
\ No newline at end of file
diff --git a/public/js/fontawseome5.8.1.min.js b/public/js/libs/fontawseome5.8.1.min.js
similarity index 100%
rename from public/js/fontawseome5.8.1.min.js
rename to public/js/libs/fontawseome5.8.1.min.js
diff --git a/public/js/jqColorPicker.min.js b/public/js/libs/jqColorPicker.min.js
similarity index 100%
rename from public/js/jqColorPicker.min.js
rename to public/js/libs/jqColorPicker.min.js
diff --git a/public/js/jquery-3.2.1.min.js b/public/js/libs/jquery-3.2.1.min.js
similarity index 100%
rename from public/js/jquery-3.2.1.min.js
rename to public/js/libs/jquery-3.2.1.min.js
diff --git a/public/js/jquery-ui.min.js b/public/js/libs/jquery-ui.min.js
similarity index 100%
rename from public/js/jquery-ui.min.js
rename to public/js/libs/jquery-ui.min.js
diff --git a/public/js/libs/keymage.min.js b/public/js/libs/keymage.min.js
new file mode 100644
index 0000000..8136ffe
--- /dev/null
+++ b/public/js/libs/keymage.min.js
@@ -0,0 +1,14 @@
+/*
+
+ keymage.js - Javascript keyboard bindings handling
+ http://github.com/piranha/keymage
+
+ (c) 2012-2016 Alexander Solovyov under terms of ISC License
+*/
+(function(h,u){h(function(){function h(b){var a=b.split(/-(?!$)/),c=a[a.length-1],e={code:l[c]};if(!e.code)throw'Unknown key "'+c+'" in keystring "'+b+'"';for(var f,d=0;d<a.length-1;d++){c=a[d];f=z[c];if(!f)throw'Unknown modifier "'+c+'" in keystring "'+b+'"';e[f]=!0}return e}function q(b){for(var a="",c=0;c<r.length;c++)b[r[c]]&&(a+=r[c]+"-");return a+=n[b.code]}function A(b){for(var a=[],c=b.split(" "),e=0;e<c.length;e++){var f=h(c[e]),f=q(f);a.push(f)}a.original=b;return a}function B(b){for(var a=
+    {code:b.keyCode},c=0;c<v.length;c++){var e=v[c];b[e]&&(a[e.slice(0,e.length-3)]=!0)}return q(a)}function w(b,a,c){b=b.split(".");var e=s;b=b.concat(a);a=0;for(var f=b.length;a<f;a++){var d=b[a];if(d&&(e=e[d]||(e[d]={}),c&&c._keymage.preventDefault&&(e.preventDefault=!0),a===f-1))return e.handlers||(e.handlers=[])}}function C(b,a,c){w(b,a,c).push(c)}function x(b,a,c){b=w(b,a);c=b.indexOf(c);~c&&b.splice(c,1)}function y(b,a,c,e){if(a===u&&c===u)return function(a,c){return g(b,a,c)};"function"===typeof a&&
+    (e=c,c=a,a=b,b="");a=A(a);return[b,a,c,e]}function g(b,a,c,e){var d=y(b,a,c,e);c=d[2];e=d[3];c._keymage=e||{};c._keymage.original=a;C.apply(null,d);return function(){x.apply(null,d)}}var v=["shiftKey","ctrlKey","altKey","metaKey"],z={shift:"shift",ctrl:"ctrl",control:"ctrl",alt:"alt",option:"alt",win:"meta",cmd:"meta","super":"meta",meta:"meta",defmod:"undefined"!==typeof navigator&&~navigator.userAgent.indexOf("Mac OS X")?"meta":"ctrl"},r=["shift","ctrl","alt","meta"],D=[16,17,18,91],l={backspace:8,
+    tab:9,enter:13,"return":13,pause:19,caps:20,capslock:20,escape:27,esc:27,space:32,pgup:33,pageup:33,pgdown:34,pagedown:34,end:35,home:36,ins:45,insert:45,del:46,"delete":46,left:37,up:38,right:39,down:40,"*":106,"+":107,plus:107,minus:109,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},d;for(d=0;10>d;d++)l["num-"+d]=d+95;for(d=0;10>d;d++)l[""+d]=d+48;for(d=1;25>d;d++)l["f"+d]=d+111;for(d=65;91>d;d++)l[String.fromCharCode(d).toLowerCase()]=d;var n={},p;for(p in l)if(d=
+    l[p],!n[d]||n[d].length<p.length)n[d]=p;var k="",s={},t=[];g.unbind=function(b,a,c){b=y(b,a,c);x.apply(null,b)};g.parse=h;g.stringify=q;g.bindings=s;g.setScope=function(b){k=b?b:""};g.getScope=function(){return k};g.pushScope=function(b){return k=(k?k+".":"")+b};g.popScope=function(b){var a;if(!b)return a=k.lastIndexOf("."),b=k.slice(a+1),k=-1==a?"":k.slice(0,a),b;k=k.replace(RegExp("(^|\\.)"+b+"(\\.|$).*"),"");return b};g.version="1.1.3";window.addEventListener("keydown",function(b){if(!~D.indexOf(b.keyCode)){var a=
+    t.slice();a.push(B(b));for(var c=k.split("."),d,f,g,m=c.length;0<=m;m--){f=s;g=c.slice(0,m);for(var h=0;h<g.length;h++){var l=g[h];l&&(f=f[l]);if(!f)break}if(f){d=!0;for(h=0;h<a.length;h++){g=a[h];if(!f[g]){d=!1;break}f=f[g]}if(d)break}}c=c.slice(0,m).join(".");g=f.preventDefault;if(d&&!f.handlers)t=a,g&&b.preventDefault();else{if(d)for(m=0;m<f.handlers.length;m++)a=f.handlers[m],d=a._keymage,(!1===a.call(d.context,b,{shortcut:d.original,scope:k,definitionScope:c})||g)&&b.preventDefault();t=[]}}},
+    !1);return g})})("undefined"!==typeof define?define:function(h){"undefined"!==typeof module?module.exports=h():window.keymage=h()});    
\ No newline at end of file
diff --git a/public/js/socketio2.0.4.min.js b/public/js/libs/socketio2.0.4.min.js
similarity index 100%
rename from public/js/socketio2.0.4.min.js
rename to public/js/libs/socketio2.0.4.min.js
diff --git a/public/js/main.js b/public/js/main.js
index a26c6f3..45252c7 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -48,7 +48,6 @@ $(document).ready(function () {
     if (getQueryVariable("webdav") == "true") {
         $("#uploadWebDavBtn").show();
     }
-    console.log(myUsername)
     whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
         whiteboardId: whiteboardId,
         username: btoa(myUsername),
@@ -73,32 +72,123 @@ $(document).ready(function () {
 
     //Handle key actions
     $(document).on("keydown", function (e) {
-        if (e.which == 17) {
-            whiteboard.pressedKeys["strg"] = true;
-        } else if (e.which == 90) { //z key
-            if (whiteboard.pressedKeys["strg"] && !whiteboard.pressedKeys["z"]) {
-                whiteboard.undoWhiteboardClick();
-            }
-            whiteboard.pressedKeys["z"] = true;
-        } else if (e.which == 16) {
+        if (e.which == 16) {
             whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
-        } else if (e.which == 27) { //Esc
-            whiteboard.escKeyAction();
-        } else if (e.which == 46) { //Remove / Entf
-            whiteboard.entfKeyAction();
         }
         //console.log(e.which);
     });
     $(document).on("keyup", function (e) {
-        if (e.which == 17) {
-            whiteboard.pressedKeys["strg"] = false;
-        } else if (e.which == 90) {
-            whiteboard.pressedKeys["z"] = false;
-        } else if (e.which == 16) {
+        if (e.which == 16) {
             whiteboard.pressedKeys["shift"] = false;
         }
     });
 
+    var shortcutFunctions = {
+        clearWhiteboard: function () { whiteboard.clearWhiteboard(); },
+        undoStep: function () { whiteboard.undoWhiteboardClick(); },
+        setTool_mouse: function () { $(".whiteboardTool[tool=mouse]").click(); },
+        setTool_recSelect: function () { $(".whiteboardTool[tool=recSelect]").click(); },
+        setTool_pen: function () {
+            $(".whiteboardTool[tool=pen]").click();
+            whiteboard.redrawMouseCursor();
+        },
+        setTool_line: function () { $(".whiteboardTool[tool=line]").click(); },
+        setTool_rect: function () { $(".whiteboardTool[tool=rect]").click(); },
+        setTool_circle: function () { $(".whiteboardTool[tool=circle]").click(); },
+        setTool_text: function () { $(".whiteboardTool[tool=text]").click(); },
+        setTool_eraser: function () {
+            $(".whiteboardTool[tool=eraser]").click();
+            whiteboard.redrawMouseCursor();
+        },
+        thickness_bigger: function () {
+            var thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
+            $("#whiteboardThicknessSlider").val(thickness);
+            whiteboard.setStrokeThickness(thickness);
+            whiteboard.redrawMouseCursor();
+        },
+        thickness_smaller: function () {
+            var thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
+            $("#whiteboardThicknessSlider").val(thickness);
+            whiteboard.setStrokeThickness(thickness);
+            whiteboard.redrawMouseCursor();
+        },
+        openColorPicker: function () { $("#whiteboardColorpicker").click(); },
+        saveWhiteboardAsImage: function () { $("#saveAsImageBtn").click(); },
+        saveWhiteboardAsJson: function () { $("#saveAsImageBtn").click(); },
+        uploadWhiteboardToWebDav: function () { $("#uploadWebDavBtn").click(); },
+        uploadJsonToWhiteboard: function () { $("#uploadJsonBtn").click(); },
+        shareWhiteboard: function () { $("#shareWhiteboardBtn").click(); },
+        hideShowControls: function () { $("#minMaxBtn").click(); },
+
+        setDrawColorBlack: function () {
+            whiteboard.setDrawColor("black");
+            whiteboard.redrawMouseCursor();
+            $("#whiteboardColorpicker").css({ "background": "black" });
+        },
+        setDrawColorRed: function () {
+            whiteboard.setDrawColor("red");
+            whiteboard.redrawMouseCursor();
+            $("#whiteboardColorpicker").css({ "background": "red" });
+        },
+        setDrawColorGreen: function () {
+            whiteboard.setDrawColor("green");
+            whiteboard.redrawMouseCursor();
+            $("#whiteboardColorpicker").css({ "background": "green" });
+        },
+        setDrawColorBlue: function () {
+            whiteboard.setDrawColor("blue");
+            whiteboard.redrawMouseCursor();
+            $("#whiteboardColorpicker").css({ "background": "blue" });
+        },
+        setDrawColorYellow: function () {
+            whiteboard.setDrawColor("yellow");
+            whiteboard.redrawMouseCursor();
+            $("#whiteboardColorpicker").css({ "background": "yellow" });
+        },
+
+        switchLineRecCircle: function () {
+            var activeTool = $(".whiteboardTool.active").attr("tool");
+            if (activeTool == "line") {
+                $(".whiteboardTool[tool=rect]").click();
+            } else if (activeTool == "rect") {
+                $(".whiteboardTool[tool=circle]").click();
+            } else {
+                $(".whiteboardTool[tool=line]").click();
+            }
+        },
+
+        moveDraggableUp: function () {
+            var p = $($(".ui-draggable")[0]).position();
+            $($(".ui-draggable")[0]).css({ top: p.top - 5, left: p.left })
+        },
+        moveDraggableDown: function () {
+            var p = $($(".ui-draggable")[0]).position();
+            $($(".ui-draggable")[0]).css({ top: p.top + 5, left: p.left })
+        },
+        moveDraggableLeft: function () {
+            var p = $($(".ui-draggable")[0]).position();
+            $($(".ui-draggable")[0]).css({ top: p.top, left: p.left - 5 })
+        },
+        moveDraggableRight: function () {
+            var p = $($(".ui-draggable")[0]).position();
+            $($(".ui-draggable")[0]).css({ top: p.top, left: p.left + 5 })
+        },
+        dropDraggable: function () {
+            var p = $($(".ui-draggable")[0]).find('.addToCanvasBtn').click();
+        },
+        cancelAllActions: function () { whiteboard.escKeyAction(); },
+        deleteSelection: function () { whiteboard.delKeyAction(); },
+    }
+
+    //Load keybindings from keybinds.js to given functions
+    for (var i in keybinds) {
+        if (shortcutFunctions[keybinds[i]]) {
+            keymage(i, shortcutFunctions[keybinds[i]], { preventDefault: true });
+        } else {
+            console.error("function you want to keybind on key:", i, "named:", keybinds[i], "is not available!")
+        }
+    }
+
     // whiteboard clear button
     $("#whiteboardTrashBtn").click(function () {
         $("#whiteboardTrashBtnConfirm").show().focus();
@@ -263,7 +353,7 @@ $(document).ready(function () {
         $("<textarea/>").appendTo("body").val(urlStart).select().each(function () {
             document.execCommand('copy');
         }).remove();
-        showBasicAlert("Copied Whiteboard-URL to clipboard.")
+        showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 })
     });
 
     var btnsMini = false;
@@ -278,7 +368,6 @@ $(document).ready(function () {
             $(this).find("#maxBtn").hide();
         }
         btnsMini = !btnsMini;
-
     })
 
     // load json to whiteboard
@@ -503,7 +592,8 @@ function showBasicAlert(html, newOptions) {
     var options = {
         header: "INFO MESSAGE",
         okBtnText: "Ok",
-        headercolor: "#d25d5d"
+        headercolor: "#d25d5d",
+        hideAfter: false
     }
     if (newOptions) {
         for (var i in newOptions) {
@@ -522,6 +612,11 @@ function showBasicAlert(html, newOptions) {
     alertHtml.find(".okbtn").click(function () {
         alertHtml.remove();
     })
+    if (options.hideAfter) {
+        setTimeout(function () {
+            alertHtml.find(".okbtn").click();
+        }, 1000 * options.hideAfter)
+    }
 }
 
 // get 'GET' parameter by variable name
diff --git a/public/js/whiteboard.js b/public/js/whiteboard.js
index dad81d4..3b48ec2 100644
--- a/public/js/whiteboard.js
+++ b/public/js/whiteboard.js
@@ -18,6 +18,10 @@ var whiteboard = {
     svgContainer: null, //For draw prev
     mouseOverlay: null,
     ownCursor: null,
+    startCoords: [],
+    svgLine: null,
+    svgRect: null,
+    svgCirle: null,
     drawBuffer: [],
     drawId: 0, //Used for undo function
     imgDragActive: false,
@@ -38,10 +42,6 @@ var whiteboard = {
         this.settings["username"] = this.settings["username"].replace(/[^0-9a-z]/gi, '');
         this.settings["whiteboardId"] = this.settings["whiteboardId"].replace(/[^0-9a-z]/gi, '');
 
-        var startCoords = [];
-        var svgLine = null;
-        var svgRect = null;
-        var svgCirle = null;
         //background grid (repeating image) and smallest screen indication
         _this.backgroundGrid = $('<div style="position: absolute; left:0px; top:0; opacity: 0.2; background-image:url(\'' + _this.settings["backgroundGridUrl"] + '\'); height: 100%; width: 100%;"></div>');
         // container for background images
@@ -103,37 +103,37 @@ var whiteboard = {
                 _this.drawEraserLine(_this.prevX, _this.prevY, _this.prevX, _this.prevY, _this.thickness);
                 _this.sendFunction({ "t": _this.tool, "d": [_this.prevX, _this.prevY, _this.prevX, _this.prevY], "th": _this.thickness });
             } else if (_this.tool === "line") {
-                startCoords = [_this.prevX, _this.prevY];
-                svgLine = document.createElementNS(svgns, 'line');
-                svgLine.setAttribute('stroke', 'gray');
-                svgLine.setAttribute('stroke-dasharray', '5, 5');
-                svgLine.setAttribute('x1', _this.prevX);
-                svgLine.setAttribute('y1', _this.prevY);
-                svgLine.setAttribute('x2', _this.prevX);
-                svgLine.setAttribute('y2', _this.prevY);
-                _this.svgContainer.append(svgLine);
+                _this.startCoords = [_this.prevX, _this.prevY];
+                _this.svgLine = document.createElementNS(svgns, 'line');
+                _this.svgLine.setAttribute('stroke', 'gray');
+                _this.svgLine.setAttribute('stroke-dasharray', '5, 5');
+                _this.svgLine.setAttribute('x1', _this.prevX);
+                _this.svgLine.setAttribute('y1', _this.prevY);
+                _this.svgLine.setAttribute('x2', _this.prevX);
+                _this.svgLine.setAttribute('y2', _this.prevY);
+                _this.svgContainer.append(_this.svgLine);
             } else if (_this.tool === "rect" || _this.tool === "recSelect") {
                 _this.svgContainer.find("rect").remove();
-                svgRect = document.createElementNS(svgns, 'rect');
-                svgRect.setAttribute('stroke', 'gray');
-                svgRect.setAttribute('stroke-dasharray', '5, 5');
-                svgRect.setAttribute('style', 'fill-opacity:0.0;');
-                svgRect.setAttribute('x', _this.prevX);
-                svgRect.setAttribute('y', _this.prevY);
-                svgRect.setAttribute('width', 0);
-                svgRect.setAttribute('height', 0);
-                _this.svgContainer.append(svgRect);
-                startCoords = [_this.prevX, _this.prevY];
+                _this.svgRect = document.createElementNS(svgns, 'rect');
+                _this.svgRect.setAttribute('stroke', 'gray');
+                _this.svgRect.setAttribute('stroke-dasharray', '5, 5');
+                _this.svgRect.setAttribute('style', 'fill-opacity:0.0;');
+                _this.svgRect.setAttribute('x', _this.prevX);
+                _this.svgRect.setAttribute('y', _this.prevY);
+                _this.svgRect.setAttribute('width', 0);
+                _this.svgRect.setAttribute('height', 0);
+                _this.svgContainer.append(_this.svgRect);
+                _this.startCoords = [_this.prevX, _this.prevY];
             } else if (_this.tool === "circle") {
-                svgCirle = document.createElementNS(svgns, 'circle');
-                svgCirle.setAttribute('stroke', 'gray');
-                svgCirle.setAttribute('stroke-dasharray', '5, 5');
-                svgCirle.setAttribute('style', 'fill-opacity:0.0;');
-                svgCirle.setAttribute('cx', _this.prevX);
-                svgCirle.setAttribute('cy', _this.prevY);
-                svgCirle.setAttribute('r', 0);
-                _this.svgContainer.append(svgCirle);
-                startCoords = [_this.prevX, _this.prevY];
+                _this.svgCirle = document.createElementNS(svgns, 'circle');
+                _this.svgCirle.setAttribute('stroke', 'gray');
+                _this.svgCirle.setAttribute('stroke-dasharray', '5, 5');
+                _this.svgCirle.setAttribute('style', 'fill-opacity:0.0;');
+                _this.svgCirle.setAttribute('cx', _this.prevX);
+                _this.svgCirle.setAttribute('cy', _this.prevY);
+                _this.svgCirle.setAttribute('r', 0);
+                _this.svgContainer.append(_this.svgCirle);
+                _this.startCoords = [_this.prevX, _this.prevY];
             }
         });
 
@@ -151,79 +151,7 @@ var whiteboard = {
 
         _this.mouseOverlay.on("mousemove touchmove", function (e) {
             e.preventDefault();
-            if (_this.imgDragActive) {
-                return;
-            }
-            var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
-            var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
-            window.requestAnimationFrame(function () {
-                if ((!currX || !currY) && e.touches && e.touches[0]) {
-                    var touche = e.touches[0];
-                    currX = touche.clientX - $(_this.mouseOverlay).offset().left;
-                    currY = touche.clientY - $(_this.mouseOverlay).offset().top;
-                }
-                _this.latestTouchCoods = [currX, currY];
-
-                if (_this.drawFlag) {
-                    if (_this.tool === "pen") {
-                        _this.drawPenLine(currX, currY, _this.prevX, _this.prevY, _this.drawcolor, _this.thickness);
-                        _this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.prevX, _this.prevY], "c": _this.drawcolor, "th": _this.thickness });
-                    } else if (_this.tool == "eraser") {
-                        _this.drawEraserLine(currX, currY, _this.prevX, _this.prevY, _this.thickness);
-                        _this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.prevX, _this.prevY], "th": _this.thickness });
-                    }
-                    _this.prevX = currX;
-                    _this.prevY = currY;
-                }
-
-                if (_this.tool === "eraser") {
-                    var left = currX - _this.thickness;
-                    var top = currY - _this.thickness;
-                    if (_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" });
-                } else if (_this.tool === "pen") {
-                    var left = currX - _this.thickness / 2;
-                    var top = currY - _this.thickness / 2;
-                    if (_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" });
-                } else if (_this.tool === "line") {
-                    if (svgLine) {
-                        if (_this.pressedKeys.shift) {
-                            var angs = getRoundedAngles(currX, currY);
-                            currX = angs.x;
-                            currY = angs.y;
-                        }
-                        svgLine.setAttribute('x2', currX);
-                        svgLine.setAttribute('y2', currY);
-                    }
-                } else if (_this.tool === "rect" || (_this.tool === "recSelect" && _this.drawFlag)) {
-                    if (svgRect) {
-                        var width = Math.abs(currX - startCoords[0]);
-                        var height = Math.abs(currY - startCoords[1]);
-                        if (_this.pressedKeys.shift) {
-                            height = width;
-                            var x = currX < startCoords[0] ? startCoords[0] - width : startCoords[0];
-                            var y = currY < startCoords[1] ? startCoords[1] - width : startCoords[1];
-                            svgRect.setAttribute('x', x);
-                            svgRect.setAttribute('y', y);
-                        } else {
-                            var x = currX < startCoords[0] ? currX : startCoords[0];
-                            var y = currY < startCoords[1] ? currY : startCoords[1];
-                            svgRect.setAttribute('x', x);
-                            svgRect.setAttribute('y', y);
-                        }
-
-                        svgRect.setAttribute('width', width);
-                        svgRect.setAttribute('height', height);
-                    }
-                } else if (_this.tool === "circle") {
-                    var a = currX - startCoords[0];
-                    var b = currY - startCoords[1];
-                    var r = Math.sqrt(a * a + b * b);
-                    if (svgCirle) {
-                        svgCirle.setAttribute('r', r);
-                    }
-                }
-            });
-            _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
+            _this.triggerMouseMove(e);
         });
 
         _this.mouseOverlay.on("mouseup touchend touchcancel", function (e) {
@@ -248,41 +176,41 @@ var whiteboard = {
                     currX = angs.x;
                     currY = angs.y;
                 }
-                _this.drawPenLine(currX, currY, startCoords[0], startCoords[1], _this.drawcolor, _this.thickness);
-                _this.sendFunction({ "t": _this.tool, "d": [currX, currY, startCoords[0], startCoords[1]], "c": _this.drawcolor, "th": _this.thickness });
+                _this.drawPenLine(currX, currY, _this.startCoords[0], _this.startCoords[1], _this.drawcolor, _this.thickness);
+                _this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.startCoords[0], _this.startCoords[1]], "c": _this.drawcolor, "th": _this.thickness });
                 _this.svgContainer.find("line").remove();
             } else if (_this.tool === "rect") {
                 if (_this.pressedKeys.shift) {
-                    if ((currY - startCoords[1]) * (currX - startCoords[0]) > 0) {
-                        currY = startCoords[1] + (currX - startCoords[0]);
+                    if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) {
+                        currY = _this.startCoords[1] + (currX - _this.startCoords[0]);
                     } else {
-                        currY = startCoords[1] - (currX - startCoords[0]);
+                        currY = _this.startCoords[1] - (currX - _this.startCoords[0]);
                     }
                 }
-                _this.drawRec(startCoords[0], startCoords[1], currX, currY, _this.drawcolor, _this.thickness);
-                _this.sendFunction({ "t": _this.tool, "d": [startCoords[0], startCoords[1], currX, currY], "c": _this.drawcolor, "th": _this.thickness });
+                _this.drawRec(_this.startCoords[0], _this.startCoords[1], currX, currY, _this.drawcolor, _this.thickness);
+                _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords[0], _this.startCoords[1], currX, currY], "c": _this.drawcolor, "th": _this.thickness });
                 _this.svgContainer.find("rect").remove();
             } else if (_this.tool === "circle") {
-                var a = currX - startCoords[0];
-                var b = currY - startCoords[1];
+                var a = currX - _this.startCoords[0];
+                var b = currY - _this.startCoords[1];
                 var r = Math.sqrt(a * a + b * b);
-                _this.drawCircle(startCoords[0], startCoords[1], r, _this.drawcolor, _this.thickness);
-                _this.sendFunction({ "t": _this.tool, "d": [startCoords[0], startCoords[1], r], "c": _this.drawcolor, "th": _this.thickness });
+                _this.drawCircle(_this.startCoords[0], _this.startCoords[1], r, _this.drawcolor, _this.thickness);
+                _this.sendFunction({ "t": _this.tool, "d": [_this.startCoords[0], _this.startCoords[1], r], "c": _this.drawcolor, "th": _this.thickness });
                 _this.svgContainer.find("circle").remove();
             } else if (_this.tool === "recSelect") {
                 _this.imgDragActive = true;
                 if (_this.pressedKeys.shift) {
-                    if ((currY - startCoords[1]) * (currX - startCoords[0]) > 0) {
-                        currY = startCoords[1] + (currX - startCoords[0]);
+                    if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) {
+                        currY = _this.startCoords[1] + (currX - _this.startCoords[0]);
                     } else {
-                        currY = startCoords[1] - (currX - startCoords[0]);
+                        currY = _this.startCoords[1] - (currX - _this.startCoords[0]);
                     }
                 }
 
-                var width = Math.abs(startCoords[0] - currX);
-                var height = Math.abs(startCoords[1] - currY);
-                var left = startCoords[0] < currX ? startCoords[0] : currX;
-                var top = startCoords[1] < currY ? startCoords[1] : currY;
+                var width = Math.abs(_this.startCoords[0] - currX);
+                var height = Math.abs(_this.startCoords[1] - currY);
+                var left = _this.startCoords[0] < currX ? _this.startCoords[0] : currX;
+                var top = _this.startCoords[1] < currY ? _this.startCoords[1] : currY;
                 _this.mouseOverlay.css({ "cursor": "default" });
                 var imgDiv = $('<div style="position:absolute; left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; border: 2px dotted gray; overflow: hidden; height:' + height + 'px;" cursor:move;">' +
                     '<canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="' + width + '" height="' + height + '"/>' +
@@ -322,36 +250,11 @@ var whiteboard = {
         });
 
         _this.mouseOverlay.on("mouseout", function (e) {
-            if (_this.imgDragActive) {
-                return;
-            }
-            _this.drawFlag = false;
-            _this.mouseover = false;
-            _this.ctx.globalCompositeOperation = _this.oldGCO;
-            if (_this.ownCursor) _this.ownCursor.remove();
-            _this.svgContainer.find("line").remove();
-            _this.svgContainer.find("rect").remove();
-            _this.svgContainer.find("circle").remove();
-            _this.sendFunction({ "t": "cursor", "event": "out" });
+            _this.triggerMouseOut();
         });
 
         _this.mouseOverlay.on("mouseover", function (e) {
-            if (_this.imgDragActive) {
-                return;
-            }
-            if (!_this.mouseover) {
-                var color = _this.drawcolor;
-                var widthHeight = _this.thickness;
-                if (_this.tool === "eraser") {
-                    color = "#00000000";
-                    widthHeight = widthHeight * 2;
-                }
-                if (_this.tool === "eraser" || _this.tool === "pen") {
-                    _this.ownCursor = $('<div id="ownCursor" style="background:' + color + '; border:1px solid gray; position:absolute; width:' + widthHeight + 'px; height:' + widthHeight + 'px; border-radius:50%;"></div>');
-                    _this.cursorContainer.append(_this.ownCursor);
-                }
-            }
-            _this.mouseover = true;
+            _this.triggerMouseOver();
         });
 
         //On textcontainer click (Add a new textbox)
@@ -365,27 +268,142 @@ var whiteboard = {
         });
 
         function getRoundedAngles(currX, currY) { //For drawing lines at 0,45,90° ....
-            var x = currX - startCoords[0];
-            var y = currY - startCoords[1];
+            var x = currX - _this.startCoords[0];
+            var y = currY - _this.startCoords[1];
             var angle = Math.atan2(x, y) * (180 / Math.PI);
             var angle45 = Math.round(angle / 45) * 45;
             if (angle45 % 90 == 0) {
-                if (Math.abs(currX - startCoords[0]) > Math.abs(currY - startCoords[1])) {
-                    currY = startCoords[1]
+                if (Math.abs(currX - _this.startCoords[0]) > Math.abs(currY - _this.startCoords[1])) {
+                    currY = _this.startCoords[1]
                 } else {
-                    currX = startCoords[0]
+                    currX = _this.startCoords[0]
                 }
             } else {
-                if ((currY - startCoords[1]) * (currX - startCoords[0]) > 0) {
-                    currX = startCoords[0] + (currY - startCoords[1]);
+                if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) {
+                    currX = _this.startCoords[0] + (currY - _this.startCoords[1]);
                 } else {
-                    currX = startCoords[0] - (currY - startCoords[1]);
+                    currX = _this.startCoords[0] - (currY - _this.startCoords[1]);
                 }
             }
             return { "x": currX, "y": currY };
         }
     },
-    entfKeyAction: function () {
+    triggerMouseMove: function (e) {
+        var _this = this;
+        if (_this.imgDragActive) {
+            return;
+        }
+        var currX = e.currX || (e.offsetX || e.pageX - $(e.target).offset().left);
+        var currY = e.currY || (e.offsetY || e.pageY - $(e.target).offset().top);
+        window.requestAnimationFrame(function () {
+            if ((!currX || !currY) && e.touches && e.touches[0]) {
+                var touche = e.touches[0];
+                currX = touche.clientX - $(_this.mouseOverlay).offset().left;
+                currY = touche.clientY - $(_this.mouseOverlay).offset().top;
+            }
+            _this.latestTouchCoods = [currX, currY];
+
+            if (_this.drawFlag) {
+                if (_this.tool === "pen") {
+                    _this.drawPenLine(currX, currY, _this.prevX, _this.prevY, _this.drawcolor, _this.thickness);
+                    _this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.prevX, _this.prevY], "c": _this.drawcolor, "th": _this.thickness });
+                } else if (_this.tool == "eraser") {
+                    _this.drawEraserLine(currX, currY, _this.prevX, _this.prevY, _this.thickness);
+                    _this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.prevX, _this.prevY], "th": _this.thickness });
+                }
+            }
+
+            if (_this.tool === "eraser") {
+                var left = currX - _this.thickness;
+                var top = currY - _this.thickness;
+                if (_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" });
+            } else if (_this.tool === "pen") {
+                var left = currX - _this.thickness / 2;
+                var top = currY - _this.thickness / 2;
+                if (_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" });
+            } else if (_this.tool === "line") {
+                if (_this.svgLine) {
+                    if (_this.pressedKeys.shift) {
+                        var angs = getRoundedAngles(currX, currY);
+                        currX = angs.x;
+                        currY = angs.y;
+                    }
+                    _this.svgLine.setAttribute('x2', currX);
+                    _this.svgLine.setAttribute('y2', currY);
+                }
+            } else if (_this.tool === "rect" || (_this.tool === "recSelect" && _this.drawFlag)) {
+                if (_this.svgRect) {
+                    var width = Math.abs(currX - _this.startCoords[0]);
+                    var height = Math.abs(currY - _this.startCoords[1]);
+                    if (_this.pressedKeys.shift) {
+                        height = width;
+                        var x = currX < _this.startCoords[0] ? _this.startCoords[0] - width : _this.startCoords[0];
+                        var y = currY < _this.startCoords[1] ? _this.startCoords[1] - width : _this.startCoords[1];
+                        _this.svgRect.setAttribute('x', x);
+                        _this.svgRect.setAttribute('y', y);
+                    } else {
+                        var x = currX < _this.startCoords[0] ? currX : _this.startCoords[0];
+                        var y = currY < _this.startCoords[1] ? currY : _this.startCoords[1];
+                        _this.svgRect.setAttribute('x', x);
+                        _this.svgRect.setAttribute('y', y);
+                    }
+
+                    _this.svgRect.setAttribute('width', width);
+                    _this.svgRect.setAttribute('height', height);
+                }
+            } else if (_this.tool === "circle") {
+                var a = currX - _this.startCoords[0];
+                var b = currY - _this.startCoords[1];
+                var r = Math.sqrt(a * a + b * b);
+                if (_this.svgCirle) {
+                    _this.svgCirle.setAttribute('r', r);
+                }
+            }
+            _this.prevX = currX;
+            _this.prevY = currY;
+        });
+        _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
+    },
+    triggerMouseOver: function () {
+        var _this = this;
+        if (_this.imgDragActive) {
+            return;
+        }
+        if (!_this.mouseover) {
+            var color = _this.drawcolor;
+            var widthHeight = _this.thickness;
+            if (_this.tool === "eraser") {
+                color = "#00000000";
+                widthHeight = widthHeight * 2;
+            }
+            if (_this.tool === "eraser" || _this.tool === "pen") {
+                _this.ownCursor = $('<div id="ownCursor" style="background:' + color + '; border:1px solid gray; position:absolute; width:' + widthHeight + 'px; height:' + widthHeight + 'px; border-radius:50%;"></div>');
+                _this.cursorContainer.append(_this.ownCursor);
+            }
+        }
+        _this.mouseover = true;
+    },
+    triggerMouseOut: function () {
+        var _this = this;
+        if (_this.imgDragActive) {
+            return;
+        }
+        _this.drawFlag = false;
+        _this.mouseover = false;
+        _this.ctx.globalCompositeOperation = _this.oldGCO;
+        if (_this.ownCursor) _this.ownCursor.remove();
+        _this.svgContainer.find("line").remove();
+        _this.svgContainer.find("rect").remove();
+        _this.svgContainer.find("circle").remove();
+        _this.sendFunction({ "t": "cursor", "event": "out" });
+    },
+    redrawMouseCursor: function () {
+        var _this = this;
+        _this.triggerMouseOut();
+        _this.triggerMouseOver();
+        _this.triggerMouseMove({ currX: whiteboard.prevX, currY: whiteboard.prevY });
+    },
+    delKeyAction: function () {
         var _this = this;
         $.each(_this.mouseOverlay.find(".dragOutOverlay"), function () {
             var width = $(this).width();
@@ -398,6 +416,7 @@ var whiteboard = {
             _this.eraseRec(left, top, width, height);
         });
         _this.mouseOverlay.find(".xCanvasBtn").click(); //Remove all current drops
+        _this.textContainer.find("#" + _this.latestActiveTextBoxId).find(".removeIcon").click();
     },
     escKeyAction: function () {
         var _this = this;