Skip to content

Commit 281e6e4

Browse files
alexjlockwoodalexjlockwood
committed
fixes #74. onpush ftw
1 parent 96d0f1d commit 281e6e4

12 files changed

+97
-95
lines changed

‎src/app/app.component.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
1+
import {
2+
Component, OnInit, ViewChild, AfterViewInit,
3+
OnDestroy, ElementRef, ChangeDetectionStrategy
4+
} from '@angular/core';
25
import { environment } from '../environments/environment';
36
import { CanvasType } from './CanvasType';
47
import { Subscription } from 'rxjs/Subscription';
@@ -18,7 +21,8 @@ const STORAGE_KEY_FIRST_TIME_USER = 'storage_key_first_time_user';
1821
@Component({
1922
selector: 'app-root',
2023
templateUrl: './app.component.html',
21-
styleUrls: ['./app.component.scss']
24+
styleUrls: ['./app.component.scss'],
25+
changeDetection: ChangeDetectionStrategy.OnPush,
2226
})
2327
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
2428

‎src/app/app.module.ts‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,43 @@ import { HttpModule } from '@angular/http';
55
import { FlexLayoutModule } from '@angular/flex-layout';
66
import { MaterialModule, MdIconRegistry } from '@angular/material';
77

8+
// Components & directives.
89
import { AppComponent } from './app.component';
910
import { CanvasComponent } from './canvas/canvas.component';
10-
import { TimelineComponent } from './timeline/timeline.component';
11-
import { SplitterComponent } from './splitter/splitter.component';
12-
import { InspectorComponent } from './inspector/inspector.component';
13-
import { InspectorItemComponent, SvgCommandPipe } from './inspector/inspectoritem.component';
14-
import { AnimatorService } from './services/animator.service';
15-
import { LayerStateService } from './services/layerstate.service';
16-
import { SelectionStateService } from './services/selectionstate.service';
17-
import { HoverStateService } from './services/hoverstate.service';
18-
import { CanvasResizeService } from './services/canvasresize.service';
1911
import { CanvasRulerDirective } from './canvas/canvasruler.directive';
12+
import { InspectorComponent } from './inspector/inspector.component';
13+
import { InspectorItemComponent } from './inspector/inspectoritem.component';
14+
import { PathSelectorComponent } from './pathselector/pathselector.component';
2015
import { SettingsComponent } from './settings/settings.component';
16+
import { SplitterComponent } from './splitter/splitter.component';
17+
import { TimelineComponent } from './timeline/timeline.component';
2118
import { ToolbarComponent } from './toolbar/toolbar.component';
22-
import { DialogService, HelpDialogComponent, ConfirmDialogComponent, DemoDialogComponent } from './dialogs';
23-
import { SettingsService } from './services/settings.service';
24-
import { PathSelectorComponent } from './pathselector/pathselector.component';
25-
import { IsEqualToPipe, IsNotEqualToPipe } from './pipes';
19+
20+
// Services.
21+
import {
22+
AnimatorService,
23+
CanvasResizeService,
24+
HoverStateService,
25+
LayerStateService,
26+
SelectionStateService,
27+
SettingsService,
28+
} from './services';
29+
30+
// Dialogs.
31+
import {
32+
ConfirmDialogComponent,
33+
DemoDialogComponent,
34+
DialogService,
35+
} from './dialogs';
36+
37+
// Pipes.
38+
import {
39+
IsEqualToPipe,
40+
IsNotEqualToPipe,
41+
} from './pipes';
42+
import { PathLayerListPipe } from './pathselector/pathselector.component';
2643
import { SubPathItemsPipe } from './inspector/inspector.component';
44+
import { SvgCommandPipe } from './inspector/inspectoritem.component';
2745

2846
import 'hammerjs';
2947

@@ -40,12 +58,12 @@ import 'hammerjs';
4058
ToolbarComponent,
4159
PathSelectorComponent,
4260
ConfirmDialogComponent,
43-
HelpDialogComponent,
4461
DemoDialogComponent,
4562
SvgCommandPipe,
4663
IsEqualToPipe,
4764
IsNotEqualToPipe,
4865
SubPathItemsPipe,
66+
PathLayerListPipe,
4967
],
5068
imports: [
5169
BrowserModule,
@@ -65,7 +83,6 @@ import 'hammerjs';
6583
],
6684
entryComponents: [
6785
ConfirmDialogComponent,
68-
HelpDialogComponent,
6986
DemoDialogComponent,
7087
],
7188
bootstrap: [AppComponent]

‎src/app/dialogs/confirmdialog.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ChangeDetectionStrategy } from '@angular/core';
22
import { MdDialogRef } from '@angular/material';
33

