From 8ee4ac9316be22dd21788277808db718c1702b9f Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Sun, 13 May 2018 02:24:43 +0200
Subject: [PATCH] prepared dragging, but will not be neccessary

---
 src/app/app.component.html         |  2 ++
 src/app/app.component.scss         | 10 +++++--
 src/app/app.component.ts           |  3 +-
 src/app/canvas/canvas.directive.ts | 45 +++++++++++++++++++-----------
 src/app/models/config.model.ts     |  1 +
 src/app/models/param.model.ts      |  1 +
 src/styles.scss                    |  2 ++
 7 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9ea20f0..acbec93 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,9 @@
 <div class="canvas" appCanvas (emitConfig)="updateCanvasConfig($event)" [param]="canvasParam"></div>
 
 <ul *ngIf="canvasConfig">
+  <li><b>Static Configuration</b></li>
   <li><pre>{{canvasConfig | json}}</pre></li>
+  <li><b>Changeable Parameters</b></li>
   <li><pre>{{canvasParam | json}}</pre></li>
 </ul>
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 88ddc6e..845c762 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -18,10 +18,16 @@ ul {
   justify-content: center;
   margin: 0;
   padding: 3rem;
-  background: rgba(0,0,0,0.1);
-
+  background: rgba(0,0,0,0.3);
+  opacity: 0.3;
+  transition: all 360ms 120ms ease-out;
+  cursor: pointer;
   list-style-type: none;
 
+  &:hover {
+    opacity: 1;
+  }
+
   li {
     display: flex;
     align-items: center;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8343670..12f771b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -17,7 +17,8 @@ export class AppComponent {
       colors: {
         start: '#cc0045',
         end: '#0067cc'
-      }
+      },
+      points: 5
     };
   }
 
diff --git a/src/app/canvas/canvas.directive.ts b/src/app/canvas/canvas.directive.ts
index efea73a..f9bd68f 100644
--- a/src/app/canvas/canvas.directive.ts
+++ b/src/app/canvas/canvas.directive.ts
@@ -43,6 +43,10 @@ export class CanvasDirective implements OnInit {
 
   private init() {
     this.updateConfig();
+    this.expandedPoints = this.expandPoints([
+      this.config.start,
+      this.config.end
+    ]);
     this.initSvg();
     this.render();
   }
@@ -54,13 +58,21 @@ export class CanvasDirective implements OnInit {
     this.svg
       .attr('width', this.config.width)
       .attr('height', this.config.height)
-      .call(Drag.drag().on('drag', () => {
-        this.drag = {
-          x: Selection.event.x,
-          y: Selection.event.y
-        };
-        this.updateConfig();
-      }));
+      .call(Drag.drag()
+        .on('drag', () => {
+          this.drag = {
+            x: Selection.event.x,
+            y: Selection.event.y
+          };
+          this.updateConfig();
+          this.render();
+        })
+        .on('end', () => {
+          delete this.drag;
+          this.updateConfig();
+          this.render();
+        })
+      );
 
     this.defs = this.svg.append('defs');
 
@@ -76,13 +88,9 @@ export class CanvasDirective implements OnInit {
 
   private render() {
     this.resetPoints();
-    this.expandedPoints = this.expandPoints([
-      this.config.start,
-      this.config.end
-    ]);
-    this.drawPoints(this.expandedPoints);
+    this.drawPoints(this.getExpandedPoints);
     this.resetLines();
-    this.drawLine(this.expandedPoints);
+    this.drawLine(this.getExpandedPoints);
   }
 
   private resetPoints(): void {
@@ -128,13 +136,16 @@ export class CanvasDirective implements OnInit {
       }
     };
 
-    points.splice(1, 0, this.generateRandomPoint(matrix));
-    points.splice(1, 0, this.generateRandomPoint(matrix));
-    points.splice(1, 0, this.generateRandomPoint(matrix));
-
+    for (let i = 0; i <= this.param.points; i++) {
+      points.splice(1, 0, this.generateRandomPoint(matrix));
+    }
     return points;
   }
 
+  private get getExpandedPoints() {
+    return this.expandedPoints;
+  }
+
   private calcDelta(a: Point, b: Point) {
     return Math.pow(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2), 0.5);
   }
diff --git a/src/app/models/config.model.ts b/src/app/models/config.model.ts
index c0cadc5..490dd9d 100644
--- a/src/app/models/config.model.ts
+++ b/src/app/models/config.model.ts
@@ -5,4 +5,5 @@ export interface Config {
   height: number;
   start: Point;
   end: Point;
+  drag?: Point;
 }
diff --git a/src/app/models/param.model.ts b/src/app/models/param.model.ts
index 18def2b..d1012a5 100644
--- a/src/app/models/param.model.ts
+++ b/src/app/models/param.model.ts
@@ -3,4 +3,5 @@ export interface Param {
     start: string,
     end: string
   };
+  points: number;
 }
diff --git a/src/styles.scss b/src/styles.scss
index 91c4873..bef3e97 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -5,4 +5,6 @@ html, body {
   height: 100%;
   padding: 0;
   margin: 0;
+
+  font-family: monospace;
 }