Setting edge label backgound correctly.

Author: CoderAllan

src/dgmlParser.ts

@@ -415,7 +415,7 @@ export class DgmlParser {
                 if (setter.property.toLowerCase() === 'fontweight') {
                   category.fontWeight = setter.value;
                 }
-                if (setter.property.toLowerCase() === 'background') {
+                if (setter.property.toLowerCase() === 'background' && category.background === undefined) { // background color on the category overrides background color on the styling
                   category.background = setter.value;
                 }
                 if (setter.property.toLowerCase() === 'horizontalalignment') {

src/model/Edge.ts

@@ -82,11 +82,16 @@ export class Edge extends BaseElement {
     if (this.categoryRef !== undefined) {
       titleElements.push(`Category: ${this.categoryRef.id}`);
     }
-    if (this.categoryRef !== undefined && this.categoryRef.background !== undefined) {
-      jsStringProperties.push(`backgroundColor: '${this.convertColorValue(this.categoryRef.background)}'`);
+    if (this.background !== undefined) {
+      jsStringProperties.push(`backgroundColor: '${this.convertColorValue(this.background)}', backgroundOpacity: 1`);
     }
     else {
-      jsStringProperties.push(`backgroundColor: 'rgba(63, 124, 227, 1)'`);
+      if (this.categoryRef !== undefined && this.categoryRef.background !== undefined) {
+        jsStringProperties.push(`backgroundColor: '${this.convertColorValue(this.categoryRef.background)}', backgroundOpacity: 1`);
+      }
+      else {
+        jsStringProperties.push(`backgroundColor: '', backgroundOpacity: 0`);
+      }
     }
     if (this.categoryRef !== undefined && this.categoryRef.stroke !== undefined) {
       jsStringProperties.push(`color: '${this.convertColorValue(this.categoryRef.stroke)}'`);

templates/dgmlViewer_Template.js

@@ -245,6 +245,8 @@
               'target-arrow-shape': edgeArrowType,
               'target-arrow-color': 'data(color)',
               'line-style': 'data(lineStyle)',
+              'text-background-color': 'data(backgroundColor)',
+              'text-background-opacity': 'data(backgroundOpacity)',
             }
           }
         ],