H-5655: Add isSelected/hasSelection to EditorContext and type deleteItemsByIds

Expose `isSelected(id)` and `hasSelection` from EditorContext so consumers
no longer need direct access to the SelectionMap for simple lookups. Change
`deleteItemsByIds` to accept typed SelectionMap, enabling it to partition
by item type and skip irrelevant collections. Migrate all 12 UI consumers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: kube

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

@@ -36,6 +36,8 @@ export type EditorState = {
   bottomPanelHeight: number;
   activeBottomPanelTab: BottomPanelTab;
   selection: SelectionMap;
+  /** Whether any items are currently selected. */
+  hasSelection: boolean;
   draggingStateByNodeId: DraggingStateByNodeId;
   timelineChartType: TimelineChartType;
   isPanelAnimating: boolean;
@@ -55,6 +57,8 @@ export type EditorActions = {
   toggleBottomPanel: () => void;
   setBottomPanelHeight: (height: number) => void;
   setActiveBottomPanelTab: (tab: BottomPanelTab) => void;
+  /** Check whether a given ID is in the current selection. */
+  isSelected: (id: string) => boolean;
   setSelection: (
     selection: SelectionMap | ((prev: SelectionMap) => SelectionMap),
   ) => void;
@@ -87,6 +91,7 @@ export const initialEditorState: EditorState = {
   bottomPanelHeight: DEFAULT_BOTTOM_PANEL_HEIGHT,
   activeBottomPanelTab: "diagnostics",
   selection: new Map(),
+  hasSelection: false,
   draggingStateByNodeId: {},
   timelineChartType: "run",
   isPanelAnimating: false,
@@ -104,6 +109,7 @@ const DEFAULT_CONTEXT_VALUE: EditorContextValue = {
   toggleBottomPanel: () => {},
   setBottomPanelHeight: () => {},
   setActiveBottomPanelTab: () => {},
+  isSelected: () => false,
   setSelection: () => {},
   selectItem: () => {},
   toggleItem: () => {},

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

@@ -1,4 +1,4 @@
-import { use, useRef, useState } from "react";
+import { use, useCallback, useRef, useState } from "react";
 
 import {
   type DraggingStateByNodeId,
@@ -45,7 +45,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     }, 500);
   };
 
-  const actions: EditorActions = {
+  const actions: Omit<EditorActions, "isSelected"> = {
     setGlobalMode: (mode) =>
       setState((prev) => ({ ...prev, globalMode: mode })),
     setEditionMode: (mode) =>
@@ -83,22 +83,19 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
           typeof selectionOrUpdater === "function"
             ? selectionOrUpdater(prev.selection)
             : selectionOrUpdater;
-        const visibilityChanged =
-          (prev.selection.size === 0) !== (selection.size === 0);
-        if (visibilityChanged) {
+        const hasSelection = selection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection };
+        return { ...prev, selection, hasSelection };
       }),
     selectItem: (item: SelectionItem) => {
       setState((prev) => {
-        const wasEmpty = prev.selection.size === 0;
         const newSelection: SelectionMap = new Map([[item.id, item]]);
-        const willBeEmpty = false;
-        if (wasEmpty !== willBeEmpty) {
+        if (!prev.hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: newSelection };
+        return { ...prev, selection: newSelection, hasSelection: true };
       });
     },
     toggleItem: (item: SelectionItem) => {
@@ -109,12 +106,11 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         } else {
           newSelection.set(item.id, item);
         }
-        const visibilityChanged =
-          (prev.selection.size === 0) !== (newSelection.size === 0);
-        if (visibilityChanged) {
+        const hasSelection = newSelection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: newSelection };
+        return { ...prev, selection: newSelection, hasSelection };
       });
     },
     addToSelection: (items: SelectionItem[]) => {
@@ -123,12 +119,11 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         for (const item of items) {
           newSelection.set(item.id, item);
         }
-        const visibilityChanged =
-          (prev.selection.size === 0) !== (newSelection.size === 0);
-        if (visibilityChanged) {
+        const hasSelection = newSelection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: newSelection };
+        return { ...prev, selection: newSelection, hasSelection };
       });
     },
     removeFromSelection: (ids: string[]) => {
@@ -137,20 +132,19 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         for (const id of ids) {
           newSelection.delete(id);
         }
-        const visibilityChanged =
-          (prev.selection.size === 0) !== (newSelection.size === 0);
-        if (visibilityChanged) {
+        const hasSelection = newSelection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: newSelection };
+        return { ...prev, selection: newSelection, hasSelection };
       });
     },
     clearSelection: () => {
       setState((prev) => {
-        if (prev.selection.size > 0) {
+        if (prev.hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: new Map() };
+        return { ...prev, selection: new Map(), hasSelection: false };
       });
     },
     setDraggingStateByNodeId: (draggingState: DraggingStateByNodeId) =>
@@ -169,6 +163,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         isLeftSidebarOpen: false,
         isBottomPanelOpen: false,
         selection: new Map(),
+        hasSelection: false,
       }));
     },
     setTimelineChartType: (chartType) =>
