From c203e6ed7ccadb903ffc270ca04832bb00d27ea0 Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 5 Dec 2023 13:49:22 +0800 Subject: [PATCH 1/8] :sparkles: feat: step less zooming switch --- docs/guide/demos/muchNode/CustomNode.tsx | 84 ++++++++++++++++++++++++ docs/guide/demos/muchNode/data.tsx | 41 ++++++++++++ docs/guide/demos/muchNode/index.tsx | 38 +++++++++++ docs/guide/test.md | 13 ++++ docs/index.md | 4 +- src/FlowView/index.tsx | 8 ++- src/constants.tsx | 1 + 7 files changed, 186 insertions(+), 3 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.md 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.md b/docs/guide/test.md new file mode 100644 index 0000000..c7c596e --- /dev/null +++ b/docs/guide/test.md @@ -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/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 { From c764113531dcc427160b3d4b8e47ec7bc84752b6 Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 5 Dec 2023 13:50:05 +0800 Subject: [PATCH 2/8] :memo: feat: test md disable --- docs/guide/{test.md => test.txt} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/guide/{test.md => test.txt} (100%) diff --git a/docs/guide/test.md b/docs/guide/test.txt similarity index 100% rename from docs/guide/test.md rename to docs/guide/test.txt From e3bd32d0924650a669ddcf3141646ebf9d9ea75c Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 5 Dec 2023 13:59:39 +0800 Subject: [PATCH 3/8] :memo: fix: rm flow eitor demo --- src/FlowEditor/demos/index.tsx | 54 ++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 25 deletions(-) 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(); From a5c26d8f3efa60b467570568c59c6536a57e85fb Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 5 Dec 2023 14:57:37 +0800 Subject: [PATCH 4/8] :memo: fix: flow eitor demo css import --- src/FlowEditor/demos/index.less | 17 +++++++++++++++++ src/FlowEditor/demos/index.tsx | 31 ++++++------------------------- 2 files changed, 23 insertions(+), 25 deletions(-) create mode 100644 src/FlowEditor/demos/index.less diff --git a/src/FlowEditor/demos/index.less b/src/FlowEditor/demos/index.less new file mode 100644 index 0000000..27665a7 --- /dev/null +++ b/src/FlowEditor/demos/index.less @@ -0,0 +1,17 @@ +.container { + width: 100%; + height: 600px; + .ant-progress-text { + text-align: center !important; + } +} + +.stringNode { + width: 150px; + height: 30px; + text-align: center; + background-color: white; + border: 1px solid aqua; + border-radius: 4px; + line-height: 30px; +} diff --git a/src/FlowEditor/demos/index.tsx b/src/FlowEditor/demos/index.tsx index 95a7f06..1c05fe4 100644 --- a/src/FlowEditor/demos/index.tsx +++ b/src/FlowEditor/demos/index.tsx @@ -8,34 +8,14 @@ import { Position, useFlowEditor, } from '@ant-design/pro-flow'; -import { createStyles } from 'antd-style'; import { FC, useEffect } from 'react'; - -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; - `, -})); +import './index.less'; const StringRender: FC = (node: any) => { const { handles, id } = node; - const { styles } = useStyles(); return ( -
+
{ ); }; +const nodeTypes = { StringNode: StringRender }; + const ProFlowDemo = () => { const editor = useFlowEditor(); - const { styles } = useStyles(); useEffect(() => { editor.addNode({ @@ -68,8 +49,8 @@ const ProFlowDemo = () => { }, [editor]); return ( -
- +
+
); }; From ad9cafabafb5eb56c46a9b0775113f426faaaf9b Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 5 Dec 2023 17:06:30 +0800 Subject: [PATCH 5/8] :memo: feat: flow editor drag demo --- docs/guide/demos/customEdge/btn.less | 4 ++++ docs/guide/demos/customEdge/data.ts | 1 + docs/guide/demos/flowEditor/dragAddNode.tsx | 13 ++++++++----- docs/guide/demos/flowEditor/sidebar.tsx | 1 - docs/guide/flowEditor.zh-CN.md | 5 +++-- package.json | 2 +- src/FlowEditor/hooks/useFlowEditor.ts | 14 ++++++++++++-- src/FlowView/helper.tsx | 6 +++++- src/FlowView/styles.tsx | 6 ++++++ src/constants.tsx | 1 + 10 files changed, 41 insertions(+), 12 deletions(-) diff --git a/docs/guide/demos/customEdge/btn.less b/docs/guide/demos/customEdge/btn.less index ba468bf..975a470 100644 --- a/docs/guide/demos/customEdge/btn.less +++ b/docs/guide/demos/customEdge/btn.less @@ -11,3 +11,7 @@ .edgebutton:hover { box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08); } + +.customEdge:hover path { + stroke: red; +} diff --git a/docs/guide/demos/customEdge/data.ts b/docs/guide/demos/customEdge/data.ts index a9cd9cc..af0e784 100644 --- a/docs/guide/demos/customEdge/data.ts +++ b/docs/guide/demos/customEdge/data.ts @@ -25,5 +25,6 @@ export const edges = [ source: 'a1', target: 'a2', type: 'buttonEdge', + className: 'customEdge', }, ]; diff --git a/docs/guide/demos/flowEditor/dragAddNode.tsx b/docs/guide/demos/flowEditor/dragAddNode.tsx index 2c40f7c..6fcfac2 100644 --- a/docs/guide/demos/flowEditor/dragAddNode.tsx +++ b/docs/guide/demos/flowEditor/dragAddNode.tsx @@ -15,6 +15,7 @@ const ProFlowDemo = () => { const editor = useFlowEditor(); const onDragOver = useCallback((event) => { + console.log('here', event); event.preventDefault(); event.dataTransfer.dropEffect = 'move'; }, []); @@ -22,15 +23,15 @@ const ProFlowDemo = () => { const onDrop = useCallback( (event) => { event.preventDefault(); + if (!editor) return; const type = event.dataTransfer.getData('application/reactflow'); - - console.log(type); - if (typeof type === 'undefined' || !type) { return; } + console.log(editor); + const position = editor.screenToFlowPosition({ x: event.clientX, y: event.clientY, @@ -66,8 +67,10 @@ const ProFlowDemo = () => {
diff --git a/docs/guide/demos/flowEditor/sidebar.tsx b/docs/guide/demos/flowEditor/sidebar.tsx index 8c326ff..036271e 100644 --- a/docs/guide/demos/flowEditor/sidebar.tsx +++ b/docs/guide/demos/flowEditor/sidebar.tsx @@ -1,6 +1,5 @@ export default () => { const onDragStart = (event, nodeType) => { - console.log(event); event.dataTransfer.setData('application/reactflow', nodeType); event.dataTransfer.effectAllowed = 'move'; }; diff --git a/docs/guide/flowEditor.zh-CN.md b/docs/guide/flowEditor.zh-CN.md index 608f7dd..951a973 100644 --- a/docs/guide/flowEditor.zh-CN.md +++ b/docs/guide/flowEditor.zh-CN.md @@ -31,9 +31,10 @@ const editor = useFlowEditor(); - +## 拖拽插入节点 + + ## 可编辑节点 diff --git a/package.json b/package.json index a40b606..7a1d097 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "polished": "^4", "react-hotkeys-hook": "^4", "react-layout-kit": "^1", - "reactflow": "^11.8", + "reactflow": "^11.10.0", "use-merge-value": "^1", "yjs": "^13", "zustand": "^4.4.1", diff --git a/src/FlowEditor/hooks/useFlowEditor.ts b/src/FlowEditor/hooks/useFlowEditor.ts index bd9c675..795e0fb 100644 --- a/src/FlowEditor/hooks/useFlowEditor.ts +++ b/src/FlowEditor/hooks/useFlowEditor.ts @@ -1,6 +1,6 @@ import { useMemoizedFn } from 'ahooks'; -import { useMemo } from 'react'; -import { ReactFlowInstance } from 'reactflow'; +import { useCallback, useMemo } from 'react'; +import { ReactFlowInstance, useReactFlow } from 'reactflow'; import { useStoreApi } from '../store'; import { PublicStoreAction } from '../store/slices'; import { FlattenEdges, FlattenNodes } from '../types'; @@ -14,6 +14,7 @@ export interface FlowEditorInstance extends PublicStoreAction { export const useFlowEditor = (): FlowEditorInstance => { const storeApi = useStoreApi(); + const reactFlowInstance = useReactFlow(); /* eslint-disable @typescript-eslint/no-unused-vars */ const { @@ -45,10 +46,19 @@ export const useFlowEditor = (): FlowEditorInstance => { const getFlattenNodes = useMemoizedFn(() => storeApi.getState().flattenNodes); const getFlattenEdges = useMemoizedFn(() => storeApi.getState().flattenEdges); const getSelectedKeys = useMemoizedFn(() => storeApi.getState().selectedKeys); + const screenToFlowPosition = useCallback( + (position: { x: number; y: number }) => { + console.log(reactFlowInstance); + if (!reactFlowInstance) return { x: 0, y: 0 }; + return reactFlowInstance!.screenToFlowPosition!(position); + }, + [reactFlowInstance], + ); return useMemo( () => ({ ...instance, + screenToFlowPosition, getFlattenNodes, getSelectedKeys, getFlattenEdges, diff --git a/src/FlowView/helper.tsx b/src/FlowView/helper.tsx index 8a0e958..2385213 100644 --- a/src/FlowView/helper.tsx +++ b/src/FlowView/helper.tsx @@ -98,6 +98,7 @@ export function setNodePosition(nodes: Node[], edges: Edge[], autoLayout: boolea } export function sortEdges(edges: Edge[]) { + console.log(edges); const highEdges: Edge[] = edges.filter((item) => { return item.className?.includes('edgeSelected') || item.className?.includes('edgeSubSelected'); }); @@ -164,6 +165,7 @@ export function getRenderEdges(edges: FlowViewEdge[]) { animated, sourceHandle, targetHandle, + className, } = edge; return { @@ -175,7 +177,7 @@ export function getRenderEdges(edges: FlowViewEdge[]) { type, animated, label, - className: getEdgeClsFromSelectType(select), + className: getEdgeClsFromSelectType(select) + ' ' + className, }; }); @@ -308,6 +310,8 @@ export const getRenderData = ( const { _nodes, _edges } = setNodePosition(renderNodes, renderEdges, autoLayout); + console.log(_edges); + return { nodes: _nodes, edges: sortEdges(_edges), diff --git a/src/FlowView/styles.tsx b/src/FlowView/styles.tsx index fe7eb81..887ae36 100644 --- a/src/FlowView/styles.tsx +++ b/src/FlowView/styles.tsx @@ -39,6 +39,12 @@ export const useStyles = createStyles(({ css, cx }) => ({ z-index: 100; } + .${EDGE_SUB_SELECT}:hover path { + stroke: red; + stroke-width: 1; + z-index: 100; + } + .${EDGE_DANGER} path { stroke: #f7636e; stroke-width: 2; diff --git a/src/constants.tsx b/src/constants.tsx index c9ed04f..78b9dc0 100644 --- a/src/constants.tsx +++ b/src/constants.tsx @@ -71,6 +71,7 @@ export interface FlowViewEdge { select?: SelectType; label?: string; type?: EdgeType | string; + className?: string; } export interface FlowViewProps { From baded5b55df812d2bc6e6476e940325f896b4f32 Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 5 Dec 2023 17:38:16 +0800 Subject: [PATCH 6/8] :memo: feat: drag demo --- .../demos/flowEditor/css/dragAddNode.less | 2 +- docs/guide/demos/flowEditor/dragAddNode.tsx | 25 ++++-- docs/guide/demos/flowEditor/sidebar.tsx | 16 ++-- src/FlowDrawer/index.less | 44 +++++++++++ src/FlowDrawer/index.tsx | 78 +++++++++++++++++++ src/index.ts | 2 + 6 files changed, 154 insertions(+), 13 deletions(-) create mode 100644 src/FlowDrawer/index.less create mode 100644 src/FlowDrawer/index.tsx diff --git a/docs/guide/demos/flowEditor/css/dragAddNode.less b/docs/guide/demos/flowEditor/css/dragAddNode.less index c175c62..d2a9449 100644 --- a/docs/guide/demos/flowEditor/css/dragAddNode.less +++ b/docs/guide/demos/flowEditor/css/dragAddNode.less @@ -6,6 +6,7 @@ .aside { width: 100%; + box-sizing: border-box; border-right: 1px solid #eee; padding: 15px 10px; font-size: 12px; @@ -43,5 +44,4 @@ .selectall { margin-top: 10px; } - } diff --git a/docs/guide/demos/flowEditor/dragAddNode.tsx b/docs/guide/demos/flowEditor/dragAddNode.tsx index 6fcfac2..e51c194 100644 --- a/docs/guide/demos/flowEditor/dragAddNode.tsx +++ b/docs/guide/demos/flowEditor/dragAddNode.tsx @@ -2,7 +2,14 @@ * compact: true * defaultShowCode: true */ -import { FlowEditor, FlowEditorProvider, useFlowEditor } from '@ant-design/pro-flow'; +import { + BasicNode, + EditNode, + FlowDrawer, + FlowEditor, + FlowEditorProvider, + useFlowEditor, +} from '@ant-design/pro-flow'; import { useCallback, useEffect } from 'react'; import { StringRender } from './StringNode'; import './css/dragAddNode.less'; @@ -11,11 +18,15 @@ import Sidebar from './sidebar'; let id = 0; const getId = () => `dndnode_${id++}`; +const nodeTypes = { + StringNode: StringRender, + BasicNode: BasicNode, + EditNode: EditNode, +}; const ProFlowDemo = () => { const editor = useFlowEditor(); const onDragOver = useCallback((event) => { - console.log('here', event); event.preventDefault(); event.dataTransfer.dropEffect = 'move'; }, []); @@ -26,12 +37,12 @@ const ProFlowDemo = () => { if (!editor) return; const type = event.dataTransfer.getData('application/reactflow'); + + console.log(type); if (typeof type === 'undefined' || !type) { return; } - console.log(editor); - const position = editor.screenToFlowPosition({ x: event.clientX, y: event.clientY, @@ -40,7 +51,7 @@ const ProFlowDemo = () => { id: getId(), type, position, - data: { label: `${type} node` }, + data: { title: `${type} node` }, }; editor.addNode(newNode); @@ -63,10 +74,12 @@ const ProFlowDemo = () => { }); }, [editor]); + console.log(FlowDrawer); + return (
{ return (
您可以将这些节点拖到上面的画布中
-
onDragStart(event, 'input')} draggable> - Input Node +
onDragStart(event, 'StringNode')} + draggable + > + String Node
-
onDragStart(event, 'default')} draggable> - Default Node +
onDragStart(event, 'BasicNode')} draggable> + BasicNode Node
onDragStart(event, 'output')} + onDragStart={(event) => onDragStart(event, 'EditNode')} draggable > - Output Node + EditNode Node
); diff --git a/src/FlowDrawer/index.less b/src/FlowDrawer/index.less new file mode 100644 index 0000000..f2d7cc3 --- /dev/null +++ b/src/FlowDrawer/index.less @@ -0,0 +1,44 @@ +.dataFlowDrawer { + text-align: left; + color: #000; + + :global { + .ant-drawer-title { + text-align: left; + } + + /* + * 横向折叠面板 + */ + // 最外层 + .dataFlowDrawerDraggablePanel.studio-draggable-panel { + height: 100%; + overflow: visible; + z-index: 19; + border-color: transparent; + border-left-width: 0 !important; + } + + // 内容容器(伪类结合) + .studio-draggable-panel-left-handle:hover::before { + background-color: rgb(195, 195, 195) !important; + background: rgb(195, 195, 195) !important; + } + + .studio-draggable-panel-left-handle:active::before { + background-color: rgb(195, 195, 195) !important; + background: rgb(195, 195, 195) !important; + } + + .dataFlowDrawerDraggablePanel .studio-draggable-panel-toggle { + display: none; + } + + /** + 抽屉 + */ + .ant-drawer-wrapper-body .ant-drawer-body { + padding: 0; + } + } +} diff --git a/src/FlowDrawer/index.tsx b/src/FlowDrawer/index.tsx new file mode 100644 index 0000000..f89f93c --- /dev/null +++ b/src/FlowDrawer/index.tsx @@ -0,0 +1,78 @@ +import { DraggablePanel } from '@ant-design/pro-editor'; +import type { DrawerProps } from 'antd'; +import { Drawer } from 'antd'; +import { createStyles } from 'antd-style'; +import React from 'react'; +import './index.less'; + +interface DataFlowDrawProps extends DrawerProps { + resize?: boolean; +} +// interface Size { +// width: string | number; +// height: string | number; +// } +// interface NumberSize { +// width: number; +// height: number; +// } +const useStyles = createStyles(({ css }) => ({ + container: css` + width: 100%; + height: 600px; + `, +})); +// const VisibleMinWidth = 300; // 画布最小可视宽度 +const FlowDrawer: React.FC = ({ + resize = false, + open, + width, + mask = false, + style = {}, + rootStyle = {}, + className, + onClose = () => {}, + children, + ...props +}) => { + const { cx } = useStyles(); + + // const [dragedWith, setDragedWidth] = useState(width); + // const onSizeDragging = (delta: NumberSize, size?: Size) => { + // const reactFlowWidth = document.querySelector('.react-flow')?.offsetWidth; // 画布宽度 + // const drawerWidthNum = size?.width?.split('px')?.[0] + // ? Number(size?.width?.split('px')?.[0]) + // : 0; // 侧边抽屉动态宽度 + // if (drawerWidthNum && drawerWidthNum <= reactFlowWidth - VisibleMinWidth) { + // setDragedWidth(size?.width); + // } + // }; + + return ( + + + {children} + + + ); +}; + +export default FlowDrawer; diff --git a/src/index.ts b/src/index.ts index 6781c7e..ec925bd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,10 +2,12 @@ import { BaseEdge, EdgeLabelRenderer, EdgeProps, Handle, Position, getBezierPath export * from './Background'; export { default as Background } from './Background'; +export { default as BasicNode } from './BasicNode'; export { default as CanvasLoading } from './CanvasLoading'; export * from './ControlInput'; export { default as EditNode } from './EditNode'; export { default as EditableText } from './EditableText'; +export { default as FlowDrawer } from './FlowDrawer'; export * from './FlowEditor'; export * from './FlowPanel'; export { default as FlowPanel } from './FlowPanel'; From d9cbb37e0a43a1a52bd7d92a18e97be1c90beecd Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 5 Dec 2023 17:46:02 +0800 Subject: [PATCH 7/8] :memo: feat: rm console --- docs/guide/demos/flowEditor/dragAddNode.tsx | 13 ++----------- docs/guide/demos/flowViewIntro/autoFlow.tsx | 8 +++++++- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/docs/guide/demos/flowEditor/dragAddNode.tsx b/docs/guide/demos/flowEditor/dragAddNode.tsx index e51c194..d5f27d5 100644 --- a/docs/guide/demos/flowEditor/dragAddNode.tsx +++ b/docs/guide/demos/flowEditor/dragAddNode.tsx @@ -5,7 +5,6 @@ import { BasicNode, EditNode, - FlowDrawer, FlowEditor, FlowEditorProvider, useFlowEditor, @@ -16,7 +15,7 @@ import './css/dragAddNode.less'; import Sidebar from './sidebar'; let id = 0; -const getId = () => `dndnode_${id++}`; +const getId = () => `node_${id++}`; const nodeTypes = { StringNode: StringRender, @@ -37,8 +36,6 @@ const ProFlowDemo = () => { if (!editor) return; const type = event.dataTransfer.getData('application/reactflow'); - - console.log(type); if (typeof type === 'undefined' || !type) { return; } @@ -61,21 +58,15 @@ const ProFlowDemo = () => { useEffect(() => { editor.addNode({ - id: 'a1', + id: getId(), type: 'StringNode', position: { x: 200, y: 100 }, data: { title: 'String Node', - handles: { - source: 'a1-source', - target: 'a1-target', - }, }, }); }, [editor]); - console.log(FlowDrawer); - return (
- + { + console.log(edge); + }} + >
); } From 37ffb4927d30176a7cc9de091078bd26696caff3 Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 5 Dec 2023 17:46:34 +0800 Subject: [PATCH 8/8] :memo: feat: rm helper console --- src/FlowView/helper.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/FlowView/helper.tsx b/src/FlowView/helper.tsx index 2385213..96b4863 100644 --- a/src/FlowView/helper.tsx +++ b/src/FlowView/helper.tsx @@ -98,7 +98,6 @@ export function setNodePosition(nodes: Node[], edges: Edge[], autoLayout: boolea } export function sortEdges(edges: Edge[]) { - console.log(edges); const highEdges: Edge[] = edges.filter((item) => { return item.className?.includes('edgeSelected') || item.className?.includes('edgeSubSelected'); }); @@ -310,8 +309,6 @@ export const getRenderData = ( const { _nodes, _edges } = setNodePosition(renderNodes, renderEdges, autoLayout); - console.log(_edges); - return { nodes: _nodes, edges: sortEdges(_edges),