✨ feat: 添加基础节点和小地图

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

@@ -4,16 +4,31 @@ import Mindflow, { GraphData, MindflowData } from '@arvinxu/mindflow';
 const data: GraphData<MindflowData> = {
   nodes: [
     {
-      id: 'node1', // String，可选，节点的唯一标识
-
+      id: 'node1',
+      data: {
+        text: '这是一个 问题 节点',
+        type: 'question',
+      },
+    },
+    {
+      id: 'node2',
+      data: {
+        text: '这是一个 思路 节点',
+        type: 'idea',
+      },
+    },
+    {
+      id: 'node3',
       data: {
-        text: 'hello',
+        text: '这是一个未定节点',
       },
     },
     {
-      id: 'node2', // String，节点的唯一标识
+      id: 'node4',
       data: {
-        text: 'world',
+        text:
+          '这是一个超长文本节点: 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修稧（禊）事也。',
+        type: 'action',
       },
     },
   ],

docs/components/biz/mindflow.md

@@ -5,7 +5,9 @@ group:
   title: 业务组件
 ---
 
-## Mindflow
+# Mindflow
+
+## 基础节点
 
 <code src='./examples/Mindflow/index.tsx' />
 

packages/mindflow/package.json

@@ -28,6 +28,7 @@
     "@antv/layout": "^0.1.6",
     "@antv/x6": "^1.13.1",
     "@antv/x6-react-shape": "^1.3.1",
+    "chroma-js": "^2.1.1",
     "dagre": "^0.8.5"
   },
   "peerDependencies": {
@@ -36,6 +37,7 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
+    "@types/chroma-js": "^2.1.3",
     "@types/dagre": "^0.7.44"
   }
 }

packages/mindflow/src/definition/graphOpts.ts

@@ -0,0 +1,18 @@
+import type { Options } from '@antv/x6/lib/graph/options';
+import { minimapOpts } from './minimapOpts';
+
+/**
+ * 生成图的配置项
+ * @param container
+ * @param minimapCtn
+ */
+export const graphOpts = (container, minimapCtn): Partial<Options.Manual> => ({
+  container,
+  background: {
+    color: '#fafafa',
+  },
+  panning: true,
+  mousewheel: true,
+  scroller: true,
+  minimap: minimapOpts(minimapCtn),
+});

packages/mindflow/src/definition/minimapOpts.ts

@@ -0,0 +1,23 @@
+import { MinimaNode } from './shapes';
+
+export const minimapOpts = (container) => ({
+  container,
+  enabled: true,
+  maxScale: 1,
+  scalable: false,
+  graphOptions: {
+    async: true,
+    // 用指定的 View 替换节点默认的 View
+    getCellView(cell) {
+      if (cell.isNode()) {
+        return MinimaNode;
+      }
+    },
+    // 在小地图中不渲染边
+    createCellView(cell) {
+      if (cell.isEdge()) {
+        return null;
+      }
+    },
+  },
+});

packages/mindflow/src/definition/shapes/MinimaNode.ts

@@ -0,0 +1,20 @@
+import { NodeView } from '@antv/x6';
+
+export class MinimaNode extends NodeView {
+  protected renderMarkup() {
+    return this.renderJSONMarkup({
+      tagName: 'rect',
+      selector: 'body',
+    });
+  }
+
+  update() {
+    super.update({
+      body: {
+        refWidth: '100%',
+        refHeight: '100%',
+        fill: '#1890ff',
+      },
+    });
+  }
+}

packages/mindflow/src/definition/shapes/Node.less

@@ -0,0 +1,36 @@
+.mind-node {
+  &-container {
+    position: relative;
+    padding: 8px;
+    border: 1px solid transparent;
+    border-left-width: 4px;
+    border-radius: 4px;
+  }
+
+  &-title {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; // 以此类推，3行4行直接该数字就好啦
+  }
+
+  &-collapse {
+    position: absolute;
+    top: 50%;
+    right: -10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border: 1px solid transparent;
+    border-radius: 20px;
+    transform: translateY(-50%);
+
+    &-icon {
+      font-size: 13px;
+    }
+  }
+}

packages/mindflow/src/definition/shapes/Node.tsx

