More selection

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

@@ -0,0 +1,51 @@
+import {SVGSelection} from "../../../map/models/types";
+import {mouse, select} from "d3-selection";
+
+export class SelectionTool {
+  private selection: SVGSelection;
+  private path;
+
+  public connect(selection: SVGSelection) {
+    const self = this;
+    this.selection = selection;
+    const canvas = this.selection.select<SVGGElement>("g.canvas");
+
+    if (!canvas.select<SVGGElement>("g.selection-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");
+    }
+
+    selection.on("mousedown", function() {
+      const subject = select(window);
+      const parent = this.parentNode;
+
+      const start = mouse(parent);
+        self.startSelection(start);
+        subject
+          .on("mousemove.selection", function() {
+            self.moveSelection(start, mouse(parent));
+          }).on("mouseup.selection", function() {
+            self.endSelection(start, mouse(parent));
+            subject.on("mousemove.selection", null).on("mouseup.selection", null);
+          });
+    });
+  }
+
+  public draw() {
+
+  }
+
+  private startSelection(start) {
+
+  }
+
+  private moveSelection(start, move) {
+
+  }
+
+  private endSelection(start, end) {
+
+  }
+}

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

@@ -10,6 +10,7 @@ import { event } from "d3-selection";
 import { Drawing } from "../models/drawing.model";
 import { DrawingsWidget } from "./drawings.widget";
 import { DrawingLineWidget } from "./drawing-line.widget";
+import {SelectionTool} from "../tools/selection-tool";
 
 export class GraphLayout implements Widget {
   private nodes: Node[] = [];
@@ -20,6 +21,7 @@ export class GraphLayout implements Widget {
   private nodesWidget: NodesWidget;
   private drawingsWidget: DrawingsWidget;
   private drawingLineTool: DrawingLineWidget;
+  private selectionTool: SelectionTool;
 
   private centerZeroZeroPoint = true;
 
@@ -28,6 +30,7 @@ export class GraphLayout implements Widget {
     this.nodesWidget = new NodesWidget();
     this.drawingsWidget = new DrawingsWidget();
     this.drawingLineTool = new DrawingLineWidget();
+    this.selectionTool = new SelectionTool();
   }
 
   public setNodes(nodes: Node[]) {
@@ -78,6 +81,7 @@ export class GraphLayout implements Widget {
     this.drawingsWidget.draw(canvas, this.drawings);
 
     this.drawingLineTool.connect(view);
+    this.selectionTool.connect(view);
 
     const onZoom = function(this: SVGSVGElement) {
       const e: D3ZoomEvent<SVGSVGElement, any> = event;