From a90d3d46c1c71d1aa833947a552cebfb8bd48835 Mon Sep 17 00:00:00 2001 From: raphael Date: Fri, 11 Jan 2019 15:58:58 +0100 Subject: [PATCH] add first version with text boxes --- public/css/main.css | 4 +++ public/index.html | 3 +++ public/js/whiteboard.js | 55 +++++++++++++++++++++++++++++++++++------ s_whiteboard.js | 9 ++++++- 4 files changed, 62 insertions(+), 9 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index 547ed7e..5631e2e 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -49,4 +49,8 @@ button { opacity: 1; -webkit-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; +} + +.textBox.active { + border: 1px dashed gray; } \ No newline at end of file diff --git a/public/index.html b/public/index.html index 7c2f96f..8833e51 100644 --- a/public/index.html +++ b/public/index.html @@ -55,6 +55,9 @@ + diff --git a/public/js/whiteboard.js b/public/js/whiteboard.js index 177fc12..d357a7f 100644 --- a/public/js/whiteboard.js +++ b/public/js/whiteboard.js @@ -335,6 +335,16 @@ var whiteboard = { _this.mouseover = true; }); + //On textcontainer click (Add a new textbox) + $(_this.textContainer).on("click", function (e) { + currX = (e.offsetX || e.pageX - $(e.target).offset().left); + currY = (e.offsetY || e.pageY - $(e.target).offset().top); + var fontsize = _this.thickness * 0.5; + var txId = 'tx'+(+new Date()); + _this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] }); + _this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true); + }); + var strgPressed = false; var zPressed = false; var shiftPressed = false; @@ -465,6 +475,7 @@ var whiteboard = { var _this = this; _this.canvas.height = _this.canvas.height; _this.imgContainer.empty(); + _this.textContainer.empty(); _this.sendFunction({ "t": "clear" }); _this.drawBuffer = []; _this.drawId = 0; @@ -474,7 +485,7 @@ var whiteboard = { var wasTextTool = false; if(_this.tool==="text") { wasTextTool = true; - _this.setTool("mouse"); + _this.setTool("mouse"); //Set to mouse tool while dropping to prevent errors } _this.imgDragActive = true; _this.mouseOverlay.css({ "cursor": "default" }); @@ -523,6 +534,28 @@ var whiteboard = { drawImgToBackground(url, width, height, left, top) { this.imgContainer.append('') }, + addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) { + var _this = this; + var textBox = $('
') + textBox.click(function(e) { + e.preventDefault(); + return false; + }) + this.textContainer.append(textBox); + textBox.on("input", function() { + var text = btoa($(this).html()); //Get html and make encode base64 + _this.sendFunction({ "t": "setTextboxText", "d": [txId, text] }); + }); + if(newLocalBox) { + textBox.focus(); + } + if(this.tool==="text") { + textBox.addClass("active"); + } + }, + setTextboxText(txId, text) { + $("#"+txId).html(atob(text)); //Set decoded base64 as html + }, drawImgToCanvas(url, width, height, left, top, doneCallback) { var _this = this; var img = document.createElement('img'); @@ -552,7 +585,6 @@ var whiteboard = { } _this.canvas.height = _this.canvas.height; _this.imgContainer.empty(); - console.log(_this.drawBuffer) _this.loadDataInSteps(_this.drawBuffer, false, function (stepData) { //Nothing to do }); @@ -564,8 +596,10 @@ var whiteboard = { setTool: function (tool) { this.tool = tool; if(this.tool==="text") { + $(".textBox").addClass("active"); this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front - } else { + } else { + $(".textBox").removeClass("active"); this.mouseOverlay.appendTo($(whiteboardContainer)); } this.refreshCursorAppearance(); @@ -597,11 +631,16 @@ var whiteboard = { } else { _this.drawImgToBackground(content["url"], data[0], data[1], data[2], data[3]); } + } else if (tool === "addTextBox") { + _this.addTextBox(data[0], data[1], data[2], data[3], data[4]); + } else if (tool === "setTextboxText") { + _this.setTextboxText(data[0], data[1]); } else if (tool === "clear") { _this.canvas.height = _this.canvas.height; - this.imgContainer.empty(); - this.drawBuffer = []; - this.drawId = 0; + _this.imgContainer.empty(); + _this.textContainer.empty(); + _this.drawBuffer = []; + _this.drawId = 0; } else if (tool === "cursor" && _this.settings) { if (content["event"] === "move") { if (_this.cursorContainer.find("." + content["username"]).length >= 1) { @@ -619,7 +658,7 @@ var whiteboard = { } }); - if (isNewData && (tool === "line" || tool === "pen" || tool === "rect" || tool === "circle" || tool === "eraser" || tool === "addImgBG" || tool === "recSelect" || tool === "eraseRec")) { + if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText"].includes(tool)) { content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId; content["username"] = content["username"] ? content["username"] : _this.settings.username; _this.drawBuffer.push(content); @@ -709,7 +748,7 @@ var whiteboard = { if (_this.settings.sendFunction) { _this.settings.sendFunction(content); } - if (tool === "line" || tool === "pen" || tool === "rect" || tool === "circle" || tool === "eraser" || tool === "addImgBG" || tool === "recSelect" || tool === "eraseRec") { + if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText"].includes(tool)) { _this.drawBuffer.push(content); } }, diff --git a/s_whiteboard.js b/s_whiteboard.js index ad35b44..237f8fa 100644 --- a/s_whiteboard.js +++ b/s_whiteboard.js @@ -22,11 +22,18 @@ module.exports = { } } } - } else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec"].includes(tool)) { //Save all this actions + } else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText"].includes(tool)) { //Save all this actions if(!savedBoards[wid]) { savedBoards[wid] = []; } delete content["wid"]; //Delete id from content so we don't store it twice + if(tool==="setTextboxText") { + for(var i=savedBoards[wid].length-1;i>=0;i--){ //Remove old textbox tex -> dont store it twice + if(savedBoards[wid][i]["t"]==="setTextboxText" && savedBoards[wid][i]["d"][0]===content["d"][0]) { + savedBoards[wid].splice(i,1); + } + } + } savedBoards[wid].push(content); } },