Adjust default system font #127

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

@@ -0,0 +1,39 @@
+import { FontFixer } from "./font-fixer";
+import { Font } from "../models/font";
+
+
+describe('FontFixer', () => {
+  let fixer: FontFixer;
+
+  beforeEach(() => {
+    fixer = new FontFixer();
+  });
+
+  it('should fix TypeWriter font and 10px size', () => {
+    const font: Font = {
+      'font_family': 'TypeWriter',
+      'font_size': 10,
+      'font_weight': 'bold'
+    };
+
+    expect(fixer.fix(font)).toEqual( {
+      'font_family': 'Noto Sans',
+      'font_size': 11,
+      'font_weight': 'bold'
+    });
+  });
+
+  it('should not fix other fonts', () => {
+    const font: Font = {
+      'font_family': 'OtherFont',
+      'font_size': 11,
+      'font_weight': 'bold'
+    };
+
+    expect(fixer.fix(font)).toEqual( {
+      'font_family': 'OtherFont',
+      'font_size': 11,
+      'font_weight': 'bold'
+    });
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { Font } from "../models/font";
+
+/**
+ * GNS3 GUI doesn't update font when cannot find font in user system, this fixer fixes it
+ */
+@Injectable()
+export class FontFixer {
+  static DEFAULT_FONT = "TypeWriter";
+  static DEFAULT_SIZE = 10;
+  static REPLACE_BY_FONT = "Noto Sans";
+  static REPLACE_BY_SIZE = 10;
+
+  public fix(font: Font): Font {
+    if (font.font_family === FontFixer.DEFAULT_FONT && font.font_size === FontFixer.DEFAULT_SIZE) {
+      font.font_family = FontFixer.REPLACE_BY_FONT;
+      font.font_size = FontFixer.REPLACE_BY_SIZE;
+    }
+    return font;
+  }
+}

src/app/cartography/shared/models/drawings/text-element.ts

@@ -1,7 +1,8 @@
 import { DrawingElement } from "./drawing-element";
+import { Font } from "../font";
 
 
-export class TextElement implements DrawingElement {
+export class TextElement implements DrawingElement, Font {
   height: number;
   width: number;
   text: string;

src/app/cartography/shared/models/font.ts

@@ -0,0 +1,5 @@
+export interface Font {
+  font_family: string;
+  font_size: number;
+  font_weight: string;
+}

src/app/cartography/shared/widgets/drawings/text-drawing.ts

@@ -2,9 +2,17 @@ import { SVGSelection } from "../../models/types";
 import { TextElement } from "../../models/drawings/text-element";
 import { Drawing } from "../../models/drawing";
 import { DrawingWidget } from "./drawing-widget";
+import { FontFixer } from "../../helpers/font-fixer";
+import { Font } from "../../models/font";
 
 
 export class TextDrawingWidget implements DrawingWidget {
+  private fontFixer: FontFixer;
+
+  constructor() {
+    this.fontFixer = new FontFixer();
+  }
+
   public draw(view: SVGSelection) {
     const drawing = view
       .selectAll<SVGTextElement, TextElement>('text.text_element')
@@ -18,17 +26,18 @@ export class TextDrawingWidget implements DrawingWidget {
         .attr('class', 'text_element noselect');
 
     const merge = drawing.merge(drawing_enter);
-
     merge
       .attr('style', (text: TextElement) => {
+        const font = this.fontFixer.fix(text);
+
         const styles: string[] = [];
-        if (text.font_family) {
+        if (font.font_family) {
           styles.push(`font-family: "${text.font_family}"`);
         }
-        if (text.font_size) {
+        if (font.font_size) {
           styles.push(`font-size: ${text.font_size}pt`);
         }
-        if (text.font_weight) {
+        if (font.font_weight) {
           styles.push(`font-weight: ${text.font_weight}`);
         }
         return styles.join("; ");

src/app/project-map/project-map.component.css

@@ -31,9 +31,9 @@ g.node:hover {
   left: 50%;
 }
 
-g.node text {
-  font-family: Roboto !important;
-}
+/*g.node text {*/
+  /*font-family: Roboto !important;*/
+/*}*/
 
 
 svg.map image:hover, svg.map image.chosen, g.selected {