EdgeProps

カスタムエッジを実装する場合、いくつかの基本機能を有効にするコンポーネントでラップされます。カスタムエッジコンポーネントは、以下のプロパティを受け取ります。

export type EdgeProps<EdgeType extends Edge = Edge> = {
  id: string;
  animated: boolean;
  data: EdgeType['data'];
  style: React.CSSProperties;
  selected: boolean;
  source: string;
  target: string;
  sourceHandleId?: string | null;
  targetHandleId?: string | null;
  interactionWidth: number;
  sourceX: number;
  sourceY: number;
  targetX: number;
  targetY: number;
  sourcePosition: Position;
  targetPosition: Position;
  label?: string | React.ReactNode;
  labelStyle?: React.CSSProperties;
  labelShowBg?: boolean;
  labelBgStyle?: CSSProperties;
  labelBgPadding?: [number, number];
  labelBgBorderRadius?: number;
  markerStart?: string;
  markerEnd?: string;
  pathOptions?: any;
};

フィールド

名前	型
#`id`	`文字列`
#`アニメーション？`	`真偽値`
#`データ`	`T`
#`スタイル`	`React.CSSProperties`
#`選択済み`	`真偽値`
#`ソース`	`文字列`
#`ターゲット`	`文字列`
#`sourceHandleId？`	`文字列 \| null`
#`targetHandleId？`	`文字列 \| null`
#`interactionWidth`	`数値`
#`sourceX`	`数値`
#`sourceY`	`数値`
#`targetX`	`数値`
#`targetY`	`数値`
#`sourcePosition`	`Position`
#`targetPosition`	`Position`
#`label？`	`文字列 \| React.ReactNode`
#`labelStyle？`	`React.CSSProperties`
#`labelShowBg？`	`真偽値`
#`labelBgStyle？`	`React.CSSProperties`
#`labelBgPadding？`	`[数値, 数値]`
#`labelBgBorderRadius?`	`数値`
#`markerStart?`	`文字列`
#`markerEnd?`	`文字列`
#`pathOptions?`	`any`

タイプ getTransformForBounds()