Nodes and links are now colored correctly when the background tag is using the format #aarrggbb.

Author: CoderAllan

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Version 1.1.1
 
 - The width and height from the bounds-attribute on the nodes are now used if the attribute is present.
+- Bugfix: Nodes and Edges was not colored correctly when the background tag used the format #aarrggbb.
 
 ## Version 1.1.0
 

src/model/BaseElement.ts

@@ -0,0 +1,20 @@
+
+export class BaseElement {
+  
+  public convertColorValue(colorValue: string) {
+    const regex = /#(\w{2})(\w{2})(\w{2})(\w{2})/i;
+    const match = regex.exec(colorValue);
+    if (match) {
+      let a = this.toNum(match[1]);
+      console.log(a);
+      a = a / 255;
+      return `rgba(${this.toNum(match[2])}, ${this.toNum(match[3])}, ${this.toNum(match[4])}, ${a})`;
+    } else {
+      return colorValue;
+    }
+  }
+  private toNum(hex: string): number {
+    return parseInt(Number('0x' + hex).toString(),10);
+  }
+
+}

src/model/Link.ts

@@ -1,6 +1,7 @@
 import { ICategory } from '@model';
+import { BaseElement } from './BaseElement';
 // https://schemas.microsoft.com/vs/2009/dgml/dgml.xsd
-export class Link {
+export class Link extends BaseElement {
   public source: string | undefined;
   public target: string | undefined;
   public category: string | undefined;
@@ -32,8 +33,8 @@ export class Link {
     if (this.strokeThickness !== undefined) { jsStringProperties.push(`width: ${this.strokeThickness}`); }
     if (this.visibility !== undefined) { jsStringProperties.push(`hidden: ${this.visibility}`); }
     const jsStringColorProperties: string[] = [];
-    if (this.stroke !== undefined) { jsStringColorProperties.push(`color: "${this.stroke}"`); }
-    if (this.categoryRef !== undefined && this.stroke === undefined && this.categoryRef.background !== undefined) { jsStringProperties.push(`color: "${this.categoryRef.background}"`); }
+    if (this.stroke !== undefined) { jsStringColorProperties.push(`color: "${this.convertColorValue(this.stroke)}"`); }
+    if (this.categoryRef !== undefined && this.stroke === undefined && this.categoryRef.background !== undefined) { jsStringProperties.push(`color: "${this.convertColorValue(this.categoryRef.background)}"`); }
     if (jsStringColorProperties.length > 0) { jsStringProperties.push(`color: { ${jsStringColorProperties.join(', ')} }`); }
     return `{${jsStringProperties.join(', ')}}`;
   }

src/model/Node.ts

@@ -1,7 +1,8 @@
 import { ICategory } from "@model";
+import { BaseElement } from "./BaseElement";
 
 // https://schemas.microsoft.com/vs/2009/dgml/dgml.xsd
-export class Node {
+export class Node extends BaseElement {
   public id: string | undefined;
   public category: string | undefined;
   public description: string | undefined;
@@ -54,13 +55,13 @@ export class Node {
     if (this.strokeThickness !== undefined) { jsStringProperties.push(`borderWidth: "${this.strokeThickness}"`); }
     const jsStringColorProperties: string[] = [];
     if (this.stroke !== undefined) { jsStringColorProperties.push(`border: "${this.stroke}"`); }
-    if (this.background !== undefined) { jsStringColorProperties.push(`background: "${this.background}"`); }
-    if (this.categoryRef !== undefined && this.background === undefined && this.categoryRef.background !== undefined) { jsStringColorProperties.push(`background: "${this.categoryRef.background}"`); }
-    if (this.categoryRef !== undefined && this.stroke === undefined && this.categoryRef.stroke !== undefined) { jsStringColorProperties.push(`border: "${this.categoryRef.stroke}"`); }
+    if (this.background !== undefined) { jsStringColorProperties.push(`background: "${this.convertColorValue(this.background)}"`); }
+    if (this.categoryRef !== undefined && this.background === undefined && this.categoryRef.background !== undefined) { jsStringColorProperties.push(`background: "${this.convertColorValue(this.categoryRef.background)}"`); }
+    if (this.categoryRef !== undefined && this.stroke === undefined && this.categoryRef.stroke !== undefined) { jsStringColorProperties.push(`border: "${this.convertColorValue(this.categoryRef.stroke)}"`); }
     if (jsStringColorProperties.length > 0) { jsStringProperties.push(`color: { ${jsStringColorProperties.join(', ')} }`); }
     if (this.boundsX !== undefined && this.boundsY !== undefined) { jsStringProperties.push(`x: ${this.boundsX}, y: ${this.boundsY}, fixed: { x: true, y: true}`); }
-    if (this.boundsWidth !== undefined) { jsStringProperties.push(`widthConstraint: { minimum: ${this.boundsWidth} }`) }
-    if (this.boundsHeight !== undefined) { jsStringProperties.push(`heightConstraint: { minimum: ${this.boundsHeight}, valign: top }`) }
+    if (this.boundsWidth !== undefined) { jsStringProperties.push(`widthConstraint: { minimum: ${this.boundsWidth} }`); }
+    if (this.boundsHeight !== undefined) { jsStringProperties.push(`heightConstraint: { minimum: ${this.boundsHeight}, valign: top }`); }
     return `{${jsStringProperties.join(', ')}}`;
   }