The helper diagram UI controls are now available as Angular 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>
<diagram-view [diagram]="diagram" ... />
</ruler>
The new components are available in diagram-library-angular@1.0.1 version on npm. Updated sample project here shows them on last tab page:
https://mindfusion.eu/_beta/angular-diagram-samples.zip