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 = $('')
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] = [];
}