Added document tool to upload images

client-data/board.html

@@ -88,6 +88,7 @@
 	<script src="tools/eraser/eraser.js"></script>
 	<script src="tools/hand/hand.js"></script>
 	<script src="tools/zoom/zoom.js"></script>
+	<script src="tools/document/document.js"></script>
 	<script src="/js/canvascolor/canvascolor.min.js"></script>
 </body>
 

client-data/tools/document/document.js

@@ -0,0 +1,88 @@
+(function documents() { //Code isolation
+
+
+// This isn't an HTML5 canvas, it's an old svg hack, (the code is _that_ old!)
+
+    const xlinkNS = "http://www.w3.org/1999/xlink";
+    let imgCount = 1;
+
+    function onstart() {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept = "image/*";
+        fileInput.click();
+        fileInput.addEventListener("change", () => {
+            const reader = new FileReader();
+            reader.readAsDataURL(fileInput.files[0]);
+
+            reader.onload = function (e) {
+                const image = new Image();
+                image.src = e.target.result;
+                image.onload = function () {
+
+                    var uid = Tools.generateUID("doc"); // doc for document
+
+                    // File size as data url, approximately 1/3 larger than as bytestream
+                    //TODO: internationalization
+                    let size = image.src.toString().length;
+                    if (size > 1048576) { //TODO: get correct size from config
+                        alert("File too large");
+                        throw new Error("File too large");
+                    }
+
+                    if (Tools.svg.querySelectorAll("image").length > 5) { //TODO: get correct amount from config
+                        alert("Too many documents exist already");
+                        throw new Error("Too many documents exist already");
+                    }
+
+                    const msg = {
+                        id: uid,
+                        type: "doc",
+                        data: image.src,
+                        size: image.src.toString().length,
+                        w: this.width || 300,
+                        h: this.height || 300,
+                        x: (100 + document.documentElement.scrollLeft) / Tools.scale + 10 * imgCount,
+                        y: (100 + document.documentElement.scrollTop) / Tools.scale + 10 * imgCount
+                        //fileType: fileInput.files[0].type
+                    };
+                    draw(msg);
+                    Tools.send(msg,"Document");
+                    imgCount++;
+                };
+            };
+            // Tools.change(Tools.prevToolName);
+        });
+    }
+
+    function draw(msg) {
+        //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`;
+        //fakeCanvas.style.backgroundSize = "400px 500px";
+        var aspect = msg.w/msg.h;
+        var img = Tools.createSVGElement("image");
+        img.id=msg.id;
+        img.setAttribute("class", "layer-"+Tools.layer);
+        img.setAttributeNS(xlinkNS, "href", msg.data);
+        img.x.baseVal.value = msg['x'];
+        img.y.baseVal.value = msg['y'];
+        img.setAttribute("width", 400*aspect);
+        img.setAttribute("height", 400);
+        if(msg.transform)
+            img.setAttribute("transform",msg.transform);
+        Tools.svg.appendChild(img);
+
+    }
+
+    Tools.add({
+        "name": "Document",
+        //"shortcut": "",
+        "draw": draw,
+        "onstart": onstart,
+        "oneTouch":true,
+        "icon": "/tools/document/icon.svg",
+    });
+
+})(); //End of code isolation

server/configuration.js

@@ -25,4 +25,10 @@ module.exports = {
 
     /** Maximum value for any x or y on the board */
     MAX_BOARD_SIZE: parseInt(process.env['WBO_MAX_BOARD_SIZE']) || 65536,
+
+    /** Maximum size of uploaded documents default 1MB */
+    MAX_DOUMENT_SIZE: parseInt(process.env['WBO_MAX_DOCUMENT_SIZE']) || 1048576,
+
+    /** Maximum number of documents allowed */
+    MAX_DOCUMENTS: parseInt(process.env['WBO_MAX_DOCUMENTS']) || 5,
 };

server/sockets.js

@@ -1,6 +1,7 @@
 var iolib = require('socket.io')
 	, log = require("./log.js").log
-	, BoardData = require("./boardData.js").BoardData;
+	, BoardData = require("./boardData.js").BoardData
+	, config = require("./configuration");
 
 var MAX_EMIT_COUNT = 64; // Maximum number of draw operations before getting banned
 var MAX_EMIT_COUNT_PERIOD = 5000; // Duration (in ms) after which the emit count is reset
@@ -51,6 +52,9 @@ function socketConnection(socket) {
 		var board = await getBoard(name);
 		board.users.add(socket.id);
 		log('board joined', { 'board': board.name, 'users': board.users.size });
+
+		console.log(board);
+
 		return board;
 	}
 
@@ -96,6 +100,26 @@ function socketConnection(socket) {
 			return;
 		}
 
+		if (message.data.type === "doc") {
+			getBoard(boardName).then(boardData => {
+				let existingDocuments = 0;
+				for (key in boardData.board) {
+					if (boardData.board[key].type === "doc") {
+						existingDocuments += 1;
+					}
+					if (existingDocuments >= config.MAX_DOCUMENTS) {
+						console.warn("Received too many documents");
+						return;
+					}
+				}
+			});
+
+			if (!message.data.size || message.data.size > config.MAX_DOUMENT_SIZE) {
+				console.warn("Received too large file");
+				return;
+			}
+		}
+
 		//Send data to all other users connected on the same board
 		socket.broadcast.to(boardName).emit('broadcast', data);