add shortcut function and move js libs
This commit is contained in:
raphael
parent
565b5644e5
commit
bdff756704
@ -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
42
public/js/keybinds.js
Normal 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'
|
||||
}
|
||||
14
public/js/libs/keymage.min.js
vendored
Normal file
14
public/js/libs/keymage.min.js
vendored
Normal 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()});
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user