DiagramProps
Represents the props of the KendoReact Diagram component.
Definition
Package:@progress/kendo-react-diagram
Properties
ariaLabel?
string
Sets the aria-label attribute on the outermost wrapper element of the Diagram.
className?
string
Sets additional CSS class names on the outermost wrapper element of the Diagram.
Defines the default configuration options applicable to all connections.
Defines the field mapping configuration for connections data binding.
Maps source object properties to Diagram connection properties.
Only used when connections is an array of custom objects instead of ConnectionOptions.
Defines the connections that render between the shapes in the Diagram.
Accepts either an array of ConnectionOptions or an array of any objects
that will be mapped using the connectionModelFields configuration.
editable?
boolean | DiagramEditable
A set of settings to configure the Diagram behavior when the user attempts to drag, resize, or remove shapes.
Changing the property value dynamically triggers a reinitialization of the Diagram.
true
Defines the layout configuration for arranging shapes and connections in the Diagram.
navigable?
boolean | DiagramNavigationOptions
Enables keyboard navigation in the Diagram.
When set to true, navigate between shapes using arrow keys.
Alternatively, pass a DiagramNavigationOptions object to customize navigation behavior.
true
onChange?
(event: DiagramChangeEvent) => void
Fires when a shape or connection is created or removed.
onDiagramClick?
(event: DiagramDomEvent) => void
Fires when the user clicks on a shape or a connection.
onDrag?
(event: DiagramDragEvent) => void
Fires when the user drags an item.
onDragEnd?
(event: DiagramDragEvent) => void
Fires when the user stops dragging an item.
onDragStart?
(event: DiagramDragEvent) => void
Fires when the user starts dragging an item.
onMouseEnter?
(event: DiagramDomEvent) => void
Fires when the mouse pointer enters a shape or connection.
onMouseLeave?
(event: DiagramDomEvent) => void
Fires when the mouse pointer leaves a shape or connection.
onPan?
(event: DiagramPanEvent) => void
Fires when the user pans the Diagram.
onSelect?
(event: DiagramSelectEvent) => void
Fires when the user selects one or more items.
onShapeBoundsChange?
(event: DiagramItemBoundsChangeEvent) => void
Fires when the location or size of an item are changed.
onTooltipHide?
(item: ShapeOptions | ConnectionOptions) => void
Fires when a tooltip should be hidden.
onTooltipShow?
(item: ShapeOptions | ConnectionOptions) => void
Fires when a tooltip should be shown for a shape or connection.
onZoomEnd?
(event: DiagramZoomEndEvent) => void
Fires when the Diagram has finished zooming out.
onZoomStart?
(event: DiagramZoomStartEvent) => void
Fires when the Diagram starts zooming in or out.
Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
true
role?
string
Sets the role attribute on the outermost wrapper element of the Diagram.
'application'
selectable?
boolean | Selectable
Defines the Diagram selection options.
true
Defines the default configuration options applicable to all shapes.
Defines the field mapping configuration for shapes data binding.
Maps source object properties to Diagram shape properties.
Only used when shapes is an array of custom objects instead of ShapeOptions.
Defines the shapes that render in the Diagram.
Accepts either an array of ShapeOptions or an array of any objects
that will be mapped using the shapeModelFields configuration.
style?
CSSProperties
Sets the inline styles for the outermost wrapper element of the Diagram.
zoom?
number
Defines the zoom level of the Diagram.
1
zoomMax?
number
Defines the maximum zoom level of the Diagram.
2
zoomMin?
number
Defines the minimum zoom level of the Diagram.
0.1
zoomRate?
number
Defines the zoom rate of the Diagram.
0.1