Merge pull request #37 from openpatch/copilot/replace-editor-drawer-with-panel

Replace editor drawer with React Flow panel with single-click interaction

Author: mikebarkmin

packages/learningmap/src/EdgePanel.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect } from "react";
+import { X, Trash2 } from "lucide-react";
+import { Edge, Panel } from "@xyflow/react";
+import { EditorDrawerEdgeContent } from "./EditorDrawerEdgeContent";
+import { getTranslations } from "./translations";
+import { useEditorStore } from "./editorStore";
+
+interface EdgePanelProps {
+  defaultLanguage?: string;
+}
+
+export const EdgePanel: React.FC<EdgePanelProps> = ({
+  defaultLanguage = "en",
+}) => {
+  // Get edge and drawer state from store
+  const selectedEdge = useEditorStore(state => state.selectedEdge);
+  const edgeDrawerOpen = useEditorStore(state => state.edgeDrawerOpen);
+  const settings = useEditorStore(state => state.settings);
+  const edges = useEditorStore(state => state.edges);
+
+  // Get actions from store
+  const setEdgeDrawerOpen = useEditorStore(state => state.setEdgeDrawerOpen);
+  const setSelectedEdge = useEditorStore(state => state.setSelectedEdge);
+  const updateEdge = useEditorStore(state => state.updateEdge);
+  const deleteEdge = useEditorStore(state => state.deleteEdge);
+
+  const language = settings?.language || defaultLanguage;
+  const t = getTranslations(language);
+
+  // Close panel when edge gets deselected
+  useEffect(() => {
+    if (edgeDrawerOpen && !selectedEdge) {
+      setEdgeDrawerOpen(false);
+    }
+  }, [selectedEdge, edgeDrawerOpen, setEdgeDrawerOpen]);
+
+  const closePanel = () => {
+    setEdgeDrawerOpen(false);
+    setSelectedEdge(null);
+  };
+
+  const onUpdate = (edge: Edge) => {
+    updateEdge(edge.id, edge);
+  };
+
+  const onDelete = () => {
+    if (selectedEdge) {
+      deleteEdge(selectedEdge.id);
+      closePanel();
+    }
+  };
+
+  if (!selectedEdge || !edgeDrawerOpen) return null;
+  
+  return (
+    <Panel position="center-right" className="editor-panel">
+      <div className="panel-inner">
+        <div className="panel-header">
+          <h2 className="panel-title">{t.editEdge}</h2>
+          <button onClick={closePanel} className="close-button">
+            <X size={20} />
+          </button>
+        </div>
+        <EditorDrawerEdgeContent
+          localEdge={selectedEdge}
+          handleFieldChange={(field: string, value: any) => {
+            let updated = { ...selectedEdge };
+            if (field === "color") {
+              updated = {
+                ...updated,
+                style: { ...updated.style, stroke: value },
+              };
+            } else if (field === "animated") {
+              updated = { ...updated, animated: value };
+            } else if (field === "type") {
+              updated = { ...updated, type: value };
+            }
+            onUpdate(updated);
+          }}
+          language={language}
+        />
+        <div className="panel-footer panel-footer-centered">
+          <button onClick={onDelete} className="danger-button">
+            <Trash2 size={16} /> {t.deleteEdge}
+          </button>
+        </div>
+      </div>
+    </Panel>
+  );
+};

packages/learningmap/src/EditorCanvas.tsx

@@ -8,6 +8,9 @@ import { ImageNode } from "./nodes/ImageNode";
 import { TextNode } from "./nodes/TextNode";
 import FloatingEdge from "./FloatingEdge";
 import { MultiNodePanel } from "./MultiNodePanel";
+import { EditorPanel } from "./EditorPanel";
+import { EdgePanel } from "./EdgePanel";
+import { SettingsPanel } from "./SettingsPanel";
 import { getTranslations } from "./translations";
 import { NodeData } from "./types";
 
@@ -43,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);
 
@@ -76,21 +80,29 @@ 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 }) => {
       // Only select nodes, not edges (as per requirement #6)
       setSelectedNodeIds(selectedNodes.map(n => n.id));
+      
+      // Close the node panel if no nodes are selected and it's currently open
+      if (selectedNodes.length === 0) {
+        setDrawerOpen(false);
+        setSelectedNodeId(null);
+      }
     },
-    [setSelectedNodeIds]
+    [setSelectedNodeIds, setDrawerOpen, setSelectedNodeId]
   );
 
   // Track mouse position for keyboard shortcuts
@@ -99,6 +111,15 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
     setLastMousePosition(position);
   }, [screenToFlowPosition, setLastMousePosition]);
 
+  // Close panels when clicking on empty canvas
+  const handlePaneClick = useCallback(() => {
+    setDrawerOpen(false);
+    setSelectedNodeId(null);
+    setEdgeDrawerOpen(false);
+    setSelectedEdge(null);
+    setSettingsDrawerOpen(false);
+  }, [setDrawerOpen, setSelectedNodeId, setEdgeDrawerOpen, setSelectedEdge, setSettingsDrawerOpen]);
+
   const defaultEdgeOptions = {
     animated: false,
     style: {
@@ -121,11 +142,12 @@ 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}
+        onPaneClick={handlePaneClick}
         nodeTypes={nodeTypes}
         selectionOnDrag={false}
         edgeTypes={edgeTypes}
@@ -150,6 +172,9 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
           </ControlButton>
         </Controls>
         {selectedNodeIds.length > 1 && <MultiNodePanel />}
+        <EditorPanel defaultLanguage={defaultLanguage} />
+        <EdgePanel defaultLanguage={defaultLanguage} />
+        <SettingsPanel defaultLanguage={defaultLanguage} />
       </ReactFlow>
     </div>
   );

packages/learningmap/src/EditorDrawerEdgeContent.tsx

@@ -16,7 +16,7 @@ export function EditorDrawerEdgeContent({
   const t = getTranslations(language);
 
   return (
-    <div className="drawer-content">
+    <div className="panel-content">
       <div className="form-group">
         <ColorSelector
           label={t.edgeColor}

packages/learningmap/src/EditorDrawerImageContent.tsx

@@ -25,7 +25,7 @@ export function EditorDrawerImageContent({ localNode, handleFieldChange, languag
   };
 
   return (
-    <div className="drawer-content">
+    <div className="panel-content">
       <div className="form-group">
         <label>{t.image} (JPG, PNG, SVG)</label>
         <input

packages/learningmap/src/EditorDrawerTaskContent.tsx

@@ -60,7 +60,7 @@ export function EditorDrawerTaskContent({
   if (localNode.type === "topic") defaultColor = "yellow";
   const selectedColor = localNode.data?.color || defaultColor;
   return (
-    <div className="drawer-content">
+    <div className="panel-content">
       <div className="form-group">
         <label>{t.nodeColor}</label>
         <div style={{ display: "flex", gap: 12, marginTop: 8 }}>

packages/learningmap/src/EditorDrawerTextContent.tsx

@@ -14,7 +14,7 @@ export function EditorDrawerTextContent({ localNode, handleFieldChange, language
   const t = getTranslations(language);
 
   return (
-    <div className="drawer-content">
+    <div className="panel-content">
       <div className="form-group">
         <label>{t.text}</label>
         <input