diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/Keyframe.tsx | 62 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 26 |
2 files changed, 57 insertions, 31 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx index 3f8197c8c..81cbd274d 100644 --- a/src/client/views/nodes/Keyframe.tsx +++ b/src/client/views/nodes/Keyframe.tsx @@ -92,6 +92,33 @@ export class Keyframe extends React.Component<IProps> { } + @computed + private get firstKeyframe(){ + let first: (Doc | undefined) = undefined; + DocListCast(this.regiondata.keyframes!).forEach(kf => { + if (kf.type !== KeyframeFunc.KeyframeType.fade){ + if (!first || first && NumCast(kf.time) < NumCast(first.time)){ + first = kf; + } + } + }); + return first; + } + + @computed + private get lastKeyframe(){ + let last: (Doc | undefined) = undefined; + DocListCast(this.regiondata.keyframes!).forEach(kf => { + if (kf.type !== KeyframeFunc.KeyframeType.fade){ + if (!last || last && NumCast(kf.time) > NumCast(last.time)){ + last = kf; + } + } + }); + return last; + } + + componentWillMount(){ if (!this.regiondata.keyframes){ this.regiondata.keyframes = new List<Doc>(); @@ -134,21 +161,17 @@ export class Keyframe extends React.Component<IProps> { @action makeKeyData = (kfpos: number, type:KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time - let hasData = false; - this.regiondata.keyframes!.forEach(TK => { //TK is TimeAndKey - TK = TK as Doc; + DocListCast(this.regiondata.keyframes!).forEach(TK => { //TK is TimeAndKey if (TK.time === kfpos) { - hasData = true; + return TK; } }); - if (!hasData) { - let TK: Doc = new Doc(); - TK.time = kfpos; - TK.key = Doc.MakeCopy(this.props.node, true); - TK.type = type; - this.regiondata.keyframes!.push(TK); - return TK; - } + let TK: Doc = new Doc(); + TK.time = kfpos; + TK.key = Doc.MakeCopy(this.props.node, true); + TK.type = type; + this.regiondata.keyframes!.push(TK); + return TK; } @action @@ -218,18 +241,19 @@ export class Keyframe extends React.Component<IProps> { let bar = this._bar.current!; let barX = bar.getBoundingClientRect().left; let offset = e.clientX - barX; - if (this.regiondata.duration - offset < this.regiondata.fadeIn + this.regiondata.fadeOut){ + let firstkf: (Doc | undefined) = this.firstKeyframe; + console.log(offset); + if (firstkf && this.regiondata.position + this.regiondata.fadeIn + offset>= NumCast(firstkf!.time)) { + this.regiondata.position = NumCast(firstkf!.time) - this.regiondata.fadeIn; + + }else if (this.regiondata.duration - offset < this.regiondata.fadeIn + this.regiondata.fadeOut){ // no keyframes, just fades this.regiondata.position -= (this.regiondata.fadeIn + this.regiondata.fadeOut - this.regiondata.duration); this.regiondata.duration = this.regiondata.fadeIn + this.regiondata.fadeOut; } else { this.regiondata.duration -= offset; this.regiondata.position += offset; } - // for (let i = 0; i < this.regiondata.keyframes!.length; i++){ - // console.log((this.regiondata.keyframes![i] as Doc).time); - // (this.regiondata.keyframes![i] as Doc).time = NumCast((this.regiondata.keyframes![i] as Doc).time) - offset; - // console.log((this.regiondata.keyframes![i] as Doc).time); - // } + } @@ -245,7 +269,7 @@ export class Keyframe extends React.Component<IProps> { }else { this.regiondata.duration += offset; } - } + } createDivider = (type?: KeyframeFunc.Direction): JSX.Element => { if (type === "left") { diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index ee33245af..4e3f63c57 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -5,7 +5,7 @@ import { Document, listSpec, createSchema, makeInterface, defaultSpec } from ".. import { observer } from "mobx-react"; import { Track } from "./Track"; import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, Reaction, IObservableObject, trace, autorun, runInAction } from "mobx"; -import { Cast, NumCast } from "../../../new_fields/Types"; +import { Cast, NumCast, FieldValue } from "../../../new_fields/Types"; import { SelectionManager } from "../../util/SelectionManager"; import { List } from "../../../new_fields/List"; import { Self } from "../../../new_fields/FieldSymbols"; @@ -18,6 +18,8 @@ import { ContextMenu } from "../ContextMenu"; import { string } from "prop-types"; import { checkIfStateModificationsAreAllowed } from "mobx/lib/internal"; import { SelectorContextMenu } from "../collections/ParentDocumentSelector"; +import { DocumentManager } from "../../util/DocumentManager"; +import { CollectionVideoView } from "../collections/CollectionVideoView"; export interface FlyoutProps { @@ -56,7 +58,6 @@ export class Timeline extends CollectionSubView(Document) { @observable private _isPlaying: boolean = false; @observable private _boxLength: number = 0; @observable private _containerHeight: number = this.DEFAULT_CONTAINER_HEIGHT; - @observable private _nodes: List<Doc> = new List<Doc>(); @observable private _time = 100000; //DEFAULT @observable private _infoContainer = React.createRef<HTMLDivElement>(); @@ -65,6 +66,12 @@ export class Timeline extends CollectionSubView(Document) { @observable private flyoutInfo: FlyoutProps = { x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List<Doc>() }; private block = false; + + @computed + private get children(){ + return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>; + } + componentWillMount() { console.log(this._ticks.length); runInAction(() => { @@ -76,15 +83,10 @@ export class Timeline extends CollectionSubView(Document) { }); } componentDidMount() { - runInAction(() => { - let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)); - if (!children) { - return; - } - let childrenList = children; - this._nodes = childrenList; - }); this.initialize(); + + console.log(DocumentManager.Instance.getDocumentView(this.props.Document)); + console.log(toJS(this.props.Document.data)); } @@ -415,13 +417,13 @@ export class Timeline extends CollectionSubView(Document) { <div className="scrubberhead"></div> </div> <div className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}> - {DocListCast(this._nodes).map(doc => { + {DocListCast(this.children).map(doc => { return <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} />; })} </div> </div> <div className="title-container" ref={this._titleContainer}> - {DocListCast(this._nodes).map(doc => { + {DocListCast(this.children).map(doc => { return <div className="datapane"> <p>{doc.title}</p> </div>; |