@@ -0,0 +1,53 @@
+import type { FC } from 'react';
+import React from 'react';
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
+
+import type { ReactShape } from '@antv/x6-react-shape';
+import { mapColorToHex, mapTypeToColor } from '../../utils';
+import chorma from 'chroma-js';
+
+import type { MindflowData } from '../../types';
+
+import './Node.less';
+
+interface BaseNodeProps {
+  node?: ReactShape;
+}
+
+export const Node: FC<BaseNodeProps> = ({ node }) => {
+  const data = node.getData<MindflowData>();
+  const { type, collapsed, hasChildren = true } = data;
+  const baseColor = chorma(mapColorToHex(mapTypeToColor(type)));
+
+  return (
+    <div
+      className="mind-node-container"
+      style={{
+        background: baseColor.alpha(0.1).hex(),
+        borderColor: baseColor.alpha(0.3).hex(),
+        borderLeftColor: baseColor.hex(),
+      }}
+    >
+      <div className="mind-node-title">{data.text}</div>
+
+      {hasChildren ? (
+        <div
+          className="mind-node-collapse"
+          style={{ borderColor: baseColor.hex() }}
+        >
+          {collapsed ? (
+            <PlusOutlined
+              className="mind-node-collapse-icon"
+              style={{ color: baseColor.hex() }}
+            />
+          ) : (
+            <MinusOutlined
+              className="mind-node-collapse-icon"
+              style={{ color: baseColor.hex() }}
+            />
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+};

packages/mindflow/src/definition/shapes/index.ts

@@ -0,0 +1,2 @@
+export * from './Node';
+export * from './MinimaNode';

packages/mindflow/src/hooks/useGraph.ts

@@ -1,27 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import { Graph } from '@antv/x6';
+import { graphOpts } from '../definition/graphOpts';
 import { useGraphRegister } from './useRegister';
-import { layout } from '../utils/layout';
-
-/**
- * 对数据进行预处理
- * @param data
- */
-export const preprocessData = (data: any) => {
-  return {
-    ...data,
-    nodes: data.nodes.map((node) => ({
-      ...node,
-      width: 80,
-      height: 40,
-      shape: 'react-shape',
-      component: 'test-shape',
-    })),
-  };
-};
+import { layout, preprocessData } from '../utils';
 
 export const useGraph = (data) => {
   const container = useRef();
+  const minimapContainer = useRef();
   const [graph, setGraph] = useState<Graph>(null);
 
   useGraphRegister();
@@ -32,12 +17,7 @@ export const useGraph = (data) => {
     if (!graph) {
       // 初始化画布
       setGraph(
-        new Graph({
-          container: container.current,
-          background: {
-            color: '#fafafa',
-          },
-        }),
+        new Graph(graphOpts(container.current, minimapContainer.current)),
       );
     }
   }, [container, graph]);
@@ -53,5 +33,6 @@ export const useGraph = (data) => {
   return {
     container,
     graph,
+    minimapContainer,
   };
 };

packages/mindflow/src/hooks/useRegister.tsx

@@ -1,15 +1,15 @@
 import '@antv/x6-react-shape';
 import React from 'react';
 import { Graph } from '@antv/x6';
-import { Shape } from '../definition';
+import { Node } from '../definition/shapes';
 import { useEffect } from 'react';
 
 export const useGraphRegister = () => {
   useEffect(() => {
     // 注册返回 React 组件的函数
-    Graph.registerReactComponent('test-shape', <Shape />);
+    Graph.registerReactComponent('mind-node', <Node />);
     return () => {
-      Graph.unregisterReactComponent('test-shape');
+      Graph.unregisterReactComponent('mind-node');
     };
   }, []);
 };

packages/mindflow/src/index.tsx

@@ -8,16 +8,28 @@ export * from './types';
 
 export interface MindflowProps {
   data: GraphData;
+  /**
+   * 宽度
+   */
+  width?: number | string;
+  /**
+   * 高度
+   */
+  height?: number;
 }
 
-const Mindflow: FC<MindflowProps> = ({ data }) => {
-  const { container, graph } = useGraph(data);
+const Mindflow: FC<MindflowProps> = ({ data, width, height }) => {
+  const { container, graph, minimapContainer } = useGraph(data);
 
   console.log(graph);
 
   return (
     <ErrorBoundary>
-      <div ref={container} style={{ width: '100%', height: 400 }} />
+      <div
+        ref={container}
+        style={{ width: width || '100%', height: height || 400 }}
+      />
+      <div ref={minimapContainer} />
     </ErrorBoundary>
   );
 };

packages/mindflow/src/themes/color.ts

@@ -0,0 +1,24 @@
+const baseGreen = '#52c41a';
+const baseYellow = '#faad14';
+const baseRed = '#ff4d4f';
+const baseBlue = '#69c0ff';
+const baseCyan = '#5cdbd3';
+const basePurple = '#b37feb';
+const baseGray = '#8f8f8f';
+
+const black009 = 'rgba(0,0,0,0.09)';
+const black002 = 'rgba(0,0,0,0.02)';
+
+export const mindFlowColors = {
+  white: '#ffffff',
+  blue: baseBlue,
+  cyan: baseCyan,
+  green: baseGreen,
+  yellow: baseYellow,
+  red: baseRed,
+  purple: basePurple,
+  gray: baseGray,
+  black009,
+  shadowColor: black009,
+  menuHoverBg: black002,
+};

packages/mindflow/src/types.ts

@@ -15,4 +15,7 @@ export interface Edge {
 
 export interface MindflowData {
   text: string;
+  type?: string;
+  collapsed?: boolean;
+  hasChildren?: boolean;
 }