fix 🐛: preview draw pattern bug

GraphScope · Sep 25, 2024 · 705c141 · 705c141
1 parent 02d34ad
commit 705c141
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 15 deletions.
diff --git a/packages/studio-draw-pattern/src/components/DrawPattern.tsx b/packages/studio-draw-pattern/src/components/DrawPattern.tsx
@@ -42,7 +42,6 @@ export const DrawPattern: React.FC<DrawPatternProps> = props => {
 
   useEffect(() => {
     return () => {
-      console.log('清空所有数据');
       clearGraphStore();
       clearEdge?.();
       clearNode?.();

diff --git a/packages/studio-draw-pattern/src/components/QuickStart/Preview.tsx b/packages/studio-draw-pattern/src/components/QuickStart/Preview.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { Graph } from '@graphscope/studio-graph-editor';
 import { ISchemaNode } from '@graphscope/studio-graph-editor';
 import { ISchemaEdge } from '@graphscope/studio-graph-editor';
@@ -8,27 +8,36 @@ import { useNodeStore } from '../../stores/useNodeStore';
 import { useEdgeStore } from '../../stores/useEdgeStore';
 import { usePropertiesStore } from '../../stores/usePropertiesStore';
 import { DrawPatternContext } from '../DrawPattern';
+import { updateNodePositions } from '../../utils';
 export const Preview = () => {
   const { transformNodes, transformEdges } = useTransform();
 
   const clearGraphStore = useGraphStore(state => state.clearGraphStore);
   const clearNode = useNodeStore(state => state.clearNode);
   const clearEdge = useEdgeStore(state => state.clearEdge);
   const clearProperties = usePropertiesStore(state => state.clearProperties);
-  const handleSelectionChange = (nodes: ISchemaNode[], edges: ISchemaEdge[]) => {
+
+  const handleSelectionChange = useCallback((nodes: ISchemaNode[], edges: ISchemaEdge[]) => {
     // 每次 selection change 都要清空 store;
-    clearProperties();
-    clearGraphStore();
-    clearEdge && clearEdge();
-    clearNode && clearNode();
+    if (nodes.length > 0 && edges.length > 0) {
+      clearProperties();
+      clearGraphStore();
+      clearEdge && clearEdge();
+      clearNode && clearNode();
 
-    // 将 nodes 和 edges 转换为 新格式 ，来适配 MATCH 语句
-    transformNodes(nodes);
-    transformEdges(edges, nodes);
-  };
+      // 将 nodes 和 edges 转换为 新格式 ，来适配 MATCH 语句
+      transformNodes(nodes);
+      transformEdges(edges, nodes);
+    }
+  }, []);
 
   const { previewGraph } = useContext(DrawPatternContext);
 
+  const updatePositionNode = useMemo(() => {
+    const newNodes = updateNodePositions(previewGraph?.nodes || []);
+    return newNodes;
+  }, [previewGraph]);
+
   return (
     <div
       style={{
@@ -52,8 +61,7 @@ export const Preview = () => {
           disabled={true}
           isPreview={true}
           defaultEdges={previewGraph?.edges}
-          // @ts-ignore
-          defaultNodes={previewGraph?.nodes}
+          defaultNodes={updatePositionNode}
           graphId="preview-graph"
           onSelectionChange={handleSelectionChange}
         />

diff --git a/packages/studio-draw-pattern/src/utils/encode.ts b/packages/studio-draw-pattern/src/utils/encode.ts
@@ -106,6 +106,7 @@ export const generateMATCH = (nodes: Node[], edges: Edge[]) => {
     if (currentEdge) currentEdge.isErgodic = true;
 
     let MATCH = `[${currentEdge.variable}${currentEdge?.statement}]`;
+
     // 当前 egde target遍历
     if (targetNode) {
       while (true) {

diff --git a/packages/studio-draw-pattern/src/utils/index.ts b/packages/studio-draw-pattern/src/utils/index.ts
@@ -1,3 +1,5 @@
+import { ISchemaNode } from '@graphscope/studio-graph-editor';
+
 export function isArrayExist<T>(item: T, arrary: Array<T>): boolean {
   return arrary.indexOf(item) !== -1;
 }
@@ -16,3 +18,34 @@ export function getSequentialLetter(): () => string {
     return letter;
   };
 }
+
+export const updateNodePositions = (nodes: ISchemaNode[]): ISchemaNode[] => {
+  const updatedNodes: ISchemaNode[] = []; // 初始化一个新的数组
+
+  nodes.forEach(node => {
+    let { x, y } = node.position;
+
+    const spacing = 200; // 节点之间的最小间隔
+
+    while (
+      updatedNodes.some(
+        n => n.id !== node.id && Math.abs(n.position.x - x) < spacing && Math.abs(n.position.y - y) < spacing,
+      )
+    ) {
+      x += spacing; // 向右移动
+      // 如果向右移动之后仍然有重叠，尝试向下移动
+      if (
+        updatedNodes.some(
+          n => n.id !== node.id && Math.abs(n.position.x - x) < spacing && Math.abs(n.position.y - y) < spacing,
+        )
+      ) {
+        y += spacing; // 向下移动
+        x -= spacing; // 还原到原来的 x 位置
+      }
+    }
+
+    updatedNodes.push({ ...node, position: { x, y } }); // 将更新后的节点添加到数组
+  });
+
+  return updatedNodes;
+};
diff --git a/packages/studio-graph-editor/src/canvas/index.tsx b/packages/studio-graph-editor/src/canvas/index.tsx
@@ -63,8 +63,8 @@ const SchemaGraph: React.FunctionComponent<ISchemaGraphProps> = props => {
           // nodes={nodes}
           // edges={edges}
           //@ts-ignore
-          nodes={fakeSnapshot(nodes)}
-          edges={fakeSnapshot(edges)}
+          nodes={nodes.length ? fakeSnapshot(nodes) : []}
+          edges={edges.length ? fakeSnapshot(edges) : []}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           nodeTypes={nodeTypes}