add drag/drop svg text

package.json

@@ -54,7 +54,7 @@
     "zone.js": "^0.8.16"
   },
   "devDependencies": {
-    "@angular/cli": "^1.2.6",
+    "@angular/cli": "^1.2.7",
     "@angular/compiler-cli": "^4.3.3",
     "@angular/language-service": "^4.3.3",
     "@types/es6-promise": "0.0.32",

src/app/components/canvas/canvas.component.ts

@@ -60,9 +60,7 @@ export class CanvasComponent extends CanvasLayoutMixin(DestroyableMixin())
   ngAfterViewInit() {
     const activeViewport$ = this.store
       .select(getVectorLayer)
-      .map(vl => {
-        return { w: vl.width, h: vl.height };
-      })
+      .map(vl => ({ w: vl.width, h: vl.height }))
       .distinctUntilChanged((x, y) => _.isEqual(x, y));
     this.registerSubscription(
       Observable.combineLatest(this.canvasBounds$, activeViewport$)

src/app/components/layertimeline/_layertimeline-theme.scss

@@ -36,6 +36,9 @@
                 }
             }
         }
+        .slt-layers-empty {
+            color: mat-color($foreground, disabled-text);
+        }
         .slt-timeline {
             .slt-timeline-animation {
                 box-shadow: 4px 0 0 mat-color(mat-palette($mat-grey, 500)), -4px 0 0 mat-color(mat-palette($mat-grey, 500));

src/app/components/layertimeline/layertimeline.component.html

@@ -171,6 +171,10 @@
             'top': dragData.top + 'px'
           }">
         </div>
+        <div class="slt-layers-empty"
+          *ngIf="model.vectorLayer.children.length === 0">
+          To get started, drag + drop an SVG file here
+        </div>
       </div>
     </div>
 

src/app/components/layertimeline/layertimeline.component.scss

@@ -102,6 +102,12 @@
             }
         }
     }
+    .slt-layers-empty {
+        padding: 32px;
+        text-align: center;
+        font-size: 14px;
+        line-height: 20px;
+    }
     .slt-timeline {
         overflow-x: auto;
         overflow-y: hidden;