diff --git a/packages/project-editor/features/changes/flow-viewer.tsx b/packages/project-editor/features/changes/flow-viewer.tsx index 3052a465..5f15179f 100644 --- a/packages/project-editor/features/changes/flow-viewer.tsx +++ b/packages/project-editor/features/changes/flow-viewer.tsx @@ -442,7 +442,8 @@ export const Canvas = observer( movementX: event.movementX ?? 0, movementY: event.movementY ?? 0, ctrlKey: event.ctrlKey, - shiftKey: event.shiftKey + shiftKey: event.shiftKey, + timeStamp: event.timeStamp }; this.mouseHandler.down(this.props.flowContext, event); @@ -465,7 +466,8 @@ export const Canvas = observer( ? this.mouseHandler.lastPointerEvent.movementY : 0, ctrlKey: event.ctrlKey, - shiftKey: event.shiftKey + shiftKey: event.shiftKey, + timeStamp: event.timeStamp }; this.mouseHandler.move(this.props.flowContext, event); diff --git a/packages/project-editor/features/page/PageTimeline.tsx b/packages/project-editor/features/page/PageTimeline.tsx index 5562ce54..ff637809 100644 --- a/packages/project-editor/features/page/PageTimeline.tsx +++ b/packages/project-editor/features/page/PageTimeline.tsx @@ -612,7 +612,8 @@ const TimelineEditor = observer( movementX: e.movementX ?? 0, movementY: e.movementY ?? 0, ctrlKey: e.ctrlKey, - shiftKey: e.shiftKey + shiftKey: e.shiftKey, + timeStamp: e.timeStamp }; const dragSettings = hitTest(this.props.timelineState, e, x1, y1); @@ -763,7 +764,8 @@ const TimelineEditor = observer( movementX: e.movementX ?? 0, movementY: e.movementY ?? 0, ctrlKey: e.ctrlKey, - shiftKey: e.shiftKey + shiftKey: e.shiftKey, + timeStamp: e.timeStamp }; const rectSvg = this.svgRef.current!.getBoundingClientRect(); diff --git a/packages/project-editor/flow/editor/editor.tsx b/packages/project-editor/flow/editor/editor.tsx index 7b42f342..5e4ae929 100644 --- a/packages/project-editor/flow/editor/editor.tsx +++ b/packages/project-editor/flow/editor/editor.tsx @@ -646,7 +646,8 @@ export const Canvas = observer( movementX: event.movementX ?? 0, movementY: event.movementY ?? 0, ctrlKey: event.ctrlKey, - shiftKey: event.shiftKey + shiftKey: event.shiftKey, + timeStamp: event.timeStamp }; this.mouseHandler.down(this.props.flowContext, event); @@ -669,7 +670,8 @@ export const Canvas = observer( ? this.mouseHandler.lastPointerEvent.movementY : 0, ctrlKey: event.ctrlKey, - shiftKey: event.shiftKey + shiftKey: event.shiftKey, + timeStamp: event.timeStamp }; this.mouseHandler.move(this.props.flowContext, event); diff --git a/packages/project-editor/flow/editor/mouse-handler.tsx b/packages/project-editor/flow/editor/mouse-handler.tsx index 99f0ce35..32b04c6d 100644 --- a/packages/project-editor/flow/editor/mouse-handler.tsx +++ b/packages/project-editor/flow/editor/mouse-handler.tsx @@ -56,6 +56,7 @@ export interface IPointerEvent { movementY: number; ctrlKey: boolean; shiftKey: boolean; + timeStamp: number; } //////////////////////////////////////////////////////////////////////////////// @@ -91,7 +92,7 @@ export class MouseHandler implements IMouseHandler { down(context: IFlowContext, event: IPointerEvent) { this.transform = context.viewState.transform; - this.timeAtDown = new Date().getTime(); + this.timeAtDown = event.timeStamp; this.lastOffsetPoint = this.offsetPointAtDown = this.transform.pointerEventToOffsetPoint(event); @@ -106,7 +107,7 @@ export class MouseHandler implements IMouseHandler { move(context: IFlowContext, event: IPointerEvent) { this.transform = context.viewState.transform; - this.elapsedTime = new Date().getTime() - this.timeAtDown; + this.elapsedTime = event.timeStamp - this.timeAtDown; let offsetPoint = this.transform.pointerEventToOffsetPoint(event); @@ -395,13 +396,13 @@ export class DragMouseHandler extends MouseHandlerWithSnapLines { move(context: IFlowContext, event: IPointerEvent) { super.move(context, event); - if (this.elapsedTime < 100 && this.distance < 20) { - return; - } - this.left += this.movement.x / context.viewState.transform.scale; this.top += this.movement.y / context.viewState.transform.scale; + if (this.elapsedTime < 200 && this.distance < 10) { + return; + } + const { left, top } = this.snapLines.dragSnap( this.left, this.top, diff --git a/packages/project-editor/flow/runtime-viewer/viewer.tsx b/packages/project-editor/flow/runtime-viewer/viewer.tsx index 00a5d6d7..7e473f05 100644 --- a/packages/project-editor/flow/runtime-viewer/viewer.tsx +++ b/packages/project-editor/flow/runtime-viewer/viewer.tsx @@ -322,7 +322,8 @@ export const Canvas = observer( movementX: event.movementX ?? 0, movementY: event.movementY ?? 0, ctrlKey: event.ctrlKey, - shiftKey: event.shiftKey + shiftKey: event.shiftKey, + timeStamp: event.timeStamp }; this.mouseHandler.down(this.props.flowContext, event); @@ -345,7 +346,8 @@ export const Canvas = observer( ? this.mouseHandler.lastPointerEvent.movementY : 0, ctrlKey: event.ctrlKey, - shiftKey: event.shiftKey + shiftKey: event.shiftKey, + timeStamp: event.timeStamp }; this.mouseHandler.move(this.props.flowContext, event);