diff --git a/public/css/main.css b/public/css/main.css index 5631e2e..ae01c33 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -53,4 +53,10 @@ button { .textBox.active { border: 1px dashed gray; +} +.textBox>.removeIcon { + display:none; +} +.textBox.active>.removeIcon { + display:block; } \ No newline at end of file diff --git a/public/js/whiteboard.js b/public/js/whiteboard.js index b60385c..0950e69 100644 --- a/public/js/whiteboard.js +++ b/public/js/whiteboard.js @@ -536,25 +536,37 @@ var whiteboard = { }, addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) { var _this = this; - var textBox = $('
') + var textBox = $('
'+ + '
'+ + '
x
'+ + '
') textBox.click(function(e) { e.preventDefault(); return false; }) this.textContainer.append(textBox); - textBox.on("input", function() { + textBox.find(".textContent").on("input", function() { var text = btoa($(this).html()); //Get html and make encode base64 _this.sendFunction({ "t": "setTextboxText", "d": [txId, text] }); }); + textBox.find(".removeIcon").click(function(e) { + $("#"+txId).remove(); + _this.sendFunction({ "t": "removeTextbox", "d": [txId] }); + e.preventDefault(); + return false; + }); if(newLocalBox) { - textBox.focus(); + textBox.find(".textContent").focus(); } if(this.tool==="text") { textBox.addClass("active"); } }, setTextboxText(txId, text) { - $("#"+txId).html(atob(text)); //Set decoded base64 as html + $("#"+txId).find(".textContent").html(atob(text)); //Set decoded base64 as html + }, + removeTextbox(txId) { + $("#"+txId).remove(); }, drawImgToCanvas(url, width, height, left, top, doneCallback) { var _this = this; @@ -635,6 +647,8 @@ var whiteboard = { _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 === "removeTextbox") { + _this.removeTextbox(data[0]); } else if (tool === "clear") { _this.canvas.height = _this.canvas.height; _this.imgContainer.empty(); @@ -658,7 +672,7 @@ var whiteboard = { } }); - if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText"].includes(tool)) { + if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) { content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId; content["username"] = content["username"] ? content["username"] : _this.settings.username; _this.drawBuffer.push(content); @@ -748,7 +762,7 @@ var whiteboard = { if (_this.settings.sendFunction) { _this.settings.sendFunction(content); } - if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText"].includes(tool)) { + if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) { _this.drawBuffer.push(content); } }, diff --git a/s_whiteboard.js b/s_whiteboard.js index 237f8fa..2a229cf 100644 --- a/s_whiteboard.js +++ b/s_whiteboard.js @@ -22,7 +22,7 @@ module.exports = { } } } - } else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText"].includes(tool)) { //Save all this actions + } else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) { //Save all this actions if(!savedBoards[wid]) { savedBoards[wid] = []; }