alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(react) added internal edge components, to make id, source, handle optional on exported edges

Browse Source
This commit is contained in:
Peter
2023-11-28 14:30:26 +01:00
parent 43c78d6c11
commit 2e15fd72ee
13 changed files with 331 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/react/src/components/Edges/BezierEdge.tsx
View File

@@ -1,11 +1,12 @@
import { memo } from 'react';
import { Position, getBezierPath } from '@xyflow/system';
import { type Optional, Position, getBezierPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { BezierEdgeProps } from '../../types';
const BezierEdge = memo(
({
id,
sourceX,
sourceY,
targetX,
@@ -23,7 +24,7 @@ const BezierEdge = memo(
markerStart,
pathOptions,
interactionWidth,
}: BezierEdgeProps) => {
}: Optional<BezierEdgeProps, 'id' | 'source' | 'target'>) => {
const [path, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
@@ -36,6 +37,7 @@ const BezierEdge = memo(
return (
<BaseEdge
id={id}
path={path}
labelX={labelX}
labelY={labelY}

59
packages/react/src/components/Edges/BezierEdgeInternal.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { memo } from 'react';
import { Position, getBezierPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { BezierEdgeProps } from '../../types';
const BezierEdge = memo(
({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
pathOptions,
interactionWidth,
}: BezierEdgeProps) => {
const [path, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
curvature: pathOptions?.curvature,
});
return (
<BaseEdge
path={path}
labelX={labelX}
labelY={labelY}
label={label}
labelStyle={labelStyle}
labelShowBg={labelShowBg}
labelBgStyle={labelBgStyle}
labelBgPadding={labelBgPadding}
labelBgBorderRadius={labelBgBorderRadius}
style={style}
markerEnd={markerEnd}
markerStart={markerStart}
interactionWidth={interactionWidth}
/>
);
}
);
BezierEdge.displayName = 'BezierEdge';
export default BezierEdge;

6
packages/react/src/components/Edges/SimpleBezierEdge.tsx
View File

@@ -1,5 +1,5 @@
import { memo } from 'react';
import { Position, getBezierEdgeCenter } from '@xyflow/system';
import { type Optional, Position, getBezierEdgeCenter } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { EdgeProps } from '../../types';
@@ -73,6 +73,7 @@ export function getSimpleBezierPath({
const SimpleBezierEdge = memo(
({
id,
sourceX,
sourceY,
targetX,
@@ -89,7 +90,7 @@ const SimpleBezierEdge = memo(
markerEnd,
markerStart,
interactionWidth,
}: EdgeProps) => {
}: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
const [path, labelX, labelY] = getSimpleBezierPath({
sourceX,
sourceY,
@@ -101,6 +102,7 @@ const SimpleBezierEdge = memo(
return (
<BaseEdge
id={id}
path={path}
labelX={labelX}
labelY={labelY}

124
packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx Normal file
View File

@@ -0,0 +1,124 @@
import { memo } from 'react';
import { Position, getBezierEdgeCenter } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { EdgeProps } from '../../types';
export interface GetSimpleBezierPathParams {
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
}
interface GetControlParams {
pos: Position;
x1: number;
y1: number;
x2: number;
y2: number;
}
function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
if (pos === Position.Left || pos === Position.Right) {
return [0.5 * (x1 + x2), y1];
}
return [x1, 0.5 * (y1 + y2)];
}
export function getSimpleBezierPath({
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
const [sourceControlX, sourceControlY] = getControl({
pos: sourcePosition,
x1: sourceX,
y1: sourceY,
x2: targetX,
y2: targetY,
});
const [targetControlX, targetControlY] = getControl({
pos: targetPosition,
x1: targetX,
y1: targetY,
x2: sourceX,
y2: sourceY,
});
const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
sourceX,
sourceY,
targetX,
targetY,
sourceControlX,
sourceControlY,
targetControlX,
targetControlY,
});
return [
`M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
labelX,
labelY,
offsetX,
offsetY,
];
}
const SimpleBezierEdge = memo(
({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
interactionWidth,
}: EdgeProps) => {
const [path, labelX, labelY] = getSimpleBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
return (
<BaseEdge
path={path}
labelX={labelX}
labelY={labelY}
label={label}
labelStyle={labelStyle}
labelShowBg={labelShowBg}
labelBgStyle={labelBgStyle}
labelBgPadding={labelBgPadding}
labelBgBorderRadius={labelBgBorderRadius}
style={style}
markerEnd={markerEnd}
markerStart={markerStart}
interactionWidth={interactionWidth}
/>
);
}
);
SimpleBezierEdge.displayName = 'SimpleBezierEdge';
export default SimpleBezierEdge;

6
packages/react/src/components/Edges/SmoothStepEdge.tsx
View File

@@ -1,11 +1,12 @@
import { memo } from 'react';
import { Position, getSmoothStepPath } from '@xyflow/system';
import { type Optional, Position, getSmoothStepPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { SmoothStepEdgeProps } from '../../types';
const SmoothStepEdge = memo(
({
id,
sourceX,
sourceY,
targetX,
@@ -23,7 +24,7 @@ const SmoothStepEdge = memo(
markerStart,
pathOptions,
interactionWidth,
}: SmoothStepEdgeProps) => {
}: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => {
const [path, labelX, labelY] = getSmoothStepPath({
sourceX,
sourceY,
@@ -37,6 +38,7 @@ const SmoothStepEdge = memo(
return (
<BaseEdge
id={id}
path={path}
labelX={labelX}
labelY={labelY}

60
packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { memo } from 'react';
import { Position, getSmoothStepPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { SmoothStepEdgeProps } from '../../types';
const SmoothStepEdge = memo(
({
sourceX,
sourceY,
targetX,
targetY,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
markerEnd,
markerStart,
pathOptions,
interactionWidth,
}: SmoothStepEdgeProps) => {
const [path, labelX, labelY] = getSmoothStepPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
borderRadius: pathOptions?.borderRadius,
offset: pathOptions?.offset,
});
return (
<BaseEdge
path={path}
labelX={labelX}
labelY={labelY}
label={label}
labelStyle={labelStyle}
labelShowBg={labelShowBg}
labelBgStyle={labelBgStyle}
labelBgPadding={labelBgPadding}
labelBgBorderRadius={labelBgBorderRadius}
style={style}
markerEnd={markerEnd}
markerStart={markerStart}
interactionWidth={interactionWidth}
/>
);
}
);
SmoothStepEdge.displayName = 'SmoothStepEdge';
export default SmoothStepEdge;

3
packages/react/src/components/Edges/StepEdge.tsx
View File

@@ -1,9 +1,10 @@
import { memo, useMemo } from 'react';
import { Optional } from '@xyflow/system';
import SmoothStepEdge from './SmoothStepEdge';
import type { SmoothStepEdgeProps } from '../../types';
const StepEdge = memo((props: SmoothStepEdgeProps) => (
const StepEdge = memo((props: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => (
<SmoothStepEdge
{...props}
pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}

15
packages/react/src/components/Edges/StepEdgeInternal.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { memo, useMemo } from 'react';
import SmoothStepEdgeInternal from './SmoothStepEdgeInternal';
import type { SmoothStepEdgeProps } from '../../types';
const StepEdge = memo((props: SmoothStepEdgeProps) => (
<SmoothStepEdgeInternal
{...props}
pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
/>
));
StepEdge.displayName = 'StepEdge';
export default StepEdge;

6
packages/react/src/components/Edges/StraightEdge.tsx
View File

@@ -1,11 +1,12 @@
import { memo } from 'react';
import { getStraightPath } from '@xyflow/system';
import { type Optional, getStraightPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { EdgeProps } from '../../types';
const StraightEdge = memo(
({
id,
sourceX,
sourceY,
targetX,
@@ -20,11 +21,12 @@ const StraightEdge = memo(
markerEnd,
markerStart,
interactionWidth,
}: EdgeProps) => {
}: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
return (
<BaseEdge
id={id}
path={path}
labelX={labelX}
labelY={labelY}

48
packages/react/src/components/Edges/StraightEdgeInternal.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { memo } from 'react';
import { getStraightPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { EdgeProps } from '../../types';
const StraightEdge = memo(
({
sourceX,
sourceY,
targetX,
targetY,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
interactionWidth,
}: EdgeProps) => {
const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
return (
<BaseEdge
path={path}
labelX={labelX}
labelY={labelY}
label={label}
labelStyle={labelStyle}
labelShowBg={labelShowBg}
labelBgStyle={labelBgStyle}
labelBgPadding={labelBgPadding}
labelBgBorderRadius={labelBgBorderRadius}
style={style}
markerEnd={markerEnd}
markerStart={markerStart}
interactionWidth={interactionWidth}
/>
);
}
);
StraightEdge.displayName = 'StraightEdge';
export default StraightEdge;

5
packages/react/src/components/Edges/internal.ts Normal file
View File

@@ -0,0 +1,5 @@
export { default as SimpleBezierEdge } from './SimpleBezierEdgeInternal';
export { default as SmoothStepEdge } from './SmoothStepEdgeInternal';
export { default as StepEdge } from './StepEdgeInternal';
export { default as StraightEdge } from './StraightEdgeInternal';
export { default as BezierEdge } from './BezierEdgeInternal';

2
packages/react/src/container/EdgeRenderer/utils.ts
View File

@@ -1,6 +1,6 @@
import type { ComponentType } from 'react';
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
import wrapEdge from '../../components/Edges/wrapEdge';
import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';

2
packages/react/src/container/ReactFlow/index.tsx
View File

@@ -12,7 +12,7 @@ import {
} from '@xyflow/system';
import Attribution from '../../components/Attribution';
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';