H-5655: Refactor selection logic and migrate to @xyflow/react v12

.changeset/refactor-selection-logic.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Add multi-selection support with keyboard shortcuts, refactor selection logic, migrate to @xyflow/react v12

libs/@hashintel/petrinaut/package.json

@@ -50,13 +50,13 @@
     "@hashintel/refractive": "workspace:^",
     "@mantine/hooks": "8.3.5",
     "@monaco-editor/react": "4.8.0-rc.3",
+    "@xyflow/react": "12.10.1",
     "d3-array": "3.2.4",
     "d3-scale": "4.0.2",
     "elkjs": "0.11.0",
     "monaco-editor": "0.55.1",
     "react-icons": "5.5.0",
     "react-resizable-panels": "4.6.5",
-    "reactflow": "11.11.4",
     "typescript": "5.9.3",
     "uuid": "13.0.0",
     "vscode-languageserver-types": "3.17.5",
@@ -87,6 +87,7 @@
     "rolldown-plugin-dts": "0.22.4",
     "storybook": "10.2.13",
     "vite": "8.0.0-beta.18",
+    "vite-plugin-dts": "4.5.4",
     "vitest": "4.0.18"
   },
   "peerDependencies": {

libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts

@@ -2,7 +2,6 @@ import type { ElkNode } from "elkjs";
 import ELK from "elkjs";
 
 import type { SDCPN } from "../core/types/sdcpn";
-import { nodeDimensions } from "../views/SDCPN/styles/styling";
 
 /**
  * @see https://eclipse.dev/elk/documentation/tooldevelopers
@@ -38,6 +37,10 @@ export type NodePosition = {
  */
 export const calculateGraphLayout = async (
   sdcpn: SDCPN,
+  dimensions: {
+    place: { width: number; height: number };
+    transition: { width: number; height: number };
+  },
 ): Promise<Record<string, NodePosition>> => {
   if (sdcpn.places.length === 0) {
     return {};
@@ -47,13 +50,13 @@ export const calculateGraphLayout = async (
   const elkNodes: ElkNode["children"] = [
     ...sdcpn.places.map((place) => ({
       id: place.id,
-      width: nodeDimensions.place.width,
-      height: nodeDimensions.place.height,
+      width: dimensions.place.width,
+      height: dimensions.place.height,
     })),
     ...sdcpn.transitions.map((transition) => ({
       id: transition.id,
-      width: nodeDimensions.transition.width,
-      height: nodeDimensions.transition.height,
+      width: dimensions.transition.width,
+      height: dimensions.transition.height,
     })),
   ];
 
@@ -87,15 +90,21 @@ export const calculateGraphLayout = async (
 
   const updatedElements = await elk.layout(graph);
 
+  const placeIds = new Set(sdcpn.places.map((place) => place.id));
+
   /**
-   * ELK inserts the calculated position as a root 'x' and 'y'.
+   * ELK returns top-left positions, but the SDCPN store uses center
+   * coordinates, so we offset by half the node dimensions.
    */
   const positionsByNodeId: Record<string, NodePosition> = {};
   for (const child of updatedElements.children ?? []) {
     if (child.x !== undefined && child.y !== undefined) {
+      const nodeDimensions = placeIds.has(child.id)
+        ? dimensions.place
+        : dimensions.transition;
       positionsByNodeId[child.id] = {
-        x: child.x,
-        y: child.y,
+        x: child.x + nodeDimensions.width / 2,
+        y: child.y + nodeDimensions.height / 2,
       };
     }
   }

libs/@hashintel/petrinaut/src/petrinaut.tsx

@@ -1,4 +1,4 @@
-import "reactflow/dist/style.css";
+import "@xyflow/react/dist/style.css";
 import "./index.css";
 
 import { type FunctionComponent } from "react";

libs/@hashintel/petrinaut/src/state/editor-context.ts

@@ -5,6 +5,7 @@ import {
   DEFAULT_LEFT_SIDEBAR_WIDTH,
   DEFAULT_PROPERTIES_PANEL_WIDTH,
 } from "../constants/ui";
+import type { SelectionItem, SelectionMap } from "./selection";
 
 export type DraggingStateByNodeId = Record<
   string,
@@ -34,8 +35,9 @@ export type EditorState = {
   isBottomPanelOpen: boolean;
   bottomPanelHeight: number;
   activeBottomPanelTab: BottomPanelTab;
-  selectedResourceId: string | null;
-  selectedItemIds: Set<string>;
+  selection: SelectionMap;
+  /** Whether any items are currently selected. */
+  hasSelection: boolean;
   draggingStateByNodeId: DraggingStateByNodeId;
   timelineChartType: TimelineChartType;
   isPanelAnimating: boolean;
@@ -55,10 +57,13 @@ export type EditorActions = {
   toggleBottomPanel: () => void;
   setBottomPanelHeight: (height: number) => void;
   setActiveBottomPanelTab: (tab: BottomPanelTab) => void;
-  setSelectedResourceId: (id: string | null) => void;
-  setSelectedItemIds: (ids: Set<string>) => void;
-  addSelectedItemId: (id: string) => void;
-  removeSelectedItemId: (id: string) => void;
+  /** Check whether a given ID is in the current selection. */
+  isSelected: (id: string) => boolean;
+  setSelection: (
+    selection: SelectionMap | ((prev: SelectionMap) => SelectionMap),
+  ) => void;
+  selectItem: (item: SelectionItem) => void;
+  toggleItem: (item: SelectionItem) => void;
   clearSelection: () => void;
   setDraggingStateByNodeId: (state: DraggingStateByNodeId) => void;
   updateDraggingStateByNodeId: (
@@ -83,8 +88,8 @@ export const initialEditorState: EditorState = {
   isBottomPanelOpen: false,
   bottomPanelHeight: DEFAULT_BOTTOM_PANEL_HEIGHT,
   activeBottomPanelTab: "diagnostics",
-  selectedResourceId: null,
-  selectedItemIds: new Set(),
+  selection: new Map(),
+  hasSelection: false,
   draggingStateByNodeId: {},
   timelineChartType: "run",
   isPanelAnimating: false,
@@ -102,10 +107,10 @@ const DEFAULT_CONTEXT_VALUE: EditorContextValue = {
   toggleBottomPanel: () => {},
   setBottomPanelHeight: () => {},
   setActiveBottomPanelTab: () => {},
-  setSelectedResourceId: () => {},
-  setSelectedItemIds: () => {},
-  addSelectedItemId: () => {},
-  removeSelectedItemId: () => {},
+  isSelected: () => false,
+  setSelection: () => {},
+  selectItem: () => {},
+  toggleItem: () => {},
   clearSelection: () => {},
   setDraggingStateByNodeId: () => {},
   updateDraggingStateByNodeId: () => {},

libs/@hashintel/petrinaut/src/state/editor-provider.tsx

@@ -8,6 +8,7 @@ import {
   type EditorState,
   initialEditorState,
 } from "./editor-context";
+import type { SelectionItem, SelectionMap } from "./selection";
 import { useSyncEditorToSettings } from "./use-sync-editor-to-settings";
 import { UserSettingsContext } from "./user-settings-context";
 
@@ -44,7 +45,22 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     }, 500);
   };
 
-  const actions: EditorActions = {
+  const setSelection = (
+    selectionOrUpdater: SelectionMap | ((prev: SelectionMap) => SelectionMap),
+  ) =>
+    setState((prev) => {
+      const selection =
+        typeof selectionOrUpdater === "function"
+          ? selectionOrUpdater(prev.selection)
+          : selectionOrUpdater;
+      const hasSelection = selection.size > 0;
+      if (prev.hasSelection !== hasSelection) {
+        triggerPanelAnimation();
+      }
+      return { ...prev, selection, hasSelection };
+    });
+
+  const actions: Omit<EditorActions, "isSelected"> = {
     setGlobalMode: (mode) =>
       setState((prev) => ({ ...prev, globalMode: mode })),
     setEditionMode: (mode) =>
@@ -74,26 +90,39 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
       setState((prev) => ({ ...prev, bottomPanelHeight: height })),
     setActiveBottomPanelTab: (tab) =>
       setState((prev) => ({ ...prev, activeBottomPanelTab: tab })),
-    setSelectedResourceId: (id) => {
-      triggerPanelAnimation();
-      setState((prev) => ({ ...prev, selectedResourceId: id }));
+    setSelection,
+    selectItem: (item: SelectionItem) => {
+      setState((prev) => {
+        const newSelection: SelectionMap = new Map([[item.id, item]]);
+        if (!prev.hasSelection) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection: newSelection, hasSelection: true };
+      });
     },
-    setSelectedItemIds: (ids) =>
-      setState((prev) => ({ ...prev, selectedItemIds: ids })),
-    addSelectedItemId: (id) =>
+    toggleItem: (item: SelectionItem) => {
       setState((prev) => {
-        const newSet = new Set(prev.selectedItemIds);
-        newSet.add(id);
-        return { ...prev, selectedItemIds: newSet };
-      }),
-    removeSelectedItemId: (id) =>
+        const newSelection = new Map(prev.selection);
+        if (newSelection.has(item.id)) {
+          newSelection.delete(item.id);
+        } else {
+          newSelection.set(item.id, item);
+        }
+        const hasSelection = newSelection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection: newSelection, hasSelection };
+      });
+    },
+    clearSelection: () => {
       setState((prev) => {
-        const newSet = new Set(prev.selectedItemIds);
-        newSet.delete(id);
-        return { ...prev, selectedItemIds: newSet };
-      }),
-    clearSelection: () =>
-      setState((prev) => ({ ...prev, selectedItemIds: new Set() })),
+        if (prev.hasSelection) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection: new Map(), hasSelection: false };
+      });
+    },
     setDraggingStateByNodeId: (draggingState: DraggingStateByNodeId) =>
       setState((prev) => ({ ...prev, draggingStateByNodeId: draggingState })),
     updateDraggingStateByNodeId: (updater) =>
@@ -109,7 +138,8 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         ...prev,
         isLeftSidebarOpen: false,
         isBottomPanelOpen: false,
-        selectedResourceId: null,
+        selection: new Map(),
+        hasSelection: false,
       }));
     },
     setTimelineChartType: (chartType) =>
@@ -129,9 +159,13 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     timelineChartType: state.timelineChartType,
   });
 
+  const { selection } = state;
+  const isSelected = (id: string) => selection.has(id);
+
   const contextValue: EditorContextValue = {
     ...state,
     ...actions,
+    isSelected,
   };
 
   return (

libs/@hashintel/petrinaut/src/state/sdcpn-context.ts

@@ -10,6 +10,7 @@ import type {
   SDCPN,
   Transition,
 } from "../core/types/sdcpn";
+import type { SelectionMap } from "./selection";
 
 export const ARC_ID_PREFIX = "$A_";
 export type ArcIdPrefix = typeof ARC_ID_PREFIX;
@@ -101,7 +102,7 @@ export type MutationHelperFunctions = {
     | "differentialEquation"
     | "parameter"
     | null;
-  deleteItemsByIds: (ids: Set<string>) => void;
+  deleteItemsByIds: (items: SelectionMap) => void;
   layoutGraph: () => Promise<void>;
 };