WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add function to move textbox

Browse Source
This commit is contained in:
raphael 2019-02-05 13:04:26 +01:00
parent 15b2aeaf9b
commit 5c60f68c14
4 changed files with 50 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -43,7 +43,6 @@ Call your site with GET parameters to change the WhiteboardID or the Username
* You shoud be able to customize without ever toutching the whiteboard.js (take a look at index.html & main.js)
## ToDo
* Enable drag and drop for texts
* Show indicator on slider which tool is active (Pen, Text...)
* Make undo function more reliable on texts
* Add more callbacks for errors and things ...

5
public/css/main.css
View File

@ -54,9 +54,10 @@ button {
.textBox.active {
border: 1px dashed gray;
}
.textBox>.removeIcon {
.textBox>.removeIcon,.textBox>.moveIcon {
display:none;
}
.textBox.active>.removeIcon {
.textBox.active>.removeIcon,.textBox.active>.moveIcon {
display:block;
}

23
public/js/whiteboard.js
View File

@ -539,12 +539,24 @@ var whiteboard = {
var textBox = $('<div id="' + txId + '" class="textBox" style="font-family: monospace; position:absolute; top:' + top + 'px; left:' + left + 'px;">' +
'<div contentEditable="true" spellcheck="false" class="textContent" style="outline: none; font-size:' + fontsize + 'em; color:' + textcolor + '; min-width:50px; min-height:50px;"></div>' +
'<div title="remove textbox" class="removeIcon" style="position:absolute; cursor:pointer; top:-4px; right:2px;">x</div>' +
'</div>')
'<div title="move textbox" class="moveIcon" style="position:absolute; cursor:move; top:1px; left:2px; font-size: 0.5em;"><i class="fas fa-expand-arrows-alt"></i></div>' +
'</div>');
textBox.click(function (e) {
e.preventDefault();
return false;
})
this.textContainer.append(textBox);
textBox.draggable({
handle: ".moveIcon",
stop: function () {
var textBoxPosition = textBox.position();
_this.sendFunction({ "t": "setTextboxPosition", "d": [txId, textBoxPosition.top, textBoxPosition.left] });
},
drag: function() {
var textBoxPosition = textBox.position();
_this.sendFunction({ "t": "setTextboxPosition", "d": [txId, textBoxPosition.top, textBoxPosition.left] });
}
});
textBox.find(".textContent").on("input", function () {
var text = btoa($(this).html()); //Get html and make encode base64
_this.sendFunction({ "t": "setTextboxText", "d": [txId, text] });
@ -568,6 +580,9 @@ var whiteboard = {
removeTextbox(txId) {
$("#" + txId).remove();
},
setTextboxPosition(txId, top, left) {
$("#" + txId).css({"top" : top+"px", "left" : left+"px"});
},
drawImgToCanvas(url, width, height, left, top, doneCallback) {
var _this = this;
var img = document.createElement('img');
@ -649,6 +664,8 @@ var whiteboard = {
_this.setTextboxText(data[0], data[1]);
} else if (tool === "removeTextbox") {
_this.removeTextbox(data[0]);
} else if(tool === "setTextboxPosition") {
_this.setTextboxPosition(data[0], data[1], data[2]);
} else if (tool === "clear") {
_this.canvas.height = _this.canvas.height;
_this.imgContainer.empty();
@ -672,7 +689,7 @@ var whiteboard = {
}
});
if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) {
if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition"].includes(tool)) {
content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId;
content["username"] = content["username"] ? content["username"] : _this.settings.username;
_this.drawBuffer.push(content);
@ -762,7 +779,7 @@ var whiteboard = {
if (_this.settings.sendFunction) {
_this.settings.sendFunction(content);
}
if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) {
if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition"].includes(tool)) {
_this.drawBuffer.push(content);
}
},

2
s_whiteboard.js
View File

@ -22,7 +22,7 @@ module.exports = {
}
}
}
} else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox"].includes(tool)) { //Save all this actions
} else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition"].includes(tool)) { //Save all this actions
if(!savedBoards[wid]) {
savedBoards[wid] = [];
}