MindFusion.Diagramming for JavaScript Programmer's Guide

Customizing Node Appearance

Nodes can have different shape, background image or color.  They can also have differently aligned text.

Customizing the shape of nodes

ShapeNode has setShape method that sets the shape of the node. The argument can be either a Shape object (returned by one of the static methods of the Shapes class), or a string id of the shape, which coincides with the name of the method that gets it. Here is an example:

JavaScript  Copy Code

myNode.setShape("Arrow1");

Bitmap images

Each node can display an image as its content. The image is set via the setImage method. Be default it is centered inside the node. You can change the alignment by calling setImageAlign. Images can be loaded by their URL via setImageLocation.

Fill color

Nodes can be painted in any color that you choose. Use setBrush to specify how the node is painted.

JavaScript  Copy Code

myNode.setBrush("Red");

Text and font

Nodes can have text with customizable font and text alignment. Use setText to specify the text for the node; setTextColor changes the color of the text and setTextAlignment - its alignment. The setFont method lets you specify a distinct font for each node:

JavaScript  Copy Code

var Font = MindFusion.Drawing.Font;

//the two arguments specify whether the font is bold and italic
startNode.setFont(new Font("sans-serif", 5, true, false));