Skip to content

Commit

Permalink
🐛 fix: Some minor features optimization (#82) (#83)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
ModestFun authored Jan 16, 2024
1 parent a49ff91 commit 26563c6
Show file tree
Hide file tree
Showing 13 changed files with 77 additions and 52 deletions.
7 changes: 3 additions & 4 deletions docs/caseShow/demos/pipelineDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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();

Expand Down
28 changes: 14 additions & 14 deletions src/BasicGroupNode/demos/data.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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',
},
},
Expand All @@ -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',
},
},
Expand All @@ -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',
},
},
],
Expand All @@ -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',
},
},
Expand All @@ -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',
},
},
Expand All @@ -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',
},
},
],
Expand Down
2 changes: 1 addition & 1 deletion src/BasicGroupNode/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
23 changes: 18 additions & 5 deletions src/FlowEditor/container/FlowEditor.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -134,6 +147,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
onElementSelectChange,
// onEdgesChange,
dispatchNodes,
deselectElement,
] = useStore((s) => [
// s.onNodesChange,
s.updateEdgesOnConnection,
Expand All @@ -142,6 +156,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
s.onElementSelectChange,
// s.onEdgesChange,
s.dispatchNodes,
s.deselectElement,
]);

const instance = useReactFlow();
Expand All @@ -154,8 +169,6 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
onChange: onViewPortChange ? debounce(onViewPortChange, 300) : undefined,
});

const nodesInitialized = useNodesInitialized();

useEffect(() => {
// 先把画布的 viewport 设置好
if (!defaultViewport) {
Expand All @@ -166,7 +179,6 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(

// 然后设定初始化节点的相关状态
if (nodesInitialized) {
setFlowInit(true);
onNodesInit?.(editor);
}
}, [nodesInitialized]);
Expand All @@ -190,6 +202,7 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
break;

case 'remove':
deselectElement(c.id);
dispatchNodes({ type: 'deleteNode', id: c.id });
break;
case 'select':
Expand Down
3 changes: 2 additions & 1 deletion src/FlowEditor/hooks/useFlowEditor.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -10,6 +10,7 @@ export interface FlowEditorInstance extends PublicStoreAction {
getFlattenEdges: () => FlattenEdges;
getSelectedKeys: () => string[];
reactflow?: ReactFlowInstance;
screenToFlowPosition: (position: XYPosition) => XYPosition;
}

export const useFlowEditor = (): FlowEditorInstance => {
Expand Down
9 changes: 9 additions & 0 deletions src/FlowEditor/store/slices/edgesSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 });
}
});
Expand All @@ -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(
{
Expand Down
5 changes: 3 additions & 2 deletions src/FlowEditor/store/slices/generalActionSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
Expand Down
18 changes: 13 additions & 5 deletions src/FlowEditor/store/slices/nodesSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 });
});
},
});
16 changes: 8 additions & 8 deletions src/FlowView/demos/data.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down Expand Up @@ -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',
},
},
Expand All @@ -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',
},
},
Expand All @@ -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',
},
},
],
Expand Down
4 changes: 2 additions & 2 deletions src/FlowView/provider/FlowViewProvider.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 26563c6

Please sign in to comment.