Basic Primitives Diagrams API Reference
Defines leftward or rightward item placement relative to the referenced item. In case of assitants and advisers the referenced item is their imediate parent. In case of family diagram the referenced item is spouse or sibling in the row.
|number||Auto select by layout manager|
Defines type of on-screen and in-layout annotation object. Annotations are geometrical figures drawn around or bound to existing nodes of the diagram.
|number||Background annotation highlights nodes via drawing rectangular shape in background. If shapes overlap the same style neighbouring shapes they are merged into one continuous shape.|
|number||Connector lines between two nodes of the diagram. They are drawn on top of existing diagram layout and they don't affect nodes placement. So it is users responsibility to prserve space between nodes for them.|
|number||Highlight path annotation traces path between given sequence of nodes over existing connector lines in the diagram.|
|number||In-layout label annotation. Label anntations are placed in layout between nodes, they preserve space between nodes, so they don't overlap neighbouring nodes. Label annotations are designed for autoplacement and bundling of connection lines between nodes when needed.|
|number||Shape annotation is a possibility to draw some geometrical shapes over several nodes of the diagram.|
Defines shape of children formation. By default a node's children are always placed in a horizontal line below the parent node. On a large scale this may result in the end user having to scroll screens in order to view all of the nodes. To compensate for this, we provide the option of placing all of the children of a parent node in a sqaure/matrix formation. This will reduce sideways screen scrolling by compacting the child nodes into a much smaller area on the screen.
|number||Auto. This mode lets you set children layout at the component level and then redefine it for individual nodes if needed.|
|number||Horizontal children layout|
|number||Matrix formation of the children|
|number||Children placed in vertical column|
Label placement relative to connector annotation. Connector annotation is bound and drawn between two nodes defined by two properties:
toItem. Label can be placed close to "start", "end" nodes or in between of them along the connector line.
Connector placement type defines style of connector line drawing over diagram layout. It supports two options: the
Straight is classic direct line connecting two nodes, this is the most expected style of connector annotation drawing over diagram, the second style is called
Offbeat and it design to dynamically adopt to nodes mutual location and gap between them. It uses free hand line style drawing going from start to the end nodes. Since every diagram is packed with various connection lines, this annotation placement style is deliberately made not straight, so it can be noticeable on top of other lines of the diagram.
|number||Places connector annotation in the way that it does not overlap underlying diagram connector lines. If nodes are close to each other and gap between them cannot fit annotation, then it will be drawn on the side of the nodes, so it will have enough space for arrow and label.|
|number||Straight line annotation between nodes. This annotation mode provides basic conflict resolution between annotations overlapping each other. If two or more straight annotations overlap each other then layout engine will add extra offset to them, so they will be drawn in parallel to each other.|
Connector shape type defines number of lines and arrows at their ends drawn between nodes of the connector annotation. This feature combined with basic conflict resolution, which places overlapping annotations in parallel when they overlap each other, gives you full flexibility over variations of possible connector lines between two given nodes of diagram.
|number||Single line with 2 arrows.|
|number||Single line with one arrow|
|number||Two parallel lines with single arrows|
Connection lines style. This option is only applicable to nodes minimized to markers or lines. Full size nodes are always connected with squared connection lines
|number||Angular direct node to node connection lines|
|number||Curved direct node to node connection lines|
|number||Orthogonal connection lines|
Elbow style of connection lines
|number||Dot marker at the intersection|
Defines option state.
|number||Option state is auto defined.|
Graphics primitives elements rendering mode
|number||Scalable Vector Graphics|
This enumeration defines objects gravity in the chart relative to parents and children. For example connection lines can be drawn with arrows, so this enumeration controls direction of arrows up towards parents or down towards children in the hierarchy. The other example is nodes placement close to their immediate parents or immediate children in case when parents and children are offset from them by multiple levels in hierarchy.
This enumeration defines child node placement relative to its parent node. By default all children that belong to a parent node are of the same rank and status between each other and due to that, are always aligned below the parent and are organized in the same way. However for special cases were the end user wishes to have a child that is seperate from the rest of it's siblings, we provide custom child types that the end user can use to place diffrent ranking nodes anywhere around the parent node. These placement options give a lot of space for the creation of roles such as an Assistant, Adviser, various Partners and co-heads that may be in the organization. Additionally, by default a node's regular children are always placed in a horizontal line below the parent node. See children placement type options for regular children layout.
|number||Adviser is drawn at the same row as parent node on the left or right side and connected horizontally to it.|
|number||Adviser partner is a variation of limited partner. The only difference is that it has an extra connection line to its parent.|
|number||Assitant node is drawn at row in between parent and child rows and connected horizontally to connection line going from parent to the regualr children|
|number||General partner is immitation of multiple inheritance in the oraganizational chart hierarchy. General partner node is drawn side by side with its parent and remaining regular children are visually connected to both of them like they are their parents. Another layout feature of the general partner is that it is connected to parents of its immediate logical parent as well, so visually it becomes a child of its grand parent.|
|number||Limited partner is variation of general partner. The only difference is that is is not conencte to its logical grand parent.|
|number||Regular node is a default placement of child nodes in form of horizontal row.|
|number||Sub adviser is variation of adviser node type. It has the same placement but it is connected by the top side of the node to the connector line going to the parent node.|
|number||Sub assitant is variation of assitant node type. It has the same placement but it is connected by the top side of the node to the connector line going to the parent node.|
Line style of connection lines.
Loops layout mode. Configuration may contain loop references between items, so control tries to find layout minimizing number of loops between levels, so majority of references ideally should go in one direction. This option disables optimization and forces items levels order to match their order in
items collection. For example if you have two nodes
B referencing each other as a parent, then it is not defined which one is going to be on the top of the diagram. Set this option to
KeepItemsOrder, if you need the first item in your collection to be on the top, otherwise control will optimize loops layout in order to minimize number of loops in diagram.
|number||Keeps order of items on levels, the same as in |
|number||Optimized. Control searches for layout producing minimal number of feedback loops in the diagram.|
Interactivity mode. Control implements standard behaivour of classic desktop UI controls. It supports single selected node - cursor. It supports on mouse over node visual feedback - highlight. It supports selection of group of nodes - selected items. All that functionality can be disabled depending on your application requirements.
|number||Cursor selection only without highlight.|
|number||Everything is on.|
|number||Mouse over feedback only|
Neighbors selection mode. The control supports diagram auto fit into screen view. It is achieved via drawing nodes in form of markers. So small nodes make diagram fit into the screen space, but they have no details. Our solution is to show cursor and selected items of the diagram in full size and draw all other as markers. This enumeration controls visibility of neighbours of the cursor node in the auto fit mode. It allows to draw them in full size regardless of available space.
|number||Selects parents and children of the cursor item|
|number||Selects parents, children, spouses and siblings of the cursor item.|
Controls diagram layout orientation. The control can be rotated in any direction, this is needed for arabic support and various layout.
Fits diagram into available screen space. When diagram size significantly larger that available screen space, its scrolling and navigation becomes problematic, so we support automatic diagram fit into the screen space via rendering some of its nodes in form of small markers. Control supports several page fit mode options which can match your requirements depending on diagram layout, orientation and number of nodes. Autosize - this option is opposite to auto fit. It lets you expand control size to fit all diagram nodes full size without scrollbars.
|number||This is opposite mode to auto fit. In this mode diagram controls its size, it sets its size to accomodate all nodes and render them normally.|
|number||Fits diagram into the view so it has no scrollbars.|
|number||Disabled. All nodes rendered with their templates.|
|number||Fits diagram into the view hight, so it has no vertical scrollbar.|
|number||Fits diagram into the view width, so it has no horizontal scrollbar.|
|number||Renders all nodes as markers regardless of available screen space. Control selects and renders full size cursor, its neighbours and selected nodes only. Don't forget to disable selection path as well, so nodes from cursor up to the root are not selected.|
Defines element placement relative to rectangular area it is bound to.
|number||Defined by other control options.|
This enumeration is used to tell rendering callback functions current state of the template. It is needed for proper events binding and content updates.
|number||Template is just created.|
|number||Template is reused and update is needed.|
Selection path mode. This enumeration controls visibility of nodes between cursor and the root of the diagram in the auto fit mode. It allows to draw them in full size regardless of available space and auto fit mode. The control supports diagram auto fit into screen view. It is achieved via drawing nodes in form of markers. So small nodes make diagram fit into the screen space, but they have no details. Our solution is to show cursor and selected items of the diagram in full size and draw all other diagram nodes as markers.
|number||Selects cursor node parents up to the root are renders them full size regardless of available space.|
|number||No selection path|
|number||Depends on other options.|
|number||Regular horizontal text|
|number||Rotate text left for 90 degree.|
|number||Rotate text right for 90 degree.|
Controls update of the diagram
|number||Updates highlight position only|
|number||Forces control to make a full chart redraw. It is equivalent to initial chart creation. It removes everything from placeholder and renders all elements again.|
|number||Optimized refresh. It only updates visual elements which needs to be updated.|
Defines relation between two vectors
Controls nodes vertical alignment inside row of nodes. If row of nodes contains nodes of multiple sizes then small nodes are vertically aligned relative to their large neighbours.
Minimal nodes visibility in the diagram. If auto fit of diagram into current page size is enabled, then this option controls minimum allowed size of diagram nodes.
|number||Selects best visibility mode.|
|number||Diagram draws nodes in form of markers|
|number||Makes node invisible in layout. If node has no parents then its connection lines are hidden as well.|
|number||Diagram only draws connection lines and hides actuall nodes.|
|number||Regular template based diagram nodes|
Option to draw annotation in the foreground or in the backgound of diagram nodes.
|number||Depends on annotation type.|