Nicer Package Manager

    spacetimeline

    1.6.1 • Public • Published

    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);
     
      //====================================
    })();
     
     

    Install

    npm i spacetimeline

    DownloadsWeekly Downloads

    2

    Version

    1.6.1

    License

    MIT

    Last publish

    Collaborators

    • kenokabe