Fix label of added node (when GUI is not running). Fixes #292

src/app/app.module.ts

@@ -182,6 +182,7 @@ import { ResumeLinkActionComponent } from './components/project-map/context-menu
 import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
 import { ConsoleService } from './services/settings/console.service';
 import { DefaultConsoleService } from './services/settings/default-console.service';
+import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -369,7 +370,8 @@ if (environment.production) {
     RecentlyOpenedProjectService,
     ServerManagementService,
     ConsoleService,
-    DefaultConsoleService
+    DefaultConsoleService,
+    NodeCreatedLabelStylesFixer
   ],
   entryComponents: [
     AddServerDialogComponent,

src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts

@@ -1,24 +1,23 @@
 import { NodeCreatedLabelStylesFixer } from "./node-created-label-styles-fixer";
-import { MapNode } from '../../../cartography/models/map/map-node';
 import { Node } from '../../../cartography/models/node';
 import { Label } from '../../../cartography/models/label';
 
 describe('NodeCreatedLabelStylesFixer', () => {
   let fixer: NodeCreatedLabelStylesFixer;
-  let nodeToMapNodeConverter;
+  let calculator;
 
   beforeEach(() => {
-    nodeToMapNodeConverter = {
-      convert: (node) => {
-        const n = new MapNode();
-        n.width = node.width;
-        n.height = node.height;
-        return n;
+    calculator = {
+      calculate: (text, styles) => {
+        return {
+          width: 50,
+          height: 10
+        };
       }
     };
 
     fixer = new NodeCreatedLabelStylesFixer(
-      nodeToMapNodeConverter
+      calculator
     );
   });
 
@@ -32,5 +31,7 @@ describe('NodeCreatedLabelStylesFixer', () => {
     const fixed = fixer.fix(node);
 
     expect(fixed.label.style).toEqual('font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;');
+    expect(fixed.label.x).toEqual(25);
+    expect(fixed.label.y).toEqual(-18);
   });
 });

src/app/components/project-map/helpers/node-created-label-styles-fixer.ts

@@ -1,16 +1,24 @@
 import { Injectable } from '@angular/core';
 import { Node } from '../../../cartography/models/node';
-import { NodeToMapNodeConverter } from '../../../cartography/converters/map/node-to-map-node-converter';
+import { FontBBoxCalculator } from '../../../cartography/helpers/font-bbox-calculator';
 
 @Injectable()
 export class NodeCreatedLabelStylesFixer {
+  MARGIN_BETWEEN_NODE_AND_LABEL = 8;
+
   constructor(
-    private nodeToMapNodeConverter: NodeToMapNodeConverter
+    private fontBBCalculator: FontBBoxCalculator
   ) {}
 
   fix(node: Node): Node {
-    const mapNode = this.nodeToMapNodeConverter.convert(node);
+    node.label.style = 'font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;';
+    const bb = this.fontBBCalculator.calculate(node.label.text, node.label.style);
 
+    // center label
+    node.label.x = node.width / 2 - bb.width / 2;
+
+    // move above the node
+    node.label.y = -bb.height - this.MARGIN_BETWEEN_NODE_AND_LABEL;
     return node;
   }
 }

src/app/components/project-map/project-map.component.spec.ts

@@ -42,6 +42,7 @@ import { Link } from '../../models/link';
 import { Project } from '../../models/project';
 import { CapturingSettings } from '../../models/capturingSettings';
 import { LinkWidget } from '../../cartography/widgets/link';
+import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
 
 export class MockedProgressService {
   public activate() {}
@@ -182,8 +183,13 @@ describe('ProjectMapComponent', () => {
   let drawingsDataSource = new MockedDrawingsDataSource();
   let nodesDataSource = new MockedNodesDataSource();
   let linksDataSource = new MockedLinksDataSource();
+  let nodeCreatedLabelStylesFixer;
 
   beforeEach(async(() => {
+    nodeCreatedLabelStylesFixer = {
+      fix: (node) => node
+    };
+
     TestBed.configureTestingModule({
       imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
       providers: [
@@ -214,6 +220,7 @@ describe('ProjectMapComponent', () => {
           provide: RecentlyOpenedProjectService,
           useClass: RecentlyOpenedProjectService
         },
+        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer}
       ],
       declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
       schemas: [NO_ERRORS_SCHEMA]

src/app/components/project-map/project-map.component.ts

@@ -279,6 +279,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
         nodes.filter((node) => node.label.style === null).forEach((node) => {
           const fixedNode = this.nodeCreatedLabelStylesFixer.fix(node);
+          this.nodeService.updateLabel(this.server, node, fixedNode.label).subscribe();
         });
 
         this.nodesDataSource.set(nodes);