Changed approach for symbols

src/app/cartography/map/map.component.ts

@@ -10,7 +10,7 @@ import { GraphLayout } from "../shared/widgets/graph.widget";
 import { Context } from "../../map/models/context";
 import { Size } from "../shared/models/size.model";
 import { Drawing } from "../shared/models/drawing.model";
-import {SVGSelection} from "../../map/models/types";
+import {Symbol} from "../../shared/models/symbol";
 
 
 @Component({
@@ -22,6 +22,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nodes: Node[] = [];
   @Input() links: Link[] = [];
   @Input() drawings: Drawing[] = [];
+  @Input() symbols: Symbol[] = [];
+
   @Input() width = 1500;
   @Input() height = 600;
   @Input() windowFullSize = true;
@@ -47,7 +49,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
       (changes['height'] && !changes['height'].isFirstChange()) ||
       (changes['drawings'] && !changes['drawings'].isFirstChange()) ||
       (changes['nodes'] && !changes['nodes'].isFirstChange()) ||
-      (changes['links'] && !changes['links'].isFirstChange())
+      (changes['links'] && !changes['links'].isFirstChange()) ||
+      (changes['symbols'] && !changes['symbols'].isFirstChange())
     ) {
       if (this.svg.empty && !this.svg.empty()) {
         if (changes['nodes']) {
@@ -56,6 +59,9 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
         if (changes['links']) {
           this.onLinksChange(changes['links']);
         }
+        if (changes['symbols']) {
+          this.onSymbolsChange(changes['symbols']);
+        }
         this.changeLayout();
       }
     }
@@ -156,6 +162,10 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
     this.onLinksChange(null);
   }
 
+  private onSymbolsChange(change: SimpleChange) {
+    this.graphLayout.getNodesWidget().setSymbols(this.symbols);
+  }
+
   public redraw() {
     this.graphLayout.draw(this.svg, this.graphContext);
   }

src/app/cartography/shared/models/node.model.ts

@@ -1,5 +1,4 @@
 import {Label} from "./label.model";
-import {Symbol} from "../../../shared/models/symbol";
 
 export class Node {
   command_line: string;
@@ -24,6 +23,4 @@ export class Node {
   x: number;
   y: number;
   z: number;
-
-  icon: Symbol; // not from server
 }

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

@@ -3,6 +3,7 @@ import { Node } from "../models/node.model";
 import { SVGSelection } from "../../../map/models/types";
 import {event, select} from "d3-selection";
 import {D3DragEvent, drag} from "d3-drag";
+import {Symbol} from "../../../shared/models/symbol";
 
 export interface NodeOnContextMenuListener {
   onContextMenu(): void;
@@ -13,6 +14,8 @@ export class NodesWidget implements Widget {
   private onNodeDraggedCallback: (event: any, node: Node) => void;
   private onNodeDraggingCallbacks: ((event: any, node: Node) => void)[] = [];
 
+  private symbols: Symbol[] = [];
+
   constructor() {}
 
   public setOnContextMenuCallback(onContextMenuCallback: (event: any, node: Node) => void) {
@@ -27,6 +30,10 @@ export class NodesWidget implements Widget {
     this.onNodeDraggingCallbacks.push(onNodeDraggingCallback);
   }
 
+  public setSymbols(symbols: Symbol[]) {
+    this.symbols = symbols;
+  }
+
   private executeOnNodeDraggingCallback(n: Node) {
     this.onNodeDraggingCallbacks.forEach((callback: (n: Node) => void) => {
       callback(n);
@@ -63,7 +70,14 @@ export class NodesWidget implements Widget {
       .attr('class', 'node');
 
     const node_image = node_enter.append<SVGImageElement>('image')
-        .attr('xlink:href', (n: Node) => 'data:image/svg+xml;base64,' + btoa(n.icon.raw))
+        .attr('xlink:href', (n: Node) => {
+          const symbol = this.symbols.find((s: Symbol) => s.symbol_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('width', (n: Node) => n.width)
         .attr('height', (n: Node) => n.height);
 

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

@@ -1,5 +1,5 @@
 <div *ngIf="project" class="project-map">
-  <app-map [nodes]="nodes" [links]="links" [drawings]="drawings"></app-map>
+  <app-map [symbols]="symbols" [nodes]="nodes" [links]="links" [drawings]="drawings"></app-map>
 
   <div class="project-toolbar">
     <mat-toolbar color="primary" class="project-toolbar">

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

@@ -29,6 +29,7 @@ import { Drawing } from "../cartography/shared/models/drawing.model";
 import { NodeContextMenuComponent } from "../shared/node-context-menu/node-context-menu.component";
 import {Appliance} from "../shared/models/appliance";
 import {NodeService} from "../shared/services/node.service";
+import {Symbol} from "../shared/models/symbol";
 
 
 @Component({
@@ -41,6 +42,7 @@ export class ProjectMapComponent implements OnInit {
   public nodes: Node[] = [];
   public links: Link[] = [];
   public drawings: Drawing[] = [];
+  public symbols: Symbol[] = [];
 
   project: Project;
   public server: Server;
@@ -88,6 +90,10 @@ export class ProjectMapComponent implements OnInit {
           this.onProjectLoad(project);
         });
     });
+
+    this.symbolService.symbols.subscribe((symbols: Symbol[]) => {
+      this.symbols = symbols;
+    });
   }
 
   onProjectLoad(project: Project) {
@@ -107,13 +113,11 @@ export class ProjectMapComponent implements OnInit {
       .subscribe((nodes: Node[]) => {
         this.nodes = nodes;
 
-        nodes.forEach((n: Node) => {
-          n.icon = this.symbolService.get(n.symbol);
-        });
-
         this.setUpMapCallbacks(project);
         this.setUpWS(project);
       });
+
+
   }
 
   setUpWS(project: Project) {

src/app/shared/services/symbol.service.ts

@@ -13,7 +13,7 @@ import { HttpServer } from "./http-server.service";
 
 @Injectable()
 export class SymbolService {
-  private symbols: BehaviorSubject<Symbol[]> = new BehaviorSubject<Symbol[]>([]);
+  public symbols: BehaviorSubject<Symbol[]> = new BehaviorSubject<Symbol[]>([]);
 
   constructor(private httpServer: HttpServer) { }