WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add shortcut function and move js libs

Browse Source
This commit is contained in:
raphael 2020-03-24 20:22:37 +01:00
parent 565b5644e5
commit bdff756704
10 changed files with 362 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/index.html
View File

@ -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>

42
public/js/keybinds.js Normal file
View File

@ -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'
}

0
public/js/fontawseome5.8.1.min.js → public/js/libs/fontawseome5.8.1.min.js vendored
View File

0
public/js/jqColorPicker.min.js → public/js/libs/jqColorPicker.min.js vendored
View File

0
public/js/jquery-3.2.1.min.js → public/js/libs/jquery-3.2.1.min.js vendored
View File

0
public/js/jquery-ui.min.js → public/js/libs/jquery-ui.min.js vendored
View File

14
public/js/libs/keymage.min.js vendored Normal file
View File

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

0
public/js/socketio2.0.4.min.js → public/js/libs/socketio2.0.4.min.js vendored
View File

137
public/js/main.js
View File

@ -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

353
public/js/whiteboard.js
View File

@ -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,20 +250,122 @@ 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) {
_this.triggerMouseOver();
});
//On textcontainer click (Add a new textbox)
_this.textContainer.on("click", function (e) {
currX = (e.offsetX || e.pageX - $(e.target).offset().left);
currY = (e.offsetY || e.pageY - $(e.target).offset().top);
var fontsize = _this.thickness * 0.5;
var txId = 'tx' + (+new Date());
_this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] });
_this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true);
});
function getRoundedAngles(currX, currY) { //For drawing lines at 0,45,90° ....
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 - _this.startCoords[0]) > Math.abs(currY - _this.startCoords[1])) {
currY = _this.startCoords[1]
} else {
currX = _this.startCoords[0]
}
} else {
if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) {
currX = _this.startCoords[0] + (currY - _this.startCoords[1]);
} else {
currX = _this.startCoords[0] - (currY - _this.startCoords[1]);
}
}
return { "x": currX, "y": currY };
}
},
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;
}
@ -352,40 +382,28 @@ var whiteboard = {
}
}
_this.mouseover = true;
});
//On textcontainer click (Add a new textbox)
_this.textContainer.on("click", function (e) {
currX = (e.offsetX || e.pageX - $(e.target).offset().left);
currY = (e.offsetY || e.pageY - $(e.target).offset().top);
var fontsize = _this.thickness * 0.5;
var txId = 'tx' + (+new Date());
_this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] });
_this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true);
});
function getRoundedAngles(currX, currY) { //For drawing lines at 0,45,90° ....
var x = currX - startCoords[0];
var y = currY - 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]
} else {
currX = startCoords[0]
}
} else {
if ((currY - startCoords[1]) * (currX - startCoords[0]) > 0) {
currX = startCoords[0] + (currY - startCoords[1]);
} else {
currX = startCoords[0] - (currY - startCoords[1]);
}
}
return { "x": currX, "y": currY };
}
},
entfKeyAction: function () {
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;