Search

Standard Item Types

Diagram elements in MindFusion.Diagramming for JavaScript are represented by DiagramNode and DiagramLink instances. Combined and linked together, they can form complex data structures such as process or entity-relationship diagrams, class hierarchies, networks and graphs. Each of their rich features can be customized through numerous methods and properties.

Shape Nodes

ShapeNode objects can represent geometric shapes, flowchart elements, icons in network diagrams, and so on. They can display both graphics and text in different fonts, sizes and colors. A node's shape is specified by setting its shape property. There are more than 100 predefined node shapes and apart from them, MindFusion.Diagramming for JavaScript offers an easy way to define custom shapes. Shape nodes can be rotated, either interactively using the round selection handle drawn above them, or programmatically by setting their rotationAngle property.

SVG Nodes

The SvgNode class represents nodes that can display SVG drawings. SVG graphics are rendered instead of image, and on top of the geometry rendered by the base ShapeNode class. Enable the transparent property to hide the node's geometry and leave only the drawing visible. The SVG file is loaded and associated with the node through an SvgContent object, which should be initialized and then assigned to the content property.

Composite Nodes

Nodes in MindFusion.Diagramming can be composed from components. Components are graphical widgets similar to controls, which can be arranged in hierarchies and added to a Diagram through instances of the CompositeNode class. The component system contains various built-in components, such as Text and Image. Component hierarchies can be defined and loaded through Json templates using loadTemplate and classFromTemplate methods.

Table Nodes

A TableNode displays tabular data, and can be used to represent table schemas in database diagrams or classes in class-hierarchies. A table contains cells arranged in a grid, and every cell can display text and/or image. Cells, columns and rows can be customized in various ways - there are properties available for setting their extents, style, image and text alignment. Tables' dimensions can be programmatically changed; inserting, appending or deleting rows and columns can be done in a very comprehensive, intuitive way whenever you might need it. Tables can also display background images and graphics.

Free-form Nodes

A FreeFormNode collects all points from users' mouse or touch input and displays them as node's outline. To let users draw free-form nodes interactively, set behavior to DrawFreeForms. Use the points property of FreeFormNode to get or set outline points programmatically. If the closed property is enabled, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than autoCloseDistance, the node gets closed automatically.

Container Nodes

A ContainerNode can contain other diagram nodes. When a container is moved, its child nodes move too. Containers can be nested within each other to unlimited depth. They can be folded to a smaller size, hiding their child items, and unfolded to show content again. Nodes inside a container can be linked to nodes both inside and outside of it. If a link connects items in the same container, the container is not considered an obstacle by the auto-routing algorithm.

TreeView nodes

The TreeViewNode class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the rootItems property. Items can be added and removed individually by using the addItem and removeItem methods, or in bulk by calling the fromObject method, which loads the tree view items from an array of objects.

Video Nodes

VideoNode objects display video streams, along with UI elements to play, pause, seek and change volume. Set node's videoLocation property to specify its video URL. Auto-playing is not supported at this time, and the video can be started only by users clicking the play button. VideoNode is built around Video component, which can also be used in CompositeNode templates.

Control Nodes

ControlNode objects display custom HTML content, specified via their template property. A node's DOM structure is created inside the Content div element, which is then rendered on top of the diagram canvas. Note that this prevents ControlNodes drawing in diagram' usual Z order, and they will always appear on top of other diagram items. By default the diagram intercepts mouse events of all hosted html elements to enable moving nodes or drawing links. You can specify that interactive elements, such as buttons or text boxes, should receive input instead by setting their data-interactive attribute to true.

Links

DiagramLink objects are used to represent various types of connections and relations in diagrams. MindFusion.Diagramming for JavaScript offers three basic link shapes, which can be assigned to links' shape property:

• polyline links composed of straight-line segments;
• curved links composed of Bézier-spline segments;
• cascading links composed of horizontal and vertical segments, alternating their orientation so that every segment is orthogonal to its neighbor.

A link can be connected to a node at each of the link's ends. It is also possible to have unconnected links - having one or both of their ends  not connected to nodes. Some customizable link's properties are: arrowheads, style, text, pen width and style, modification behavior and number of segments.

See Also
Controlling User Interaction