🐛 fix: Some minor features optimization (#82) (#83)

1. export type NodeProps
2. export screenToFlowPosition for FlowEditorInstance
3. fix bug: FlowEditor won't always loading when nodes empty
4. add deselectAll before delete
5. add deleteNodes and deleteEdges function

docs/caseShow/demos/pipelineDemo.tsx

@@ -6,11 +6,12 @@ import {
   FlowView,
   FlowViewProvider,
   Handle,
+  NodeProps,
   Position,
+  SelectType,
   useFlowViewer,
 } from '@ant-design/pro-flow';
 import { FC, useCallback } from 'react';
-import { SelectType } from '../../../src';
 import useStyles from './index.style';
 
 interface PipeNodeChild {
@@ -32,9 +33,7 @@ interface PipeNode {
 const nodeWidth = 170;
 const nodeHeight = 500;
 
-export const PipeNode: FC<{
-  data: PipeNode;
-}> = ({ data }) => {
+export const PipeNode: FC<NodeProps<PipeNode>> = ({ data }) => {
   const { stepTitle, title, des, logo, needSwitch = false, children = [], selectType } = data;
   const { styles } = useStyles();
 

src/BasicGroupNode/demos/data.ts

@@ -1,6 +1,6 @@
-import { FlowViewNode } from '@ant-design/pro-flow';
+import { BasicGroupNodeData, FlowViewNode } from '@ant-design/pro-flow';
 
-export const nodes: FlowViewNode[] = [
+export const nodes: FlowViewNode<BasicGroupNodeData[]>[] = [
   {
     id: 'd1',
     label: 'group1',
@@ -10,7 +10,7 @@ export const nodes: FlowViewNode[] = [
         id: 'a5',
         data: {
           title: 'XXX数据源',
-          describe: 'cksadjfnf',
+          description: 'cksadjfnf',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
         },
       },
@@ -19,22 +19,22 @@ export const nodes: FlowViewNode[] = [
         data: {
           title: 'XXX_API',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-          describe: 'XXX_XXX_XXX_API',
+          description: 'XXX_XXX_XXX_API',
         },
       },
       {
         id: 'a7',
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
-          describe: '2031030213014',
+          description: '2031030213014',
         },
       },
       {
         id: 'a8',
         data: {
           title: 'XXX数据源',
-          describe: 'cksadjfnf',
+          description: 'cksadjfnf',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
         },
       },
@@ -43,7 +43,7 @@ export const nodes: FlowViewNode[] = [
         data: {
           title: 'XXX_API',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-          describe: 'XXX_XXX_XXX_API',
+          description: 'XXX_XXX_XXX_API',
         },
       },
     ],
@@ -57,7 +57,7 @@ export const nodes: FlowViewNode[] = [
         id: 'a5',
         data: {
           title: 'XXX数据源',
-          describe: 'cksadjfnf',
+          description: 'cksadjfnf',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
         },
       },
@@ -66,22 +66,22 @@ export const nodes: FlowViewNode[] = [
         data: {
           title: 'XXX_API',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-          describe: 'XXX_XXX_XXX_API',
+          description: 'XXX_XXX_XXX_API',
         },
       },
       {
         id: 'a7',
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
-          describe: '2031030213014',
+          description: '2031030213014',
         },
       },
       {
         id: 'a8',
         data: {
           title: 'XXX数据源',
-          describe: 'cksadjfnf',
+          description: 'cksadjfnf',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
         },
       },
@@ -90,23 +90,23 @@ export const nodes: FlowViewNode[] = [
         data: {
           title: 'XXX_API',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-          describe: 'XXX_XXX_XXX_API',
+          description: 'XXX_XXX_XXX_API',
         },
       },
       {
         id: 'a10',
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
-          describe: '2031030213014',
+          description: '2031030213014',
         },
       },
       {
         id: 'a11',
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
-          describe: '2031030213014',
+          description: '2031030213014',
         },
       },
     ],

src/BasicGroupNode/index.tsx

@@ -92,7 +92,7 @@ const BasicNodeGroup: React.FC<{
             };
             _node.title = data.title;
             _node.logo = data.logo;
-            _node.des = data.describe;
+            _node.des = data.description;
             return GroupItem(_node);
           })}
           <div className={`${styles.btnWrap} buttonWrap`}></div>

src/FlowEditor/container/FlowEditor.tsx

