diff options
Diffstat (limited to 'src/client/views/animationtimeline/Timeline.tsx')
| -rw-r--r-- | src/client/views/animationtimeline/Timeline.tsx | 62 |
1 files changed, 34 insertions, 28 deletions
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 4be3b05ab..f27a2d2fd 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -1,7 +1,7 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core'; import { faBackward, faForward, faGripLines, faPauseCircle, faPlayCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../../fields/Doc'; @@ -14,6 +14,7 @@ import { RegionHelpers } from './Region'; import './Timeline.scss'; import { TimelineOverview } from './TimelineOverview'; import { Track } from './Track'; +import { ObservableReactComponent } from '../ObservableReactComponent'; /** * Timeline class controls most of timeline functions besides individual region and track mechanism. Main functions are @@ -43,7 +44,7 @@ import { Track } from './Track'; */ @observer -export class Timeline extends React.Component<FieldViewProps> { +export class Timeline extends ObservableReactComponent<FieldViewProps> { //readonly constants private readonly DEFAULT_TICK_SPACING: number = 50; private readonly MAX_TITLE_HEIGHT = 75; @@ -54,6 +55,11 @@ export class Timeline extends React.Component<FieldViewProps> { private DEFAULT_CONTAINER_HEIGHT: number = 330; private MIN_CONTAINER_HEIGHT: number = 205; + constructor(props: any) { + super(props); + makeObservable(this); + } + //react refs @observable private _trackbox = React.createRef<HTMLDivElement>(); @observable private _titleContainer = React.createRef<HTMLDivElement>(); @@ -82,11 +88,11 @@ export class Timeline extends React.Component<FieldViewProps> { */ @computed private get children(): Doc[] { - const annotatedDoc = [DocumentType.IMG, DocumentType.VID, DocumentType.PDF, DocumentType.MAP].includes(StrCast(this.props.Document.type) as any); + const annotatedDoc = [DocumentType.IMG, DocumentType.VID, DocumentType.PDF, DocumentType.MAP].includes(StrCast(this._props.Document.type) as any); if (annotatedDoc) { - return DocListCast(this.props.Document[Doc.LayoutFieldKey(this.props.Document) + '_annotations']); + return DocListCast(this._props.Document[Doc.LayoutFieldKey(this._props.Document) + '_annotations']); } - return DocListCast(this.props.Document[this.props.fieldKey]); + return DocListCast(this._props.Document[this._props.fieldKey]); } /////////lifecycle functions//////////// @@ -96,21 +102,21 @@ export class Timeline extends React.Component<FieldViewProps> { this._titleHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT; //check if relHeight is less than Maxheight. Else, just set relheight to max this.MIN_CONTAINER_HEIGHT = this._titleHeight + 130; //offset this.DEFAULT_CONTAINER_HEIGHT = this._titleHeight * 2 + 130; //twice the titleheight + offset - if (!this.props.Document.AnimationLength) { + if (!this._props.Document.AnimationLength) { //if animation length did not exist - this.props.Document.AnimationLength = this._time; //set it to default time + this._props.Document.AnimationLength = this._time; //set it to default time } else { - this._time = NumCast(this.props.Document.AnimationLength); //else, set time to animationlength stored from before + this._time = NumCast(this._props.Document.AnimationLength); //else, set time to animationlength stored from before } this._totalLength = this._tickSpacing * (this._time / this._tickIncrement); //the entire length of the timeline div (actual div part itself) this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see) this._visibleStart = this._infoContainer.current!.scrollLeft; //where the div starts - this.props.Document.isATOn = !this.props.Document.isATOn; //turns the boolean on, saying AT (animation timeline) is on + this._props.Document.isATOn = !this._props.Document.isATOn; //turns the boolean on, saying AT (animation timeline) is on this.toggleHandle(); } componentWillUnmount() { - this.props.Document.AnimationLength = this._time; //save animation length + this._props.Document.AnimationLength = this._time; //save animation length } ///////////////////////////////////////////////// @@ -206,7 +212,7 @@ export class Timeline extends React.Component<FieldViewProps> { onScrubberMove = (e: PointerEvent) => { const scrubberbox = this._infoContainer.current!; const left = scrubberbox.getBoundingClientRect().left; - const offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale; + const offsetX = Math.round(e.clientX - left) * this._props.ScreenToLocalTransform().Scale; this.changeCurrentBarX(offsetX + this._visibleStart); //changes scrubber to clicked scrubber position return false; }; @@ -233,7 +239,7 @@ export class Timeline extends React.Component<FieldViewProps> { this._visibleStart -= e.movementX; this._totalLength -= e.movementX; this._time -= RegionHelpers.convertPixelTime(e.movementX, 'mili', 'time', this._tickSpacing, this._tickIncrement); - this.props.Document.AnimationLength = this._time; + this._props.Document.AnimationLength = this._time; } return false; }; @@ -349,8 +355,8 @@ export class Timeline extends React.Component<FieldViewProps> { private timelineToolBox = (scale: number, totalTime: number) => { const size = 40 * scale; //50 is default const iconSize = 25; - const width: number = this.props.PanelWidth(); - const modeType = this.props.Document.isATOn ? 'Author' : 'Play'; + const width: number = this._props.PanelWidth(); + const modeType = this._props.Document.isATOn ? 'Author' : 'Play'; //decides if information should be omitted because the timeline is very small // if its less than 950 pixels then it's going to be overlapping @@ -389,7 +395,7 @@ export class Timeline extends React.Component<FieldViewProps> { tickIncrement={this._tickIncrement} time={this._time} parent={this} - isAuthoring={BoolCast(this.props.Document.isATOn)} + isAuthoring={BoolCast(this._props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} @@ -410,10 +416,10 @@ export class Timeline extends React.Component<FieldViewProps> { </div> <div className="time-box overview-tool" style={{ display: 'flex' }}> {this.timeIndicator(lengthString, totalTime)} - <div className="resetView-tool" title="Return to Default View" onClick={() => this.resetView(this.props.Document)}> + <div className="resetView-tool" title="Return to Default View" onClick={() => this.resetView(this._props.Document)}> <FontAwesomeIcon icon="compress-arrows-alt" size="lg" /> </div> - <div className="resetView-tool" style={{ display: this.props.Document.isATOn ? 'flex' : 'none' }} title="Set Default View" onClick={() => this.setView(this.props.Document)}> + <div className="resetView-tool" style={{ display: this._props.Document.isATOn ? 'flex' : 'none' }} title="Set Default View" onClick={() => this.setView(this._props.Document)}> <FontAwesomeIcon icon="expand-arrows-alt" size="lg" /> </div> </div> @@ -423,17 +429,17 @@ export class Timeline extends React.Component<FieldViewProps> { }; timeIndicator(lengthString: string, totalTime: number) { - if (this.props.Document.isATOn) { - return <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? 'visible' : 'hidden', display: this.props.Document.isATOn ? 'flex' : 'none' }}>{`Total: ${this.toReadTime(totalTime)}`}</div>; + if (this._props.Document.isATOn) { + return <div key="time-text" className="animation-text" style={{ visibility: this._props.Document.isATOn ? 'visible' : 'hidden', display: this._props.Document.isATOn ? 'flex' : 'none' }}>{`Total: ${this.toReadTime(totalTime)}`}</div>; } else { const ctime = `Current: ${this.getCurrentTime()}`; const ttime = `Total: ${this.toReadTime(this._time)}`; return ( <div style={{ flexDirection: 'column' }}> - <div className="animation-text" style={{ fontSize: '10px', width: '100%', display: !this.props.Document.isATOn ? 'block' : 'none' }}> + <div className="animation-text" style={{ fontSize: '10px', width: '100%', display: !this._props.Document.isATOn ? 'block' : 'none' }}> {ctime} </div> - <div className="animation-text" style={{ fontSize: '10px', width: '100%', display: !this.props.Document.isATOn ? 'block' : 'none' }}> + <div className="animation-text" style={{ fontSize: '10px', width: '100%', display: !this._props.Document.isATOn ? 'block' : 'none' }}> {ttime} </div> </div> @@ -459,8 +465,8 @@ export class Timeline extends React.Component<FieldViewProps> { const roundToggleContainer = this._roundToggleContainerRef.current!; const timelineContainer = this._timelineContainer.current!; - this.props.Document.isATOn = !this.props.Document.isATOn; - if (!BoolCast(this.props.Document.isATOn)) { + this._props.Document.isATOn = !this._props.Document.isATOn; + if (!BoolCast(this._props.Document.isATOn)) { //turning on playmode... roundToggle.style.transform = 'translate(0px, 0px)'; roundToggle.style.animationName = 'turnoff'; @@ -535,7 +541,7 @@ export class Timeline extends React.Component<FieldViewProps> { // change visible and total width return ( <div style={{ visibility: 'visible' }}> - <div key="timeline_wrapper" style={{ visibility: this.props.Document.isATOn ? 'visible' : 'hidden', left: '0px', top: '0px', position: 'absolute', width: '100%', transform: 'translate(0px, 0px)' }}> + <div key="timeline_wrapper" style={{ visibility: this._props.Document.isATOn ? 'visible' : 'hidden', left: '0px', top: '0px', position: 'absolute', width: '100%', transform: 'translate(0px, 0px)' }}> <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `0px` }}> <div key="timeline_info" className="info-container" onPointerDown={this.onPanDown} ref={this._infoContainer} onWheel={this.onWheelZoom}> {this.drawTicks()} @@ -543,18 +549,18 @@ export class Timeline extends React.Component<FieldViewProps> { <div key="timeline_scrubberhead" className="scrubberhead" onPointerDown={this.onScrubberDown}></div> </div> <div key="timeline_trackbox" className="trackbox" ref={this._trackbox} style={{ width: `${this._totalLength}px` }}> - {[...this.children, this.props.Document].map(doc => ( + {[...this.children, this._props.Document].map(doc => ( <Track ref={ref => this.mapOfTracks.push(ref)} timeline={this} animatedDoc={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} - transform={this.props.ScreenToLocalTransform()} + transform={this._props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} - collection={this.props.Document} + collection={this._props.Document} timelineVisible={true} /> ))} @@ -562,7 +568,7 @@ export class Timeline extends React.Component<FieldViewProps> { </div> <div className="currentTime">Current: {this.getCurrentTime()}</div> <div key="timeline_title" className="title-container" ref={this._titleContainer}> - {[...this.children, this.props.Document].map(doc => ( + {[...this.children, this._props.Document].map(doc => ( <div style={{ height: `${this._titleHeight}px` }} className="datapane" onPointerOver={() => Doc.BrushDoc(doc)} onPointerOut={() => Doc.UnBrushDoc(doc)}> <p>{StrCast(doc.title)}</p> </div> |