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

style: formatted entire repo

Browse Source
This commit is contained in:
Florent Chehab
2020-05-09 15:40:26 +02:00
parent dafb9f4646
commit d4a30ea3ed
21 changed files with 1494 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/js/classes/Point.js
View File

@@ -1,4 +1,4 @@
import {computeDist} from "../utils";
import { computeDist } from "../utils";
class Point {
/**
@@ -42,7 +42,8 @@ class Point {
let x = (e.offsetX || e.pageX - $(e.target).offset().left) + epsilon;
let y = (e.offsetY || e.pageY - $(e.target).offset().top) + epsilon;
if (Number.isNaN(x) || Number.isNaN(y) || (x === epsilon && y === epsilon)) { // if it's a touch actually
if (Number.isNaN(x) || Number.isNaN(y) || (x === epsilon && y === epsilon)) {
// if it's a touch actually
if (e.touches && e.touches.length && e.touches.length > 0) {
const touch = e.touches[0];
x = touch.clientX - $("#mouseOverlay").offset().left;
@@ -65,7 +66,7 @@ class Point {
/**
* Compute euclidean distance between points
*
*
* @param {Point} otherPoint
* @returns {number}
*/
@@ -74,4 +75,4 @@ class Point {
}
}
export default Point;
export default Point;

4
src/js/icons.js
View File

