#4 added option to change the play speed

package.json

@@ -25,6 +25,7 @@
     "@angular/service-worker": "^7.1.1",
     "core-js": "^2.4.1",
     "d3": "^5.7.0",
+    "ng5-slider": "^1.1.11",
     "ngx-clipboard": "^11.1.9",
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.0.0-rc.0",

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { SceneComponent } from './scene/scene.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import {AppService} from './app.service';
 import { ClipboardModule } from 'ngx-clipboard';
+import { Ng5SliderModule } from 'ng5-slider';
 import { PropertyComponentComponent } from './property-inspector/property-component/property-component.component';
 import { ContainerComponent } from './container/container.component';
 import { HeaderComponent } from './container/header/header.component';
@@ -36,6 +37,7 @@ import { environment } from '../environments/environment';
     FormsModule,
     HttpModule,
     ClipboardModule,
+    Ng5SliderModule,
     FlexLayoutModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
   ],

src/app/app.service.ts

@@ -5,12 +5,17 @@ import {Operator} from './operator';
 import {DiagramNode} from './scene/diagram-node';
 import resultAnimator from './scene/result-animator';
 import {DiagramEdge} from './scene/diagram-edge';
+import {Subscribe} from './node-types';
+import {zip} from 'rxjs';
+import {take} from 'rxjs/operators';
+import {Observable} from 'rxjs/Observable';
 
 @Injectable()
 export class AppService {
   private selectedCreationOption: any;
   private selectItemSubject: Subject<Operator>;
   private controlSubject: Subject<string>;
+  private animationHasFinished: Boolean = false;
 
   private nodesList: Array<DiagramNode> = [];
   private edgeList: Array<DiagramEdge> = [];
@@ -62,7 +67,7 @@ export class AppService {
     const xLoc = window.innerWidth / (window.innerWidth < 600 ? 2 : 3);
     const yLoc = 100;
     const nodes = [
-      {id: 0, x: xLoc, y: yLoc, node_type: 'Create', properties: {list: [{time: 0, value: 1}]}},
+      {id: 0, x: xLoc, y: yLoc, node_type: 'Create', properties: {items: [{time: 0, value: 1}]}},
       {id: 1, x: xLoc, y: yLoc + 200, node_type: 'Subscribe', properties: {}}
     ];
     const edges = [{source: 0, target: 1}];
@@ -74,13 +79,15 @@ export class AppService {
   }
   public set delay(value) {
     GraphCreator.animateTime = value;
-    this.refreshRxObjects();
+    if (this.animationHasFinished) {
+      this.refreshRxObjects();
+    }
   }
 
-
   public refreshRxObjects() {
     const nodes = this.nodesList;
     const edges = this.edgeList;
+    this.animationHasFinished = false;
 
     // DISPOSE created rx objects
     for (const node of nodes) {
@@ -115,5 +122,15 @@ export class AppService {
         }
       }
     }
+
+    const finishSubjects: Array<Subject<object>> = nodes
+      .filter(n => n.data.title === 'Subscribe')
+      .map(subscribeNode => (subscribeNode.data as Subscribe).finishSubject);
+
+    zip(...finishSubjects).pipe(take(1)).subscribe(() => {
+      resultAnimator.hasFinished.pipe(take(1)).subscribe(() => {
+        this.animationHasFinished = true;
+      });
+    });
   }
 }

src/app/container/container.component.html

@@ -4,12 +4,18 @@
     <div fxFlex class="sceneContainer">
       <button (click)="showCreationMenuToggle()" [class.active]="showCreationMenu" title="Tools (shortcut : Shift)" class="add">
         <svg id="Layer_1" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.74 44.75"><title>Tools (shortcut : Shift)</title><path d="M682.37,362a22.38,22.38,0,1,0,22.37,22.37A22.4,22.4,0,0,0,682.37,362Zm0,40.59a18.22,18.22,0,1,1,18.22-18.22,18.24,18.24,0,0,1-18.22,18.22Zm0,0" transform="translate(-660 -362)"/><path d="M692.64,382.47h-8.37V374.1a1.9,1.9,0,1,0-3.8,0v8.37H672.1a1.9,1.9,0,0,0,0,3.8h8.37v8.37a1.9,1.9,0,0,0,3.8,0v-8.37h8.37a1.9,1.9,0,0,0,0-3.8Zm0,0" transform="translate(-660 -362)"/></svg>
