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

fixed mobile misalignment

This commit is contained in:
Bea 2020-04-16 02:06:45 +02:00
parent 3d44b680c4
commit 1cf84762d3
1 changed files with 120 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
public/js/whiteboard.js
View File

@ -1,6 +1,9 @@
let biggestWidth = 1920;
let biggestHeight = 10000;
let pages = 1;
var whiteboard = {
isMultiTouch: false,
pages: 1,
canvas: null,
ctx: null,
drawcolor: "black",
@ -45,22 +48,49 @@ 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 width = biggestWidth;
var height = biggestHeight;
/*var width = $(window).width();
if(width > biggestWidth)
{
biggestWidth = width;
}
else
{
width = biggestWidth;
}
var height = $(window).height();
console.info("height: " + height);
if(height > biggestHeight)
{
biggestHeight = height;
}
else
{
height = biggestHeight;
}*/
//console.info("height new: " + height);
//_this.sendFunction({ "t": "refreshEveryoneScreenSize" });
//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: ' + height + 'px; width: ' + width + 'px;"></div>');
// container for background images
_this.imgContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
_this.imgContainer = $('<div style="position: absolute; left:0px; top:0; height: ' + height + 'px; width: ' + width + 'px;"></div>');
// whiteboard canvas
_this.canvasElement = $('<canvas id="whiteboardCanvas" style="position: absolute; left:0px; top:0; cursor:crosshair;"></canvas>');
// SVG container holding drawing or moving previews
_this.svgContainer = $('<svg style="position: absolute; top:0px; left:0px;" width="100%" height="100%"></svg>');
_this.svgContainer = $('<svg style="position: absolute; top: 0px; left:0px; width:' + width + 'px; height: ' + height + 'px;"></svg>');
// drag and drop indicator, hidden by default
_this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>')
_this.dropIndicator = $('<div style="position:absolute; height: ' + height + 'px; width: ' + width + 'px; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>')
// container for other users cursors
_this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
_this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: ' + height + 'px; width: ' + width + 'px;"></div>');
// container for texts by users
_this.textContainer = $('<div class="textcontainer" style="position: absolute; left:0px; top:0; height: 100%; width: 100%; cursor:text;"></div>');
_this.textContainer = $('<div class="textcontainer" style="position: absolute; left:0px; top:0; height: ' + height + 'px; width: ' + width + 'px; cursor:text;"></div>');
// mouse overlay for draw callbacks
_this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
_this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: ' + height + 'px; width: ' + width + 'px;"></div>');
$(whiteboardContainer).append(_this.backgroundGrid)
.append(_this.imgContainer)
@ -71,35 +101,43 @@ var whiteboard = {
.append(_this.textContainer)
.append(_this.mouseOverlay);
this.canvas = $("#whiteboardCanvas")[0];
this.canvas.width = $(window).width();
this.canvas.height = $(window).height() * pages;
this.canvas.width = biggestWidth * pages;
this.canvas.height = biggestHeight * pages;
this.ctx = this.canvas.getContext("2d");
this.oldGCO = this.ctx.globalCompositeOperation;
$(window).resize(function () { //Handle resize
var dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); //Copy the buffer
_this.canvas.width = $(window).width();
_this.canvas.height = $(window).height() * pages; //Set new canvas height
_this.canvas.width = biggestWidth * pages;
_this.canvas.height = biggestHeight * pages; //Set new canvas height
_this.drawBuffer = [];
_this.loadData(dbCp); //draw old content in
});
function handleMouseStart(e, isTouch) {
$(_this.mouseOverlay).on( "mousedown touchstart", function (e) {
if (_this.imgDragActive || _this.drawFlag) {
return;
}
if(isTouch)
var loc;
if(e.type === "touchstart")
{
loc = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (e.touches.length > 1) {
_this.isMultiTouch = true;
return; // if more than one finger is touching the screen, dont draw
}
}
else
{
loc = e;
}
_this.drawFlag = true;
_this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1;
_this.prevY = (e.offsetY || e.pageY - $(e.target).offset().top) + 1;
_this.prevX = (loc.offsetX || loc.pageX - $(e.target).offset().left) + 1;
_this.prevY = (loc.offsetY || loc.pageY - $(e.target).offset().top) + 1;
if (!_this.prevX || !_this.prevY || (_this.prevX == 1 && _this.prevY == 1)) {
var touche = e.touches[0];
_this.prevX = touche.clientX - $(_this.mouseOverlay).offset().left + 1;
@ -149,79 +187,71 @@ var whiteboard = {
_this.svgContainer.append(_this.svgCirle);
_this.startCoords = [_this.prevX, _this.prevY];
}
}
$(_this.mouseOverlay).on( "touchstart", function (e) {
handleMouseStart(e, true);
});
$(_this.mouseOverlay).on("mousedown", function (e) {
handleMouseStart(e, false);
});
function handleMouseMove(e, isTouch) {
if(isTouch)
_this.textContainer.on("mousemove touchmove", function (e) {
var loc;
if(e.type === "touchmove")
{
loc = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (e.touches.length > 1) {
_this.isMultiTouch = true;
return; // if more than one finger is touching the screen, dont draw
}
}
else
{
loc = e;
}
var currX = (loc.offsetX || loc.pageX - $(e.target).offset().left);
var currY = (loc.offsetY || loc.pageY - $(e.target).offset().top);
e.preventDefault();
if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) {
return;
}
var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
console.info("eoff: " + e.offsetY); console.info("else:" + (e.pageY - $(e.target).offset().top));
_this.sendFunction({
"t": "cursor",
"event": "move",
"d": [currX, currY],
"username": _this.settings.username
});
}
_this.textContainer.on("touchmove", function (e) {
handleMouseMove(e, true);
});
_this.textContainer.on("mousemove", function (e) {
handleMouseMove(e, false);
_this.mouseOverlay.on("mousemove touchmove", function (e) {
_this.triggerMouseMove(e);
});
function handleMouseMove2(e, isTouch) {
if(isTouch)
_this.mouseOverlay.on("mouseup touchend touchcancel", function (e) {
var isTouch = false;
var loc;
if(e.type === "touchend" || e.type === "touchcancel")
{
if (e.touches.length > 1) {
_this.isMultiTouch = true;
return; // if more than one finger is touching the screen, dont draw
}
isTouch = true;
loc = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
}
else
{
loc = e;
}
e.preventDefault();
_this.triggerMouseMove(e);
}
_this.mouseOverlay.on("touchmove", function (e) {
handleMouseMove2(e, true);
});
_this.mouseOverlay.on("mousemove", function (e) {
handleMouseMove2(e, false);
});
function handleMouseUp(e, isTouch) {
if (_this.imgDragActive) {
return;
}
_this.drawFlag = false;
_this.drawId++;
_this.ctx.globalCompositeOperation = _this.oldGCO;
var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
var currX = (loc.offsetX || loc.pageX - $(e.target).offset().left);
var currY = (loc.offsetY || loc.pageY - $(e.target).offset().top);
var els = loc.pageY - $(e.target).offset().top;
console.info("eoff: " + loc.offsetY); console.info("else: " + els);
if (!currX || !currY) {
currX = _this.latestTouchCoods[0];
currY = _this.latestTouchCoods[1];
@ -332,15 +362,7 @@ var whiteboard = {
imgDiv.draggable();
_this.svgContainer.find("rect").remove();
}
}
_this.mouseOverlay.on("touchend touchcancel", function (e) {
handleMouseUp(e, true);
});
_this.mouseOverlay.on("mouseup", function (e) {
handleMouseUp(e, false);
});
_this.mouseOverlay.on("mouseout", function (e) {
_this.triggerMouseOut();
});
@ -359,6 +381,7 @@ var whiteboard = {
_this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true);
});
},
getRoundedAngles: function (currX, currY) { //For drawing lines at 0,45,90° ....
var _this = this;
var x = currX - _this.startCoords[0];
@ -381,17 +404,44 @@ var whiteboard = {
return { "x": currX, "y": currY };
},
triggerMouseMove: function (e) {
var _this = this;
var loc;
if(e.type === "touchmove")
{
loc = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (e.touches.length > 1) {
_this.isMultiTouch = true;
return; // if more than one finger is touching the screen, dont draw
}
}
else
{
loc = e;
}
e.preventDefault();
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);
var currX = loc.offsetX || loc.pageX - $(e.target).offset().left;
var currY = loc.offsetY || loc.pageY - $(e.target).offset().top;
/*console.log("curr y:" + loc.currY);
console.log("offset y:" + loc.offsetY);
console.log("page y:" + loc.pageY);
console.log("current y: " + currY);*/
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;
//console.log("current y new: " + currY);
}
_this.latestTouchCoods = [currX, currY];
@ -1003,6 +1053,11 @@ var whiteboard = {
if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) {
_this.drawBuffer.push(content);
}
/*if(["refreshEveryoneScreenSize"].includes(tool)) {
console.info("refreshing size: " + biggestWidth + ", " + biggestHeight);
_this.canvas.width = biggestWidth * pages;
_this.canvas.height = biggestHeight * pages;
}*/
},
refreshCursorAppearance() { //Set cursor depending on current active tool
var _this = this;