@@ -188,9 +183,16 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     timelineChartType: state.timelineChartType,
   });
 
+  const { selection } = state;
+  const isSelected = useCallback(
+    (id: string) => selection.has(id),
+    [selection],
+  );
+
   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>;
 };
 

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

@@ -261,93 +261,114 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
 
       return null;
     },
-    deleteItemsByIds(ids) {
+    deleteItemsByIds(items) {
       rest.mutatePetriNetDefinition((sdcpn) => {
-        const idsToProcess = new Set(ids);
+        // Partition selection by type for targeted deletion
+        const placeIds = new Set<string>();
+        const transitionIds = new Set<string>();
+        const arcIds = new Set<string>();
+        const typeIds = new Set<string>();
+        const equationIds = new Set<string>();
+        const parameterIds = new Set<string>();
 
-        /**
-         * Deal with the transitions first because we always need to check them,
-         * in case they, an arc within them or a place referenced by an arc is being deleted.
-         */
-        for (let i = sdcpn.transitions.length - 1; i >= 0; i--) {
-          const transition = sdcpn.transitions[i]!;
-          if (idsToProcess.has(transition.id)) {
-            sdcpn.transitions.splice(i, 1);
-            idsToProcess.delete(transition.id);
-            continue;
+        for (const [id, item] of items) {
+          switch (item.type) {
+            case "place":
+              placeIds.add(id);
+              break;
+            case "transition":
+              transitionIds.add(id);
+              break;
+            case "arc":
+              arcIds.add(id);
+              break;
+            case "type":
+              typeIds.add(id);
+              break;
+            case "differentialEquation":
+              equationIds.add(id);
+              break;
+            case "parameter":
+              parameterIds.add(id);
+              break;
           }
+        }
 
-          for (
-            let inputArcIndex = transition.inputArcs.length - 1;
-            inputArcIndex >= 0;
-            inputArcIndex--
-          ) {
-            const inputArc = transition.inputArcs[inputArcIndex]!;
-            const arcId = generateArcId({
-              inputId: inputArc.placeId,
-              outputId: transition.id,
-            });
+        // Transitions need special handling: we always iterate them when places,
+        // transitions, or arcs are being deleted, because arcs live inside transitions
+        // and deleting a place must cascade to remove its connected arcs.
+        const hasCanvasDeletes =
+          placeIds.size > 0 || transitionIds.size > 0 || arcIds.size > 0;
 
-            if (idsToProcess.has(arcId) || idsToProcess.has(inputArc.placeId)) {
-              transition.inputArcs.splice(inputArcIndex, 1);
-              idsToProcess.delete(arcId);
+        if (hasCanvasDeletes) {
+          for (let i = sdcpn.transitions.length - 1; i >= 0; i--) {
+            const transition = sdcpn.transitions[i]!;
+            if (transitionIds.has(transition.id)) {
+              sdcpn.transitions.splice(i, 1);
+              continue;
             }
-          }
-
-          for (
-            let outputArcIndex = transition.outputArcs.length - 1;
-            outputArcIndex >= 0;
-            outputArcIndex--
-          ) {
-            const outputArc = transition.outputArcs[outputArcIndex]!;
-            const arcId = generateArcId({
-              inputId: transition.id,
-              outputId: outputArc.placeId,
-            });
 
-            if (
-              idsToProcess.has(arcId) ||
-              idsToProcess.has(outputArc.placeId)
+            for (
+              let arcIdx = transition.inputArcs.length - 1;
+              arcIdx >= 0;
+              arcIdx--
             ) {
-              transition.outputArcs.splice(outputArcIndex, 1);
-              idsToProcess.delete(arcId);
+              const inputArc = transition.inputArcs[arcIdx]!;
+              const arcId = generateArcId({
+                inputId: inputArc.placeId,
+                outputId: transition.id,
+              });
+
+              if (arcIds.has(arcId) || placeIds.has(inputArc.placeId)) {
+                transition.inputArcs.splice(arcIdx, 1);
+              }
             }
-          }
 
-          if (idsToProcess.size === 0) {
-            return;
+            for (
+              let arcIdx = transition.outputArcs.length - 1;
+              arcIdx >= 0;
+              arcIdx--
+            ) {
+              const outputArc = transition.outputArcs[arcIdx]!;
+              const arcId = generateArcId({
+                inputId: transition.id,
+                outputId: outputArc.placeId,
+              });
+
+              if (arcIds.has(arcId) || placeIds.has(outputArc.placeId)) {
+                transition.outputArcs.splice(arcIdx, 1);
+              }
+            }
           }
-        }
 
-        for (let i = sdcpn.places.length - 1; i >= 0; i--) {
-          const place = sdcpn.places[i]!;
-          if (idsToProcess.has(place.id)) {
-            sdcpn.places.splice(i, 1);
-            idsToProcess.delete(place.id);
+          for (let i = sdcpn.places.length - 1; i >= 0; i--) {
+            if (placeIds.has(sdcpn.places[i]!.id)) {
+              sdcpn.places.splice(i, 1);
+            }
           }
         }
 
-        for (let i = sdcpn.types.length - 1; i >= 0; i--) {
-          const type = sdcpn.types[i]!;
-          if (idsToProcess.has(type.id)) {
-            sdcpn.types.splice(i, 1);
-            idsToProcess.delete(type.id);
+        if (typeIds.size > 0) {
+          for (let i = sdcpn.types.length - 1; i >= 0; i--) {
+            if (typeIds.has(sdcpn.types[i]!.id)) {
+              sdcpn.types.splice(i, 1);
+            }
           }
         }
 
-        for (let i = sdcpn.differentialEquations.length - 1; i >= 0; i--) {
-          const equation = sdcpn.differentialEquations[i]!;
-          if (idsToProcess.has(equation.id)) {
-            sdcpn.differentialEquations.splice(i, 1);
-            idsToProcess.delete(equation.id);
+        if (equationIds.size > 0) {
+          for (let i = sdcpn.differentialEquations.length - 1; i >= 0; i--) {
+            if (equationIds.has(sdcpn.differentialEquations[i]!.id)) {
+              sdcpn.differentialEquations.splice(i, 1);
+            }
           }
         }
 
-        for (let i = sdcpn.parameters.length - 1; i >= 0; i--) {
-          const parameter = sdcpn.parameters[i]!;
-          if (idsToProcess.has(parameter.id)) {
-            sdcpn.parameters.splice(i, 1);
-            idsToProcess.delete(parameter.id);
+        if (parameterIds.size > 0) {
+          for (let i = sdcpn.parameters.length - 1; i >= 0; i--) {
+            if (parameterIds.has(sdcpn.parameters[i]!.id)) {
+              sdcpn.parameters.splice(i, 1);
+            }
           }
         }
       });

libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts

@@ -15,7 +15,7 @@ export function useKeyboardShortcuts(
   onCursorModeChange: (mode: CursorMode) => void,
 ) {
   const undoRedo = use(UndoRedoContext);
-  const { selection, clearSelection } = use(EditorContext);
+  const { selection, hasSelection, clearSelection } = use(EditorContext);
   const { deleteItemsByIds, readonly } = use(SDCPNContext);
   const isSimulationReadOnly = useIsReadOnly();
   const isReadonly = isSimulationReadOnly || readonly;
@@ -54,10 +54,10 @@ export function useKeyboardShortcuts(
     if (
       (event.key === "Delete" || event.key === "Backspace") &&
       !isReadonly &&
-      selection.size > 0
+      hasSelection
     ) {
       event.preventDefault();
-      deleteItemsByIds(new Set(selection.keys()));
+      deleteItemsByIds(selection);
       clearSelection();
       return;
     }