diff options
| -rw-r--r-- | src/client/views/nodes/Keyframe.tsx | 25 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 48 |
2 files changed, 48 insertions, 25 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx index 81cbd274d..4cba6e8f9 100644 --- a/src/client/views/nodes/Keyframe.tsx +++ b/src/client/views/nodes/Keyframe.tsx @@ -55,7 +55,6 @@ export namespace KeyframeFunc{ }; } - export const RegionDataSchema = createSchema({ position: defaultSpec("number", 0), duration: defaultSpec("number", 0), @@ -241,19 +240,24 @@ export class Keyframe extends React.Component<IProps> { let bar = this._bar.current!; let barX = bar.getBoundingClientRect().left; let offset = e.clientX - barX; + let leftRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.left, this.regiondata, this.regions); let firstkf: (Doc | undefined) = this.firstKeyframe; - console.log(offset); if (firstkf && this.regiondata.position + this.regiondata.fadeIn + offset>= NumCast(firstkf!.time)) { + let dif = NumCast(firstkf!.time) - (this.regiondata.position + this.regiondata.fadeIn); this.regiondata.position = NumCast(firstkf!.time) - this.regiondata.fadeIn; - + this.regiondata.duration -= dif; }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 { + } else if (leftRegion && this.regiondata.position + offset <= leftRegion.position + leftRegion.duration) { + let dif = this.regiondata.position - (leftRegion.position + leftRegion.duration); + this.regiondata.position = leftRegion.position + leftRegion.duration; + this.regiondata.duration += dif; + + }else { this.regiondata.duration -= offset; this.regiondata.position += offset; } - } @@ -264,9 +268,16 @@ export class Keyframe extends React.Component<IProps> { let bar = this._bar.current!; let barX = bar.getBoundingClientRect().right; let offset = e.clientX - barX; - if (this.regiondata.duration + offset < this.regiondata.fadeIn + this.regiondata.fadeOut){ + let rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, this.regiondata, this.regions); + if (this.lastKeyframe! && this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut + offset <= NumCast((this.lastKeyframe! as Doc).time)) { + let dif = this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut - NumCast((this.lastKeyframe! as Doc).time); + this.regiondata.duration -= dif; + } else if (this.regiondata.duration + offset < this.regiondata.fadeIn + this.regiondata.fadeOut){ // nokeyframes, just fades this.regiondata.duration = this.regiondata.fadeIn + this.regiondata.fadeOut; - }else { + } else if (rightRegion && this.regiondata.position + this.regiondata.duration + offset >= rightRegion.position){ + let dif = rightRegion.position - (this.regiondata.position + this.regiondata.duration); + this.regiondata.duration += dif; + } else { this.regiondata.duration += offset; } } diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 17f3e9382..1b69e971c 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -49,23 +49,23 @@ export class Timeline extends CollectionSubView(Document) { @observable private _currentBarX: number = 0; @observable private _windSpeed: number = 1; @observable private _isPlaying: boolean = false; + @observable private _isFrozen: boolean = false; @observable private _boxLength: number = 0; @observable private _containerHeight: number = this.DEFAULT_CONTAINER_HEIGHT; @observable private _time = 100000; //DEFAULT @observable private _ticks: number[] = []; - @observable private flyoutInfo:FlyoutProps = {x: 0, y: 0, display: "block", regiondata: new Doc(), regions: new List<Doc>()}; - + @observable private flyoutInfo:FlyoutProps = {x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List<Doc>()}; +@observable private _resizing = ""; @computed private get children(){ return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>; } componentDidMount() { - runInAction(() => { reaction(() => { - this._time; + return this._time; }, () =>{ this._ticks = []; for (let i = 0; i < this._time;) { @@ -79,6 +79,9 @@ export class Timeline extends CollectionSubView(Document) { }); } + componentDidUpdate() { + } + @action changeCurrentBarX = (x: number) => { this._currentBarX = x; @@ -189,7 +192,7 @@ export class Timeline extends CollectionSubView(Document) { onResizeMove = (e: PointerEvent) => { e.preventDefault(); e.stopPropagation(); - let offset = e.clientY - this._containerHeight; + let offset = e.clientY - this._timelineContainer.current!.getBoundingClientRect().bottom; if (this._containerHeight + offset <= this.MIN_CONTAINER_HEIGHT) { this._containerHeight = this.MIN_CONTAINER_HEIGHT; } else if (this._containerHeight + offset >= this.MAX_CONTAINER_HEIGHT) { @@ -202,8 +205,9 @@ export class Timeline extends CollectionSubView(Document) { @action onTimelineDown = (e: React.PointerEvent) => { e.preventDefault(); - //e.stopPropagation(); - if (e.nativeEvent.which === 1){ + this._resizing = e.currentTarget.id; + console.log(this._resizing); + if (e.nativeEvent.which === 1 && !this._isFrozen){ document.addEventListener("pointermove", this.onTimelineMove); document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onTimelineMove);}); } @@ -218,7 +222,6 @@ export class Timeline extends CollectionSubView(Document) { 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 @@ -253,23 +256,31 @@ export class Timeline extends CollectionSubView(Document) { let subitems: ContextMenuProps[] = []; 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"; + if (!this._isFrozen){ + 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(() => { - timelineContainer.style.transform = `translate(0px, ${e.pageY - this._containerHeight}px)`; + if (!this._isFrozen){ + timelineContainer.style.transform = `translate(0px, ${e.pageY - this._containerHeight}px)`; + } }), icon: "pinterest" }); + subitems.push({ + description: "Freeze Timeline", event: action(() => { + this._isFrozen = true; + }), icon: "thumbtack" + + }); ContextMenu.Instance.addItem({ description: "Timeline Funcs...", subitems: subitems }); } - 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>; - } @action getFlyout = (props: FlyoutProps) => { @@ -281,9 +292,8 @@ export class Timeline extends CollectionSubView(Document) { render() { return ( <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="timeline-container" style={{ height: `${this._containerHeight}px`, left:"0px", top:"0px" }} ref={this._timelineContainer}onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}> + <div className="timeline-container" style={{ height: `${this._containerHeight}px`, left:"0px", top:"30px" }} ref={this._timelineContainer}onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}> <TimelineFlyout flyoutInfo={this.flyoutInfo} tickSpacing={this._tickSpacing}/> <div className="toolbox"> <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div> @@ -328,10 +338,12 @@ class TimelineOverview extends React.Component{ } class TimelineFlyout extends React.Component<TimelineFlyoutProps>{ + @observable private _timeInput = React.createRef<HTMLInputElement>(); @observable private _durationInput = React.createRef<HTMLInputElement>(); @observable private _fadeInInput = React.createRef<HTMLInputElement>(); @observable private _fadeOutInput = React.createRef<HTMLInputElement>(); + private block = false; componentDidMount() { |