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

Revert back to passing props manually

Browse Source
This commit is contained in:
peterkogo
2024-12-04 11:12:49 +01:00
parent 8b8ef2bffa
commit 3526963f0b
6 changed files with 127 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/components/Edges/BaseEdge.tsx
+1 -18
View File
@@ -21,27 +21,10 @@ export function BaseEdge({
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
{...restProps}
{...props}
id={id}
d={path}
fill="none"
packages/react/src/components/Edges/BezierEdge.tsx
+28 -2
View File
@@ -15,8 +15,17 @@ function createBezierEdge(params: { isInternal: boolean }) {
targetY,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
pathOptions,
...props
interactionWidth,
}: BezierEdgeProps) => {
const [path, labelX, labelY] = getBezierPath({
sourceX,
@@ -30,7 +39,24 @@ function createBezierEdge(params: { isInternal: boolean }) {
const _id = params.isInternal ? undefined : id;
return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
return (
<BaseEdge
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}
/>
);
}
);
}
packages/react/src/components/Edges/SimpleBezierEdge.tsx
+28 -2
View File
@@ -82,7 +82,16 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
targetY,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
...props
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
interactionWidth,
}: SimpleBezierEdgeProps) => {
const [path, labelX, labelY] = getSimpleBezierPath({
sourceX,
@@ -95,7 +104,24 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) {
const _id = params.isInternal ? undefined : id;
return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
return (
<BaseEdge
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}
/>
);
}
);
}
packages/react/src/components/Edges/SmoothStepEdge.tsx
+28 -2
View File
@@ -13,10 +13,19 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
sourceY,
targetX,
targetY,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
markerEnd,
markerStart,
pathOptions,
...props
interactionWidth,
}: SmoothStepEdgeProps) => {
const [path, labelX, labelY] = getSmoothStepPath({
sourceX,
@@ -31,7 +40,24 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
const _id = params.isInternal ? undefined : id;
return <BaseEdge {...props} id={_id} path={path} labelX={labelX} labelY={labelY} />;
return (
<BaseEdge
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}
/>
);
}
);
}
packages/react/src/components/Edges/StraightEdge.tsx
+40 -5
View File
@@ -6,13 +6,48 @@ import type { StraightEdgeProps } from '../../types';
function createStraightEdge(params: { isInternal: boolean }) {
// eslint-disable-next-line react/display-name
return memo(({ id, sourceX, sourceY, targetX, targetY, ...props }: StraightEdgeProps) => {
const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
return memo(
({
id,
sourceX,
sourceY,
targetX,
targetY,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
style,
markerEnd,
markerStart,
interactionWidth,
}: 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} />;
});
return (
<BaseEdge
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}
/>
);
}
);
}
const StraightEdge = createStraightEdge({ isInternal: false });
packages/react/src/types/edges.ts
+2 -5
View File
@@ -125,13 +125,11 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
interactionWidth?: number;
};
type BasePathAttributes = Omit<SVGAttributes<SVGPathElement>, 'd'>;
/**
* BaseEdge component props
* @public
*/
export type BaseEdgeProps = BasePathAttributes &
export type BaseEdgeProps = Omit<SVGAttributes<SVGPathElement>, 'd'> &
EdgeLabelOptions & {
/** Additional padding where interacting with an edge is still possible */
interactionWidth?: number;
@@ -155,8 +153,7 @@ export type BaseEdgeProps = BasePathAttributes &
* Helper type for edge components that get exported by the library
* @public
*/
export type EdgeComponentProps = BasePathAttributes &
EdgePosition &
export type EdgeComponentProps = EdgePosition &
EdgeLabelOptions & {
id?: EdgeProps['id'];
markerStart?: EdgeProps['markerStart'];