From 014cef069791caa25404e7be01cd9b507be32ba4 Mon Sep 17 00:00:00 2001
From: Dominik Ziajka <dominik.ziajka@gmail.com>
Date: Fri, 30 Mar 2018 09:27:45 +0200
Subject: [PATCH] Improved separation between links, nodes and drawings

---
 .../cartography/shared/widgets/layers.spec.ts | 21 +++++++++++++
 src/app/cartography/shared/widgets/layers.ts  | 30 +++++++++++++++++--
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/app/cartography/shared/widgets/layers.spec.ts b/src/app/cartography/shared/widgets/layers.spec.ts
index c9dbbe6d..88c55220 100644
--- a/src/app/cartography/shared/widgets/layers.spec.ts
+++ b/src/app/cartography/shared/widgets/layers.spec.ts
@@ -51,6 +51,27 @@ describe('LayersWidget', () => {
     expect(drew.nodes()[1].getAttribute('data-index')).toEqual('2');
   });
 
+  it('should draw links container', () => {
+    widget.draw(svg.canvas, layers);
+
+    const drew = svg.canvas.selectAll<SVGGElement, Layer>('g.links');
+    expect(drew.size()).toEqual(2);
+  });
+
+  it('should draw nodes container', () => {
+    widget.draw(svg.canvas, layers);
+
+    const drew = svg.canvas.selectAll<SVGGElement, Layer>('g.nodes');
+    expect(drew.size()).toEqual(2);
+  });
+
+  it('should draw drawings container', () => {
+    widget.draw(svg.canvas, layers);
+
+    const drew = svg.canvas.selectAll<SVGGElement, Layer>('g.drawings');
+    expect(drew.size()).toEqual(2);
+  });
+
   it('should redraw on layers change', () => {
     widget.draw(svg.canvas, layers);
     layers[0].index = 3;
diff --git a/src/app/cartography/shared/widgets/layers.ts b/src/app/cartography/shared/widgets/layers.ts
index 3853bb0f..92bd133c 100644
--- a/src/app/cartography/shared/widgets/layers.ts
+++ b/src/app/cartography/shared/widgets/layers.ts
@@ -20,26 +20,50 @@ export class LayersWidget implements Widget {
         .append<SVGGElement>('g')
         .attr('class', 'layer')
 
+    // add container for links
+    layers_enter
+      .append<SVGGElement>('g')
+        .attr('class', 'links');
+
+    // add container for nodes
+    layers_enter
+      .append<SVGGElement>('g')
+        .attr('class', 'nodes');
+
+    // add container for drawings
+    layers_enter
+      .append<SVGGElement>('g')
+        .attr('class', 'drawings');
+
     const merge = layers_selection.merge(layers_enter);
 
     merge
       .attr('data-index', (layer: Layer) => layer.index);
 
+    const links_container = merge
+      .select<SVGGElement>('g.links');
+
+    const nodes_container = merge
+      .select<SVGGElement>('g.nodes');
+
+    const drawings_container = merge
+      .select<SVGGElement>('g.drawings');
+
     layers_selection
       .exit()
         .remove();
 
     this.graphLayout
       .getLinksWidget()
-      .draw(merge);
+      .draw(links_container);
 
     this.graphLayout
       .getNodesWidget()
-      .draw(merge);
+      .draw(nodes_container);
 
     this.graphLayout
       .getDrawingsWidget()
-      .draw(merge);
+      .draw(drawings_container);
 
   }
 }