Svelte-timeline

A timeline component for svelte.

Typescript is available. Follow the instruction here.

Usage

Import sveltmline by npm.

npm i sveltmline

<script lang="ts">
import { genTracks, TimelineFrame, TrackAsset, ITrackable } from 'sveltmline'

class Obj implements ITrackable {
    visible = false;
    url = undefined; // by assigning url, a track automatically be a video track
    OnLoadHtmlElement(elm: HTMLElement){}; // called once when element is loaded
    tick(depth: number){}; // called every frame
}

const tracks:any = genTracks<Obj>();
const t1 = new TrackAsset(new Obj(), 'track_1'); t1.setposition(60, 100);  tracks.push(t1);
const t2 = new TrackAsset(new Obj(), 'track_2'); t2.setposition(10, 60);   tracks.push(t2);
const t3 = new TrackAsset(new Obj(), 'track_3'); t3.setposition(33, 55);   tracks.push(t3);
const t4 = new TrackAsset(new Obj(), 'track_4'); t4.setposition(0, 150);   tracks.push(t4);
const t5 = new TrackAsset(new Obj(), 'track_5'); t5.setposition(100, 140); tracks.push(t5);
const t6 = new TrackAsset(new Obj(), 'track_6'); t6.setposition(40, 55);   tracks.push(t6);
const t7 = new TrackAsset(new Obj(), 'track_7'); t7.setposition(80, 100);  tracks.push(t7);
</script>

<div id="outer">
<TimelineFrame px_h={300} px_w={800} tracks={tracks}/>
</div>

you can optionally set styles for timeline

<script lang="ts">
...
const styles = new Style();
styles.vertical = true;
styles.bcgd_col = '#ffffff';
styles.base_col = '#e6e6e6';
styles.slct_col = '#0022ff';
styles.curr_col = '#0022ff';
styles.base_txt = '#333333';
styles.slct_txt = '#ffffff';
...
</script>

<div id="outer">
<TimelineFrame px_h={300} px_w={800} tracks={tracks} styles={styles}/>
</div>

License

MIT