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.
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')
);# 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
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/.
npm run build
Your compiled code will wind up in the dist directory.
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
npm version patch # Or "minor," or "major"
MIT.