44
@Component({
@@ -15,10 +15,11 @@ import { MdDialogRef } from '@angular/material';
1515
<button fxFlexOrder="1" md-button md-dialog-close>Cancel</button>
1616
</md-dialog-actions>`,
1717
styleUrls: ['./confirmdialog.component.scss'],
18+
changeDetection: ChangeDetectionStrategy.OnPush,
1819
})
1920
export class ConfirmDialogComponent {
2021
title = '';
2122
message = '';
2223

23-
constructor(public readonly dialogRef: MdDialogRef<ConfirmDialogComponent>) {}
24+
constructor(public readonly dialogRef: MdDialogRef<ConfirmDialogComponent>) { }
2425
}

‎src/app/dialogs/demodialog.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ChangeDetectionStrategy } from '@angular/core';
22
import { MdDialogRef } from '@angular/material';
33

44
@Component({
@@ -18,12 +18,13 @@ import { MdDialogRef } from '@angular/material';
1818
<button fxFlexOrder="1" md-button md-dialog-close>Cancel</button>
1919
</md-dialog-actions>`,
2020
styleUrls: ['./demodialog.component.scss'],
21+
changeDetection: ChangeDetectionStrategy.OnPush,
2122
})
2223
export class DemoDialogComponent {
2324
private demoTitles_: string[] = [];
2425
selectedDemoTitle: string;
2526

26-
constructor(public readonly dialogRef: MdDialogRef<DemoDialogComponent>) {}
27+
constructor(public readonly dialogRef: MdDialogRef<DemoDialogComponent>) { }
2728

2829
get demoTitles() {
2930
return this.demoTitles_;

‎src/app/dialogs/dialog.service.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Observable } from 'rxjs/Rx';
2-
import { ConfirmDialogComponent, HelpDialogComponent, DemoDialogComponent } from '.';
2+
import { ConfirmDialogComponent, DemoDialogComponent } from '.';
33
import { MdDialog, MdDialogConfig } from '@angular/material';
44
import { Injectable, ViewContainerRef } from '@angular/core';
55

@@ -28,10 +28,4 @@ export class DialogService {
2828
dialogRef.componentInstance.demoTitles = demoTitles;
2929
return dialogRef.afterClosed();
3030
}
31-
32-
help(viewContainerRef: ViewContainerRef) {
33-
const config = new MdDialogConfig();
34-
config.viewContainerRef = viewContainerRef;
35-
return this.dialog.open(HelpDialogComponent, config).afterClosed();
36-
}
3731
}

‎src/app/dialogs/helpdialog.component.scss‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/app/dialogs/helpdialog.component.ts‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/app/dialogs/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ConfirmDialogComponent } from './confirmdialog.component';
2-
import { HelpDialogComponent } from './helpdialog.component';
32
import { DialogService } from './dialog.service';
43
import { DemoDialogComponent } from './demodialog.component';
5-
export { ConfirmDialogComponent, HelpDialogComponent, DialogService, DemoDialogComponent };
4+
export { ConfirmDialogComponent, DialogService, DemoDialogComponent };

‎src/app/pathselector/pathselector.component.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div fxLayout="row" class="path-selector-container">
2-
<div *ngIf="!!getPathList(CANVAS_START).length" class="path-selector-list"
3-
fxFlex>
4-
<div *ngFor="let pathLayer of getPathList(CANVAS_START);
2+
<div *ngIf="!!(startVectorLayerObservable | async | toPathLayerList).length"
3+
class="path-selector-list" fxFlex>
4+
<div *ngFor="let pathLayer of (startVectorLayerObservable | async | toPathLayerList);
55
let idx = index;
66
trackBy: trackPathLayer">
77
<div class="path-selector-listitem" [class.is-selected]="getActivePathId(CANVAS_START) === pathLayer.id"
@@ -10,10 +10,10 @@
1010
</div>
1111
</div>
1212
</div>
13-
<div class="border" *ngIf="getPathList(CANVAS_START).length || getPathList(CANVAS_END).length"></div>
14-
<div *ngIf="!!getPathList(CANVAS_END).length" class="path-selector-list"
15-
fxFlex>
16-
<div *ngFor="let pathLayer of getPathList(CANVAS_END);
13+
<div class="border" *ngIf="(startVectorLayerObservable | async | toPathLayerList).length || (endVectorLayerObservable | async | toPathLayerList).length"></div>
14+
<div *ngIf="!!(endVectorLayerObservable | async | toPathLayerList).length"
15+
class="path-selector-list" fxFlex>
16+
<div *ngFor="let pathLayer of (endVectorLayerObservable | async | toPathLayerList);
1717
let idx = index;
1818
trackBy: trackPathLayer">
1919
<div class="path-selector-listitem" [class.is-selected]="getActivePathId(CANVAS_END) === pathLayer.id"
@@ -22,14 +22,14 @@
2222
</div>
2323
</div>
2424
</div>
25-
<div *ngIf="!getPathList(CANVAS_START).length && !getPathList(CANVAS_END).length"
25+
<div *ngIf="!(startVectorLayerObservable | async | toPathLayerList).length && !(endVectorLayerObservable | async | toPathLayerList).length"
2626
class="path-selector-empty" fxLayout="column" fxLayoutAlign="center center"
2727
fxFlex>
2828
<input type="file" accept=".svg" id="start-input-file-id" (change)="onSvgFileChosen(($event.target || $event.srcElement).files)"
2929
multiple>
3030
<label for="start-input-file-id">Import 2 SVGs to get started<br>(or load a demo in the top right menu)</label>
3131
</div>
32-
<div *ngIf="!(!!getPathList(CANVAS_START).length && !!getPathList(CANVAS_END).length) && !(!getPathList(CANVAS_START).length && !getPathList(CANVAS_END).length)"
32+
<div *ngIf="!(!!(startVectorLayerObservable | async | toPathLayerList).length && !!(endVectorLayerObservable | async | toPathLayerList).length) && !(!(startVectorLayerObservable | async | toPathLayerList).length && !(endVectorLayerObservable | async | toPathLayerList).length)"
3333
class="path-selector-empty" fxLayout="column" fxLayoutAlign="center center"
3434
fxFlex>
3535
<input type="file" accept=".svg" id="end-input-file-id" (change)="onSvgFileChosen(($event.target || $event.srcElement).files)"