@@ -17,7 +17,7 @@ import {
faSortDown,
faExpandArrowsAlt,
faLock,
faLockOpen
faLockOpen,
} from "@fortawesome/free-solid-svg-icons";
import {
faSquare,
@@ -53,4 +53,4 @@ library.add(
faLockOpen
);
dom.i2svg()
dom.i2svg();

8
src/js/index.js
View File

@@ -8,19 +8,19 @@ import "./icons";
import main from "./main";
$(document).ready(function () {
// Set correct width height on mobile browsers
const 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" />');
$("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" />');
$("head").append('<meta name="viewport" content="width=1400" />');
}
main();
});
if (module.hot) {
module.hot.accept();
}

80
src/js/keybinds.js
View File

@@ -1,48 +1,48 @@
/* -----------
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.
//Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j.
const keybinds = {
// 'key(s)' : 'function',
'defmod-shift-z' : 'clearWhiteboard',
'defmod-z' : 'undoStep',
'defmod-y' : 'redoStep',
'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-shift-f' : 'toggleLineRecCircle',
'defmod-shift-x' : 'togglePenEraser',
'defmod-shift-r' : 'toggleMainColors',
'defmod-a' : 'setTool_text',
'defmod-e' : 'setTool_eraser',
'defmod-up' : 'thickness_bigger',
'defmod-down' : 'thickness_smaller',
'defmod-shift-c' : 'openColorPicker',
'defmod-shift-1' : 'setDrawColorBlack',
'defmod-shift-2' : 'setDrawColorBlue',
'defmod-shift-3' : 'setDrawColorGreen',
'defmod-shift-4' : 'setDrawColorYellow',
'defmod-shift-5' : 'setDrawColorRed',
'defmod-s' : 'saveWhiteboardAsImage',
'defmod-shift-k' : 'saveWhiteboardAsJson',
'defmod-shift-i' : 'uploadWhiteboardToWebDav',
'defmod-shift-j' : 'uploadJsonToWhiteboard',
'defmod-shift-s' : 'shareWhiteboard',
'tab' : 'hideShowControls',
'up' : 'moveDraggableUp',
'down' : 'moveDraggableDown',
'left' : 'moveDraggableLeft',
'right' : 'moveDraggableRight',
'defmod-enter' : 'dropDraggable',
'shift-enter' : 'addToBackground',
'escape' : 'cancelAllActions',
'del' : 'deleteSelection'
}
"defmod-shift-z": "clearWhiteboard",
"defmod-z": "undoStep",
"defmod-y": "redoStep",
"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-shift-f": "toggleLineRecCircle",
"defmod-shift-x": "togglePenEraser",
"defmod-shift-r": "toggleMainColors",
"defmod-a": "setTool_text",
"defmod-e": "setTool_eraser",
"defmod-up": "thickness_bigger",
"defmod-down": "thickness_smaller",
"defmod-shift-c": "openColorPicker",
"defmod-shift-1": "setDrawColorBlack",
"defmod-shift-2": "setDrawColorBlue",
"defmod-shift-3": "setDrawColorGreen",
"defmod-shift-4": "setDrawColorYellow",
"defmod-shift-5": "setDrawColorRed",
"defmod-s": "saveWhiteboardAsImage",
"defmod-shift-k": "saveWhiteboardAsJson",
"defmod-shift-i": "uploadWhiteboardToWebDav",
"defmod-shift-j": "uploadJsonToWhiteboard",
"defmod-shift-s": "shareWhiteboard",
tab: "hideShowControls",
up: "moveDraggableUp",
down: "moveDraggableDown",
left: "moveDraggableLeft",
right: "moveDraggableRight",
"defmod-enter": "dropDraggable",
"shift-enter": "addToBackground",
escape: "cancelAllActions",
del: "deleteSelection",
};
export default keybinds;
export default keybinds;

505
src/js/main.js
View File

@@ -1,5 +1,5 @@
import keymage from "keymage";
import io from 'socket.io-client';
import io from "socket.io-client";
import whiteboard from "./whiteboard";
import keybinds from "./keybinds";
import Picker from "vanilla-picker";
@@ -9,13 +9,16 @@ import shortcutFunctions from "./shortcutFunctions";
import ReadOnlyService from "./services/ReadOnlyService";
function main() {
var whiteboardId = getQueryVariable("whiteboardid");
var randomid = getQueryVariable("randomid");
if (randomid && !whiteboardId) { //set random whiteboard on empty whiteboardid
whiteboardId = Array(2).fill(null).map(() => Math.random().toString(36).substr(2)).join('');
if (randomid && !whiteboardId) {
//set random whiteboard on empty whiteboardid
whiteboardId = Array(2)
.fill(null)
.map(() => Math.random().toString(36).substr(2))
.join("");
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('whiteboardid', whiteboardId);
urlParams.set("whiteboardid", whiteboardId);
window.location.search = urlParams;
}
@@ -33,40 +36,44 @@ function main() {
document.title = decodeURIComponent(title);
}
var url = document.URL.substr(0, document.URL.lastIndexOf('/'));
var url = document.URL.substr(0, document.URL.lastIndexOf("/"));
var signaling_socket = null;
var urlSplit = url.split("/");
var subdir = "";
for (var i = 3; i < urlSplit.length; i++) {
subdir = subdir + '/' + urlSplit[i];
subdir = subdir + "/" + urlSplit[i];
}
signaling_socket = io("", { "path": subdir + "/ws-api" }); // Connect even if we are in a subdir behind a reverse proxy
signaling_socket = io("", { path: subdir + "/ws-api" }); // Connect even if we are in a subdir behind a reverse proxy
signaling_socket.on('connect', function () {
signaling_socket.on("connect", function () {
console.log("Websocket connected!");
let messageReceivedCount = 0;
signaling_socket.on('drawToWhiteboard', function (content) {
signaling_socket.on("drawToWhiteboard", function (content) {
whiteboard.handleEventsAndData(content, true);
$('#messageReceivedCount')[0].innerText = String(messageReceivedCount++);
$("#messageReceivedCount")[0].innerText = String(messageReceivedCount++);
});
signaling_socket.on('refreshUserBadges', function () {
signaling_socket.on("refreshUserBadges", function () {
whiteboard.refreshUserBadges();
});
signaling_socket.on('wrongAccessToken', function () {
signaling_socket.on("wrongAccessToken", function () {
if (!accessDenied) {
accessDenied = true;
showBasicAlert("Access denied! Wrong accessToken!")
showBasicAlert("Access denied! Wrong accessToken!");
}
});
signaling_socket.on('updateSmallestScreenResolution', function (widthHeight) {
signaling_socket.on("updateSmallestScreenResolution", function (widthHeight) {
whiteboard.updateSmallestScreenResolution(widthHeight["w"], widthHeight["h"]);
});
signaling_socket.emit('joinWhiteboard', { wid: whiteboardId, at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
signaling_socket.emit("joinWhiteboard", {
wid: whiteboardId,
at: accessToken,
windowWidthHeight: { w: $(window).width(), h: $(window).height() },
});
});
$(document).ready(function () {
@@ -78,29 +85,35 @@ function main() {
}
let messageSentCount = 0;
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
whiteboard.loadWhiteboard("#whiteboardContainer", {
//Load the whiteboard
whiteboardId: whiteboardId,
username: btoa(myUsername),
sendFunction: function (content) {
if (ReadOnlyService.readOnlyActive) return;
//ADD IN LATER THROUGH CONFIG
// if (content.t === 'cursor') {
//ADD IN LATER THROUGH CONFIG
// if (content.t === 'cursor') {
// if (whiteboard.drawFlag) return;
// }
content["at"] = accessToken;
signaling_socket.emit('drawToWhiteboard', content);
$('#messageSentCount')[0].innerText = String(messageSentCount++);
}
signaling_socket.emit("drawToWhiteboard", content);
$("#messageSentCount")[0].innerText = String(messageSentCount++);
},
});
// request whiteboard from server
$.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(function (data) {
whiteboard.loadData(data)
});
$.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(
function (data) {
whiteboard.loadData(data);
}
);
$(window).resize(function () {
signaling_socket.emit('updateScreenResolution', { at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
})
signaling_socket.emit("updateScreenResolution", {
at: accessToken,
windowWidthHeight: { w: $(window).width(), h: $(window).height() },
});
});
/*----------------/
Whiteboard actions
@@ -115,12 +128,18 @@ function main() {
tempLineTool = true;
whiteboard.ownCursor.hide();
if (whiteboard.drawFlag) {
whiteboard.mouseup({ offsetX: whiteboard.prevPos.x, offsetY: whiteboard.prevPos.y })
whiteboard.mouseup({
offsetX: whiteboard.prevPos.x,
offsetY: whiteboard.prevPos.y,
});
shortcutFunctions.setTool_line();
whiteboard.mousedown({ offsetX: whiteboard.prevPos.x, offsetY: whiteboard.prevPos.y })
whiteboard.mousedown({
offsetX: whiteboard.prevPos.x,
offsetY: whiteboard.prevPos.y,
});
} else {
shortcutFunctions.setTool_line();
}
}
}
whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
} else if (e.which == 17) {
@@ -147,9 +166,15 @@ function main() {
if (associatedShortcutFunction) {
keymage(key, associatedShortcutFunction, { preventDefault: true });
} else {
console.error("Function you want to keybind on key:", key, "named:", functionName, "is not available!")
console.error(
"Function you want to keybind on key:",
key,
"named:",
functionName,
"is not available!"
);
}
})
});
// whiteboard clear button
$("#whiteboardTrashBtn").click(function () {
@@ -211,15 +236,18 @@ function main() {
$("#saveAsImageBtn").click(function () {
var imgData = whiteboard.getImageDataBase64();
var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
var a = document.createElement('a');
var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
setTimeout(function () {
//FireFox seems to require a setTimeout for this to work.
var a = document.createElement("a");
a.href = imgData;
a.download = 'whiteboard.png';
a.download = "whiteboard.png";
w.document.body.appendChild(a);
a.click();
w.document.body.removeChild(a);
setTimeout(function () { w.close(); }, 100);
setTimeout(function () {
w.close();
}, 100);
}, 0);
});
@@ -227,15 +255,18 @@ function main() {
$("#saveAsJSONBtn").click(function () {
var imgData = whiteboard.getImageDataJson();
var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
var a = document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([imgData], { type: 'text/json' }));
a.download = 'whiteboard.json';
var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
setTimeout(function () {
//FireFox seems to require a setTimeout for this to work.
var a = document.createElement("a");
a.href = window.URL.createObjectURL(new Blob([imgData], { type: "text/json" }));
a.download = "whiteboard.json";
w.document.body.appendChild(a);
a.click();
w.document.body.removeChild(a);
setTimeout(function () { w.close(); }, 100);
setTimeout(function () {
w.close();
}, 100);
}, 0);
});
@@ -244,57 +275,67 @@ function main() {
return;
}
var webdavserver = localStorage.getItem('webdavserver') || ""
var webdavpath = localStorage.getItem('webdavpath') || "/"
var webdavusername = localStorage.getItem('webdavusername') || ""
var webdavpassword = localStorage.getItem('webdavpassword') || ""
var webDavHtml = $('<div>' +
'<table>' +
'<tr>' +
'<td>Server URL:</td>' +
'<td><input class="webdavserver" type="text" value="' + webdavserver + '" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
'<td></td>' +
'</tr>' +
'<tr>' +
'<td>Path:</td>' +
'<td><input class="webdavpath" type="text" placeholder="folder" value="' + webdavpath + '"></td>' +
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
'</tr>' +
'<tr>' +
'<td>Username:</td>' +
'<td><input class="webdavusername" type="text" value="' + webdavusername + '" placeholder="username"></td>' +
'<td style="font-size: 0.7em;"></td>' +
'</tr>' +
'<tr>' +
'<td>Password:</td>' +
'<td><input class="webdavpassword" type="password" value="' + webdavpassword + '" placeholder="password"></td>' +
'<td style="font-size: 0.7em;"></td>' +
'</tr>' +
'<tr>' +
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
'</tr>' +
'<tr>' +
'<td></td>' +
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
'</tr>' +
'</table>' +
'</div>');
var webdavserver = localStorage.getItem("webdavserver") || "";
var webdavpath = localStorage.getItem("webdavpath") || "/";
var webdavusername = localStorage.getItem("webdavusername") || "";
var webdavpassword = localStorage.getItem("webdavpassword") || "";
var webDavHtml = $(
"<div>" +
"<table>" +
"<tr>" +
"<td>Server URL:</td>" +
'<td><input class="webdavserver" type="text" value="' +
webdavserver +
'" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
"<td></td>" +
"</tr>" +
"<tr>" +
"<td>Path:</td>" +
'<td><input class="webdavpath" type="text" placeholder="folder" value="' +
webdavpath +
'"></td>' +
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
"</tr>" +
"<tr>" +
"<td>Username:</td>" +
'<td><input class="webdavusername" type="text" value="' +
webdavusername +
'" placeholder="username"></td>' +
'<td style="font-size: 0.7em;"></td>' +
"</tr>" +
"<tr>" +
"<td>Password:</td>" +
'<td><input class="webdavpassword" type="password" value="' +
webdavpassword +
'" placeholder="password"></td>' +
'<td style="font-size: 0.7em;"></td>' +
"</tr>" +
"<tr>" +
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
"</tr>" +
"<tr>" +
"<td></td>" +
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
"</tr>" +
"</table>" +
"</div>"
);
webDavHtml.find(".webdavUploadBtn").click(function () {
var webdavserver = webDavHtml.find(".webdavserver").val();
localStorage.setItem('webdavserver', webdavserver);
localStorage.setItem("webdavserver", webdavserver);
var webdavpath = webDavHtml.find(".webdavpath").val();
localStorage.setItem('webdavpath', webdavpath);
localStorage.setItem("webdavpath", webdavpath);
var webdavusername = webDavHtml.find(".webdavusername").val();
localStorage.setItem('webdavusername', webdavusername);
localStorage.setItem("webdavusername", webdavusername);
var webdavpassword = webDavHtml.find(".webdavpassword").val();
localStorage.setItem('webdavpassword', webdavpassword);
localStorage.setItem("webdavpassword", webdavpassword);
var base64data = whiteboard.getImageDataBase64();
var webdavaccess = {
webdavserver: webdavserver,
webdavpath: webdavpath,
webdavusername: webdavusername,
webdavpassword: webdavpassword
}
webdavpassword: webdavpassword,
};
webDavHtml.find(".loadingWebdavText").show();
webDavHtml.find(".webdavUploadBtn").hide();
saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
@@ -305,12 +346,12 @@ function main() {
webDavHtml.parents(".basicalert").remove();
}
});
})
});
showBasicAlert(webDavHtml, {
header: "Save to Webdav",
okBtnText: "cancel",
headercolor: "#0082c9"
})
headercolor: "#0082c9",
});
// render newly added icons
dom.i2svg();
});
@@ -330,10 +371,15 @@ function main() {
endSplit = endSplit.splice(1, 1);
urlStart += "&" + endSplit.join("&");
}
$("<textarea/>").appendTo("body").val(urlStart).select().each(function () {
document.execCommand('copy');
}).remove();
showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 })
$("<textarea/>")
.appendTo("body")
.val(urlStart)
.select()
.each(function () {
document.execCommand("copy");
})
.remove();
showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 });
});
var btnsMini = false;
@@ -348,7 +394,7 @@ function main() {
$(this).find("#maxBtn").hide();
}
btnsMini = !btnsMini;
})
});
// load json to whiteboard
$("#myFile").on("change", function () {
@@ -374,7 +420,7 @@ function main() {
// handle drag&drop
var dragCounter = 0;
$('#whiteboardContainer').on("dragenter", function (e) {
$("#whiteboardContainer").on("dragenter", function (e) {
if (ReadOnlyService.readOnlyActive) return;
e.preventDefault();
e.stopPropagation();
@@ -382,7 +428,7 @@ function main() {
whiteboard.dropIndicator.show();
});
$('#whiteboardContainer').on("dragleave", function (e) {
$("#whiteboardContainer").on("dragleave", function (e) {
if (ReadOnlyService.readOnlyActive) return;
e.preventDefault();
@@ -393,11 +439,13 @@ function main() {
}
});
$('#whiteboardContainer').on('drop', function (e) { //Handle drop
$("#whiteboardContainer").on("drop", function (e) {
//Handle drop
if (ReadOnlyService.readOnlyActive) return;
if (e.originalEvent.dataTransfer) {
if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
if (e.originalEvent.dataTransfer.files.length) {
//File from harddisc
e.preventDefault();
e.stopPropagation();
var filename = e.originalEvent.dataTransfer.files[0]["name"];
@@ -408,8 +456,9 @@ function main() {
reader.onloadend = function () {
const base64data = reader.result;
uploadImgAndAddToWhiteboard(base64data);
}
} else if (isPDFFileName(filename)) { //Handle PDF Files
};
} else if (isPDFFileName(filename)) {
//Handle PDF Files
var blob = e.originalEvent.dataTransfer.files[0];
var reader = new window.FileReader();
@@ -417,86 +466,91 @@ function main() {
var pdfData = new Uint8Array(this.result);
var loadingTask = pdfjsLib.getDocument({ data: pdfData });
loadingTask.promise.then(function (pdf) {
console.log('PDF loaded');
loadingTask.promise.then(
function (pdf) {
console.log("PDF loaded");
var currentDataUrl = null;
var modalDiv = $('<div>' +
'Page: <select></select> ' +
'<button style="margin-bottom: 3px;" class="modalBtn"><i class="fas fa-upload"></i> Upload to Whiteboard</button>' +
'<img style="width:100%;" src=""/>' +
'</div>')
var currentDataUrl = null;
var modalDiv = $(
"<div>" +
"Page: <select></select> " +
'<button style="margin-bottom: 3px;" class="modalBtn"><i class="fas fa-upload"></i> Upload to Whiteboard</button>' +
'<img style="width:100%;" src=""/>' +
"</div>"
);
modalDiv.find("select").change(function () {
showPDFPageAsImage(parseInt($(this).val()));
})
modalDiv.find("button").click(function () {
if (currentDataUrl) {
$(".basicalert").remove();
uploadImgAndAddToWhiteboard(currentDataUrl);
}
})
for (var i = 1; i < pdf.numPages + 1; i++) {
modalDiv.find("select").append('<option value="' + i + '">' + i + '</option>')
}
showBasicAlert(modalDiv, {
header: "Pdf to Image",
okBtnText: "cancel",
headercolor: "#0082c9"
})
showPDFPageAsImage(1);
function showPDFPageAsImage(pageNumber) {
// Fetch the page
pdf.getPage(pageNumber).then(function (page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
// Prepare canvas using PDF page dimensions
var canvas = $("<canvas></canvas>")[0];
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
var dataUrl = canvas.toDataURL("image/jpeg", 1.0);
currentDataUrl = dataUrl;
modalDiv.find("img").attr("src", dataUrl);
console.log('Page rendered');
});
modalDiv.find("select").change(function () {
showPDFPageAsImage(parseInt($(this).val()));
});
modalDiv.find("button").click(function () {
if (currentDataUrl) {
$(".basicalert").remove();
uploadImgAndAddToWhiteboard(currentDataUrl);
}
});
for (var i = 1; i < pdf.numPages + 1; i++) {
modalDiv
.find("select")
.append('<option value="' + i + '">' + i + "</option>");
}
showBasicAlert(modalDiv, {
header: "Pdf to Image",
okBtnText: "cancel",
headercolor: "#0082c9",
});
showPDFPageAsImage(1);
function showPDFPageAsImage(pageNumber) {
// Fetch the page
pdf.getPage(pageNumber).then(function (page) {
console.log("Page loaded");
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
// Prepare canvas using PDF page dimensions
var canvas = $("<canvas></canvas>")[0];
var context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport,
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
var dataUrl = canvas.toDataURL("image/jpeg", 1.0);
currentDataUrl = dataUrl;
modalDiv.find("img").attr("src", dataUrl);
console.log("Page rendered");
});
});
}
},
function (reason) {
// PDF loading error
showBasicAlert(
"Error loading pdf as image! Check that this is a vaild pdf file!"
);
console.error(reason);
}
}, function (reason) {
// PDF loading error
showBasicAlert("Error loading pdf as image! Check that this is a vaild pdf file!");
console.error(reason);
});
}
);
};
reader.readAsArrayBuffer(blob);
} else {
showBasicAlert("File must be an image!");
}
} else { //File from other browser
} else {
//File from other browser
var fileUrl = e.originalEvent.dataTransfer.getData('URL');
var imageUrl = e.originalEvent.dataTransfer.getData('text/html');
var fileUrl = e.originalEvent.dataTransfer.getData("URL");
var imageUrl = e.originalEvent.dataTransfer.getData("text/html");
var rex = /src="?([^"\s]+)"?\s*/;
var url = rex.exec(imageUrl);
if (url && url.length > 1) {
@@ -529,11 +583,11 @@ function main() {
});
new Picker({
parent: $('#whiteboardColorpicker')[0],
parent: $("#whiteboardColorpicker")[0],
color: "#000000",
onChange: function (color) {
whiteboard.setDrawColor(color.rgbaString);
}
},
});
// on startup select mouse
@@ -549,64 +603,76 @@ function main() {
});
//Prevent site from changing tab on drag&drop
window.addEventListener("dragover", function (e) {
e = e || event;
e.preventDefault();
}, false);
window.addEventListener("drop", function (e) {
e = e || event;
e.preventDefault();
}, false);
window.addEventListener(
"dragover",
function (e) {
e = e || event;
e.preventDefault();
},
false
);
window.addEventListener(
"drop",
function (e) {
e = e || event;
e.preventDefault();
},
false
);
function uploadImgAndAddToWhiteboard(base64data) {
var date = (+new Date());
var date = +new Date();
$.ajax({
type: 'POST',
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/api/upload',
type: "POST",
url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "/api/upload",
data: {
'imagedata': base64data,
'whiteboardId': whiteboardId,
'date': date,
'at': accessToken
imagedata: base64data,
whiteboardId: whiteboardId,
date: date,
at: accessToken,
},
success: function (msg) {
var filename = whiteboardId + "_" + date + ".png";
whiteboard.addImgToCanvasByUrl(document.URL.substr(0, document.URL.lastIndexOf('/')) + "/uploads/" + filename); //Add image to canvas
whiteboard.addImgToCanvasByUrl(
document.URL.substr(0, document.URL.lastIndexOf("/")) + "/uploads/" + filename
); //Add image to canvas
console.log("Image uploaded!");
},
error: function (err) {
showBasicAlert("Failed to upload frame: " + JSON.stringify(err));
}
},
});
}
function saveWhiteboardToWebdav(base64data, webdavaccess, callback) {
var date = (+new Date());
var date = +new Date();
$.ajax({
type: 'POST',
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + 'api/upload',
type: "POST",
url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "api/upload",
data: {
'imagedata': base64data,
'whiteboardId': whiteboardId,
'date': date,
'at': accessToken,
'webdavaccess': JSON.stringify(webdavaccess)
imagedata: base64data,
whiteboardId: whiteboardId,
date: date,
at: accessToken,
webdavaccess: JSON.stringify(webdavaccess),
},
success: function (msg) {
showBasicAlert("Whiteboard was saved to Webdav!", {
headercolor: "#5c9e5c"
headercolor: "#5c9e5c",
});
console.log("Image uploaded for webdav!");
callback();
},
error: function (err) {
if (err.status == 403) {
showBasicAlert("Could not connect to Webdav folder! Please check the credentials and paths and try again!");
showBasicAlert(
"Could not connect to Webdav folder! Please check the credentials and paths and try again!"
);
} else {
showBasicAlert("Unknown Webdav error! ", err);
}
callback(err);
}
},
});
}
@@ -664,13 +730,15 @@ function main() {
console.log("Uploading image!");
let base64data = reader.result;
uploadImgAndAddToWhiteboard(base64data);
}
};
}
}
}
if (!imgItemFound && whiteboard.tool != "text") {
showBasicAlert("Please Drag&Drop the image or pdf into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)");
showBasicAlert(
"Please Drag&Drop the image or pdf into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)"
);
}
}
});
@@ -681,21 +749,28 @@ function main() {
okBtnText: "Ok",
headercolor: "#d25d5d",
hideAfter: false,
onOkClick: false
}
onOkClick: false,
};
if (newOptions) {
for (var i in newOptions) {
options[i] = newOptions[i];
}
}
var alertHtml = $('<div class="basicalert" style="position:absolute; left:0px; width:100%; top:70px; font-family: monospace;">' +
'<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">' +
'<div style="border-bottom: 1px solid #676767; background: ' + options["headercolor"] + '; padding-left: 5px; font-size: 0.8em;">' + options["header"] +
'<div style="float: right; margin-right: 4px; color: #373737; cursor: pointer;" class="closeAlert">x</div></div>' +
'<div style="padding: 10px;" class="htmlcontent"></div>' +
'<div style="height: 20px; padding: 10px;"><button class="modalBtn okbtn" style="float: right;">' + options["okBtnText"] + '</button></div>' +
'</div>' +
'</div>');
var alertHtml = $(
'<div class="basicalert" style="position:absolute; left:0px; width:100%; top:70px; font-family: monospace;">' +
'<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">' +
'<div style="border-bottom: 1px solid #676767; background: ' +
options["headercolor"] +
'; padding-left: 5px; font-size: 0.8em;">' +
options["header"] +
'<div style="float: right; margin-right: 4px; color: #373737; cursor: pointer;" class="closeAlert">x</div></div>' +
'<div style="padding: 10px;" class="htmlcontent"></div>' +
'<div style="height: 20px; padding: 10px;"><button class="modalBtn okbtn" style="float: right;">' +
options["okBtnText"] +
"</button></div>" +
"</div>" +
"</div>"
);
alertHtml.find(".htmlcontent").append(html);
$("body").append(alertHtml);
alertHtml.find(".okbtn").click(function () {
@@ -703,15 +778,15 @@ function main() {
options.onOkClick();
}
alertHtml.remove();
})
});
alertHtml.find(".closeAlert").click(function () {
alertHtml.remove();
})
});
if (options.hideAfter) {
setTimeout(function () {
alertHtml.find(".okbtn").click();
}, 1000 * options.hideAfter)
}, 1000 * options.hideAfter);
}
}
@@ -729,4 +804,4 @@ function main() {
}
}
export default main;
export default main;