-        <!--<i class="material-icons">add</i>-->
       </button>
       <button (click)="replay()" title="Replay(shortcut : Enter)" class="replay">
         <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226 226"><title>Replay(shortcut : Enter)</title><path d="M150.27,108.56,103.34,74.48a5.63,5.63,0,0,0-9,4.56v68.2a5.58,5.58,0,0,0,5.66,5.65,5.59,5.59,0,0,0,3.3-1.1l46.93-34.08a5.56,5.56,0,0,0,2.35-4.55,5.67,5.67,0,0,0-2.35-4.6Zm0,0" transform="translate(0)"/><path d="M113,0A113,113,0,1,0,226,113,113,113,0,0,0,113,0Zm0,207.13A94.13,94.13,0,1,1,207.12,113,94.12,94.12,0,0,1,113,207.13Zm0,0" transform="translate(0)"/></svg>
-        <!--<i class="material-icons">play_circle_outline</i>-->
       </button>
+      <button (click)="showSlider = true" title="Time Setting" class="showTimeSetting">
+        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 29"><title>Play speed</title><path d="M299,286a3,3,0,0,0-2,5.18,12,12,0,1,0,8.46,1.7l.51-.89.43.25.5-.86-.43-.25-.86-.5-.43-.25-.5.86.43.25-.51.88a12.09,12.09,0,0,0-3.52-1.19,3,3,0,0,0-2-5.18Zm0,1a2,2,0,0,1,.5,3.93V290h.5v-1h-2v1h.5v.93A2,2,0,0,1,299,287Zm0,5a10.93,10.93,0,0,1,5.22,1.32l.09.05A11,11,0,1,1,299,292Zm0,1a10,10,0,1,0,10,10,10,10,0,0,0-10-10Zm0,1a9,9,0,1,1-9,9,9,9,0,0,1,9-9Zm0,1a.5.5,0,1,0,.5.5.5.5,0,0,0-.5-.5Zm-3.76,1a.5.5,0,0,0-.24.06.5.5,0,0,0-.18.68.5.5,0,1,0,.42-.75Zm7.49,0a.48.48,0,0,0-.41.24.5.5,0,1,0,.86.5.5.5,0,0,0-.18-.68.43.43,0,0,0-.27-.06Zm-4.23,1v4.59a1.5,1.5,0,1,0,1,0V297Zm-6,1.75a.51.51,0,0,0-.41.25.5.5,0,0,0,.18.68.5.5,0,1,0,.5-.86.52.52,0,0,0-.27-.07Zm13,0a.39.39,0,0,0-.23.07.5.5,0,1,0,.68.18.52.52,0,0,0-.45-.25Zm-14,3.75a.5.5,0,1,0,.5.5.5.5,0,0,0-.5-.5Zm7.5,0a.5.5,0,1,1-.5.5.5.5,0,0,1,.5-.5Zm7.5,0a.5.5,0,1,0,.5.5.5.5,0,0,0-.5-.5Zm-14,3.75a.44.44,0,0,0-.24.07.5.5,0,1,0,.24-.07Zm13,0a.5.5,0,0,0-.22.93.5.5,0,1,0,.5-.86.55.55,0,0,0-.28-.07ZM295.23,309a.5.5,0,0,0-.23.93.5.5,0,0,0,.68-.18.49.49,0,0,0-.45-.75Zm7.51,0a.5.5,0,1,0,.26.93.5.5,0,0,0,.18-.68.48.48,0,0,0-.44-.25ZM299,310a.5.5,0,1,0,.5.5.5.5,0,0,0-.5-.5Zm0,0" transform="translate(-287 -286)"/></svg>
+      </button>
+      <div class="slider-container" *ngIf="showSlider">
+        <span class="close" (click)="showSlider=false">&times;</span>
+        <b>Player speed</b>
+        <ng5-slider (userChange)="sliderChanged()" [(value)]="speed.value" [options]="speed.options"></ng5-slider>
+      </div>
       <rxstudio-scene fxFlex></rxstudio-scene>
       <rxstudio-creation-menu (onSelect)="showCreationMenu=false" *ngIf="showCreationMenu"></rxstudio-creation-menu>
     </div>

