fix click event triggered after move

CHANGELOG.md

@@ -14,6 +14,7 @@ Note that since we don't clearly distinguish between a public and private interf
 - Fix handling of PDB TER records (#549)
 - Add support for getting multiple loci from a representation (``.getAllLoci()``)
 - Add ``key`` property to intra- and inter-bonds for referencing source data
+- Fix click event triggered after move
 
 ## [v3.16.0] - 2022-08-25
 

src/mol-util/input/input-observer.ts

@@ -304,6 +304,7 @@ namespace InputObserver {
         let buttons = ButtonsType.create(ButtonsType.Flag.None);
         let button = ButtonsType.Flag.None;
         let isInside = false;
+        let hasMoved = false;
 
         const events = createEvents();
         const { drag, interactionEnd, wheel, pinch, gesture, click, move, leave, enter, resize, modifiers, key } = events;
@@ -577,12 +578,13 @@ namespace InputObserver {
             if (!mask(ev.clientX, ev.clientY)) return;
 
             eventOffset(pointerEnd, ev);
-            if (Vec2.distance(pointerEnd, pointerDown) < 4) {
+            if (!hasMoved && Vec2.distance(pointerEnd, pointerDown) < 4) {
                 const { pageX, pageY } = ev;
                 const [x, y] = pointerEnd;
 
                 click.next({ x, y, pageX, pageY, buttons, button, modifiers: getModifierKeys() });
             }
+            hasMoved = false;
         }
 
         function onPointerMove(ev: PointerEvent) {
@@ -604,6 +606,10 @@ namespace InputObserver {
             const isStart = dragging === DraggingState.Started;
             if (isStart && !mask(ev.clientX, ev.clientY)) return;
 
+            if (Vec2.distance(pointerEnd, pointerDown) >= 4) {
+                hasMoved = true;
+            }
+
             const [dx, dy] = pointerDelta;
             drag.next({ x, y, dx, dy, pageX, pageY, buttons, button, modifiers: getModifierKeys(), isStart });