diff --git a/README.md b/README.md index e57ae78..82ab6ca 100644 --- a/README.md +++ b/README.md @@ -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 ... diff --git a/public/css/main.css b/public/css/main.css index ae01c33..eda045b 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -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; } \ No newline at end of file diff --git a/public/js/whiteboard.js b/public/js/whiteboard.js index c740ab6..80fdb31 100644 --- a/public/js/whiteboard.js +++ b/public/js/whiteboard.js @@ -46,11 +46,11 @@ var whiteboard = { _this.backgroundGrid = $('
'); // container for background images _this.imgContainer = $('
'); - // whiteboard canvas + // whiteboard canvas _this.canvasElement = $(''); // SVG container holding drawing or moving previews _this.svgContainer = $(''); - // drag and drop indicator, hidden by default + // drag and drop indicator, hidden by default _this.dropIndicator = $('
') // container for other users cursors _this.cursorContainer = $('
'); @@ -60,13 +60,13 @@ var whiteboard = { _this.mouseOverlay = $('
'); $(whiteboardContainer).append(_this.backgroundGrid) - .append(_this.imgContainer) - .append(_this.canvasElement) - .append(_this.svgContainer) - .append(_this.dropIndicator) - .append(_this.cursorContainer) - .append(_this.textContainer) - .append(_this.mouseOverlay); + .append(_this.imgContainer) + .append(_this.canvasElement) + .append(_this.svgContainer) + .append(_this.dropIndicator) + .append(_this.cursorContainer) + .append(_this.textContainer) + .append(_this.mouseOverlay); this.canvas = $("#whiteboardCanvas")[0]; this.canvas.height = _this.settings.canvasHeight; this.canvas.width = _this.settings.canvasWidth; @@ -340,7 +340,7 @@ var whiteboard = { 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()); + 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); }); @@ -483,7 +483,7 @@ var whiteboard = { addImgToCanvasByUrl: function (url) { var _this = this; var wasTextTool = false; - if(_this.tool==="text") { + if (_this.tool === "text") { wasTextTool = true; _this.setTool("mouse"); //Set to mouse tool while dropping to prevent errors } @@ -502,7 +502,7 @@ var whiteboard = { _this.imgDragActive = false; _this.refreshCursorAppearance(); imgDiv.remove(); - if(wasTextTool) { + if (wasTextTool) { _this.setTool("text"); } }); @@ -523,7 +523,7 @@ var whiteboard = { _this.sendFunction({ "t": "addImgBG", "draw": draw, "url": url, "d": [width, height, left, top] }); _this.drawId++; imgDiv.remove(); - if(wasTextTool) { + if (wasTextTool) { _this.setTool("text"); } }); @@ -536,37 +536,52 @@ var whiteboard = { }, addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) { var _this = this; - var textBox = $('
'+ - '
'+ - '
x
'+ - '
') - textBox.click(function(e) { + var textBox = $('
' + + '
' + + '
x
' + + '
' + + '
'); + textBox.click(function (e) { e.preventDefault(); return false; }) 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 _this.sendFunction({ "t": "setTextboxText", "d": [txId, text] }); }); - textBox.find(".removeIcon").click(function(e) { - $("#"+txId).remove(); + textBox.find(".removeIcon").click(function (e) { + $("#" + txId).remove(); _this.sendFunction({ "t": "removeTextbox", "d": [txId] }); e.preventDefault(); return false; }); - if(newLocalBox) { + if (newLocalBox) { textBox.find(".textContent").focus(); } - if(this.tool==="text") { + if (this.tool === "text") { textBox.addClass("active"); } }, 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) { - $("#"+txId).remove(); + $("#" + txId).remove(); + }, + setTextboxPosition(txId, top, left) { + $("#" + txId).css({"top" : top+"px", "left" : left+"px"}); }, drawImgToCanvas(url, width, height, left, top, doneCallback) { var _this = this; @@ -607,7 +622,7 @@ var whiteboard = { }, setTool: function (tool) { this.tool = tool; - if(this.tool==="text") { + if (this.tool === "text") { $(".textBox").addClass("active"); this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front } else { @@ -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); } }, @@ -779,7 +796,7 @@ var whiteboard = { } else if (_this.tool === "mouse") { this.mouseOverlay.css({ "cursor": "default" }); } else { //Line, Rec, Circle, Cutting - _this.mouseOverlay.css({ "cursor": "crosshair" }); + _this.mouseOverlay.css({ "cursor": "crosshair" }); } } } \ No newline at end of file diff --git a/s_whiteboard.js b/s_whiteboard.js index 2a229cf..4914f45 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", "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] = []; }