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

feat(edges): add interactionWidth option #1580 #1114

Browse Source
This commit is contained in:
moklick
2022-09-07 17:43:36 +02:00
parent 7a96817114
commit 51e957e5db
10 changed files with 62 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/nextjs/pages/EdgeRouting/index.tsx
+5 -3
View File
@@ -81,9 +81,10 @@ const edges: Edge[] = [
markerEnd: {
type: MarkerType.ArrowClosed,
},
options: {
pathOptions: {
offset: 30,
},
interactionWidth: 0,
},
{
id: 'e3-4',
@@ -93,9 +94,10 @@ const edges: Edge[] = [
markerEnd: {
type: MarkerType.ArrowClosed,
},
options: {
pathOptions: {
borderRadius: 2,
},
interactionWidth: 0,
},
{
@@ -121,7 +123,7 @@ const edges: Edge[] = [
const defaultEdgeOptions = {
style: {
strokeWidth: 2,
strokeWidth: 1,
},
};
packages/core/src/components/Edges/BaseEdge.tsx
+14 -14
View File
@@ -14,20 +14,8 @@ const BaseEdge = ({
style,
markerEnd,
markerStart,
interactionWidth = 15,
}: BaseEdgeProps) => {
const text = label ? (
<EdgeText
x={centerX}
y={centerY}
label={label}
labelStyle={labelStyle}
labelShowBg={labelShowBg}
labelBgStyle={labelBgStyle}
labelBgPadding={labelBgPadding}
labelBgBorderRadius={labelBgBorderRadius}
/>
) : null;
return (
<>
<path
@@ -38,7 +26,19 @@ const BaseEdge = ({
markerEnd={markerEnd}
markerStart={markerStart}
/>
{text}
{interactionWidth && <path d={path} fill="none" strokeWidth={interactionWidth} />}
{label ? (
<EdgeText
x={centerX}
y={centerY}
label={label}
labelStyle={labelStyle}
labelShowBg={labelShowBg}
labelBgStyle={labelBgStyle}
labelBgPadding={labelBgPadding}
labelBgBorderRadius={labelBgBorderRadius}
/>
) : null}
</>
);
};
packages/core/src/components/Edges/BezierEdge.tsx
+4 -2
View File
@@ -143,7 +143,8 @@ const BezierEdge = memo(
style,
markerEnd,
markerStart,
options,
pathOptions,
interactionWidth,
}: BezierEdgeProps) => {
const params = {
sourceX,
@@ -152,7 +153,7 @@ const BezierEdge = memo(
targetX,
targetY,
targetPosition,
curvature: options?.curvature,
curvature: pathOptions?.curvature,
};
const path = getBezierPath(params);
const [centerX, centerY] = getBezierCenter(params);
@@ -171,6 +172,7 @@ const BezierEdge = memo(
style={style}
markerEnd={markerEnd}
markerStart={markerStart}
interactionWidth={interactionWidth}
/>
);
}
packages/core/src/components/Edges/SimpleBezierEdge.tsx
+2
View File
@@ -117,6 +117,7 @@ const SimpleBezierEdge = memo(
style,
markerEnd,
markerStart,
interactionWidth,
}: EdgeProps) => {
const params = {
sourceX,
@@ -143,6 +144,7 @@ const SimpleBezierEdge = memo(
style={style}
markerEnd={markerEnd}
markerStart={markerStart}
interactionWidth={interactionWidth}
/>
);
}
packages/core/src/components/Edges/SmoothStepEdge.tsx
+5 -3
View File
@@ -202,7 +202,8 @@ const SmoothStepEdge = memo(
targetPosition = Position.Top,
markerEnd,
markerStart,
options,
pathOptions,
interactionWidth,
}: SmoothStepEdgeProps) => {
const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
@@ -213,8 +214,8 @@ const SmoothStepEdge = memo(
targetX,
targetY,
targetPosition,
borderRadius: options?.borderRadius,
offset: options?.offset,
borderRadius: pathOptions?.borderRadius,
offset: pathOptions?.offset,
});
return (
@@ -231,6 +232,7 @@ const SmoothStepEdge = memo(
style={style}
markerEnd={markerEnd}
markerStart={markerStart}
interactionWidth={interactionWidth}
/>
);
}
packages/core/src/components/Edges/StepEdge.tsx
+8 -3
View File
@@ -1,9 +1,14 @@
import { memo } from 'react';
import { memo, useMemo } from 'react';
import { EdgeSmoothStepProps } from '../../types';
import { SmoothStepEdgeProps } from '../../types';
import SmoothStepEdge from './SmoothStepEdge';
const StepEdge = memo((props: EdgeSmoothStepProps) => <SmoothStepEdge {...props} borderRadius={0} />);
const StepEdge = memo((props: SmoothStepEdgeProps) => (
<SmoothStepEdge
{...props}
pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
/>
));
StepEdge.displayName = 'StepEdge';
packages/core/src/components/Edges/StraightEdge.tsx
+3 -2
View File
@@ -18,17 +18,17 @@ const StraightEdge = memo(
style,
markerEnd,
markerStart,
interactionWidth,
}: EdgeProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
const path = `M ${sourceX},${sourceY}L ${targetX},${targetY}`;
return (
<BaseEdge
path={path}
path={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
centerX={centerX}
centerY={centerY}
label={label}
@@ -40,6 +40,7 @@ const StraightEdge = memo(
style={style}
markerEnd={markerEnd}
markerStart={markerStart}
interactionWidth={interactionWidth}
/>
);
}
packages/core/src/components/Edges/wrapEdge.tsx
+4 -2
View File
@@ -52,7 +52,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
rfId,
ariaLabel,
disableKeyboardA11y,
options,
pathOptions,
interactionWidth,
}: WrapEdgeProps): JSX.Element | null => {
const edgeRef = useRef<SVGGElement>(null);
const [updateHover, setUpdateHover] = useState<boolean>(false);
@@ -190,7 +191,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
targetHandleId={targetHandleId}
markerStart={markerStartUrl}
markerEnd={markerEndUrl}
options={options}
pathOptions={pathOptions}
interactionWidth={interactionWidth}
/>
)}
packages/core/src/container/EdgeRenderer/index.tsx
+2 -1
View File
@@ -182,7 +182,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
rfId={props.rfId}
ariaLabel={edge.ariaLabel}
disableKeyboardA11y={props.disableKeyboardA11y}
options={'options' in edge ? edge.options : undefined}
pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
interactionWidth={edge.interactionWidth}
/>
);
})}
packages/core/src/types/edges.ts
+15 -31
View File
@@ -32,25 +32,26 @@ type DefaultEdge<T = any> = {
markerEnd?: EdgeMarkerType;
zIndex?: number;
ariaLabel?: string;
interactionWidth?: number;
};
export type SmoothStepEdgeOptions = {
export type SmoothStepPathOptions = {
offset?: number;
borderRadius?: number;
};
type SmoothStepEdgeType<T> = DefaultEdge<T> & {
type: 'smoothstep';
options?: SmoothStepEdgeOptions;
pathOptions?: SmoothStepPathOptions;
};
export type BezierEdgeOptions = {
export type BezierPathOptions = {
curvature?: number;
};
type BezierEdgeType<T> = DefaultEdge<T> & {
type: 'default';
options?: BezierEdgeOptions;
pathOptions?: BezierPathOptions;
};
export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
@@ -61,7 +62,7 @@ export type DefaultEdgeOptions = Omit<
>;
// props that get passed to a custom edge
export interface EdgeProps<T = any> {
export type EdgeProps<T = any> = {
id: string;
source: string;
target: string;
@@ -85,8 +86,9 @@ export interface EdgeProps<T = any> {
targetHandleId?: string | null;
markerStart?: string;
markerEnd?: string;
options?: BezierEdgeOptions | SmoothStepEdgeOptions;
}
pathOptions?: BezierPathOptions | SmoothStepPathOptions;
interactionWidth?: number;
};
export type BaseEdgeProps = Pick<
EdgeProps,
@@ -99,6 +101,7 @@ export type BaseEdgeProps = Pick<
| 'style'
| 'markerStart'
| 'markerEnd'
| 'interactionWidth'
> & {
centerX: number;
centerY: number;
@@ -107,24 +110,9 @@ export type BaseEdgeProps = Pick<
export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void;
export interface WrapEdgeProps<T = any> {
id: string;
className?: string;
type: string;
data?: T;
export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
onClick?: EdgeMouseHandler;
onEdgeDoubleClick?: EdgeMouseHandler;
selected: boolean;
animated?: boolean;
label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
style?: CSSProperties;
source: string;
target: string;
sourceHandleId?: string | null;
targetHandleId?: string | null;
sourceX: number;
@@ -134,7 +122,6 @@ export interface WrapEdgeProps<T = any> {
sourcePosition: Position;
targetPosition: Position;
elementsSelectable?: boolean;
hidden?: boolean;
onEdgeUpdate?: OnEdgeUpdateFunc;
onContextMenu?: EdgeMouseHandler;
onMouseEnter?: EdgeMouseHandler;
@@ -143,20 +130,17 @@ export interface WrapEdgeProps<T = any> {
edgeUpdaterRadius?: number;
onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
rfId?: string;
ariaLabel?: string | null;
disableKeyboardA11y: boolean;
options?: SmoothStepEdgeOptions | BezierEdgeOptions;
}
pathOptions?: BezierPathOptions | SmoothStepPathOptions;
};
export interface SmoothStepEdgeProps<T = any> extends EdgeProps<T> {
options?: SmoothStepEdgeOptions;
pathOptions?: SmoothStepPathOptions;
}
export interface BezierEdgeProps<T = any> extends EdgeProps<T> {
options?: BezierEdgeOptions;
pathOptions?: BezierPathOptions;
}
export interface EdgeTextProps extends HTMLAttributes<SVGElement> {
x: number;