From 9909fffcbdd834cb94e2571c2d59b27e0a76ed2e Mon Sep 17 00:00:00 2001
From: ziajka <dominik.ziajka@gmail.com>
Date: Thu, 4 Jan 2018 09:17:50 +0100
Subject: [PATCH] More selection

---
 .../shared/tools/selection-tool.ts            | 51 +++++++++++++++++++
 .../shared/widgets/graph.widget.ts            |  4 ++
 2 files changed, 55 insertions(+)

diff --git a/src/app/cartography/shared/tools/selection-tool.ts b/src/app/cartography/shared/tools/selection-tool.ts
index e69de29b..072bdb52 100644
--- a/src/app/cartography/shared/tools/selection-tool.ts
+++ b/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) {
+
+  }
+}
diff --git a/src/app/cartography/shared/widgets/graph.widget.ts b/src/app/cartography/shared/widgets/graph.widget.ts
index fa4de8f3..d864197c 100644
--- a/src/app/cartography/shared/widgets/graph.widget.ts
+++ b/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;