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
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 });