diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1d87154..e835da3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ */ import { BrowserModule } from '@angular/platform-browser'; +// import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { MomentModule } from 'ngx-moment'; @@ -36,6 +37,7 @@ import { GraphService } from './services/graph.service'; ], imports: [ BrowserModule, + // BrowserAnimationsModule, ReactiveFormsModule, FormsModule, MomentModule, diff --git a/src/app/components/graphs.component.scss b/src/app/components/graphs.component.scss index d98c4ba..f21eb42 100644 --- a/src/app/components/graphs.component.scss +++ b/src/app/components/graphs.component.scss @@ -14,6 +14,21 @@ * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +// svg { +// stroke-dasharray: 1000px; +// stroke-dashoffset: 0px; +// animation: draw 6s; +// } + +// @keyframes draw { +// from { +// stroke-dashoffset: 1000px; +// } +// to { +// stroke-dashoffset: 0px; +// } +// } + :host { position: absolute; width: 100%; diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts index 80f2b6d..1fe283c 100644 --- a/src/app/components/graphs.component.ts +++ b/src/app/components/graphs.component.ts @@ -160,8 +160,8 @@ export class GraphsComponent implements OnChanges, OnInit { } private updateMatrix() { - const totalArea = Math.abs(this.canvas.clientWidth * this.canvas.clientHeight); - const totalCenter = this.math.centerOfArea(this.canvas.clientWidth, this.canvas.clientHeight); + const totalArea = Math.abs(this.canvas.getBoundingClientRect().width * this.canvas.getBoundingClientRect().height); + const totalCenter = this.math.centerOfArea(this.canvas.getBoundingClientRect().width, this.canvas.getBoundingClientRect().height); const baseArea = Math.abs(this.config.width * this.config.height); const baseScale = Math.pow(totalArea / baseArea * this.config.scale, 0.5); diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts index f067bee..203978b 100644 --- a/src/app/directives/guilloche.directive.ts +++ b/src/app/directives/guilloche.directive.ts @@ -61,8 +61,6 @@ export class GuillocheDirective implements OnChanges, OnDestroy { private graphService: GraphService, private animationService: AnimationService ) { - this.group = Selection.select(el.nativeElement); - this.canvas = Selection.select(this.canvasService.get); } ngOnDestroy() { @@ -70,6 +68,8 @@ export class GuillocheDirective implements OnChanges, OnDestroy { } ngOnChanges(changes: SimpleChanges) { + this.group = Selection.select(this.el.nativeElement); + this.canvas = Selection.select(this.canvasService.get); // @todo modify graph here instead of in graphs.component.ts this.initialNodes = this.graph.nodes.slice(); this.medianPoint = this.math.medianOfCurve(this.initialNodes);