Rotatable Node

This example shows how to implement a custom node that can be rotated using CSS transforms. Dragging the small handle above the node updates its rotation and calls updateNodeInternals so the edges keep following the handles.


import type { Edge, Node } from '@xyflow/vue';
import { Position } from '@xyflow/vue';
 
export type RotatableNodeData = { label: string };
export type RotatableNode = Node<RotatableNodeData, 'rotatableNode'>;
 
export const initialNodes: RotatableNode[] = [
  {
    id: '1',
    type: 'rotatableNode',
    position: { x: 0, y: 0 },
    data: { label: 'Rotate Me!' },
    targetPosition: Position.Left,
    sourcePosition: Position.Right,
  },
  {
    id: '2',
    type: 'rotatableNode',
    position: { x: 300, y: 0 },
    data: { label: 'Rotate Me!' },
    targetPosition: Position.Left,
    sourcePosition: Position.Right,
  },
];
 
export const initialEdges: Edge[] = [
  { id: '1->2', source: '1', target: '2', type: 'smoothstep' },
];