Add support for draggable error and complete marbles.

TODO

@@ -76,6 +76,7 @@ DONE Fix marble hover and dragging styles for Firefox
 DONE Fix affordance animation stuck for combineLatest
 >>> v1.4.0
 
+DONE Add support for draggable error and complete marbles.
 TODO Fix visual semantics of concat diagram
 >>>
 

src/components/sandbox/sandbox-output.js

@@ -7,8 +7,13 @@ const MAX_TIME = 100;
 
 const toVTStream = curry(function _toVTStream(scheduler, data) {
   const marbleStreams$ = new Observable(observer => {
+    let emit = (item) => {
+        if (item.content === 'X') observer.error(item)
+        else if (item.content === '|') observer.complete()
+        else observer.next(item);
+    };
     data.marbles.forEach(item =>
-      scheduler.schedule(() => observer.next(item), item.time));
+      scheduler.schedule(() => emit(item), item.time));
   });
   return marbleStreams$
     .takeUntil(Observable.timer(data.end.time + 1, scheduler));
@@ -21,10 +26,13 @@ function outputStreamToMarbles$(scheduler, stream) {
 
   stream
     .observeOn(scheduler)
+    .catch(error => {
+       return Observable.of(error);
+    })
     .timestamp(scheduler)
     .map(({ value, timestamp }) => {
       const marble = typeof value !== 'object'
-        ? { content: value, id: calculateNotificationContentHash(value) }
+        ? { content: value, id: calculateNotificationContentHash(value), pastEnd: false }
         : value;
 
       return assoc('time', timestamp / MAX_TIME * 100, marble);

src/components/sandbox/sandbox.js

@@ -31,6 +31,13 @@ export function Sandbox({ DOM, store }) {
         // route change. Skip it.
         .skip(1)
         .startWith(inputsToTimelines(example.inputs))
+        .map(timelines => timelines.map(timeline => { // note: We modify the timelines object here.
+            const endTimes = timeline.marbles.filter(marble => (marble.content === 'X') || (marble.content === '|')).map(marble => marble.time);
+            const endTime = Math.min.apply(null, endTimes);
+            timeline.marbles.forEach(marble => { marble.pastEnd = (marble.time > endTime); });
+            return timeline;
+        })
+        )
     )
     .publishReplay(1).refCount();
 

src/components/timeline/marble.js

@@ -21,24 +21,36 @@ const POSSIBLE_COLORS = [COLORS.blue, COLORS.green, COLORS.yellow, COLORS.red];
 
 function view(sources, value$, isHighlighted$) {
   return Observable.combineLatest(
-    sources.id, sources.content, value$, isHighlighted$)
-    .map(([id, content, value, isHighlighted]) =>
+    sources.id, sources.content, sources.pastEnd, value$, isHighlighted$)
+    .map(([id, content, pastEnd, value, isHighlighted]) =>
       svg.g({
         attrs: { class: ELEMENT_CLASS, transform: `translate(${value}, 5)` },
         style: { cursor: isHighlighted ? 'ew-resize' : 'default'  },
       }, [
-        svg.circle({
+        ((content === 'X') || (content === '|'))
+        ? svg.rect({
+          attrs: { x: -MARBLE_SIZE, y: -MARBLE_SIZE, width: 2*MARBLE_SIZE, height: 2*MARBLE_SIZE },
+          style: merge({
+            fill: pastEnd ? COLORS.greyLight : POSSIBLE_COLORS[id % POSSIBLE_COLORS.length],
+            stroke: pastEnd ? COLORS.grey : 'black',
+            strokeWidth: STROKE_WIDTH,
+          }, isHighlighted ? dropshadow : {}),
+        })
+        : svg.circle({
           attrs: { r: MARBLE_SIZE },
           style: merge({
-            fill: POSSIBLE_COLORS[id % POSSIBLE_COLORS.length],
-            stroke: 'black',
+            fill: pastEnd ? COLORS.greyLight : POSSIBLE_COLORS[id % POSSIBLE_COLORS.length],
+            stroke: pastEnd ? COLORS.grey : 'black',
             strokeWidth: STROKE_WIDTH,
           }, isHighlighted ? dropshadow : {}),
         }),
         svg.text({
           attrs: {
             'text-anchor': 'middle', y: '0.8' },
-          style: mergeStyles({ fontSize: '2.5px' }, fontBase, userSelectNone),
+          style: mergeStyles({
+              fontSize: '2.5px',
+              fill: pastEnd ? COLORS.grey : 'black',
+            }, fontBase, userSelectNone),
         }, [`${content}`]),
       ]),
     );

src/data/combination-examples.js

@@ -29,8 +29,8 @@ export const combinationExamples = {
   merge: {
     label: 'merge',
     inputs: [
-      [{t:0, c:20}, {t:15, c:40}, {t:30, c:60}, {t:45, c:80}, {t:60, c:100}],
-      [{t:37, c:1}, {t:68, c:1}]
+      [{t:0, c:20}, {t:15, c:40}, {t:30, c:60}, {t:45, c:80}, {t:60, c:100}, {t:78, c:'|'}, {t:88, c:'X'}],
+      [{t:37, c:1}, {t:68, c:1}, {t:78, c:'|'}, {t:88, c:'X'}]
     ],
     apply: function(inputs) {
       return Observable.merge(...inputs);
@@ -84,4 +84,4 @@ export const combinationExamples = {
       );
     }
   },
-}
+}