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

simplified prop drilling & improved changeset

Browse Source
This commit is contained in:
peterkogo
2024-12-02 13:37:17 +01:00
parent 106c2cf8e5
commit ca66999634
7 changed files with 53 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/selfish-tables-tie.md
+1 -1
View File
@@ -2,4 +2,4 @@
'@xyflow/react': minor
---
Support all `path` element attributes in React edge components.
Support passing `path` element attributes to BaseEdge component.
packages/react/src/components/Edges/BaseEdge.tsx
+19 -4
View File
@@ -2,7 +2,7 @@ import { isNumeric } from '@xyflow/system';
import cc from 'classcat';
import { EdgeText } from './EdgeText';
import type { BaseEdgeProps } from '../../types';
import type { BaseEdgeProps, EdgeComponentWithPathOptions, EdgeProps } from '../../types';
export function BaseEdge({
id,
@@ -15,19 +15,34 @@ export function BaseEdge({
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
className,
interactionWidth = 20,
...props
}: BaseEdgeProps) {
// We are not allowed to pass these props to the path element otherwise we get a bunch of warnings
const {
animated,
selectable,
deletable,
data,
selected,
source,
target,
targetHandleId,
sourceHandleId,
targetPosition,
sourcePosition,
pathOptions,
...restProps
} = props as EdgeComponentWithPathOptions<any> & EdgeProps;
return (
<>
<path
{...props}
{...restProps}
id={id}
style={style}
d={path}
fill="none"
className={cc(['react-flow__edge-path', className])}
packages/react/src/components/Edges/BezierEdge.tsx
+1 -29
View File
@@ -15,17 +15,7 @@ function createBezierEdge(params: { isInternal: boolean }) {
targetY,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
pathOptions,
interactionWidth,
...props
}: BezierEdgeProps) => {
const [path, labelX, labelY] = getBezierPath({
@@ -40,25 +30,7 @@ function createBezierEdge(params: { isInternal: boolean }) {
const _id = params.isInternal ? undefined : id;
return (
<BaseEdge
{...props}
id={_id}
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}
/>
);
return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
}
);
}
packages/react/src/components/Edges/SimpleBezierEdge.tsx
+1 -29
View File
@@ -82,16 +82,6 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
targetY,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
interactionWidth,
...props
}: SimpleBezierEdgeProps) => {
const [path, labelX, labelY] = getSimpleBezierPath({
@@ -105,25 +95,7 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
const _id = params.isInternal ? undefined : id;
return (
<BaseEdge
{...props}
id={_id}
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}
/>
);
return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
}
);
}
packages/react/src/components/Edges/SmoothStepEdge.tsx
+1 -29
View File
@@ -13,19 +13,9 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
sourceY,
targetX,
targetY,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
markerEnd,
markerStart,
pathOptions,
interactionWidth,
...props
}: SmoothStepEdgeProps) => {
const [path, labelX, labelY] = getSmoothStepPath({
@@ -41,25 +31,7 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
const _id = params.isInternal ? undefined : id;
return (
<BaseEdge
{...props}
id={_id}
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}
/>
);
return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
}
);
}
packages/react/src/components/Edges/StraightEdge.tsx
+5 -43
View File
@@ -6,51 +6,13 @@ import type { StraightEdgeProps } from '../../types';
function createStraightEdge(params: { isInternal: boolean }) {
// eslint-disable-next-line react/display-name
return memo(
({
id,
sourceX,
sourceY,
targetX,
targetY,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
interactionWidth,
...props
}: StraightEdgeProps) => {
const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
return memo(({ id, sourceX, sourceY, targetX, targetY, ...props }: StraightEdgeProps) => {
const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
const _id = params.isInternal ? undefined : id;
const _id = params.isInternal ? undefined : id;
return (
<BaseEdge
{...props}
id={_id}
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}
{...props}
/>
);
}
);
return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
});
}
const StraightEdge = createStraightEdge({ isInternal: false });
packages/react/src/types/edges.ts
+25 -23
View File
@@ -14,7 +14,6 @@ import type {
EdgePosition,
StepPathOptions,
OnError,
ConnectionState,
FinalConnectionState,
} from '@xyflow/system';
@@ -92,8 +91,6 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
disableKeyboardA11y?: boolean;
};
type BasePathAttributes = Omit<HTMLAttributes<SVGPathElement>, "d">;
export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
export type EdgeTextProps = HTMLAttributes<SVGElement> &
@@ -121,34 +118,38 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
interactionWidth?: number;
};
type BasePathAttributes = Omit<HTMLAttributes<SVGPathElement>, 'd'>;
/**
* BaseEdge component props
* @public
*/
export type BaseEdgeProps = BasePathAttributes & EdgeLabelOptions & {
/** Additional padding where interacting with an edge is still possible */
interactionWidth?: number;
/** The x position of edge label */
labelX?: number;
/** The y position of edge label */
labelY?: number;
/** Marker at start of edge
* @example 'url(#arrow)'
*/
markerStart?: string;
/** Marker at end of edge
* @example 'url(#arrow)'
*/
markerEnd?: string;
/** SVG path of the edge */
path: string;
};
export type BaseEdgeProps = BasePathAttributes &
EdgeLabelOptions & {
/** Additional padding where interacting with an edge is still possible */
interactionWidth?: number;
/** The x position of edge label */
labelX?: number;
/** The y position of edge label */
labelY?: number;
/** Marker at start of edge
* @example 'url(#arrow)'
*/
markerStart?: string;
/** Marker at end of edge
* @example 'url(#arrow)'
*/
markerEnd?: string;
/** SVG path of the edge */
path: string;
};
/**
* Helper type for edge components that get exported by the library
* @public
*/
export type EdgeComponentProps = BasePathAttributes & EdgePosition &
export type EdgeComponentProps = BasePathAttributes &
EdgePosition &
EdgeLabelOptions & {
id?: EdgeProps['id'];
markerStart?: EdgeProps['markerStart'];
@@ -185,7 +186,8 @@ export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
* StraightEdge component props
* @public
*/
export type StraightEdgeProps = HTMLAttributes<SVGPathElement> & Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
export type StraightEdgeProps = HTMLAttributes<SVGPathElement> &
Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
/**
* SimpleBezier component props