WIP: Add Background Tool, Pointer Tool, Minio Support

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "onquit"
+    ]
+}

README.md

@@ -1,3 +1,6 @@
+# 654wak654 Fork
+Hi. This is a fork of the original project. It adds couple of small features (2 new tools and minio support). They are described briefly at the bottom of this README.
+
 # WBO
 
 WBO is an online collaborative whiteboard that allows many users to draw simultaneously on a large virtual board.
@@ -73,3 +76,12 @@ If you do that, the code is running directly on your machine, without any isolat
 ## Troubleshooting
 
 If you experience an issue or want to propose a new feature in WBO, please [open a github issue](https://github.com/lovasoa/whitebophir/issues/new).
+
+
+### Additional Features
+#### Two new tools:
+- Background (Shortcut: `b`): Allows you to upload an image for the background of the canvas. 
+- Pointer (Shortcut: `f`): Allows users to point at things for others to see.
+
+#### Minio suport:
+- Instead of writing to the filesystem, the server now saves boards to a minio instance. The configuration is inside  [server/minio.js](server/minio.js).

client-data/board.css

@@ -4,6 +4,10 @@ html, body, svg {
 	font-family: Liberation sans, sans-serif;
 }
 
+body {
+	overflow: hidden;
+}
+
 #canvas {
 	transform-origin: 0 0;
 }

client-data/board.html

@@ -89,6 +89,8 @@
 	<script src="tools/eraser/eraser.js"></script>
 	<script src="tools/hand/hand.js"></script>
 	<script src="tools/zoom/zoom.js"></script>
+	<script src="tools/background/background.js" type="module"></script>
+	<script src="tools/pointer/pointer.js" type="module"></script>
 	<script src="/js/canvascolor/canvascolor.min.js"></script>
 </body>
 

client-data/js/board.js

@@ -153,6 +153,7 @@ Tools.change = function (toolName) {
 
 	//Call the start callback of the new tool 
 	newtool.onstart(Tools.curTool);
+	Tools.prevToolName = curToolName;
 	Tools.curTool = newtool;
 };
 

client-data/tools/background/background.js

@@ -0,0 +1,37 @@
+// This isn't an HTML5 canvas, it's an old svg hack, (the code is _that_ old!)
+const fakeCanvas = document.getElementById("canvas");
+const uid = Tools.generateUID("b"); // b for background
+
+function onstart() {
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = "image/*";
+
+    fileInput.addEventListener("change", () => {
+        const file = fileInput.files[0];
+
+        Tools.drawAndSend({
+            id: uid,
+            data: file,
+            fileType: file.type
+        }, "Background");
+        Tools.change(Tools.prevToolName);
+    });
+
+    fileInput.click();
+}
+
+function draw(msg, self) {
+    const file = self ? msg.data : new Blob([msg.data], { type: msg.fileType });
+    const fileURL = URL.createObjectURL(file);
+
+    fakeCanvas.style.background = `url("${fileURL}") 170px 0px no-repeat`;
+}
+
+Tools.add({
+    "name": "Background",
+    "icon": "🖼️",
+    "shortcut": "b",
+    "draw": draw,
+    "onstart": onstart
+});

client-data/tools/pointer/pointer.css

@@ -0,0 +1,16 @@
+.pointer {
+    position: absolute;
+    font-size: 2.5rem;
+    visibility: hidden;
+    transform: translate(-50%, -50%);
+    cursor: none;
+    border-radius: 40%;
+}
+
+.pointer.visible {
+    visibility: visible;
+}
+
+.pointer.highlight {
+    background-color: cornflowerblue;
+}

client-data/tools/pointer/pointer.js

@@ -0,0 +1,93 @@
+const uid = Tools.generateUID("f"); // f for finger
+let lastTime = performance.now();
+
+const pointer = document.createElement("div");
+pointer.classList.add("pointer");
+pointer.innerHTML = "👆";
+
+Tools.board.appendChild(pointer);
+
+function movePointer(x, y) {
+    pointer.style.left = `${x * Tools.scale}px`;
+    pointer.style.top = `${y * Tools.scale}px`;
+
+    // TODO: Could find a better solution for JIP
+    if (!pointer.classList.contains("visible")) {
+        showPointer(true, false);
+    }
+}
+
+function move(x, y) {
+    movePointer(x, y);
+
+    if (performance.now() - lastTime > 70) {
+        Tools.send({
+            id: uid,
+            type: "update",
+            action: "move",
+            x,
+            y
+        }, "Pointer");
+        lastTime = performance.now();
+    }
+}
+
+function draw(msg) {
+    switch (msg.action) {
+        case "move":
+            movePointer(msg.x, msg.y);
+            break;
+        case "show":
+            showPointer(true, false);
+            break;
+        case "hide":
+            showPointer(false, false);
+            break;
+        case "highlight":
+            highlightPointer(true, false);
+            break;
+        case "noHighlight":
+            highlightPointer(false, false);
+            break;
+    }
+}
+
+function highlightPointer(highlight, self) {
+    pointer.classList.toggle("highlight", highlight);
+
+    if (self) {
+        Tools.send({
+            id: uid,
+            type: "update",
+            action: highlight ? "highlight" : "noHighlight"
+        }, "Pointer");
+    }
+}
+
+function showPointer(show, self) {
+    pointer.classList.toggle("visible", show);
+
+    if (self) {
+        Tools.send({
+            id: uid,
+            type: "update",
+            action: show ? "show" : "hide"
+        }, "Pointer");
+    }
+}
+
+Tools.add({
+    "name": "Pointer",
+    "icon": "👆",
+    "shortcut": "f",
+    "listeners": {
+        "press": () => highlightPointer(true, true),
+        "move": move,
+        "release": () => highlightPointer(false, true)
+    },
+    "draw": draw,
+    "onstart": () => showPointer(true, true),
+    "onquit": () => showPointer(false, true),
+    "mouseCursor": "none",
+    "stylesheet": "tools/pointer/pointer.css"
+});