♻️ refactor: 优化代码

Author: arvinxx

packages/mindflow/src/components/CollapseIcon/style.less

@@ -4,7 +4,6 @@
   position: absolute;
   top: 10px;
   right: -10px;
-  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;

packages/mindflow/src/components/EvidencePanel/index.tsx

@@ -18,6 +18,7 @@ const EvidencePanel: FC<EvidencePanelProps> = ({ edge }) => {
 
   const isEmpty = !data || data.references.length === 0;
 
+  console.log(data);
   return (
     <div className="mind-edge-container">
       <Popover content={'123'}>

packages/mindflow/src/components/MindNode/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import {
   CaretUpOutlined,
   CaretDownOutlined,
@@ -22,7 +22,7 @@ interface BaseNodeProps {
   node?: ReactShape;
 }
 
-const MindNode: FC<BaseNodeProps> = ({ node }) => {
+const MindNode: FC<BaseNodeProps> = memo(({ node }) => {
   const data = node.getData<NodeData>();
   const ref = useRef();
 
@@ -41,11 +41,6 @@ const MindNode: FC<BaseNodeProps> = ({ node }) => {
 
   const backgroundColor = rgba2hex(baseColor.alpha(0.1).rgba());
 
-  useEffect(() => {
-    // 展开的节点在前面显示
-    node.setZIndex(unfolded ? 1000 : 0);
-  }, [unfolded]);
-
   return (
     <div
       ref={ref}
@@ -121,6 +116,6 @@ const MindNode: FC<BaseNodeProps> = ({ node }) => {
       )}
     </div>
   );
-};
+});
 
 export default MindNode;

packages/mindflow/src/components/MindNode/useFolded.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useMindflowService } from '../../store/useMindflowContext';
 import type { ReactShape } from '@antv/x6-react-shape';
-import { NodeData } from '@arvinxu/mindflow';
+import type { NodeData } from '../../types';
 
 export const useFolded = (node: ReactShape) => {
   const { isNodeUnfolded, toggleNodeUnfold } = useMindflowService();
@@ -13,8 +13,13 @@ export const useFolded = (node: ReactShape) => {
 
   useEffect(() => {
     // 展开的节点在前面显示
-    node.setZIndex(unfolded ? 1000 : 0);
-  }, [unfolded]);
+
+    if (unfolded) {
+      node.setZIndex(100);
+    } else {
+      node.removeZIndex();
+    }
+  }, [unfolded, node]);
 
   return { unfolded, cantFold, toggleNodeUnfold };
 };

packages/mindflow/src/definition/graphOpts.ts

@@ -14,6 +14,7 @@ export const graphOpts = (container, minimapCtn): Partial<Options.Manual> => ({
   background: {
     color: '#fafafa',
   },
+  grid: 1,
   interacting: {
     // nodeMovable: false,
     edgeLabelMovable: false,

packages/mindflow/src/utils/dataMap.ts

@@ -1,5 +1,5 @@
 import { mindFlowColors } from '../themes/nodeColor';
-import type { GraphData, MindflowNodeData, NodeData } from '../types';
+import type { GraphData, MindflowData, NodeData } from '../types';
 import type { BaseNode } from '../types';
 
 /**
@@ -56,7 +56,7 @@ export const mapTypeToColor = (type: string) => {
  * @param collapseList
  */
 export const getUncollapsedNode = (
-  data: GraphData<MindflowNodeData>,
+  data: MindflowData,
   collapseList: string[],
 ): BaseNode<NodeData>[] => {
   const targetList = collapseList
@@ -74,7 +74,7 @@ export const getUncollapsedNode = (
  * @param collapseList
  */
 export const preprocessData = (
-  data: GraphData<MindflowNodeData>,
+  data: MindflowData,
   collapseList: string[],
 ): GraphData<NodeData> => {
   const displayNodes = getUncollapsedNode(data, collapseList);