layout

src/components/KnowledgeGraph/KnowledgeGraph.jsx

@@ -11,6 +11,7 @@ import ReactFlow, {
 import dagre from 'dagre';  // 需要先安裝：npm install dagre
 import 'reactflow/dist/style.css';
 import axios from 'axios';
+import { Select } from 'antd'; // 需安裝 antd 或用原生 select
 
 const getLayoutedElements = (nodes, edges) => {
   const dagreGraph = new dagre.graphlib.Graph();
@@ -92,6 +93,14 @@ const graphDataCache = {
   current: null
 };
 
+// 支援的 layout 類型
+const LAYOUT_OPTIONS = [
+  { value: 'TB', label: '上到下（預設）' },
+  { value: 'LR', label: '左到右' },
+  { value: 'mindmap', label: '心智圖式' },
+  { value: 'waterfall', label: '瀑布式' }
+];
+
 function KnowledgeGraph({ nodes, edges, onNodeClick, selectedNodeId, graphId }) {
   const containerRef = useRef(null);
   const [flowNodes, setFlowNodes] = useNodesState([]);
@@ -99,7 +108,8 @@ function KnowledgeGraph({ nodes, edges, onNodeClick, selectedNodeId, graphId })
   const [localNodes, setLocalNodes] = useState(nodes);
   const [localEdges, setLocalEdges] = useState(edges);
   const [isLoading, setIsLoading] = useState(false);
-  
+  const [layoutType, setLayoutType] = useState('TB'); // 新增 layout 狀態
+
   // 當 props 中的 nodes 和 edges 變化時，更新本地狀態
   useEffect(() => {
     if (nodes && nodes.length > 0) {
@@ -150,14 +160,79 @@ function KnowledgeGraph({ nodes, edges, onNodeClick, selectedNodeId, graphId })
     }
   }, [localNodes, graphId, isLoading]);
 
+  // 取得不同 layout 的節點位置
+  const getLayoutedNodes = useCallback((nodes, edges, layoutType) => {
+    if (layoutType === 'mindmap') {
+      // 簡單心智圖：root 在左，其他節點橫向展開
+      const root = nodes[0];
+      return nodes.map((node, i) => ({
+        ...node,
+        position: {
+          x: i * 250,
+          y: (i % 2 === 0 ? 1 : -1) * (80 + 80 * Math.floor(i / 2))
+        }
+      }));
+    }
+    if (layoutType === 'waterfall') {
+      // 簡單瀑布式：每層一行，橫向排列
+      return nodes.map((node, i) => ({
+        ...node,
+        position: {
+          x: (i % 4) * 220,
+          y: Math.floor(i / 4) * 120
+        }
+      }));
+    }
+    // 其餘用 dagre
+    return getLayoutedElements(
+      nodes,
+      edges,
+      layoutType
+    );
+  }, []);
+
+  // 修改 getLayoutedElements 支援 rankdir
+  const getLayoutedElements = (nodes, edges, rankdir = 'TB') => {
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({
+      rankdir,
+      nodesep: 150,
+      ranksep: 200,
+      edgesep: 80,
+      marginx: 50,
+      marginy: 50,
+      acyclicer: 'greedy',
+      ranker: 'network-simplex'
+    });
+    nodes.forEach((node) => {
+      dagreGraph.setNode(node.id, { width: 200, height: 60 });
+    });
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target);
+    });
+    dagre.layout(dagreGraph);
+    const layoutedNodes = nodes.map(node => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+      const nodeWidth = 200;
+      const nodeHeight = 60;
+      return {
+        ...node,
+        position: {
+          x: Number.isFinite(nodeWithPosition.x) ? nodeWithPosition.x - nodeWidth / 2 : 0,
+          y: Number.isFinite(nodeWithPosition.y) ? nodeWithPosition.y - nodeHeight / 2 : 0
+        },
+      };
+    });
+    return layoutedNodes;
+  };
+
   // 使用 useEffect 來更新 ReactFlow 的節點和邊
   useEffect(() => {
     if (!localNodes || localNodes.length === 0) return;
-    
     try {
       const validNodes = Array.isArray(localNodes) ? localNodes : Object.values(localNodes);
-      
-      const layoutedNodes = getLayoutedElements(
+      const layoutedNodes = getLayoutedNodes(
         validNodes.map(node => ({
           id: node.id,
           data: { label: node.title },
@@ -173,7 +248,8 @@ function KnowledgeGraph({ nodes, edges, onNodeClick, selectedNodeId, graphId })
             textAlign: 'center'
           }
         })),
-        localEdges || []
+        localEdges || [],
+        layoutType
       );
 
       const styledEdges = (localEdges || []).map(edge => ({
@@ -217,7 +293,7 @@ function KnowledgeGraph({ nodes, edges, onNodeClick, selectedNodeId, graphId })
     } catch (error) {
       console.error('處理圖譜數據時出錯:', error);
     }
-  }, [localNodes, localEdges, selectedNodeId, setFlowNodes, setFlowEdges]);
+  }, [localNodes, localEdges, selectedNodeId, setFlowNodes, setFlowEdges, layoutType, getLayoutedNodes]);
 
   // 使用 useCallback 來記憶化事件處理函數
   const handleNodeClick = useCallback((_, node) => {
@@ -293,7 +369,28 @@ function KnowledgeGraph({ nodes, edges, onNodeClick, selectedNodeId, graphId })
   }
 
   return (
-    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+    <div ref={containerRef} style={{ width: '100%', height: '100%', position: 'relative' }}>
+      {/* 只保留 layout 選擇器 */}
+      <div style={{
+        position: 'absolute',
+        top: 12,
+        right: 12,
+        zIndex: 10,
+        background: '#fff',
+        borderRadius: 6,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        padding: '4px 12px'
+      }}>
+        <select
+          value={layoutType}
+          onChange={e => setLayoutType(e.target.value)}
+          style={{ fontSize: 14, padding: '2px 8px' }}
+        >
+          {LAYOUT_OPTIONS.map(opt => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
       <ReactFlowProvider>
         <ReactFlow
           nodes={flowNodes}