raphael/whiteboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from mochiokun/dev

Browse Source 
Add:textbox-backgroundColorEdit
This commit is contained in:
mochiokun 2021-02-23 21:57:52 +09:00 committed by GitHub
commit 2868d27288
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 71 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/index.html
View File

@ -82,9 +82,6 @@
<button tool="circle" title="draw a circle" type="button" class="whiteboard-tool">
<i class="far fa-circle"></i>
</button>
<button tool="text" title="write text" type="button" class="whiteboard-tool">
<i class="fas fa-font"></i>
</button>
<button tool="eraser" title="take the eraser" type="button" class="whiteboard-tool">
<i class="fa fa-eraser"></i>
</button>
@ -133,6 +130,24 @@
</button>
</div>
<div class="btn-group whiteboard-edit-group">
<button tool="text" title="write text" type="button" class="whiteboard-tool">
<i class="fas fa-font"></i>
</button>
<button title="text background-color">
<div
id="textboxBackgroundColorPicker"
style="
width: 26px;
height: 23px;
border-radius: 3px;
border: 1px solid darkgrey;
"
data-color="#f5f587"
></div>
</button>
</div>
<div class="btn-group whiteboard-edit-group">
<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button">
<i class="fas fa-image"></i>

9
src/js/main.js
View File

@ -747,6 +747,15 @@ function initWhiteboard() {
},
});
new Picker({
parent: $("#textboxBackgroundColorPicker")[0],
color: "#f5f587",
bgcolor: "#f5f587",
onChange: function (bgcolor) {
whiteboard.setTextBackgroundColor(bgcolor.rgbaString);
},
});
// on startup select mouse
shortcutFunctions.setTool_mouse();
// fix bug cursor not showing up

49
src/js/whiteboard.js
View File

@ -424,9 +424,24 @@ const whiteboard = {
const txId = "tx" + +new Date();
_this.sendFunction({
t: "addTextBox",
d: [_this.drawcolor, fontsize, currentPos.x, currentPos.y, txId],
d: [
_this.drawcolor,
_this.textboxBackgroundColor,
fontsize,
currentPos.x,
currentPos.y,
txId,
],
});
_this.addTextBox(_this.drawcolor, fontsize, currentPos.x, currentPos.y, txId, true);
_this.addTextBox(
_this.drawcolor,
_this.textboxBackgroundColor,
fontsize,
currentPos.x,
currentPos.y,
txId,
true
);
});
},
/**
@ -874,7 +889,7 @@ const whiteboard = {
'">'
);
},
addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) {
addTextBox(textcolor, textboxBackgroundColor, fontsize, left, top, txId, newLocalBox) {
var _this = this;
var textBox = $(
'<div id="' +
@ -883,7 +898,10 @@ const whiteboard = {
top +
"px; left:" +
left +
'px;">' +
"px;" +
"background-color:" +
textboxBackgroundColor +
';">' +
'<div contentEditable="true" spellcheck="false" class="textContent" style="outline: none; font-size:' +
fontsize +
"em; color:" +
@ -988,6 +1006,11 @@ const whiteboard = {
.find(".textContent")
.css({ color: color });
},
setTextboxBackgroundColor(txId, textboxBackgroundColor) {
$("#" + txId)
.find(".textContent")
.css({ "background-color": textboxBackgroundColor });
},
drawImgToCanvas(url, width, height, left, top, rotationAngle, doneCallback) {
var _this = this;
var img = document.createElement("img");
@ -1100,6 +1123,18 @@ const whiteboard = {
_this.setTextboxFontColor(_this.latestActiveTextBoxId, color);
}
},
setTextBackgroundColor(textboxBackgroundColor) {
var _this = this;
_this.textboxBackgroundColor = textboxBackgroundColor;
$("#textboxBackgroundColorPicker").css({ background: textboxBackgroundColor });
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
_this.sendFunction({
t: "setTextboxBackgroundColor",
d: [_this.latestActiveTextBoxId, textboxBackgroundColor],
});
_this.setTextboxBackgroundColor(_this.latestActiveTextBoxId, textboxBackgroundColor);
}
},
updateSmallestScreenResolution() {
const { smallestScreenResolution } = InfoService;
const { showSmallestScreenIndicator } = ConfigService;
@ -1169,7 +1204,7 @@ const whiteboard = {
);
}
} else if (tool === "addTextBox") {
_this.addTextBox(data[0], data[1], data[2], data[3], data[4]);
_this.addTextBox(data[0], data[1], data[2], data[3], data[4], data[5]);
} else if (tool === "setTextboxText") {
_this.setTextboxText(data[0], data[1]);
} else if (tool === "removeTextbox") {
@ -1180,6 +1215,8 @@ const whiteboard = {
_this.setTextboxFontSize(data[0], data[1]);
} else if (tool === "setTextboxFontColor") {
_this.setTextboxFontColor(data[0], data[1]);
} else if (tool === "setTextboxBackgroundColor") {
_this.setTextboxBackgroundColor(data[0], data[1]);
} else if (tool === "clear") {
_this.canvas.height = _this.canvas.height;
_this.imgContainer.empty();
@ -1234,6 +1271,7 @@ const whiteboard = {
"setTextboxPosition",
"setTextboxFontSize",
"setTextboxFontColor",
"setTextboxBackgroundColor",
].includes(tool)
) {
content["drawId"] = content["drawId"] ? content["drawId"] : _this.drawId;
@ -1404,6 +1442,7 @@ const whiteboard = {
"setTextboxPosition",
"setTextboxFontSize",
"setTextboxFontColor",
"setTextboxBackgroundColor",
].includes(tool)
) {
_this.drawBuffer.push(content);