fixes #74. onpush ftw

src/app/app.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
+import {
+  Component, OnInit, ViewChild, AfterViewInit,
+  OnDestroy, ElementRef, ChangeDetectionStrategy
+} from '@angular/core';
 import { environment } from '../environments/environment';
 import { CanvasType } from './CanvasType';
 import { Subscription } from 'rxjs/Subscription';
@@ -18,7 +21,8 @@ const STORAGE_KEY_FIRST_TIME_USER = 'storage_key_first_time_user';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 

src/app/app.module.ts

@@ -5,25 +5,43 @@ import { HttpModule } from '@angular/http';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MaterialModule, MdIconRegistry } from '@angular/material';
 
+// Components & directives.
 import { AppComponent } from './app.component';
 import { CanvasComponent } from './canvas/canvas.component';
-import { TimelineComponent } from './timeline/timeline.component';
-import { SplitterComponent } from './splitter/splitter.component';
-import { InspectorComponent } from './inspector/inspector.component';
-import { InspectorItemComponent, SvgCommandPipe } from './inspector/inspectoritem.component';
-import { AnimatorService } from './services/animator.service';
-import { LayerStateService } from './services/layerstate.service';
-import { SelectionStateService } from './services/selectionstate.service';
-import { HoverStateService } from './services/hoverstate.service';
-import { CanvasResizeService } from './services/canvasresize.service';
 import { CanvasRulerDirective } from './canvas/canvasruler.directive';
+import { InspectorComponent } from './inspector/inspector.component';
+import { InspectorItemComponent } from './inspector/inspectoritem.component';
+import { PathSelectorComponent } from './pathselector/pathselector.component';
 import { SettingsComponent } from './settings/settings.component';
+import { SplitterComponent } from './splitter/splitter.component';
+import { TimelineComponent } from './timeline/timeline.component';
 import { ToolbarComponent } from './toolbar/toolbar.component';
-import { DialogService, HelpDialogComponent, ConfirmDialogComponent, DemoDialogComponent } from './dialogs';
-import { SettingsService } from './services/settings.service';
-import { PathSelectorComponent } from './pathselector/pathselector.component';
-import { IsEqualToPipe, IsNotEqualToPipe } from './pipes';
+
+// Services.
+import {
+  AnimatorService,
+  CanvasResizeService,
+  HoverStateService,
+  LayerStateService,
+  SelectionStateService,
+  SettingsService,
+} from './services';
+
+// Dialogs.
+import {
+  ConfirmDialogComponent,
+  DemoDialogComponent,
+  DialogService,
+} from './dialogs';
+
+// Pipes.
+import {
+  IsEqualToPipe,
+  IsNotEqualToPipe,
+} from './pipes';
+import { PathLayerListPipe } from './pathselector/pathselector.component';
 import { SubPathItemsPipe } from './inspector/inspector.component';
+import { SvgCommandPipe } from './inspector/inspectoritem.component';
 
 import 'hammerjs';
 
@@ -40,12 +58,12 @@ import 'hammerjs';
     ToolbarComponent,
     PathSelectorComponent,
     ConfirmDialogComponent,
-    HelpDialogComponent,
     DemoDialogComponent,
     SvgCommandPipe,
     IsEqualToPipe,
     IsNotEqualToPipe,
     SubPathItemsPipe,
+    PathLayerListPipe,
   ],
   imports: [
     BrowserModule,
@@ -65,7 +83,6 @@ import 'hammerjs';
   ],
   entryComponents: [
     ConfirmDialogComponent,
-    HelpDialogComponent,
     DemoDialogComponent,
   ],
   bootstrap: [AppComponent]

