From 9e38380b9ae2d32906ec45ec4803601c14cef1a1 Mon Sep 17 00:00:00 2001
From: mochiokun <a@example.com>
Date: Tue, 23 Feb 2021 21:49:55 +0900
Subject: [PATCH] Add:textbox-backgroundColorEdit

---
 src/index.html       | 21 ++++++++++++++++---
 src/js/main.js       |  9 ++++++++
 src/js/whiteboard.js | 49 +++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/src/index.html b/src/index.html
index d762a9d..c60451c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -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>
diff --git a/src/js/main.js b/src/js/main.js
index de2c9e7..7572fe7 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -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
diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js
index 7db2dd9..5f81517 100644
--- a/src/js/whiteboard.js
+++ b/src/js/whiteboard.js
@@ -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);