Merge pull request #384 from GNS3/fix-adding-node

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

@@ -0,0 +1,37 @@
+import { NodeCreatedLabelStylesFixer } from "./node-created-label-styles-fixer";
+import { Node } from '../../../cartography/models/node';
+import { Label } from '../../../cartography/models/label';
+
+describe('NodeCreatedLabelStylesFixer', () => {
+  let fixer: NodeCreatedLabelStylesFixer;
+  let calculator;
+
+  beforeEach(() => {
+    calculator = {
+      calculate: (text, styles) => {
+        return {
+          width: 50,
+          height: 10
+        };
+      }
+    };
+
+    fixer = new NodeCreatedLabelStylesFixer(
+      calculator
+    );
+  });
+
+  it('should fix label styles and position', () => {
+    const node = new Node();
+    node.width = 100;
+    node.height = 100;
+    node.label = new Label();
+    node.label.text = "my new label";
+
+    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

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Node } from '../../../cartography/models/node';
+import { FontBBoxCalculator } from '../../../cartography/helpers/font-bbox-calculator';
+
+@Injectable()
+export class NodeCreatedLabelStylesFixer {
+  MARGIN_BETWEEN_NODE_AND_LABEL = 8;
+
+  constructor(
+    private fontBBCalculator: FontBBoxCalculator
+  ) {}
+
+  fix(node: Node): 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

@@ -43,6 +43,7 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje
 import { MapLink } from '../../cartography/models/map/map-link';
 import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
 import { LinkWidget } from '../../cartography/widgets/link';
+import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
 
 
 @Component({
@@ -108,7 +109,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private toolsService: ToolsService,
     private selectionManager: SelectionManager,
     private selectionTool: SelectionTool,
-    private recentlyOpenedProjectService: RecentlyOpenedProjectService
+    private recentlyOpenedProjectService: RecentlyOpenedProjectService,
+    private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer
   ) {}
 
   ngOnInit() {
@@ -274,6 +276,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     
     this.nodeService.createFromTemplate(this.server, this.project, template, 0, 0, 'local').subscribe(() => {
       this.projectService.nodes(this.server, this.project.project_id).subscribe((nodes: Node[]) => {
+
+        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);
       });
     });

src/app/services/settings/console.service.spec.ts

@@ -1,9 +1,5 @@
-import { TestBed } from '@angular/core/testing';
-
 import { ConsoleService } from './console.service';
 import { MockedSettingsService } from '../settings.service.spec';
-import { SettingsService } from '../settings.service';
-import { DefaultConsoleService } from './default-console.service';
 
 describe('ConsoleService', () => {
   let service: ConsoleService;