Improved separation between links, nodes and drawings

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;

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);
 
   }
 }