参考组件
<NodeResizer />

<NodeResizer />

GitHub 上的源代码

可以使用 <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?
字符串
#color?
字符串
#handleClass?
字符串
#handleStyle?
字符串
#lineClass?
字符串
#lineStyle?
字符串
#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

示例

前往 示例页面 了解如何实现。

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

<h1>Hello {data}</h1>

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

自定义调整大小控件

要构建自定义调整大小控件，可以使用 NodeResizeControl 组件并对其进行自定义。

备注

组件类型