<NodeResizer />

<NodeResizer />コンポーネントは、ノードにサイズ変更機能を追加するために使用できます。ノードの周囲にドラッグ可能なコントロールが表示され、あらゆる方向にサイズ変更できます。

CustomNode.svelte

<script lang="ts">
  import { Handle, Position, NodeResizer } from '@xyflow/svelte';
 
  export let data;
</script>
 
<NodeResizer minWidth={100} minHeight={30} />
<Handle type="target" position={Position.Left} />
<div style={{ padding: 10 }}>{data.label}</div>
<Handle type="source" position={Position.Right} />

プロパティ

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

名前	型
#`nodeId?`	`string`
#`color?`	`string`
#`handleClass?`	`string`
#`handleStyle?`	`string`
#`lineClass?`	`string`
#`lineStyle?`	`string`
#`isVisible?`	`boolean`
#`minWidth?`	`number`
#`minHeight?`	`number`
#`maxWidth?`	`number`
#`maxHeight?`	`number`
#`keepAspectRatio?`	`boolean`
#`shouldResize?`	`(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => boolean`
#`onResizeStart?`	`(event: D3.DragEvent, params: ResizeParams) => void`
#`onResize?`	`(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => void`
#`onResizeEnd?`	`(event: D3.DragEvent, params: ResizeParams) => void`

例

サンプルページで使用方法を確認できます。

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

読み取り専用

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

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

備考

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

コンポーネントタイプ