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

add function to live change textbox font-size and color

Browse Source
This commit is contained in:
raphael 2019-02-22 13:49:40 +01:00
parent 74b1f10eaf
commit 5d6559ad42
3 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/js/main.js
View File

@ -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());
}
});
});

43
public/js/whiteboard.js
View File

@ -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 = {
'<div title="remove textbox" class="removeIcon" style="position:absolute; cursor:pointer; top:-4px; right:2px;">x</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>');
_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);
}
},

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", "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] = [];
}