Deactivate/activate tools

src/app/cartography/map/map.component.ts

@@ -94,6 +94,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
       }
 
       this.graphLayout = new GraphLayout();
+      this.graphLayout.connect(this.svg, this.graphContext);
 
       this.graphLayout.getNodesWidget().addOnNodeDraggingCallback((event: any, n: Node) => {
         const linksWidget = this.graphLayout.getLinksWidget();

src/app/cartography/shared/tool.ts

@@ -2,4 +2,6 @@ import {SVGSelection} from "../../map/models/types";
 
 export interface Tool {
   connect(selection: SVGSelection);
+  activate();
+  deactivate();
 }

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

@@ -0,0 +1,24 @@
+import {SVGSelection} from "../../../map/models/types";
+import {mouse, select} from "d3-selection";
+import {Context} from "../../../map/models/context";
+
+export class MovingTool {
+  private selection: SVGSelection;
+  private path;
+
+  public connect(selection: SVGSelection, context: Context) {
+
+  }
+
+  public draw(selection: SVGSelection, context: Context) {
+
+  }
+
+  public activate() {
+
+  }
+
+  public deactivate() {
+
+  }
+}

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

@@ -5,28 +5,22 @@ import {Context} from "../../../map/models/context";
 export class SelectionTool {
   private selection: SVGSelection;
   private path;
+  private context: Context;
 
   public connect(selection: SVGSelection, context: Context) {
-    const self = this;
     this.selection = selection;
-    const canvas = this.selection.select<SVGGElement>("g.canvas");
+    this.context = context;
+  }
 
-    if (!canvas.select<SVGGElement>("g.selection-line-tool").node()) {
-      const g = canvas.append<SVGGElement>('g');
-      g.attr("class", "selection-line-tool");
-
-      this.path = g.append("path");
-      this.path
-        .attr("class", "selection")
-        .attr("visibility", "hidden");
-    }
+  public activate() {
+    const self = this;
 
     const transformation = (p) => {
-      const transformation_point = context.getZeroZeroTransformationPoint();
+      const transformation_point = this.context.getZeroZeroTransformationPoint();
       return [p[0] - transformation_point.x, p[1] - transformation_point.y];
     };
 
-    selection.on("mousedown", function() {
+    this.selection.on("mousedown", function() {
       const subject = select(window);
       const parent = this.parentElement;
 
@@ -43,8 +37,22 @@ export class SelectionTool {
     });
   }
 
-  public draw() {
+  public deactivate() {
+    this.selection.on('mousedown', null);
+  }
 
+  public draw(selection: SVGSelection, context: Context) {
+    const canvas = selection.select<SVGGElement>("g.canvas");
+
+    if (!canvas.select<SVGGElement>("g.selection-line-tool").node()) {
+      const g = canvas.append<SVGGElement>('g');
+      g.attr("class", "selection-line-tool");
+
+      this.path = g.append("path");
+      this.path
+        .attr("class", "selection")
+        .attr("visibility", "hidden");
+    }
   }
 
   private startSelection(start) {

src/app/cartography/shared/widgets/drawing-line.widget.ts

@@ -3,6 +3,7 @@ import {SVGSelection} from "../../../map/models/types";
 import {Point} from "../models/point.model";
 import {line} from "d3-shape";
 import {event, mouse, select} from "d3-selection";
+import {Context} from "../../../map/models/context";
 
 export class DrawingLineWidget {
   private drawingLine: DrawingLine = new DrawingLine();
@@ -23,11 +24,11 @@ export class DrawingLineWidget {
       const coordinates = mouse(node);
       self.drawingLine.end.x = coordinates[0];
       self.drawingLine.end.y = coordinates[1];
-      self.draw();
+      self.draw(null, null);
     };
 
     this.selection.on('mousemove', over);
-    this.draw();
+    this.draw(null, null);
   }
 
   public isDrawing() {
@@ -37,19 +38,20 @@ export class DrawingLineWidget {
   public stop() {
     this.drawing = false;
     this.selection.on('mousemove', null);
-    this.draw();
+    this.draw(null, null);
     return this.data;
   }
 
-  public connect(selection: SVGSelection) {
+  public connect(selection: SVGSelection, context: Context) {
     this.selection = selection;
+  }
+
+  public draw(selection: SVGSelection, context: Context) {
     const canvas = this.selection.select<SVGGElement>("g.canvas");
     if (!canvas.select<SVGGElement>("g.drawing-line-tool").node()) {
       canvas.append<SVGGElement>('g').attr("class", "drawing-line-tool");
     }
-  }
 
-  public draw() {
     let link_data = [];
 
     if (this.drawing) {

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

@@ -12,6 +12,7 @@ import { DrawingsWidget } from "./drawings.widget";
 import { DrawingLineWidget } from "./drawing-line.widget";
 import {SelectionTool} from "../tools/selection-tool";
 import {Tool} from "../tool";
+import {MovingTool} from "../tools/moving-tool";
 
 export class GraphLayout implements Widget {
   private nodes: Node[] = [];
@@ -23,6 +24,7 @@ export class GraphLayout implements Widget {
   private drawingsWidget: DrawingsWidget;
   private drawingLineTool: DrawingLineWidget;
   private selectionTool: SelectionTool;
+  private movingTool: MovingTool;
 
   private centerZeroZeroPoint = true;
 
@@ -32,6 +34,7 @@ export class GraphLayout implements Widget {
     this.drawingsWidget = new DrawingsWidget();
     this.drawingLineTool = new DrawingLineWidget();
     this.selectionTool = new SelectionTool();
+    this.movingTool = new MovingTool();
   }
 
   public setNodes(nodes: Node[]) {
@@ -58,6 +61,22 @@ export class GraphLayout implements Widget {
     return this.drawingLineTool;
   }
 
+  public getMovingTool() {
+    return this.movingTool;
+  }
+
+  public getSelectionTool() {
+    return this.selectionTool;
+  }
+
+  connect(view: SVGSelection, context: Context) {
+    this.drawingLineTool.connect(view, context);
+    this.selectionTool.connect(view, context);
+    this.movingTool.connect(view, context);
+
+    this.selectionTool.activate();
+  }
+
   draw(view: SVGSelection, context: Context) {
     const self = this;
 
@@ -81,9 +100,9 @@ export class GraphLayout implements Widget {
     this.nodesWidget.draw(canvas, this.nodes);
     this.drawingsWidget.draw(canvas, this.drawings);
 
-
-    this.drawingLineTool.connect(view);
-    this.selectionTool.connect(view, context);
+    this.drawingLineTool.draw(view, context);
+    this.selectionTool.draw(view, context);
+    this.movingTool.draw(view, context);
 
     // const onZoom = function(this: SVGSVGElement) {
     //   const e: D3ZoomEvent<SVGSVGElement, any> = event;

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

@@ -266,6 +266,13 @@ export class ProjectMapComponent implements OnInit {
 
   public toggleMovingMode() {
     this.movingMode = !this.movingMode;
+    if (this.movingMode) {
+      this.mapChild.graphLayout.getSelectionTool().deactivate();
+      this.mapChild.graphLayout.getMovingTool().activate();
+    } else {
+      this.mapChild.graphLayout.getSelectionTool().activate();
+      this.mapChild.graphLayout.getMovingTool().deactivate();
+    }
   }
 
   public onChooseInterface(event) {