ken-okabe / spacetimeline

SpaceTimeLine FRP

spacetimeline

SpaceTimeLine A conceptual FRP model library

https://github.com/kenokabe/spacetimeline

##Install

npm install spacetimeline

##CDN http://kentutorialbook.github.io/cdn/spacetimeline.js

##Live Demo Webpage facebook/react+spacetimeline live-demo web-page.

http://kentutorialbook.github.io/demo/frp-redball-delay/index.html

https://github.com/kentutorialbook/kentutorialbook.github.io/tree/master/demo/frp-redball-delay

In this live-demo, the FRP library records all mouse-move event with a time-stamp.

Or all mouse-move event in 10 seconds duration. You can limit the time-line data size by setting ___(timelineCapacity).

You can access any stream data aligned on time-line, or to be precise, the most recent event prior to any time-stamp, functionally.

In the live-demo, the code access the stream data on 1 seconds prior time-stamp to the current time-stamp.

var cursor = ___cursor.value(___('NOW').subtract(1, 'seconds'))

Please note ___cursor is the stream data appearing while time-line proceeding to the future.

___cursor.appear(cursor);

Then SVG virtual DOM element is passed to react function.

As a result, you can re-play 1 seconds past world that you behaved.

(function() {

  var timelineCapacity = moment.duration(10, 'seconds');

  var ___cursor = ___(timelineCapacity);

  var onMouseMove = function(e) {

    var cursor = {
      x: e.clientX,
      y: e.clientY
    };

    ___cursor.appear(cursor);
  };

  document.addEventListener("mousemove", onMouseMove);

  // here is the final part where pure logic meets our physical world
  // in lazy evaluation context, this corresponds to  `toArray()`
  ___cursor.compute(function() {});

  var Dom1 = React.createClass({
    getInitialState: function() {
      return {cursor: {x:100,y:100}};
    },
    tick: function() {
      this.setState({cursor: ___cursor.value(___('NOW').subtract(1, 'seconds'))});
    },
    componentDidMount: function() {
      this.interval = setInterval(this.tick, 10);
    },
    componentWillUnmount: function() {
      clearInterval(this.interval);
    },
    render: function() {
      return ( <div> <svg height = "100%"  width = "100%" >
      <circle cx = {  this.state.cursor.x  }  cy = {  this.state.cursor.y }  r = "20"  fill = "red" />
      </svg></div>);
    }
  });

  React.render(<Dom1 />, document.body);

  //====================================
})();