fixes #75 and fixes #76

src/app/canvas/canvas.component.ts

@@ -56,7 +56,6 @@ export class CanvasComponent implements AfterViewInit, OnDestroy {
   @ViewChild('renderingCanvas') private renderingCanvasRef: ElementRef;
   @ViewChildren(CanvasRulerDirective) canvasRulers: QueryList<CanvasRulerDirective>;
 
-  private vectorLayer: VectorLayer;
   // TODO: make use of this variable (i.e. only show labeled points for active path, etc.)
   private activePathId: string;
   private cssContainerWidth = 1;
@@ -97,8 +96,7 @@ export class CanvasComponent implements AfterViewInit, OnDestroy {
     this.subscriptions.push(
       this.layerStateService.getVectorLayerObservable(this.canvasType)
         .subscribe(vl => {
-          this.vectorLayer = vl;
-          this.shouldDrawLayer = !!this.vectorLayer && !!this.activePathId;
+          this.shouldDrawLayer = !!vl && !!this.activePathId;
           const newWidth = vl ? vl.width : DEFAULT_VIEWPORT_SIZE;
           const newHeight = vl ? vl.height : DEFAULT_VIEWPORT_SIZE;
           const didSizeChange = this.vlWidth !== newWidth || this.vlHeight !== newHeight;
@@ -238,6 +236,10 @@ export class CanvasComponent implements AfterViewInit, OnDestroy {
     this.subscriptions.forEach(s => s.unsubscribe());
   }
 
+  get vectorLayer() {
+    return this.layerStateService.getVectorLayer(this.canvasType);
+  }
+
   private resizeAndDraw() {
     if (!this.isViewInit) {
       return;

src/app/pathselector/pathselector.component.ts

@@ -59,7 +59,9 @@ export class PathSelectorComponent {
     // Always notify the preview layer in case the morphability status changed.
     const ids = [{ type: canvasType, pathId: activePathId }];
     if (canvasType === CanvasType.Start) {
-      ids.push({ type: CanvasType.Preview, pathId: activePathId });
+      // Set the preview layer id before the start/end layer id to ensure
+      // that auto-conversion runs properly.
+      ids.unshift({ type: CanvasType.Preview, pathId: activePathId });
     }
     this.layerStateService.setActivePathIds(ids);
   }

src/app/scripts/commands/PathImpl.ts

@@ -206,39 +206,41 @@ class PathImpl implements Path {
 
   // Implements the Path interface.
   isMorphableWith(path: Path) {
-    const scmds1 = this.getSubPaths();
-    const scmds2 = path.getSubPaths();
-    return scmds1.length === scmds2.length
-      && scmds1.every((_, i) =>
-        scmds1[i].getCommands().length === scmds2[i].getCommands().length
-        && scmds1[i].getCommands().every((__, j) =>
-          scmds1[i].getCommands()[j].svgChar === scmds2[i].getCommands()[j].svgChar));
+    const cmds1 = this.getCommands();
+    const cmds2 = path.getCommands();
+    return cmds1.length === cmds2.length
+      && cmds1.every((cmd1, i) => cmd1.svgChar === cmds2[i].svgChar);
   }
 
   // Implements the Path interface.
   interpolate(start: Path, end: Path, fraction: number): Path {
     if (!this.isMorphableWith(start) || !this.isMorphableWith(end)) {
       return this;
     }
-    const commands: Command[] = [];
-    this.getSubPaths().forEach((subCmd, i) => {
-      subCmd.getCommands().forEach((cmd, j) => {
-        const cmd1 = start.getSubPaths()[i].getCommands()[j];
-        const cmd2 = end.getSubPaths()[i].getCommands()[j];
-        const points: Point[] = [];
-        for (let k = 0; k < cmd1.points.length; k++) {
-          const p1 = cmd1.points[k];
-          const p2 = cmd2.points[k];
-          if (p1 && p2) {
-            const px = MathUtil.lerp(p1.x, p2.x, fraction);
-            const py = MathUtil.lerp(p1.y, p2.y, fraction);
-            points.push(new Point(px, py));
-          }
-        }
-        commands.push(new CommandImpl(cmd.svgChar, points, cmd.isSplit));
-      });
-    });
-    return new PathImpl(commands);
+    return new PathImpl(
+      _.zipWith<Command>(
+        start.getCommands(),
+        this.getCommands(),
+        end.getCommands(),
+        (startCmd: Command, currCmd: Command, endCmd: Command) => {
+          return new CommandImpl(
+            currCmd.svgChar,
+            _.zipWith<Point>(
+              startCmd.points,
+              currCmd.points,
+              endCmd.points,
+              (startPt: Point, currPt: Point, endPt: Point) => {
+                if (!startPt || !currPt || !endPt) {
+                  // The 'start' point of the first Move command in a path
+                  // will be undefined. Skip it.
+                  return undefined;
+                }
+                return new Point(
+                  MathUtil.lerp(startPt.x, endPt.x, fraction),
+                  MathUtil.lerp(startPt.y, endPt.y, fraction));
+              }),
+            currCmd.isSplit);
+        }));
   }
 
   // Implements the Path interface.