From 51783fc8d02705bad74f7c5c2c5be44431170380 Mon Sep 17 00:00:00 2001 From: ModestFun <61576426+ModestFun@users.noreply.github.com> Date: Tue, 5 Dec 2023 14:02:44 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(FlowView):=20add=20stepless=20?= =?UTF-8?q?zooming=20switch=20(#41)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :sparkles: feat: step less zooming switch * :memo: feat: test md disable * :memo: fix: rm flow eitor demo --------- Co-authored-by: jiangchu --- docs/guide/demos/muchNode/CustomNode.tsx | 84 ++++++++++++++++++++++++ docs/guide/demos/muchNode/data.tsx | 41 ++++++++++++ docs/guide/demos/muchNode/index.tsx | 38 +++++++++++ docs/guide/test.txt | 13 ++++ docs/index.md | 4 +- src/FlowEditor/demos/index.tsx | 54 ++++++++------- src/FlowView/index.tsx | 8 ++- src/constants.tsx | 1 + 8 files changed, 215 insertions(+), 28 deletions(-) create mode 100644 docs/guide/demos/muchNode/CustomNode.tsx create mode 100644 docs/guide/demos/muchNode/data.tsx create mode 100644 docs/guide/demos/muchNode/index.tsx create mode 100644 docs/guide/test.txt diff --git a/docs/guide/demos/muchNode/CustomNode.tsx b/docs/guide/demos/muchNode/CustomNode.tsx new file mode 100644 index 0000000..7ee195d --- /dev/null +++ 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 ( +
+
+
+
+ +
+
{title}
+
+ +
+
+ + {children.length > 0 && ( +
+ {children.map((item, index) => ( + <> +
+ + {item.logo && ( +
+ +
+ )} +
+
{item.title}
+
{item.des}
+
+ +
+ + ))} +
+ )} + + {des &&
{des}
} +
+
+ ); +}; + +export default CustomNode; diff --git a/docs/guide/demos/muchNode/data.tsx b/docs/guide/demos/muchNode/data.tsx new file mode 100644 index 0000000..63ea6ff --- /dev/null +++ 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 new file mode 100644 index 0000000..8bf065c --- /dev/null +++ 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 ( +
+ + +
+ {node ? `当前选中的是：${node.id}` : `当前没有选中节点`} +
+ + +
+ ); +} + +function ProApp() { + return ( + + + + ); +} + +export default ProApp; diff --git a/docs/guide/test.txt b/docs/guide/test.txt new file mode 100644 index 0000000..c7c596e --- /dev/null +++ b/docs/guide/test.txt @@ -0,0 +1,13 @@ +--- +nav: + title: 快速上手 + order: 10 +group: + title: test + order: 2 +title: 安装使用 +order: 1 +description: +--- + + diff --git a/docs/index.md b/docs/index.md index de49f88..7cad807 100644 --- 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 index ec4c041..95a7f06 100644 --- 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 ( - +
{ type={'source'} position={Position.Right} /> - +
); }; -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 index 49c5ef8..047caa0 100644 --- a/src/FlowView/index.tsx +++ b/src/FlowView/index.tsx @@ -33,6 +33,7 @@ const FlowView: React.FC> = (props) => { children, background = true, autoLayout = true, + stepLessZooming = true, } = props; const { miniMapPosition, @@ -58,8 +59,13 @@ const FlowView: React.FC> = (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 index 5aa5dde..c9ed04f 100644 --- 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 {