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) * You shoud be able to customize without ever toutching the whiteboard.js (take a look at index.html & main.js)
## ToDo ## ToDo
* Enable drag and drop for texts
* Show indicator on slider which tool is active (Pen, Text...) * Show indicator on slider which tool is active (Pen, Text...)
* Make undo function more reliable on texts * Make undo function more reliable on texts
* Add more callbacks for errors and things ... * Add more callbacks for errors and things ...

5
public/css/main.css
View File

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

75
public/js/whiteboard.js
View File

@ -46,11 +46,11 @@ var whiteboard = {
_this.backgroundGrid = $('<div style="position: absolute; left:0px; top:0; opacity: 0.2; background-image:url(\'' + _this.settings["backgroundGridUrl"] + '\'); height: 100%; width: 100%;"></div>'); _this.backgroundGrid = $('<div style="position: absolute; left:0px; top:0; opacity: 0.2; background-image:url(\'' + _this.settings["backgroundGridUrl"] + '\'); height: 100%; width: 100%;"></div>');
// container for background images // container for background images
_this.imgContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>'); _this.imgContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
// whiteboard canvas // whiteboard canvas
_this.canvasElement = $('<canvas id="whiteboardCanvas" style="position: absolute; left:0px; top:0; cursor:crosshair;"></canvas>'); _this.canvasElement = $('<canvas id="whiteboardCanvas" style="position: absolute; left:0px; top:0; cursor:crosshair;"></canvas>');
// SVG container holding drawing or moving previews // SVG container holding drawing or moving previews
_this.svgContainer = $('<svg style="position: absolute; top:0px; left:0px;" width="' + _this.settings.canvasWidth + '" height="' + _this.settings.canvasHeight + '"></svg>'); _this.svgContainer = $('<svg style="position: absolute; top:0px; left:0px;" width="' + _this.settings.canvasWidth + '" height="' + _this.settings.canvasHeight + '"></svg>');
// drag and drop indicator, hidden by default // drag and drop indicator, hidden by default
_this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>') _this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>')
// container for other users cursors // container for other users cursors
_this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>'); _this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
@ -60,13 +60,13 @@ var whiteboard = {
_this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>'); _this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
$(whiteboardContainer).append(_this.backgroundGrid) $(whiteboardContainer).append(_this.backgroundGrid)
.append(_this.imgContainer) .append(_this.imgContainer)
.append(_this.canvasElement) .append(_this.canvasElement)
.append(_this.svgContainer) .append(_this.svgContainer)
.append(_this.dropIndicator) .append(_this.dropIndicator)
.append(_this.cursorContainer) .append(_this.cursorContainer)
.append(_this.textContainer) .append(_this.textContainer)
.append(_this.mouseOverlay); .append(_this.mouseOverlay);
this.canvas = $("#whiteboardCanvas")[0]; this.canvas = $("#whiteboardCanvas")[0];
this.canvas.height = _this.settings.canvasHeight; this.canvas.height = _this.settings.canvasHeight;
this.canvas.width = _this.settings.canvasWidth; this.canvas.width = _this.settings.canvasWidth;
@ -340,7 +340,7 @@ var whiteboard = {
currX = (e.offsetX || e.pageX - $(e.target).offset().left); currX = (e.offsetX || e.pageX - $(e.target).offset().left);
currY = (e.offsetY || e.pageY - $(e.target).offset().top); currY = (e.offsetY || e.pageY - $(e.target).offset().top);
var fontsize = _this.thickness * 0.5; var fontsize = _this.thickness * 0.5;
var txId = 'tx'+(+new Date()); var txId = 'tx' + (+new Date());
_this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] }); _this.sendFunction({ "t": "addTextBox", "d": [_this.drawcolor, fontsize, currX, currY, txId] });
_this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true); _this.addTextBox(_this.drawcolor, fontsize, currX, currY, txId, true);
}); });
@ -483,7 +483,7 @@ var whiteboard = {
addImgToCanvasByUrl: function (url) { addImgToCanvasByUrl: function (url) {
var _this = this; var _this = this;
var wasTextTool = false; var wasTextTool = false;
if(_this.tool==="text") { if (_this.tool === "text") {
wasTextTool = true; wasTextTool = true;
_this.setTool("mouse"); //Set to mouse tool while dropping to prevent errors _this.setTool("mouse"); //Set to mouse tool while dropping to prevent errors
} }
@ -502,7 +502,7 @@ var whiteboard = {
_this.imgDragActive = false; _this.imgDragActive = false;
_this.refreshCursorAppearance(); _this.refreshCursorAppearance();
imgDiv.remove(); imgDiv.remove();
if(wasTextTool) { if (wasTextTool) {
_this.setTool("text"); _this.setTool("text");
} }
}); });
@ -523,7 +523,7 @@ var whiteboard = {
_this.sendFunction({ "t": "addImgBG", "draw": draw, "url": url, "d": [width, height, left, top] }); _this.sendFunction({ "t": "addImgBG", "draw": draw, "url": url, "d": [width, height, left, top] });
_this.drawId++; _this.drawId++;
imgDiv.remove(); imgDiv.remove();
if(wasTextTool) { if (wasTextTool) {
_this.setTool("text"); _this.setTool("text");
} }
}); });
@ -536,37 +536,52 @@ var whiteboard = {
}, },
addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) { addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) {
var _this = this; var _this = this;
var textBox = $('<div id="'+txId+'" class="textBox" style="font-family: monospace; position:absolute; top:' + top + 'px; left:' + left + 'px;">'+ 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 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 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>' +
textBox.click(function(e) { '</div>');
textBox.click(function (e) {
e.preventDefault(); e.preventDefault();
return false; return false;
}) })
this.textContainer.append(textBox); this.textContainer.append(textBox);
textBox.find(".textContent").on("input", function() { 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 var text = btoa($(this).html()); //Get html and make encode base64
_this.sendFunction({ "t": "setTextboxText", "d": [txId, text] }); _this.sendFunction({ "t": "setTextboxText", "d": [txId, text] });
}); });
textBox.find(".removeIcon").click(function(e) { textBox.find(".removeIcon").click(function (e) {
$("#"+txId).remove(); $("#" + txId).remove();
_this.sendFunction({ "t": "removeTextbox", "d": [txId] }); _this.sendFunction({ "t": "removeTextbox", "d": [txId] });
e.preventDefault(); e.preventDefault();
return false; return false;
}); });
if(newLocalBox) { if (newLocalBox) {
textBox.find(".textContent").focus(); textBox.find(".textContent").focus();
} }
if(this.tool==="text") { if (this.tool === "text") {
textBox.addClass("active"); textBox.addClass("active");
} }
}, },
setTextboxText(txId, text) { setTextboxText(txId, text) {
$("#"+txId).find(".textContent").html(atob(text)); //Set decoded base64 as html $("#" + txId).find(".textContent").html(atob(text)); //Set decoded base64 as html
}, },
removeTextbox(txId) { removeTextbox(txId) {
$("#"+txId).remove(); $("#" + txId).remove();
},
setTextboxPosition(txId, top, left) {
$("#" + txId).css({"top" : top+"px", "left" : left+"px"});
}, },
drawImgToCanvas(url, width, height, left, top, doneCallback) { drawImgToCanvas(url, width, height, left, top, doneCallback) {
var _this = this; var _this = this;
@ -607,7 +622,7 @@ 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"); $(".textBox").addClass("active");
this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front
} else { } else {
@ -649,6 +664,8 @@ var whiteboard = {
_this.setTextboxText(data[0], data[1]); _this.setTextboxText(data[0], data[1]);
} else if (tool === "removeTextbox") { } else if (tool === "removeTextbox") {
_this.removeTextbox(data[0]); _this.removeTextbox(data[0]);
} else if(tool === "setTextboxPosition") {
_this.setTextboxPosition(data[0], data[1], data[2]);
} 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();
@ -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["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);
@ -762,7 +779,7 @@ var whiteboard = {
if (_this.settings.sendFunction) { if (_this.settings.sendFunction) {
_this.settings.sendFunction(content); _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); _this.drawBuffer.push(content);
} }
}, },
@ -779,7 +796,7 @@ var whiteboard = {
} else if (_this.tool === "mouse") { } else if (_this.tool === "mouse") {
this.mouseOverlay.css({ "cursor": "default" }); this.mouseOverlay.css({ "cursor": "default" });
} else { //Line, Rec, Circle, Cutting } else { //Line, Rec, Circle, Cutting
_this.mouseOverlay.css({ "cursor": "crosshair" }); _this.mouseOverlay.css({ "cursor": "crosshair" });
} }
} }
} }

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]) { if(!savedBoards[wid]) {
savedBoards[wid] = []; savedBoards[wid] = [];
} }