🚀 feat: add ProFlowController component and demos

src/ProFlowController/demos/FlowControllerDemo.tsx

@@ -0,0 +1,26 @@
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Background, BackgroundVariant } from 'reactflow';
+import ProFlowController from '..';
+import ProFlow from '../../ProFlow';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+  `,
+}));
+
+const FlowControllerDemo = memo(() => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.container}>
+      <ProFlow>
+        <ProFlowController />
+        <Background id="1" gap={10} color="#f1f1f1" variant={BackgroundVariant.Lines} />
+      </ProFlow>
+    </div>
+  );
+});
+
+export default FlowControllerDemo;

src/ProFlowController/index.md

@@ -0,0 +1,15 @@
+---
+group: 容器组件
+title: ProFlowController 画布控制器
+description:
+---
+
+我们在 ProFlow 中提供了 BloodMap 的基础节点，方便定制样式。
+
+## 基础节点
+
+## 预览模式
+
+BasicNode 组件提供了 `Preview` 子组件用于画布之外的预览。
+
+<code src="./demos/FlowControllerDemo.tsx"></code>

src/ProFlowController/index.tsx

@@ -0,0 +1,98 @@
+import { ExpandOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Space, Tooltip } from 'antd';
+import { createStyles } from 'antd-style';
+import { MiniMap, useReactFlow, useViewport } from 'reactflow';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    position: absolute;
+    bottom: 0px;
+    z-index: 100;
+    right: 10px;
+    transition: right 0.2s ease;
+  `,
+
+  visible: css`
+    right: 387px;
+  `,
+
+  controlAction: css`
+    height: 80px;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+
+  measureMap: css`
+    border-radius: 4px;
+    height: 180px;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    right: 0;
+    bottom: 0;
+    position: relative;
+  `,
+}));
+
+interface ProFlowControllerProps {
+  visible?: boolean;
+}
+
+const ProFlowController: React.FC<Partial<ProFlowControllerProps>> = (props) => {
+  const { visible = false } = props;
+  const reactFlow = useReactFlow();
+  const { zoom } = useViewport();
+  const { styles, cx } = useStyles();
+
+  const handleZoomIn = () => {
+    reactFlow.zoomIn();
+  };
+  const handleZoomOut = () => {
+    reactFlow.zoomOut();
+  };
+  const handleZoomFit = () => {
+    reactFlow.fitView();
+  };
+
+  const handleZoomTo = () => {
+    if (zoom === 1) {
+      reactFlow.zoomTo(0.5);
+    } else {
+      reactFlow.zoomTo(1);
+    }
+  };
+
+  return (
+    <div className={cx(styles.container, visible && styles.visible)}>
+      <div className={styles.controlAction}>
+        <Space>
+          <Button icon={<MinusOutlined />} onClick={handleZoomOut} />
+          <Tooltip title={zoom === 1 ? '缩放为 2:1' : '缩放为 1:1'}>
+            <Button onClick={handleZoomTo}>{Math.round(zoom * 100)}%</Button>
+          </Tooltip>
+          <Button icon={<PlusOutlined />} onClick={handleZoomIn} />
+          <Tooltip title={'自适应画布'}>
+            <Button icon={<ExpandOutlined />} onClick={handleZoomFit} />
+          </Tooltip>
+        </Space>
+      </div>
+      <MiniMap
+        className={styles.measureMap}
+        pannable
+        onNodeClick={(_, data) => {
+          const bound = {
+            ...data.position,
+            height: data.height!,
+            width: data.width!,
+          };
+          reactFlow.fitBounds(bound, { padding: 0.5 });
+        }}
+      />
+    </div>
+  );
+};
+
+export default ProFlowController;