‎src/app/pathselector/pathselector.component.ts‎

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
1-
import { Component, ElementRef } from '@angular/core';
1+
import {
2+
Component, ElementRef, ChangeDetectionStrategy,
3+
Pipe, PipeTransform
4+
} from '@angular/core';
25
import { CanvasType } from '../CanvasType';
36
import { LayerStateService } from '../services/layerstate.service';
47
import { SvgLoader } from '../scripts/import';
58
import { VectorLayer, PathLayer } from '../scripts/layers';
9+
import { Observable } from 'rxjs/Observable';
610

711
@Component({
812
selector: 'app-pathselector',
913
templateUrl: './pathselector.component.html',
10-
styleUrls: ['./pathselector.component.scss']
14+
styleUrls: ['./pathselector.component.scss'],
15+
changeDetection: ChangeDetectionStrategy.OnPush,
1116
})
1217
export class PathSelectorComponent {
1318
CANVAS_START = CanvasType.Start;
1419
CANVAS_END = CanvasType.End;
1520

21+
private readonly startVectorLayerObservable: Observable<VectorLayer>;
22+
private readonly endVectorLayerObservable: Observable<VectorLayer>;
23+
1624
constructor(
1725
private elementRef: ElementRef,
18-
private layerStateService: LayerStateService) { }
26+
private layerStateService: LayerStateService) {
27+
this.startVectorLayerObservable =
28+
this.layerStateService.getVectorLayerObservable(CanvasType.Start);
29+
this.endVectorLayerObservable =
30+
this.layerStateService.getVectorLayerObservable(CanvasType.End);
31+
}
1932

2033
private setVectorLayer(canvasType: CanvasType, vectorLayer: VectorLayer) {
2134
const canvasTypes = [canvasType];
@@ -28,27 +41,14 @@ export class PathSelectorComponent {
2841
canvasTypes.push(CanvasType.Preview);
2942
}
3043
this.layerStateService.setVectorLayer(canvasType, vectorLayer, false);
31-
const pathLayers = this.getPathList(canvasType);
44+
const pathLayers = getPathLayerList(this.layerStateService.getVectorLayer(canvasType));
3245
if (pathLayers.length) {
3346
// Auto-select the first path.
3447
this.setActivePathId(canvasType, pathLayers[0].id);
3548
}
3649
canvasTypes.forEach(type => this.layerStateService.notifyChange(type));
3750
}
3851

39-
getPathList(canvasType: CanvasType) {
40-
const vectorLayer = this.layerStateService.getVectorLayer(canvasType);
41-
const pathLayers: PathLayer[] = [];
42-
if (vectorLayer) {
43-
vectorLayer.walk((layer => {
44-
if (layer instanceof PathLayer) {
45-
pathLayers.push(layer);
46-
}
47-
}));
48-
}
49-
return pathLayers;
50-
}
51-
5252
getActivePathId(canvasType: CanvasType) {
5353
return this.layerStateService.getActivePathId(canvasType);
5454
}
@@ -81,7 +81,7 @@ export class PathSelectorComponent {
8181
const canvasTypes = [CanvasType.Start, CanvasType.End];
8282
const availableEmptyListSlots: CanvasType[] = [];
8383
for (let i = 0; i < canvasTypes.length; i++) {
84-
if (!this.getPathList(canvasTypes[i]).length) {
84+
if (!getPathLayerList(this.layerStateService.getVectorLayer(canvasTypes[i])).length) {
8585
availableEmptyListSlots.push(canvasTypes[i]);
8686
}
8787
}
@@ -136,3 +136,24 @@ export class PathSelectorComponent {
136136
});
137137
}
138138
}
139+
140+
@Pipe({ name: 'toPathLayerList' })
141+
export class PathLayerListPipe implements PipeTransform {
142+
constructor(private layerStateService: LayerStateService) { }
143+
144+
transform(vectorLayer: VectorLayer | undefined): PathLayer[] {
145+
return getPathLayerList(vectorLayer);
146+
}
147+
}
148+
149+
function getPathLayerList(vectorLayer: VectorLayer | undefined) {
150+
const pathLayers: PathLayer[] = [];
151+
if (vectorLayer) {
152+
vectorLayer.walk((layer => {
153+
if (layer instanceof PathLayer) {
154+
pathLayers.push(layer);
155+
}
156+
}));
157+
}
158+
return pathLayers;
159+
}

0 commit comments

Comments
 (0)