Switch to move first

cypress/integration/board.spec.js

@@ -33,26 +33,27 @@ describe("Board interactions", () => {
     cy.get("[title='Add an item']");
   });
 
-  it("Pan board with middle click", () => {
+  it("Pan board with left click when move first", () => {
     cy.get(".board")
       .trigger("pointerdown", {
+        force: true,
         clientX: 100,
         clientY: 100,
         pointerId: 1,
-        buttons: 4,
+        buttons: 1,
       })
       .trigger("pointermove", {
         clientX: 200,
         clientY: 200,
         pointerId: 1,
         force: true,
-        buttons: 4,
+        buttons: 1,
       })
       .trigger("pointerup", {
         force: true,
         pointerId: 1,
         isPrimary: true,
-        buttons: 4,
+        buttons: 1,
       });
     cy.get(".board-pane").should(
       "have.css",
@@ -61,7 +62,10 @@ describe("Board interactions", () => {
     );
   });
 
-  it("Pan board with left click and altKey ", () => {
+  it("Pan board with left click and meta when in select mode", () => {
+    cy.get("[title^='Switch to select mode']").click({
+      scrollBehavior: false,
+    });
     cy.get(".board")
       .trigger("pointerdown", {
         buttons: 1,
@@ -92,8 +96,8 @@ describe("Board interactions", () => {
     );
   });
 
-  it("Pan board with left click when is main action", () => {
-    cy.get("[title^='Switch to move mode']").click({
+  it("Pan board with middle click when select is main action", () => {
+    cy.get("[title^='Switch to select mode']").click({
       scrollBehavior: false,
     });
 
@@ -107,7 +111,7 @@ describe("Board interactions", () => {
         pointerId: 1,
         force: true,
         scrollBehavior: false,
-        buttons: 1,
+        buttons: 4,
       })
       .trigger("pointermove", {
         button: 0,
@@ -117,7 +121,7 @@ describe("Board interactions", () => {
         clientY: 400,
         pointerId: 1,
         force: true,
-        buttons: 1,
+        buttons: 4,
         scrollBehavior: false,
       })
       .trigger("pointerup", {
@@ -125,7 +129,7 @@ describe("Board interactions", () => {
         pointerId: 1,
         isPrimary: true,
         scrollBehavior: false,
-        buttons: 1,
+        buttons: 4,
       });
     cy.get(".board-pane").should(
       "have.css",

cypress/integration/selection.spec.js

@@ -26,14 +26,14 @@ describe("Selection action", () => {
       .should("have.css", "transform", "none");
   });
 
-  it("should select multiple items with left click ", () => {
+  it("should select multiple items with right click ", () => {
     const posInit = {
       clientX: 400,
       clientY: 210,
     };
     cy.get(".board")
       .trigger("pointerdown", {
-        buttons: 1,
+        buttons: 4,
         pointerId: 1,
         isPrimary: true,
         scrollBehavior: false,
@@ -41,7 +41,7 @@ describe("Selection action", () => {
         ...posInit,
       })
       .trigger("pointermove", {
-        buttons: 1,
+        buttons: 4,
         force: true,
         pointerId: 1,
         isPrimary: true,

src/games/demo_en.json

@@ -23,7 +23,7 @@
       "type": "note",
       "x": -190,
       "y": -259,
-      "value": "- Middle or right click on the board to move the board\n- Wheel to zoom",
+      "value": "- Left click on the board to move the board\n- Wheel to zoom",
       "label": "With a mouse"
     },
     {
@@ -119,7 +119,7 @@
       "type": "note",
       "x": 135,
       "y": 152,
-      "value": "- You can start to select multiple items by clicking outside of any item and moving the mouse.\n- Then you can move all items",
+      "value": "- You can start to select multiple items by clicking outside of any item with the left button and moving the mouse.\n- Then you can move all items",
       "label": "Multiple items"
     },
     {

src/games/demo_fr.json

@@ -26,7 +26,7 @@
       "type": "note",
       "x": -190,
       "y": -256,
-      "value": "- Cliquez avec le bouton du milieu ou de gauche pour déplacer le plateau\n- La molette permet de zoomer",
+      "value": "- Cliquez avec le bouton de gauche pour déplacer le plateau\n- La molette permet de zoomer",
       "label": "Avec une souris",
       "locked": true
     },
@@ -138,7 +138,7 @@
       "type": "note",
       "x": 125,
       "y": 142,
-      "value": "- Pour sélectionner plusieurs élément cliquez en dehors d'un élément et tout en maintenant le bouton déplacez la souris. Relachez quand vous êtes satisfait\n- Vous pouvez alors déplacer tous les élements en même temps",
+      "value": "- Pour sélectionner plusieurs élément cliquez en dehors d'un élément et tout en maintenant le bouton droit de la souris et déplacez la. Relâchez quand vous êtes satisfait\n- Vous pouvez alors déplacer tous les éléments en même temps",
       "label": "Plusieurs éléments",
       "width": "300.0",
       "height": "224.0",

src/views/BoardView/ActionBar.jsx

@@ -81,14 +81,6 @@ const ActionBar = ({
         {editMode && <EditInfoButton BoardFormComponent={BoardFormComponent} />}
         <div className="spacer" />
         <Touch
-          onClick={() => setMoveFirst(false)}
-          alt={t("Select mode")}
-          label={t("Select")}
-          title={t("Switch to select mode")}
-          icon={"mouse-pointer"}
-          active={!moveFirst}
-        />
-        <Touch
           onClick={() => setMoveFirst(true)}
           alt={t("Move mode")}
           label={t("Move")}
@@ -97,6 +89,14 @@ const ActionBar = ({
           active={moveFirst}
         />
         <Touch
+          onClick={() => setMoveFirst(false)}
+          alt={t("Select mode")}
+          label={t("Select")}
+          title={t("Switch to select mode")}
+          icon={"mouse-pointer"}
+          active={!moveFirst}
+        />
+        <Touch
           onClick={() => setHideMenu((prev) => !prev)}
           alt={hideMenu ? t("Show menu") : t("Hide menu")}
           label={hideMenu ? t("Show menu") : t("Hide menu")}

src/views/BoardView/BoardView.jsx

@@ -33,7 +33,7 @@ export const BoardView = ({
 
   const [boardConfig] = useBoardConfig();
 
-  const [moveFirst, setMoveFirst] = React.useState(false);
+  const [moveFirst, setMoveFirst] = React.useState(true);
   const [hideMenu, setHideMenu] = React.useState(false);
   const { editItem, setEditItem } = useGlobalConf();