diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/animationtimeline/Keyframe.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/animationtimeline/Timeline.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/animationtimeline/TimelineMenu.tsx | 39 |
3 files changed, 36 insertions, 41 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx index 784765318..4e58b07d8 100644 --- a/src/client/views/animationtimeline/Keyframe.tsx +++ b/src/client/views/animationtimeline/Keyframe.tsx @@ -242,7 +242,6 @@ export class Keyframe extends React.Component<IProps> { onBarPointerDown = (e: React.PointerEvent) => { e.preventDefault(); e.stopPropagation(); - let clientX = e.clientX; if (this._doubleClickEnabled){ this.createKeyframe(clientX); @@ -254,14 +253,9 @@ export class Keyframe extends React.Component<IProps> { this._doubleClickEnabled = true; document.addEventListener("pointermove", this.onBarPointerMove); document.addEventListener("pointerup", (e: PointerEvent) => { - document.removeEventListener("pointermove", this.onBarPointerMove); + document.removeEventListener("pointermove", this.onBarPointerMove); }); - } - - - - } diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 3d878660d..10034263c 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -135,8 +135,8 @@ export class Timeline extends CollectionSubView(Document) { this.changeCurrentBarX(0); } else { this.changeCurrentBarX(this._currentBarX + this._windSpeed); - setTimeout(playTimeline, 15); - } + } + setTimeout(playTimeline, 15); } }; playTimeline(); @@ -193,20 +193,38 @@ export class Timeline extends CollectionSubView(Document) { + @observable private _mouseToggled = false; + @observable private _doubleClickEnabled = false; @action onPanDown = (e: React.PointerEvent) => { e.preventDefault(); e.stopPropagation(); - document.addEventListener("pointermove", this.onPanMove); - document.addEventListener("pointerup", () => { - document.removeEventListener("pointermove", this.onPanMove); - }); + let clientX = e.clientX; + if (this._doubleClickEnabled){ + this._doubleClickEnabled = false; + } else { + setTimeout(() => {if(!this._mouseToggled && this._doubleClickEnabled) this.changeCurrentBarX(this._trackbox.current!.scrollLeft + clientX - this._trackbox.current!.getBoundingClientRect().left); + this._mouseToggled = false; + this._doubleClickEnabled = false;}, 200); + this._doubleClickEnabled = true; + document.addEventListener("pointermove", this.onPanMove); + document.addEventListener("pointerup", () => { + document.removeEventListener("pointermove", this.onPanMove); + if (!this._doubleClickEnabled) { + this._mouseToggled = false; + } + }); + + } } @action onPanMove = (e: PointerEvent) => { e.preventDefault(); e.stopPropagation(); + if (e.movementX !== 0 || e.movementY !== 0) { + this._mouseToggled = true; + } let trackbox = this._trackbox.current!; let titleContainer = this._titleContainer.current!; this.movePanX(this._visibleStart - e.movementX); diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx index 4223ee099..3e63eec61 100644 --- a/src/client/views/animationtimeline/TimelineMenu.tsx +++ b/src/client/views/animationtimeline/TimelineMenu.tsx @@ -19,28 +19,6 @@ export class TimelineMenu extends React.Component { super(props); TimelineMenu.Instance = this; } - - @action - pointerDown = (e: React.PointerEvent) => { - e.preventDefault(); - e.stopPropagation(); - document.removeEventListener("pointerup", this.pointerUp); - document.addEventListener("pointerup", this.pointerUp); - document.removeEventListener("pointermove", this.pointerMove); - document.addEventListener("pointermove", this.pointerMove); - } - - @action - pointerMove = (e: PointerEvent) => { - e.preventDefault(); - e.stopPropagation(); - } - - @action - pointerUp = (e: PointerEvent) => { - document.removeEventListener("pointermove", this.pointerMove); - document.removeEventListener("pointerup", this.pointerUp); - } @action openMenu = (x?:number, y?:number) => { @@ -52,16 +30,20 @@ export class TimelineMenu extends React.Component { @action closeMenu = () => { this._opacity = 0; + this._currentMenu = []; } addItem = (type: "input" | "button", title: string, event: (e:any) => void) => { if (type === "input"){ let ref = React.createRef<HTMLInputElement>(); - let text = ""; - return <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input" ref = {ref} placeholder={title} onChange={(e) => {text = e.target.value;}} onKeyDown={(e:React.KeyboardEvent) => { - if(e.keyCode === 13){ - event(text); - }}}/></div>; + return <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input" ref = {ref} placeholder={title} onChange={(e) => { + let text = e.target.value; + document.addEventListener("keypress", (e:KeyboardEvent) => { + if (e.keyCode === 13) { + event(text); + } + }); + }}/></div>; } else if (type === "button") { let ref = React.createRef<HTMLDivElement>(); return <div className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine}size="lg"/><p className="timeline-menu-desc" onClick={event}>{title}</p></div>; @@ -72,7 +54,8 @@ export class TimelineMenu extends React.Component { @action addMenu = (title:string, items: JSX.Element[]) => { items.unshift(<div className="timeline-menu-header"><p className="timeline-menu-header-desc">{title}</p></div>); - this._currentMenu = items; + this._currentMenu = items; + } render() { |