drawEdge

Function that converts a point sequence into an SVG path d attribute string.

Type	SVGDrawFunction
Default	svgDrawSmoothLinePath (bezier preset)

Built-in functions

Export	Used by
svgDrawSmoothLinePath	SmartBezierEdge
svgDrawStraightLinePath	SmartStraightEdge, SmartStepEdge
svgDrawSmoothStepLinePath({ borderRadius })	SmartSmoothStepEdge (factory)
svgDrawSimpleBezierLinePath	SmartSimpleBezierEdge

import {
  createSmartEdge,
  svgDrawSmoothStepLinePath,
} from "@tisoap/react-flow-smart-edge";

const edgeTypes = {
  smartSmoothStep: createSmartEdge("smoothstep", {
    drawEdge: svgDrawSmoothStepLinePath({ borderRadius: 12 }),
  }),
};

Signature

type SVGDrawFunction = (
  source: XYPosition,
  target: XYPosition,
  path: number[][],
) => string;

For simple-bezier drawing, use the separate SVGSimpleBezierDrawFunction type (requires handle position on endpoints). Pass either type to getSmartEdge / createSmartEdge via DrawEdgeFunction.

See drawSvgPath.ts source for implementation examples.