Fix CSS styles when provided wrong from server

package.json

@@ -43,6 +43,7 @@
     "angular2-indexeddb": "^1.2.2",
     "bootstrap": "4.1.0",
     "core-js": "^2.5.5",
+    "css-tree": "^1.0.0-alpha.28",
     "d3-ng2-service": "^2.1.0",
     "electron-settings": "^3.1.4",
     "material-design-icons": "^3.0.1",

src/app/cartography/shared/helpers/css-fixer.spec.ts

@@ -0,0 +1,30 @@
+
+import { CssFixer } from "./css-fixer";
+
+describe('CssFixer', () => {
+  let fixer: CssFixer;
+
+  beforeEach(() => {
+    fixer = new CssFixer();
+  });
+
+  it('should fix font-size', () => {
+    const css = "font-size: 10.0;";
+    expect(fixer.fix(css)).toEqual("font-size:10.0pt");
+  });
+
+  it('should not fix font-size when pt unit is defined', () => {
+    const css = "font-size: 10.0pt;";
+    expect(fixer.fix(css)).toEqual("font-size:10.0pt");
+  });
+
+  it('should not fix font-size when px unit is defined', () => {
+    const css = "font-size: 10.0px;";
+    expect(fixer.fix(css)).toEqual("font-size:10.0px");
+  });
+
+  it('should fix font-size with other attributes', () => {
+    const css = "font: Verdana; font-size: 10.0;";
+    expect(fixer.fix(css)).toEqual("font:Verdana;font-size:10.0pt");
+  });
+});

src/app/cartography/shared/helpers/css-fixer.ts

@@ -0,0 +1,29 @@
+import * as csstree from 'css-tree';
+
+import { Injectable } from "@angular/core";
+
+
+@Injectable()
+export class CssFixer {
+
+  public fix(styles: string) {
+    const ast = csstree.parse(styles, {
+      'context': 'declarationList'
+    });
+
+    // fixes font-size when unit (pt|px) is not defined
+    ast.children.forEach((child) => {
+      if (child.property === 'font-size') {
+        child.value.children.forEach((value) => {
+          if (value.type === 'Number') {
+            const fontSize = value.value.toString();
+            if (!(fontSize.indexOf("pt") >= 0 || fontSize.indexOf("px") >=  0)) {
+              value.value = `${fontSize}pt`;
+            }
+          }
+        });
+      }
+    });
+    return csstree.generate(ast);
+  }
+}

src/app/cartography/shared/widgets/interface-label.spec.ts

@@ -85,7 +85,7 @@ describe('InterfaceLabelsWidget', () => {
     expect(sourceInterface.getAttribute('x')).toEqual('110');
     expect(sourceInterface.getAttribute('y')).toEqual('220');
     expect(sourceInterface.getAttribute('transform')).toEqual('rotate(5, 110, 220)');
-    expect(sourceInterface.getAttribute('style')).toEqual('font-size: 12px');
+    expect(sourceInterface.getAttribute('style')).toEqual('font-size:12px');
     expect(sourceInterface.getAttribute('class')).toContain('noselect');
 
 

src/app/cartography/shared/widgets/interface-label.ts

@@ -1,9 +1,16 @@
 import { SVGSelection } from "../models/types";
 import { Link } from "../models/link";
 import { InterfaceLabel } from "../models/interface-label";
+import { CssFixer } from "../helpers/css-fixer";
 
 
 export class InterfaceLabelWidget {
+  private cssFixer: CssFixer;
+
+  constructor() {
+    this.cssFixer = new CssFixer();
+  }
+
   draw(selection: SVGSelection) {
 
     const labels = selection
@@ -40,7 +47,7 @@ export class InterfaceLabelWidget {
       .text((l: InterfaceLabel) => l.text)
       .attr('x', (l: InterfaceLabel) => l.x)
       .attr('y', (l: InterfaceLabel) => l.y)
-      .attr('style', (l: InterfaceLabel) => l.style)
+      .attr('style', (l: InterfaceLabel) => this.cssFixer.fix(l.style))
       .attr('transform', (l: InterfaceLabel) => `rotate(${l.rotation}, ${l.x}, ${l.y})`);
 
     labels

src/app/cartography/shared/widgets/nodes.ts

@@ -6,6 +6,7 @@ import { Node } from "../models/node";
 import { SVGSelection } from "../models/types";
 import { Symbol } from "../models/symbol";
 import { Layer  } from "../models/layer";
+import { CssFixer } from "../helpers/css-fixer";
 
 
 export class NodesWidget implements Widget {
@@ -17,9 +18,11 @@ export class NodesWidget implements Widget {
   private onNodeDraggingCallbacks: ((event: any, node: Node) => void)[] = [];
 
   private symbols: Symbol[];
+  private cssFixer: CssFixer;
 
   constructor() {
     this.symbols = [];
+    this.cssFixer = new CssFixer();
   }
 
   public setOnContextMenuCallback(onContextMenuCallback: (event: any, node: Node) => void) {
@@ -57,7 +60,7 @@ export class NodesWidget implements Widget {
     selection
       .select<SVGTextElement>('text.label')
         // .attr('y', (n: Node) => n.label.y - n.height / 2. + 10)  // @todo: server computes y in auto way
-        .attr('style', (n: Node) => n.label.style)
+        .attr('style', (n: Node) => this.cssFixer.fix(n.label.style))
         .text((n: Node) => n.label.text)
         .attr('x', function (this: SVGTextElement, n: Node) {
           if (n.label.x === null) {

yarn.lock

@@ -2244,6 +2244,13 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-tree@^1.0.0-alpha.28:
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f"
+  dependencies:
+    mdn-data "~1.1.0"
+    source-map "^0.5.3"
+
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -5556,6 +5563,10 @@ md5@^2.2.1:
     crypt "~0.0.1"
     is-buffer "~1.1.1"
 
+mdn-data@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.1.tgz#79586c90321787e5a2e51eb6823bb448949bc1ab"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"