From d663a5d0d1f0bdb7d155533d1d39b02554bd1a7f Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Wed, 11 Dec 2024 14:22:29 +0800 Subject: [PATCH] feat: support labelField in FlowDirectionGraph and FlowGraph --- .../flow-direction-graph/options.tsx | 26 +++++++++--- .../components/flow-direction-graph/types.ts | 11 ++++- .../src/components/flow-graph/index.tsx | 4 +- .../src/components/flow-graph/options.tsx | 42 ++++++++++--------- .../graphs/src/components/flow-graph/types.ts | 8 ++++ 5 files changed, 63 insertions(+), 28 deletions(-) diff --git a/packages/graphs/src/components/flow-direction-graph/options.tsx b/packages/graphs/src/components/flow-direction-graph/options.tsx index c55faf472..959f9ae51 100644 --- a/packages/graphs/src/components/flow-direction-graph/options.tsx +++ b/packages/graphs/src/components/flow-direction-graph/options.tsx @@ -1,17 +1,14 @@ import React from 'react'; import { RCNode } from '../../core/base'; +import { formatLabel } from '../../core/utils/label'; import type { GraphOptions } from '../../types'; +import type { FlowDirectionGraphOptions } from './types'; const { TextNode } = RCNode; export const DEFAULT_OPTIONS: GraphOptions = { node: { type: 'react', - style: { - component: (data) => , - size: [100, 40], - ports: [{ placement: 'left' }, { placement: 'right' }], - }, state: { active: { halo: false, @@ -39,3 +36,22 @@ export const DEFAULT_OPTIONS: GraphOptions = { }, transforms: ['translate-react-node-origin'], }; + +export const getFlowDirectionGraphOptions = ({ + labelField, +}: Pick): FlowDirectionGraphOptions => { + const options: FlowDirectionGraphOptions = { + node: { + style: { + component: (data) => { + const label = formatLabel(data, labelField); + return ; + }, + size: [100, 40], + ports: [{ placement: 'left' }, { placement: 'right' }], + }, + }, + }; + + return options; +}; diff --git a/packages/graphs/src/components/flow-direction-graph/types.ts b/packages/graphs/src/components/flow-direction-graph/types.ts index d26ee269d..3dd1e502f 100644 --- a/packages/graphs/src/components/flow-direction-graph/types.ts +++ b/packages/graphs/src/components/flow-direction-graph/types.ts @@ -1,3 +1,12 @@ +import type { NodeData } from '@antv/g6'; import { GraphOptions } from '../../types'; -export interface FlowDirectionGraphOptions extends GraphOptions {} +export interface FlowDirectionGraphOptions extends GraphOptions { + /** + * Selects a field from the data to use as the label for the node. + * If a string is provided, it will select the field as `data[labelField]`. + * If a function is provided, it will call the function with the data and use the returned value. + * @default (data) => data.id + */ + labelField?: string | ((node: NodeData) => string); +} diff --git a/packages/graphs/src/components/flow-graph/index.tsx b/packages/graphs/src/components/flow-graph/index.tsx index 4e508ad70..30f96b9d2 100644 --- a/packages/graphs/src/components/flow-graph/index.tsx +++ b/packages/graphs/src/components/flow-graph/index.tsx @@ -17,8 +17,8 @@ export const FlowGraph: ForwardRefExoticComponent< PropsWithoutRef> & RefAttributes > = forwardRef>(({ children, ...props }, ref) => { const options = useMemo(() => { - const { direction = 'horizontal', ...restProps } = props; - return mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFlowGraphOptions({ direction }), restProps); + const { direction = 'horizontal', labelField, ...restProps } = props; + return mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFlowGraphOptions({ direction, labelField }), restProps); }, [props]); return ( diff --git a/packages/graphs/src/components/flow-graph/options.tsx b/packages/graphs/src/components/flow-graph/options.tsx index 8938ab44b..6ee647221 100644 --- a/packages/graphs/src/components/flow-graph/options.tsx +++ b/packages/graphs/src/components/flow-graph/options.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { RCNode } from '../../core/base'; +import { formatLabel } from '../../core/utils/label'; import type { FlowGraphOptions } from './types'; const { TextNode } = RCNode; @@ -7,11 +8,6 @@ const { TextNode } = RCNode; export const DEFAULT_OPTIONS: FlowGraphOptions = { node: { type: 'react', - style: { - component: (data) => , - size: [100, 40], - ports: [{ placement: 'left' }, { placement: 'right' }], - }, state: { active: { halo: false, @@ -32,28 +28,34 @@ export const DEFAULT_OPTIONS: FlowGraphOptions = { }, layout: { type: 'dagre', - rankdir: 'LR', animation: false, }, transforms: ['translate-react-node-origin'], }; -export const getFlowGraphOptions = ({ direction }: Pick): FlowGraphOptions => { - let options: FlowGraphOptions = {}; - - if (direction === 'vertical') { - options = { - node: { - style: { - ports: [{ placement: 'top' }, { placement: 'bottom' }], +export const getFlowGraphOptions = ({ + direction, + labelField, +}: Pick): FlowGraphOptions => { + const options: FlowGraphOptions = { + node: { + style: { + component: (data) => { + const label = formatLabel(data, labelField); + return ; }, + size: [100, 40], + ports: + direction === 'vertical' + ? [{ placement: 'top' }, { placement: 'bottom' }] + : [{ placement: 'left' }, { placement: 'right' }], }, - layout: { - type: 'dagre', - rankdir: 'TB', - }, - }; - } + }, + layout: { + type: 'dagre', + rankdir: direction === 'vertical' ? 'TB' : 'LR', + }, + }; return options; }; diff --git a/packages/graphs/src/components/flow-graph/types.ts b/packages/graphs/src/components/flow-graph/types.ts index 0d18aad31..48b80a188 100644 --- a/packages/graphs/src/components/flow-graph/types.ts +++ b/packages/graphs/src/components/flow-graph/types.ts @@ -1,3 +1,4 @@ +import type { NodeData } from '@antv/g6'; import type { GraphOptions } from '../../types'; export interface FlowGraphOptions extends GraphOptions { @@ -6,4 +7,11 @@ export interface FlowGraphOptions extends GraphOptions { * @default 'horizontal' */ direction?: 'horizontal' | 'vertical'; + /** + * Selects a field from the data to use as the label for the node. + * If a string is provided, it will select the field as `data[labelField]`. + * If a function is provided, it will call the function with the data and use the returned value. + * @default (data) => data.id + */ + labelField?: string | ((node: NodeData) => string); }