15 |
295 |
296 |
16 |
24 |
27 |
28 |
29 |
30 |
33 |
41 |
44 |
47 |
48 |
49 |
50 |
58 |
59 |
60 |
61 |
64 |
65 |
74 |
82 |
91 |
94 |
97 |
100 |
101 |
102 |
103 |
143 |
144 |
145 |
146 |
149 |
157 |
176 |
177 |
178 |
179 |
192 |
193 |
211 |
212 |
213 |
214 |
215 |
216 |
229 |
247 |
265 |
266 |
269 |
270 |
273 |
274 |
275 |
276 |
293 |
294 |
297 |
303 |
304 |
327 |
328 |
329 |
--------------------------------------------------------------------------------
/src/js/classes/Point.js:
--------------------------------------------------------------------------------
1 | import { computeDist } from "../utils.js";
2 |
3 | class Point {
4 | /**
5 | * @type {number}
6 | */
7 | #x;
8 | get x() {
9 | return this.#x;
10 | }
11 |
12 | /**
13 | * @type {number}
14 | */
15 | #y;
16 | get y() {
17 | return this.#y;
18 | }
19 |
20 | /**
21 | * @type {Point}
22 | */
23 | static #lastKnownPos = new Point(0, 0);
24 | static get lastKnownPos() {
25 | return Point.#lastKnownPos;
26 | }
27 |
28 | /**
29 | * @param {number} x
30 | * @param {number} y
31 | */
32 | constructor(x, y) {
33 | this.#x = x;
34 | this.#y = y;
35 | }
36 |
37 | get isZeroZero() {
38 | return this.#x === 0 && this.#y === 0;
39 | }
40 |
41 | set x(newX) {
42 | this.#x = newX;
43 | }
44 |
45 | set y(newY) {
46 | this.#y = newY;
47 | }
48 |
49 | /**
50 | * Get a Point object from an event
51 | * @param {event} e
52 | * @returns {Point}
53 | */
54 | static fromEvent(e) {
55 | // the epsilon hack is required to detect touches
56 | const epsilon = 0.0001;
57 | let x = (e.offsetX || e.pageX - $(e.target).offset().left) + epsilon;
58 | let y = (e.offsetY || e.pageY - $(e.target).offset().top) + epsilon;
59 |
60 | if (Number.isNaN(x) || Number.isNaN(y) || (x === epsilon && y === epsilon)) {
61 | // if it's a touch actually
62 | if (e.touches && e.touches.length && e.touches.length > 0) {
63 | const touch = e.touches[0];
64 | x = touch.clientX - $("#mouseOverlay").offset().left;
65 | y = touch.clientY - $("#mouseOverlay").offset().top;
66 | } else {
67 | // if it's a touchend event
68 | return Point.#lastKnownPos;
69 | }
70 | }
71 |
72 | Point.#lastKnownPos = new Point(x - epsilon, y - epsilon);
73 | return Point.#lastKnownPos;
74 | }
75 |
76 | /**
77 | * Compute euclidean distance between points
78 | *
79 | * @param {Point} otherPoint
80 | * @returns {number}
81 | */
82 | distTo(otherPoint) {
83 | return computeDist(this, otherPoint);
84 | }
85 | }
86 |
87 | export default Point;
88 |
--------------------------------------------------------------------------------
/src/js/icons.js:
--------------------------------------------------------------------------------
1 | import { library, dom } from "@fortawesome/fontawesome-svg-core";
2 | import {
3 | faUndo,
4 | faTrash,
5 | faCheck,
6 | faRedo,
7 | faMousePointer,
8 | faPencilAlt,
9 | faEraser,
10 | faImage,
11 | faFont,
12 | faSave,
13 | faUpload,
14 | faShareSquare,
15 | faAngleLeft,
16 | faAngleRight,
17 | faSortDown,
18 | faExpandArrowsAlt,
19 | faLock,
20 | faLockOpen,
21 | faInfoCircle,
22 | faGlobe,
23 | faStickyNote,
24 | faHandPaper,
25 | } from "@fortawesome/free-solid-svg-icons";
26 | import {
27 | faSquare,
28 | faCircle,
29 | faFile,
30 | faFileAlt,
31 | faPlusSquare,
32 | } from "@fortawesome/free-regular-svg-icons";
33 |
34 | library.add(
35 | faUndo,
36 | faTrash,
37 | faCheck,
38 | faRedo,
39 | faMousePointer,
40 | faPencilAlt,
41 | faEraser,
42 | faImage,
43 | faFont,
44 | faSave,
45 | faUpload,
46 | faShareSquare,
47 | faAngleLeft,
48 | faAngleRight,
49 | faSortDown,
50 | faExpandArrowsAlt,
51 | faSquare,
52 | faCircle,
53 | faFile,
54 | faFileAlt,
55 | faPlusSquare,
56 | faLock,
57 | faLockOpen,
58 | faInfoCircle,
59 | faGlobe,
60 | faStickyNote,
61 | faHandPaper
62 | );
63 |
64 | dom.i2svg();
65 |
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | import "jquery-ui/ui/widgets/draggable.js";
2 | import "jquery-ui/ui/widgets/resizable.js";
3 | import "jquery-ui-rotatable/jquery.ui.rotatable.js";
4 | import "jquery-ui/themes/base/resizable.css";
5 | import "../css/main.css";
6 |
7 | import "./icons.js";
8 | import main from "./main.js";
9 |
10 | $(function () {
11 | $("head").append(
12 | ''
13 | );
14 |
15 | main();
16 | });
17 |
--------------------------------------------------------------------------------
/src/js/keybinds.js:
--------------------------------------------------------------------------------
1 | /* -----------
2 | KEYBINDINGS
3 | ----------- */
4 |
5 | //> defmod is "command" on OS X and "ctrl" elsewhere
6 | //Advanced Example: 'defmod-k j' -> For this to fire you have to first press both ctrl and k, and then j.
7 |
8 | const keybinds = {
9 | // 'key(s)' : 'function',
10 | "defmod-shift-del": "clearWhiteboard",
11 | "defmod-z": "undoStep",
12 | "defmod-y": "redoStep",
13 | "defmod-x": "setTool_recSelect",
14 | "defmod-m": "setTool_mouse",
15 | "defmod-p": "setTool_pen",
16 | "defmod-l": "setTool_line",
17 | "defmod-r": "setTool_rect",
18 | "defmod-c": "setTool_circle",
19 | "defmod-space": "setTool_hand",
20 | "defmod-shift-f": "toggleLineRecCircle",
21 | "defmod-shift-x": "togglePenEraser",
22 | "defmod-shift-r": "toggleMainColors",
23 | "defmod-a": "setTool_text",
24 | "defmod-e": "setTool_eraser",
25 | "defmod-up": "thickness_bigger",
26 | "defmod-down": "thickness_smaller",
27 | "defmod-shift-c": "openColorPicker",
28 | "defmod-shift-1": "setDrawColorBlack",
29 | "defmod-shift-2": "setDrawColorBlue",
30 | "defmod-shift-3": "setDrawColorGreen",
31 | "defmod-shift-4": "setDrawColorYellow",
32 | "defmod-shift-5": "setDrawColorRed",
33 | "defmod-s": "saveWhiteboardAsImage",
34 | "defmod-shift-k": "saveWhiteboardAsJson",
35 | "defmod-shift-i": "uploadWhiteboardToWebDav",
36 | "defmod-shift-j": "uploadJsonToWhiteboard",
37 | "defmod-shift-s": "shareWhiteboard",
38 | tab: "hideShowControls",
39 | up: "moveDraggableUp",
40 | down: "moveDraggableDown",
41 | left: "moveDraggableLeft",
42 | right: "moveDraggableRight",
43 | "defmod-enter": "dropDraggable",
44 | "shift-enter": "addToBackground",
45 | escape: "cancelAllActions",
46 | del: "deleteSelection",
47 | };
48 |
49 | export default keybinds;
50 |
--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
1 | import keymage from "keymage";
2 | import { io } from "socket.io-client";
3 | import whiteboard from "./whiteboard.js";
4 | import keybinds from "./keybinds.js";
5 | import Picker from "vanilla-picker";
6 | import { dom } from "@fortawesome/fontawesome-svg-core";
7 | import shortcutFunctions from "./shortcutFunctions.js";
8 | import ReadOnlyService from "./services/ReadOnlyService.js";
9 | import InfoService from "./services/InfoService.js";
10 | import { getSubDir } from "./utils.js";
11 | import ConfigService from "./services/ConfigService.js";
12 | import { v4 as uuidv4 } from "uuid";
13 |
14 | import * as pdfjsLib from "pdfjs-dist/webpack.mjs";
15 |
16 | const urlParams = new URLSearchParams(window.location.search);
17 | let whiteboardId = urlParams.get("whiteboardid");
18 | const randomid = urlParams.get("randomid");
19 |
20 | if (randomid) {
21 | whiteboardId = uuidv4();
22 | urlParams.delete("randomid");
23 | window.location.search = urlParams;
24 | }
25 |
26 | if (!whiteboardId) {
27 | whiteboardId = "myNewWhiteboard";
28 | }
29 |
30 | whiteboardId = unescape(encodeURIComponent(whiteboardId)).replace(/[^a-zA-Z0-9\-]/g, "");
31 |
32 | if (urlParams.get("whiteboardid") !== whiteboardId) {
33 | urlParams.set("whiteboardid", whiteboardId);
34 | window.location.search = urlParams;
35 | }
36 |
37 | const myUsername = urlParams.get("username") || "unknown" + (Math.random() + "").substring(2, 6);
38 | const accessToken = urlParams.get("accesstoken") || "";
39 | const copyfromwid = urlParams.get("copyfromwid") || "";
40 |
41 | // Custom Html Title
42 | const title = urlParams.get("title");
43 | if (title) {
44 | document.title = decodeURIComponent(title);
45 | }
46 |
47 | const subdir = getSubDir();
48 | let signaling_socket;
49 |
50 | function main() {
51 | signaling_socket = io("", { path: subdir + "/ws-api" }); // Connect even if we are in a subdir behind a reverse proxy
52 |
53 | signaling_socket.on("connect", function () {
54 | console.log("Websocket connected!");
55 |
56 | signaling_socket.on("whiteboardConfig", (serverResponse) => {
57 | ConfigService.initFromServer(serverResponse);
58 | // Inti whiteboard only when we have the config from the server
59 | initWhiteboard();
60 | });
61 |
62 | signaling_socket.on("whiteboardInfoUpdate", (info) => {
63 | InfoService.updateInfoFromServer(info);
64 | whiteboard.updateSmallestScreenResolution();
65 | });
66 |
67 | signaling_socket.on("drawToWhiteboard", function (content) {
68 | whiteboard.handleEventsAndData(content, true);
69 | InfoService.incrementNbMessagesReceived();
70 | });
71 |
72 | signaling_socket.on("refreshUserBadges", function () {
73 | whiteboard.refreshUserBadges();
74 | });
75 |
76 | let accessDenied = false;
77 | signaling_socket.on("wrongAccessToken", function () {
78 | if (!accessDenied) {
79 | accessDenied = true;
80 | showBasicAlert("Access denied! Wrong accessToken!");
81 | }
82 | });
83 |
84 | signaling_socket.emit("joinWhiteboard", {
85 | wid: whiteboardId,
86 | at: accessToken,
87 | windowWidthHeight: { w: $(window).width(), h: $(window).height() },
88 | });
89 | });
90 | }
91 |
92 | function showBasicAlert(html, newOptions) {
93 | var options = {
94 | header: "INFO MESSAGE",
95 | okBtnText: "Ok",
96 | headercolor: "#d25d5d",
97 | hideAfter: false,
98 | onOkClick: false,
99 | };
100 | if (newOptions) {
101 | for (var i in newOptions) {
102 | options[i] = newOptions[i];
103 | }
104 | }
105 | var alertHtml = $(
106 | 'Whiteboard information:
298 |# connected users: 0
299 |Smallest screen resolution: Unknown.
300 |# msg. sent to server: 0
301 |# msg. received from server: 0
302 |' +
107 | '
"
119 | );
120 | alertHtml.find(".htmlcontent").append(html);
121 | $("body").append(alertHtml);
122 | alertHtml
123 | .find(".okbtn")
124 | .off("click")
125 | .click(function () {
126 | if (options.onOkClick) {
127 | options.onOkClick();
128 | }
129 | alertHtml.remove();
130 | });
131 | alertHtml
132 | .find(".closeAlert")
133 | .off("click")
134 | .click(function () {
135 | alertHtml.remove();
136 | });
137 |
138 | if (options.hideAfter) {
139 | setTimeout(function () {
140 | alertHtml.find(".okbtn").click();
141 | }, 1000 * options.hideAfter);
142 | }
143 | }
144 |
145 | function initWhiteboard() {
146 | $(document).ready(function () {
147 | // by default set in readOnly mode
148 | ReadOnlyService.activateReadOnlyMode();
149 |
150 | if (urlParams.get("webdav") === "true") {
151 | $("#uploadWebDavBtn").show();
152 | }
153 |
154 | whiteboard.loadWhiteboard("#whiteboardContainer", {
155 | //Load the whiteboard
156 | whiteboardId: whiteboardId,
157 | username: btoa(encodeURIComponent(myUsername)),
158 | backgroundGridUrl: "./images/" + ConfigService.backgroundGridImage,
159 | sendFunction: function (content) {
160 | if (ReadOnlyService.readOnlyActive) return;
161 | //ADD IN LATER THROUGH CONFIG
162 | // if (content.t === 'cursor') {
163 | // if (whiteboard.drawFlag) return;
164 | // }
165 | content["at"] = accessToken;
166 | signaling_socket.emit("drawToWhiteboard", content);
167 | InfoService.incrementNbMessagesSent();
168 | },
169 | });
170 |
171 | // request whiteboard from server
172 | $.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(
173 | function (data) {
174 | //console.log(data);
175 | whiteboard.loadData(data);
176 | if (copyfromwid && data.length == 0) {
177 | //Copy from witheboard if current is empty and get parameter is given
178 | $.get(subdir + "/api/loadwhiteboard", {
179 | wid: copyfromwid,
180 | at: accessToken,
181 | }).done(function (data) {
182 | whiteboard.loadData(data);
183 | });
184 | }
185 | }
186 | );
187 |
188 | $(window).resize(function () {
189 | signaling_socket.emit("updateScreenResolution", {
190 | at: accessToken,
191 | windowWidthHeight: { w: $(window).width(), h: $(window).height() },
192 | });
193 | });
194 |
195 | /*----------------/
196 | Whiteboard actions
197 | /----------------*/
198 |
199 | var tempLineTool = false;
200 | var strgPressed = false;
201 | //Handle key actions
202 | $(document).on("keydown", function (e) {
203 | if (e.which == 16) {
204 | if (whiteboard.tool == "pen" && !strgPressed) {
205 | tempLineTool = true;
206 | whiteboard.ownCursor.hide();
207 | if (whiteboard.drawFlag) {
208 | whiteboard.mouseup({
209 | offsetX: whiteboard.prevPos.x,
210 | offsetY: whiteboard.prevPos.y,
211 | });
212 | shortcutFunctions.setTool_line();
213 | whiteboard.mousedown({
214 | offsetX: whiteboard.prevPos.x,
215 | offsetY: whiteboard.prevPos.y,
216 | });
217 | } else {
218 | shortcutFunctions.setTool_line();
219 | }
220 | }
221 | whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
222 | } else if (e.which == 17) {
223 | strgPressed = true;
224 | }
225 | //console.log(e.which);
226 | });
227 | $(document).on("keyup", function (e) {
228 | if (e.which == 16) {
229 | if (tempLineTool) {
230 | tempLineTool = false;
231 | shortcutFunctions.setTool_pen();
232 | whiteboard.ownCursor.show();
233 | }
234 | whiteboard.pressedKeys["shift"] = false;
235 | } else if (e.which == 17) {
236 | strgPressed = false;
237 | }
238 | });
239 |
240 | //Load keybindings from keybinds.js to given functions
241 | Object.entries(keybinds).forEach(([key, functionName]) => {
242 | const associatedShortcutFunction = shortcutFunctions[functionName];
243 | if (associatedShortcutFunction) {
244 | keymage(key, associatedShortcutFunction, { preventDefault: true });
245 | } else {
246 | console.error(
247 | "Function you want to keybind on key:",
248 | key,
249 | "named:",
250 | functionName,
251 | "is not available!"
252 | );
253 | }
254 | });
255 |
256 | // whiteboard clear button
257 | $("#whiteboardTrashBtn")
258 | .off("click")
259 | .click(function () {
260 | $("#whiteboardTrashBtnConfirm").show().focus();
261 | $(this).hide();
262 | });
263 |
264 | $("#whiteboardTrashBtnConfirm").mouseout(function () {
265 | $(this).hide();
266 | $("#whiteboardTrashBtn").show();
267 | });
268 |
269 | $("#whiteboardTrashBtnConfirm")
270 | .off("click")
271 | .click(function () {
272 | $(this).hide();
273 | $("#whiteboardTrashBtn").show();
274 | whiteboard.clearWhiteboard();
275 | });
276 |
277 | // undo button
278 | $("#whiteboardUndoBtn")
279 | .off("click")
280 | .click(function () {
281 | whiteboard.undoWhiteboardClick();
282 | });
283 |
284 | // redo button
285 | $("#whiteboardRedoBtn")
286 | .off("click")
287 | .click(function () {
288 | whiteboard.redoWhiteboardClick();
289 | });
290 |
291 | // view only
292 | $("#whiteboardLockBtn")
293 | .off("click")
294 | .click(() => {
295 | ReadOnlyService.deactivateReadOnlyMode();
296 | });
297 | $("#whiteboardUnlockBtn")
298 | .off("click")
299 | .click(() => {
300 | ReadOnlyService.activateReadOnlyMode();
301 | });
302 | $("#whiteboardUnlockBtn").hide();
303 | $("#whiteboardLockBtn").show();
304 |
305 | // switch tool
306 | $(".whiteboard-tool")
307 | .off("click")
308 | .click(function () {
309 | $(".whiteboard-tool").removeClass("active");
310 | $(this).addClass("active");
311 | var activeTool = $(this).attr("tool");
312 | whiteboard.setTool(activeTool);
313 | if (activeTool == "mouse" || activeTool == "recSelect") {
314 | $(".activeToolIcon").empty();
315 | } else {
316 | $(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
317 | }
318 |
319 | if (activeTool == "text" || activeTool == "stickynote") {
320 | $("#textboxBackgroundColorPickerBtn").show();
321 | } else {
322 | $("#textboxBackgroundColorPickerBtn").hide();
323 | }
324 | let savedThickness = localStorage.getItem("item_thickness_" + activeTool);
325 | if (savedThickness) {
326 | whiteboard.setStrokeThickness(savedThickness);
327 | $("#whiteboardThicknessSlider").val(savedThickness);
328 | }
329 | });
330 |
331 | // upload image button
332 | $("#addImgToCanvasBtn")
333 | .off("click")
334 | .click(function () {
335 | if (ReadOnlyService.readOnlyActive) return;
336 | showBasicAlert(`Please drag the image into the browser.' +
108 | '
" +
118 | "' +
111 | options["header"] +
112 | '
' +
113 | '' +
114 | '" +
117 | "x
337 | Or upload here: `); 338 | document.getElementById("manualFileUpload").addEventListener( 339 | "change", 340 | function (e) { 341 | $(".basicalert").remove(); 342 | if (ReadOnlyService.readOnlyActive) return; 343 | e.originalEvent = { dataTransfer: { files: e.target.files } }; 344 | handleFileUploadEvent(e); 345 | }, 346 | false 347 | ); 348 | }); 349 | 350 | // save image as imgae 351 | $("#saveAsImageBtn") 352 | .off("click") 353 | .click(function () { 354 | whiteboard.getImageDataBase64( 355 | { 356 | imageFormat: ConfigService.imageDownloadFormat, 357 | drawBackgroundGrid: ConfigService.drawBackgroundGrid, 358 | }, 359 | function (imgData) { 360 | var w = window.open("about:blank"); //Firefox will not allow downloads without extra window 361 | setTimeout(function () { 362 | //FireFox seems to require a setTimeout for this to work. 363 | var a = document.createElement("a"); 364 | a.href = imgData; 365 | a.download = "whiteboard." + ConfigService.imageDownloadFormat; 366 | w.document.body.appendChild(a); 367 | a.click(); 368 | w.document.body.removeChild(a); 369 | setTimeout(function () { 370 | w.close(); 371 | }, 100); 372 | }, 0); 373 | } 374 | ); 375 | }); 376 | 377 | // save image to json containing steps 378 | $("#saveAsJSONBtn") 379 | .off("click") 380 | .click(function () { 381 | var imgData = whiteboard.getImageDataJson(); 382 | 383 | var w = window.open("about:blank"); //Firefox will not allow downloads without extra window 384 | setTimeout(function () { 385 | //FireFox seems to require a setTimeout for this to work. 386 | var a = document.createElement("a"); 387 | a.href = window.URL.createObjectURL(new Blob([imgData], { type: "text/json" })); 388 | a.download = "whiteboard.json"; 389 | w.document.body.appendChild(a); 390 | a.click(); 391 | w.document.body.removeChild(a); 392 | setTimeout(function () { 393 | w.close(); 394 | }, 100); 395 | }, 0); 396 | }); 397 | 398 | $("#uploadWebDavBtn") 399 | .off("click") 400 | .click(function () { 401 | if ($(".webdavUploadBtn").length > 0) { 402 | return; 403 | } 404 | 405 | var webdavserver = localStorage.getItem("webdavserver") || ""; 406 | var webdavpath = localStorage.getItem("webdavpath") || "/"; 407 | var webdavusername = localStorage.getItem("webdavusername") || ""; 408 | var webdavpassword = localStorage.getItem("webdavpassword") || ""; 409 | var webDavHtml = $( 410 | `
411 |
412 |
444 |
`
445 | );
446 | webDavHtml
447 | .find(".webdavUploadBtn")
448 | .off("click")
449 | .click(function () {
450 | var webdavserver = webDavHtml.find(".webdavserver").val();
451 | localStorage.setItem("webdavserver", webdavserver);
452 | var webdavpath = webDavHtml.find(".webdavpath").val();
453 | localStorage.setItem("webdavpath", webdavpath);
454 | var webdavusername = webDavHtml.find(".webdavusername").val();
455 | localStorage.setItem("webdavusername", webdavusername);
456 | var webdavpassword = webDavHtml.find(".webdavpassword").val();
457 | localStorage.setItem("webdavpassword", webdavpassword);
458 | whiteboard.getImageDataBase64(
459 | {
460 | imageFormat: ConfigService.imageDownloadFormat,
461 | drawBackgroundGrid: ConfigService.drawBackgroundGrid,
462 | },
463 | function (base64data) {
464 | var webdavaccess = {
465 | webdavserver: webdavserver,
466 | webdavpath: webdavpath,
467 | webdavusername: webdavusername,
468 | webdavpassword: webdavpassword,
469 | };
470 | webDavHtml.find(".loadingWebdavText").show();
471 | webDavHtml.find(".webdavUploadBtn").hide();
472 | saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
473 | if (err) {
474 | webDavHtml.find(".loadingWebdavText").hide();
475 | webDavHtml.find(".webdavUploadBtn").show();
476 | } else {
477 | webDavHtml.parents(".basicalert").remove();
478 | }
479 | });
480 | }
481 | );
482 | });
483 | showBasicAlert(webDavHtml, {
484 | header: "Save to Webdav",
485 | okBtnText: "cancel",
486 | headercolor: "#0082c9",
487 | });
488 | // render newly added icons
489 | dom.i2svg();
490 | });
491 |
492 | // upload json containing steps
493 | $("#uploadJsonBtn")
494 | .off("click")
495 | .click(function () {
496 | $("#myFile").click();
497 | });
498 |
499 | $("#shareWhiteboardBtn")
500 | .off("click")
501 | .click(() => {
502 | function urlToClipboard(whiteboardId = null) {
503 | const { protocol, host, pathname, search } = window.location;
504 | const basePath = `${protocol}//${host}${pathname}`;
505 | const getParams = new URLSearchParams(search);
506 |
507 | // Clear ursername from get parameters
508 | getParams.delete("username");
509 |
510 | if (whiteboardId) {
511 | // override whiteboardId value in URL
512 | getParams.set("whiteboardid", whiteboardId);
513 | }
514 |
515 | const url = `${basePath}?${getParams.toString()}`;
516 | $("")
517 | .appendTo("body")
518 | .val(url)
519 | .select()
520 | .each(() => {
521 | document.execCommand("copy");
522 | })
523 | .remove();
524 | }
525 |
526 | // UI related
527 | // clear message
528 | $("#shareWhiteboardDialogMessage").toggleClass("displayNone", true);
529 |
530 | $("#shareWhiteboardDialog").toggleClass("displayNone", false);
531 | $("#shareWhiteboardDialogGoBack")
532 | .off("click")
533 | .click(() => {
534 | $("#shareWhiteboardDialog").toggleClass("displayNone", true);
535 | });
536 |
537 | $("#shareWhiteboardDialogCopyReadOnlyLink")
538 | .off("click")
539 | .click(() => {
540 | urlToClipboard(ConfigService.correspondingReadOnlyWid);
541 |
542 | $("#shareWhiteboardDialogMessage")
543 | .toggleClass("displayNone", false)
544 | .text("Read-only link copied to clipboard ✓");
545 | });
546 |
547 | $("#shareWhiteboardDialogCopyReadWriteLink")
548 | .toggleClass("displayNone", ConfigService.isReadOnly)
549 | .click(() => {
550 | $("#shareWhiteboardDialogMessage")
551 | .toggleClass("displayNone", false)
552 | .text("Read/write link copied to clipboard ✓");
553 | urlToClipboard();
554 | });
555 | });
556 |
557 | $("#displayWhiteboardInfoBtn")
558 | .off("click")
559 | .click(() => {
560 | InfoService.toggleDisplayInfo();
561 | });
562 |
563 | var btnsMini = false;
564 | $("#minMaxBtn")
565 | .off("click")
566 | .click(function () {
567 | if (!btnsMini) {
568 | $("#toolbar").find(".btn-group:not(.minGroup)").hide();
569 | $(this).find("#minBtn").hide();
570 | $(this).find("#maxBtn").show();
571 | } else {
572 | $("#toolbar").find(".btn-group").show();
573 | $(this).find("#minBtn").show();
574 | $(this).find("#maxBtn").hide();
575 | }
576 | btnsMini = !btnsMini;
577 | });
578 |
579 | // load json to whiteboard
580 | $("#myFile").on("change", function () {
581 | var file = document.getElementById("myFile").files[0];
582 | var reader = new FileReader();
583 | reader.onload = function (e) {
584 | try {
585 | var j = JSON.parse(e.target.result);
586 | whiteboard.loadJsonData(j);
587 | } catch (e) {
588 | showBasicAlert("File was not a valid JSON!");
589 | }
590 | };
591 | reader.readAsText(file);
592 | $(this).val("");
593 | });
594 |
595 | // On thickness slider change
596 | $("#whiteboardThicknessSlider").on("input", function () {
597 | if (ReadOnlyService.readOnlyActive) return;
598 | whiteboard.setStrokeThickness($(this).val());
599 | let activeTool = $(".whiteboard-tool.active").attr("tool");
600 | localStorage.setItem("item_thickness_" + activeTool, $(this).val());
601 | });
602 |
603 | let activeTool = $(".whiteboard-tool.active").attr("tool");
604 | let savedThickness = localStorage.getItem("item_thickness_" + activeTool);
605 | if (savedThickness) {
606 | whiteboard.setStrokeThickness(savedThickness);
607 | $("#whiteboardThicknessSlider").val(savedThickness);
608 | }
609 |
610 | // handle drag&drop
611 | var dragCounter = 0;
612 | $("#whiteboardContainer").on("dragenter", function (e) {
613 | if (ReadOnlyService.readOnlyActive) return;
614 | e.preventDefault();
615 | e.stopPropagation();
616 | dragCounter++;
617 | whiteboard.dropIndicator.show();
618 | });
619 |
620 | $("#whiteboardContainer").on("dragleave", function (e) {
621 | if (ReadOnlyService.readOnlyActive) return;
622 |
623 | e.preventDefault();
624 | e.stopPropagation();
625 | dragCounter--;
626 | if (dragCounter === 0) {
627 | whiteboard.dropIndicator.hide();
628 | }
629 | });
630 |
631 | function handleFileUploadEvent(e) {
632 | console.log(e);
633 | if (e.originalEvent.dataTransfer) {
634 | if (e.originalEvent.dataTransfer.files.length) {
635 | //File from harddisc
636 | e.preventDefault();
637 | e.stopPropagation();
638 | var filename = e.originalEvent.dataTransfer.files[0]["name"];
639 | if (isImageFileName(filename)) {
640 | var blob = e.originalEvent.dataTransfer.files[0];
641 | var reader = new window.FileReader();
642 | reader.readAsDataURL(blob);
643 | reader.onloadend = function () {
644 | const base64data = reader.result;
645 | uploadImgAndAddToWhiteboard(base64data);
646 | };
647 | } else if (isPDFFileName(filename)) {
648 | //Handle PDF Files
649 | var blob = e.originalEvent.dataTransfer.files[0];
650 |
651 | var reader = new window.FileReader();
652 | reader.onloadend = function () {
653 | var pdfData = new Uint8Array(this.result);
654 |
655 | var loadingTask = pdfjsLib.getDocument({ data: pdfData });
656 | loadingTask.promise.then(
657 | function (pdf) {
658 | console.log("PDF loaded");
659 |
660 | var currentDataUrl = null;
661 | var modalDiv = $(
662 | "| Server URL: | 414 |415 | | 416 | |
| Path: | 419 |420 | | path always have to start & end with "/" | 421 |
| Username: | 424 |425 | | 426 | |
| Password: | 429 |430 | | 431 | |
| 434 | Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server! 435 | | 436 |||
| 439 | | 440 | 441 | | 442 ||
" +
663 | "Page: " +
664 | '' +
665 | '![]()
' +
666 | "
"
667 | );
668 |
669 | modalDiv.find("select").change(function () {
670 | showPDFPageAsImage(parseInt($(this).val()));
671 | });
672 |
673 | modalDiv
674 | .find("button")
675 | .off("click")
676 | .click(function () {
677 | if (currentDataUrl) {
678 | $(".basicalert").remove();
679 | uploadImgAndAddToWhiteboard(currentDataUrl);
680 | }
681 | });
682 |
683 | for (var i = 1; i < pdf.numPages + 1; i++) {
684 | modalDiv
685 | .find("select")
686 | .append('");
687 | }
688 |
689 | showBasicAlert(modalDiv, {
690 | header: "Pdf to Image",
691 | okBtnText: "cancel",
692 | headercolor: "#0082c9",
693 | });
694 |
695 | // render newly added icons
696 | dom.i2svg();
697 |
698 | showPDFPageAsImage(1);
699 | function showPDFPageAsImage(pageNumber) {
700 | // Fetch the page
701 | pdf.getPage(pageNumber).then(function (page) {
702 | console.log("Page loaded");
703 |
704 | var scale = 1.5;
705 | var viewport = page.getViewport({ scale: scale });
706 |
707 | // Prepare canvas using PDF page dimensions
708 | var canvas = $("")[0];
709 | var context = canvas.getContext("2d");
710 | canvas.height = viewport.height;
711 | canvas.width = viewport.width;
712 |
713 | // Render PDF page into canvas context
714 | var renderContext = {
715 | canvasContext: context,
716 | viewport: viewport,
717 | };
718 | var renderTask = page.render(renderContext);
719 | renderTask.promise.then(function () {
720 | var dataUrl = canvas.toDataURL("image/jpeg", 1.0);
721 | currentDataUrl = dataUrl;
722 | modalDiv.find("img").attr("src", dataUrl);
723 | console.log("Page rendered");
724 | });
725 | });
726 | }
727 | },
728 | function (reason) {
729 | // PDF loading error
730 |
731 | showBasicAlert(
732 | "Error loading pdf as image! Check that this is a vaild pdf file!"
733 | );
734 | console.error(reason);
735 | }
736 | );
737 | };
738 | reader.readAsArrayBuffer(blob);
739 | } else {
740 | showBasicAlert("File must be an image!");
741 | }
742 | } else {
743 | //File from other browser
744 |
745 | var fileUrl = e.originalEvent.dataTransfer.getData("URL");
746 | var imageUrl = e.originalEvent.dataTransfer.getData("text/html");
747 | var rex = /src="?([^"\s]+)"?\s*/;
748 | var url = rex.exec(imageUrl);
749 | if (url && url.length > 1) {
750 | url = url[1];
751 | } else {
752 | url = "";
753 | }
754 |
755 | isValidImageUrl(fileUrl, function (isImage) {
756 | if (isImage && isImageFileName(url)) {
757 | whiteboard.addImgToCanvasByUrl(fileUrl);
758 | } else {
759 | isValidImageUrl(url, function (isImage) {
760 | if (isImage) {
761 | if (isImageFileName(url) || url.startsWith("http")) {
762 | whiteboard.addImgToCanvasByUrl(url);
763 | } else {
764 | uploadImgAndAddToWhiteboard(url); //Last option maybe its base64
765 | }
766 | } else {
767 | showBasicAlert("Can only upload Imagedata!");
768 | }
769 | });
770 | }
771 | });
772 | }
773 | }
774 | }
775 |
776 | $("#whiteboardContainer").on("drop", function (e) {
777 | //Handle drop
778 | if (ReadOnlyService.readOnlyActive) return;
779 |
780 | handleFileUploadEvent(e);
781 | dragCounter = 0;
782 | whiteboard.dropIndicator.hide();
783 | });
784 |
785 | if (!localStorage.getItem("savedColors")) {
786 | localStorage.setItem(
787 | "savedColors",
788 | JSON.stringify([
789 | "rgba(0, 0, 0, 1)",
790 | "rgba(255, 255, 255, 1)",
791 | "rgba(255, 0, 0, 1)",
792 | "rgba(0, 255, 0, 1)",
793 | "rgba(0, 0, 255, 1)",
794 | "rgba(255, 255, 0, 1)",
795 | "rgba(255, 0, 255, 1)",
796 | ])
797 | );
798 | }
799 |
800 | let colorPickerOnOpen = function (current_color) {
801 | this._domPalette = $(".picker_palette", this.domElement);
802 | const palette = JSON.parse(localStorage.getItem("savedColors"));
803 | if ($(".picker_splotch", this._domPalette).length === 0) {
804 | for (let i = 0; i < palette.length; i++) {
805 | let palette_Color_obj = new this.color.constructor(palette[i]);
806 | let splotch_div = $(
807 | 'x
'
810 | )
811 | .addClass("picker_splotch")
812 | .attr({
813 | id: "s" + i,
814 | })
815 | .css("background-color", palette_Color_obj.hslaString)
816 | .on("click", { that: this, obj: palette_Color_obj }, function (e) {
817 | e.data.that._setColor(e.data.obj.hslaString);
818 | });
819 | splotch_div.find(".removeColor").on("click", function (e) {
820 | e.preventDefault();
821 | $(this).parent("div").remove();
822 | palette.splice(i, 1);
823 | localStorage.setItem("savedColors", JSON.stringify(palette));
824 | });
825 | this._domPalette.append(splotch_div);
826 | }
827 | }
828 | };
829 |
830 | const colorPickerTemplate = `
831 |
832 |
833 |
836 |
854 | `;
855 |
856 | let colorPicker = null;
857 | function intColorPicker(initColor) {
858 | if (colorPicker) {
859 | colorPicker.destroy();
860 | }
861 | colorPicker = new Picker({
862 | parent: $("#whiteboardColorpicker")[0],
863 | color: initColor || "#000000",
864 | onChange: function (color) {
865 | whiteboard.setDrawColor(color.rgbaString);
866 | },
867 | onDone: function (color) {
868 | let palette = JSON.parse(localStorage.getItem("savedColors"));
869 | if (!palette.includes(color.rgbaString)) {
870 | palette.push(color.rgbaString);
871 | localStorage.setItem("savedColors", JSON.stringify(palette));
872 | }
873 | intColorPicker(color.rgbaString);
874 | },
875 | onOpen: colorPickerOnOpen,
876 | template: colorPickerTemplate,
877 | });
878 | }
879 | intColorPicker();
880 |
881 | let bgColorPicker = null;
882 | function intBgColorPicker(initColor) {
883 | if (bgColorPicker) {
884 | bgColorPicker.destroy();
885 | }
886 | bgColorPicker = new Picker({
887 | parent: $("#textboxBackgroundColorPicker")[0],
888 | color: initColor || "#f5f587",
889 | bgcolor: initColor || "#f5f587",
890 | onChange: function (bgcolor) {
891 | whiteboard.setTextBackgroundColor(bgcolor.rgbaString);
892 | },
893 | onDone: function (bgcolor) {
894 | let palette = JSON.parse(localStorage.getItem("savedColors"));
895 | if (!palette.includes(color.rgbaString)) {
896 | palette.push(color.rgbaString);
897 | localStorage.setItem("savedColors", JSON.stringify(palette));
898 | }
899 | intBgColorPicker(color.rgbaString);
900 | },
901 | onOpen: colorPickerOnOpen,
902 | template: colorPickerTemplate,
903 | });
904 | }
905 | intBgColorPicker();
906 |
907 | // on startup select mouse
908 | shortcutFunctions.setTool_mouse();
909 | // fix bug cursor not showing up
910 | whiteboard.refreshCursorAppearance();
911 |
912 | if (process.env.NODE_ENV === "production") {
913 | if (ConfigService.readOnlyOnWhiteboardLoad) ReadOnlyService.activateReadOnlyMode();
914 | else ReadOnlyService.deactivateReadOnlyMode();
915 |
916 | if (ConfigService.displayInfoOnWhiteboardLoad) InfoService.displayInfo();
917 | else InfoService.hideInfo();
918 | } else {
919 | // in dev
920 | ReadOnlyService.deactivateReadOnlyMode();
921 | InfoService.displayInfo();
922 | }
923 |
924 | // In any case, if we are on read-only whiteboard we activate read-only mode
925 | if (ConfigService.isReadOnly) ReadOnlyService.activateReadOnlyMode();
926 |
927 | $("body").show();
928 | });
929 |
930 | //Prevent site from changing tab on drag&drop
931 | window.addEventListener(
932 | "dragover",
933 | function (e) {
934 | e = e || event;
935 | e.preventDefault();
936 | },
937 | false
938 | );
939 | window.addEventListener(
940 | "drop",
941 | function (e) {
942 | e = e || event;
943 | e.preventDefault();
944 | },
945 | false
946 | );
947 |
948 | function uploadImgAndAddToWhiteboard(base64data) {
949 | const date = +new Date();
950 | $.ajax({
951 | type: "POST",
952 | url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "/api/upload",
953 | data: {
954 | imagedata: base64data,
955 | wid: whiteboardId,
956 | date: date,
957 | at: accessToken,
958 | },
959 | success: function (msg) {
960 | const { correspondingReadOnlyWid } = ConfigService;
961 | const filename = `${correspondingReadOnlyWid}_${date}.png`;
962 | const rootUrl = document.URL.substr(0, document.URL.lastIndexOf("/"));
963 | whiteboard.addImgToCanvasByUrl(
964 | `${rootUrl}/uploads/${correspondingReadOnlyWid}/${filename}`
965 | ); //Add image to canvas
966 | console.log("Image uploaded!");
967 | },
968 | error: function (err) {
969 | showBasicAlert("Failed to upload frame: " + JSON.stringify(err));
970 | },
971 | });
972 | }
973 |
974 | function saveWhiteboardToWebdav(base64data, webdavaccess, callback) {
975 | var date = +new Date();
976 | $.ajax({
977 | type: "POST",
978 | url: document.URL.substr(0, document.URL.lastIndexOf("/")) + "/api/upload",
979 | data: {
980 | imagedata: base64data,
981 | wid: whiteboardId,
982 | date: date,
983 | at: accessToken,
984 | webdavaccess: JSON.stringify(webdavaccess),
985 | },
986 | success: function (msg) {
987 | showBasicAlert("Whiteboard was saved to Webdav!", {
988 | headercolor: "#5c9e5c",
989 | });
990 | console.log("Image uploaded to webdav!");
991 | callback();
992 | },
993 | error: function (err) {
994 | console.error(err);
995 | if (err.status == 403) {
996 | showBasicAlert(
997 | "Could not connect to Webdav folder! Please check the credentials and paths and try again!"
998 | );
999 | } else {
1000 | showBasicAlert("Unknown Webdav error! ", err);
1001 | }
1002 | callback(err);
1003 | },
1004 | });
1005 | }
1006 |
1007 | // verify if filename refers to an image
1008 | function isImageFileName(filename) {
1009 | var extension = filename.split(".")[filename.split(".").length - 1];
1010 | var known_extensions = ["png", "jpg", "jpeg", "gif", "tiff", "bmp", "webp"];
1011 | return known_extensions.includes(extension.toLowerCase());
1012 | }
1013 |
1014 | // verify if filename refers to an pdf
1015 | function isPDFFileName(filename) {
1016 | var extension = filename.split(".")[filename.split(".").length - 1];
1017 | var known_extensions = ["pdf"];
1018 | return known_extensions.includes(extension.toLowerCase());
1019 | }
1020 |
1021 | // verify if given url is url to an image
1022 | function isValidImageUrl(url, callback) {
1023 | var img = new Image();
1024 | var timer = null;
1025 | img.onerror = img.onabort = function () {
1026 | clearTimeout(timer);
1027 | callback(false);
1028 | };
1029 | img.onload = function () {
1030 | clearTimeout(timer);
1031 | callback(true);
1032 | };
1033 | timer = setTimeout(function () {
1034 | callback(false);
1035 | }, 2000);
1036 | img.src = url;
1037 | }
1038 |
1039 | // handle pasting from clipboard
1040 | window.addEventListener("paste", function (e) {
1041 | if ($(".basicalert").length > 0 || !!e.origin) {
1042 | return;
1043 | }
1044 | if (e.clipboardData) {
1045 | var items = e.clipboardData.items;
1046 | var imgItemFound = false;
1047 | if (items) {
1048 | // Loop through all items, looking for any kind of image
1049 | for (var i = 0; i < items.length; i++) {
1050 | if (items[i].type.indexOf("image") !== -1) {
1051 | imgItemFound = true;
1052 | // We need to represent the image as a file,
1053 | var blob = items[i].getAsFile();
1054 |
1055 | var reader = new window.FileReader();
1056 | reader.readAsDataURL(blob);
1057 | reader.onloadend = function () {
1058 | console.log("Uploading image!");
1059 | let base64data = reader.result;
1060 | uploadImgAndAddToWhiteboard(base64data);
1061 | };
1062 | }
1063 | }
1064 | }
1065 |
1066 | if (!imgItemFound && whiteboard.tool != "text" && whiteboard.tool != "stickynote") {
1067 | showBasicAlert(
1068 | "Please Drag&Drop the image or pdf into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)"
1069 | );
1070 | }
1071 | }
1072 | });
1073 | }
1074 |
1075 | export default main;
1076 |
--------------------------------------------------------------------------------
/src/js/services/ConfigService.js:
--------------------------------------------------------------------------------
1 | import { getThrottling } from "./ConfigService.utils.js";
2 |
3 | /**
4 | * Class to hold the configuration sent by the backend
5 | */
6 | class ConfigService {
7 | /**
8 | * @type {object}
9 | */
10 | #configFromServer = {};
11 | get configFromServer() {
12 | return this.#configFromServer;
13 | }
14 |
15 | /**
16 | * Associated read-only id for this whiteboad
17 | * @type {string}
18 | */
19 | #correspondingReadOnlyWid = "";
20 | get correspondingReadOnlyWid() {
21 | return this.#correspondingReadOnlyWid;
22 | }
23 |
24 | /**
25 | * @type {boolean}
26 | */
27 | #isReadOnly = true;
28 | get isReadOnly() {
29 | return this.#isReadOnly;
30 | }
31 |
32 | /**
33 | * @type {{displayInfo: boolean, setReadOnly: boolean}}
34 | * @readonly
35 | */
36 | #onWhiteboardLoad = { setReadOnly: false, displayInfo: false };
37 | get readOnlyOnWhiteboardLoad() {
38 | return this.#onWhiteboardLoad.setReadOnly;
39 | }
40 | get displayInfoOnWhiteboardLoad() {
41 | return this.#onWhiteboardLoad.displayInfo;
42 | }
43 |
44 | /**
45 | * @type {boolean}
46 | */
47 | #showSmallestScreenIndicator = true;
48 | get showSmallestScreenIndicator() {
49 | return this.#showSmallestScreenIndicator;
50 | }
51 |
52 | /**
53 | * @type {string}
54 | */
55 | #imageDownloadFormat = "png";
56 | get imageDownloadFormat() {
57 | return this.#imageDownloadFormat;
58 | }
59 |
60 | /**
61 | * @type {boolean}
62 | */
63 | #drawBackgroundGrid = false;
64 | get drawBackgroundGrid() {
65 | return this.#drawBackgroundGrid;
66 | }
67 |
68 | /**
69 | * @type {string}
70 | */
71 | #backgroundGridImage = "bg_grid.png";
72 | get backgroundGridImage() {
73 | return this.#backgroundGridImage;
74 | }
75 |
76 | /**
77 | * @type {{minDistDelta: number, minTimeDelta: number}}
78 | */
79 | #pointerEventsThrottling = { minDistDelta: 0, minTimeDelta: 0 };
80 | get pointerEventsThrottling() {
81 | return this.#pointerEventsThrottling;
82 | }
83 |
84 | /**
85 | * @type {number}
86 | */
87 | #refreshInfoInterval = 1000;
88 | get refreshInfoInterval() {
89 | return this.#refreshInfoInterval;
90 | }
91 |
92 | /**
93 | * Init the service from the config sent by the server
94 | *
95 | * @param {object} configFromServer
96 | */
97 | initFromServer(configFromServer) {
98 | this.#configFromServer = configFromServer;
99 |
100 | const { common } = configFromServer;
101 | const {
102 | onWhiteboardLoad,
103 | showSmallestScreenIndicator,
104 | imageDownloadFormat,
105 | drawBackgroundGrid,
106 | backgroundGridImage,
107 | performance,
108 | } = common;
109 |
110 | this.#onWhiteboardLoad = onWhiteboardLoad;
111 | this.#showSmallestScreenIndicator = showSmallestScreenIndicator;
112 | this.#imageDownloadFormat = imageDownloadFormat;
113 | this.#drawBackgroundGrid = drawBackgroundGrid;
114 | this.#backgroundGridImage = backgroundGridImage;
115 | this.#refreshInfoInterval = 1000 / performance.refreshInfoFreq;
116 |
117 | const { whiteboardSpecific } = configFromServer;
118 | const { correspondingReadOnlyWid, isReadOnly } = whiteboardSpecific;
119 |
120 | this.#correspondingReadOnlyWid = correspondingReadOnlyWid;
121 | this.#isReadOnly = isReadOnly;
122 |
123 | console.log("Whiteboard config from server:", configFromServer, "parsed:", this);
124 | }
125 |
126 | /**
127 | * Refresh config that depends on the number of user connected to whiteboard
128 | *
129 | * @param {number} userCount
130 | */
131 | refreshUserCountDependant(userCount) {
132 | const { configFromServer } = this;
133 | const { common } = configFromServer;
134 | const { performance } = common;
135 | const { pointerEventsThrottling } = performance;
136 |
137 | this.#pointerEventsThrottling = getThrottling(pointerEventsThrottling, userCount);
138 | }
139 | }
140 |
141 | export default new ConfigService();
142 |
--------------------------------------------------------------------------------
/src/js/services/ConfigService.utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Helper to extract the correct throttling values based on the config and the number of user
3 | *
4 | * @param {Array.<{fromUserCount: number, minDistDelta: number, maxFreq: number}>} pointerEventsThrottling
5 | * @param {number} userCount
6 | * @return {{minDistDelta: number, minTimeDelta: number}}
7 | */
8 | export function getThrottling(pointerEventsThrottling, userCount) {
9 | let tmpOut = pointerEventsThrottling[0];
10 | let lastDistToUserCount = userCount - tmpOut.fromUserCount;
11 | if (lastDistToUserCount < 0) lastDistToUserCount = Number.MAX_VALUE;
12 | for (const el of pointerEventsThrottling) {
13 | const distToUserCount = userCount - el.fromUserCount;
14 | if (el.fromUserCount <= userCount && distToUserCount <= lastDistToUserCount) {
15 | tmpOut = el;
16 | lastDistToUserCount = distToUserCount;
17 | }
18 | }
19 |
20 | return { minDistDelta: tmpOut.minDistDelta, minTimeDelta: 1000 * (1 / tmpOut.maxFreq) };
21 | }
22 |
--------------------------------------------------------------------------------
/src/js/services/ConfigService.utils.test.js:
--------------------------------------------------------------------------------
1 | import { getThrottling } from "./ConfigService.utils";
2 |
3 | test("Simple throttling config", () => {
4 | const throttling = [{ fromUserCount: 0, minDistDelta: 1, maxFreq: 1 }];
5 |
6 | const target0 = { minDistDelta: 1, minTimeDelta: 1000 };
7 | expect(getThrottling(throttling, 0)).toEqual(target0);
8 |
9 | const target100 = { minDistDelta: 1, minTimeDelta: 1000 };
10 | expect(getThrottling(throttling, 100)).toEqual(target100);
11 | });
12 |
13 | test("Complex throttling config", () => {
14 | // mix ordering
15 | const throttling = [
16 | { fromUserCount: 100, minDistDelta: 100, maxFreq: 1 },
17 | { fromUserCount: 0, minDistDelta: 1, maxFreq: 1 },
18 | { fromUserCount: 50, minDistDelta: 50, maxFreq: 1 },
19 | ];
20 |
21 | const target0 = { minDistDelta: 1, minTimeDelta: 1000 };
22 | expect(getThrottling(throttling, 0)).toEqual(target0);
23 |
24 | const target50 = { minDistDelta: 50, minTimeDelta: 1000 };
25 | expect(getThrottling(throttling, 50)).toEqual(target50);
26 |
27 | const target100 = { minDistDelta: 100, minTimeDelta: 1000 };
28 | expect(getThrottling(throttling, 100)).toEqual(target100);
29 | });
30 |
--------------------------------------------------------------------------------
/src/js/services/InfoService.js:
--------------------------------------------------------------------------------
1 | import ConfigService from "./ConfigService.js";
2 |
3 | /**
4 | * Class the handle the information about the whiteboard
5 | */
6 | class InfoService {
7 | /**
8 | * @type {boolean}
9 | */
10 | #infoAreDisplayed = false;
11 | get infoAreDisplayed() {
12 | return this.#infoAreDisplayed;
13 | }
14 |
15 | /**
16 | * Holds the number of user connected to the server
17 | *
18 | * @type {number}
19 | */
20 | #nbConnectedUsers = -1;
21 | get nbConnectedUsers() {
22 | return this.#nbConnectedUsers;
23 | }
24 |
25 | /**
26 | * @type {{w: number, h: number}}
27 | */
28 | #smallestScreenResolution = undefined;
29 | get smallestScreenResolution() {
30 | return this.#smallestScreenResolution;
31 | }
32 |
33 | /**
34 | * @type {number}
35 | */
36 | #nbMessagesSent = 0;
37 | get nbMessagesSent() {
38 | return this.#nbMessagesSent;
39 | }
40 |
41 | /**
42 | * @type {number}
43 | */
44 | #nbMessagesReceived = 0;
45 | get nbMessagesReceived() {
46 | return this.#nbMessagesReceived;
47 | }
48 |
49 | /**
50 | * Holds the interval Id
51 | * @type {number}
52 | */
53 | #refreshInfoIntervalId = undefined;
54 | get refreshInfoIntervalId() {
55 | return this.#refreshInfoIntervalId;
56 | }
57 |
58 | /**
59 | * @param {number} nbConnectedUsers
60 | * @param {{w: number, h: number}} smallestScreenResolution
61 | */
62 | updateInfoFromServer({ nbConnectedUsers, smallestScreenResolution = undefined }) {
63 | if (this.#nbConnectedUsers !== nbConnectedUsers) {
64 | // Refresh config service parameters on nb connected user change
65 | ConfigService.refreshUserCountDependant(nbConnectedUsers);
66 | }
67 | this.#nbConnectedUsers = nbConnectedUsers;
68 | if (smallestScreenResolution) {
69 | this.#smallestScreenResolution = smallestScreenResolution;
70 | }
71 | }
72 |
73 | incrementNbMessagesReceived() {
74 | this.#nbMessagesReceived++;
75 | }
76 |
77 | incrementNbMessagesSent() {
78 | this.#nbMessagesSent++;
79 | }
80 |
81 | refreshDisplayedInfo() {
82 | const {
83 | nbMessagesReceived,
84 | nbMessagesSent,
85 | nbConnectedUsers,
86 | smallestScreenResolution: ssr,
87 | } = this;
88 | $("#messageReceivedCount")[0].innerText = String(nbMessagesReceived);
89 | $("#messageSentCount")[0].innerText = String(nbMessagesSent);
90 | $("#connectedUsersCount")[0].innerText = String(nbConnectedUsers);
91 | $("#smallestScreenResolution")[0].innerText = ssr ? `(${ssr.w}, ${ssr.h})` : "Unknown";
92 | }
93 |
94 | /**
95 | * Show the info div
96 | */
97 | displayInfo() {
98 | $("#whiteboardInfoContainer").toggleClass("displayNone", false);
99 | $("#displayWhiteboardInfoBtn").toggleClass("active", true);
100 | this.#infoAreDisplayed = true;
101 |
102 | this.refreshDisplayedInfo();
103 | this.#refreshInfoIntervalId = setInterval(() => {
104 | // refresh only on a specific interval to reduce
105 | // refreshing cost
106 | this.refreshDisplayedInfo();
107 | }, ConfigService.refreshInfoInterval);
108 | }
109 |
110 | /**
111 | * Hide the info div
112 | */
113 | hideInfo() {
114 | $("#whiteboardInfoContainer").toggleClass("displayNone", true);
115 | $("#displayWhiteboardInfoBtn").toggleClass("active", false);
116 | this.#infoAreDisplayed = false;
117 | const { refreshInfoIntervalId } = this;
118 | if (refreshInfoIntervalId) {
119 | clearInterval(refreshInfoIntervalId);
120 | this.#refreshInfoIntervalId = undefined;
121 | }
122 | }
123 |
124 | /**
125 | * Switch between hiding and showing the info div
126 | */
127 | toggleDisplayInfo() {
128 | const { infoAreDisplayed } = this;
129 | if (infoAreDisplayed) {
130 | this.hideInfo();
131 | } else {
132 | this.displayInfo();
133 | }
134 | }
135 | }
136 |
137 | export default new InfoService();
138 |
--------------------------------------------------------------------------------
/src/js/services/ReadOnlyService.js:
--------------------------------------------------------------------------------
1 | import ConfigService from "./ConfigService.js";
2 |
3 | /**
4 | * Class the handle the read-only logic
5 | */
6 | class ReadOnlyService {
7 | /**
8 | * @type {boolean}
9 | */
10 | #readOnlyActive = true;
11 | get readOnlyActive() {
12 | return this.#readOnlyActive;
13 | }
14 |
15 | /**
16 | * @type {object}
17 | */
18 | #previousToolHtmlElem = null;
19 | get previousToolHtmlElem() {
20 | return this.#previousToolHtmlElem;
21 | }
22 |
23 | /**
24 | * Activate read-only mode
25 | */
26 | activateReadOnlyMode() {
27 | this.#readOnlyActive = true;
28 |
29 | this.#previousToolHtmlElem = $(".whiteboard-tool.active");
30 |
31 | // switch to mouse tool to prevent the use of the
32 | // other tools
33 | $(".whiteboard-tool[tool=mouse]").click();
34 | $(".whiteboard-tool").prop("disabled", true);
35 | $(".whiteboard-tool[tool='hand']").prop("disabled", false);
36 |
37 | $(".whiteboard-edit-group > button").prop("disabled", true);
38 | $(".whiteboard-edit-group").addClass("group-disabled");
39 | $("#whiteboardUnlockBtn").hide();
40 | $("#whiteboardLockBtn").show();
41 | }
42 |
43 | /**
44 | * Deactivate read-only mode
45 | */
46 | deactivateReadOnlyMode() {
47 | if (ConfigService.isReadOnly) return;
48 |
49 | this.#readOnlyActive = false;
50 |
51 | $(".whiteboard-tool").prop("disabled", false);
52 | $(".whiteboard-edit-group > button").prop("disabled", false);
53 | $(".whiteboard-edit-group").removeClass("group-disabled");
54 | $("#whiteboardUnlockBtn").show();
55 | $("#whiteboardLockBtn").hide();
56 |
57 | // restore previously selected tool
58 | const { previousToolHtmlElem } = this;
59 | if (previousToolHtmlElem) previousToolHtmlElem.click();
60 | }
61 | }
62 |
63 | export default new ReadOnlyService();
64 |
--------------------------------------------------------------------------------
/src/js/services/ThrottlingService.js:
--------------------------------------------------------------------------------
1 | import Point from "../classes/Point.js";
2 | import { getCurrentTimeMs } from "../utils.js";
3 | import ConfigService from "./ConfigService.js";
4 |
5 | /**
6 | * Class to handle all the throttling logic
7 | */
8 | class ThrottlingService {
9 | /**
10 | * @type {number}
11 | */
12 | #lastSuccessTime = 0;
13 | get lastSuccessTime() {
14 | return this.#lastSuccessTime;
15 | }
16 |
17 | /**
18 | * @type {Point}
19 | */
20 | #lastPointPosition = new Point(0, 0);
21 | get lastPointPosition() {
22 | return this.#lastPointPosition;
23 | }
24 |
25 | /**
26 | * Helper to throttle events based on the configuration.
27 | * Only if checks are ok, the onSuccess callback will be called.
28 | *
29 | * @param {Point} newPosition New point position to base the throttling on
30 | * @param {function()} onSuccess Callback called when the throttling is successful
31 | */
32 | throttle(newPosition, onSuccess) {
33 | const newTime = getCurrentTimeMs();
34 | const { lastPointPosition, lastSuccessTime } = this;
35 | if (newTime - lastSuccessTime > ConfigService.pointerEventsThrottling.minTimeDelta) {
36 | if (
37 | lastPointPosition.distTo(newPosition) >
38 | ConfigService.pointerEventsThrottling.minDistDelta
39 | ) {
40 | onSuccess();
41 | this.#lastPointPosition = newPosition;
42 | this.#lastSuccessTime = newTime;
43 | }
44 | }
45 | }
46 | }
47 |
48 | export default new ThrottlingService();
49 |
--------------------------------------------------------------------------------
/src/js/shortcutFunctions.js:
--------------------------------------------------------------------------------
1 | import whiteboard from "./whiteboard.js";
2 | import ReadOnlyService from "./services/ReadOnlyService.js";
3 |
4 | /**
5 | * @param {function} callback
6 | * @param {boolean} readOnlySensitive should the shortcut function be active event when the whiteboard is in read-only mode
7 | */
8 | function defineShortcut(callback, readOnlySensitive = true) {
9 | return () => {
10 | if (readOnlySensitive && ReadOnlyService.readOnlyActive) return;
11 | callback();
12 | };
13 | }
14 |
15 | const shortcutFunctions = {
16 | clearWhiteboard: defineShortcut(() => whiteboard.clearWhiteboard()),
17 | undoStep: defineShortcut(() => whiteboard.undoWhiteboardClick()),
18 | redoStep: defineShortcut(() => whiteboard.redoWhiteboardClick()),
19 | setTool_mouse: defineShortcut(() => $(".whiteboard-tool[tool=mouse]").click()),
20 | setTool_recSelect: defineShortcut(() => $(".whiteboard-tool[tool=recSelect]").click()),
21 | setTool_pen: defineShortcut(() => {
22 | $(".whiteboard-tool[tool=pen]").click();
23 | whiteboard.redrawMouseCursor();
24 | }),
25 | setTool_hand: defineShortcut(() => {
26 | $(".whiteboard-tool[tool=hand]").click();
27 | }),
28 | setTool_line: defineShortcut(() => $(".whiteboard-tool[tool=line]").click()),
29 | setTool_rect: defineShortcut(() => $(".whiteboard-tool[tool=rect]").click()),
30 | setTool_circle: defineShortcut(() => $(".whiteboard-tool[tool=circle]").click()),
31 | setTool_text: defineShortcut(() => $(".whiteboard-tool[tool=text]").click()),
32 | setTool_eraser: defineShortcut(() => {
33 | $(".whiteboard-tool[tool=eraser]").click();
34 | whiteboard.redrawMouseCursor();
35 | }),
36 | thickness_bigger: defineShortcut(() => {
37 | const thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
38 | $("#whiteboardThicknessSlider").val(thickness);
39 | whiteboard.setStrokeThickness(thickness);
40 | whiteboard.redrawMouseCursor();
41 | }),
42 | thickness_smaller: defineShortcut(() => {
43 | const thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
44 | $("#whiteboardThicknessSlider").val(thickness);
45 | whiteboard.setStrokeThickness(thickness);
46 | whiteboard.redrawMouseCursor();
47 | }),
48 | openColorPicker: defineShortcut(() => $("#whiteboardColorpicker").click()),
49 | saveWhiteboardAsImage: defineShortcut(() => $("#saveAsImageBtn").click(), false),
50 | saveWhiteboardAsJson: defineShortcut(() => $("#saveAsJSONBtn").click(), false),
51 | uploadWhiteboardToWebDav: defineShortcut(() => $("#uploadWebDavBtn").click()),
52 | uploadJsonToWhiteboard: defineShortcut(() => $("#uploadJsonBtn").click()),
53 | shareWhiteboard: defineShortcut(() => $("#shareWhiteboardBtn").click(), false),
54 | hideShowControls: defineShortcut(() => $("#minMaxBtn").click(), false),
55 |
56 | setDrawColorBlack: defineShortcut(() => {
57 | whiteboard.setDrawColor("black");
58 | whiteboard.redrawMouseCursor();
59 | }),
60 | setDrawColorRed: defineShortcut(() => {
61 | whiteboard.setDrawColor("red");
62 | whiteboard.redrawMouseCursor();
63 | }),
64 | setDrawColorGreen: defineShortcut(() => {
65 | whiteboard.setDrawColor("green");
66 | whiteboard.redrawMouseCursor();
67 | }),
68 | setDrawColorBlue: defineShortcut(() => {
69 | whiteboard.setDrawColor("blue");
70 | whiteboard.redrawMouseCursor();
71 | }),
72 | setDrawColorYellow: defineShortcut(() => {
73 | whiteboard.setDrawColor("yellow");
74 | whiteboard.redrawMouseCursor();
75 | }),
76 | toggleLineRecCircle: defineShortcut(() => {
77 | const activeTool = $(".whiteboard-tool.active").attr("tool");
78 | if (activeTool === "line") {
79 | $(".whiteboard-tool[tool=rect]").click();
80 | } else if (activeTool === "rect") {
81 | $(".whiteboard-tool[tool=circle]").click();
82 | } else {
83 | $(".whiteboard-tool[tool=line]").click();
84 | }
85 | }),
86 | togglePenEraser: defineShortcut(() => {
87 | const activeTool = $(".whiteboard-tool.active").attr("tool");
88 | if (activeTool === "pen") {
89 | $(".whiteboard-tool[tool=eraser]").click();
90 | } else {
91 | $(".whiteboard-tool[tool=pen]").click();
92 | }
93 | }),
94 | toggleMainColors: defineShortcut(() => {
95 | const bgColor = $("#whiteboardColorpicker")[0].style.backgroundColor;
96 | if (bgColor === "blue") {
97 | shortcutFunctions.setDrawColorGreen();
98 | } else if (bgColor === "green") {
99 | shortcutFunctions.setDrawColorYellow();
100 | } else if (bgColor === "yellow") {
101 | shortcutFunctions.setDrawColorRed();
102 | } else if (bgColor === "red") {
103 | shortcutFunctions.setDrawColorBlack();
104 | } else {
105 | shortcutFunctions.setDrawColorBlue();
106 | }
107 | }),
108 | moveDraggableUp: defineShortcut(() => {
109 | const elm =
110 | whiteboard.tool === "text"
111 | ? $("#" + whiteboard.latestActiveTextBoxId)
112 | : $(".dragMe")[0];
113 | const p = $(elm).position();
114 | if (p) $(elm).css({ top: p.top - 5, left: p.left });
115 | }),
116 | moveDraggableDown: defineShortcut(() => {
117 | const elm =
118 | whiteboard.tool === "text"
119 | ? $("#" + whiteboard.latestActiveTextBoxId)
120 | : $(".dragMe")[0];
121 | const p = $(elm).position();
122 | if (p) $(elm).css({ top: p.top + 5, left: p.left });
123 | }),
124 | moveDraggableLeft: defineShortcut(() => {
125 | const elm =
126 | whiteboard.tool === "text"
127 | ? $("#" + whiteboard.latestActiveTextBoxId)
128 | : $(".dragMe")[0];
129 | const p = $(elm).position();
130 | if (p) $(elm).css({ top: p.top, left: p.left - 5 });
131 | }),
132 | moveDraggableRight: defineShortcut(() => {
133 | const elm =
134 | whiteboard.tool === "text"
135 | ? $("#" + whiteboard.latestActiveTextBoxId)
136 | : $(".dragMe")[0];
137 | const p = $(elm).position();
138 | if (p) $(elm).css({ top: p.top, left: p.left + 5 });
139 | }),
140 | dropDraggable: defineShortcut(() => {
141 | $($(".dragMe")[0]).find(".addToCanvasBtn").click();
142 | }),
143 | addToBackground: defineShortcut(() => {
144 | $($(".dragMe")[0]).find(".addToBackgroundBtn").click();
145 | }),
146 | cancelAllActions: defineShortcut(() => whiteboard.escKeyAction()),
147 | deleteSelection: defineShortcut(() => whiteboard.delKeyAction()),
148 | };
149 |
150 | export default shortcutFunctions;
151 |
--------------------------------------------------------------------------------
/src/js/utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Compute the euclidean distance between two points
3 | * @param {Point} p1
4 | * @param {Point} p2
5 | */
6 | export function computeDist(p1, p2) {
7 | return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
8 | }
9 |
10 | /**
11 | * Return the current time in ms since 1970
12 | * @returns {number}
13 | */
14 | export function getCurrentTimeMs() {
15 | return new Date().getTime();
16 | }
17 |
18 | export function getSubDir() {
19 | const url = document.URL.substr(0, document.URL.lastIndexOf("/"));
20 | const urlSplit = url.split("/");
21 | let subdir = "";
22 | for (let i = 3; i < urlSplit.length; i++) {
23 | subdir = subdir + "/" + urlSplit[i];
24 | }
25 |
26 | return subdir;
27 | }
28 |
--------------------------------------------------------------------------------
837 |
838 |
839 |
842 |
843 |
844 |
845 |
846 |
847 |
848 |
849 |
850 |
851 |
852 |
853 |