From 0858491918c56c1f46d4f6ad3f2d5b091085b6d7 Mon Sep 17 00:00:00 2001
From: mtutic <mateo@tutic.ch>
Date: Mon, 18 Jan 2021 11:14:05 +0100
Subject: [PATCH 1/2] Ability to add a border around an edge.

---
 lib/network/modules/EdgesHandler.js           |  3 ++
 lib/network/modules/NodesHandler.js           |  3 ++
 .../modules/components/shared/Label.js        | 47 ++++++++++++++++++-
 lib/network/options.ts                        | 12 +++++
 4 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/lib/network/modules/EdgesHandler.js b/lib/network/modules/EdgesHandler.js
index 4938468acd..b6bea0bd8d 100644
--- a/lib/network/modules/EdgesHandler.js
+++ b/lib/network/modules/EdgesHandler.js
@@ -56,6 +56,9 @@ class EdgesHandler {
         size: 14, // px
         face: "arial",
         background: "none",
+        borderColor: "none",
+        borderWidth: 0, // px
+        padding: 0, // px
         strokeWidth: 2, // px
         strokeColor: "#ffffff",
         align: "horizontal",
diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index ecd6506085..9ed07288d1 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -59,6 +59,9 @@ class NodesHandler {
         size: 14, // px
         face: "arial",
         background: "none",
+        borderColor: "none",
+        borderWidth: 0, // px
+        padding: 0, // px
         strokeWidth: 0, // px
         strokeColor: "#ffffff",
         align: "center",
diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js
index a996869d41..cdbce6857f 100644
--- a/lib/network/modules/components/shared/Label.js
+++ b/lib/network/modules/components/shared/Label.js
@@ -432,6 +432,7 @@ class Label {
     // update the size cache if required
     this.calculateLabelSize(ctx, selected, hover, x, y, baseline);
     this._drawBackground(ctx);
+    this._drawBorder(ctx);
     this._drawText(ctx, x, this.size.yLine, baseline, viewFontSize);
   }
 
@@ -447,11 +448,55 @@ class Label {
       this.fontOptions.background !== "none"
     ) {
       ctx.fillStyle = this.fontOptions.background;
-      const size = this.getSize();
+      const size = this._getSizeWithSpacing();
       ctx.fillRect(size.left, size.top, size.width, size.height);
     }
   }
 
+  /**
+   * Draws the label border
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @private
+   */
+  _drawBorder(ctx) {
+    if (
+      this.fontOptions.borderColor !== undefined &&
+      this.fontOptions.borderColor !== "none"
+    ) {
+      ctx.lineWidth = 1;
+      if (
+        this.fontOptions.borderWidth !== undefined &&
+        this.fontOptions.borderWidth !== "none"
+      ) {
+        ctx.lineWidth = this.fontOptions.borderWidth;
+      }
+      ctx.strokeStyle = this.fontOptions.borderColor;
+      const size = this._getSizeWithSpacing();
+      ctx.strokeRect(size.left, size.top, size.width, size.height);
+    }
+  }
+
+  /**
+   * Gets label's size with specified padding.
+   *
+   * @returns {number} Label's size.
+   * @private
+   */
+  _getSizeWithSpacing() {
+    const size = this.getSize();
+    if (
+      this.fontOptions.padding !== undefined &&
+      this.fontOptions.padding !== "none"
+    ) {
+      size.left -= this.fontOptions.padding;
+      size.top -= this.fontOptions.padding;
+      size.width += 2 * this.fontOptions.padding;
+      size.height += 2 * this.fontOptions.padding;
+    }
+    return size;
+  }
+
   /**
    *
    * @param {CanvasRenderingContext2D} ctx
diff --git a/lib/network/options.ts b/lib/network/options.ts
index 7347e90879..d828dd6ee7 100644
--- a/lib/network/options.ts
+++ b/lib/network/options.ts
@@ -72,6 +72,9 @@ const nodeOptions: OptionsConfig = {
     size: { number }, // px
     face: { string },
     background: { string },
+    borderColor: { string },
+    borderWidth: { number }, // px
+    padding: { number },  // px
     strokeWidth: { number }, // px
     strokeColor: { string },
     vadjust: { number },
@@ -292,6 +295,9 @@ const allOptions: OptionsConfig = {
       size: { number }, // px
       face: { string },
       background: { string },
+      borderColor: { string },
+      borderWidth: { number }, // px
+      padding: { number },  // px
       strokeWidth: { number }, // px
       strokeColor: { string },
       align: { string: ["horizontal", "top", "middle", "bottom"] },
@@ -598,6 +604,9 @@ const configureOptions: ConfiguratorConfig = {
       size: [14, 0, 100, 1], // px
       face: ["arial", "verdana", "tahoma"],
       background: ["color", "none"],
+      borderColor: ["color", "none"],
+      borderWidth: [0, 0, 10, 1], // px
+      padding: [0, 0, 10, 1], // px
       strokeWidth: [0, 0, 50, 1], // px
       strokeColor: ["color", "#ffffff"],
     },
@@ -676,6 +685,9 @@ const configureOptions: ConfiguratorConfig = {
       size: [14, 0, 100, 1], // px
       face: ["arial", "verdana", "tahoma"],
       background: ["color", "none"],
+      borderColor: ["color", "none"],
+      borderWidth: [0, 0, 10, 1], // px
+      padding: [0, 0, 10, 1], // px
       strokeWidth: [2, 0, 50, 1], // px
       strokeColor: ["color", "#ffffff"],
       align: ["horizontal", "top", "middle", "bottom"],

From 8edec20cf48e3f4d551e240820399d66a6dccef9 Mon Sep 17 00:00:00 2001
From: mtutic <mateo@tutic.ch>
Date: Mon, 18 Jan 2021 11:55:00 +0100
Subject: [PATCH 2/2] Fix unit test by adding new font options

---
 test/Network.test.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/Network.test.js b/test/Network.test.js
index 1d5e174488..ad4a2be368 100644
--- a/test/Network.test.js
+++ b/test/Network.test.js
@@ -216,6 +216,9 @@ function checkFontProperties(fontItem, checkStrict = true) {
     "size",
     "face",
     "background",
+    "borderColor",
+    "borderWidth",
+    "padding",
     "strokeWidth",
     "strokeColor",
     "align",