@@ -1,7 +1,7 @@
 import { createStyles, cx } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { debounce, throttle } from 'lodash-es';
-import { JSXElementConstructor, forwardRef, useCallback, useEffect, useState } from 'react';
+import { JSXElementConstructor, forwardRef, useCallback, useEffect, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import ReactFlow, {
   Background,
@@ -120,12 +120,25 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
     ref,
   ) => {
     const { theme, styles } = useStyles();
-    const [flowInit, setFlowInit] = useState(false);
 
     const nodes: Node[] = useStore(flowEditorSelectors.nodeList, isEqual);
     const edges = useStore(flowEditorSelectors.edgeList, isEqual);
     const editor = useFlowEditor();
 
+    const nodesInitialized = useNodesInitialized();
+
+    const flowInit = useMemo(() => {
+      if (nodesInitialized) {
+        return true;
+      }
+
+      if (nodes.length > 0) {
+        return false;
+      } else {
+        return true;
+      }
+    }, [nodes, nodesInitialized]);
+
     const [
       // onNodesChange,
       updateEdgesOnConnection,
@@ -134,6 +147,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
       onElementSelectChange,
       // onEdgesChange,
       dispatchNodes,
+      deselectElement,
     ] = useStore((s) => [
       // s.onNodesChange,
       s.updateEdgesOnConnection,
@@ -142,6 +156,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
       s.onElementSelectChange,
       // s.onEdgesChange,
       s.dispatchNodes,
+      s.deselectElement,
     ]);
 
     const instance = useReactFlow();
@@ -154,8 +169,6 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
       onChange: onViewPortChange ? debounce(onViewPortChange, 300) : undefined,
     });
 
