The helper diagram UI controls are now available as React components too:
OverviewThe Overview component provides following props: id, diagram, enabled, backColor, dimColor, scaleFactor, scaleMode, allowZoom, autoScrollAmount
NodeListViewNodeListView provides following props: id, enabled, iconSize, defaultNodeSize, padding, orientation, tooltipDelay, shapeLibraryLocation, nodes, captions. It raises nodeSelected event when a node is selected in the view. The addNode(node, caption) method can be used to add nodes from code-behind, while nodes and captions props can be set to arrays of nodes and their captions.
ZoomControlZoomContro provides following props: id, diagram, enabled, cornerRadius, padding, snapToZoomStep, tickPosition, showLabel, textColor, shadowColor, innerColor, borderColor, activeColor, fill, backColor, scrollStep, zoomStep, maxZoomFactor, minZoomFactor, zoomFactor.
RulerRuler provides following props: id, unit, enableGuides, projectRotatedBounds, negatedY, negatedX, verticalScaleVisible, horizontalScaleVisible, pointerColor, textColor, guideColor, projectionColor, backColor, foreColor. The Ruler should be set as the parent component of DiagramView:
<Ruler>
<DiagramView diagram={this.state.diagram} ... />
</Ruler>
The new components are available in diagram-library-react@1.0.0 version on npm. Updated sample project here shows them on last tab page:
https://mindfusion.eu/_beta/react-diagram-samples.zip