Activation/deactivation of selection/zoom works

src/app/cartography/shared/tools/moving-tool.ts

@@ -1,18 +1,22 @@
 import {SVGSelection} from "../../../map/models/types";
 import {Context} from "../../../map/models/context";
-import {D3ZoomEvent, zoom} from "d3-zoom";
+import {D3ZoomEvent, zoom, ZoomBehavior} from "d3-zoom";
 import { event } from "d3-selection";
 
 export class MovingTool {
   private selection: SVGSelection;
   private context: Context;
+  private zoom: ZoomBehavior<SVGSVGElement, any>;
+
+  constructor() {
+      this.zoom = zoom<SVGSVGElement, any>()
+        .scaleExtent([1 / 2, 8]);
+  }
 
   public connect(selection: SVGSelection, context: Context) {
     this.selection = selection;
     this.context = context;
 
-    this.selection.call(zoom<SVGSVGElement, any>()
-        .scaleExtent([1 / 2, 8]);
   }
 
   public draw(selection: SVGSelection, context: Context) {
@@ -32,10 +36,14 @@ export class MovingTool {
               `${self.context.getSize().height / 2 + e.transform.y}) scale(${e.transform.k})`);
     };
 
-    this.selection.on('zoom', onZoom);
+
+    this.zoom.on('zoom', onZoom);
+    this.selection.call(this.zoom);
   }
 
   public deactivate() {
-    this.selection.on('zoom', null);
+    // d3.js preserves event `mousedown.zoom` and blocks selection
+    this.selection.on('mousedown.zoom', null);
+    this.zoom.on('zoom', null);
   }
 }

src/app/cartography/shared/tools/selection-tool.ts

@@ -20,6 +20,7 @@ export class SelectionTool {
       return [p[0] - transformation_point.x, p[1] - transformation_point.y];
     };
 
+
     this.selection.on("mousedown", function() {
       const subject = select(window);
       const parent = this.parentElement;
@@ -53,6 +54,7 @@ export class SelectionTool {
         .attr("class", "selection")
         .attr("visibility", "hidden");
     }
+    this.selection = selection;
   }
 
   private startSelection(start) {

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

@@ -270,8 +270,8 @@ export class ProjectMapComponent implements OnInit {
       this.mapChild.graphLayout.getSelectionTool().deactivate();
       this.mapChild.graphLayout.getMovingTool().activate();
     } else {
-      this.mapChild.graphLayout.getSelectionTool().activate();
       this.mapChild.graphLayout.getMovingTool().deactivate();
+      this.mapChild.graphLayout.getSelectionTool().activate();
     }
   }