Props Reference
Basic Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique identifier for the element. Required when connectable is true. |
className | string | - | Additional CSS classes. |
style | CSSProperties | - | Inline styles for dimensions (width, height, minWidth, etc.) and appearance. |
selected | boolean | false | Whether the element is selected. |
disabled | boolean | false | Whether the element is disabled. |
draggable | boolean | true | Whether the element can be dragged. |
Position Props
| Prop | Type | Default | Description |
|---|---|---|---|
top | number | 0 | Top position of the element. |
left | number | 0 | Left position of the element. |
Feature Props
| Prop | Type | Default | Description |
|---|---|---|---|
rotatable | boolean | false | Whether the element can be rotated. |
rotation | number | 0 | Initial rotation angle in degrees. |
scalable | boolean | false | Whether the element can be scaled. |
resizable | boolean | false | Whether the element can be resized. |
connectable | boolean | false | Whether the element can be connected to other elements. |
showGuides | boolean | false | Whether to show alignment guides while dragging. |
snapToElements | boolean | false | Whether to snap to other elements while dragging. |
snapThreshold | number | 5 | Distance threshold for snapping in pixels. |
Constraint Props
| Prop | Type | Default | Description |
|---|---|---|---|
limit | {
minX?: number,
maxX?: number,
minY?: number,
maxY?: number
} | - | Movement boundaries for the element. |
minScale | number | 0.5 | Minimum scale factor. |
maxScale | number | 2 | Maximum scale factor. |
Event Props
| Prop | Type | Description |
|---|---|---|
onBlur | () => void | Called when the element loses focus. |
onClick | () => void | Called when the element is clicked. |
onDragStart | () => void | Called when dragging starts. |
onDrag | (position:{ x: number, y: number }) => void | Called while dragging with current position. |
onDragEnd | (position:{ x: number, y: number }) => void | Called when dragging ends with final position. |
onRotate | (rotation: number) => void | Called when rotation changes with current angle. |
onScale | (scale: number) => void | Called when scale changes with current scale factor. |
onResize | (size:{ width: number, height: number }) => void | Called when size changes with new dimensions. |
onConnect | (connection: Connection) => void | Called when a connection is established. |