src/app/dialogs/confirmdialog.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { MdDialogRef } from '@angular/material';
 
 @Component({
@@ -15,10 +15,11 @@ import { MdDialogRef } from '@angular/material';
     <button fxFlexOrder="1" md-button md-dialog-close>Cancel</button>
   </md-dialog-actions>`,
   styleUrls: ['./confirmdialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ConfirmDialogComponent {
   title = '';
   message = '';
 
-  constructor(public readonly dialogRef: MdDialogRef<ConfirmDialogComponent>) {}
+  constructor(public readonly dialogRef: MdDialogRef<ConfirmDialogComponent>) { }
 }

src/app/dialogs/demodialog.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { MdDialogRef } from '@angular/material';
 
 @Component({
@@ -18,12 +18,13 @@ import { MdDialogRef } from '@angular/material';
     <button fxFlexOrder="1" md-button md-dialog-close>Cancel</button>
   </md-dialog-actions>`,
   styleUrls: ['./demodialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DemoDialogComponent {
   private demoTitles_: string[] = [];
   selectedDemoTitle: string;
 
-  constructor(public readonly dialogRef: MdDialogRef<DemoDialogComponent>) {}
+  constructor(public readonly dialogRef: MdDialogRef<DemoDialogComponent>) { }
 
   get demoTitles() {
     return this.demoTitles_;

src/app/dialogs/dialog.service.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs/Rx';
-import { ConfirmDialogComponent, HelpDialogComponent, DemoDialogComponent } from '.';
+import { ConfirmDialogComponent, DemoDialogComponent } from '.';
 import { MdDialog, MdDialogConfig } from '@angular/material';
 import { Injectable, ViewContainerRef } from '@angular/core';
 
@@ -28,10 +28,4 @@ export class DialogService {
     dialogRef.componentInstance.demoTitles = demoTitles;
     return dialogRef.afterClosed();
   }
-
-  help(viewContainerRef: ViewContainerRef) {
-    const config = new MdDialogConfig();
-    config.viewContainerRef = viewContainerRef;
-    return this.dialog.open(HelpDialogComponent, config).afterClosed();
-  }
 }

src/app/dialogs/index.ts

@@ -1,5 +1,4 @@
 import { ConfirmDialogComponent } from './confirmdialog.component';
-import { HelpDialogComponent } from './helpdialog.component';
 import { DialogService } from './dialog.service';
 import { DemoDialogComponent } from './demodialog.component';
-export { ConfirmDialogComponent, HelpDialogComponent, DialogService, DemoDialogComponent };
+export { ConfirmDialogComponent, DialogService, DemoDialogComponent };

src/app/pathselector/pathselector.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="row" class="path-selector-container">
-  <div *ngIf="!!getPathList(CANVAS_START).length" class="path-selector-list"
-    fxFlex>
-    <div *ngFor="let pathLayer of getPathList(CANVAS_START);
+  <div *ngIf="!!(startVectorLayerObservable | async | toPathLayerList).length"
+    class="path-selector-list" fxFlex>
+    <div *ngFor="let pathLayer of (startVectorLayerObservable | async | toPathLayerList);
     let idx = index;
     trackBy: trackPathLayer">
       <div class="path-selector-listitem" [class.is-selected]="getActivePathId(CANVAS_START) === pathLayer.id"
@@ -10,10 +10,10 @@
       </div>
     </div>
   </div>
-  <div class="border" *ngIf="getPathList(CANVAS_START).length || getPathList(CANVAS_END).length"></div>
-  <div *ngIf="!!getPathList(CANVAS_END).length" class="path-selector-list"
-    fxFlex>
-    <div *ngFor="let pathLayer of getPathList(CANVAS_END);
+  <div class="border" *ngIf="(startVectorLayerObservable | async | toPathLayerList).length || (endVectorLayerObservable | async | toPathLayerList).length"></div>
+  <div *ngIf="!!(endVectorLayerObservable | async | toPathLayerList).length"
+    class="path-selector-list" fxFlex>
+    <div *ngFor="let pathLayer of (endVectorLayerObservable | async | toPathLayerList);
     let idx = index;
     trackBy: trackPathLayer">
       <div class="path-selector-listitem" [class.is-selected]="getActivePathId(CANVAS_END) === pathLayer.id"
@@ -22,14 +22,14 @@
       </div>
     </div>
   </div>
-  <div *ngIf="!getPathList(CANVAS_START).length && !getPathList(CANVAS_END).length"
+  <div *ngIf="!(startVectorLayerObservable | async | toPathLayerList).length && !(endVectorLayerObservable | async | toPathLayerList).length"
     class="path-selector-empty" fxLayout="column" fxLayoutAlign="center center"
     fxFlex>
     <input type="file" accept=".svg" id="start-input-file-id" (change)="onSvgFileChosen(($event.target || $event.srcElement).files)"
       multiple>
     <label for="start-input-file-id">Import 2 SVGs to get started<br>(or load a demo in the top right menu)</label>
   </div>
-  <div *ngIf="!(!!getPathList(CANVAS_START).length && !!getPathList(CANVAS_END).length) && !(!getPathList(CANVAS_START).length && !getPathList(CANVAS_END).length)"
+  <div *ngIf="!(!!(startVectorLayerObservable | async | toPathLayerList).length && !!(endVectorLayerObservable | async | toPathLayerList).length) && !(!(startVectorLayerObservable | async | toPathLayerList).length && !(endVectorLayerObservable | async | toPathLayerList).length)"
     class="path-selector-empty" fxLayout="column" fxLayoutAlign="center center"
     fxFlex>
     <input type="file" accept=".svg" id="end-input-file-id" (change)="onSvgFileChosen(($event.target || $event.srcElement).files)"

src/app/pathselector/pathselector.component.ts

@@ -1,21 +1,34 @@
-import { Component, ElementRef } from '@angular/core';
+import {
+  Component, ElementRef, ChangeDetectionStrategy,
+  Pipe, PipeTransform
+} from '@angular/core';
 import { CanvasType } from '../CanvasType';
 import { LayerStateService } from '../services/layerstate.service';
 import { SvgLoader } from '../scripts/import';
 import { VectorLayer, PathLayer } from '../scripts/layers';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-pathselector',
   templateUrl: './pathselector.component.html',
-  styleUrls: ['./pathselector.component.scss']
+  styleUrls: ['./pathselector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PathSelectorComponent {
   CANVAS_START = CanvasType.Start;
   CANVAS_END = CanvasType.End;
 
+  private readonly startVectorLayerObservable: Observable<VectorLayer>;
+  private readonly endVectorLayerObservable: Observable<VectorLayer>;
+
   constructor(
     private elementRef: ElementRef,
-    private layerStateService: LayerStateService) { }
+    private layerStateService: LayerStateService) {
+    this.startVectorLayerObservable =
+      this.layerStateService.getVectorLayerObservable(CanvasType.Start);
+    this.endVectorLayerObservable =
+      this.layerStateService.getVectorLayerObservable(CanvasType.End);
+  }
 
   private setVectorLayer(canvasType: CanvasType, vectorLayer: VectorLayer) {
     const canvasTypes = [canvasType];
@@ -28,27 +41,14 @@ export class PathSelectorComponent {
       canvasTypes.push(CanvasType.Preview);
     }
     this.layerStateService.setVectorLayer(canvasType, vectorLayer, false);
-    const pathLayers = this.getPathList(canvasType);
+    const pathLayers = getPathLayerList(this.layerStateService.getVectorLayer(canvasType));
     if (pathLayers.length) {
       // Auto-select the first path.
       this.setActivePathId(canvasType, pathLayers[0].id);
     }
     canvasTypes.forEach(type => this.layerStateService.notifyChange(type));
   }
 
-  getPathList(canvasType: CanvasType) {
-    const vectorLayer = this.layerStateService.getVectorLayer(canvasType);
-    const pathLayers: PathLayer[] = [];
-    if (vectorLayer) {
-      vectorLayer.walk((layer => {
-        if (layer instanceof PathLayer) {
-          pathLayers.push(layer);
-        }
-      }));
-    }
-    return pathLayers;
-  }
-
   getActivePathId(canvasType: CanvasType) {
     return this.layerStateService.getActivePathId(canvasType);
   }
@@ -81,7 +81,7 @@ export class PathSelectorComponent {
     const canvasTypes = [CanvasType.Start, CanvasType.End];
     const availableEmptyListSlots: CanvasType[] = [];
     for (let i = 0; i < canvasTypes.length; i++) {
-      if (!this.getPathList(canvasTypes[i]).length) {
+      if (!getPathLayerList(this.layerStateService.getVectorLayer(canvasTypes[i])).length) {
         availableEmptyListSlots.push(canvasTypes[i]);
       }
     }
@@ -136,3 +136,24 @@ export class PathSelectorComponent {
     });
   }
 }
+
+@Pipe({ name: 'toPathLayerList' })
+export class PathLayerListPipe implements PipeTransform {
+  constructor(private layerStateService: LayerStateService) { }
+
+  transform(vectorLayer: VectorLayer | undefined): PathLayer[] {
+    return getPathLayerList(vectorLayer);
+  }
+}
+
+function getPathLayerList(vectorLayer: VectorLayer | undefined) {
+  const pathLayers: PathLayer[] = [];
+  if (vectorLayer) {
+    vectorLayer.walk((layer => {
+      if (layer instanceof PathLayer) {
+        pathLayers.push(layer);
+      }
+    }));
+  }
+  return pathLayers;
+}

src/app/splitter/splitter.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener } from '@angular/core';
+import { Component, ElementRef, HostListener, ChangeDetectionStrategy } from '@angular/core';
 import { Point } from '../scripts/common';
 import * as $ from 'jquery';
 
@@ -8,7 +8,8 @@ const MIN_PARENT_HEIGHT = 40;
 @Component({
   selector: 'app-splitter',
   templateUrl: './splitter.component.html',
-  styleUrls: ['./splitter.component.scss']
+  styleUrls: ['./splitter.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SplitterComponent {
   private downPoint: Point;

src/app/toolbar/toolbar.component.ts

@@ -254,11 +254,6 @@ export class ToolbarComponent implements OnInit {
         ]);
       });
   }
-
-  // TODO: display an in-app help dialog instead of redirecting to the GitHub README
-  onHelpClick() {
-    this.dialogsService.help(this.viewContainerRef);
-  }
 }
 
 function downloadFile(content: Blob, fileName: string) {