feat: adds pan and pinch nav mode like figma (#7410)

* Adds Figma pan modes

* Added selection on drag

* Changed multi selection key code to shift

* Changed tests to have correct modifiers

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -30,6 +30,7 @@ import {
   ReactFlow,
   reconnectEdge,
   SelectionDragHandler,
+  SelectionMode,
 } from "@xyflow/react";
 import _, { cloneDeep } from "lodash";
 import {
@@ -570,7 +571,9 @@ export default function Page({
             onNodeDragStop={onNodeDragStop}
             onDrop={onDrop}
             onSelectionChange={onSelectionChange}
+            selectionMode={SelectionMode.Partial}
             deleteKeyCode={[]}
+            multiSelectionKeyCode={["Shift"]}
             fitView={isEmptyFlow.current ? false : true}
             fitViewOptions={{
               minZoom: 0.2,
@@ -579,9 +582,9 @@ export default function Page({
             className="theme-attribution"
             minZoom={0.2}
             maxZoom={3}
-            zoomOnScroll={!view}
+            panOnDrag={[1, 2]}
-            zoomOnPinch={!view}
+            panOnScroll={!view}
-            panOnDrag={!view}
+            selectionOnDrag={!view}
             panActivationKeyCode={""}
             proOptions={{ hideAttribution: true }}
             onPaneClick={onPaneClick}

src/frontend/tests/core/features/group.spec.ts

@@ -17,15 +17,9 @@ test.describe("group node test", () => {
       await page.getByTestId("fit_view").first().click();
 
       await page.getByTestId("title-OpenAI").click();
-      await page
+      await page.getByTestId("title-OpenAI").click({ modifiers: ["Shift"] });
-        .getByTestId("title-OpenAI")
+      await page.getByTestId("title-Prompt").click({ modifiers: ["Shift"] });
-        .click({ modifiers: ["ControlOrMeta"] });
+      await page.getByTestId("title-OpenAI").click({ modifiers: ["Shift"] });
-      await page
-        .getByTestId("title-Prompt")
-        .click({ modifiers: ["ControlOrMeta"] });
-      await page
-        .getByTestId("title-OpenAI")
-        .click({ modifiers: ["ControlOrMeta"] });
 
       await page.getByRole("button", { name: "Group" }).click();
       await page.getByTestId("title-Group").click();

src/frontend/tests/core/features/saveComponents.spec.ts

@@ -55,7 +55,7 @@ test.describe("save component tests", () => {
       await zoomOut(page, 2);
 
       await page.getByTestId("title-Agent Initializer").click({
-        modifiers: ["Control"],
+        modifiers: ["Shift"],
       });
 
       await page.getByRole("button", { name: "Group" }).click();

src/frontend/tests/core/features/toolModeGroup.spec.ts

@@ -16,12 +16,8 @@ test.describe("group node test", () => {
         .click();
       await page.getByTestId("fit_view").first().click();
 
-      await page
+      await page.getByTestId("title-OpenAI").click({ modifiers: ["Shift"] });
-        .getByTestId("title-OpenAI")
+      await page.getByTestId("title-Prompt").click({ modifiers: ["Shift"] });
-        .click({ modifiers: ["ControlOrMeta"] });
-      await page
-        .getByTestId("title-Prompt")
-        .click({ modifiers: ["ControlOrMeta"] });
 
       await page.getByRole("button", { name: "Group" }).click();
       await page.getByTestId("title-Group").click();

src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts

@@ -170,7 +170,7 @@ test(
     await page
       .getByTestId("title-Combine Text")
       .first()
-      .click({ modifiers: ["ControlOrMeta"] });
+      .click({ modifiers: ["Shift"] });
 
     await page.waitForSelector('[data-testid="group-node"]', {
       timeout: 3000,