From 57a7c84989e063b9cb7234fc1c79b1b16f9f87c9 Mon Sep 17 00:00:00 2001 From: jiangchu Date: Tue, 24 Oct 2023 17:36:47 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20=E6=96=B0=E5=A2=9EFlowView?= =?UTF-8?q?Provider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BloodNode/index.tsx | 2 -- src/ProFlow/FlowView.tsx | 21 +++++++++++++ src/ProFlow/demos/ProFlowDemo.tsx | 27 ++++++++++++----- src/ProFlow/helper.tsx | 1 - src/ProFlow/hooks/useFlowView.ts | 10 ++++++ src/ProFlow/index.tsx | 37 +++++++++-------------- src/ProFlow/provider/FlowViewProvider.tsx | 27 +++++++++++++++++ src/ProFlow/provider/provider.ts | 9 ++++++ src/constants.tsx | 1 + src/index.ts | 2 +- 10 files changed, 102 insertions(+), 35 deletions(-) create mode 100644 src/ProFlow/FlowView.tsx create mode 100644 src/ProFlow/hooks/useFlowView.ts create mode 100644 src/ProFlow/provider/FlowViewProvider.tsx create mode 100644 src/ProFlow/provider/provider.ts diff --git a/src/BloodNode/index.tsx b/src/BloodNode/index.tsx index d9d5e69..00d750d 100644 --- a/src/BloodNode/index.tsx +++ b/src/BloodNode/index.tsx @@ -90,8 +90,6 @@ const BloodNode: React.FC> = ({ }) => { const { styles, cx } = useStyles(); - console.log(zoom); - return ( <> {label && ( diff --git a/src/ProFlow/FlowView.tsx b/src/ProFlow/FlowView.tsx new file mode 100644 index 0000000..7eb3360 --- /dev/null +++ b/src/ProFlow/FlowView.tsx @@ -0,0 +1,21 @@ +import { ProFlowProps } from '@/constants'; +import { FC, useContext } from 'react'; +import FlowView from '.'; +import { FlowViewProvider } from './provider/FlowViewProvider'; +import { FlowViewContext } from './provider/provider'; + +const ProFlow: FC = (props) => { + const { isUseProvider } = useContext(FlowViewContext); + + if (isUseProvider) { + return ; + } + + return ( + + + + ); +}; + +export default ProFlow; diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx index 126e3ab..7854d94 100644 --- a/src/ProFlow/demos/ProFlowDemo.tsx +++ b/src/ProFlow/demos/ProFlowDemo.tsx @@ -1,9 +1,11 @@ import { NodeSelect, ProFlowEdge, ProFlowNode } from '@/index'; import { Progress } from 'antd'; import { createStyles } from 'antd-style'; -import { memo, useState } from 'react'; +import React, { useState } from 'react'; import styled from 'styled-components'; -import ProFlow from '..'; +import { ProFlow } from '../../index'; +import { useFlowView } from '../hooks/useFlowView'; +import { FlowViewProvider } from '../provider/FlowViewProvider'; const useStyles = createStyles(({ css }) => ({ container: css` @@ -229,14 +231,12 @@ const edges: ProFlowEdge[] = [ }, ]; -const ProFlowDemo = memo(() => { +const ProFlowDemo = () => { const [_nodes, setNodes] = useState([...nodes]); const [_edges, setEdges] = useState([...edges]); const { styles } = useStyles(); const handleHighlight = (node: ProFlowNode) => { - console.log(node); - setEdges( edges.map((edge) => { if (edge.source === node.id || edge.target === node.id) { @@ -254,6 +254,9 @@ const ProFlowDemo = memo(() => { setEdges(edges); }; + const res = useFlowView(); + console.log(res.reactFlowInstance!.getNodes()); + return (
{ onPaneClick={handleUnHighlight} nodes={_nodes} edges={_edges} - /> + >
); -}); +}; + +const FlowDemo = () => { + return ( + + + + ); +}; -export default ProFlowDemo; +export default FlowDemo; diff --git a/src/ProFlow/helper.tsx b/src/ProFlow/helper.tsx index b6b733b..29f480c 100644 --- a/src/ProFlow/helper.tsx +++ b/src/ProFlow/helper.tsx @@ -84,7 +84,6 @@ export function setNodePosition(nodes: Node[], edges: Edge[]) { } function sortEdges(edges: Edge[]) { - console.log(edges); const highEdges: Edge[] = edges.filter((item) => { return item.className?.includes('edgeSelected') || item.className?.includes('edgeSubSelected'); }); diff --git a/src/ProFlow/hooks/useFlowView.ts b/src/ProFlow/hooks/useFlowView.ts new file mode 100644 index 0000000..5552e49 --- /dev/null +++ b/src/ProFlow/hooks/useFlowView.ts @@ -0,0 +1,10 @@ +import { useContext } from 'react'; +import { FlowViewContext } from '../provider/provider'; + +export const useFlowView = () => { + const { reactFlowInstance } = useContext(FlowViewContext); + + return { + reactFlowInstance, + }; +}; diff --git a/src/ProFlow/index.tsx b/src/ProFlow/index.tsx index ad3588c..780585c 100644 --- a/src/ProFlow/index.tsx +++ b/src/ProFlow/index.tsx @@ -1,22 +1,20 @@ -import React, { useCallback, useMemo, type MouseEvent as ReactMouseEvent } from 'react'; -import ReactFlow, { - Background, - BackgroundVariant, - Edge, - Node, - ReactFlowProvider, - useViewport, -} from 'reactflow'; +import React, { + createContext, + useCallback, + useMemo, + type MouseEvent as ReactMouseEvent, +} from 'react'; +import ReactFlow, { Background, BackgroundVariant, Edge, Node, useViewport } from 'reactflow'; import 'reactflow/dist/style.css'; import { ProFlowController, ProFlowProps } from '../index'; import { convertMappingFrom, getRenderData } from './helper'; import { useStyles } from './styles'; const MIN_ZOOM = 0.1; - +export const FlowContext = createContext({}); const initFn = () => {}; -const Flow: React.FC> = (props) => { +const FlowView: React.FC> = (props) => { const { onNodeDragStart = initFn, onPaneClick = initFn, @@ -24,6 +22,7 @@ const Flow: React.FC> = (props) => { nodes, edges, miniMap = true, + children, } = props; const { styles, cx } = useStyles(); const { zoom } = useViewport(); @@ -45,9 +44,8 @@ const Flow: React.FC> = (props) => { }; } }, [mapping, edges]); - - // const [_edges] = useEdgesState(renderData.edges); - + // const reactFlowInstance = useReactFlow(); + // console.log(reactFlowInstance); const handleNodeDragStart = useCallback( (event: ReactMouseEvent, node: Node, nodes: Node[]) => { // TODO: 应当把事件中的 node 转换为 ProFlowNode 透出给用户 @@ -94,16 +92,9 @@ const Flow: React.FC> = (props) => { > {miniMap && } + {children} ); }; -const ProFlow: React.FC> = (props) => { - return ( - - - - ); -}; - -export default ProFlow; +export default FlowView; diff --git a/src/ProFlow/provider/FlowViewProvider.tsx b/src/ProFlow/provider/FlowViewProvider.tsx new file mode 100644 index 0000000..abcb09a --- /dev/null +++ b/src/ProFlow/provider/FlowViewProvider.tsx @@ -0,0 +1,27 @@ +import { FC, ReactNode } from 'react'; +import { ReactFlowProvider, useReactFlow } from 'reactflow'; +import { FlowViewContext } from './provider'; + +// 数据处理层 +const ProviderInner: FC<{ children: ReactNode }> = ({ children }) => { + const reactFlowInstance = useReactFlow(); + + return ( + + {children} + + ); +}; + +export const FlowViewProvider: FC<{ children: ReactNode }> = ({ children }) => { + return ( + + {children} + + ); +}; diff --git a/src/ProFlow/provider/provider.ts b/src/ProFlow/provider/provider.ts new file mode 100644 index 0000000..f2ea101 --- /dev/null +++ b/src/ProFlow/provider/provider.ts @@ -0,0 +1,9 @@ +import { createContext } from 'react'; +import { ReactFlowInstance } from 'reactflow'; + +interface FlowViewContextProps { + isUseProvider?: boolean; + reactFlowInstance?: ReactFlowInstance; +} + +export const FlowViewContext = createContext({}); diff --git a/src/constants.tsx b/src/constants.tsx index 7b5477d..0284f50 100644 --- a/src/constants.tsx +++ b/src/constants.tsx @@ -51,6 +51,7 @@ export interface ProFlowProps { className?: string; style?: CSSProperties; miniMap?: boolean; + children?: React.ReactNode; } export interface ProFlowProps { diff --git a/src/index.ts b/src/index.ts index b613f3e..7ceb1a0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,7 +7,7 @@ export { FlowStoreProvider, type FlowEditorStoreProviderProps } from './FlowStor export * from './Input'; export { NodeField, useNodeFieldStyles } from './NodeField'; export type { ExtraAction } from './NodeField'; -export { default as ProFlow } from './ProFlow'; +export { default as ProFlow } from './ProFlow/FlowView'; export { default as ProFlowController } from './ProFlowController'; export { default as RadiusEdge } from './RadiusEdge'; export * from './constants';