diff --git a/src/app/app.component.html b/src/app/app.component.html
index cb6dc90..2b3b433 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -9,7 +9,7 @@
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 845c762..5e0c6f7 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -5,6 +5,7 @@
top: 0;
left: 0;
overflow: hidden;
+ background: rgb(55,55,55)
}
ul {
@@ -19,10 +20,11 @@ ul {
margin: 0;
padding: 3rem;
background: rgba(0,0,0,0.3);
- opacity: 0.3;
+ // opacity: 0.3;
transition: all 360ms 120ms ease-out;
cursor: pointer;
list-style-type: none;
+ color:white;
&:hover {
opacity: 1;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 22a5a55..7f81ce9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+// import { FormsModule } from '@angular/forms';
import { Param } from './models/param.model';
import { Config } from './models/config.model';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 29bdc93..1dc99de 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,7 +12,7 @@ import { CanvasDirective } from './canvas/canvas.directive';
],
imports: [
BrowserModule,
- FormsModule
+ FormsModule,
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/canvas/canvas.directive.ts b/src/app/canvas/canvas.directive.ts
index f37ddf7..8b3e494 100644
--- a/src/app/canvas/canvas.directive.ts
+++ b/src/app/canvas/canvas.directive.ts
@@ -23,6 +23,7 @@ export class CanvasDirective implements OnInit, OnChanges {
@Input()
private param: Param;
+
@Output()
private emitConfig: EventEmitter;
@@ -31,7 +32,7 @@ export class CanvasDirective implements OnInit, OnChanges {
private onResize(event) {
this.resetLines();
this.resetPoints();
- this.init();
+ this.init();
}
constructor(
@@ -45,6 +46,12 @@ export class CanvasDirective implements OnInit, OnChanges {
console.log(changes.param);
}
+ ngDoCheck(){
+ this.resetLines();
+ this.resetPoints();
+ this.init();
+ }
+
ngOnInit() {
this.init();
}
@@ -113,6 +120,8 @@ export class CanvasDirective implements OnInit, OnChanges {
private expandPoints(points: Point[]) {
const newPoints: Point[] = [];
+
+
const matrix = {
min: {
x: points.reduce((a, b) => a.x < b.x ? a : b).x,
@@ -123,7 +132,7 @@ export class CanvasDirective implements OnInit, OnChanges {
y: points.reduce((a, b) => a.y > b.y ? a : b).y,
}
};
-
+
points.splice(1, 0, {
x: this.config.end.x,
y: this.config.height - this.config.height * this.param.margin.y
@@ -134,7 +143,7 @@ export class CanvasDirective implements OnInit, OnChanges {
});
for (let i = 0; i < this.param.points; i++) {
- points.splice(2, 0, this.generateRandomPoint(matrix));
+ points.splice(2, 0, this.generateRandomPoint(matrix));
}
return points;
@@ -148,7 +157,7 @@ export class CanvasDirective implements OnInit, OnChanges {
let point = null;
- if (group.size() <= 1) {
+ if (group.size()<=1) {
return this.expandPoints([
this.config.start,
this.config.end
@@ -167,8 +176,8 @@ export class CanvasDirective implements OnInit, OnChanges {
return points;
}
- private generateRandomPoint(matrix) {
- return {
+ private generateRandomPoint(matrix) {
+ return {
x: Random.randomUniform(matrix.min.x, matrix.max.x)(),
y: Random.randomUniform(matrix.min.y, matrix.max.y)()
};
@@ -288,7 +297,7 @@ export class CanvasDirective implements OnInit, OnChanges {
* Update Config Parameters and emit to parent component.
*/
private updateConfig(): void {
- const margin = this.canvas.clientWidth * this.param.margin.x;
+ const margin = this.canvas.clientWidth * this.param.margin.x;
this.config = {
width: this.canvas.clientWidth,