✨ feat: handles doc

docs/useDocs/baseInrro.md

@@ -18,10 +18,17 @@ ProFlow 中的节点是一个 React 组件。这意味着它可以渲染您喜
 
 ### Custom Nodes
 
+[自定义节点使用说明](/components/customDoc)
 <code src="./demos/CustomerNode.tsx"></code>
 
 ### Handles
 
+`Handle` 可以翻译为 “**句柄**” 或者 “**端口**”，是边缘连接到节点的位置。`Handle`可以放置在任何地方。
+
+可以用 `import { FlowView, Handle, Position } from '@ant-design/pro-flow';` 的方式引入 `Handle` 与 `Position`。来自定义 `Handle` 在节点中的位置。
+
+<code src="./demos/CoreHandle.tsx"></code>
+
 ### Edges
 
 ### Custom Edges

docs/useDocs/demos/CoreHandle.tsx

@@ -0,0 +1,71 @@
+import { FC } from 'react';
+import styled from 'styled-components';
+import { FlowView, Handle, Position } from '../../../src/index';
+
+const Wrap = styled.div`
+  width: 200px;
+  height: 83px;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+
+const Container = styled.div`
+  width: 800px;
+  height: 300px;
+`;
+
+const CustomNode: FC<{
+  data: {
+    title: string;
+  };
+}> = (props) => {
+  const { data } = props;
+
+  return (
+    <Wrap>
+      <Handle type="target" position={Position.Top} id="a" />
+      <Handle type="target" position={Position.Top} id="b" style={{ left: 10 }} />
+      <Handle type="target" position={Position.Top} id="c" style={{ left: 190 }} />
+      <div>
+        <label htmlFor="text">{data.title}</label>
+      </div>
+      <Handle type="source" position={Position.Bottom} id="d" />
+      <Handle type="source" position={Position.Bottom} id="e" style={{ left: 10 }} />
+      <Handle type="source" position={Position.Bottom} id="f" style={{ left: 190 }} />
+    </Wrap>
+  );
+};
+
+const nodes = [
+  {
+    id: 'b1',
+    type: 'customNode',
+    data: {
+      title: '一堆 Handle',
+    },
+  },
+];
+
+const nodeTypes = { customNode: CustomNode };
+
+function App() {
+  return (
+    <Container>
+      <FlowView
+        onNodeClick={(event, node) => {
+          console.log(node);
+        }}
+        nodes={nodes}
+        edges={[]}
+        nodeTypes={nodeTypes}
+        miniMap={false}
+        autoLayout={false}
+      />
+    </Container>
+  );
+}
+
+export default App;

docs/useDocs/demos/CustomerNode.tsx

@@ -5,7 +5,10 @@ import { FlowView, Handle, Position } from '../../../src/index';
 const Wrap = styled.div`
   width: 200px;
   height: 83px;
-  background-color: red;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const Container = styled.div`
@@ -42,7 +45,6 @@ const nodes = [
   {
     id: 'b1',
     type: 'customNode',
-    position: { x: 0, y: 100 },
     data: {
       title: 'Text',
     },
@@ -62,6 +64,7 @@ function App() {
         edges={[]}
         nodeTypes={nodeTypes}
         miniMap={false}
+        autoLayout={false}
       />
     </Container>
   );

src/FlowView/demos/ProFlowDemo.tsx

@@ -1,6 +1,5 @@
 import {
   EdgeType,
-  FlowView,
   FlowViewEdge,
   FlowViewNode,
   FlowViewProvider,
@@ -10,6 +9,7 @@ import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { FlowView } from '../../index';
 import CustomNode from './CustomerNode';
 
 const useStyles = createStyles(({ css }) => ({
@@ -254,6 +254,7 @@ const ProFlowDemo = () => {
   const { styles } = useStyles();
 
   const handleHighlight = (node: FlowViewNode) => {
+    console.log(node);
     _nodes.forEach((_node) => {
       if (_node.id === node.id) {
         _node.select = SelectType.SELECT;

src/FlowView/helper.tsx

@@ -274,7 +274,7 @@ export const getRenderData = (
     const node = mapping[id];
     const { flowNodeType } = node;
     const { width, height } = getWidthAndHeight(node);
-    console.log(node);
+
     renderNodes.push({
       sourcePosition: Position.Right,
       targetPosition: Position.Left,