<NodeResizer />

<NodeResizer /> コンポーネントは、ノードにサイズ変更機能を追加するために使用できます。すべての向きにサイズ変更するためのドラッグ可能なコントロールをノードの周囲にレンダリングします。

import { memo } from 'react';
import { Handle, Position, NodeResizer } from '@xyflow/react';
 
const ResizableNode = ({ data }) => {
  return (
    <>
      <NodeResizer minWidth={100} minHeight={30} />
      <Handle type="target" position={Position.Left} />
      <div style={{ padding: 10 }}>{data.label}</div>
      <Handle type="source" position={Position.Right} />
    </>
  );
};
 
export default memo(ResizableNode);

プロパティ

TypeScript ユーザーの場合、<NodeResizer /> コンポーネントのプロパティ型は NodeResizerProps としてエクスポートされます。

名前	型
#`nodeId?`	`文字列`
#`color?`	`文字列`
#`handleClassName?`	`文字列`
#`handleStyle?`	`React.CSSProperties`
#`lineClassName?`	`文字列`
#`lineStyle?`	`React.CSSProperties`
#`isVisible?`	`ブール値`
#`minWidth?`	`数値`
#`minHeight?`	`数値`
#`maxWidth?`	`数値`
#`maxHeight?`	`数値`
#`keepAspectRatio?`	`ブール値`
#`shouldResize?`	`(イベント: D3.DragEvent,パラメータ: ResizeParams & { 方向: 数値[]; }) => ブール値`
#`onResizeStart?`	`(イベント: D3.DragEvent,パラメータ: ResizeParams) => void`
#`onResize?`	`(イベント: D3.DragEvent,パラメータ: ResizeParams & { 方向: 数値[]; }) => void`
#`onResizeEnd?`	`(イベント: D3.DragEvent,パラメータ: ResizeParams) => void`

例

例ページで、その方法を確認できます。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

読み取り専用

カスタムサイズ変更コントロール

カスタムサイズ変更コントロールを作成するには、NodeResizeControl コンポーネントを使用し、カスタマイズできます。

備考

独自のノードを実装する方法については、NodeProps タイプのドキュメントまたはカスタムノードに関するガイドを参照してください。

コンポーネントタイプ