Add readme to Angular/SVG sample, add comments

Author: rstropek

Diff for: AngularSvg/readme.md

@@ -0,0 +1,44 @@
+# Angular and SVG
+
+## Introduction
+
+This sample has originally been developed for [*Magdeburger Dev Days*](https://md-devdays.de/) 2018. The goal is to show how to use SVG in Angular projects.
+
+## Demo Checklist
+
+### SVG Recap
+
+The goal of this project is *not* to do a general SVG introduction. However, some people might not be that familiar with SVG. Therefore, use [*whats-svg.component.html*](src/app/whats-svg/whats-svg.component.html) to recap the SVG concepts that one needs to understand to be able to follow the Angular-related part of that talk.
+
+* External vs. internal SVG sources - internal sources are important for Angular
+* Style SVG with CSS
+* How to work with [transforms](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform)
+* Animate SVG with CSS, discuss other options for animations
+* [Dashed lines](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) in SVG
+* [Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) and arcs
+
+### Binding
+
+Use [*attr-binding.component.html*](src/app/attr-binding/attr-binding.component.html) to discuss binding topics.
+
+* [Attribute binding](https://angular.io/guide/template-syntax#attribute-binding) instead of property binding
+* Show that event binding just works
+* Demonstrate the combination of CSS styling of SVG, [class binding](https://angular.io/guide/template-syntax#class-binding), and Angular to build a simple SVG-based control with clear view/logic separation
+
+### Building SVG-based Components
+
+The component in [*budget-chart.component.ts*](src/app/attr-selector/budget-chart/budget-chart.component.ts) shows how to build an SVG-based Angular directive.
+
+* Use of attribute selector in component
+* `svg:` namespace for identifying SVG elements in Angular templates
+* `@Input` decorator for inpupt parameters
+* `:host ::ng-deep` in CSS (see [*project-list.component.css*](src/app/attr-selector/project-list/project-list.component.css))
+* Use component in parent SVG (see [*project-list.component.html*](src/app/attr-selector/project-list/project-list.component.html)) including data binding in a structural directive
+
+### Animations
+
+The last sample brings everything together. It implements a silo element in a ficticious IoT visualization library. The element [*silo*](src/app/iot/silo) is a reusable component, uses Angular animations and supports context menus.
+
+* Context menu with [*ngx-contextmenu*](https://github.com/isaacplmann/ngx-contextmenu/)
+* Use of [Angular Animations](https://angular.io/guide/animations) with SVG
+* Using the component in a parent view (see [*animation.component.ts*](src/app/animation/animation.component.ts))

Diff for: AngularSvg/src/app/animation/animation.component.ts

@@ -6,19 +6,27 @@ import { Component, OnInit } from '@angular/core';
     <h1 class="mat-headline">Animation</h1>
 
     <svg id="silo" width="152" height="122">
-        <g app-silo />
+        <g class="critical" app-silo [fill]="30" [maxFill]="100" />
+        <g class="ok" app-silo [fill]="75" [maxFill]="100" transform="translate(75, 0)" />
     </svg>
   `,
   styles: [`
-  :host >>> .silo-fill {
+  :host >>> .critical .silo-fill {
     fill: red;
-  }`]
-})
-export class AnimationComponent implements OnInit {
+  }
 
-  constructor() { }
+  :host >>> .critical .material-flow {
+    stroke: red;
+  }
 
-  ngOnInit() {
+  :host >>> .ok .silo-fill {
+    fill: green;
   }
 
+  :host >>> .ok .material-flow {
+    stroke: green;
+  }
+`]
+})
+export class AnimationComponent {
 }

Diff for: AngularSvg/src/app/attr-selector/budget-chart/budget-chart.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
+  // Note the attribute selector here. This is necessary because Angular
+  // would otherwise destroy the SVG code by adding an unknown element.
   selector: '[app-budget-chart]',
   template: `
     <svg:line x1="0" y1="5" [attr.x2]="width" y2="5" class="background-line" />

Diff for: AngularSvg/src/app/iot/silo/silo.component.html

@@ -1,19 +1,19 @@
 <svg:g [contextMenu]="openCloseMenu">
     <g class="silo-fill">
-        <svg:rect x="1" y="15" width="49" height="65" stroke="none" />
-        <svg:path [@fill]="isOpen ? 'open' : 'closed'" d="M10,75 l15,15 l15,-15z" />
+        <rect x="1" [attr.y]="convertToSize(maxFill - fill)" width="49" [attr.height]="convertToSize(fill)" stroke="none" />
+        <path [@fill]="openingState" d="M10,75 l15,15 l15,-15z" />
     </g>
 </svg:g>
 
 <svg:path d="M5,80 H0 V0 H50 V80 h-5" fill="none" stroke="black" transform="translate(0.5, 0.5)" />
 
-<svg:path [@flapStateLeft]="isOpen ? 'open' : 'closed'" d="M25,90 l-10,-10 h-12.5" fill="none" stroke="black" />
-<svg:path [@flapStateRight]="isOpen ? 'open' : 'closed'" d="M25,90 l10,-10 h12.5" fill="none" stroke="black" />
-<svg:line [@materialFlow]="isOpen ? 'open' : 'closed'" x1="25" y1="75" x2="25" y2="125" stroke-width="4" stroke="red" stroke-dasharray="5, 3" />
+<svg:path [@flapStateLeft]="openingState" d="M25,90 l-10,-10 h-12.5" fill="none" stroke="black" />
+<svg:path [@flapStateRight]="openingState" d="M25,90 l10,-10 h12.5" fill="none" stroke="black" />
+<svg:line [@materialFlow]="openingState" x1="25" y1="75" x2="25" y2="125" class="material-flow" stroke-width="4" stroke-dasharray="5, 3" />
 
 <context-menu #openCloseMenu>
     <ng-template contextMenuItem (execute)="toggleFlap()">
-        {{ isOpen ? 'Close' : 'Open' }}
+        {{ openingState == 'open' ? 'Close' : 'Open' }}
     </ng-template>
     <ng-template contextMenuItem>
         Something else...

Diff for: AngularSvg/src/app/iot/silo/silo.component.ts

@@ -1,5 +1,5 @@
 import {animate, state, style, transition, trigger} from '@angular/animations';
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, Input} from '@angular/core';
 
 @Component({
   selector: '[app-silo]',
@@ -13,8 +13,8 @@ import {Component, OnInit} from '@angular/core';
       state('closed', style({
         transform: 'translate(0, 0.5px)'
       })),
-      transition('open => closed', animate('200ms ease-in')),
-      transition('closed => open', animate('200ms ease-out'))
+      transition('open => closed', animate('400ms ease-in')),
+      transition('closed => open', animate('400ms ease-out'))
     ]),
     trigger('flapStateRight', [
       state('open', style({
@@ -23,8 +23,8 @@ import {Component, OnInit} from '@angular/core';
       state('closed', style({
         transform: 'translate(0, 0.5px)'
       })),
-      transition('open => closed', animate('200ms ease-in')),
-      transition('closed => open', animate('200ms ease-out'))
+      transition('open => closed', animate('400ms ease-in')),
+      transition('closed => open', animate('400ms ease-out'))
     ]),
     trigger('fill', [
       state('open', style({
@@ -33,8 +33,8 @@ import {Component, OnInit} from '@angular/core';
       state('closed', style({
         transform: 'translate(0, 0px)'
       })),
-      transition('open => closed', animate('200ms ease-in')),
-      transition('closed => open', animate('200ms ease-out'))
+      transition('open => closed', animate('400ms ease-in')),
+      transition('closed => open', animate('400ms ease-out'))
     ]),
     trigger('materialFlow', [
       state('open', style({
@@ -43,15 +43,22 @@ import {Component, OnInit} from '@angular/core';
       state('closed', style({
         opacity: 0
       })),
-      transition('open => closed', animate('200ms ease-in')),
-      transition('closed => open', animate('200ms ease-out'))
+      transition('open => closed', animate('400ms ease-in')),
+      transition('closed => open', animate('400ms ease-out'))
     ])
   ]
 })
 export class SiloComponent {
-  public isOpen: boolean = false;
+  public openingState = 'closed';
 
   public toggleFlap() {
-    this.isOpen = !this.isOpen;
+    this.openingState = (this.openingState == 'open') ? 'closed' : 'open';
+  }
+
+  @Input() maxFill: number = 150;
+  @Input() fill: number = 0;
+
+  convertToSize(fill: number): number {
+    return fill * 80 / this.maxFill;
   }
 }