bradparks / rekapi-timeline

A visual tool for modifying Rekapi animations

rekapi-timline

A graphical control for Rekapi animations

rekapi-timeline is a general-purpose timeline-editing interface for Rekapi meant to be integrated into graphical applications. It is designed to be feature-rich but flexible. rekapi-timeline is not intended to be used as a standalone application. A practical example of it in use is Mantra.

Version 0.7.x and above is built with React and is a ground-up rewrite from 0.6.x and earlier versions, which were built with Backbone. The library dependencies are excluded from the production build artifacts, so you will need to manage that in your project. Please see the dependencies field in package.json for an up-to-date-list of runtime dependencies. For an example of how to load rekapi-timeline in a browser without any complex build infrastructure, please see this CodePen.

Usage

Install the package:

npm install rekapi-timeline

Minimal bootstrap:

<div id="rekapi-timeline"></div>
<div>
  <div id="actor-1" class="actor" style="background: #bada55; height: 150px; width: 150px;"></div>
</div>

import React from 'react';
import ReactDOM from 'react-dom';
import { Rekapi } from 'rekapi';
import { RekapiTimeline } from 'rekapi-timeline';

const rekapi = new Rekapi(document.body);
const actor = rekapi.addActor({
  context: document.getElementById('actor-1')
});

ReactDOM.render(
  <RekapiTimeline
    rekapi={rekapi}
  />,
  document.getElementById('rekapi-timeline')
);

Running tests (written in Mocha)

# run tests in the CLI
npm test

# run tests in the CLI with a watcher that will re-run tests
# when you make a code change
npm run test:watch

Debugging

This project configures Webpack to generate source maps so you can use your browser's dev tools to debug your ES6 code just as easily as you would with ES5.

# run the tests in your browser
npm start

From here, you can fire up your browser's dev tools and set breakpoints, step through code, etc. You can run the demo app at http://localhost:9123, or run the tests at http://localhost:9123/test/.

Building

npm run build

Your compiled code will wind up in the dist directory.

Documentation

You should make sure to update the JSDoc annotations as you work. To view the formatted documentation in your browser:

npm run doc
npm run doc:view

This will generate the docs and run them in your browser. If you would like this to update automatically as you work, run this task:

npm run doc:live

Releasing

npm version patch # Or "minor," or "major"

License

MIT.