feat(interaction): toleranceRate parameter added to click-based interactions

Author: arnobl

src/impl/interaction/library/Click.ts

@@ -30,23 +30,34 @@ export class ClickFSM extends FSMImpl {
      * Creates the FSM
      * @param logger - The logger to use for this interaction
      * @param action - The action executed on a click
+     * @param toleranceMove - The accepted number of pixel moves between the pressure and the release of the click
      */
-    public constructor(logger: Logger, action?: (evt: MouseEvent) => void) {
+    public constructor(logger: Logger, action?: (evt: MouseEvent) => void, toleranceMove?: number) {
         super(logger);
 
         const down = this.addStdState("down");
         const clicked = this.addTerminalState("clicked");
 
         this.startingState = clicked;
 
+        let firstX = 0;
+        let firstY = 0;
+
         new MouseTransition(this.initState, down, "mousedown",
             (evt: MouseEvent): void => {
+                firstX = evt.clientX;
+                firstY = evt.clientY;
                 this.setCheckButton(evt.button);
             },
             (evt: MouseEvent): boolean => this.checkButton === undefined || evt.button === this.checkButton);
 
         new MouseTransition(down, clicked, "mouseup", action,
             (evt: MouseEvent): boolean => this.checkButton === undefined || evt.button === this.checkButton);
+
+        if (toleranceMove !== undefined) {
+            new MouseTransition(down, this.addCancellingState("moved"), "mousemove", undefined,
+                evt => Math.abs(firstX - evt.clientX) > toleranceMove || Math.abs(firstY - evt.clientY) > toleranceMove);
+        }
     }
 
     public getCheckButton(): number {
@@ -76,11 +87,12 @@ export class Click extends InteractionBase<PointData, PointDataImpl> {
      * @param fsm - The optional FSM provided for the interaction
      * @param data - The interaction data to use
      * @param name - The name of the user interaction
+     * @param toleranceMove - The accepted number of pixel moves between the pressure and the release of the click
      */
-    public constructor(logger: Logger, fsm?: ClickFSM, data?: PointDataImpl, name?: string) {
+    public constructor(logger: Logger, fsm?: ClickFSM, data?: PointDataImpl, name?: string, toleranceMove?: number) {
         const theFSM = fsm ?? new ClickFSM(logger, (evt: MouseEvent): void => {
             this._data.copy(evt);
-        });
+        }, toleranceMove);
         super(theFSM, data ?? new PointDataImpl(), logger, name ?? Click.name);
     }
 }

src/impl/interaction/library/DoubleClick.ts

@@ -59,16 +59,18 @@ export class DoubleClickFSM extends FSMImpl {
 
     private checkButton: number | undefined;
 
-    public constructor(logger: Logger, subAction?: (evt: MouseEvent) => void) {
+    public constructor(logger: Logger, subAction?: (evt: MouseEvent) => void, toleranceMove?: number) {
         super(logger);
-        this.firstClickFSM = new ClickFSM(logger, subAction);
-        this.sndClickFSM = new ClickFSM(logger);
+        this.firstClickFSM = new ClickFSM(logger, subAction, toleranceMove);
+        this.sndClickFSM = new ClickFSM(logger, undefined, toleranceMove);
 
         const errorHandler = {
             "fsmError": (err: unknown): void => {
                 this.notifyHandlerOnError(err);
             }
         };
+        let firstX = 0;
+        let firstY = 0;
 
         this.firstClickFSM.addHandler(errorHandler);
         this.sndClickFSM.addHandler(errorHandler);
@@ -77,12 +79,18 @@ export class DoubleClickFSM extends FSMImpl {
         const clicked = this.addStdState("clicked");
 
         new SubFSMTransitionImpl(this.initState, clicked, this.firstClickFSM,
-            (): void => {
+            (evt: Event): void => {
                 this.setCheckButton(this.firstClickFSM.getCheckButton());
+                if (evt instanceof MouseEvent) {
+                    firstX = evt.clientX;
+                    firstY = evt.clientY;
+                }
             });
 
-        new MouseTransition(clicked, cancelled, "mousemove", undefined,
-            (ev: Event): boolean => (this.checkButton === undefined || ev instanceof MouseEvent && ev.button === this.checkButton));
+        if (toleranceMove !== undefined) {
+            new MouseTransition(clicked, cancelled, "mousemove", undefined,
+                (evt: MouseEvent): boolean => Math.abs(firstX - evt.clientX) > toleranceMove || Math.abs(firstY - evt.clientY) > toleranceMove);
+        }
 
         new TimeoutTransition(clicked, cancelled, DoubleClickFSM.timeGapSupplier);
         new SubFSMTransitionImpl(clicked, this.addTerminalState("dbleclicked", true), this.sndClickFSM);
@@ -125,10 +133,18 @@ export class DoubleClickFSM extends FSMImpl {
  * @category Interaction Library
  */
 export class DoubleClick extends InteractionBase<PointData, PointDataImpl> {
-    public constructor(logger: Logger, fsm?: DoubleClickFSM, data?: PointDataImpl, name?: string) {
+    /**
+     * Creates the interaction
+     * @param logger - The logger to use for this interaction
+     * @param fsm - The optional FSM provided for the interaction
+     * @param data - The interaction data to use
+     * @param name - The name of the user interaction
+     * @param toleranceMove - The accepted number of pixel moves between the pressure and the release of each click
+     */
+    public constructor(logger: Logger, fsm?: DoubleClickFSM, data?: PointDataImpl, name?: string, toleranceMove?: number) {
         const theFSM = fsm ?? new DoubleClickFSM(logger, (evt: MouseEvent): void => {
             this._data.copy(evt);
-        });
+        }, toleranceMove);
         super(theFSM, data ?? new PointDataImpl(), logger, name ?? DoubleClick.name);
         /*
          * We give the interaction to the first click as this click interaction

src/impl/interaction/library/DragLock.ts

@@ -36,10 +36,11 @@ class DragLockFSM extends FSMImpl {
     protected checkButton: number | undefined;
 
     public constructor(logger: Logger, handler: DragLockFSMHandler,
-                       dbleClick1Action: (evt: MouseEvent) => void, dbleClick2Action: (evt: MouseEvent) => void) {
+                       dbleClick1Action: (evt: MouseEvent) => void,
+                       dbleClick2Action: (evt: MouseEvent) => void, toleranceMove?: number) {
         super(logger);
-        this.firstDbleClick = new DoubleClickFSM(logger, dbleClick1Action);
-        this.sndDbleClick = new DoubleClickFSM(logger, dbleClick2Action);
+        this.firstDbleClick = new DoubleClickFSM(logger, dbleClick1Action, toleranceMove);
+        this.sndDbleClick = new DoubleClickFSM(logger, dbleClick2Action, toleranceMove);
 
         const cancelDbleClick = new DoubleClickFSM(logger);
         const errorHandler = {
@@ -108,8 +109,9 @@ export class DragLock extends InteractionBase<SrcTgtPointsData<PointData>, SrcTg
      * Creates a drag lock.
      * @param logger - The logger to use for this interaction
      * @param name - The name of the user interaction
+     * @param toleranceMove - The accepted number of pixel moves between the pressure and the release of the click
      */
-    public constructor(logger: Logger, name?: string) {
+    public constructor(logger: Logger, name?: string, toleranceMove?: number) {
         const handler: DragLockFSMHandler = {
             "onMove": (evt: MouseEvent): void => {
                 this._data.tgt.copy(evt);
@@ -124,7 +126,7 @@ export class DragLock extends InteractionBase<SrcTgtPointsData<PointData>, SrcTg
             this._data.src.copy(evt);
         }, (evt: MouseEvent): void => {
             this._data.tgt.copy(evt);
-        });
+        }, toleranceMove);
 
         super(theFSM, new SrcTgtPointsDataImpl(), logger, name ?? DragLock.name);
 

test/fsm/VisitorFSMDepthFirst.test.ts

@@ -96,7 +96,7 @@ describe("using the std FSM visitor implementation", () => {
     test("visiting the double click FSM works", () => {
         visitedFSM = new DoubleClickFSM(mock<Logger>());
         visitedFSM.acceptVisitor(visitor);
-        expect(visitor.res).toBe(">i[init]>i[init]-mousedown-s[down]-mouseup-t[clicked]s[clicked]-mousemove-c[cancelled]-timeout-c[cancelled]>i[init]-mousedown-s[down]-mouseup-t[clicked]t[dbleclicked]");
+        expect(visitor.res).toBe(">i[init]>i[init]-mousedown-s[down]-mouseup-t[clicked]s[clicked]-timeout-c[cancelled]>i[init]-mousedown-s[down]-mouseup-t[clicked]t[dbleclicked]");
     });
 
     test("visiting the non-cancellable DnD FSM works", () => {