src/client/views/animationtimeline/TimelineOverview.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import * as React from "react"; 
import {observable} from "mobx"; 
import {observer} from "mobx-react";
import "./TimelineOverview.scss"; 


interface TimelineOverviewProps{
    totalLength: number; 
    visibleLength:number; 
    visibleStart:number;
    changeCurrentBarX: (x:number) => any; 
}


export class TimelineOverview extends React.Component<TimelineOverviewProps>{


    render(){
        return(
            <div key="timeline-overview-container" className="timeline-overview-container">
                <div key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${this.props.visibleStart}px`, width:`${this.props.visibleLength}px`}}></div>
                <div key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container">
                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
                    <div key="timeline-overview-scrubber-tail" className="tiemline-overview-scrubber-tail"></div>
                </div>
            </div>
        ); 
    }

}