Change the way of selection

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

@@ -15,17 +15,18 @@ describe('SelectionManager', () => {
   let nodesDataSource: NodesDataSource;
 
   beforeEach(() => {
-    const linksDataSourec = new LinksDataSource();
+    const linksDataSource = new LinksDataSource();
     const inRectangleHelper = new InRectangleHelper();
 
     selectedRectangleSubject = new Subject<Rectangle>();
 
     nodesDataSource = new NodesDataSource();
 
-    manager = new SelectionManager(nodesDataSource, linksDataSourec, inRectangleHelper);
+    manager = new SelectionManager(nodesDataSource, linksDataSource, inRectangleHelper);
     manager.subscribe(selectedRectangleSubject);
 
     const node_1 = new Node();
+    node_1.node_id = "test1";
     node_1.name = "Node 1";
     node_1.x = 150;
     node_1.y = 150;
@@ -33,11 +34,15 @@ describe('SelectionManager', () => {
     nodesDataSource.add(node_1);
 
     const node_2 = new Node();
+    node_2.node_id = "test2";
     node_2.name = "Node 2";
     node_2.x = 300;
     node_2.y = 300;
     nodesDataSource.add(node_2);
 
+    const link_1 = new Link();
+    link_1.link_id = "test1";
+    linksDataSource.add(link_1);
   });
 
   it('node should be selected', () => {
@@ -56,12 +61,16 @@ describe('SelectionManager', () => {
   });
 
   it('nodes should be manually selected', () => {
-    manager.setSelectedNodes([new Node()]);
+    const node = new Node();
+    node.node_id = "test1";
+    manager.setSelectedNodes([node]);
     expect(manager.getSelectedNodes().length).toEqual(1);
   });
 
   it('links should be manually selected', () => {
-    manager.setSelectedLinks([new Link()]);
+    const link = new Link();
+    link.link_id = "test1";
+    manager.setSelectedLinks([link]);
     expect(manager.getSelectedLinks().length).toEqual(1);
   });
 });

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

@@ -45,25 +45,40 @@ export class SelectionManager {
   }
 
   public setSelectedNodes(nodes: Node[]) {
-    this.selectedNodes = nodes;
+    this.selectedNodes = this.setSelectedItems<Node>(this.nodesDataSource, (node: Node) => {
+      return !!nodes.find((n: Node) => node.node_id === n.node_id);
+    });
   }
 
   public setSelectedLinks(links: Link[]) {
-    this.selectedLinks = links;
+    this.selectedLinks = this.setSelectedItems<Link>(this.linksDataSource, (link: Link) => {
+      return !!links.find((l: Link) => link.link_id === l.link_id);
+    });
   }
 
   private getSelectedItemsInRectangle<T extends Selectable>(dataSource: DataSource<T>, rectangle: Rectangle) {
-    const items: T[] = [];
+    return this.setSelectedItems<T>(dataSource, (item: T) => {
+      return this.inRectangleHelper.inRectangle(item, rectangle);
+    });
+  }
+
+  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 is_selected = this.inRectangleHelper.inRectangle(item, rectangle);
-      if (item.is_selected !== is_selected) {
-        item.is_selected = is_selected;
-        dataSource.update(item);
-        if (is_selected) {
-          items.push(item);
-        }
+      const isSelected = discriminator(item);
+      this.setSelected<T>(item, isSelected, dataSource);
+      if (isSelected) {
+        selected.push(item);
       }
     });
-    return items;
+    return selected;
   }
 }

src/app/cartography/shared/widgets/ethernet-link.widget.ts

@@ -15,7 +15,6 @@ export class EthernetLinkWidget implements Widget {
       const value_line = line();
 
       let link_path = view.select<SVGPathElement>('path');
-      link_path.classed('selectable', true);
       link_path.classed('selected', (l: Link) => l.is_selected);
 
       if (!link_path.node()) {

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

@@ -90,7 +90,7 @@ export class NodesWidget implements Widget {
     const node_enter = node
       .enter()
         .append<SVGGElement>('g')
-        .attr('class', 'node selectable');
+        .attr('class', 'node');
 
     node_enter
       .append<SVGImageElement>('image')

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

@@ -161,11 +161,15 @@ export class ProjectMapComponent implements OnInit {
   }
 
   setUpMapCallbacks(project: Project) {
+    const selectionManager = new SelectionManager(this.nodesDataSource, this.linksDataSource, new InRectangleHelper());
+
     this.mapChild.graphLayout.getNodesWidget().setOnContextMenuCallback((event: any, node: Node) => {
       this.nodeContextMenu.open(node, event.clientY, event.clientX);
     });
 
     this.mapChild.graphLayout.getNodesWidget().setOnNodeClickedCallback((event: any, node: Node) => {
+      selectionManager.setSelectedNodes([node]);
+
       if (this.drawLineMode) {
         this.nodeSelectInterfaceMenu.open(node, event.clientY, event.clientX);
       }
@@ -180,8 +184,6 @@ export class ProjectMapComponent implements OnInit {
         });
     });
 
-    const selectionManager = new SelectionManager(this.nodesDataSource, this.linksDataSource, new InRectangleHelper());
-
     selectionManager.subscribe(this.mapChild.graphLayout.getSelectionTool().rectangleSelected);
   }