Added support for sticky notes
This commit is contained in:
Thijs Kroesbergen
parent
1260c9a999
commit
f70e03a691
@ -93,7 +93,7 @@ The following are predefined shortcuts that you can override in the file [./src/
|
||||
| Move selected object left | Left Arrow | Left Arrow |
|
||||
| Move selected object right | Right Arrow | Right Arrow |
|
||||
| Drop object | Ctrl + Enter | Command + Enter |
|
||||
| Add Image to backgroud | Shift + Enter | Shift + Enter |
|
||||
| Add Image to background | Shift + Enter | Shift + Enter |
|
||||
| Cancel all actions | Escape | Escape |
|
||||
| Delete selected object | Delete | Delete |
|
||||
| Use Line tool when pen is active (Not changeable) | Shift (Hold) | Shift (Hold) |
|
||||
|
||||
@ -11,7 +11,7 @@ if (config.backend.enableFileDatabase) {
|
||||
fs.readFile("savedBoards.json", (err, data) => {
|
||||
if (err) {
|
||||
return console.log(
|
||||
"Not persistend Whiteboard Datafile found... this is not a problem on the first start!"
|
||||
"No persistend Whiteboard Datafile found... this is not a problem on the first start!"
|
||||
);
|
||||
}
|
||||
savedBoards = JSON.parse(data);
|
||||
|
||||
@ -134,6 +134,13 @@ button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stickyNote {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modalBtn {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
@ -134,6 +134,14 @@
|
||||
<button tool="text" title="write text" type="button" class="whiteboard-tool">
|
||||
<i class="fas fa-font"></i>
|
||||
</button>
|
||||
<button
|
||||
tool="stickynote"
|
||||
title="place a sticky note"
|
||||
type="button"
|
||||
class="whiteboard-tool"
|
||||
>
|
||||
<i class="fas fa-sticky-note"></i>
|
||||
</button>
|
||||
<button
|
||||
id="textboxBackgroundColorPickerBtn"
|
||||
style="display: none"
|
||||
|
||||
@ -20,6 +20,7 @@ import {
|
||||
faLockOpen,
|
||||
faInfoCircle,
|
||||
faGlobe,
|
||||
faStickyNote,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faSquare,
|
||||
@ -54,7 +55,8 @@ library.add(
|
||||
faLock,
|
||||
faLockOpen,
|
||||
faInfoCircle,
|
||||
faGlobe
|
||||
faGlobe,
|
||||
faStickyNote
|
||||
);
|
||||
|
||||
dom.i2svg();
|
||||
|
||||
@ -305,7 +305,7 @@ function initWhiteboard() {
|
||||
$(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
|
||||
}
|
||||
|
||||
if (activeTool == "text") {
|
||||
if (activeTool == "text" || activeTool == "stickynote") {
|
||||
$("#textboxBackgroundColorPickerBtn").show();
|
||||
} else {
|
||||
$("#textboxBackgroundColorPickerBtn").hide();
|
||||
@ -919,7 +919,7 @@ function initWhiteboard() {
|
||||
}
|
||||
}
|
||||
|
||||
if (!imgItemFound && whiteboard.tool != "text") {
|
||||
if (!imgItemFound && whiteboard.tool != "text" && whiteboard.tool != "stickynote") {
|
||||
showBasicAlert(
|
||||
"Please Drag&Drop the image or pdf into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)"
|
||||
);
|
||||
|
||||
@ -422,6 +422,7 @@ const whiteboard = {
|
||||
const currentPos = Point.fromEvent(e);
|
||||
const fontsize = _this.thickness * 0.5;
|
||||
const txId = "tx" + +new Date();
|
||||
const isStickyNote = _this.tool === "stickynote";
|
||||
_this.sendFunction({
|
||||
t: "addTextBox",
|
||||
d: [
|
||||
@ -431,6 +432,7 @@ const whiteboard = {
|
||||
currentPos.x,
|
||||
currentPos.y,
|
||||
txId,
|
||||
isStickyNote,
|
||||
],
|
||||
});
|
||||
_this.addTextBox(
|
||||
@ -440,6 +442,7 @@ const whiteboard = {
|
||||
currentPos.x,
|
||||
currentPos.y,
|
||||
txId,
|
||||
isStickyNote,
|
||||
true
|
||||
);
|
||||
});
|
||||
@ -762,7 +765,7 @@ const whiteboard = {
|
||||
var _this = this;
|
||||
_this.thickness = thickness;
|
||||
|
||||
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
||||
if ((_this.tool == "text" || this.tool === "stickynote") && _this.latestActiveTextBoxId) {
|
||||
_this.sendFunction({
|
||||
t: "setTextboxFontSize",
|
||||
d: [_this.latestActiveTextBoxId, thickness],
|
||||
@ -889,12 +892,28 @@ const whiteboard = {
|
||||
'">'
|
||||
);
|
||||
},
|
||||
addTextBox(textcolor, textboxBackgroundColor, fontsize, left, top, txId, newLocalBox) {
|
||||
addTextBox(
|
||||
textcolor,
|
||||
textboxBackgroundColor,
|
||||
fontsize,
|
||||
left,
|
||||
top,
|
||||
txId,
|
||||
isStickyNote,
|
||||
newLocalBox
|
||||
) {
|
||||
var _this = this;
|
||||
console.log(isStickyNote);
|
||||
var cssclass = "textBox";
|
||||
if (isStickyNote) {
|
||||
cssclass += " stickyNote";
|
||||
}
|
||||
var textBox = $(
|
||||
'<div id="' +
|
||||
txId +
|
||||
'" class="textBox" style="font-family: Monospace; position:absolute; top:' +
|
||||
'" class="' +
|
||||
cssclass +
|
||||
'" style="font-family: Monospace; position:absolute; top:' +
|
||||
top +
|
||||
"px; left:" +
|
||||
left +
|
||||
@ -906,7 +925,7 @@ const whiteboard = {
|
||||
fontsize +
|
||||
"em; color:" +
|
||||
textcolor +
|
||||
'; min-width:50px; min-height:50px;"></div>' +
|
||||
'; 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="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>"
|
||||
@ -978,7 +997,7 @@ const whiteboard = {
|
||||
textBox.find(".textContent").focus();
|
||||
}, 0);
|
||||
}
|
||||
if (this.tool === "text") {
|
||||
if (this.tool === "text" || this.tool === "stickynote") {
|
||||
textBox.addClass("active");
|
||||
}
|
||||
|
||||
@ -1100,7 +1119,7 @@ const whiteboard = {
|
||||
},
|
||||
setTool: function (tool) {
|
||||
this.tool = tool;
|
||||
if (this.tool === "text") {
|
||||
if (this.tool === "text" || this.tool === "stickynote") {
|
||||
$(".textBox").addClass("active");
|
||||
this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front
|
||||
} else {
|
||||
@ -1115,7 +1134,7 @@ const whiteboard = {
|
||||
var _this = this;
|
||||
_this.drawcolor = color;
|
||||
$("#whiteboardColorpicker").css({ background: color });
|
||||
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
||||
if ((_this.tool == "text" || this.tool === "stickynote") && _this.latestActiveTextBoxId) {
|
||||
_this.sendFunction({
|
||||
t: "setTextboxFontColor",
|
||||
d: [_this.latestActiveTextBoxId, color],
|
||||
@ -1127,7 +1146,7 @@ const whiteboard = {
|
||||
var _this = this;
|
||||
_this.textboxBackgroundColor = textboxBackgroundColor;
|
||||
$("#textboxBackgroundColorPicker").css({ background: textboxBackgroundColor });
|
||||
if (_this.tool == "text" && _this.latestActiveTextBoxId) {
|
||||
if ((_this.tool == "text" || this.tool === "stickynote") && _this.latestActiveTextBoxId) {
|
||||
_this.sendFunction({
|
||||
t: "setTextboxBackgroundColor",
|
||||
d: [_this.latestActiveTextBoxId, textboxBackgroundColor],
|
||||
@ -1204,7 +1223,7 @@ const whiteboard = {
|
||||
);
|
||||
}
|
||||
} else if (tool === "addTextBox") {
|
||||
_this.addTextBox(data[0], data[1], data[2], data[3], data[4], data[5]);
|
||||
_this.addTextBox(data[0], data[1], data[2], data[3], data[4], data[5], data[6]);
|
||||
} else if (tool === "setTextboxText") {
|
||||
_this.setTextboxText(data[0], data[1]);
|
||||
} else if (tool === "removeTextbox") {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user