Started working on drawing lines

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;
+}

src/app/cartography/shared/models/point.model.ts

@@ -0,0 +1,3 @@
+export class Point {
+  constructor(public x: number, public y: number) {}
+};

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');
+
+
+
+  }
 }

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;

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);
   }
 
 }