New selection manager and graph data manager

src/app/app.module.ts

@@ -47,7 +47,7 @@ import { ProjectWebServiceHandler } from "./handlers/project-web-service-handler
 import { LinksDataSource } from "./cartography/datasources/links-datasource";
 import { NodesDataSource } from "./cartography/datasources/nodes-datasource";
 import { SymbolsDataSource } from "./cartography/datasources/symbols-datasource";
-import { SelectionManager } from "./cartography/managers/selection-manager";
+import { SelectionManager, SelectionStore } from "./cartography/managers/selection-manager";
 import { InRectangleHelper } from "./cartography/helpers/in-rectangle-helper";
 import { DrawingsDataSource } from "./cartography/datasources/drawings-datasource";
 import { MoveLayerDownActionComponent } from './components/project-map/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component';
@@ -149,6 +149,7 @@ if (environment.production) {
     LinksDataSource,
     NodesDataSource,
     SymbolsDataSource,
+    SelectionStore,
     SelectionManager,
     InRectangleHelper,
     DrawingsDataSource,

src/app/cartography/cartography.module.ts

@@ -17,7 +17,6 @@ import { Context } from './models/context';
 import { D3_MAP_IMPORTS } from './d3-map.imports';
 import { CanvasSizeDetector } from './helpers/canvas-size-detector';
 import { MapListeners } from './listeners/map-listeners';
-import { DrawingsDraggableListener } from './listeners/drawings-draggable-listener';
 import { NodesDraggableListener } from './listeners/nodes-draggable-listener';
 import { DrawingsEventSource } from './events/drawings-event-source';
 import { NodesEventSource } from './events/nodes-event-source';
@@ -35,6 +34,9 @@ import { NodeToMapNodeConverter } from './converters/map/node-to-map-node-conver
 import { PortToMapPortConverter } from './converters/map/port-to-map-port-converter';
 import { SymbolToMapSymbolConverter } from './converters/map/symbol-to-map-symbol-converter';
 import { LinkNodeToMapLinkNodeConverter } from './converters/map/link-node-to-map-link-node-converter';
+import { GraphDataManager } from './managers/graph-data-manager';
+import { SelectionListener } from './listeners/selection-listener';
+import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from './datasources/map-datasource';
 
 
 @NgModule({
@@ -58,8 +60,8 @@ import { LinkNodeToMapLinkNodeConverter } from './converters/map/link-node-to-ma
     MapChangeDetectorRef,
     CanvasSizeDetector,
     Context,
+    SelectionListener,
     MapListeners,
-    DrawingsDraggableListener,
     NodesDraggableListener,
     DrawingsEventSource,
     NodesEventSource,
@@ -77,6 +79,11 @@ import { LinkNodeToMapLinkNodeConverter } from './converters/map/link-node-to-ma
     NodeToMapNodeConverter,
     PortToMapPortConverter,
     SymbolToMapSymbolConverter,
+    GraphDataManager,
+    MapNodesDataSource,
+    MapLinksDataSource,
+    MapDrawingsDataSource,
+    MapSymbolsDataSource,
     ...D3_MAP_IMPORTS
   ],
   exports: [ MapComponent ]

src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@
 import { DrawingLineWidget } from '../../widgets/drawing-line';
 import { Subscription } from 'rxjs';
 import { NodeSelectInterfaceComponent } from '../node-select-interface/node-select-interface.component';
-import { LinkCreated } from '../../events/links';
+import { MapLinkCreated } from '../../events/links';
 import { NodeClicked } from '../../events/nodes';
 import { NodeWidget } from '../../widgets/node';
 import { MapNode } from '../../models/map/map-node';
@@ -17,7 +17,7 @@ import { MapPort } from '../../models/map/map-port';
 export class DrawLinkToolComponent implements OnInit, OnDestroy {
   @ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent;
   
-  @Output('linkCreated') linkCreated = new EventEmitter<LinkCreated>();
+  @Output('linkCreated') linkCreated = new EventEmitter<MapLinkCreated>();
 
   private onNodeClicked: Subscription;
 
@@ -48,7 +48,7 @@ export class DrawLinkToolComponent implements OnInit, OnDestroy {
     const port: MapPort = event.port;
     if (this.drawingLineTool.isDrawing()) {
       const data = this.drawingLineTool.stop();
-      this.linkCreated.emit(new LinkCreated(data['node'], data['port'], node, port));
+      this.linkCreated.emit(new MapLinkCreated(data['node'], data['port'], node, port));
     } else {
       this.drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., {
         'node': node,

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

@@ -26,10 +26,10 @@ import { Link } from '../../../models/link';
 import { Drawing } from '../../models/drawing';
 import { Symbol } from '../../../models/symbol';
 import { MapNodeToNodeConverter } from '../../converters/map/map-node-to-node-converter';
-import { NodeToMapNodeConverter } from '../../converters/map/node-to-map-node-converter';
-import { DrawingToMapDrawingConverter } from '../../converters/map/drawing-to-map-drawing-converter';
-import { LinkToMapLinkConverter } from '../../converters/map/link-to-map-link-converter';
-import { SymbolToMapSymbolConverter } from '../../converters/map/symbol-to-map-symbol-converter';
+import { MapPortToPortConverter } from '../../converters/map/map-port-to-port-converter';
+import { GraphDataManager } from '../../managers/graph-data-manager';
+import { SelectionManager } from '../../managers/selection-manager';
+import { MapDrawingToDrawingConverter } from '../../converters/map/map-drawing-to-drawing-converter';
 
 
 @Component({
@@ -46,8 +46,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() width = 1500;
   @Input() height = 600;
 
-  @Output() nodeDragged = new EventEmitter<DraggedDataEvent<Node>>();
-  @Output() drawingDragged = new EventEmitter<DraggedDataEvent<Drawing>>();
+  @Output() nodeDragged = new EventEmitter<DraggedDataEvent<Node[]>>();
+  @Output() drawingDragged = new EventEmitter<DraggedDataEvent<Drawing[]>>();
   @Output() onLinkCreated = new EventEmitter<LinkCreated>();
 
   private parentNativeElement: any;
@@ -56,21 +56,22 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   private onChangesDetected: Subscription;
   private nodeDraggedSub: Subscription;
   private drawingDraggedSub: Subscription;
+  private selectionChanged: Subscription;
 
   protected settings = {
     'show_interface_labels': true
   };
 
   constructor(
+    private graphDataManager: GraphDataManager,
     private context: Context,
     private mapChangeDetectorRef: MapChangeDetectorRef,
     private canvasSizeDetector: CanvasSizeDetector,
     private mapListeners: MapListeners,
     private mapNodeToNode: MapNodeToNodeConverter,
-    private nodeToMapNode: NodeToMapNodeConverter,
-    private linkToMapLink: LinkToMapLinkConverter,
-    private drawingToMapDrawing: DrawingToMapDrawingConverter,
-    private symbolToMapSymbol: SymbolToMapSymbolConverter,
+    private mapPortToPort: MapPortToPortConverter,
+    private mapDrawingToDrawing: MapDrawingToDrawingConverter,
+    private selectionManager: SelectionManager,
     protected element: ElementRef,
     protected nodesWidget: NodesWidget,
     protected nodeWidget: NodeWidget,
@@ -122,12 +123,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
       (changes['symbols'] && !changes['symbols'].isFirstChange())
     ) {
       if (this.svg.empty && !this.svg.empty()) {
-        if (changes['nodes']) {
-          this.onNodesChange(changes['nodes']);
-        }
-        if (changes['links']) {
-          this.onLinksChange(changes['links']);
-        }
         if (changes['symbols']) {
           this.onSymbolsChange(changes['symbols']);
         }
@@ -144,15 +139,22 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
 
     this.onChangesDetected = this.mapChangeDetectorRef.changesDetected.subscribe(() => {
       if (this.mapChangeDetectorRef.hasBeenDrawn) {
-        this.reload();
+        this.redraw();
       }
     });
 
     this.nodeDraggedSub = this.nodesEventSource.dragged.subscribe((evt) => {
-      const converted = this.mapNodeToNode.convert(evt.datum);
-      this.nodeDragged.emit(new DraggedDataEvent<Node>(converted));
+      const converted = evt.datum.map((e) => this.mapNodeToNode.convert(e));
+      this.nodeDragged.emit(new DraggedDataEvent<Node[]>(converted));
     });
 
+    this.drawingDraggedSub = this.drawingsEventSource.dragged.subscribe((evt) => {
+      const converted = evt.datum.map((e) => this.mapDrawingToDrawing.convert(e));
+      this.drawingDragged.emit(new DraggedDataEvent<Drawing[]>(converted));
+    });
+
+    this.selectionChanged = this.selectionManager.subscribe(this.selectionToolWidget.rectangleSelected);
+
     this.mapListeners.onInit(this.svg);
   }
 
@@ -161,6 +163,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
     this.onChangesDetected.unsubscribe();
     this.mapListeners.onDestroy();
     this.nodeDraggedSub.unsubscribe();
+    this.selectionChanged.unsubscribe();
   }
 
   public createGraph(domElement: HTMLElement) {
@@ -176,7 +179,14 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   protected linkCreated(evt) {
-    this.onLinkCreated.emit(evt);
+    const linkCreated = new LinkCreated(
+      this.mapNodeToNode.convert(evt.sourceNode),
+      this.mapPortToPort.convert(evt.sourcePort),
+      this.mapNodeToNode.convert(evt.targetNode),
+      this.mapPortToPort.convert(evt.targetPort)
+    );
+
+    this.onLinkCreated.emit(linkCreated);
   }
 
   private changeLayout() {
@@ -184,69 +194,22 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
       this.context.size = this.getSize();
     }
 
-    this.setNodes(this.nodes);
-    this.setLinks(this.links);
-    this.setDrawings(this.drawings);
-
     this.redraw();
   }
 
-  private setNodes(nodes: Node[]) {
-    this.graphLayout.setNodes(nodes.map((n) => this.nodeToMapNode.convert(n)));
-  }
-
-  private setLinks(links: Link[]) {
-    this.graphLayout.setLinks(links.map((l) => this.linkToMapLink.convert(l)));
-  }
-
-  private setDrawings(drawings: Drawing[]) {
-    this.graphLayout.setDrawings(drawings.map((d) => this.drawingToMapDrawing.convert(d)));
-  }
-
-  private setSymbols(symbols: Symbol[]) {
-    this.nodeWidget.setSymbols(symbols.map((s) => this.symbolToMapSymbol.convert(s)));
-  }
-
-  private onLinksChange(change: SimpleChange) {
-    const nodes_by_id = {};
-    this.nodes.forEach((n: Node) => {
-      nodes_by_id[n.node_id] = n;
-    });
-
-    this.links.forEach((link: Link) => {
-      const source_id = link.nodes[0].node_id;
-      const target_id = link.nodes[1].node_id;
-      if (source_id in nodes_by_id) {
-        link.source = nodes_by_id[source_id];
-      }
-      if (target_id in nodes_by_id) {
-        link.target = nodes_by_id[target_id];
-      }
-
-      if (link.source && link.target) {
-        link.x = link.source.x + (link.target.x - link.source.x) * 0.5;
-        link.y = link.source.y + (link.target.y - link.source.y) * 0.5;
-      }
-    });
-  }
-
-  private onNodesChange(change: SimpleChange) {
-    this.onLinksChange(null);
-  }
 
   private onSymbolsChange(change: SimpleChange) {
-    this.setSymbols(this.symbols);
+    this.graphDataManager.setSymbols(this.symbols);
   }
 
-  public redraw() {
+  private redraw() {
+    this.graphDataManager.setNodes(this.nodes);
+    this.graphDataManager.setLinks(this.links);
+    this.graphDataManager.setDrawings(this.drawings);
+
     this.graphLayout.draw(this.svg, this.context);
   }
 
-  public reload() {
-    this.onLinksChange(null);
-    this.redraw();
-  }
-
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.changeLayout();

src/app/cartography/datasources/datasource.ts

@@ -15,12 +15,26 @@ export abstract class DataSource<T> {
       this.update(item);
     } else {
       this.data.push(item);
+      console.log("Item added");
       this.dataChange.next(this.data);
     }
   }
 
   public set(data: T[]) {
-    this.data = data;
+    data.forEach((item) => {
+      const index = this.findIndex(item);
+      if (index >= 0) {
+        const updated = Object.assign(this.data[index], item);
+        this.data[index] = updated;
+      }
+      else {
+        this.data.push(item);
+      }
+    });
+    
+    const toRemove = this.data.filter((item) => data.filter((i) => this.getItemKey(i) === this.getItemKey(item)).length === 0);
+    toRemove.forEach((item) => this.remove(item));
+
     this.dataChange.next(this.data);
   }
 
@@ -30,6 +44,7 @@ export abstract class DataSource<T> {
       const updated = Object.assign(this.data[index], item);
       this.data[index] = updated;
       this.dataChange.next(this.data);
+      console.log("Item updated");
       this.itemUpdated.next(updated);
     }
   }
@@ -55,5 +70,9 @@ export abstract class DataSource<T> {
     this.dataChange.next(this.data);
   }
 
-  protected abstract findIndex(item: T): number;
+  private findIndex(item: T) {
+    return this.data.findIndex((i: T) => this.getItemKey(i) === this.getItemKey(item));
+  }
+
+  protected abstract getItemKey(item: T): any;
 }

src/app/cartography/datasources/drawings-datasource.ts

@@ -6,7 +6,7 @@ import { Drawing } from "../models/drawing";
 
 @Injectable()
 export class DrawingsDataSource extends DataSource<Drawing> {
-  protected findIndex(drawing: Drawing) {
-    return this.data.findIndex((d: Drawing) => d.drawing_id === drawing.drawing_id);
+  protected getItemKey(drawing: Drawing) {
+    return drawing.drawing_id;
   }
 }

src/app/cartography/datasources/links-datasource.ts

@@ -6,7 +6,7 @@ import { Link } from "../../models/link";
 
 @Injectable()
 export class LinksDataSource extends DataSource<Link> {
-  protected findIndex(link: Link) {
-    return this.data.findIndex((l: Link) => l.link_id === link.link_id);
+  protected getItemKey(link: Link) {
+    return link.link_id;
   }
 }

src/app/cartography/datasources/map-datasource.ts

@@ -0,0 +1,28 @@
+import { DataSource } from "./datasource";
+import { MapNode } from "../models/map/map-node";
+import { MapLink } from "../models/map/map-link";
+import { MapDrawing } from "../models/map/map-drawing";
+import { MapSymbol } from "../models/map/map-symbol";
+import { Injectable } from "@angular/core";
+
+export interface Indexed {
+  id: number | string;
+}
+
+export class MapDataSource<T extends Indexed> extends DataSource<T> {
+  protected getItemKey(item: Indexed) {
+    return item.id;
+  }
+}
+
+@Injectable()
+export class MapNodesDataSource extends MapDataSource<MapNode> {}
+
+@Injectable()
+export class MapLinksDataSource extends MapDataSource<MapLink> {}
+
+@Injectable()
+export class MapDrawingsDataSource extends MapDataSource<MapDrawing> {}
+
+@Injectable()
+export class MapSymbolsDataSource extends MapDataSource<MapSymbol> {}

src/app/cartography/datasources/nodes-datasource.ts

@@ -6,7 +6,7 @@ import { DataSource } from "./datasource";
 
 @Injectable()
 export class NodesDataSource extends DataSource<Node> {
-  protected findIndex(node: Node) {
-    return this.data.findIndex((n: Node) => n.node_id === node.node_id);
+  protected getItemKey(node: Node) {
+    return node.node_id;
   }
 }

src/app/cartography/datasources/symbols-datasource.ts

@@ -6,7 +6,7 @@ import { Symbol } from "../../models/symbol";
 
 @Injectable()
 export class SymbolsDataSource extends DataSource<Symbol> {
-  protected findIndex(symbol: Symbol) {
-    return this.data.findIndex((s: Symbol) => s.symbol_id === symbol.symbol_id);
+  protected getItemKey(symbol: Symbol) {
+    return symbol.symbol_id;
   }
 }

src/app/cartography/events/drawings-event-source.ts

@@ -5,5 +5,5 @@ import { MapDrawing } from "../models/map/map-drawing";
 
 @Injectable()
 export class DrawingsEventSource {
-  public dragged = new EventEmitter<DraggedDataEvent<MapDrawing>>();
+  public dragged = new EventEmitter<DraggedDataEvent<MapDrawing[]>>();
 }

src/app/cartography/events/event-source.ts

@@ -4,6 +4,4 @@ export class DataEventSource<T> {
   ) {}
 }
 
-
-// class CreatedDataEvent<T> extends DataEventSource<T> {}
 export class DraggedDataEvent<T> extends DataEventSource<T> {}

src/app/cartography/events/links.ts

@@ -1,12 +1,23 @@
+import { Port } from "../../models/port";
+import { Node } from "../models/node";
 import { MapNode } from "../models/map/map-node";
 import { MapPort } from "../models/map/map-port";
 
 
 export class LinkCreated {
-    constructor(
-        public sourceNode: MapNode,
-        public sourcePort: MapPort,
-        public targetNode: MapNode,
-        public targetPort: MapPort
-    ) {}
+  constructor(
+      public sourceNode: Node,
+      public sourcePort: Port,
+      public targetNode: Node,
+      public targetPort: Port
+  ) {}
+}
+
+export class MapLinkCreated {
+  constructor(
+      public sourceNode: MapNode,
+      public sourcePort: MapPort,
+      public targetNode: MapNode,
+      public targetPort: MapPort
+  ) {}
 }

src/app/cartography/events/nodes-event-source.ts

@@ -5,5 +5,5 @@ import { MapNode } from "../models/map/map-node";
 
 @Injectable()
 export class NodesEventSource {
-  public dragged = new EventEmitter<DraggedDataEvent<MapNode>>();
+  public dragged = new EventEmitter<DraggedDataEvent<MapNode[]>>();
 }

src/app/cartography/listeners/drawings-draggable-listener.ts

@@ -1,54 +0,0 @@
-import { Injectable } from "@angular/core";
-import { DrawingsWidget } from "../widgets/drawings";
-import { DraggableStart } from "../events/draggable";
-import { Subscription } from "rxjs";
-import { SelectionManager } from "../managers/selection-manager";
-import { DrawingsEventSource } from "../events/drawings-event-source";
-import { DraggedDataEvent } from "../events/event-source";
-import { MapDrawing } from "../models/map/map-drawing";
-
-
-@Injectable()
-export class DrawingsDraggableListener {
-  private start: Subscription;
-  private drag: Subscription;
-  private end: Subscription;
-
-  constructor(
-    private drawingsWidget: DrawingsWidget,
-    private selectionManager: SelectionManager,
-    private drawingsEventSource: DrawingsEventSource
-  ) {
-  }
-
-  public onInit(svg: any) {
-    this.start = this.drawingsWidget.draggable.start.subscribe((evt: DraggableStart<MapDrawing>) => {
-      const drawings = this.selectionManager.getSelectedDrawings();
-      if (drawings.filter((n: MapDrawing) => n.id === evt.datum.id).length === 0) {
-        this.selectionManager.setSelectedDrawings([evt.datum]);
-      }
-    });
-
-    this.drag = this.drawingsWidget.draggable.drag.subscribe((evt: DraggableStart<MapDrawing>) => {
-      const drawings = this.selectionManager.getSelectedDrawings();
-      drawings.forEach((drawing: MapDrawing) => {
-        drawing.x += evt.dx;
-        drawing.y += evt.dy;
-        this.drawingsWidget.redrawDrawing(svg, drawing);
-      });
-    });
-
-    this.end = this.drawingsWidget.draggable.end.subscribe((evt: DraggableStart<MapDrawing>) => {
-      const drawings = this.selectionManager.getSelectedDrawings();
-      drawings.forEach((drawing: MapDrawing) => {
-        this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(drawing));
-      });
-    });
-  }
-
-  public onDestroy() {
-    this.start.unsubscribe();
-    this.drag.unsubscribe();
-    this.end.unsubscribe();
-  }
-}

src/app/cartography/listeners/map-listeners.ts

@@ -1,18 +1,18 @@
 import { Injectable } from "@angular/core";
 import { MapListener } from "./map-listener";
-import { DrawingsDraggableListener } from "./drawings-draggable-listener";
 import { NodesDraggableListener } from "./nodes-draggable-listener";
+import { SelectionListener } from "./selection-listener";
 
 
 @Injectable()
 export class MapListeners {
   private listeners: MapListener[] = [];
   constructor(
-    private drawingsDraggableListener: DrawingsDraggableListener,
-    private nodesDraggableListener: NodesDraggableListener
+    private nodesDraggableListener: NodesDraggableListener,
+    private selectionListener: SelectionListener
   ) {
-    this.listeners.push(this.drawingsDraggableListener);
     this.listeners.push(this.nodesDraggableListener);
+    this.listeners.push(this.selectionListener);
   }
 
   public onInit(svg: any) {

src/app/cartography/listeners/nodes-draggable-listener.ts

@@ -1,13 +1,17 @@
 import { Injectable } from "@angular/core";
 import { NodesWidget } from "../widgets/nodes";
-import { DraggableStart } from "../events/draggable";
+import { DraggableStart, DraggableDrag, DraggableEnd } from "../events/draggable";
 import { Subscription } from "rxjs";
 import { SelectionManager } from "../managers/selection-manager";
 import { LinksWidget } from "../widgets/links";
-import { GraphLayout } from "../widgets/graph-layout";
 import { NodesEventSource } from "../events/nodes-event-source";
 import { DraggedDataEvent } from "../events/event-source";
 import { MapNode } from "../models/map/map-node";
+import { GraphDataManager } from "../managers/graph-data-manager";
+import { DrawingsWidget } from "../widgets/drawings";
+import { merge } from "rxjs";
+import { MapDrawing } from "../models/map/map-drawing";
+import { DrawingsEventSource } from "../events/drawings-event-source";
 
 
 @Injectable()
@@ -18,42 +22,79 @@ export class NodesDraggableListener {
 
   constructor(
     private nodesWidget: NodesWidget,
+    private drawingsWidget: DrawingsWidget,
     private linksWidget: LinksWidget,
     private selectionManager: SelectionManager,
-    private graphLayout: GraphLayout,
-    private nodesEventSource: NodesEventSource
+    private nodesEventSource: NodesEventSource,
+    private drawingsEventSource: DrawingsEventSource,
+    private graphDataManager: GraphDataManager
   ) {
   }
 
   public onInit(svg: any) {
-    this.start = this.nodesWidget.draggable.start.subscribe((evt: DraggableStart<MapNode>) => {
-      const nodes = this.selectionManager.getSelectedNodes();
-      if (nodes.filter((n: MapNode) => n.id === evt.datum.id).length === 0) {
-        this.selectionManager.setSelectedNodes([evt.datum]);
+
+    this.start = merge(
+      this.nodesWidget.draggable.start,
+      this.drawingsWidget.draggable.start
+    ).subscribe((evt: DraggableStart<any>) => {
+      const selected = this.selectionManager.getSelected();
+
+      if (evt.datum instanceof MapNode) {
+        if (selected.filter((item) => item instanceof MapNode && item.id === evt.datum.id).length === 0) {
+          this.selectionManager.setSelected([evt.datum]);
+        }
+      }
+
+      if (evt.datum instanceof MapDrawing) {
+        if (selected.filter((item) => item instanceof MapDrawing && item.id === evt.datum.id).length === 0) {
+          this.selectionManager.setSelected([evt.datum]);
+        }
       }
     });
 
-    this.drag = this.nodesWidget.draggable.drag.subscribe((evt: DraggableStart<MapNode>) => {
-      const nodes = this.selectionManager.getSelectedNodes();
-      nodes.forEach((node: MapNode) => {
+
+    this.drag = merge(
+      this.nodesWidget.draggable.drag,
+      this.drawingsWidget.draggable.drag
+    ).subscribe((evt: DraggableDrag<any>) => {
+      const selected = this.selectionManager.getSelected();
+
+      // update nodes
+      selected.filter((item) => item instanceof MapNode).forEach((node: MapNode) => {
         node.x += evt.dx;
         node.y += evt.dy;
+
         this.nodesWidget.redrawNode(svg, node);
 
-        const links = this.graphLayout.getLinks().filter(
+        const links = this.graphDataManager.getLinks().filter(
           (link) => link.target.id === node.id || link.source.id === node.id);
         links.forEach((link) => {
           this.linksWidget.redrawLink(svg, link);
         });
       });
+
+      // update drawings
+      selected.filter((item) => item instanceof MapDrawing).forEach((drawing: MapDrawing) => {
+        drawing.x += evt.dx;
+        drawing.y += evt.dy;
+        this.drawingsWidget.redrawDrawing(svg, drawing);
+      });
+
     });
 
-    this.end = this.nodesWidget.draggable.end.subscribe((evt: DraggableStart<MapNode>) => {
-      const nodes = this.selectionManager.getSelectedNodes();
-      nodes.forEach((node: MapNode) => {
-        this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(node));
-      });
+    this.end = merge(
+      this.nodesWidget.draggable.end,
+      this.drawingsWidget.draggable.end
+    ).subscribe((evt: DraggableEnd<any>) => {
+      const selected = this.selectionManager.getSelected();
+
+      const updatedNodes = selected.filter((item) => item instanceof MapNode).map((item: MapNode) => item);
+      this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode[]>(updatedNodes))
+
+      const updatedDrawings = selected.filter((item) => item instanceof MapDrawing).map((item: MapDrawing) => item);
+      this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing[]>(updatedDrawings));
     });
+
   }
 
   public onDestroy() {

src/app/cartography/listeners/selection-listener.ts

@@ -0,0 +1,31 @@
+import { Injectable } from "@angular/core";
+import { Subscription } from "rxjs";
+import { SelectionStore } from "../managers/selection-manager";
+import { MapChangeDetectorRef } from "../services/map-change-detector-ref";
+
+
+@Injectable()
+export class SelectionListener {
+  private onSelected: Subscription;
+  private onUnselected: Subscription;
+
+  constructor(
+    private selectionStore: SelectionStore,
+    private mapChangeDetectorRef: MapChangeDetectorRef
+  ) {
+  }
+
+  public onInit(svg: any) {
+    this.onSelected = this.selectionStore.selected.subscribe(() => {
+      this.mapChangeDetectorRef.detectChanges();
+    });
+    this.onUnselected = this.selectionStore.unselected.subscribe(() => {
+      this.mapChangeDetectorRef.detectChanges();
+    });
+  }
+
+  public onDestroy() {
+    this.onSelected.unsubscribe();
+    this.onUnselected.unsubscribe();
+  }
+}

src/app/cartography/managers/graph-data-manager.ts

@@ -0,0 +1,103 @@
+import { Injectable } from "@angular/core";
+import { Node } from "../models/node";
+import { NodeToMapNodeConverter } from "../converters/map/node-to-map-node-converter";
+import { LinkToMapLinkConverter } from "../converters/map/link-to-map-link-converter";
+import { DrawingToMapDrawingConverter } from "../converters/map/drawing-to-map-drawing-converter";
+import { SymbolToMapSymbolConverter } from "../converters/map/symbol-to-map-symbol-converter";
+import { MapNode } from "../models/map/map-node";
+import { MapLink } from "../models/map/map-link";
+import { Link } from "../../models/link";
+import { Drawing } from "../models/drawing";
+import { Symbol } from "../../models/symbol";
+import { LayersManager } from "./layers-manager";
+import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from "../datasources/map-datasource";
+
+@Injectable()
+export class GraphDataManager {
+  constructor(
+    private mapNodesDataSource: MapNodesDataSource,
+    private mapLinksDataSource: MapLinksDataSource,
+    private mapDrawingsDataSource: MapDrawingsDataSource,
+    private mapSymbolsDataSource: MapSymbolsDataSource,
+    private nodeToMapNode: NodeToMapNodeConverter,
+    private linkToMapLink: LinkToMapLinkConverter,
+    private drawingToMapDrawing: DrawingToMapDrawingConverter,
+    private symbolToMapSymbol: SymbolToMapSymbolConverter,
+    private layersManager: LayersManager
+  ) {}
+
+  public setNodes(nodes: Node[]) {
+    const mapNodes = nodes.map((n) => this.nodeToMapNode.convert(n));
+    this.mapNodesDataSource.set(mapNodes);
+
+    this.assignDataToLinks();
+    this.onDataUpdate();
+  }
+
+  public setLinks(links: Link[]) {
+    const mapLinks = links.map((l) => this.linkToMapLink.convert(l));
+    this.mapLinksDataSource.set(mapLinks);
+
+    this.assignDataToLinks();
+    this.onDataUpdate();
+  }
+
+  public setDrawings(drawings: Drawing[]) {
+    const mapDrawings = drawings.map((d) => this.drawingToMapDrawing.convert(d));
+    this.mapDrawingsDataSource.set(mapDrawings);
+
+    this.onDataUpdate();
+  }
+
+  public setSymbols(symbols: Symbol[]) {
+    const mapSymbols = symbols.map((s) => this.symbolToMapSymbol.convert(s));
+    this.mapSymbolsDataSource.set(mapSymbols);
+  }
+
+  public getNodes() {
+    return this.mapNodesDataSource.getItems();
+  }
+
+  public getLinks() {
+    return this.mapLinksDataSource.getItems();
+  }
+
+  public getDrawings() {
+    return this.mapDrawingsDataSource.getItems();
+  }
+
+  public getSymbols() {
+    return this.mapSymbolsDataSource.getItems();
+  }
+
+  private onDataUpdate() {
+    this.layersManager.clear();
+    this.layersManager.setNodes(this.getNodes());
+    this.layersManager.setLinks(this.getLinks());
+    this.layersManager.setDrawings(this.getDrawings());
+  }
+
+  private assignDataToLinks() {
+    const nodes_by_id = {};
+    this.getNodes().forEach((n: MapNode) => {
+      nodes_by_id[n.id] = n;
+    });
+
+    this.getLinks().forEach((link: MapLink) => {
+      const source_id = link.nodes[0].nodeId;
+      const target_id = link.nodes[1].nodeId;
+      if (source_id in nodes_by_id) {
+        link.source = nodes_by_id[source_id];
+      }
+      if (target_id in nodes_by_id) {
+        link.target = nodes_by_id[target_id];
+      }
+
+      if (link.source && link.target) {
+        link.x = link.source.x + (link.target.x - link.source.x) * 0.5;
+        link.y = link.source.y + (link.target.y - link.source.y) * 0.5;
+      }
+    });
+  }
+
+}

src/app/cartography/managers/selection-manager.ts

@@ -1,40 +1,74 @@
-import { Injectable } from "@angular/core";
+import { Injectable, EventEmitter } from "@angular/core";
 
 import { Subject } from "rxjs";
 import { Subscription } from "rxjs";
 
-import { NodesDataSource } from "../datasources/nodes-datasource";
-import { LinksDataSource } from "../datasources/links-datasource";
 import { InRectangleHelper } from "../helpers/in-rectangle-helper";
 import { Rectangle } from "../models/rectangle";
-import { DataSource } from "../datasources/datasource";
-import { InterfaceLabel } from "../models/interface-label";
-import { DrawingsDataSource } from "../datasources/drawings-datasource";
-import { MapNode } from "../models/map/map-node";
-import { MapLink } from "../models/map/map-link";
-import { MapDrawing } from "../models/map/map-drawing";
+import { GraphDataManager } from "./graph-data-manager";
+import { Indexed } from "../datasources/map-datasource";
 
 
-export interface Selectable {
-  x: number;
-  y: number;
-  is_selected: boolean;
+@Injectable()
+export class SelectionStore {
+  private selection: {[id:string]: any} = {};
+
+  public selected = new EventEmitter<any[]>();
+  public unselected = new EventEmitter<any[]>();
+
+  public set(items: Indexed[]) {
+    const dictItems = this.convertToKeyDict(items);
+
+    const selected = Object.keys(dictItems).filter((key) => {
+      return !this.isSelectedByKey(key);
+    }).map(key => dictItems[key]);
+
+    const unselected = Object.keys(this.selection).filter((key) => {
+      return !(key in dictItems);
+    }).map((key) => this.selection[key]);
+
+    this.selection = dictItems;
+
+    this.selected.emit(selected);
+    this.unselected.emit(unselected);
+  }
+
+  public get(): Indexed[] {
+    return Object.keys(this.selection).map(key => this.selection[key]);
+  }
+
+  public isSelected(item): boolean {
+    const key = this.getKey(item);
+    return this.isSelectedByKey(key);
+  }
+
+  private isSelectedByKey(key): boolean {
+    return key in this.selection;
+  }
+
+  private getKey(item: Indexed): string {
+    const type = item.constructor.name;
+    return `${type}-${item.id}`;
+  }
+
+  private convertToKeyDict(items: Indexed[]) {
+    const dict = {};
+    items.forEach((item) => {
+      dict[this.getKey(item)] = item;
+    });
+    return dict;
+  }
 }
 
+
 @Injectable()
 export class SelectionManager {
-  private selectedNodes: MapNode[] = [];
-  private selectedLinks: MapLink[] = [];
-  private selectedDrawings: MapDrawing[] = [];
-  private selectedInterfaceLabels: InterfaceLabel[] = [];
-
   private subscription: Subscription;
 
   constructor(
-    private nodesDataSource: NodesDataSource,
-    private linksDataSource: LinksDataSource,
-    private drawingsDataSource: DrawingsDataSource,
-    private inRectangleHelper: InRectangleHelper
+    private graphDataManager: GraphDataManager,
+    private inRectangleHelper: InRectangleHelper,
+    private selectionStore: SelectionStore
   ) {}
 
   public subscribe(subject: Subject<Rectangle>) {
@@ -45,104 +79,31 @@ export class SelectionManager {
   }
 
   public onSelection(rectangle: Rectangle) {
-    // this.selectedNodes = this.getSelectedItemsInRectangle<MapNode>(this.nodesDataSource, rectangle);
-    // this.selectedLinks = this.getSelectedItemsInRectangle<MapLink>(this.linksDataSource, rectangle);
-    // this.selectedDrawings = this.getSelectedItemsInRectangle<MapDrawing>(this.drawingsDataSource, rectangle);
-    // don't select interfaces for now
-    // this.selectedInterfaceLabels = this.getSelectedInterfaceLabelsInRectangle(rectangle);
+    const selectedNodes = this.graphDataManager.getNodes().filter((node) => {
+      return this.inRectangleHelper.inRectangle(rectangle, node.x, node.y)
+    });
+
+    const selectedLinks = this.graphDataManager.getLinks().filter((link) => {
+      return this.inRectangleHelper.inRectangle(rectangle, link.x, link.y)
+    });
+
+    const selectedDrawings = this.graphDataManager.getDrawings().filter((drawing) => {
+      return this.inRectangleHelper.inRectangle(rectangle, drawing.x, drawing.y)
+    });
+
+    const selected = [...selectedNodes, ...selectedLinks, ...selectedDrawings];
+
+    this.selectionStore.set(selected);
   }
 
-  public getSelectedNodes() {
-    return this.selectedNodes;
+  public getSelected() {
+    return this.selectionStore.get();
   }
 
-  public getSelectedLinks() {
-    return this.selectedLinks;
-  }
-
-  public getSelectedDrawings() {
-    return this.selectedDrawings;
-  }
-
-  public setSelectedNodes(nodes: MapNode[]) {
-    // this.selectedNodes = this.setSelectedItems<MapNode>(this.nodesDataSource, (node: MapNode) => {
-    //   return !!nodes.find((n: MapNode) => node.id === n.id);
-    // });
-  }
-
-  public setSelectedLinks(links: MapLink[]) {
-    // this.selectedLinks = this.setSelectedItems<MapLink>(this.linksDataSource, (link: MapLink) => {
-    //   return !!links.find((l: MapLink) => link.link_id === l.link_id);
-    // });
-  }
-
-  public setSelectedDrawings(drawings: MapDrawing[]) {
-    // this.selectedDrawings = this.setSelectedItems<MapDrawing>(this.drawingsDataSource, (drawing: MapDrawing) => {
-    //   return !!drawings.find((d: MapDrawing) => drawing.drawing_id === d.drawing_id);
-    // });
+  public setSelected(value: Indexed[]) {
+    this.selectionStore.set(value);
   }
   
   public clearSelection() {
-    this.setSelectedDrawings([]);
-    this.setSelectedLinks([]);
-    this.setSelectedNodes([]);
-  }
-
-  private getSelectedItemsInRectangle<T extends Selectable>(dataSource: DataSource<T>, rectangle: Rectangle) {
-    return this.setSelectedItems<T>(dataSource, (item: T) => {
-      return this.inRectangleHelper.inRectangle(rectangle, item.x, item.y);
-    });
-  }
-
-  private getSelectedInterfaceLabelsInRectangle(rectangle: Rectangle) {
-    // this.linksDataSource.getItems().forEach((link: MapLink) => {
-    //   if (!(link.source && link.target && link.nodes.length > 1)) {
-    //     return;
-    //   }
-
-    //   let updated = false;
-
-    //   let x = link.source.x + link.nodes[0].label.x;
-    //   let y = link.source.y + link.nodes[0].label.y;
-
-    //   if (this.inRectangleHelper.inRectangle(rectangle, x, y)) {
-    //     link.nodes[0].label.is_selected = true;
-    //     updated = true;
-    //   }
-
-    //   x = link.target.x + link.nodes[1].label.x;
-    //   y = link.target.y + link.nodes[1].label.y;
-
-    //   if (this.inRectangleHelper.inRectangle(rectangle, x, y)) {
-    //     link.nodes[1].label.is_selected = true;
-    //     updated = true;
-    //   }
-
-    //   if (updated) {
-    //     this.linksDataSource.update(link);
-    //   }
-    // });
-
-    return [];
-  }
-
-  private setSelected<T extends Selectable>(item: T, isSelected: boolean, dataSource: DataSource<T>): boolean {
-    if (item.is_selected !== isSelected) {
-      item.is_selected = isSelected;
-      dataSource.update(item);
-    }
-    return item.is_selected;
-  }
-
-  private setSelectedItems<T extends Selectable>(dataSource: DataSource<T>, discriminator: (item: T) => boolean) {
-    const selected: T[] = [];
-    dataSource.getItems().forEach((item: T) => {
-      const isSelected = discriminator(item);
-      this.setSelected<T>(item, isSelected, dataSource);
-      if (isSelected) {
-        selected.push(item);
-      }
-    });
-    return selected;
   }
 }

src/app/cartography/models/drawing.ts

@@ -1,7 +1,6 @@
-import { Selectable } from "../managers/selection-manager";
 import { DrawingElement } from "./drawings/drawing-element";
 
-export class Drawing implements Selectable {
+export class Drawing {
   drawing_id: string;
   project_id: string;
   rotation: number;
@@ -9,6 +8,5 @@ export class Drawing implements Selectable {
   x: number;
   y: number;
   z: number;
-  is_selected = false;
   element: DrawingElement; // @todo; move to context
 }

src/app/cartography/models/interface-label.ts

@@ -1,6 +1,4 @@
-import { Selectable } from "../managers/selection-manager";
-
-export class InterfaceLabel implements Selectable {
+export class InterfaceLabel {
   constructor(
     public link_id: string,
     public direction: string,
@@ -9,6 +7,5 @@ export class InterfaceLabel implements Selectable {
     public text: string,
     public style: string,
     public rotation = 0,
-    public is_selected = false
     ) {}
 }

src/app/cartography/models/label.ts

@@ -1,10 +1,7 @@
-import { Selectable } from "../managers/selection-manager";
-
-export class Label implements Selectable {
+export class Label {
   rotation: number;
   style: string;
   text: string;
   x: number;
   y: number;
-  is_selected: boolean;
 }

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

@@ -1,6 +1,7 @@
 import { DrawingElement } from "../drawings/drawing-element";
+import { Indexed } from "../../datasources/map-datasource";
 
-export class MapDrawing {
+export class MapDrawing implements Indexed {
     id: string;
     projectId: string;
     rotation: number;

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

@@ -1,7 +1,8 @@
 import { MapLinkNode } from "./map-link-node";
 import { MapNode } from "./map-node";
+import { Indexed } from "../../datasources/map-datasource";
 
-export class MapLink {
+export class MapLink implements Indexed {
     id: string;
     captureFileName: string;
     captureFilePath: string;

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

@@ -1,7 +1,8 @@
 import { MapLabel } from "./map-label";
 import { MapPort } from "./map-port";
+import { Indexed } from "../../datasources/map-datasource";
 
-export class MapNode {
+export class MapNode implements Indexed {
     id: string;
     commandLine: string;
     computeId: string;

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

@@ -1,4 +1,6 @@
-export class MapSymbol {
+import { Indexed } from "../../datasources/map-datasource";
+
+export class MapSymbol implements Indexed {
     id: string;
     builtin: boolean;
     filename: string;

src/app/cartography/models/node.ts

@@ -1,9 +1,8 @@
-import { Selectable } from "../managers/selection-manager";
 import { Label } from "./label";
 import { Port } from "../../models/port";
 
 
-export class Node implements Selectable {
+export class Node {
   command_line: string;
   compute_id: string;
   console: number;
@@ -26,5 +25,4 @@ export class Node implements Selectable {
   x: number;
   y: number;
   z: number;
-  is_selected = false;
 }

src/app/cartography/services/map-change-detector-ref.ts

@@ -3,11 +3,11 @@ import { Injectable, EventEmitter } from "@angular/core";
 
 @Injectable()
 export class MapChangeDetectorRef {
-    public changesDetected = new EventEmitter<boolean>();
+  public changesDetected = new EventEmitter<boolean>();
 
-    public hasBeenDrawn = false;
+  public hasBeenDrawn = false;
 
-    public detectChanges() {
-        this.changesDetected.emit(true);
-    }
+  public detectChanges() {
+    this.changesDetected.emit(true);
+  }
 }

src/app/cartography/widgets/graph-layout.ts

@@ -8,42 +8,20 @@ import { MovingTool } from "../tools/moving-tool";
 import { LayersWidget } from "./layers";
 import { LayersManager } from "../managers/layers-manager";
 import { Injectable } from "@angular/core";
-import { MapNode } from "../models/map/map-node";
-import { MapLink } from "../models/map/map-link";
-import { MapDrawing } from "../models/map/map-drawing";
 
 
 @Injectable()
 export class GraphLayout implements Widget {
-  private nodes: MapNode[] = [];
-  private links: MapLink[] = [];
-  private drawings: MapDrawing[] = [];
-
   constructor(
     private nodesWidget: NodesWidget,
     private drawingLineTool: DrawingLineWidget,
     private selectionTool: SelectionTool,
     private movingTool: MovingTool,
-    private layersWidget: LayersWidget
+    private layersWidget: LayersWidget,
+    private layersManager: LayersManager
   ) {
   }
 
-  public setNodes(nodes: MapNode[]) {
-    this.nodes = nodes;
-  }
-
-  public setLinks(links: MapLink[]) {
-    this.links = links;
-  }
-
-  public getLinks() {
-    return this.links;
-  }
-
-  public setDrawings(drawings: MapDrawing[]) {
-    this.drawings = drawings;
-  }
-
   public getNodesWidget() {
     return this.nodesWidget;
   }
@@ -84,13 +62,7 @@ export class GraphLayout implements Widget {
         return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
       });
 
-    // @fix me
-    const layersManager = new LayersManager();
-    layersManager.setNodes(this.nodes);
-    layersManager.setDrawings(this.drawings);
-    layersManager.setLinks(this.links);
-
-    this.layersWidget.draw(canvas, layersManager.getLayersList());
+    this.layersWidget.draw(canvas, this.layersManager.getLayersList());
 
     this.drawingLineTool.draw(view, context);
     this.selectionTool.draw(view, context);

src/app/cartography/widgets/interface-label.ts

@@ -33,8 +33,7 @@ export class InterfaceLabelWidget {
           Math.round(l.source.y + l.nodes[0].label.y),
           l.nodes[0].label.text,
           l.nodes[0].label.style,
-          l.nodes[0].label.rotation,
-          l.nodes[0].label.isSelected
+          l.nodes[0].label.rotation
         );
 
         const targetInterface = new InterfaceLabel(
@@ -44,8 +43,7 @@ export class InterfaceLabelWidget {
           Math.round( l.target.y + l.nodes[1].label.y),
           l.nodes[1].label.text,
           l.nodes[1].label.style,
-          l.nodes[1].label.rotation,
-          l.nodes[1].label.isSelected
+          l.nodes[1].label.rotation
         );
 
         if (this.enabled) {
@@ -81,7 +79,7 @@ export class InterfaceLabelWidget {
         const y = l.y + bbox.height;
         return `translate(${x}, ${y}) rotate(${l.rotation}, ${x}, ${y})`;
       })
-      .classed('selected', (l: InterfaceLabel) => l.is_selected);
+      .classed('selected', (l: InterfaceLabel) => false);
 
     // update label
     merge
@@ -95,7 +93,7 @@ export class InterfaceLabelWidget {
     // update surrounding rect
     merge
       .select<SVGRectElement>('rect.interface_label_border')
-        .attr('visibility', (l: InterfaceLabel) => l.is_selected ? 'visible' : 'hidden')
+        .attr('visibility', (l: InterfaceLabel) => false ? 'visible' : 'hidden')
         .attr('stroke-dasharray', '3,3')
         .attr('stroke-width', '0.5')
         .each(function (this: SVGRectElement, l: InterfaceLabel) {

src/app/cartography/widgets/link.ts

@@ -8,6 +8,7 @@ import { MultiLinkCalculatorHelper } from "../helpers/multi-link-calculator-help
 import { InterfaceLabelWidget } from "./interface-label";
 import { InterfaceStatusWidget } from "./interface-status";
 import { MapLink } from "../models/map/map-link";
+import { SelectionStore } from "../managers/selection-manager";
 
 
 @Injectable()
@@ -16,7 +17,8 @@ export class LinkWidget implements Widget {
   constructor(
     private multiLinkCalculatorHelper: MultiLinkCalculatorHelper,
     private interfaceLabelWidget: InterfaceLabelWidget,
-    private interfaceStatusWidget: InterfaceStatusWidget
+    private interfaceStatusWidget: InterfaceStatusWidget,
+    private selectionStore: SelectionStore
   ) {}
 
   public draw(view: SVGSelection) {
@@ -41,7 +43,7 @@ export class LinkWidget implements Widget {
 
     link_body_merge
       .select<SVGPathElement>('path')
-        .classed('selected', (l: MapLink) => l.isSelected);
+        .classed('selected', (l: MapLink) => this.selectionStore.isSelected(l));
 
     this.interfaceLabelWidget.draw(link_body_merge);
     this.interfaceStatusWidget.draw(link_body_merge);

src/app/cartography/widgets/node.ts

@@ -8,6 +8,8 @@ import { FontFixer } from "../helpers/font-fixer";
 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 { SelectionStore } from "../managers/selection-manager";
 
 
 @Injectable()
@@ -19,17 +21,13 @@ export class NodeWidget implements Widget {
   public onNodeDragged = new EventEmitter<NodeDragged>();
   public onNodeDragging = new EventEmitter<NodeDragging>();
 
-  private symbols: MapSymbol[] = [];
-
   constructor(
     private cssFixer: CssFixer,
     private fontFixer: FontFixer,
+    private graphDataManager: GraphDataManager,
+    private selectionStore: SelectionStore
   ) {}
 
-  public setSymbols(symbols: MapSymbol[]) {
-    this.symbols = symbols;
-  }
-
   public draw(view: SVGSelection) {
     const self = this;
 
@@ -49,7 +47,7 @@ export class NodeWidget implements Widget {
           .attr('class', 'label');
 
     const node_body_merge = node_body.merge(node_body_enter)
-        .classed('selected', (n: MapNode) => n.isSelected)
+        .classed('selected', (n: MapNode) => this.selectionStore.isSelected(n))
         .on("contextmenu", function (n: MapNode, i: number) {
           event.preventDefault();
           self.onContextMenu.emit(new NodeContextMenu(event, n));
@@ -62,7 +60,7 @@ export class NodeWidget implements Widget {
     node_body_merge
         .select<SVGImageElement>('image')
           .attr('xnode:href', (n: MapNode) => {
-            const symbol = this.symbols.find((s: MapSymbol) => s.id === n.symbol);
+            const symbol = this.graphDataManager.getSymbols().find((s: MapSymbol) => s.id === n.symbol);
             if (symbol) {
               return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
             }

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

@@ -77,7 +77,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private projectWebServiceHandler: ProjectWebServiceHandler,
     private mapChangeDetectorRef: MapChangeDetectorRef,
     private nodeWidget: NodeWidget,
-    private selectionManager: SelectionManager,
     private mapNodeToNode: MapNodeToNodeConverter,
     protected nodesDataSource: NodesDataSource,
     protected linksDataSource: LinksDataSource,
@@ -137,6 +136,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.subscriptions.push(
       this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
         this.nodes = nodes;
+        console.log("update nodes");
         this.mapChangeDetectorRef.detectChanges();
       })
     );
@@ -198,12 +198,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     });
 
     this.subscriptions.push(onContextMenu);
-
-    this.subscriptions.push(
-      this.selectionManager.subscribe(
-        this.mapChild.graphLayout.getSelectionTool().rectangleSelected)
-    );
-
     this.mapChangeDetectorRef.detectChanges();
   }
 
@@ -219,22 +213,26 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       });
   }
 
-  onNodeDragged(draggedEvent: DraggedDataEvent<Node>) {
-    this.nodesDataSource.update(draggedEvent.datum);
-    this.nodeService
-      .updatePosition(this.server, draggedEvent.datum, draggedEvent.datum.x, draggedEvent.datum.y)
-      .subscribe((node: Node) => {
-        this.nodesDataSource.update(node);
-      });
+  onNodeDragged(draggedEvent: DraggedDataEvent<Node[]>) {
+    draggedEvent.datum.forEach((node: Node) => {
+      this.nodesDataSource.update(node);
+      this.nodeService
+        .updatePosition(this.server, node, node.x, node.y)
+        .subscribe((serverNode: Node) => {
+          this.nodesDataSource.update(serverNode);
+        });
+    });
   }
 
-  onDrawingDragged(draggedEvent: DraggedDataEvent<Drawing>) {
-    this.drawingsDataSource.update(draggedEvent.datum);
-    this.drawingService
-      .updatePosition(this.server, draggedEvent.datum, draggedEvent.datum.x, draggedEvent.datum.y)
-      .subscribe((drawing: Drawing) => {
-        this.drawingsDataSource.update(drawing);
-      });
+  onDrawingDragged(draggedEvent: DraggedDataEvent<Drawing[]>) {
+    draggedEvent.datum.forEach((drawing: Drawing) => {
+      this.drawingsDataSource.update(drawing);
+      this.drawingService
+        .updatePosition(this.server, drawing, drawing.x, drawing.y)
+        .subscribe((serverDrawing: Drawing) => {
+          this.drawingsDataSource.update(serverDrawing);
+        });
+    });
   }
 
   public set readonly(value) {

src/app/models/link.ts

@@ -1,9 +1,8 @@
 import { Node } from "../cartography/models/node";
 import { LinkNode } from "./link-node";
-import { Selectable } from "../cartography/managers/selection-manager";
 
 
-export class Link implements Selectable {
+export class Link {
   capture_file_name: string;
   capture_file_path: string;
   capturing: boolean;
@@ -18,7 +17,6 @@ export class Link implements Selectable {
   source: Node; // this is not from server
   target: Node; // this is not from server
 
-  is_selected = false; // this is not from server
   x: number; // this is not from server
   y: number; // this is not from server
 }