Support of 2.2 symbols API, Fixes: #218

src/app/cartography/components/d3-map/d3-map.component.ts

@@ -18,6 +18,7 @@ import { Drawing } from '../../models/drawing';
 import { Symbol } from '../../../models/symbol';
 import { GraphDataManager } from '../../managers/graph-data-manager';
 import { MapSettingsManager } from '../../managers/map-settings-manager';
+import { Server } from '../../../models/server';
 
 
 @Component({
@@ -30,6 +31,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() links: Link[] = [];
   @Input() drawings: Drawing[] = [];
   @Input() symbols: Symbol[] = [];
+  @Input() server: Server;
 
   @Input() width = 1500;
   @Input() height = 600;

src/app/cartography/converters/map/map-node-to-node-converter.ts

@@ -5,9 +5,6 @@ import { MapNode } from "../../models/map/map-node";
 import { MapLabelToLabelConverter } from "./map-label-to-label-converter";
 import { MapPortToPortConverter } from "./map-port-to-port-converter";
 import { Node } from "../../models/node";
-import { FontBBoxCalculator } from '../../helpers/font-bbox-calculator';
-import { CssFixer } from '../../helpers/css-fixer';
-import { FontFixer } from '../../helpers/font-fixer';
 
 
 @Injectable()
@@ -36,6 +33,7 @@ export class MapNodeToNodeConverter implements Converter<MapNode, Node> {
     node.project_id = mapNode.projectId;
     node.status = mapNode.status;
     node.symbol = mapNode.symbol;
+    node.symbol_url = mapNode.symbolUrl;
     node.width = mapNode.width;
     node.x = mapNode.x;
     node.y = mapNode.y;

src/app/cartography/converters/map/node-to-map-node-converter.ts

@@ -39,6 +39,7 @@ export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
     mapNode.projectId = node.project_id;
     mapNode.status = node.status;
     mapNode.symbol = node.symbol;
+    mapNode.symbolUrl = node.symbol_url;
     mapNode.width = node.width;
     mapNode.x = node.x;
     mapNode.y = node.y;

src/app/cartography/models/map/map-node.ts

@@ -21,6 +21,7 @@ export class MapNode implements Indexed {
     projectId: string;
     status: string;
     symbol: string;
+    symbolUrl: string;
     width: number;
     x: number;
     y: number;

src/app/cartography/models/node.ts

@@ -21,6 +21,7 @@ export class Node {
   project_id: string;
   status: string;
   symbol: string;
+  symbol_url: string; // @TODO: full URL to symbol, move to MapNode once converters are moved to app module
   width: number;
   x: number;
   y: number;

src/app/cartography/widgets/node.ts

@@ -4,7 +4,6 @@ import { Widget } from "./widget";
 import { SVGSelection } from "../models/types";
 import { NodeContextMenu, NodeClicked } from "../events/nodes";
 import { select, event } from "d3-selection";
-import { MapSymbol } from "../models/map/map-symbol";
 import { MapNode } from "../models/map/map-node";
 import { GraphDataManager } from "../managers/graph-data-manager";
 import { SelectionManager } from "../managers/selection-manager";
@@ -47,20 +46,12 @@ export class NodeWidget implements Widget {
         })
         .on('click', (node: MapNode) => {
           this.nodesEventSource.clicked.emit(new ClickedDataEvent<MapNode>(node, event.clientX, event.clientY))
-          // this.onNodeClicked.emit(new NodeClicked(event, n));
         });
 
     // update image of node
     node_body_merge
         .select<SVGImageElement>('image')
-          .attr('xnode:href', (n: MapNode) => {
-            const symbol = this.graphDataManager.getSymbols().find((s: MapSymbol) => s.id === n.symbol);
-            if (symbol) {
-              return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
-            }
-            // @todo; we need to have default image
-            return 'data:image/svg+xml;base64,none';
-          })
+          .attr('xnode:href', (n: MapNode) => n.symbolUrl)
           .attr('width', (n: MapNode) => n.width)
           .attr('height', (n: MapNode) => n.height)
           .attr('x', (n: MapNode) => 0)

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

@@ -7,7 +7,6 @@ import { map, mergeMap } from "rxjs/operators";
 
 import { Project } from '../../models/project';
 import { Node } from '../../cartography/models/node';
-import { SymbolService } from '../../services/symbol.service';
 import { Link } from "../../models/link";
 import { ServerService } from "../../services/server.service";
 import { ProjectService } from '../../services/project.service';
@@ -53,8 +52,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public links: Link[] = [];
   public drawings: Drawing[] = [];
   public symbols: Symbol[] = [];
-
-  project: Project;
+  public project: Project;
   public server: Server;
 
   private ws: Subject<any>;
@@ -64,6 +62,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     'moving': false,
     'draw_link': false
   };
+
   protected settings: Settings;
 
   private inReadOnlyMode = false;
@@ -71,11 +70,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   @ViewChild(NodeContextMenuComponent) nodeContextMenu: NodeContextMenuComponent;
 
   private subscriptions: Subscription[] = [];
+
   constructor(
     private route: ActivatedRoute,
     private serverService: ServerService,
     private projectService: ProjectService,
-    private symbolService: SymbolService,
     private nodeService: NodeService,
     private linkService: LinkService,
     private drawingService: DrawingService,
@@ -133,12 +132,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     this.subscriptions.push(routeSub);
 
-    this.subscriptions.push(
-      this.symbolService.symbols.subscribe((symbols: Symbol[]) => {
-        this.symbols = symbols;
-      })
-    );
-
     this.subscriptions.push(
       this.drawingsDataSource.changes.subscribe((drawings: Drawing[]) => {
         this.drawings = drawings;
@@ -148,6 +141,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     this.subscriptions.push(
       this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
+        nodes.forEach((node: Node) => {
+          node.symbol_url = `http://${this.server.ip}:${this.server.port}/v2/symbols/${node.symbol}/raw`;
+        });
+
         this.nodes = nodes;
         this.mapChangeDetectorRef.detectChanges();
       })
@@ -184,12 +181,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   onProjectLoad(project: Project) {
     this.readonly = this.projectService.isReadOnly(project);
 
-    const subscription = this.symbolService
-      .load(this.server)
+    const subscription = this.projectService
+      .nodes(this.server, project.project_id)
       .pipe(
-        mergeMap(() => {
-          return this.projectService.nodes(this.server, project.project_id);
-        }),
         mergeMap((nodes: Node[]) => {
           this.nodesDataSource.set(nodes);
           return this.projectService.links(this.server, project.project_id);

src/app/components/servers/server-discovery/server-discovery.component.html

@@ -7,3 +7,5 @@
     <button mat-button (click)="accept(discoveredServer)">YES</button>
   </mat-card-actions>
 </mat-card>
+
+<mat-divider *ngIf="discoveredServer"></mat-divider>

src/app/components/servers/server-discovery/server-discovery.component.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import { MatCardModule } from "@angular/material";
+import { MatCardModule, MatDividerModule } from "@angular/material";
 
 import { Observable } from "rxjs/Rx";
 
@@ -23,7 +23,7 @@ describe('ServerDiscoveryComponent', () => {
     mockedServerService = new MockedServerService();
     mockedVersionService = new MockedVersionService();
     TestBed.configureTestingModule({
-      imports: [ MatCardModule ],
+      imports: [ MatCardModule, MatDividerModule ],
       providers: [
         { provide: VersionService, useFactory: () => mockedVersionService },
         { provide: ServerService, useFactory: () => mockedServerService },

src/app/components/servers/servers.component.html

@@ -5,8 +5,6 @@
   <div class="default-content">
     <app-server-discovery></app-server-discovery>
 
-    <mat-divider></mat-divider>
-
     <div class="example-container mat-elevation-z8">
       <mat-table #table [dataSource]="dataSource">
 

src/app/components/servers/servers.component.ts

@@ -1,8 +1,8 @@
-import { Component, Inject, OnInit, Injectable } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { DataSource } from "@angular/cdk/collections";
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
-import { Observable, BehaviorSubject, merge } from "rxjs";
+import { Observable, merge } from "rxjs";
 import { map } from "rxjs/operators";
 
 import { Server } from "../../models/server";