fix: manage selected pod globally (#125)

Author: li-xin-yi

ui/src/components/Canvas.tsx

@@ -77,7 +77,7 @@ const ScopeNode = memo<Props>(({ data, id, isConnectable }) => {
   const [frame] = React.useState({
     translate: [0, 0],
   });
-  const selected = useStore(store, (state) => state.selected);
+  const selected = useStore(store, (state) => state.pods[id]?.selected);
   const role = useStore(store, (state) => state.role);
 
   const onResize = useCallback(({ width, height, offx, offy }) => {
@@ -154,7 +154,7 @@ const ScopeNode = memo<Props>(({ data, id, isConnectable }) => {
         id="right"
         isConnectable={isConnectable}
       />
-      {selected === id && role !== RoleType.GUEST && (
+      {selected && role !== RoleType.GUEST && (
         <Moveable
           target={target}
           resizable={true}
@@ -339,7 +339,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
   const isRightLayout = layout === "right";
   const { setNodes } = useReactFlow();
   // const selected = useStore(store, (state) => state.selected);
-  const setSelected = useStore(store, (state) => state.setSelected);
+  const setPodSelected = useStore(store, (state) => state.setPodSelected);
   const setCurrentEditor = useStore(store, (state) => state.setCurrentEditor);
   const getPod = useStore(store, (state) => state.getPod);
   const pod = getPod(id);
@@ -494,7 +494,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
         onClick={(e) => {
           // If the node is selected (for resize), the cursor is not shown. So
           // we need to deselect it when we re-focus on the editor.
-          setSelected(null);
+          setPodSelected(id, false);
           setNodes((nds) =>
             applyNodeChanges(
               [
@@ -717,6 +717,8 @@ export function Canvas() {
         },
         level: 0,
         extent: "parent",
+        //otherwise, throws a lot of warnings, see https://reactflow.dev/docs/guides/troubleshooting/#only-child-nodes-can-use-a-parent-extent
+        parentNode: undefined,
         dragHandle: ".custom-drag-handle",
       };
 
@@ -782,18 +784,6 @@ export function Canvas() {
           },
         });
       }
-      setNodes((nds) =>
-        applyNodeChanges(
-          [
-            {
-              id: node.id,
-              type: "select",
-              selected: true,
-            },
-          ],
-          nds
-        )
-      );
     },
     [nodesMap, setNodes, userColor]
   );
@@ -888,19 +878,6 @@ export function Canvas() {
 
         nodesMap.set(node.id, currentNode);
       }
-
-      setNodes((nds) =>
-        applyNodeChanges(
-          [
-            {
-              id: node.id,
-              type: "select",
-              selected: true,
-            },
-          ],
-          nds
-        )
-      );
     },
     // We need to monitor nodes, so that getScopeAt can have all the nodes.
     [
@@ -970,6 +947,7 @@ export function Canvas() {
           nodesDraggable={role !== RoleType.GUEST}
           // disable node delete on backspace when the user is a guest.
           deleteKeyCode={role === RoleType.GUEST ? null : "Backspace"}
+          multiSelectionKeyCode={"Control"}
         >
           <Box>
             <MiniMap

ui/src/lib/nodes.tsx

@@ -14,7 +14,7 @@ export function useNodesStateSynced(nodeList) {
   const getPod = useStore(store, (state) => state.getPod);
   const deletePod = useStore(store, (state) => state.deletePod);
   const updatePod = useStore(store, (state) => state.updatePod);
-  const setSelected = useStore(store, (state) => state.setSelected);
+  const setPodSelected = useStore(store, (state) => state.setPodSelected);
   const role = useStore(store, (state) => state.role);
   const ydoc = useStore(store, (state) => state.ydoc);
   const nodesMap = ydoc.getMap<Node>("pods");
@@ -35,17 +35,17 @@ export function useNodesStateSynced(nodeList) {
     }
 
     changes.forEach((change) => {
-      if (!isNodeAddChange(change) && !isNodeResetChange(change)) {
+      if (!isNodeAddChange(change)) {
         if (isNodeRemoveChange(change)) {
           nodesMap.delete(change.id);
           return;
         }
         const node = nextNodes.find((n) => n.id === change.id);
+
         if (!node) return;
 
-        if (change.type === "select" && change.selected) {
-          // FIXME: consider the case where only unselect is called
-          setSelected(node.id);
+        if (isNodeResetChange(change) || change.type === "select") {
+          setPodSelected(node.id, change.selected as boolean);
           return;
         }
 
@@ -98,10 +98,11 @@ export function useNodesStateSynced(nodeList) {
 
       // TOFIX: a node may be shadowed behind its parent, due to the order to render reactflow node, to fix this, comment out the following sorted method, which brings in a large overhead.
       setNodes(
-        Array.from(nodesMap.values()).sort(
-          (a: Node & { level }, b: Node & { level }) => a.level - b.level
-        )
+        Array.from(nodesMap.values())
+          .sort((a: Node & { level }, b: Node & { level }) => a.level - b.level)
+          .map((node) => ({ ...node, selected: getPod(node.id)?.selected }))
       );
+
       // setNodes(Array.from(nodesMap.values()));
     };
 

ui/src/lib/store.tsx

@@ -78,7 +78,6 @@ const initialState = {
   socket: null,
   socketIntervalId: null,
   // keep different seletced info on each user themselves
-  selected: null,
   // to fixed maco editor command bug
   currentEditor: null,
   //TODO: all presence information are now saved in clients map for future usage. create a modern UI to show those information from clients (e.g., online users)
@@ -123,6 +122,7 @@ export type Pod = {
   ns?: string;
   running?: boolean;
   focus?: boolean;
+  selected?: boolean;
 };
 
 export interface RepoSlice {
@@ -180,21 +180,20 @@ export interface RepoSlice {
   }) => void;
   setPodPosition: ({ id, x, y }: any) => void;
   setPodParent: ({ id, parent }: any) => void;
-  selected: string | null;
-  setSelected: (id: string | null) => void;
   currentEditor: string | null;
   setCurrentEditor: (id: string | null) => void;
   setUser: (user: any) => void;
   addClient: (clientId: any, name, color) => void;
   deleteClient: (clientId: any) => void;
   flipShowLineNumbers: () => void;
   disconnect: () => void;
-  getPod: (string) => Pod;
+  getPod: (id: string) => Pod;
   getPods: () => Record<string, Pod>;
   getId2children: (string) => string[];
-  setPodVisibility: (id, visible) => void;
-  setPodFocus: (id) => void;
-  setPodBlur: (id) => void;
+  setPodVisibility: (id: any, visible: any) => void;
+  setPodFocus: (id: string) => void;
+  setPodBlur: (id: string) => void;
+  setPodSelected: (id: string, target: boolean) => void;
 }
 
 type BearState = RepoSlice & RuntimeSlice;
@@ -244,7 +243,6 @@ const createRepoSlice: StateCreator<
   setSessionId: (id) => set({ sessionId: id }),
   addError: (error) => set({ error }),
   clearError: () => set({ error: null }),
-  setSelected: (id) => set({ selected: id }),
   setCurrentEditor: (id) => set({ currentEditor: id }),
   addPod: async (
     client,
@@ -286,6 +284,8 @@ const createRepoSlice: StateCreator<
       // the backend instead.
       children: [],
       io: {},
+      selected: false,
+      focus: false,
       // from payload
       parent,
       index,
@@ -835,6 +835,16 @@ const createRepoSlice: StateCreator<
         }
       })
     ),
+  setPodSelected: (id: string, target: boolean) => {
+    set(
+      produce((state) => {
+        if (state.pods[id]) {
+          state.pods[id].selected = target;
+        }
+      })
+    );
+  },
+  getPodSelected: (id: string) => get().pods[id]?.selected as boolean,
 });
 
 export const createRepoStore = () =>