-    const nodesInitialized = useNodesInitialized();
-
     useEffect(() => {
       // 先把画布的 viewport 设置好
       if (!defaultViewport) {
@@ -166,7 +179,6 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
 
       // 然后设定初始化节点的相关状态
       if (nodesInitialized) {
-        setFlowInit(true);
         onNodesInit?.(editor);
       }
     }, [nodesInitialized]);
@@ -190,6 +202,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
             break;
 
           case 'remove':
+            deselectElement(c.id);
             dispatchNodes({ type: 'deleteNode', id: c.id });
             break;
           case 'select':

src/FlowEditor/hooks/useFlowEditor.ts

@@ -1,6 +1,6 @@
 import { useMemoizedFn } from 'ahooks';
 import { useCallback, useMemo } from 'react';
-import { ReactFlowInstance, useReactFlow } from 'reactflow';
+import { ReactFlowInstance, XYPosition, useReactFlow } from 'reactflow';
 import { useStoreApi } from '../store';
 import { PublicStoreAction } from '../store/slices';
 import { FlattenEdges, FlattenNodes } from '../types';
@@ -10,6 +10,7 @@ export interface FlowEditorInstance extends PublicStoreAction {
   getFlattenEdges: () => FlattenEdges;
   getSelectedKeys: () => string[];
   reactflow?: ReactFlowInstance;
+  screenToFlowPosition: (position: XYPosition) => XYPosition;
 }
 
 export const useFlowEditor = (): FlowEditorInstance => {

src/FlowEditor/store/slices/edgesSlice.ts

@@ -11,6 +11,7 @@ export interface PublicEdgesAction {
   dispatchEdges: (payload: EdgeDispatch, options?: ActionOptions) => void;
   addEdges: (edges: Record<string, Edge>, options?: ActionOptions) => void;
   deleteEdge: (id: string) => void;
+  deleteEdges: (ids: string[]) => void;
   updateEdge: (id: string, edge: Edge, options?: ActionOptions) => void;
   updateEdgeData: <T extends object>(
     id: string,
@@ -83,6 +84,7 @@ export const edgesSlice: StateCreator<
     changes.forEach((e) => {
       switch (e.type) {
         case 'remove':
+          get().deselectElement(e.id);
           get().dispatchEdges({ type: 'deleteEdge', id: e.id });
       }
     });
@@ -93,6 +95,13 @@ export const edgesSlice: StateCreator<
     get().dispatchEdges({ type: 'deleteEdge', id });
   },
 
+  deleteEdges: (ids) => {
+    ids.forEach((id) => {
+      get().deselectElement(id);
+      get().dispatchEdges({ type: 'deleteEdge', id });
+    });
+  },
+
   updateEdgeData: (id, newData, deepReplace = false, options) => {
     get().dispatchEdges(
       {

src/FlowEditor/store/slices/generalActionSlice.ts

@@ -130,8 +130,9 @@ export const generalActionSlice: StateCreator<
   },
 
   deleteSelection: () => {
-    const { selectedKeys, flattenEdges, flattenNodes, dispatchNodes, dispatchEdges } = get();
-
+    const { selectedKeys, flattenEdges, flattenNodes, dispatchNodes, dispatchEdges, deselectAll } =
+      get();
+    deselectAll();
     selectedKeys.forEach((id) => {
       if (flattenNodes[id]) dispatchNodes({ type: 'deleteNode', id });
       if (flattenEdges[id]) dispatchEdges({ type: 'deleteEdge', id });

src/FlowEditor/store/slices/nodesSlice.ts

@@ -29,11 +29,13 @@ export interface PublicNodesAction {
    */
   deleteNode: (id: string) => void;
   /**
-   * 更新节点元数据
-   * @param id 要更新的节点 id
-   * @param key 要更新的元数据键名
-   * @param value 要更新的元数据值
-   * @param options 节点操作的选项
+   * 删除节点元素
+   * @param id 要删除的节点 id
+   */
+  deleteNodes: (ids: string[]) => void;
+  /**
+   * 批量删除节点
+   * @param ids 要批量删除的节点 id
    */
   updateNodeMeta: <T extends keyof MetaData>(
     id: string,
@@ -154,4 +156,10 @@ export const nodesSlice: StateCreator<
     get().deselectElement(id);
     get().dispatchNodes({ type: 'deleteNode', id });
   },
+  deleteNodes: (ids) => {
+    ids.forEach((id) => {
+      get().deselectElement(id);
+      get().dispatchNodes({ type: 'deleteNode', id });
+    });
+  },
 });

src/FlowView/demos/data.tsx

@@ -39,7 +39,7 @@ export const nodes: FlowViewNode[] = [
     id: 'a1',
     label: '12345',
     data: {
-      title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
+      title: 'XXX_API_ddddddddddddddddddddddddddddddƒddddddddddddddddddddddddb1',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
       description: 'XXX_XXX_XXX_API',
     },
@@ -102,7 +102,7 @@ export const nodes: FlowViewNode[] = [
         id: 'a5',
         data: {
           title: 'XXX数据源',
-          describe: 'cksadjfnf',
+          description: 'cksadjfnf',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
         },
       },
@@ -111,22 +111,22 @@ export const nodes: FlowViewNode[] = [
         data: {
           title: 'XXX_API',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-          describe: 'XXX_XXX_XXX_API',
+          description: 'XXX_XXX_XXX_API',
         },
       },
       {
         id: 'a7',
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
-          describe: '2031030213014',
+          description: '2031030213014',
         },
       },
       {
         id: 'a8',
         data: {
           title: 'XXX数据源',
-          describe: 'cksadjfnf',
+          description: 'cksadjfnf',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
         },
       },
@@ -135,23 +135,23 @@ export const nodes: FlowViewNode[] = [
         data: {
           title: 'XXX_API',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
-          describe: 'XXX_XXX_XXX_API',
+          description: 'XXX_XXX_XXX_API',
         },
       },
       {
         id: 'a10',
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
-          describe: '2031030213014',
+          description: '2031030213014',
         },
       },
       {
         id: 'a11',
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
-          describe: '2031030213014',
+          description: '2031030213014',
         },
       },
     ],

src/FlowView/provider/FlowViewProvider.tsx

@@ -1,4 +1,4 @@
-import { FlowViewEdge, FlowViewNode, MiniMapPosition, NodeTypeDataMap } from '@/constants';
+import { FlowViewEdge, FlowViewNode, MiniMapPosition } from '@/constants';
 import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { Edge, Node, ReactFlowProvider, useReactFlow } from 'reactflow';
 import { LayoutOptions, NodeMapping, SelectType } from '../constants';
@@ -35,7 +35,7 @@ const ProviderInner: FC<{ children: ReactNode }> = ({ children }) => {
 
   const flowDataAdapter = useCallback(
     (
-      initNodes: FlowViewNode<keyof NodeTypeDataMap>[],
+      initNodes: FlowViewNode[],
       initEdges: FlowViewEdge[],
       zoom: number,
       autoLayout: boolean,