feat(interaction): the click does not use the 'click' event, but mousedown/mouseup

Author: arnobl

package-lock.json

@@ -60,7 +60,7 @@
     "eslint-plugin-unicorn": "56.0.1",
     "globals": "15.11.0",
     "husky": "9.0.11",
-    "interacto-nono": "0.5.0",
+    "interacto-nono": "0.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-mock-extended": "3.0.7",

package.json

@@ -12,8 +12,8 @@
  * along with Interacto.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {ClickTransition} from "../../fsm/ClickTransition";
 import {FSMImpl} from "../../fsm/FSMImpl";
+import {MouseTransition} from "../../fsm/MouseTransition";
 import {InteractionBase} from "../InteractionBase";
 import {PointDataImpl} from "../PointDataImpl";
 import type {PointData} from "../../../api/interaction/PointData";
@@ -34,12 +34,19 @@ export class ClickFSM extends FSMImpl {
     public constructor(logger: Logger, action?: (evt: MouseEvent) => void) {
         super(logger);
 
-        new ClickTransition(this.initState, this.addTerminalState("clicked"),
+        const down = this.addStdState("down");
+        const clicked = this.addTerminalState("clicked");
+
+        this.startingState = clicked;
+
+        new MouseTransition(this.initState, down, "mousedown",
             (evt: MouseEvent): void => {
                 this.setCheckButton(evt.button);
-                action?.(evt);
             },
             (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);
     }
 
     public getCheckButton(): number {

src/impl/interaction/library/Click.ts

@@ -466,7 +466,7 @@ describe("testing an accumulator", () => {
                 .on(elt)
                 .bind();
 
-            robot().click(elt);
+            robot().click(elt, 1, false);
 
             expect(val).toBe(1);
         });
@@ -484,7 +484,7 @@ describe("testing an accumulator", () => {
                 .on(elt)
                 .bind();
 
-            robot().click(elt, 2);
+            robot().click(elt, 2, false);
 
             expect(val).toBe(1);
         });

test/binder/Accumulator.test.ts

@@ -266,7 +266,7 @@ describe("using bindings", () => {
             .on(elt)
             .toProduce(() => new StubCmd(true))
             .bind();
-        robot().click(elt);
+        robot().click(elt, 1, false);
         expect(ctx.commands).toHaveLength(1);
     });
 
@@ -281,7 +281,7 @@ describe("using bindings", () => {
             .catch(fn)
             .bind();
 
-        robot(elt).click();
+        robot().click(elt, 1, false);
 
         expect(ctx.commands).toHaveLength(0);
         expect(fn).toHaveBeenCalledTimes(1);
@@ -293,7 +293,7 @@ describe("using bindings", () => {
             .on(elt)
             .toProduce(() => new StubCmd(true))
             .bind();
-        robot(elt).click({}, 2);
+        robot().click(elt, 2, false);
         expect(ctx.commands).toHaveLength(1);
     });
 
@@ -308,7 +308,7 @@ describe("using bindings", () => {
             .catch(fn)
             .bind();
 
-        robot(elt).click({}, 2);
+        robot().click(elt, 2, false);
 
         expect(ctx.commands).toHaveLength(0);
         expect(fn).toHaveBeenCalledTimes(1);
@@ -356,10 +356,10 @@ describe("using bindings", () => {
             .on(elt)
             .toProduce(() => new StubCmd(true))
             .bind();
-        robot(elt)
-            .click({}, 2)
+        robot()
+            .click(elt, 2, false)
             .mousemove()
-            .click({}, 2);
+            .click(elt, 2, false);
         expect(ctx.commands).toHaveLength(1);
     });
 
@@ -375,9 +375,9 @@ describe("using bindings", () => {
             .bind();
 
         robot(elt)
-            .click({}, 2)
+            .click({}, 2, false)
             .mousemove()
-            .click({}, 2);
+            .click({}, 2, false);
 
         expect(ctx.commands).toHaveLength(0);
         expect(fn).toHaveBeenCalledTimes(1);
@@ -616,12 +616,12 @@ describe("using bindings", () => {
             .bind();
 
         robot(elt)
-            .click({"button": 1})
+            .click({"button": 1}, 1, false)
             .runOnlyPendingTimers()
-            .auxclick({"button": 2}, 2)
+            .click({"button": 2}, 2, false)
             .mousemove()
             .mousemove()
-            .auxclick({"button": 2}, 2);
+            .click({"button": 2}, 2, false);
 
         expect(ctx.commands).toHaveLength(1);
     });
@@ -635,8 +635,8 @@ describe("using bindings", () => {
 
         robot(elt)
             .keepData()
-            .click({"button": 0})
-            .click();
+            .click({"button": 0}, 1, false)
+            .click(undefined, 1, false);
 
         expect(binding.interaction.isRunning()).toBeTruthy();
     });
@@ -656,12 +656,12 @@ describe("using bindings", () => {
             .bind();
 
         robot(elt)
-            .click({"button": 1})
+            .click({"button": 1}, 1, false)
             .runOnlyPendingTimers()
-            .auxclick({"button": 2}, 2)
+            .click({"button": 2}, 2, false)
             .mousemove()
             .mousemove()
-            .auxclick({"button": 2}, 2);
+            .click({"button": 2}, 2, false);
 
         expect(first).toHaveBeenCalledTimes(1);
         expect(end).toHaveBeenCalledTimes(1);
@@ -676,7 +676,7 @@ describe("using bindings", () => {
             .log("interaction")
             .bind();
 
-        robot(elt).click();
+        robot().click(elt, 1, false);
 
         expect(ctx.commands).toHaveLength(1);
     });
@@ -1845,8 +1845,8 @@ describe("using bindings", () => {
                 .toProduce((_i: ThenData<Array<KeyData | PointData>>) => new StubCmd(true))
                 .bind();
 
-            robot(elt)
-                .click()
+            robot()
+                .click(elt, 1, false)
                 .keydown()
                 .keyup();
 

test/binding/Bindings.test.ts

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

test/fsm/VisitorFSMDepthFirst.test.ts

@@ -13,12 +13,12 @@
  */
 
 import {Click, PointDataImpl} from "../../../src/interacto";
-import {createMouseEvent2} from "../StubEvents";
 import {beforeEach, describe, expect, jest, test} from "@jest/globals";
 import {robot} from "interacto-nono";
 import {mock} from "jest-mock-extended";
 import type {FSMHandler, Logger} from "../../../src/interacto";
 import type {MockProxy} from "jest-mock-extended";
+import {createMouseEvent2} from "../StubEvents";
 
 describe("using a click interaction", () => {
     let interaction: Click;
@@ -36,22 +36,31 @@ describe("using a click interaction", () => {
 
     test("click on a element starts and stops the interaction Click", () => {
         interaction.registerToNodes([canvas]);
-        canvas.click();
+        robot(canvas).click({"button": 2}, 1, false);
         expect(handler.fsmStarts).toHaveBeenCalledTimes(1);
         expect(handler.fsmStops).toHaveBeenCalledTimes(1);
     });
 
+    test("not same button does not trigger the click", () => {
+        interaction.registerToNodes([canvas]);
+        robot(canvas)
+            .mousedown({"button": 2})
+            .mouseup({"button": 1});
+        expect(handler.fsmStarts).not.toHaveBeenCalled();
+        expect(handler.fsmStops).not.toHaveBeenCalled();
+    });
+
     test("log interaction is ok", () => {
         interaction.log(true);
         interaction.registerToNodes([canvas]);
-        canvas.click();
+        robot(canvas).click(undefined, 1, false);
 
-        expect(logger.logInteractionMsg).toHaveBeenCalledTimes(4);
+        expect(logger.logInteractionMsg).toHaveBeenCalledTimes(5);
     });
 
     test("no log interaction is ok", () => {
         interaction.registerToNodes([canvas]);
-        canvas.click();
+        robot(canvas).click(undefined, 1, false);
 
         expect(logger.logInteractionMsg).not.toHaveBeenCalled();
     });
@@ -65,18 +74,11 @@ describe("using a click interaction", () => {
     test("press on a canvas then move don't starts the interaction", () => {
         interaction.registerToNodes([canvas]);
         robot(canvas)
-            .mousedown()
-            .mousemove();
+            .mousedown({"button": 3})
+            .mousemove({"button": 3});
         expect(handler.fsmStarts).not.toHaveBeenCalled();
     });
 
-    test("specific mouse button checking OK", () => {
-        interaction.registerToNodes([canvas]);
-        robot().auxclick({"target": canvas, "button": 2});
-        expect(handler.fsmStarts).toHaveBeenCalledTimes(1);
-        expect(handler.fsmStops).toHaveBeenCalledTimes(1);
-    });
-
     test("click Data", () => {
         const data = new PointDataImpl();
         const expected = new PointDataImpl();
@@ -106,7 +108,8 @@ describe("using a click interaction", () => {
         handler.fsmStops = jest.fn(() => {
             data.copy(interaction.data);
         });
-        interaction.processEvent(createMouseEvent2("click", expected));
+        interaction.processEvent(createMouseEvent2("mousedown", expected));
+        interaction.processEvent(createMouseEvent2("mouseup", expected));
         expect(data).toStrictEqual(expected);
     });
 
@@ -117,7 +120,8 @@ describe("using a click interaction", () => {
             data.copy(interaction.data);
         });
         interaction.registerToNodes([canvas]);
-        robot().click({"target": canvas, "button": 1, "screenX": 111, "screenY": 222, "clientX": 11, "clientY": 22});
+        robot().click({"target": canvas, "button": 1, "screenX": 111, "screenY": 222, "clientX": 11, "clientY": 22}, 1, false);
+
         expect(data.clientX).toBe(11);
         expect(data.clientY).toBe(22);
         expect(data.screenX).toBe(111);
@@ -129,7 +133,8 @@ describe("using a click interaction", () => {
         const newHandler = mock<FSMHandler>();
         interaction.fsm.addHandler(newHandler);
         interaction.registerToNodes([canvas]);
-        robot().click({"target": canvas, "button": 1, "screenX": 111, "screenY": 222, "clientX": 11, "clientY": 22});
+        robot().click({"target": canvas, "button": 1, "screenX": 111, "screenY": 222, "clientX": 11, "clientY": 22}, 1, false);
+
         expect(newHandler.fsmReinit).toHaveBeenCalledTimes(1);
         expect(interaction.data.clientX).toBe(0);
         expect(interaction.data.clientY).toBe(0);

test/interaction/library/Click.test.ts

@@ -43,7 +43,7 @@ describe("using a click interaction with a currenttarget", () => {
         });
 
         interaction.registerToNodes([groupe]);
-        robot().click(circle);
+        robot(circle).click(undefined, 1, false);
         expect(data.target).toBe(circle);
     });
 });