add first version with text boxes
This commit is contained in:
parent
51dc51751b
commit
a90d3d46c1
@ -49,4 +49,8 @@ button {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transition: opacity .15s ease-in-out;
|
-webkit-transition: opacity .15s ease-in-out;
|
||||||
transition: opacity .15s ease-in-out;
|
transition: opacity .15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textBox.active {
|
||||||
|
border: 1px dashed gray;
|
||||||
}
|
}
|
@ -55,6 +55,9 @@
|
|||||||
<button tool="circle" title="draw a circle" type="button" class="whiteboardTool">
|
<button tool="circle" title="draw a circle" type="button" class="whiteboardTool">
|
||||||
<i class="far fa-circle"></i>
|
<i class="far fa-circle"></i>
|
||||||
</button>
|
</button>
|
||||||
|
<button tool="text" title="write text" type="button" class="whiteboardTool">
|
||||||
|
<i class="fas fa-font"></i>
|
||||||
|
</button>
|
||||||
<button tool="eraser" title="take the eraser" type="button" class="whiteboardTool">
|
<button tool="eraser" title="take the eraser" type="button" class="whiteboardTool">
|
||||||
<i class="fa fa-eraser"></i>
|
<i class="fa fa-eraser"></i>
|
||||||
</button>
|
</button>
|
||||||
|
@ -335,6 +335,16 @@ var whiteboard = {
|
|||||||
_this.mouseover = true;
|
_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 strgPressed = false;
|
||||||
var zPressed = false;
|
var zPressed = false;
|
||||||
var shiftPressed = false;
|
var shiftPressed = false;
|
||||||
@ -465,6 +475,7 @@ var whiteboard = {
|
|||||||
var _this = this;
|
var _this = this;
|
||||||
_this.canvas.height = _this.canvas.height;
|
_this.canvas.height = _this.canvas.height;
|
||||||
_this.imgContainer.empty();
|
_this.imgContainer.empty();
|
||||||
|
_this.textContainer.empty();
|
||||||
_this.sendFunction({ "t": "clear" });
|
_this.sendFunction({ "t": "clear" });
|
||||||
_this.drawBuffer = [];
|
_this.drawBuffer = [];
|
||||||
_this.drawId = 0;
|
_this.drawId = 0;
|
||||||
@ -474,7 +485,7 @@ var whiteboard = {
|
|||||||
var wasTextTool = false;
|
var wasTextTool = false;
|
||||||
if(_this.tool==="text") {
|
if(_this.tool==="text") {
|
||||||
wasTextTool = true;
|
wasTextTool = true;
|
||||||
_this.setTool("mouse");
|
_this.setTool("mouse"); //Set to mouse tool while dropping to prevent errors
|
||||||
}
|
}
|
||||||
_this.imgDragActive = true;
|
_this.imgDragActive = true;
|
||||||
_this.mouseOverlay.css({ "cursor": "default" });
|
_this.mouseOverlay.css({ "cursor": "default" });
|
||||||
@ -523,6 +534,28 @@ var whiteboard = {
|
|||||||
drawImgToBackground(url, width, height, left, top) {
|
drawImgToBackground(url, width, height, left, top) {
|
||||||
this.imgContainer.append('<img crossorigin="anonymous" style="width:' + width + 'px; height:' + height + 'px; position:absolute; top:' + top + 'px; left:' + left + 'px;" src="' + url + '">')
|
this.imgContainer.append('<img crossorigin="anonymous" style="width:' + width + 'px; height:' + height + 'px; position:absolute; top:' + top + 'px; left:' + left + 'px;" src="' + url + '">')
|
||||||
},
|
},
|
||||||
|
addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) {
|
||||||
|
var _this = this;
|
||||||
|
var textBox = $('<div id="'+txId+'" class="textBox" contentEditable="true" spellcheck="false" style="font-family: monospace; font-size:'+fontsize+'em; color:'+textcolor+'; position:absolute; top:' + top + 'px; left:' + left + 'px; min-width:50px; min-height:50px;"></div>')
|
||||||
|
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) {
|
drawImgToCanvas(url, width, height, left, top, doneCallback) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
var img = document.createElement('img');
|
var img = document.createElement('img');
|
||||||
@ -552,7 +585,6 @@ var whiteboard = {
|
|||||||
}
|
}
|
||||||
_this.canvas.height = _this.canvas.height;
|
_this.canvas.height = _this.canvas.height;
|
||||||
_this.imgContainer.empty();
|
_this.imgContainer.empty();
|
||||||
console.log(_this.drawBuffer)
|
|
||||||
_this.loadDataInSteps(_this.drawBuffer, false, function (stepData) {
|
_this.loadDataInSteps(_this.drawBuffer, false, function (stepData) {
|
||||||
//Nothing to do
|
//Nothing to do
|
||||||
});
|
});
|
||||||
@ -564,8 +596,10 @@ var whiteboard = {
|
|||||||
setTool: function (tool) {
|
setTool: function (tool) {
|
||||||
this.tool = tool;
|
this.tool = tool;
|
||||||
if(this.tool==="text") {
|
if(this.tool==="text") {
|
||||||
|
$(".textBox").addClass("active");
|
||||||
this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front
|
this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front
|
||||||
} else {
|
} else {
|
||||||
|
$(".textBox").removeClass("active");
|
||||||
this.mouseOverlay.appendTo($(whiteboardContainer));
|
this.mouseOverlay.appendTo($(whiteboardContainer));
|
||||||
}
|
}
|
||||||
this.refreshCursorAppearance();
|
this.refreshCursorAppearance();
|
||||||
@ -597,11 +631,16 @@ var whiteboard = {
|
|||||||
} else {
|
} else {
|
||||||
_this.drawImgToBackground(content["url"], data[0], data[1], data[2], data[3]);
|
_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") {
|
} else if (tool === "clear") {
|
||||||
_this.canvas.height = _this.canvas.height;
|
_this.canvas.height = _this.canvas.height;
|
||||||
this.imgContainer.empty();
|
_this.imgContainer.empty();
|
||||||
this.drawBuffer = [];
|
_this.textContainer.empty();
|
||||||
this.drawId = 0;
|
_this.drawBuffer = [];
|
||||||
|
_this.drawId = 0;
|
||||||
} else if (tool === "cursor" && _this.settings) {
|
} else if (tool === "cursor" && _this.settings) {
|
||||||
if (content["event"] === "move") {
|
if (content["event"] === "move") {
|
||||||
if (_this.cursorContainer.find("." + content["username"]).length >= 1) {
|
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["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId;
|
||||||
content["username"] = content["username"] ? content["username"] : _this.settings.username;
|
content["username"] = content["username"] ? content["username"] : _this.settings.username;
|
||||||
_this.drawBuffer.push(content);
|
_this.drawBuffer.push(content);
|
||||||
@ -709,7 +748,7 @@ var whiteboard = {
|
|||||||
if (_this.settings.sendFunction) {
|
if (_this.settings.sendFunction) {
|
||||||
_this.settings.sendFunction(content);
|
_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);
|
_this.drawBuffer.push(content);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -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]) {
|
if(!savedBoards[wid]) {
|
||||||
savedBoards[wid] = [];
|
savedBoards[wid] = [];
|
||||||
}
|
}
|
||||||
delete content["wid"]; //Delete id from content so we don't store it twice
|
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);
|
savedBoards[wid].push(content);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user