<NodeResizer />
The <NodeResizer />
component can be used to add a resize functionality to your
nodes. It renders draggable controls around the node to resize in all directions.
CustomNode.svelte
<script lang="ts">
import { Handle, Position, NodeResizer, type NodeProps } from '@xyflow/svelte';
let { data } : NodeProps = $props();
</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} />
Props
The type for props of <NodeResizer />
component is exported as NodeResizerProps
. Additionally, it extends the props of <div />
.
Examples
Head over to the example page to see how this is done.
<script lang="ts">
import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';
import ResizableNode from './ResizableNode.svelte';
import CustomResizerNode from './CustomResizerNode.svelte';
import ResizableNodeSelected from './ResizableNodeSelected.svelte';
import '@xyflow/svelte/dist/style.css';
// const nodeStyle =
// 'background: #fff; border: 1px solid black; border-radius: 15px; font-size: 12px;';
const initialEdges: Edge[] = [];
const initialNodes: Node[] = [
{
id: '1',
type: 'ResizableNode',
data: { label: 'NodeResizer' },
position: { x: 0, y: 50 },
},
{
id: '2',
type: 'ResizableNodeSelected',
data: { label: 'NodeResizer when selected' },
position: { x: -100, y: 150 },
},
{
id: '3',
type: 'CustomResizerNode',
data: { label: 'Custom Resize Icon' },
position: { x: 150, y: 150 },
style: ' height: 100px;',
},
];
let nodes = $state.raw<Node[]>(initialNodes);
let edges = $state.raw<Edge[]>(initialEdges);
const nodeTypes = {
ResizableNode,
CustomResizerNode,
ResizableNodeSelected,
};
</script>
<SvelteFlow bind:nodes {nodeTypes} bind:edges fitView>
<Background />
</SvelteFlow>
Custom Resize Controls
To build custom resize controls, you can use the NodeResizeControl component and customize it.
Notes
- Take a look at the docs for the
NodeProps
type or the guide on custom nodes to see how to implement your own nodes.
Last updated on