fixing firefox bug

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,

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%;

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 totalArea = Math.abs(this.canvas.getBoundingClientRect().width * this.canvas.getBoundingClientRect().height);
-    const totalCenter = this.math.centerOfArea(this.canvas.clientWidth, this.canvas.clientHeight);
+    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);

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