diff --git a/public/css/Room.css b/public/css/Room.css
index 9399b54..f5e6d69 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -595,6 +595,7 @@ button:hover {
height: var(--wb-height);
background: var(--wb-bg);
border-radius: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
}
diff --git a/public/js/Room.js b/public/js/Room.js
index 981b9fe..0ce2071 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -238,8 +238,10 @@ function whoAreYou() {
input: 'text',
inputPlaceholder: 'Enter your name',
html: `
-
- `,
+
+
+
+
`,
confirmButtonText: `Join meeting`,
showClass: {
popup: 'animate__animated animate__fadeInDown',
@@ -956,7 +958,6 @@ function whiteboardIsDrawingMode(b) {
}
function whiteboardAddObj(type) {
- let obj = null;
switch (type) {
case 'imgUrl':
Swal.fire({
@@ -970,9 +971,7 @@ function whiteboardAddObj(type) {
let wbCanvasImgURL = result.value;
if (isImageURL(wbCanvasImgURL)) {
fabric.Image.fromURL(wbCanvasImgURL, function (myImg) {
- wbCanvas.add(myImg);
- whiteboardIsDrawingMode(false);
- wbCanvasToJson();
+ addWbCanvasObj(myImg);
});
} else {
userLog('error', 'The URL is not a valid image', 'top-end');
@@ -1004,15 +1003,8 @@ function whiteboardAddObj(type) {
imgObj.src = event.target.result;
imgObj.onload = function () {
let image = new fabric.Image(imgObj);
- image
- .set({
- top: 0,
- left: 0,
- })
- .scale(0.5);
- wbCanvas.add(image);
- whiteboardIsDrawingMode(false);
- wbCanvasToJson();
+ image.set({ top: 0, left: 0 }).scale(0.5);
+ addWbCanvasObj(image);
};
};
reader.readAsDataURL(wbCanvasImg);
@@ -1032,17 +1024,17 @@ function whiteboardAddObj(type) {
}).then((result) => {
if (result.isConfirmed) {
let wbCanvasText = result.value;
- const text = new fabric.Text(wbCanvasText, {
- top: 0,
- left: 0,
- fontFamily: 'Comfortaa',
- fill: wbCanvas.freeDrawingBrush.color,
- strokeWidth: wbCanvas.freeDrawingBrush.width,
- stroke: wbCanvas.freeDrawingBrush.color,
- });
- wbCanvas.add(text);
- whiteboardIsDrawingMode(false);
- wbCanvasToJson();
+ if (wbCanvasText) {
+ const text = new fabric.Text(wbCanvasText, {
+ top: 0,
+ left: 0,
+ fontFamily: 'Comfortaa',
+ fill: wbCanvas.freeDrawingBrush.color,
+ strokeWidth: wbCanvas.freeDrawingBrush.width,
+ stroke: wbCanvas.freeDrawingBrush.color,
+ });
+ addWbCanvasObj(text);
+ }
}
});
break;
@@ -1054,7 +1046,7 @@ function whiteboardAddObj(type) {
strokeWidth: wbCanvas.freeDrawingBrush.width,
stroke: wbCanvas.freeDrawingBrush.color,
});
- obj = line;
+ addWbCanvasObj(line);
break;
case 'circle':
const circle = new fabric.Circle({
@@ -1063,7 +1055,7 @@ function whiteboardAddObj(type) {
stroke: wbCanvas.freeDrawingBrush.color,
strokeWidth: wbCanvas.freeDrawingBrush.width,
});
- obj = circle;
+ addWbCanvasObj(circle);
break;
case 'rect':
const rect = new fabric.Rect({
@@ -1075,9 +1067,12 @@ function whiteboardAddObj(type) {
stroke: wbCanvas.freeDrawingBrush.color,
strokeWidth: wbCanvas.freeDrawingBrush.width,
});
- obj = rect;
+ addWbCanvasObj(rect);
break;
}
+}
+
+function addWbCanvasObj(obj) {
if (obj) {
wbCanvas.add(obj);
whiteboardIsDrawingMode(false);