src/app/container/container.component.scss

@@ -4,7 +4,10 @@
   height:100%;
   padding:0;
   overflow: hidden;
-
+  .close{
+    cursor: pointer;
+    float: right;
+  }
   .sceneContainer {
     position: relative;
     border:1px solid $borderColor;
@@ -13,6 +16,14 @@
       height: 100%;
       position: absolute;
     }
+    .slider-container{
+      width: 300px;
+      right: 0;
+      position: absolute;
+      top: 0;
+      background: white;
+      z-index: 1;
+    }
     button {
       border: none;
       border-radius: 50%;
@@ -29,10 +40,14 @@
       -ms-transition: padding 0.3s;
       -o-transition: padding 0.3s;
       transition: padding 0.3s;
-      &:hover{
-        //color:lighten($primaryColor, 10%);
-        fill:$primaryColor;
-        padding: 0rem;
+      &.showTimeSetting{
+        right: 0;
+        top: 0;
+        padding: 4px;
+        height: 1.6rem;
+        box-sizing: border-box;
+        width: 1.6rem;
+        border-radius: 16px;
       }
       &.replay{
         right: 1rem;
@@ -45,6 +60,12 @@
         right: 1rem;
         bottom: 1rem;
       }
+      &:hover{
+        //color:lighten($primaryColor, 10%);
+        fill:$primaryColor;
+        padding: 0rem;
+      }
+
     }
   }
   rxstudio-creation-menu{

src/app/container/container.component.ts

@@ -15,8 +15,20 @@ export class ContainerComponent implements OnInit {
 
   showColdStream;
   showCreationMenu = false;
-
+  showSlider = false;
+  speed = {
+    value: 6,
+    options: {
+      floor: 1,
+      ceil: 10
+    }
+  }
   constructor(private appService: AppService, private route: ActivatedRoute) {
+    this.sliderChanged();
+  }
+
+  sliderChanged () {
+    this.appService.delay = Math.ceil(Math.pow(1.24, this.speed.value * 3 + 10));
   }
 
   @HostListener('window:keyup', ['$event'])

src/app/node-types/create.ts

@@ -9,35 +9,38 @@ export class Create extends RxNode {
   protected static maxInput = 0;
   protected static minInput = 0;
 
-  // protected static propertiesType = [{name:'list',type: 'list', params:[{name:'time',type:'Number'},{name:'value',type:'Number'}]}];
-  protected static propertiesType = new PropertyType('list', PropertyTypeEnum.List,
+  protected static propertiesType = new PropertyType('items', PropertyTypeEnum.List,
     new PropertyType('', PropertyTypeEnum.Object, [
       new PropertyType('time', PropertyTypeEnum.Number),
       new PropertyType('value', PropertyTypeEnum.Number)
     ], '')
   , '');
 
   public properties = {
-    list: [
+    items: [
       {time: 0, value: 1}
     ]
   };
   public graphInputs = [];
 
   public runner = () => {
-    const delay = (observer, delayTime, value) => {
+    const delay = (observer, delayTime, value, isLastOne) => {
       setTimeout(() => {
         observer.next(value);
+        if (isLastOne) {
+          observer.complete();
+        }
       }, delayTime || 0);
     };
     return Observable.create((observer) => {
-      for (const l of this.properties.list) {
-        delay(observer, l.time, l.value);
+      const maxTimeItem = this.properties.items.reduce((max, item) => max.time <= item.time ? item : max, {time: 0});
+      for (const item of this.properties.items) {
+        delay(observer, item.time, item.value, maxTimeItem === item);
       }
     });
   }
   public toString = () => {
-    const list = this.properties.list;
+    const list = this.properties.items;
     const getNext = ({value, time}) => {
       return time ? `setTimeout(function(){ observer.next(${value});}, ${time})` : `observer.next(${value});`;
     };

src/app/node-types/rxNode.ts

@@ -55,7 +55,7 @@ export class RxNode implements Operator {
           timeoutStep = level;
         }
       }
-      resultAnimator.add(<Result>{node, numberInfo: xx, timeoutStep});
+      resultAnimator.add(<Result>{node, numberInfo: xx, timeoutStep, });
       return xx;
     }));
     this.level = level;

src/app/node-types/subscribe.ts

@@ -1,6 +1,7 @@
 import {RxNode} from './rxNode';
 import {map} from 'rxjs/operators';
 import {NumberInfo} from '../scene/number-info';
+import {Subject} from 'rxjs/Subject';
 
 export class Subscribe extends RxNode {
   protected static title = 'Subscribe';
@@ -12,6 +13,7 @@ export class Subscribe extends RxNode {
 
   public properties = {};
   public graphInputs = [];
+  public finishSubject = new Subject();
 
   public runner = () => {
     // const thisObservable = this.graphInputs[0];
@@ -20,16 +22,13 @@ export class Subscribe extends RxNode {
       return x;
     }));
     setTimeout(() => {
-      this.rxo = this.rx.subscribe(
-        function (x) {
-          console.log('Next: %s', x);
-        }, /* on next*/
-        function (err) {
-          console.log('Error: %s', err);
-        }, /* on error*/
-        function () {
-          console.log('Completed');
-          /* on complete*/
+      this.rxo = this.rx.subscribe((x) => {
+          console.log('asc');
+        },
+        (err) => {
+          // TODO: show errors in properties
+        }, () => {
+          this.finishSubject.next({finished: true});
         });
     });
     return thisObservable;

src/app/scene/result-animator.ts

@@ -1,18 +1,19 @@
 import {ResultPath} from './result-path';
 import {Result} from './result';
-import {timer} from 'rxjs';
 import {Subject} from 'rxjs/Subject';
 
 class ResultAnimator {
   resultPathArray: Array<ResultPath>;
   resultChanged = new Subject();
-  subscription;
+  hasFinished = new Subject();
+  timeoutRef;
 
   constructor() {
     this.reset();
   }
 
   add (res: Result) {
+    res.lastTicks = 0;
     const matchedNumInfo = this.resultPathArray.find(resPath => (resPath.id === res.numberInfo.id));
     if (matchedNumInfo) {
       matchedNumInfo.add(res);
@@ -35,12 +36,18 @@ class ResultAnimator {
       .map(resultPath => resultPath.getThisClockResult())
       .filter(result => !!result);
     this.resultChanged.next(resultArray);
-    this.subscription = setTimeout(() => this.tick(true, delay), delay);
+    this.timeoutRef = setTimeout(() => this.tick(true, delay), delay);
+    const hasFinished = this.resultPathArray.length && this.resultPathArray.reduce((acc, result) => {
+      return result.hasFinished() && acc;
+    }, true);
+    if (hasFinished) {
+      this.hasFinished.next({finished: true});
+    }
   }
 
   stop() {
-    if (this.subscription) {
-      clearTimeout(this.subscription);
+    if (this.timeoutRef) {
+      clearTimeout(this.timeoutRef);
     }
   }
 }

src/app/scene/result-path.ts

@@ -13,6 +13,10 @@ export class ResultPath {
     this.path.push(next);
   }
 
+  hasFinished() {
+    return this.path.length === 1 && this.path[0].lastTicks > 1;
+  }
+
   getThisClockResult() {
     if (this.path.length) {
       if (this.path[0].timeoutStep > 1) {
@@ -21,6 +25,7 @@ export class ResultPath {
         if (this.path.length > 1) {
           return this.path.shift();
         } else {
+          this.path[0].lastTicks++;
           return this.path[0];
         }
       }

src/app/scene/result.ts

@@ -5,4 +5,5 @@ export interface Result {
   numberInfo: NumberInfo;
   node: DiagramNode;
   timeoutStep: number;
+  lastTicks: number;
 }