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

fix shift draw line things

Browse Source
This commit is contained in:
raphael 2020-05-04 17:23:47 +02:00
parent 97326481e4
commit 774db98cc7
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/js/main.js
View File

@ -96,10 +96,18 @@ function main() {
//Handle key actions //Handle key actions
$(document).on("keydown", function (e) { $(document).on("keydown", function (e) {
if (e.which == 16) { if (e.which == 16) {
if(whiteboard.tool=="pen" && !strgPressed) { if (whiteboard.tool == "pen" && !strgPressed) {
tempLineTool = true; tempLineTool = true;
whiteboard.ownCursor.hide(); whiteboard.ownCursor.hide();
shortcutFunctions.setTool_line(); if (whiteboard.drawFlag) {
whiteboard.mouseup({ offsetX: whiteboard.currX, offsetY: whiteboard.currY })
shortcutFunctions.setTool_line();
whiteboard.prevX = whiteboard.currX;
whiteboard.prevY = whiteboard.currY;
whiteboard.mousedown({ offsetX: whiteboard.currX, offsetY: whiteboard.currY })
} else {
shortcutFunctions.setTool_line();
}
} }
whiteboard.pressedKeys["shift"] = true; //Used for straight lines... whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
} else if (e.which == 17) { } else if (e.which == 17) {
@ -109,7 +117,7 @@ function main() {
}); });
$(document).on("keyup", function (e) { $(document).on("keyup", function (e) {
if (e.which == 16) { if (e.which == 16) {
if(tempLineTool) { if (tempLineTool) {
tempLineTool = false; tempLineTool = false;
shortcutFunctions.setTool_pen(); shortcutFunctions.setTool_pen();
whiteboard.ownCursor.show(); whiteboard.ownCursor.show();

30
src/js/whiteboard.js
View File

@ -6,8 +6,10 @@ const whiteboard = {
drawcolor: "black", drawcolor: "black",
tool: "pen", tool: "pen",
thickness: 4, thickness: 4,
prevX: null, prevX: null, //prev Mouse position
prevY: null, prevY: null,
currX : null, //current Mouse position
currY : null,
latestTouchCoods: [], latestTouchCoods: [],
drawFlag: false, drawFlag: false,
oldGCO: null, oldGCO: null,
@ -90,6 +92,10 @@ const whiteboard = {
}); });
$(_this.mouseOverlay).on("mousedown touchstart", function (e) { $(_this.mouseOverlay).on("mousedown touchstart", function (e) {
_this.mousedown(e);
});
_this.mousedown = function(e) {
if (_this.imgDragActive || _this.drawFlag) { if (_this.imgDragActive || _this.drawFlag) {
return; return;
} }
@ -142,7 +148,7 @@ const whiteboard = {
_this.svgContainer.append(_this.svgCirle); _this.svgContainer.append(_this.svgCirle);
_this.startCoords = [_this.prevX, _this.prevY]; _this.startCoords = [_this.prevX, _this.prevY];
} }
}); }
_this.textContainer.on("mousemove touchmove", function (e) { _this.textContainer.on("mousemove touchmove", function (e) {
e.preventDefault(); e.preventDefault();
@ -151,9 +157,9 @@ const whiteboard = {
return; return;
} }
var currX = (e.offsetX || e.pageX - $(e.target).offset().left); _this.currX = (e.offsetX || e.pageX - $(e.target).offset().left);
var currY = (e.offsetY || e.pageY - $(e.target).offset().top); _this.currY = (e.offsetY || e.pageY - $(e.target).offset().top);
_this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username }); _this.sendFunction({ "t": "cursor", "event": "move", "d": [_this.currX, _this.currY], "username": _this.settings.username });
}) })
_this.mouseOverlay.on("mousemove touchmove", function (e) { _this.mouseOverlay.on("mousemove touchmove", function (e) {
@ -162,6 +168,10 @@ const whiteboard = {
}); });
_this.mouseOverlay.on("mouseup touchend touchcancel", function (e) { _this.mouseOverlay.on("mouseup touchend touchcancel", function (e) {
_this.mouseup(e);
});
_this.mouseup = function(e) {
if (_this.imgDragActive) { if (_this.imgDragActive) {
return; return;
} }
@ -187,9 +197,9 @@ const whiteboard = {
_this.sendFunction({ "t": _this.tool, "d": [currX, currY, _this.startCoords[0], _this.startCoords[1]], "c": _this.drawcolor, "th": _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(); _this.svgContainer.find("line").remove();
} else if (_this.tool === "pen") { } else if (_this.tool === "pen") {
_this.drawId--; _this.drawId--;
_this.pushPointSmoothPen(currX, currY); _this.pushPointSmoothPen(currX, currY);
_this.drawId++; _this.drawId++;
} else if (_this.tool === "rect") { } else if (_this.tool === "rect") {
if (_this.pressedKeys.shift) { if (_this.pressedKeys.shift) {
if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) { if ((currY - _this.startCoords[1]) * (currX - _this.startCoords[0]) > 0) {
@ -258,7 +268,7 @@ const whiteboard = {
imgDiv.draggable(); imgDiv.draggable();
_this.svgContainer.find("rect").remove(); _this.svgContainer.find("rect").remove();
} }
}); }
_this.mouseOverlay.on("mouseout", function (e) { _this.mouseOverlay.on("mouseout", function (e) {
_this.triggerMouseOut(); _this.triggerMouseOut();
@ -306,6 +316,8 @@ const whiteboard = {
} }
var currX = e.currX || (e.offsetX || e.pageX - $(e.target).offset().left); 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 currY = e.currY || (e.offsetY || e.pageY - $(e.target).offset().top);
_this.currX = currX;
_this.currY = currY;
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
if ((!currX || !currY) && e.touches && e.touches[0]) { if ((!currX || !currY) && e.touches && e.touches[0]) {
var touche = e.touches[0]; var touche = e.touches[0];
@ -704,7 +716,7 @@ const whiteboard = {
} }
} }
if (_this.undoBuffer.length > 1000) { if (_this.undoBuffer.length > 1000) {
_this.undoBuffer.splice(0, _this.undoBuffer.length-1000); _this.undoBuffer.splice(0, _this.undoBuffer.length - 1000);
} }
_this.canvas.height = _this.canvas.height; _this.canvas.height = _this.canvas.height;
_this.imgContainer.empty(); _this.imgContainer.empty();