Panel opens on single click and settings closes other panels

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/src/EditorCanvas.tsx

@@ -46,6 +46,7 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
   const setSelectedEdge = useEditorStore(state => state.setSelectedEdge);
   const setDrawerOpen = useEditorStore(state => state.setDrawerOpen);
   const setEdgeDrawerOpen = useEditorStore(state => state.setEdgeDrawerOpen);
+  const setSettingsDrawerOpen = useEditorStore(state => state.setSettingsDrawerOpen);
   const setHelpOpen = useEditorStore(state => state.setHelpOpen);
   const setLastMousePosition = useEditorStore(state => state.setLastMousePosition);
 
@@ -79,14 +80,16 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
     setDrawerOpen(true);
     setSelectedEdge(null);
     setEdgeDrawerOpen(false);
-  }, [setSelectedNodeId, setDrawerOpen, setSelectedEdge, setEdgeDrawerOpen]);
+    setSettingsDrawerOpen(false);
+  }, [setSelectedNodeId, setDrawerOpen, setSelectedEdge, setEdgeDrawerOpen, setSettingsDrawerOpen]);
 
   const handleEdgeClick = useCallback((_: any, edge: Edge) => {
     setSelectedEdge(edge);
     setEdgeDrawerOpen(true);
     setSelectedNodeId(null);
     setDrawerOpen(false);
-  }, [setSelectedEdge, setEdgeDrawerOpen, setSelectedNodeId, setDrawerOpen]);
+    setSettingsDrawerOpen(false);
+  }, [setSelectedEdge, setEdgeDrawerOpen, setSelectedNodeId, setDrawerOpen, setSettingsDrawerOpen]);
 
   const handleSelectionChange: OnSelectionChangeFunc = useCallback(
     ({ nodes: selectedNodes }) => {
@@ -114,7 +117,8 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
     setSelectedNodeId(null);
     setEdgeDrawerOpen(false);
     setSelectedEdge(null);
-  }, [setDrawerOpen, setSelectedNodeId, setEdgeDrawerOpen, setSelectedEdge]);
+    setSettingsDrawerOpen(false);
+  }, [setDrawerOpen, setSelectedNodeId, setEdgeDrawerOpen, setSelectedEdge, setSettingsDrawerOpen]);
 
   const defaultEdgeOptions = {
     animated: false,
@@ -138,8 +142,8 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
         nodes={nodes}
         edges={edges}
         onEdgesChange={onEdgesChange}
-        onNodeDoubleClick={handleNodeClick}
-        onEdgeDoubleClick={handleEdgeClick}
+        onNodeClick={handleNodeClick}
+        onEdgeClick={handleEdgeClick}
         onNodesChange={onNodesChange}
         onConnect={onConnect}
         onSelectionChange={handleSelectionChange}

packages/learningmap/src/EditorToolbar.tsx

@@ -36,6 +36,10 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   const setShowUnlockAfter = useEditorStore(state => state.setShowUnlockAfter);
   const addNode = useEditorStore(state => state.addNode);
   const setSettingsDrawerOpen = useEditorStore(state => state.setSettingsDrawerOpen);
+  const setDrawerOpen = useEditorStore(state => state.setDrawerOpen);
+  const setEdgeDrawerOpen = useEditorStore(state => state.setEdgeDrawerOpen);
+  const setSelectedNodeId = useEditorStore(state => state.setSelectedNodeId);
+  const setSelectedEdge = useEditorStore(state => state.setSelectedEdge);
   const reset = useEditorStore(state => state.reset);
 
   const [_, postToJsonStore] = useJsonStore();
@@ -66,7 +70,14 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
     addNode(newNode);
   };
 
-  const onOpenSettingsDrawer = () => setSettingsDrawerOpen(true);
+  const onOpenSettingsDrawer = () => {
+    setSettingsDrawerOpen(true);
+    // Close other panels
+    setDrawerOpen(false);
+    setEdgeDrawerOpen(false);
+    setSelectedNodeId(null);
+    setSelectedEdge(null);
+  };
 
   const onReset = () => {
     if (confirm(t.resetMapWarning)) {