diff options
| -rw-r--r-- | src/client/views/nodes/Keyframe.tsx | 21 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.scss | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 71 | ||||
| -rw-r--r-- | src/client/views/nodes/Track.tsx | 9 |
4 files changed, 67 insertions, 42 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx index d992b1c44..122bcb36e 100644 --- a/src/client/views/nodes/Keyframe.tsx +++ b/src/client/views/nodes/Keyframe.tsx @@ -52,13 +52,8 @@ export namespace KeyframeFunc{ regiondata.position = 0; regiondata.fadeIn = 20; regiondata.fadeOut = 20; - regiondata.keyframes = new List<Doc>(); return regiondata; }; - - export const compareKeyframe = (propsNode: Doc, kf: Doc) => { - - }; } @@ -94,6 +89,14 @@ export class Keyframe extends React.Component<IProps> { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>; } + + componentWillMount(){ + if (!this.regiondata.keyframes){ + this.regiondata.keyframes = new List<Doc>(); + } + } + + @action componentDidMount() { let fadeIn = this.makeKeyData(this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade)!; @@ -121,12 +124,12 @@ export class Keyframe extends React.Component<IProps> { this.regiondata.keyframes![fadeOutIndex] = fadeOut; this.regiondata.keyframes![startIndex] = start; this.regiondata.keyframes![finishIndex] = finish; - this.forceUpdate(); } }); } + componentWillUnmount() { } @@ -286,7 +289,6 @@ export class Keyframe extends React.Component<IProps> { <div className="keyframeCircle" onPointerDown={(e) => {this.moveKeyframe(e, kf as Doc);} } onContextMenu={(e:React.MouseEvent)=>{ e.preventDefault(); e.stopPropagation(); - console.log(toJS(kf.key)); }}></div> </div>); } @@ -308,15 +310,12 @@ export class Keyframe extends React.Component<IProps> { e.stopPropagation(); let offsetLeft = this._bar.current!.getBoundingClientRect().left - this._bar.current!.parentElement!.getBoundingClientRect().left; let offsetTop = this._bar.current!.getBoundingClientRect().top; //+ this._bar.current!.parentElement!.getBoundingClientRect().top; - this.props.setFlyout({x:offsetLeft, y: offsetTop, display:"block", regiondata:this.regiondata, regions:this.regions}); - })}> + this.props.setFlyout({x:offsetLeft, y: offsetTop, display:"block", regiondata:this.regiondata, regions:this.regions}); })}> <div className="leftResize" onPointerDown={this.onResizeLeft} ></div> <div className="rightResize" onPointerDown={this.onResizeRight}></div> {this.regiondata.keyframes!.map(kf => { return this.createKeyframeJSX(kf as Doc, (kf! as Doc).type as KeyframeFunc.KeyframeType); })} - {this.createDivider(KeyframeFunc.Direction.left)} - {this.createDivider(KeyframeFunc.Direction.right)} </div> </div> ); diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss index 0a510ba6e..c1317b16c 100644 --- a/src/client/views/nodes/Timeline.scss +++ b/src/client/views/nodes/Timeline.scss @@ -39,6 +39,14 @@ } } +.placement-highlight{ + background-color:blue; + transform: translate(0px, 0px); + transition: width 1000ms ease-in-out; + transition: height 1000ms ease-in-out; + position: absolute; +} + .timeline-container{ width:100%; height:300px; diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index a9add619c..ee33245af 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -16,6 +16,8 @@ import { DocumentContentsView } from "./DocumentContentsView"; import { ContextMenuProps } from "../ContextMenuItem"; import { ContextMenu } from "../ContextMenu"; import { string } from "prop-types"; +import { checkIfStateModificationsAreAllowed } from "mobx/lib/internal"; +import { SelectorContextMenu } from "../collections/ParentDocumentSelector"; export interface FlyoutProps { @@ -46,6 +48,7 @@ export class Timeline extends CollectionSubView(Document) { @observable private _durationInput = React.createRef<HTMLInputElement>(); @observable private _fadeInInput = React.createRef<HTMLInputElement>(); @observable private _fadeOutInput = React.createRef<HTMLInputElement>(); + @observable private _timelineWrapper = React.createRef<HTMLDivElement>(); @observable private _currentBarX: number = 0; @@ -62,8 +65,8 @@ 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; - componentWillMount() { - console.log(this._ticks.length ); + componentWillMount() { + console.log(this._ticks.length); runInAction(() => { //check if this is a video frame for (let i = 0; i < this._time;) { @@ -72,14 +75,15 @@ export class Timeline extends CollectionSubView(Document) { } }); } - componentDidMount() { - runInAction(() => {let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)); + componentDidMount() { + runInAction(() => { + let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)); if (!children) { return; } - let childrenList = ((children[Self] as any).__fields) as List<Doc>; - this._nodes = (childrenList) as List<Doc>; - }); + let childrenList = children; + this._nodes = childrenList; + }); this.initialize(); } @@ -95,7 +99,7 @@ export class Timeline extends CollectionSubView(Document) { initialize = action(() => { let scrubber = this._scrubberbox.current!; this._boxLength = scrubber.getBoundingClientRect().width; - + reaction(() => this._time, time => { let infoContainer = this._infoContainer.current!; @@ -217,7 +221,7 @@ export class Timeline extends CollectionSubView(Document) { titleContainer.scrollTop = titleContainer.scrollTop - e.movementY; } - + @action onResizeDown = (e: React.PointerEvent) => { e.preventDefault(); @@ -245,19 +249,23 @@ export class Timeline extends CollectionSubView(Document) { @action onTimelineDown = (e: React.PointerEvent) => { e.preventDefault(); - e.stopPropagation(); - document.addEventListener("pointermove", this.onTimelineMove); - document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onTimelineMove); }); + //e.stopPropagation(); + if (e.nativeEvent.which === 1){ + document.addEventListener("pointermove", this.onTimelineMove); + document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onTimelineMove);}); + } } @action onTimelineMove = (e: PointerEvent) => { e.preventDefault(); e.stopPropagation(); - let timelineContainer = this._timelineContainer.current!; - timelineContainer.style.transform = `translate(${timelineContainer.getBoundingClientRect().left + 1}px, ${timelineContainer.getBoundingClientRect().top + 1}px)`; - console.log("mouse move!"); - timelineContainer.style.width = "500px"; + let timelineContainer = this._timelineWrapper.current!; + let left = parseFloat(timelineContainer.style.left!); + let top = parseFloat(timelineContainer.style.top!); + timelineContainer.style.left = `${left + e.movementX}px`; + timelineContainer.style.top = `${top + e.movementY}px`; + this.setPlacementHighlight(0, 0, 1000, 1000); // do something with setting the placement highlighting } @action @@ -296,15 +304,22 @@ export class Timeline extends CollectionSubView(Document) { timelineContextMenu = (e: React.MouseEvent): void => { let subitems: ContextMenuProps[] = []; - let timelineContainer = this._timelineContainer.current!; - subitems.push({ description: "Pin to Top", event: action(() => { timelineContainer.style.transform = "translate(0px, 0px)"; }), icon: "pinterest" }); + let timelineContainer = this._timelineWrapper.current!; + subitems.push({ description: "Pin to Top", event: action(() => { + timelineContainer.style.transition = "top 1000ms ease-in, left 1000ms ease-in"; //????? + timelineContainer.style.left = "0px"; + timelineContainer.style.top = "0px"; + timelineContainer.style.transition = "none"; + + + }), icon: "pinterest" }); subitems.push({ description: "Pin to Bottom", event: action(() => { + console.log(timelineContainer.getBoundingClientRect().bottom); timelineContainer.style.transform = `translate(0px, ${e.pageY - this._containerHeight}px)`; }), icon: "pinterest" }); ContextMenu.Instance.addItem({ description: "Timeline Funcs...", subitems: subitems }); - } @action @@ -355,10 +370,14 @@ export class Timeline extends CollectionSubView(Document) { } } } + private setPlacementHighlight = (x = 0, y = 0, height:(string| number) = 0, width:(string | number) = 0):JSX.Element => { + return <div className="placement-highlight" style ={{height: `${height}px`, width: `${width}px`, transform:`translate(${x}px, ${y}px)`}}></div>; + } render() { return ( - <div> + <div style={{left:"0px", top: "0px", position:"absolute", width:"100%", transform:"translate(0px, 0px)"}} ref = {this._timelineWrapper}> + {this.setPlacementHighlight(0,0,300,400)} <button className="minimize" onClick={this.minimize}>Minimize</button> <div className="flyout-container" style={{ left: `${this.flyoutInfo.x}px`, top: `${this.flyoutInfo.y}px`, display: `${this.flyoutInfo.display!}` }} onPointerDown={this.onFlyoutDown}> <FontAwesomeIcon className="flyout" icon="comment-alt" color="grey" /> @@ -373,11 +392,10 @@ export class Timeline extends CollectionSubView(Document) { <input ref={this._durationInput} type="text" placeholder={`${Math.round(NumCast(this.flyoutInfo.regiondata!.duration) / this._tickSpacing * 1000)}ms`} onKeyDown={this.changeDuration} /> <input ref={this._fadeInInput} type="text" placeholder={`${Math.round(NumCast(this.flyoutInfo.regiondata!.fadeIn))}ms`} onKeyDown={this.changeFadeIn} /> <input ref={this._fadeOutInput} type="text" placeholder={`${Math.round(NumCast(this.flyoutInfo.regiondata!.fadeOut))}ms`} onKeyDown={this.changeFadeOut} /> - </div> <button onClick={action((e: React.MouseEvent) => { this.flyoutInfo.regions!.splice(this.flyoutInfo.regions!.indexOf(this.flyoutInfo.regiondata!), 1); this.flyoutInfo.display = "none"; })}>delete</button> </div> - <div className="timeline-container" style={{ height: `${this._containerHeight}px` }} ref={this._timelineContainer} onContextMenu={this.timelineContextMenu} > + <div className="timeline-container" style={{ height: `${this._containerHeight}px`, left:"0px", top:"0px" }} ref={this._timelineContainer}onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}> <div className="toolbox"> <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div> <div onClick={this.onPlay}> <FontAwesomeIcon icon={faPlayCircle} size="2x" /> </div> @@ -388,7 +406,6 @@ export class Timeline extends CollectionSubView(Document) { </div> */} </div> <div className="info-container" ref={this._infoContainer}> - <div className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}> {this._ticks.map(element => { return <div className="tick" style={{ transform: `translate(${element / 1000 * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toTime(element)}</p></div>; @@ -398,15 +415,15 @@ export class Timeline extends CollectionSubView(Document) { <div className="scrubberhead"></div> </div> <div className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}> - {this._nodes.map(doc => { - return <Track node={(doc as any).value() as Doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} />; + {DocListCast(this._nodes).map(doc => { + return <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} />; })} </div> </div> <div className="title-container" ref={this._titleContainer}> - {this._nodes.map(doc => { + {DocListCast(this._nodes).map(doc => { return <div className="datapane"> - <p>{((doc as any).value() as Doc).title}</p> + <p>{doc.title}</p> </div>; })} </div> diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx index c1c722d62..b00001e54 100644 --- a/src/client/views/nodes/Track.tsx +++ b/src/client/views/nodes/Track.tsx @@ -12,6 +12,7 @@ import { AddComparisonParameters } from "../../northstar/model/idea/idea"; import { RichTextField } from "../../../new_fields/RichTextField"; import { node } from "prop-types"; import { NorthstarSettings } from "../../northstar/manager/Gateway"; +import { getForkTsCheckerWebpackPluginHooks } from "fork-ts-checker-webpack-plugin/lib/hooks"; interface IProps { node: Doc; @@ -35,14 +36,15 @@ export class Track extends React.Component<IProps> { } componentWillMount() { - this.props.node.regions = new List<Doc>(); + if (!this.props.node.regions){ + this.props.node.regions = new List<Doc>(); + } this.props.node.opacity = 1; } @action componentDidMount() { this.props.node.hidden = true; - this.props.node.opacity = 1; this._reactionDisposers.push(reaction(() => this.props.currentBarX, () => { let regiondata: (Doc | undefined) = this.findRegion(this.props.currentBarX); @@ -102,7 +104,6 @@ export class Track extends React.Component<IProps> { this.filterKeys(Doc.allKeys(currentkf.key as Doc)).forEach(k => { this.props.node[k] = (currentkf!.key as Doc)[k]; }); - console.log("current"); } else if (leftkf && rightkf) { this.interpolate(leftkf, rightkf); } else if (leftkf) { @@ -238,7 +239,7 @@ export class Track extends React.Component<IProps> { <div className="track-container"> <div className="track"> <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}> - {this.regions.map((region) => { + {DocListCast(this.regions).map((region) => { return <Keyframe node={this.props.node} RegionData={region as Doc} changeCurrentBarX={this.props.changeCurrentBarX} setFlyout={this.props.setFlyout}/>; })} </div> |