Optional
absoluteArcSize?: booleanOptional
align?: AlignValueThis value defines how the lines of the label are aligned horizontally.
left
means that the lines of label text are aligned to the left of the label bounds.right
means that the lines of label text are aligned to the right of the label bounds.center
means that the center of the label text lines are aligned to the center of the label bounds.Note that this value does not affect the positioning of the overall label bounds relative to the vertex. To move the label bounds horizontally, use labelPosition.
Optional
anchorPointDirection?: booleanThis defines if the direction style should be taken into account when computing the fixed point location for connected edges. See also direction.
Set this to false
to ignore the direction style for fixed connection points.
Optional
arcSize?: numberFor vertex, this defines the rounding factor for a rounded vertex in percent.
The possible values are between 0
and 100
.
If this value is not specified, then constants.RECTANGLE_ROUNDING_FACTOR * 100
is used.
Shapes supporting arcSize
:
For edge, this defines the absolute size of the rounded corners in pixels. If this value is not specified, then LINE_ARCSIZE is used.
See also absoluteArcSize.
Optional
aspect?: stringThe possible values are empty or fixed.
If fixed
is used, the aspect ratio of the cell will be maintained when resizing.
Optional
autoSize?: booleanThis specifies if a cell should be resized automatically if its value changed. This is normally combined with resizable to disable manual resizing.
Note that a cell is in fact auto-resizable according to the value returned by Graph.isAutoSizeCell.
Optional
backgroundOutline?: booleanThis specifies if only the background of a cell should be painted when it is highlighted.
Optional
bendable?: booleanThis specifies if the control points of an edge can be moved.
Note that a cell is in fact bendable according to the value returned by Graph.isCellBendable.
Optional
cloneable?: booleanThis specifies if a cell can be cloned.
Note that a cell is in fact cloneable according to the value returned by Graph.isCellCloneable.
Optional
curved?: booleanIt is only applicable for connector shapes.
Optional
dashed?: booleanSee also dashPattern and fixDash.
Optional
dashPattern?: stringThe type of this value is a space-separated list of numbers that specify a custom-defined dash pattern. Only relevant if dashed is true
.
Dash styles are defined by the length of the dash (the drawn part of the stroke) and the length of the space between the dashes.
The lengths are relative to the line width: a length of 1
is equal to the line width.
Optional
deletable?: booleanThis specifies if a cell can be deleted.
Note that a cell is in fact deletable according to the value returned by Graph.isCellDeletable.
Optional
direction?: DirectionValueThe direction style is used to specify the direction of certain shapes (eg. Swimlane).
Optional
edgeStyle?: StyleEdgeStyleValueThis defines the style of the edge if the current cell is an Edge.
The possible values are all names of the shapes registered with StyleRegistry.putValue. This includes EdgeStyleValue values and custom names that have been registered.
It is also possible to pass a EdgeStyleFunction.
See noEdgeStyle.
Optional
editable?: booleanThis specifies if the value of a cell can be edited using the in-place editor.
Note that a cell is in fact editable according to the value returned by Graph.isCellEditable.
Optional
elbow?: stringThis defines how the three-segment orthogonal edge style leaves its terminal vertices. The 'vertical' style leaves the terminal vertices at the top and bottom sides.
The possible values are 'horizontal' and 'vertical'.
Optional
endArrow?: StyleArrowValueThis defines the style of the end arrow marker.
Possible values are all names of registered arrow markers with MarkerShape.addMarker. This includes ArrowValue values and custom names that have been registered.
See startArrow.
Optional
endFill?: booleanUse false
to not fill or true
to fill the end arrow marker.
See startFill.
Optional
endFillColor?: ColorValueSet the fill color of the end arrow marker if endFill is true
.
If not set, use strokeColor.
Optional
endSize?: numberThe value represents the size of the end marker in pixels. See startSize.
Optional
endStrokeColor?: ColorValueSet the stroke color of the end arrow marker. If not set, use strokeColor.
Optional
entryDx?: numberThe horizontal offset of the connection point of an edge with its target terminal.
Optional
entryDy?: numberThe vertical offset of the connection point of an edge with its target terminal.
Optional
entryPerimeter?: booleanDefines if the perimeter should be used to find the exact entry point along the perimeter of the target.
Optional
entryX?: numberThe connection point in relative horizontal coordinates of an edge with its target terminal.
Optional
entryY?: numberThe connection point in relative vertical coordinates of an edge with its target terminal.
Optional
exitDx?: numberThe horizontal offset of the connection point of an edge with its source terminal.
Optional
exitDy?: numberThe vertical offset of the connection point of an edge with its source terminal.
Optional
exitPerimeter?: booleanDefines if the perimeter should be used to find the exact entry point along the perimeter of the source.
Optional
exitX?: numberThe horizontal relative coordinate connection point of an edge with its source terminal.
Optional
exitY?: numberThe vertical relative coordinate connection point of an edge with its source terminal.
Optional
fillColor?: SpecialStyleColorValueThe possible values are all HTML color names or HEX codes, as well as special keywords such as:
indicated
to use the color of a related cell or the indicator shapeinherit
to use the color of the direct parent cellnone
for no colorswimlane
to use the color of the parent swimlane if one exists in the parent hierarchyOptional
fillOpacity?: numberPossible range is 0-100
.
Optional
fixDash?: booleanUse false
for dash patterns that depend on the line width and true
for dash patterns
that ignore the line width.
See also dashed and dashPattern.
Optional
flipH?: booleanHorizontal flip.
Optional
flipV?: booleanVertical flip.
Optional
foldable?: booleanThis specifies if a cell is foldable using a folding icon. See Graph.isCellFoldable.
Optional
fontColor?: SpecialStyleColorValueThe possible values are all HTML color names or HEX codes, as well as special keywords such as:
indicated
to use the color of a related cell or the indicator shapeinherit
to use the color of the direct parent cellnone
for no colorswimlane
to use the color of the parent swimlane if one exists in the parent hierarchyOptional
fontFamily?: stringThe possible values are names such as Arial; Dialog; Verdana; Times New Roman
.
Optional
fontSize?: numberThe size of the font (in px).
Optional
fontStyle?: numberValues may be any logical AND (sum) of the FONT. For instance, FONT.BOLD, FONT.ITALIC, ...
Optional
glass?: booleanEnable the glass gradient effect
Optional
gradientColor?: SpecialStyleColorValueThe possible values are all HTML color names or HEX codes, as well as special keywords such as:
indicated
to use the color of a related cell or the indicator shapeinherit
to use the color of the direct parent cellnone
for no colorswimlane
to use the color of the parent swimlane if one exists in the parent hierarchyOptional
gradientDirection?: DirectionValueGenerally, and by default in maxGraph, gradient painting is done from the value of fillColor to the value of gradientColor. If we take the example of 'north', this means that the fillColor color is at the bottom of paint pattern and the gradientColor color is at the top, with a gradient in-between.
Optional
horizontal?: booleanThis value only applies to vertices.
If the shape is swimlane
, a value of false
indicates that the swimlane should
be drawn vertically, true
indicates that it should be drawn horizontally.
If the shape style does not indicate that this vertex is a 'swimlane', this value only
affects whether the label is drawn horizontally or vertically.
Optional
image?: stringThe possible values are any image URL.
This is the path to the image that is to be displayed within the label of a vertex.
Data URLs should use the following format: data:image/png,xyz
where xyz is the base64
encoded data (without the "base64"-prefix).
Optional
imageAlign?: AlignValueThe value defines how any image in the vertex label is horizontally aligned within the label bounds of a LabelShape.
Optional
imageAspect?: booleanThe possible values are:
false
: do not preserve aspect of the imagetrue
: keep aspect of the imageThis is only used in ImageShape
.
Optional
imageBackground?: ColorValueThe possible values for the image background are all HTML color names or HEX codes.
This is only used in ImageShape
.
Optional
imageBorder?: ColorValueThe possible values for the color of the image border are all HTML color names or HEX codes.
This is only used in ImageShape
.
Optional
imageHeight?: numberThe value is the image height in pixels and must be greater than 0
.
Optional
imageWidth?: numberThe value is the image width in pixels and must be greater than 0
.
Optional
indicatorColor?: ColorValueThe possible values are all HTML color names or HEX codes, as well as the special swimlane
keyword
to refer to the color of the parent swimlane
if one exists.
Optional
indicatorDirection?: DirectionValueThe direction style is used to specify the direction of certain shapes (eg. TriangleShape).
Optional
indicatorHeight?: numberThe possible values start at 0 (in pixels).
Optional
indicatorImage?: stringIndicator image used within a LabelShape. The possible values are all image URLs.
The indicatorShape has precedence over the indicatorImage.
Optional
indicatorShape?: StyleShapeValueThe indicator shape used within an LabelShape. The possible values are all names of registered Shapes with CellRenderer.registerShape. This includes ShapeValue values and custom names that have been registered.
The indicatorShape
property has precedence over the indicatorImage property.
Optional
indicatorStrokeColor?: ColorValueThe color of the indicator stroke in LabelShape. The possible values are all HTML color names or HEX codes.
Optional
indicatorWidth?: numberThe possible values start at 0 (in pixels).
Optional
jettySize?: number | "auto"The jetty size in EdgeStyle.OrthConnector.
Optional
labelBackgroundColor?: ColorValueThe possible values are all HTML color names or HEX codes.
Optional
labelBorderColor?: ColorValueThe possible values are all HTML color names or HEX codes.
Optional
labelPadding?: numberThe label padding, i.e. the space between the label border and the label.
Optional
labelPosition?: AlignValue | "ignore"The label alignment defines the position of the label relative to the cell.
left
means that the entire label bounds is placed completely just to the left of the vertex.right
means that the label bounds are adjusted to the right.center
means that the label bounds are vertically aligned with the bounds of the vertex.ignore
means that there is no alignmentNote that this value does not affect the positioning of label within the label bounds. To move the label bounds horizontally within the label bounds, use align
Optional
labelWidth?: numberThe width of the label if the label position is not center
.
Optional
loopStyle?: EdgeStyleFunctionOptional
margin?: numberThe margin between the ellipses in DoubleEllipseShape.
The possible values are all positive numbers.
Optional
movable?: booleanThis specifies if a cell can be moved.
Note that a cell is in fact movable according to the value returned by Graph.isCellMovable.
Optional
noEdgeStyle?: booleanIf this is true
, no edge style is applied for a given edge.
See edgeStyle.
Optional
noLabel?: booleanIf this is true
, no label is visible for a given cell.
Optional
opacity?: numberThe possible range is 0-100
.
Optional
orthogonal?: boolean | nullDefines if the connection points on either end of the edge should be computed so that the edge is vertical or horizontal if possible and if the point is not at a fixed location.
This is used in Graph.isOrthogonal, which also returns true
if the edgeStyle
of the edge is an elbow
or entity
.
Optional
orthogonalLoop?: booleanUse this style to specify if loops should be routed using an orthogonal router. Currently, this uses EdgeStyle.OrthConnector but will be replaced with a dedicated orthogonal loop router in later releases.
Optional
overflow?: OverflowValueThis value specifies how overlapping vertex labels are handled.
See Graph.isLabelClipped.
Note that the vertical alignment is ignored for overflow filling and for horizontal alignment.
Optional
perimeter?: PerimeterFunction | PerimeterValue | string & {} | nullThis defines the perimeter around a particular shape.
For PerimeterFunction types, some possible values are the functions defined in Perimeter.
Alternatively, use a string or a value from PERIMETER to access perimeter styles
registered in StyleRegistry.
If GraphView.allowEval is set to true
, you can pass the PerimeterFunction implementation directly as a string.
Remember that enabling this switch carries a possible security risk
WARNING: explicitly set the value to null or undefined means to not use any perimeter. To use the perimeter defined in the default vertex, do not set this property.
Optional
perimeterSpacing?: numberThis is the distance between the connection point and the perimeter in pixels.
Optional
pointerEvents?: booleanSpecifies if pointer events should be fired on transparent backgrounds. This style is currently only supported by RectangleShape, SwimlaneShape and StencilShape.
This style is usually set to false
in groups where the transparent part should allow any
underlying cells to be clickable.
Optional
portConstraint?: DIRECTIONDefines the direction(s) in which edges are allowed to connect to cells.
Optional
portConstraintRotation?: booleanDefine if the directions of the port constraints are rotated with the vertex rotation.
false
makes the port constraints remain absolute, relative to the graph.true
makes the constraints rotate with the vertex.Optional
resizable?: booleanThis specifies if a cell can be resized.
Note that a cell is in fact resizable according to the value returned by Graph.isCellResizable.
Optional
resizeHeight?: booleanThis specifies if the height of a cell is resized if the parent is resized.
true
, then the height will be resized even if the cell geometry is relative.false
, then the height will not be resized.Optional
resizeWidth?: booleanThis specifies if the width of a cell is resized if the parent is resized.
true
, then the width will be resized even if the cell geometry is relative.false
, then the width will not be resized.Optional
rotatable?: booleanThis specifies if a cell can be rotated.
Note that a cell is in fact rotatable according to the value returned by Graph.isCellRotatable.
Optional
rotation?: numberThe possible range is 0-360.
Optional
rounded?: booleanFor edges, this determines whether the joins between edges segments are smoothed to a rounded finish.
For vertices that have the rectangle shape, this determines whether the rectangle is rounded.
See also absoluteArcSize and arcSize for the 'rounded' settings.
Optional
routingCenterX?: numberThis is the relative offset from the center used to connect the edges.
The possible values are between -0.5 and 0.5.
Optional
routingCenterY?: numberThis is the relative offset from the center used to connect the edges.
The possible values are between -0.5 and 0.5.
Optional
segment?: numberThe type of this value is float and the value represents the size of the horizontal segment of the entity relation style.
Optional
separatorColor?: ColorValueThe possible values are all HTML color names or HEX codes.
This style is only used for swimlane
shapes.
Optional
shadow?: booleanAdd a shadow when painting the shape.
Optional
shape?: StyleShapeValueThe possible values are all names of the shapes registered with CellRenderer.registerShape. This includes ShapeValue values and custom names that have been registered.
Optional
sourceJettySize?: number | "auto"The size of the source jetty in EdgeStyle.OrthConnector.
This value takes precedence over jettySize.
Optional
sourcePerimeterSpacing?: numberThis is the distance between the source connection point of an edge and the perimeter of the source vertex in pixels.
This style only applies to edges.
Optional
sourcePort?: stringDefines the ID of the cell that should be used to compute the perimeter point of the source for an edge.
This allows for graphically connecting to a cell while keeping the actual terminal of the edge.
Optional
sourcePortConstraint?: DIRECTIONDefines the direction(s) in which edges are allowed to connect to sources.
Optional
spacing?: numberThe value represents the spacing, in pixels, added to each side of a label in a vertex.
This style only applies to vertices.
Optional
spacingBottom?: numberThe value represents the spacing, in pixels, added to the bottom side of a label in a vertex. It is added to the CellStateStyle.spacing value.
This style only applies to vertices.
Optional
spacingLeft?: numberThe value represents the spacing, in pixels, added to the left side of a label in a vertex. It is added to the CellStateStyle.spacing value.
This style only applies to vertices.
Optional
spacingRight?: numberThe value represents the spacing, in pixels, added to the right side of a label in a vertex. It is added to the CellStateStyle.spacing value.
This style only applies to vertices.
Optional
spacingTop?: numberThe value represents the spacing, in pixels, added to the top side of a label in a vertex. It is added to the CellStateStyle.spacing value.
This style only applies to vertices.
Optional
startArrow?: StyleArrowValueThis defines the style of the start arrow marker.
Possible values are all names of registered arrow markers with MarkerShape.addMarker. This includes ArrowValue values and the names of any new shapes.
See endArrow.
Optional
startFill?: booleanUse false
to not fill or true
to fill the start arrow marker.
See endFill.
Optional
startFillColor?: ColorValueSet the fill color of the start arrow marker if startFill is true
.
If not set, use startStrokeColor.
Optional
startSize?: numberThe value represents the size of the start marker, in pixels, or the size of the title region
of a swimlane
depending on the shape it is used for.
See endSize.
Optional
startStrokeColor?: ColorValueSet the stroke color of the start arrow marker. If not set, use strokeColor.
Optional
strokeColor?: SpecialStyleColorValueThe possible values are all HTML color names or HEX codes, as well as special keywords such as:
indicated
to use the color of a related cell or the indicator shapeinherit
to use the color of the direct parent cellnone
for no colorswimlane
to use the color of the parent swimlane if one exists in the parent hierarchyOptional
strokeOpacity?: numberThe possible range is 0-100
.
Optional
strokeWidth?: numberThe possible range is any non-negative value greater than or equal to 1. The value defines the stroke width in pixels.
Note: To hide a stroke, use none
as value of strokeColor
.
Optional
swimlaneFillColor?: ColorValueThe fill color of the swimlane
background.
The possible values are all HTML color names or HEX codes.
Optional
swimlaneLine?: booleanThis style specifies whether the line between the title region of a swimlane
should
be visible. Use false
for hidden or true
for visible.
Optional
targetJettySize?: number | "auto"The size of the target jetty in EdgeStyle.OrthConnector.
This value takes precedence over jettySize.
Optional
targetPerimeterSpacing?: numberThis is the distance between the target connection point of an edge and the perimeter of the target vertex in pixels.
This style only applies to edges.
Optional
targetPort?: stringDefines the ID of the cell that should be used to compute the perimeter point of the target for an edge.
This allows for graphically connecting to a cell while keeping the actual terminal of the edge.
Optional
targetPortConstraint?: DIRECTIONDefines the direction(s) in which edges are allowed to connect to sources.
Optional
textDirection?: TextDirectionValueOptional
textOpacity?: numberThe possible range is 0-100
.
Optional
verticalAlign?: VAlignValueThis value defines how the lines of the label are vertically aligned.
top
means that the topmost line of the label text is aligned with the top of the label bounds.bottom
means that the bottom-most line of the label text is aligned with the bottom of the
label bounds.middle
means that there is equal spacing between the topmost line of the text label and the top
of the label bounds and between the bottom-most line of the text label and the bottom of the
label bounds.Note that this value doesn't affect the positioning of the overall label bounds relative to the vertex. To move the label bounds vertically, use verticalLabelPosition.
Optional
verticalLabelPosition?: VAlignValueThe label alignment defines the position of the label relative to the cell.
Note that this value doesn't affect the positioning of label within the label bounds. To move the label vertically within the label bounds, use verticalAlign.
Optional
whiteSpace?: WhiteSpaceValueThis value specifies how white-space inside an HTML vertex label should be handled.
This style is only used for HTML labels.
This specifies if arcSize for rectangles is absolute or relative.