✨ feat(FlowView): add stepless zooming switch (#41)

* ✨ feat: step less zooming switch * 📝 feat: test md disable * 📝 fix: rm flow eitor demo --------- Co-authored-by: jiangchu <[email protected]>
ant-design · Dec 5, 2023 · 51783fc · 51783fc
1 parent cf6b1be
commit 51783fc
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 28 deletions.
diff --git a/docs/guide/demos/muchNode/CustomNode.tsx b/docs/guide/demos/muchNode/CustomNode.tsx
@@ -0,0 +1,84 @@
+import { Handle, Position } from '@ant-design/pro-flow';
+import { FC } from 'react';
+
+interface PipeNodeChild {
+  title: string;
+  logo?: string;
+  id: string;
+}
+
+interface PipeNode {
+  title: string;
+  logo: string;
+  des?: string;
+  children?: PipeNodeChild[];
+}
+
+const CustomNode: FC<{
+  data: PipeNode;
+}> = ({ data }) => {
+  const { title, des, logo, children = [] } = data;
+
+  console.log('reload');
+
+  return (
+    <div className={'techUIpipeNodeWrap'}>
+      <div className="pipeNode">
+        <div className="mainBox">
+          <div className="logo">
+            <img src={logo} alt="" />
+          </div>
+          <div className="title">{title}</div>
+          <div className="subLogo">
+            <img
+              src={
+                'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*Rg0cQpidn8cAAAAAAAAAAAAADvl6AQ/original'
+              }
+              alt=""
+            />
+          </div>
+        </div>
+
+        {children.length > 0 && (
+          <div className="children">
+            {children.map((item, index) => (
+              <>
+                <div className="childrenBox" key={index}>
+                  <Handle
+                    id={`${item.id}-target`}
+                    type="target"
+                    position={Position.Left}
+                    style={{
+                      opacity: 0,
+                    }}
+                  />
+                  {item.logo && (
+                    <div className="logo">
+                      <img src={item.logo} alt="" />
+                    </div>
+                  )}
+                  <div className="wrap">
+                    <div className="title">{item.title}</div>
+                    <div className="des">{item.des}</div>
+                  </div>
+                  <Handle
+                    id={`${item.id}-source`}
+                    type="source"
+                    position={Position.Right}
+                    style={{
+                      opacity: 0,
+                    }}
+                  />
+                </div>
+              </>
+            ))}
+          </div>
+        )}
+
+        {des && <div className="des">{des}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default CustomNode;
diff --git a/docs/guide/demos/muchNode/data.tsx b/docs/guide/demos/muchNode/data.tsx
@@ -0,0 +1,41 @@
+export const nodes = [
+  {
+    id: 'a1',
+    type: 'customNode',
+    data: {
+      title: 'XXX_API_a1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      des: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a2',
+    data: {
+      title: 'XXX_API_a2',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a3',
+    label: 'aaaa3',
+    data: {
+      title: 'XXX_API_a3',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+];
+export const edges = [
+  {
+    id: 'a1-a2',
+    source: 'a1',
+    target: 'a2',
+  },
+  {
+    id: 'a1-a3',
+    source: 'a1',
+    target: 'a3',
+    type: 'radius',
+  },
+];
diff --git a/docs/guide/demos/muchNode/index.tsx b/docs/guide/demos/muchNode/index.tsx
@@ -0,0 +1,38 @@
+/**
+ * compact: true
+ * defaultShowCode: true
+ */
+import { FlowPanel, FlowView, FlowViewProvider, useFlowViewer } from '@ant-design/pro-flow';
+import { useState } from 'react';
+// import './css/index.less';
+import CustomNode from './CustomNode';
+import { edges, nodes } from './data';
+
+const nodeTypes = { customNode: CustomNode };
+
+function App() {
+  const { selectNode, selectEdges, selectNodes } = useFlowViewer();
+  const [node, setNode] = useState(null);
+
+  return (
+    <div className="container">
+      <FlowView nodeTypes={nodeTypes} nodes={nodes} edges={edges}>
+        <FlowPanel>
+          <div className="panel-title">
+            {node ? `当前选中的是：${node.id}` : `当前没有选中节点`}
+          </div>
+        </FlowPanel>
+      </FlowView>
+    </div>
+  );
+}
+
+function ProApp() {
+  return (
+    <FlowViewProvider>
+      <App />
+    </FlowViewProvider>
+  );
+}
+
+export default ProApp;
diff --git a/docs/guide/test.txt b/docs/guide/test.txt
@@ -0,0 +1,13 @@
+---
+nav:
+  title: 快速上手
+  order: 10
+group:
+  title: test
+  order: 2
+title: 安装使用
+order: 1
+description:
+---
+
+<code src='./demos/muchNode/index.tsx'></code>
diff --git a/docs/index.md b/docs/index.md
@@ -15,14 +15,14 @@ features:
     imageType: primary
 
   - title: 现代化设计
-    link: /guide/switch-theme
+    link: /guide/brief-intro
     description: 默认节点打造出来的流程图，看起来用起来都更像是一个产品，而不是简易流程图。
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*MvKkQqXEyfQAAAAAAAAAAAAADoN6AQ/original
     imageType: light
 
   - title: 完善的基本功能
     description: 提供众多画布展示与交互的基础能力，开箱即用。
-    link: /guide/custom-theme
+    link: /guide/brief-intro
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*6sjjRa7lLhAAAAAAAAAAAAAADoN6AQ/original
     imageType: primary
 

diff --git a/src/FlowEditor/demos/index.tsx b/src/FlowEditor/demos/index.tsx
@@ -1,27 +1,41 @@
 /**
  * compact: true
  */
-import { FlowEditor, FlowEditorProvider, useFlowEditor } from '@ant-design/pro-flow';
+import {
+  FlowEditor,
+  FlowEditorProvider,
+  Handle,
+  Position,
+  useFlowEditor,
+} from '@ant-design/pro-flow';
 import { createStyles } from 'antd-style';
 import { FC, useEffect } from 'react';
-import { Handle, Position } from 'reactflow';
-import styled from 'styled-components';
 
-const StringNode = styled.div`
-  width: 150px;
-  height: 30px;
-  text-align: center;
-  background-color: white;
-  border: 1px solid aqua;
-  border-radius: 4px;
-  line-height: 30px;
-`;
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+    .ant-progress-text {
+      text-align: center !important;
+    }
+  `,
+  stringNode: css`
+    width: 150px;
+    height: 30px;
+    text-align: center;
+    background-color: white;
+    border: 1px solid aqua;
+    border-radius: 4px;
+    line-height: 30px;
+  `,
+}));
 
 const StringRender: FC = (node: any) => {
-  console.log(node);
   const { handles, id } = node;
+  const { styles } = useStyles();
+
   return (
-    <StringNode>
+    <div className={styles.stringNode}>
       <Handle
         id={typeof handles?.source === 'string' ? handles?.source : id}
         type={'target'}
@@ -33,20 +47,10 @@ const StringRender: FC = (node: any) => {
         type={'source'}
         position={Position.Right}
       />
-    </StringNode>
+    </div>
   );
 };
 
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    width: 100%;
-    height: 600px;
-    .ant-progress-text {
-      text-align: center !important;
-    }
-  `,
-}));
-
 const ProFlowDemo = () => {
   const editor = useFlowEditor();
   const { styles } = useStyles();

diff --git a/src/FlowView/index.tsx b/src/FlowView/index.tsx
@@ -33,6 +33,7 @@ const FlowView: React.FC<Partial<FlowViewProps>> = (props) => {
     children,
     background = true,
     autoLayout = true,
+    stepLessZooming = true,
   } = props;
   const {
     miniMapPosition,
@@ -58,8 +59,13 @@ const FlowView: React.FC<Partial<FlowViewProps>> = (props) => {
   const { zoom } = useViewport();
 
   useEffect(() => {
+    flowDataAdapter!(nodes, edges, 1, autoLayout);
+  }, [nodes, edges]);
+
+  useEffect(() => {
+    if (!stepLessZooming) return;
     flowDataAdapter!(nodes, edges, zoom, autoLayout);
-  }, [nodes, edges, zoom]);
+  }, [zoom]);
 
   const handleNodeDragStart = useCallback(
     (event: ReactMouseEvent, node: Node, nodes: Node[]) => {

diff --git a/src/constants.tsx b/src/constants.tsx
@@ -87,6 +87,7 @@ export interface FlowViewProps {
   background?: boolean;
   children?: React.ReactNode;
   autoLayout?: boolean;
+  stepLessZooming?: boolean;
 }
 
 export interface MiniMapPosition {