2
src/js/services/ReadOnlyService.js
View File

@@ -57,4 +57,4 @@ class ReadOnlyService {
}
}
export default new ReadOnlyService();
export default new ReadOnlyService();

36
src/js/shortcutFunctions.js
View File

@@ -9,7 +9,7 @@ function defineShortcut(callback, readOnlySensitive = true) {
return () => {
if (readOnlySensitive && ReadOnlyService.readOnlyActive) return;
callback();
}
};
}
const shortcutFunctions = {
@@ -103,33 +103,45 @@ const shortcutFunctions = {
}
}),
moveDraggableUp: defineShortcut(() => {
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
const elm =
whiteboard.tool === "text"
? $("#" + whiteboard.latestActiveTextBoxId)
: $(".dragMe")[0];
const p = $(elm).position();
if (p) $(elm).css({top: p.top - 5, left: p.left})
if (p) $(elm).css({ top: p.top - 5, left: p.left });
}),
moveDraggableDown: defineShortcut(() => {
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
const elm =
whiteboard.tool === "text"
? $("#" + whiteboard.latestActiveTextBoxId)
: $(".dragMe")[0];
const p = $(elm).position();
if (p) $(elm).css({top: p.top + 5, left: p.left})
if (p) $(elm).css({ top: p.top + 5, left: p.left });
}),
moveDraggableLeft: defineShortcut(() => {
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
const elm =
whiteboard.tool === "text"
? $("#" + whiteboard.latestActiveTextBoxId)
: $(".dragMe")[0];
const p = $(elm).position();
if (p) $(elm).css({top: p.top, left: p.left - 5})
if (p) $(elm).css({ top: p.top, left: p.left - 5 });
}),
moveDraggableRight: defineShortcut(() => {
const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
const elm =
whiteboard.tool === "text"
? $("#" + whiteboard.latestActiveTextBoxId)
: $(".dragMe")[0];
const p = $(elm).position();
if (p) $(elm).css({top: p.top, left: p.left + 5})
if (p) $(elm).css({ top: p.top, left: p.left + 5 });
}),
dropDraggable: defineShortcut(() => {
$($(".dragMe")[0]).find('.addToCanvasBtn').click();
$($(".dragMe")[0]).find(".addToCanvasBtn").click();
}),
addToBackground: defineShortcut(() => {
$($(".dragMe")[0]).find('.addToBackgroundBtn').click();
$($(".dragMe")[0]).find(".addToBackgroundBtn").click();
}),
cancelAllActions: defineShortcut(() => whiteboard.escKeyAction()),
deleteSelection: defineShortcut(() => whiteboard.delKeyAction()),
}
};
export default shortcutFunctions;

8
src/js/utils.js
View File

@@ -4,9 +4,7 @@
* @param {Point} p2
*/
export function computeDist(p1, p2) {
return Math.sqrt(
Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)
);
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
}
/**
@@ -14,5 +12,5 @@ export function computeDist(p1, p2) {
* @returns {number}
*/
export function getCurrentTimeMs() {
return (new Date()).getTime();
}
return new Date().getTime();
}

683
src/js/whiteboard.js
View File

File diff suppressed because it is too large Load Diff