diff options
-rw-r--r-- | src/Utils.ts | 15 | ||||
-rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 27 | ||||
-rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 5 |
3 files changed, 23 insertions, 24 deletions
diff --git a/src/Utils.ts b/src/Utils.ts index dcfb579ca..39fc3dae4 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -612,10 +612,20 @@ export function setupMoveUpEvents( upEvent: (e: PointerEvent, movement: number[], isClick: boolean) => any, clickEvent: (e: PointerEvent, doubleTap?: boolean) => any, stopPropagation: boolean = true, - stopMovePropagation: boolean = true + stopMovePropagation: boolean = true, + noDoubleTapTimeout?: () => void ) { + const doubleTapTimeout = 300; + (target as any)._doubleTap = (Date.now() - (target as any)._lastTap < doubleTapTimeout); + (target as any)._lastTap = Date.now(); (target as any)._downX = (target as any)._lastX = e.clientX; (target as any)._downY = (target as any)._lastY = e.clientY; + if (!(target as any)._doubleTime && noDoubleTapTimeout) { + (target as any)._doubleTime = setTimeout(() => { + noDoubleTapTimeout?.(); + (target as any)._doubleTime = undefined; + }, doubleTapTimeout); + } const _moveEvent = (e: PointerEvent): void => { if (Math.abs(e.clientX - (target as any)._downX) > Utils.DRAG_THRESHOLD || Math.abs(e.clientY - (target as any)._downY) > Utils.DRAG_THRESHOLD) { @@ -633,10 +643,7 @@ export function setupMoveUpEvents( (target as any)._lastY = e.clientY; stopMovePropagation && e.stopPropagation(); }; - (target as any)._doubleTap = false; const _upEvent = (e: PointerEvent): void => { - (target as any)._doubleTap = (Date.now() - (target as any)._lastTap < 300); - (target as any)._lastTap = Date.now(); const isClick = Math.abs(e.clientX - (target as any)._downX) < 4 && Math.abs(e.clientY - (target as any)._downY) < 4; upEvent(e, [e.clientX - (target as any)._downX, e.clientY - (target as any)._downY], isClick); if (isClick) { diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 11a74c4bc..1ccf474f2 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -1,5 +1,5 @@ import React = require("react"); -import { action, computed, IReactionDisposer, observable } from "mobx"; +import { action, computed, IReactionDisposer, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { computedFn } from "mobx-utils"; import { Doc, Opt } from "../../../fields/Doc"; @@ -41,7 +41,6 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument static RangePlayScript: ScriptField; static LabelPlayScript: ScriptField; - private _doubleTime: NodeJS.Timeout | undefined; // bcz: Hack! this must be called _doubleTime since setupMoveDragEvents will use that field name private _timeline: HTMLDivElement | null = null; private _markerStart: number = 0; @observable _markerEnd: number = 0; @@ -66,10 +65,9 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument } componentDidMount() { document.addEventListener("keydown", this.keyEvents, true); } - @action componentWillUnmount() { document.removeEventListener("keydown", this.keyEvents, true); - if (CollectionStackedTimeline.SelectingRegion === this) CollectionStackedTimeline.SelectingRegion = undefined; + if (CollectionStackedTimeline.SelectingRegion === this) runInAction(() => CollectionStackedTimeline.SelectingRegion = undefined); } anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag])); @@ -116,19 +114,13 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument if (rect && this.props.active()) { const wasPlaying = this.props.playing(); if (wasPlaying) this.props.Pause(); - else if (!this._doubleTime) { - this._doubleTime = setTimeout(() => { - this._doubleTime = undefined; - this.props.setTime((clientX - rect.x) / rect.width * this.duration); - }, 300); // 300ms is double-tap timeout - } const wasSelecting = CollectionStackedTimeline.SelectingRegion === this; - if (!wasSelecting) { - this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width); - CollectionStackedTimeline.SelectingRegion = this; - } setupMoveUpEvents(this, e, action(e => { + if (!wasSelecting && CollectionStackedTimeline.SelectingRegion !== this) { + this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width); + CollectionStackedTimeline.SelectingRegion = this; + } this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width); return false; }), @@ -149,7 +141,8 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument e.shiftKey && this.createAnchor(this.currentTime); !wasPlaying && doubleTap && this.props.Play(); }, - this.props.isSelected(true) || this.props.isChildActive()); + this.props.isSelected(true) || this.props.isChildActive(), undefined, + () => !wasPlaying && this.props.setTime((clientX - rect.x) / rect.width * this.duration)); } } @@ -219,13 +212,13 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument const newTime = (e: PointerEvent) => { const rect = (e.target as any).getBoundingClientRect(); return this.toTimeline(e.clientX - rect.x, rect.width); - } + }; const changeAnchor = (anchor: Doc, left: boolean, time: number) => { const timelineOnly = Cast(anchor[this.props.startTag], "number", null) !== undefined; if (timelineOnly) Doc.SetInPlace(anchor, left ? this.props.startTag : this.props.endTag, time, true); else left ? anchor._timecodeToShow = time : anchor._timecodeToHide = time; return false; - } + }; setupMoveUpEvents(this, e, (e) => changeAnchor(anchor, left, newTime(e)), (e) => { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 4d277dc1c..6c7512f7c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -818,9 +818,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P e.stopPropagation(); e.preventDefault(); if (!e.ctrlKey && MarqueeView.DragMarquee) this.setPan(this.panX() + e.deltaX, this.panY() + e.deltaY, "None", true); - else - // if (!this.props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc? - this.zoom(e.clientX, e.clientY, e.deltaY); + else this.zoom(e.clientX, e.clientY, e.deltaY); // if (!this.props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc? + } this.props.Document.targetScale = NumCast(this.props.Document[this.scaleFieldKey]); } |