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);
}
},