From 9cad9abcf164c7d81b8debf4aa2639d83edd227b Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Fri, 19 Jul 2019 11:13:12 -0400 Subject: dragging bugfix --- src/client/views/nodes/Keyframe.tsx | 25 +++++++++++++------ src/client/views/nodes/Timeline.tsx | 48 +++++++++++++++++++++++-------------- 2 files changed, 48 insertions(+), 25 deletions(-) (limited to 'src') 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 { 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 { 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()}; - + @observable private flyoutInfo:FlyoutProps = {x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List()}; +@observable private _resizing = ""; @computed private get children(){ return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List; } 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
; - } @action getFlyout = (props: FlyoutProps) => { @@ -281,9 +292,8 @@ export class Timeline extends CollectionSubView(Document) { render() { return (
- {this.setPlacementHighlight(0,0,300,400)} -
+
@@ -328,10 +338,12 @@ class TimelineOverview extends React.Component{ } class TimelineFlyout extends React.Component{ + @observable private _timeInput = React.createRef(); @observable private _durationInput = React.createRef(); @observable private _fadeInInput = React.createRef(); @observable private _fadeOutInput = React.createRef(); + private block = false; componentDidMount() { -- cgit v1.2.3-70-g09d2