From 4f8f782a04dc7034521e0048e84762c5245c4924 Mon Sep 17 00:00:00 2001
From: ziajka <dominik.ziajka@gmail.com>
Date: Fri, 1 Dec 2017 16:47:49 +0100
Subject: [PATCH] Started working on drawing lines

---
 .../shared/models/drawing-line.model.ts       |  6 +++
 .../cartography/shared/models/point.model.ts  |  3 ++
 .../shared/widgets/drawing-line.widget.ts     | 53 ++++++++++++++++++-
 .../shared/widgets/graph.widget.ts            |  8 +++
 src/app/project-map/project-map.component.ts  |  4 +-
 5 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/app/cartography/shared/models/drawing-line.model.ts
 create mode 100644 src/app/cartography/shared/models/point.model.ts

diff --git a/src/app/cartography/shared/models/drawing-line.model.ts b/src/app/cartography/shared/models/drawing-line.model.ts
new file mode 100644
index 00000000..764100e9
--- /dev/null
+++ b/src/app/cartography/shared/models/drawing-line.model.ts
@@ -0,0 +1,6 @@
+import {Point} from "./point.model";
+
+export class DrawingLine {
+  start: Point;
+  end: Point;
+}
diff --git a/src/app/cartography/shared/models/point.model.ts b/src/app/cartography/shared/models/point.model.ts
new file mode 100644
index 00000000..238b8375
--- /dev/null
+++ b/src/app/cartography/shared/models/point.model.ts
@@ -0,0 +1,3 @@
+export class Point {
+  constructor(public x: number, public y: number) {}
+};
diff --git a/src/app/cartography/shared/widgets/drawing-line.widget.ts b/src/app/cartography/shared/widgets/drawing-line.widget.ts
index 614c25b1..bd1c7934 100644
--- a/src/app/cartography/shared/widgets/drawing-line.widget.ts
+++ b/src/app/cartography/shared/widgets/drawing-line.widget.ts
@@ -1,3 +1,54 @@
-export class DrawingLineWidget {
+import {DrawingLine} from "../models/drawing-line.model";
+import {SVGSelection} from "../../../map/models/types";
+import {Point} from "../models/point.model";
+import {line} from "d3-shape";
 
+export class DrawingLineWidget {
+  private drawingLine: DrawingLine = new DrawingLine();
+  private selection: SVGSelection;
+
+  public start(x: number, y: number) {
+    this.drawingLine.start = new Point(x, y);
+    this.drawingLine.end = new Point(x, y);
+
+    this.draw();
+  }
+
+  public update(x: number, y: number) {
+    this.drawingLine.end = new Point(x, y);
+  }
+
+  public stop() {
+    
+  }
+
+  public connect(selection: SVGSelection) {
+    this.selection = selection;
+  }
+
+  public draw() {
+    const link_data = [[
+      [this.drawingLine.start.x, this.drawingLine.start.y],
+      [this.drawingLine.end.x, this.drawingLine.end.y]
+    ]];
+
+    const value_line = line();
+
+    const tool = this.selection
+        .selectAll<SVGGElement, DrawingLine>('g.drawing-line')
+        .data(link_data);
+
+    const enter = tool
+      .enter()
+        .append<SVGPathElement>('path');
+
+    tool
+      .merge(enter)
+        .attr('d', value_line)
+        .attr('stroke', '#000')
+        .attr('stroke-width', '2');
+
+
+
+  }
 }
diff --git a/src/app/cartography/shared/widgets/graph.widget.ts b/src/app/cartography/shared/widgets/graph.widget.ts
index 656455aa..fed022ed 100644
--- a/src/app/cartography/shared/widgets/graph.widget.ts
+++ b/src/app/cartography/shared/widgets/graph.widget.ts
@@ -9,6 +9,7 @@ import { D3ZoomEvent, zoom } from "d3-zoom";
 import { event } from "d3-selection";
 import { Drawing } from "../models/drawing.model";
 import { DrawingsWidget } from "./drawings.widget";
+import { DrawingLineWidget } from "./drawing-line.widget";
 
 export class GraphLayout implements Widget {
   private nodes: Node[] = [];
@@ -18,6 +19,7 @@ export class GraphLayout implements Widget {
   private linksWidget: LinksWidget;
   private nodesWidget: NodesWidget;
   private drawingsWidget: DrawingsWidget;
+  private drawingLineTool: DrawingLineWidget;
 
   private centerZeroZeroPoint = true;
 
@@ -25,6 +27,7 @@ export class GraphLayout implements Widget {
     this.linksWidget = new LinksWidget();
     this.nodesWidget = new NodesWidget();
     this.drawingsWidget = new DrawingsWidget();
+    this.drawingLineTool = new DrawingLineWidget();
   }
 
   public setNodes(nodes: Node[]) {
@@ -47,6 +50,10 @@ export class GraphLayout implements Widget {
     return this.linksWidget;
   }
 
+  public getDrawingLineTool() {
+    return this.drawingLineTool;
+  }
+
   draw(view: SVGSelection, context: Context) {
     const self = this;
 
@@ -67,6 +74,7 @@ export class GraphLayout implements Widget {
     this.linksWidget.draw(canvas, this.links);
     this.nodesWidget.draw(canvas, this.nodes);
     this.drawingsWidget.draw(canvas, this.drawings);
+    this.drawingLineTool.connect(canvas);
 
     const onZoom = function(this: SVGSVGElement) {
       const e: D3ZoomEvent<SVGSVGElement, any> = event;
diff --git a/src/app/project-map/project-map.component.ts b/src/app/project-map/project-map.component.ts
index ee75e749..58883ad3 100644
--- a/src/app/project-map/project-map.component.ts
+++ b/src/app/project-map/project-map.component.ts
@@ -266,8 +266,8 @@ export class ProjectMapComponent implements OnInit {
     this.drawLineMode = false;
   }
 
-  public onChooseInterface(port: Port) {
-    console.log(port);
+  public onChooseInterface(node: Node, port: Port) {
+    this.mapChild.graphLayout.getDrawingLineTool().start(10, 100);
   }
 
 }