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

fix touch bugs on mobile devices

Browse Source
This commit is contained in:
cracker0dks 2020-02-18 19:46:03 +01:00
parent e492976701
commit 5dca96cbd3
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/index.html
View File

@ -5,7 +5,8 @@
<title>Whiteboard</title> <title>Whiteboard</title>
<!--- Set width for Mobile Devices -!--> <!--- Set width for Mobile Devices -!-->
<meta name="viewport" content="width=1200" />
<!--- JS References -!--> <!--- JS References -!-->
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
@ -22,6 +23,15 @@
<link rel="stylesheet" href="./css/jquery-ui.min.css"> <link rel="stylesheet" href="./css/jquery-ui.min.css">
<link href="./css/main.css" rel="stylesheet"> <link href="./css/main.css" rel="stylesheet">
<script>
//Set correct width height on mobile browsers
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if(isChrome) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.52, maximum-scale=1" />');
} else {
$('head').append('<meta name="viewport" content="width=1400" />');
}
</script>
</head> </head>
<body style="position: relative; margin: 0px; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; overflow: hidden;"> <body style="position: relative; margin: 0px; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; overflow: hidden;">

23
public/js/whiteboard.js
View File

@ -6,6 +6,7 @@ var whiteboard = {
thickness: 4, thickness: 4,
prevX: null, prevX: null,
prevY: null, prevY: null,
latestTouchCoods: [],
drawFlag: false, drawFlag: false,
oldGCO: null, oldGCO: null,
mouseover: false, mouseover: false,
@ -43,7 +44,6 @@ var whiteboard = {
var svgLine = null; var svgLine = null;
var svgRect = null; var svgRect = null;
var svgCirle = null; var svgCirle = null;
var latestTouchCoods = null;
//background grid (repeating image) and smallest screen indication //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>'); _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 // container for background images
@ -76,13 +76,14 @@ var whiteboard = {
this.oldGCO = this.ctx.globalCompositeOperation; this.oldGCO = this.ctx.globalCompositeOperation;
$(_this.mouseOverlay).on("mousedown touchstart", function (e) { $(_this.mouseOverlay).on("mousedown touchstart", function (e) {
if (_this.imgDragActive) { if (_this.imgDragActive || _this.drawFlag) {
return; return;
} }
_this.drawFlag = true; _this.drawFlag = true;
_this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1; _this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1;
_this.prevY = (e.offsetY || e.pageY - $(e.target).offset().top) + 1; _this.prevY = (e.offsetY || e.pageY - $(e.target).offset().top) + 1;
if (!_this.prevX || !_this.prevY) { if (!_this.prevX || !_this.prevY || (_this.prevX == 1 && _this.prevY == 1)) {
var touche = e.touches[0]; var touche = e.touches[0];
_this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left + 1; _this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left + 1;
_this.prevY = touche.clientY - $(_this.mouseOverlay).offset().top + 1; _this.prevY = touche.clientY - $(_this.mouseOverlay).offset().top + 1;
@ -132,6 +133,7 @@ var whiteboard = {
_this.textContainer.on("mousemove touchmove", function (e) { _this.textContainer.on("mousemove touchmove", function (e) {
e.preventDefault(); e.preventDefault();
if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) { if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) {
return; return;
} }
@ -153,8 +155,8 @@ var whiteboard = {
var touche = e.touches[0]; var touche = e.touches[0];
currX = touche.clientX - $(_this.mouseOverlay).offset().left; currX = touche.clientX - $(_this.mouseOverlay).offset().left;
currY = touche.clientY - $(_this.mouseOverlay).offset().top; currY = touche.clientY - $(_this.mouseOverlay).offset().top;
latestTouchCoods = [currX, currY];
} }
_this.latestTouchCoods = [currX, currY];
if (_this.drawFlag) { if (_this.drawFlag) {
if (_this.tool === "pen") { if (_this.tool === "pen") {
@ -171,11 +173,11 @@ var whiteboard = {
if (_this.tool === "eraser") { if (_this.tool === "eraser") {
var left = currX - _this.thickness; var left = currX - _this.thickness;
var top = currY - _this.thickness; var top = currY - _this.thickness;
_this.ownCursor.css({ "top": top + "px", "left": left + "px" }); if(_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" });
} else if (_this.tool === "pen") { } else if (_this.tool === "pen") {
var left = currX - _this.thickness / 2; var left = currX - _this.thickness / 2;
var top = currY - _this.thickness / 2; var top = currY - _this.thickness / 2;
_this.ownCursor.css({ "top": top + "px", "left": left + "px" }); if(_this.ownCursor) _this.ownCursor.css({ "top": top + "px", "left": left + "px" });
} else if (_this.tool === "line") { } else if (_this.tool === "line") {
if (svgLine) { if (svgLine) {
if (_this.pressedKeys.shift) { if (_this.pressedKeys.shift) {
@ -227,9 +229,10 @@ var whiteboard = {
_this.ctx.globalCompositeOperation = _this.oldGCO; _this.ctx.globalCompositeOperation = _this.oldGCO;
var currX = (e.offsetX || e.pageX - $(e.target).offset().left); var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
var currY = (e.offsetY || e.pageY - $(e.target).offset().top); var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
if ((!currX || !currY) && e.touches[0]) {
currX = latestTouchCoods[0]; if (!currX || !currY) {
currY = latestTouchCoods[1]; currX = _this.latestTouchCoods[0];
currY = _this.latestTouchCoods[1];
_this.sendFunction({ "t": "cursor", "event": "out", "username": _this.settings.username }); _this.sendFunction({ "t": "cursor", "event": "out", "username": _this.settings.username });
} }
@ -319,7 +322,7 @@ var whiteboard = {
_this.drawFlag = false; _this.drawFlag = false;
_this.mouseover = false; _this.mouseover = false;
_this.ctx.globalCompositeOperation = _this.oldGCO; _this.ctx.globalCompositeOperation = _this.oldGCO;
_this.ownCursor.remove(); if(_this.ownCursor) _this.ownCursor.remove();
_this.svgContainer.find("line").remove(); _this.svgContainer.find("line").remove();
_this.svgContainer.find("rect").remove(); _this.svgContainer.find("rect").remove();
_this.svgContainer.find("circle").remove(); _this.svgContainer.find("circle").remove();