✨ feat: 添加节点折叠效果

Author: arvinxx

docs/components/biz/examples/Mindflow/Basic.tsx

@@ -6,35 +6,37 @@ const data: GraphData<MindflowData> = {
     {
       id: 'node1',
       data: {
-        text: '这是一个 问题 节点',
+        title: '这是一个 问题 节点',
         type: 'question',
       },
     },
     {
       id: 'node2',
       data: {
-        text: '这是一个 思路 节点',
+        title: '这是一个 思路 节点',
         type: 'idea',
       },
     },
     {
       id: 'node3',
       data: {
-        text: '这是一个未定节点',
+        title: '这是一个未定节点',
       },
     },
     {
       id: 'node4',
       data: {
-        text: '这是一个 行动点 节点',
+        title: '这是一个 行动点 节点',
         type: 'action',
       },
     },
     {
       id: 'node5',
       data: {
-        text:
-          '这是一个超长文本节点: 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修稧（禊）事也。',
+        title:
+          '这是一个可折叠的节点: 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修稧（禊）事也。',
+        description:
+          ' 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修稧（禊）事也。',
         type: 'action',
       },
     },

docs/components/biz/examples/Mindflow/Connect.tsx

@@ -6,27 +6,27 @@ const data: GraphData<MindflowData> = {
     {
       id: 'node1',
       data: {
-        text: '这是一个 问题 节点',
+        title: '这是一个 问题 节点',
         type: 'question',
       },
     },
     {
       id: 'node2',
       data: {
-        text: '这是一个 思路 节点',
+        title: '这是一个 思路 节点',
         type: 'idea',
       },
     },
     {
       id: 'node3',
       data: {
-        text: '这是一个未定节点',
+        title: '这是一个未定节点',
       },
     },
     {
       id: 'node4',
       data: {
-        text:
+        title:
           '这是一个超长文本节点: 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修稧（禊）事也。',
         type: 'action',
       },

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

@@ -1,11 +1,16 @@
 import type { FC } from 'react';
-import React from 'react';
-import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import {
+  PlusOutlined,
+  MinusOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined,
+} from '@ant-design/icons';
 import chorma from 'chroma-js';
 import type { ReactShape } from '@antv/x6-react-shape';
+import cls from 'classnames';
 
 import { mapColorToHex, mapTypeToColor } from '../../utils';
-
 import type { NodeData } from '../../types';
 
 import './style.less';
@@ -16,9 +21,14 @@ interface BaseNodeProps {
 
 const MindNode: FC<BaseNodeProps> = ({ node }) => {
   const data = node.getData<NodeData>();
-  const { type, collapsed, hasChildren } = data;
+
+  const { type, collapsed, leaf = true, title, description } = data;
   const baseColor = chorma(mapColorToHex(mapTypeToColor(type)));
 
+  const [unfold, setUnfold] = useState(false);
+
+  const cantFold = !description;
+
   return (
     <div
       className="mind-node-container"
@@ -28,9 +38,34 @@ const MindNode: FC<BaseNodeProps> = ({ node }) => {
         borderLeftColor: baseColor.hex(),
       }}
     >
-      <div className="mind-node-title">{data.text}</div>
+      <div className="mind-node-header">
+        {cantFold ? null : (
+          <span
+            className="mind-node-arrow"
+            onClick={() => {
+              setUnfold(!unfold);
+            }}
+          >
+            {unfold ? <CaretUpOutlined /> : <CaretDownOutlined />}
+          </span>
+        )}
+
+        <div
+          className={cls(
+            'mind-node-title',
+            unfold ? 'mind-node-title-expand' : '',
+          )}
+        >
+          {title}
+        </div>
+      </div>
+      {unfold ? (
+        <div>
+          <div className="mind-node-desc">{description}</div>
+        </div>
+      ) : null}
 
-      {hasChildren ? (
+      {leaf ? null : (
         <div
           className="mind-node-collapse"
           style={{ borderColor: baseColor.hex() }}
@@ -47,7 +82,7 @@ const MindNode: FC<BaseNodeProps> = ({ node }) => {
             />
           )}
         </div>
-      ) : null}
+      )}
     </div>
   );
 };

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

@@ -1,18 +1,41 @@
+@import '../../themes/theme';
+
 .mind-node {
   &-container {
     position: relative;
     padding: 8px;
+    padding-left: 4px;
     border: 1px solid transparent;
     border-left-width: 4px;
     border-radius: 4px;
   }
+  &-header {
+    display: flex;
+  }
+
+  &-arrow {
+    color: @text-color-secondary;
+    cursor: pointer;
+  }
 
   &-title {
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2; // 以此类推，3行4行直接该数字就好啦
+    margin-left: 4px;
+    overflow: hidden; //超出的隐藏
+    white-space: nowrap; //强制一行显示
+    text-overflow: ellipsis; //省略号
+    &-expand {
+      display: -webkit-box;
+      white-space: normal;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2; // 以此类推，3行4行直接该数字就好啦
+    }
+  }
+
+  &-desc {
+    margin-top: 4px;
+    margin-left: 4px;
+    color: @text-color-secondary;
+    font-size: 12px;
   }
 
   &-collapse {
@@ -28,6 +51,7 @@
     border: 1px solid transparent;
     border-radius: 20px;
     transform: translateY(-50%);
+    cursor: pointer;
 
     &-icon {
       font-size: 13px;

…indflow/src/definition/defaultConfig.tsx packages/mindflow/src/definition/edge.tspackages/mindflow/src/definition/defaultConfig.tsx renamed to packages/mindflow/src/definition/edge.ts packages/mindflow/src/definition/defaultConfig.tsx renamed to packages/mindflow/src/definition/edge.ts

@@ -9,7 +9,7 @@ Shape.Edge.config({
       strokeWidth: 1,
       targetMarker: {
         tagName: 'path',
-        d: 'Z',
+        d: 'M0 0 Z',
       },
     },
   },

packages/mindflow/src/definition/graphOpts.ts

@@ -1,6 +1,7 @@
 import type { Options } from '@antv/x6/lib/graph/options';
 import { minimapOpts } from './minimapOpts';
 import { port } from './port';
+import './edge';
 
 /**
  * 生成图的配置项

packages/mindflow/src/definition/register.tsx

@@ -1,14 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
 import { Graph } from '@antv/x6';
 import { graphOpts } from '../definition/graphOpts';
-import '../definition/register';
 import { layout, preprocessData } from '../utils';
+import { useGraphRegister } from './useRegister';
 
 export const useGraph = (data) => {
   const container = useRef();
   const minimapContainer = useRef();
   const [graph, setGraph] = useState<Graph>(null);
 
+  useGraphRegister();
+
   useEffect(() => {
     if (!container.current) return;
 

packages/mindflow/src/hooks/useGraph.ts

@@ -0,0 +1,25 @@
+import '@antv/x6-react-shape';
+import React from 'react';
+import { Graph } from '@antv/x6';
+import { useEffect } from 'react';
+import { MindNode } from '../components';
+
+declare global {
+  interface Window {
+    __IS_REGISTERED_MIND_NODE__: boolean;
+  }
+}
+
+export const useGraphRegister = () => {
+  useEffect(() => {
+    if (!window.__IS_REGISTERED_MIND_NODE__) {
+      // 注册返回 React 组件的函数
+      Graph.registerReactComponent('mind-node', <MindNode />);
+      window.__IS_REGISTERED_MIND_NODE__ = true;
+    }
+    return () => {
+      Graph.unregisterReactComponent('mind-node');
+      window.__IS_REGISTERED_MIND_NODE__ = false;
+    };
+  }, []);
+};

packages/mindflow/src/hooks/useRegister.tsx

@@ -0,0 +1,2 @@
+@text-color: rgba(0, 0, 0, 0.85);
+@text-color-secondary: rgba(0, 0, 0, 0.5);