From 5d6559ad425f5c7ff9dd6739bc7f7b8612088ead Mon Sep 17 00:00:00 2001 From: raphael Date: Fri, 22 Feb 2019 13:49:40 +0100 Subject: [PATCH] add function to live change textbox font-size and color --- public/js/main.js | 6 +++--- public/js/whiteboard.js | 43 ++++++++++++++++++++++++++++++++++++----- s_whiteboard.js | 2 +- 3 files changed, 42 insertions(+), 9 deletions(-) diff --git a/public/js/main.js b/public/js/main.js index e2a0137..562eadc 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -166,8 +166,8 @@ $(document).ready(function () { }); // On thickness slider change - $("#whiteboardThicknessSlider").on("change", function () { - whiteboard.thickness = $(this).val(); + $("#whiteboardThicknessSlider").on("input", function () { + whiteboard.setStrokeThickness($(this).val()); }); // handle drag&drop @@ -242,7 +242,7 @@ $(document).ready(function () { $('#whiteboardColorpicker').colorPicker({ renderCallback: function (elm) { - whiteboard.drawcolor = elm.val(); + whiteboard.setDrawColor(elm.val()); } }); }); diff --git a/public/js/whiteboard.js b/public/js/whiteboard.js index 03a2ba9..7967a4e 100644 --- a/public/js/whiteboard.js +++ b/public/js/whiteboard.js @@ -20,6 +20,7 @@ var whiteboard = { drawBuffer: [], drawId: 0, //Used for undo function imgDragActive: false, + latestActiveTextBoxId: false, //The id of the latest clicked Textbox (for font and color change) pressedKeys: {}, settings: { whiteboardId: "0", @@ -378,7 +379,7 @@ var whiteboard = { return { "x": currX, "y": currY }; } }, - entfKeyAction : function() { + entfKeyAction: function () { var _this = this; $.each(_this.mouseOverlay.find(".dragOutOverlay"), function () { var width = $(this).width(); @@ -392,11 +393,11 @@ var whiteboard = { }); _this.mouseOverlay.find(".xCanvasBtn").click(); //Remove all current drops }, - escKeyAction : function() { + escKeyAction: function () { var _this = this; if (!_this.drawFlag) { _this.svgContainer.empty(); - } + } _this.mouseOverlay.find(".xCanvasBtn").click(); //Remove all current drops }, dragCanvasRectContent: function (xf, yf, xt, yt, width, height) { @@ -471,6 +472,15 @@ var whiteboard = { _this.drawBuffer = []; _this.drawId = 0; }, + setStrokeThickness(thickness) { + var _this = this; + _this.thickness = thickness; + + if (_this.tool == "text" && _this.latestActiveTextBoxId) { + _this.sendFunction({ "t": "setTextboxFontSize", "d": [_this.latestActiveTextBoxId, thickness] }); + _this.setTextboxFontSize(_this.latestActiveTextBoxId, thickness); + } + }, addImgToCanvasByUrl: function (url) { var _this = this; var wasTextTool = false; @@ -532,8 +542,10 @@ var whiteboard = { '
x
' + '
' + ''); + _this.latestActiveTextBoxId = txId; textBox.click(function (e) { e.preventDefault(); + _this.latestActiveTextBoxId = txId; return false; }) textBox.on("mousemove touchmove", function (e) { @@ -587,6 +599,12 @@ var whiteboard = { setTextboxPosition(txId, top, left) { $("#" + txId).css({ "top": top + "px", "left": left + "px" }); }, + setTextboxFontSize(txId, fontSize) { + $("#" + txId).find(".textContent").css({ "font-size": fontSize + "em" }); + }, + setTextboxFontColor(txId, color) { + $("#" + txId).find(".textContent").css({ "color": color }); + }, drawImgToCanvas(url, width, height, left, top, doneCallback) { var _this = this; var img = document.createElement('img'); @@ -635,6 +653,17 @@ var whiteboard = { } this.refreshCursorAppearance(); this.mouseOverlay.find(".xCanvasBtn").click(); + this.latestActiveTextBoxId = null; + }, + setDrawColor(color) { + var _this = this; + _this.drawcolor = color; + + if (_this.tool == "text" && _this.latestActiveTextBoxId) { + _this.sendFunction({ "t": "setTextboxFontColor", "d": [_this.latestActiveTextBoxId, color] }); + _this.setTextboxFontColor(_this.latestActiveTextBoxId, color); + } + }, handleEventsAndData: function (content, isNewData, doneCallback) { var _this = this; @@ -670,6 +699,10 @@ var whiteboard = { _this.removeTextbox(data[0]); } else if (tool === "setTextboxPosition") { _this.setTextboxPosition(data[0], data[1], data[2]); + } else if (tool === "setTextboxFontSize") { + _this.setTextboxFontSize(data[0], data[1]); + } else if (tool === "setTextboxFontColor") { + _this.setTextboxFontColor(data[0], data[1]); } else if (tool === "clear") { _this.canvas.height = _this.canvas.height; _this.imgContainer.empty(); @@ -693,7 +726,7 @@ var whiteboard = { } }); - if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition"].includes(tool)) { + if (isNewData && ["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) { content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId; content["username"] = content["username"] ? content["username"] : _this.settings.username; _this.drawBuffer.push(content); @@ -783,7 +816,7 @@ var whiteboard = { if (_this.settings.sendFunction) { _this.settings.sendFunction(content); } - if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition"].includes(tool)) { + if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) { _this.drawBuffer.push(content); } }, diff --git a/s_whiteboard.js b/s_whiteboard.js index 4914f45..980d3f5 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", "setTextboxPosition"].includes(tool)) { //Save all this actions + } else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) { //Save all this actions if(!savedBoards[wid]) { savedBoards[wid] = []; }