1.6.1 • Published 11 years ago

spacetimeline v1.6.1

Weekly downloads
7
License
MIT
Repository
github
Last release
11 years ago

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);

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

11 years ago

1.6.0

11 years ago

1.5.8

11 years ago

1.5.7

11 years ago

1.5.6

11 years ago

1.5.5

11 years ago

1.5.3

11 years ago

1.5.2

11 years ago

1.5.1

11 years ago

1.5.0

11 years ago

1.4.0

11 years ago

1.3.0

11 years ago

1.2.0

11 years ago

1.1.0

11 years ago

1.0.0

11 years ago