Customizing a node shape

You can customize the node shape using the properties listed in the following table.

CSS properties for network nodes

Property Name	Type	Default Value	Description
`shapeType`	`int`	`ROUND_RECTANGLE`	Sets the shape of an `ilog.views.sdm.graphic.IlvGeneralNode` . The values are those accepted by setShapeType.
`shapeWidth`	`float`	`40`	Sets the width of the shape of an `ilog.views.sdm.graphic.IlvGeneralNode` .
`shapeHeight`	`float`	`40`	Sets the height of the shape of an `ilog.views.sdm.graphic.IlvGeneralNode` . Use only when the value of the property `keepingAspectRatio` is `false` .
`shapeAspectRatio`	`float`	`1`	Sets the aspect ratio of the shape of an `ilog.views.sdm.graphic.IlvGeneralNode` .
`keepingAspectRatio`	`boolean`	`true`	Specifies whether the width/height ratio is preserved by the value of the properties `shapeWidth` and `shapeHeight` .
`foreground`	`Color`	`Color.darkGray`	Denotes the node foreground color.
`background`	`Color`	`Color(192,192,192,128)`	Denotes the node background color.
`fillStyle`	`int`	`SOLID_COLOR`	Sets the style used to fill the shape of an `ilog.views.sdm.graphic.IlvGeneralNode` . The possible values are those defined in `ilog.views.sdm.graphic.IlvGeneralNode#setFillStyle` : `NO_FILL` `SOLID_COLOR` `LINEAR_GRADIENT` `RADIAL_GRADIENT` `TEXTURE`
`fillTexture`	`Image`	`null`	Sets the texture used to fill the shape of the general node or the general link.
`fillAngle`	`float`	`0`	Sets the angle (in degrees) of the gradient used to fill the shape of an `ilog.views.sdm.graphic.IlvGeneralNode` .
`fillStart`	`float`	`0f`	Sets the position where the gradient of a `fillColor2` starts; that is, where the color is the first color set by `background` .
`fillEnd`	`float`	`1f`	Sets the position where the gradient of an `ilog.views.sdm.graphic.IlvGeneralNode` ends; that is, where the color is the first color set by `fillColor2` .
`horizontalAutoResizeMargin`	`float`	`2f`	Sets the margin that is left on both sides of the shape when it is horizontally resized automatically.
`horizontalAutoResizeMode`	`int`	`NO_AUTO_RESIZE`	Sets the horizontal autoresize mode of an `IlvGeneralNode` . The possible values are those accepted by `ilog.views.sdm.graphic.IlvGeneralNode#setHorizontalAutoResizeMode` : `NO_AUTO_RESIZE` `EXPAND_ONLY` `SHRINK_ONLY` `EXPAND_OR_SHRINK`
`verticalAutoResizeMargin`	`float`	`2f`	Sets the margin that is left on both sides of the shape when it is automatically resized vertically.
`verticalAutoResizeMode`	`int`	`NO_AUTO_RESIZE`	Sets the vertical autoresize mode of an `ilog.views.sdm.graphic.IlvGeneralNode` . The possible values are: `NO_AUTO_RESIZE` `EXPAND_ONLY` `SHRINK_ONLY` `EXPAND_OR_SHRINK`
`icon`	`Image`	`null`	Determines the image used for the icon.
`iconPosition`	IlvDirection	`Bottom`	Sets the position of the icon with respect to the label of an `IlvGeneralNode` . This property is only effective if the label position is equal to `IlvDirection.Center` , that is, the label is inside the shape. If the label is outside the shape, the icon is always at the center of the shape. The value is one of the static fields of the `{@link.ilog.views.IlvDirection}` interface.
`iconVisible`	`boolean`	`true`	Denotes whether the icon is visible or not in the object.
`borderColor`	`Color`	`120,120,120`	Sets the color of the shape border.
`borderEndCap`	`BasicStroke`	`BasicStroke.CAP_BUTT`	Sets the end cap style of the shape border. The end cap style controls what the ends of the segments of the border look like when the border is dashed. The possible values are: CAP_BUTT CAP_ROUND CAP_SQUARE
`borderLineJoin`	`BasicStroke`	`BasicStroke.JOIN_MITER`	Sets the line join style of the shape border. The line join property controls what the angles connecting the segments of the border look like. The possible values are: JOIN_BEVEL JOIN_MITER JOIN_ROUND
`borderMiterLimit`	`float`	`10f`	Sets the miter limit of the shape border. The miter limit controls how far the angles of the border are allowed to extend when the angle is very sharp.
`borderWidth`	`float`	`2`	Sets the width of the border of the object.
`borderLineStyle`	`float[]`	`null` (Solid)	Sets the line style of the shape border. The line style allows you to have a dashed border. For example, setting the line style to 4,8 creates a dashed border with segments of 4 pixels in length separated by spaces of 8 pixels. The line style can contain more than two values to create longer line style patterns.
`borderLineStylePhase`	`float`	`0f`	Sets the line style phase of the shape border. This property can be used to adjust the positions of the dashes on the border. This is useful if the dashes look unattractive at the corners of the shape.

How to use network node properties in a user-defined business class

object."test.MyNetworkElement" {
    shapeType: ROUND_RECTANGLE;
    shapeWidth: 30;
    shapeHeight: 30;
    label: @name;
    labelSpacing: 3;
}

Shape type

The basic shape of the user-defined node is controlled by the shapeType property. The possible values are listed in the following table.

Shape type properties

CSS Property and Values	Rendering
`shapeType = RECTANGLE`
`shapeType = ROUND_RECTANGLE`
`shapeType = ELLIPSE`
`shapeType = DIAMOND`
`shapeType = TRIANGLE_UP`
`shapeType = TRIANGLE_DOWN`
`shapeType = TRIANGLE_LEFT`
`shapeType = TRIANGLE_RIGHT`
`shapeType = MARKER`

How to control the width and height of the shape of a user-defined business object

The horizontal and vertical sizes of the shape are controlled through the properties shapeWidth , shapeHeight , and shapeAspectRatio .

There are two policies for setting the width and height of the shape.

You can set the properties shapeWidth and shapeHeight . In this case, the aspect ratio of the shape is not preserved.

For example:
```
#Node {
  shapeWidth: 100;
  shapeHeight: 50;
}
```
You can set the property shapeWidth to the desired width and the property shapeAspectRatio to the desired width:height ratio. For example:
```
#Node {
  shapeWidth: 100;
  shapeAspectRatio: 2;
}
```
If you change the shape width in another rule, the aspect ratio will be preserved.

The property keepingAspectRatio is used to preserve the width to height ratio. This property sets a flag that specifies whether the width to height ratio is preserved by the properties shapeWidth and shapeHeight .

If the flag is set to true , the dimensions of the shape are controlled by calling either shapeWidth or shapeHeight and by setting shapeAspectRatio .

If the flag is set to false , the dimensions of the shape are controlled by setting shapeWidth and shapeHeight .

Note

Setting shapeHeight explicitly also causes the keep aspect ratio flag to be set to false . Setting shapeAspectRatio causes the keep aspect ratio flag to be set to true .

If the keep aspect ratio flag is true , the properties shapeWidth and shapeHeight will preserve the width-to-height ratio of the shape of the node. Otherwise, you can set the width and the height independently.

Current section

Customizing user-defined network nodes