MindFusion diagramming Part 5 - Changing pen colors with JavaScript (ClientMode)

In order to change the pen (borders) of a shape you first need to instantiate a pen class.
It is in the com.mindfusion.diagramming namespace (Java class).

So you need to do the following:


var pen = new Packages.com.mindfusion.diagramming.Pen();


Now, to set the color of the pen we need a java.awt.Color instance. Luckily there are static properties which will return a color instance for the most used colors. See what I mean:

var blackColor = Packages.java.awt.Color.black;
var greenColor = Packages.java.awt.Color.green;

Now, to set the pen color to the color we will use setColor() method:

pen.setColor(Packages.java.awt.Color.green);

To set the width to be 1 pixel we need to use the floating point 0.1, not 1:

pen.setWidth(0.1);

Here is the function return a pen with 1 px border and green color:
function getGreenPen()
{
var pen = new Packages.com.mindfusion.diagramming.Pen();
pen.setWidth(0.1);
pen.setColor(Packages.java.awt.Color.green);
return pen;
}

You can now use an instance of a shape and set its pen. For example, you can use the OnNodeActivatedScript and add the following function:

function onNodeActivated(diagram, args)
{
var node = args.getNode();
node.setPen(getGreenPen());
}


Hope it helps a bit.