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

fix bug and add text box releated stuff

Browse Source
This commit is contained in:
raphael 2019-01-11 14:32:57 +01:00
parent 39cf577124
commit 51dc51751b
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/js/whiteboard.js
View File

@ -50,10 +50,12 @@ var whiteboard = {
_this.canvasElement = $('<canvas id="whiteboardCanvas" style="position: absolute; left:0px; top:0; cursor:crosshair;"></canvas>'); _this.canvasElement = $('<canvas id="whiteboardCanvas" style="position: absolute; left:0px; top:0; cursor:crosshair;"></canvas>');
// SVG container holding drawing or moving previews // SVG container holding drawing or moving previews
_this.svgContainer = $('<svg style="position: absolute; top:0px; left:0px;" width="' + _this.settings.canvasWidth + '" height="' + _this.settings.canvasHeight + '"></svg>'); _this.svgContainer = $('<svg style="position: absolute; top:0px; left:0px;" width="' + _this.settings.canvasWidth + '" height="' + _this.settings.canvasHeight + '"></svg>');
// container for own and other users cursors
_this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
// drag and drop indicator, hidden by default // drag and drop indicator, hidden by default
_this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>') _this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>')
// container for other users cursors
_this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
// container for texts by users
_this.textContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%; cursor:text;"></div>');
// mouse overlay for draw callbacks // mouse overlay for draw callbacks
_this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>'); _this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
@ -63,6 +65,7 @@ var whiteboard = {
.append(_this.svgContainer) .append(_this.svgContainer)
.append(_this.dropIndicator) .append(_this.dropIndicator)
.append(_this.cursorContainer) .append(_this.cursorContainer)
.append(_this.textContainer)
.append(_this.mouseOverlay); .append(_this.mouseOverlay);
this.canvas = $("#whiteboardCanvas")[0]; this.canvas = $("#whiteboardCanvas")[0];
this.canvas.height = _this.settings.canvasHeight; this.canvas.height = _this.settings.canvasHeight;
@ -468,6 +471,11 @@ var whiteboard = {
}, },
addImgToCanvasByUrl: function (url) { addImgToCanvasByUrl: function (url) {
var _this = this; var _this = this;
var wasTextTool = false;
if(_this.tool==="text") {
wasTextTool = true;
_this.setTool("mouse");
}
_this.imgDragActive = true; _this.imgDragActive = true;
_this.mouseOverlay.css({ "cursor": "default" }); _this.mouseOverlay.css({ "cursor": "default" });
var imgDiv = $('<div style="border: 2px dashed gray; position:absolute; left:200px; top:200px; min-width:160px; min-height:100px; cursor:move;">' + var imgDiv = $('<div style="border: 2px dashed gray; position:absolute; left:200px; top:200px; min-width:160px; min-height:100px; cursor:move;">' +
@ -483,11 +491,14 @@ var whiteboard = {
_this.imgDragActive = false; _this.imgDragActive = false;
this.refreshCursorAppearance(); this.refreshCursorAppearance();
imgDiv.remove(); imgDiv.remove();
if(wasTextTool) {
_this.setTool("text");
}
}); });
imgDiv.find(".addToCanvasBtn").click(function () { imgDiv.find(".addToCanvasBtn").click(function () {
var draw = $(this).attr("draw"); var draw = $(this).attr("draw");
_this.imgDragActive = false; _this.imgDragActive = false;
this.refreshCursorAppearance(); _this.refreshCursorAppearance();
var width = imgDiv.width(); var width = imgDiv.width();
var height = imgDiv.height(); var height = imgDiv.height();
var p = imgDiv.position(); var p = imgDiv.position();
@ -501,6 +512,9 @@ var whiteboard = {
_this.sendFunction({ "t": "addImgBG", "draw": draw, "url": url, "d": [width, height, left, top] }); _this.sendFunction({ "t": "addImgBG", "draw": draw, "url": url, "d": [width, height, left, top] });
_this.drawId++; _this.drawId++;
imgDiv.remove(); imgDiv.remove();
if(wasTextTool) {
_this.setTool("text");
}
}); });
_this.mouseOverlay.append(imgDiv); _this.mouseOverlay.append(imgDiv);
imgDiv.draggable(); imgDiv.draggable();
@ -549,6 +563,11 @@ var whiteboard = {
}, },
setTool: function (tool) { setTool: function (tool) {
this.tool = tool; this.tool = tool;
if(this.tool==="text") {
this.textContainer.appendTo($(whiteboardContainer)); //Bring textContainer to the front
} else {
this.mouseOverlay.appendTo($(whiteboardContainer));
}
this.refreshCursorAppearance(); this.refreshCursorAppearance();
this.mouseOverlay.find(".xCanvasBtn").click(); this.mouseOverlay.find(".xCanvasBtn").click();
}, },
@ -706,8 +725,6 @@ var whiteboard = {
_this.mouseOverlay.css({ "cursor": "none" }); _this.mouseOverlay.css({ "cursor": "none" });
} else if (_this.tool === "mouse") { } else if (_this.tool === "mouse") {
this.mouseOverlay.css({ "cursor": "default" }); this.mouseOverlay.css({ "cursor": "default" });
} else if(_this.tool === "text") {
_this.mouseOverlay.css({ "cursor": "text" });
} else { //Line, Rec, Circle, Cutting } else { //Line, Rec, Circle, Cutting
_this.mouseOverlay.css({ "cursor": "crosshair" }); _this.mouseOverlay.css({ "cursor": "crosshair" });
} }