From c5de9256c7e6647cd3b51f8d844141721b55369d Mon Sep 17 00:00:00 2001 From: ziajka Date: Fri, 23 Mar 2018 13:44:41 +0100 Subject: [PATCH] Change the way of selection --- .../shared/managers/selection-manager.spec.ts | 17 +++++++-- .../shared/managers/selection-manager.ts | 37 +++++++++++++------ .../shared/widgets/ethernet-link.widget.ts | 1 - .../shared/widgets/nodes.widget.ts | 2 +- src/app/project-map/project-map.component.ts | 6 ++- 5 files changed, 44 insertions(+), 19 deletions(-) diff --git a/src/app/cartography/shared/managers/selection-manager.spec.ts b/src/app/cartography/shared/managers/selection-manager.spec.ts index 7b53e765..9afee554 100644 --- a/src/app/cartography/shared/managers/selection-manager.spec.ts +++ b/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(); 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); }); }); diff --git a/src/app/cartography/shared/managers/selection-manager.ts b/src/app/cartography/shared/managers/selection-manager.ts index 9bd8f8ce..965f058d 100644 --- a/src/app/cartography/shared/managers/selection-manager.ts +++ b/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(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(this.linksDataSource, (link: Link) => { + return !!links.find((l: Link) => link.link_id === l.link_id); + }); } private getSelectedItemsInRectangle(dataSource: DataSource, rectangle: Rectangle) { - const items: T[] = []; + return this.setSelectedItems(dataSource, (item: T) => { + return this.inRectangleHelper.inRectangle(item, rectangle); + }); + } + + private setSelected(item: T, isSelected: boolean, dataSource: DataSource): boolean { + if (item.is_selected !== isSelected) { + item.is_selected = isSelected; + dataSource.update(item); + } + return item.is_selected; + } + + private setSelectedItems(dataSource: DataSource, 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(item, isSelected, dataSource); + if (isSelected) { + selected.push(item); } }); - return items; + return selected; } } diff --git a/src/app/cartography/shared/widgets/ethernet-link.widget.ts b/src/app/cartography/shared/widgets/ethernet-link.widget.ts index 4a3a6d7f..926af96e 100644 --- a/src/app/cartography/shared/widgets/ethernet-link.widget.ts +++ b/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('path'); - link_path.classed('selectable', true); link_path.classed('selected', (l: Link) => l.is_selected); if (!link_path.node()) { diff --git a/src/app/cartography/shared/widgets/nodes.widget.ts b/src/app/cartography/shared/widgets/nodes.widget.ts index 4ef3c7f5..8e456804 100644 --- a/src/app/cartography/shared/widgets/nodes.widget.ts +++ b/src/app/cartography/shared/widgets/nodes.widget.ts @@ -90,7 +90,7 @@ export class NodesWidget implements Widget { const node_enter = node .enter() .append('g') - .attr('class', 'node selectable'); + .attr('class', 'node'); node_enter .append('image') diff --git a/src/app/project-map/project-map.component.ts b/src/app/project-map/project-map.component.ts index 5c05e253..d4c2ef9a 100644 --- a/src/app/project-map/project-map.component.ts +++ b/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); }