Prevent widget from accidentally moving when clicked #671

Author: mvladic

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);

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();

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);

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,

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);