How Can I make custom edge like default step type?

[Distrect]

I have very simple Custom Edge.

`import { BaseEdge, BezierEdge, getBezierPath } from "reactflow";

function CustomEdge(props) {
const [edgePath, labelX, labelY] = getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
});

return (
// <BezierEdge className="react-flow__edge-step" {...props} />

);
}

export default CustomEdge;
`

I want this Custom Edge be like step edge type. I can use type:step when connecting edge but i am trying to do here. Is that possible? Thank you for your answers

[bcakmakoglu]

React Flow provides a utility called getSmoothStepPath, just like getBezierPath, that you can use.

import React from 'react';
import { BaseEdge, EdgeProps, getSmoothStepPath } from 'reactflow';

export default function CustomEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  markerEnd,
}: EdgeProps) {
  const [edgePath, labelX, labelY] = getSmoothStepPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  });

  return <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
}

[bcakmakoglu]

To get sharp instead of rounded corners for your smooth step edge (i.e. a step edge) just pass borderRadius: 0 to getSmoothStepPath

  const [edgePath, labelX, labelY] = getSmoothStepPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
	borderRadius: 0,
  });

[Distrect]

Thank you very much sir. (Teşekkürler Kral)

[escape-key-onkeyboard]

How can I make it into first one


tines.com