This commit is contained in:
Dimitri POSTOLOV
2025-03-24 22:42:21 +01:00
parent 637d7b2ee7
commit d76aefd8b0
+14 -3
View File
@@ -23,7 +23,11 @@ import { EdgeTypes, InternalNode, Node } from '.';
* @inline * @inline
*/ */
export type EdgeLabelOptions = { export type EdgeLabelOptions = {
label?: string | ReactNode; /**
* The label or custom element to render along the edge. This is commonly a text label or some
* custom controls.
*/
label?: ReactNode;
labelStyle?: CSSProperties; labelStyle?: CSSProperties;
labelShowBg?: boolean; labelShowBg?: boolean;
labelBgStyle?: CSSProperties; labelBgStyle?: CSSProperties;
@@ -136,13 +140,20 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Pick<
*/ */
export type BaseEdgeProps = Omit<SVGAttributes<SVGPathElement>, 'd'> & export type BaseEdgeProps = Omit<SVGAttributes<SVGPathElement>, 'd'> &
EdgeLabelOptions & { EdgeLabelOptions & {
/** Additional padding where interacting with an edge is still possible */ /**
* The width of the invisible area around the edge that the user can interact with. This is
* useful for making the edge easier to click or hover over.
*/
interactionWidth?: number; interactionWidth?: number;
/** The x position of edge label */ /** The x position of edge label */
labelX?: number; labelX?: number;
/** The y position of edge label */ /** The y position of edge label */
labelY?: number; labelY?: number;
/** SVG path of the edge */ /**
* The SVG path string that defines the edge. This should look something like
* `'M 0 0 L 100 100'` for a simple line. The utility functions like `getSimpleBezierEdge` can
* be used to generate this string for you.
*/
path: string; path: string;
}; };