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,