Class Stylesheet

Defines the appearance of the cells in a graph. See putCellStyle for an example of creating a new cell style.

Existing styles can be cloned using clone and turned into a string for debugging using toString.

Default Styles

The stylesheet contains two built-in styles, which are used if no style is defined for a cell:

defaultVertex: default style for vertices
defaultEdge: default style for edges

Example

const defaultVertexStyle = stylesheet.getDefaultVertexStyle();
defaultVertexStyle.rounded = true;
const defaultEdgeStyle = stylesheet.getDefaultEdgeStyle();
defaultEdgeStyle.edgeStyle = EdgeStyle.EntityRelation;

Index

Constructors

constructor

new Stylesheet(): Stylesheet
Returns Stylesheet
- Defined in view/style/Stylesheet.ts:48

Properties

styles

styles: Map<string, CellStateStyle>

Maps from names to cell styles. Each cell style is a map of key, value pairs.

Methods

createDefaultEdgeStyle

createDefaultEdgeStyle(): CellStateStyle
Creates and returns the default edge style.

Returns CellStateStyle
- Defined in view/style/Stylesheet.ts:80

createDefaultVertexStyle

createDefaultVertexStyle(): CellStateStyle
Creates and returns the default vertex style.

Returns CellStateStyle
- Defined in view/style/Stylesheet.ts:64

getCellStyle

getCellStyle(cellStyle, defaultStyle): {
    absoluteArcSize?: boolean;
    align?: AlignValue;
    anchorPointDirection?: boolean;
    arcSize?: number;
    aspect?: string;
    autoSize?: boolean;
    backgroundOutline?: boolean;
    bendable?: boolean;
    cloneable?: boolean;
    curved?: boolean;
    dashed?: boolean;
    dashPattern?: string;
    deletable?: boolean;
    direction?: DirectionValue;
    edgeStyle?: string;
    editable?: boolean;
    elbow?: string;
    endArrow?: StyleArrowValue;
    endFill?: boolean;
    endFillColor?: string;
    endSize?: number;
    endStrokeColor?: string;
    entryDx?: number;
    entryDy?: number;
    entryPerimeter?: boolean;
    entryX?: number;
    entryY?: number;
    exitDx?: number;
    exitDy?: number;
    exitPerimeter?: boolean;
    exitX?: number;
    exitY?: number;
    fillColor?: SpecialStyleColorValue;
    fillOpacity?: number;
    fixDash?: boolean;
    flipH?: boolean;
    flipV?: boolean;
    foldable?: boolean;
    fontColor?: SpecialStyleColorValue;
    fontFamily?: string;
    fontSize?: number;
    fontStyle?: number;
    glass?: boolean;
    gradientColor?: SpecialStyleColorValue;
    gradientDirection?: DirectionValue;
    horizontal?: boolean;
    image?: string;
    imageAlign?: AlignValue;
    imageAspect?: boolean;
    imageBackground?: string;
    imageBorder?: string;
    imageHeight?: number;
    imageWidth?: number;
    indicatorColor?: string;
    indicatorDirection?: DirectionValue;
    indicatorHeight?: number;
    indicatorImage?: string;
    indicatorShape?: StyleShapeValue;
    indicatorStrokeColor?: string;
    indicatorWidth?: number;
    jettySize?: number | "auto";
    labelBackgroundColor?: string;
    labelBorderColor?: string;
    labelPadding?: number;
    labelPosition?: AlignValue | "ignore";
    labelWidth?: number;
    loopStyle?: EdgeStyleFunction;
    margin?: number;
    movable?: boolean;
    noEdgeStyle?: boolean;
    noLabel?: boolean;
    opacity?: number;
    orthogonal?: null | boolean;
    orthogonalLoop?: boolean;
    overflow?: OverflowValue;
    perimeter?:
        | null
        | string & {}
        | PerimeterFunction
        | PerimeterValue;
    perimeterSpacing?: number;
    pointerEvents?: boolean;
    portConstraint?: DIRECTION;
    portConstraintRotation?: boolean;
    resizable?: boolean;
    resizeHeight?: boolean;
    resizeWidth?: boolean;
    rotatable?: boolean;
    rotation?: number;
    rounded?: boolean;
    routingCenterX?: number;
    routingCenterY?: number;
    segment?: number;
    separatorColor?: string;
    shadow?: boolean;
    shape?: StyleShapeValue;
    sourceJettySize?: number | "auto";
    sourcePerimeterSpacing?: number;
    sourcePort?: string;
    sourcePortConstraint?: DIRECTION;
    spacing?: number;
    spacingBottom?: number;
    spacingLeft?: number;
    spacingRight?: number;
    spacingTop?: number;
    startArrow?: StyleArrowValue;
    startFill?: boolean;
    startFillColor?: string;
    startSize?: number;
    startStrokeColor?: string;
    strokeColor?: SpecialStyleColorValue;
    strokeOpacity?: number;
    strokeWidth?: number;
    swimlaneFillColor?: string;
    swimlaneLine?: boolean;
    targetJettySize?: number | "auto";
    targetPerimeterSpacing?: number;
    targetPort?: string;
    targetPortConstraint?: DIRECTION;
    textDirection?: TextDirectionValue;
    textOpacity?: number;
    verticalAlign?: VAlignValue;
    verticalLabelPosition?: VAlignValue;
    whiteSpace?: WhiteSpaceValue;
}
Returns a CellStateStyle computed by merging the default style, styles referenced in the specified baseStyleNames and the properties of the cellStyle parameter.

The properties are merged by taking the properties from various styles in the following order:
- default style (if CellStyle.ignoreDefaultStyle is not set to true, otherwise it is ignored)
- registered styles referenced in baseStyleNames, in the order of the array
- cellStyle parameter
To fully unset a style property i.e. the property is not set even if a value is set in the default style or in the referenced styles, set the cellStyle property to none. For example. cellStyle.fillColor = 'none'
Parameters
- cellStyle: CellStyle
  An object that represents the style.
- defaultStyle: CellStateStyle
  Default style used as reference to compute the returned style.
Returns {
    absoluteArcSize?: boolean;
    align?: AlignValue;
    anchorPointDirection?: boolean;
    arcSize?: number;
    aspect?: string;
    autoSize?: boolean;
    backgroundOutline?: boolean;
    bendable?: boolean;
    cloneable?: boolean;
    curved?: boolean;
    dashed?: boolean;
    dashPattern?: string;
    deletable?: boolean;
    direction?: DirectionValue;
    edgeStyle?: string;
    editable?: boolean;
    elbow?: string;
    endArrow?: StyleArrowValue;
    endFill?: boolean;
    endFillColor?: string;
    endSize?: number;
    endStrokeColor?: string;
    entryDx?: number;
    entryDy?: number;
    entryPerimeter?: boolean;
    entryX?: number;
    entryY?: number;
    exitDx?: number;
    exitDy?: number;
    exitPerimeter?: boolean;
    exitX?: number;
    exitY?: number;
    fillColor?: SpecialStyleColorValue;
    fillOpacity?: number;
    fixDash?: boolean;
    flipH?: boolean;
    flipV?: boolean;
    foldable?: boolean;
    fontColor?: SpecialStyleColorValue;
    fontFamily?: string;
    fontSize?: number;
    fontStyle?: number;
    glass?: boolean;
    gradientColor?: SpecialStyleColorValue;
    gradientDirection?: DirectionValue;
    horizontal?: boolean;
    image?: string;
    imageAlign?: AlignValue;
    imageAspect?: boolean;
    imageBackground?: string;
    imageBorder?: string;
    imageHeight?: number;
    imageWidth?: number;
    indicatorColor?: string;
    indicatorDirection?: DirectionValue;
    indicatorHeight?: number;
    indicatorImage?: string;
    indicatorShape?: StyleShapeValue;
    indicatorStrokeColor?: string;
    indicatorWidth?: number;
    jettySize?: number | "auto";
    labelBackgroundColor?: string;
    labelBorderColor?: string;
    labelPadding?: number;
    labelPosition?: AlignValue | "ignore";
    labelWidth?: number;
    loopStyle?: EdgeStyleFunction;
    margin?: number;
    movable?: boolean;
    noEdgeStyle?: boolean;
    noLabel?: boolean;
    opacity?: number;
    orthogonal?: null | boolean;
    orthogonalLoop?: boolean;
    overflow?: OverflowValue;
    perimeter?:
        | null
        | string & {}
        | PerimeterFunction
        | PerimeterValue;
    perimeterSpacing?: number;
    pointerEvents?: boolean;
    portConstraint?: DIRECTION;
    portConstraintRotation?: boolean;
    resizable?: boolean;
    resizeHeight?: boolean;
    resizeWidth?: boolean;
    rotatable?: boolean;
    rotation?: number;
    rounded?: boolean;
    routingCenterX?: number;
    routingCenterY?: number;
    segment?: number;
    separatorColor?: string;
    shadow?: boolean;
    shape?: StyleShapeValue;
    sourceJettySize?: number | "auto";
    sourcePerimeterSpacing?: number;
    sourcePort?: string;
    sourcePortConstraint?: DIRECTION;
    spacing?: number;
    spacingBottom?: number;
    spacingLeft?: number;
    spacingRight?: number;
    spacingTop?: number;
    startArrow?: StyleArrowValue;
    startFill?: boolean;
    startFillColor?: string;
    startSize?: number;
    startStrokeColor?: string;
    strokeColor?: SpecialStyleColorValue;
    strokeOpacity?: number;
    strokeWidth?: number;
    swimlaneFillColor?: string;
    swimlaneLine?: boolean;
    targetJettySize?: number | "auto";
    targetPerimeterSpacing?: number;
    targetPort?: string;
    targetPortConstraint?: DIRECTION;
    textDirection?: TextDirectionValue;
    textOpacity?: number;
    verticalAlign?: VAlignValue;
    verticalLabelPosition?: VAlignValue;
    whiteSpace?: WhiteSpaceValue;
}
- OptionalabsoluteArcSize?: boolean
  This specifies if arcSize for rectangles is absolute or relative.
  Default
```
false
```
- Optionalalign?: AlignValue
  This 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.
  Default
```
'center'
```
- OptionalanchorPointDirection?: boolean
  This 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.
  Default
```
true
```
- OptionalarcSize?: number
  For 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:
  - Rectangle
  - Rhombus
  - Swimlane
  - Triangle
  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.
- Optionalaspect?: string
  The possible values are empty or fixed. If fixed is used, the aspect ratio of the cell will be maintained when resizing.
  Default
```
'empty'
```
- OptionalautoSize?: boolean
  This specifies if a cell should be resized automatically if its value changed. See Graph.isAutoSizeCell. This is normally combined with resizable to disable manual resizing.
  Default
```
false
```
- OptionalbackgroundOutline?: boolean
  This specifies if only the background of a cell should be painted when it is highlighted.
  Default
```
false
```
- Optionalbendable?: boolean
  This specifies if the control points of an edge can be moved. See Graph.isCellBendable.
  Default
```
true
```
- Optionalcloneable?: boolean
  This specifies if a cell can be cloned. See Graph.isCellCloneable.
  Default
```
true
```
- Optionalcurved?: boolean
  It is only applicable for connector shapes.
  Default
```
false
```
- Optionaldashed?: boolean
  See also dashPattern and fixDash.
  Default
```
false
```
- OptionaldashPattern?: string
  The 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.
  
  See also dashed and fixDash.
- Optionaldeletable?: boolean
  This specifies if a cell can be deleted. See Graph.isCellDeletable.
  Default
```
true
```
- Optionaldirection?: DirectionValue
  The direction style is used to specify the direction of certain shapes (eg. Swimlane).
  Default
```
'east'
```
- OptionaledgeStyle?: string
  This defines the style of the edge if the current cell is an Edge.
  
  The possible values for the style provided out-of-the box by maxGraph are defined in EDGESTYLE.
  
  See noEdgeStyle.
- Optionaleditable?: boolean
  This specifies if the value of a cell can be edited using the in-place editor. See Graph.isCellEditable.
  Default
```
true
```
- Optionalelbow?: string
  This 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'.
  Default
```
'horizontal'
```
- OptionalendArrow?: StyleArrowValue
  This 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.
- OptionalendFill?: boolean
  Use false to not fill or true to fill the end arrow marker. See startFill.
  Default
```
true
```
- OptionalendFillColor?: string
  Set the fill color of the end arrow marker if endFill is true. If not set, use strokeColor.
  
  Since
  0.10.0
- OptionalendSize?: number
  The value represents the size of the end marker in pixels. See startSize.
- OptionalendStrokeColor?: string
  Set the stroke color of the end arrow marker. If not set, use strokeColor.
  
  Since
  0.10.0
- OptionalentryDx?: number
  The horizontal offset of the connection point of an edge with its target terminal.
- OptionalentryDy?: number
  The vertical offset of the connection point of an edge with its target terminal.
- OptionalentryPerimeter?: boolean
  Defines if the perimeter should be used to find the exact entry point along the perimeter of the target.
  Default
```
true
```
- OptionalentryX?: number
  The connection point in relative horizontal coordinates of an edge with its target terminal.
- OptionalentryY?: number
  The connection point in relative vertical coordinates of an edge with its target terminal.
- OptionalexitDx?: number
  The horizontal offset of the connection point of an edge with its source terminal.
- OptionalexitDy?: number
  The vertical offset of the connection point of an edge with its source terminal.
- OptionalexitPerimeter?: boolean
  Defines if the perimeter should be used to find the exact entry point along the perimeter of the source.
  Default
```
true
```
- OptionalexitX?: number
  The horizontal relative coordinate connection point of an edge with its source terminal.
- OptionalexitY?: number
  The vertical relative coordinate connection point of an edge with its source terminal.
- OptionalfillColor?: SpecialStyleColorValue
  The 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 shape
  - inherit to use the color of the direct parent cell
  - none for no color
  - swimlane to use the color of the parent swimlane if one exists in the parent hierarchy
- OptionalfillOpacity?: number
  Possible range is 0-100.
- OptionalfixDash?: boolean
  Use 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.
  Default
```
false
```
- OptionalflipH?: boolean
  Horizontal flip.
  Default
```
false
```
- OptionalflipV?: boolean
  Vertical flip.
  Default
```
false
```
- Optionalfoldable?: boolean
  This specifies if a cell is foldable using a folding icon. See Graph.isCellFoldable.
  Default
```
true
```
- OptionalfontColor?: SpecialStyleColorValue
  The 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 shape
  - inherit to use the color of the direct parent cell
  - none for no color
  - swimlane to use the color of the parent swimlane if one exists in the parent hierarchy
- OptionalfontFamily?: string
  The possible values are names such as Arial; Dialog; Verdana; Times New Roman.
- OptionalfontSize?: number
  The size of the font (in px).
- OptionalfontStyle?: number
  Values may be any logical AND (sum) of the FONT. For instance, FONT.BOLD, FONT.ITALIC, ...
- Optionalglass?: boolean
  Enable the glass gradient effect
  Default
```
false
```
- OptionalgradientColor?: SpecialStyleColorValue
  The 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 shape
  - inherit to use the color of the direct parent cell
  - none for no color
  - swimlane to use the color of the parent swimlane if one exists in the parent hierarchy
- OptionalgradientDirection?: DirectionValue
  Generally, 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.
  Default
```
'south'
```
- Optionalhorizontal?: boolean
  This 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.
  Default
```
true
```
- Optionalimage?: string
  The 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).
- OptionalimageAlign?: AlignValue
  The value defines how any image in the vertex label is horizontally aligned within the label bounds of a LabelShape.
  Default
```
'left'
```
- OptionalimageAspect?: boolean
  The possible values are:
  - false: do not preserve aspect of the image
  - true: keep aspect of the image
  This is only used in ImageShape.
  Default
```
true
```
- OptionalimageBackground?: string
  The possible values for the image background are all HTML color names or HEX codes.
  
  This is only used in ImageShape.
  Default
```
'none'
```
- OptionalimageBorder?: string
  The possible values for the color of the image border are all HTML color names or HEX codes.
  
  This is only used in ImageShape.
  Default
```
'none'
```
- OptionalimageHeight?: number
  The value is the image height in pixels and must be greater than 0.
  Default
```
constants.DEFAULT_IMAGESIZE
```
- OptionalimageWidth?: number
  The value is the image width in pixels and must be greater than 0.
  Default
```
constants.DEFAULT_IMAGESIZE
```
- OptionalindicatorColor?: string
  The 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.
- OptionalindicatorDirection?: DirectionValue
  The direction style is used to specify the direction of certain shapes (eg. TriangleShape).
  Default
```
'east'
```
- OptionalindicatorHeight?: number
  The possible values start at 0 (in pixels).
- OptionalindicatorImage?: string
  Indicator image used within a LabelShape. The possible values are all image URLs.
  
  The indicatorShape has precedence over the indicatorImage.
- OptionalindicatorShape?: StyleShapeValue
  The 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.
- OptionalindicatorStrokeColor?: string
  The color of the indicator stroke in LabelShape. The possible values are all HTML color names or HEX codes.
- OptionalindicatorWidth?: number
  The possible values start at 0 (in pixels).
- OptionaljettySize?: number | "auto"
  The jetty size in EdgeStyle.OrthConnector.
  Default
```
10
```
- OptionallabelBackgroundColor?: string
  The possible values are all HTML color names or HEX codes.
- OptionallabelBorderColor?: string
  The possible values are all HTML color names or HEX codes.
- OptionallabelPadding?: number
  The label padding, i.e. the space between the label border and the label.
- OptionallabelPosition?: 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 alignment
  Note 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
  Default
```
'center'
```
- OptionallabelWidth?: number
  The width of the label if the label position is not center.
- OptionalloopStyle?: EdgeStyleFunction
  The possible values are the functions defined in EdgeStyle.
  
  See edgeStyle.
- Optionalmargin?: number
  The margin between the ellipses in DoubleEllipseShape.
  
  The possible values are all positive numbers.
- Optionalmovable?: boolean
  This specifies if a cell can be moved.
  
  See Graph.isCellMovable.
  Default
```
true
```
- OptionalnoEdgeStyle?: boolean
  If this is true, no edge style is applied for a given edge. See edgeStyle.
  Default
```
false
```
- OptionalnoLabel?: boolean
  If this is true, no label is visible for a given cell.
  Default
```
false
```
- Optionalopacity?: number
  The possible range is 0-100.
- Optionalorthogonal?: null | boolean
  Defines 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.
  Default
```
false
```
- OptionalorthogonalLoop?: boolean
  Use 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.
  Default
```
false
```
- Optionaloverflow?: OverflowValue
  This value specifies how overlapping vertex labels are handled.
  - A value of 'visible' will show the complete label.
  - A value of 'hidden' will clip the label so that it does not overlap the vertex bounds.
  - A value of 'fill' will use the vertex bounds.
  - A value of 'width' will use the vertex width for the label.
  See Graph.isLabelClipped.
  
  Note that the vertical alignment is ignored for overflow filling and for horizontal alignment.
  Default
```
'visible'
```
- Optionalperimeter?:
      | null
      | string & {}
      | PerimeterFunction
      | PerimeterValue
  This 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.
- OptionalperimeterSpacing?: number
  This is the distance between the connection point and the perimeter in pixels.
  - When used in a vertex style, this applies to all incoming edges to floating ports (edges that terminate on the perimeter of the vertex).
  - When used in an edge style, this spacing applies to the source and target separately, if they terminate in floating ports (on the perimeter of the vertex).
- OptionalpointerEvents?: boolean
  Specifies 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.
  Default
```
true
```
- OptionalportConstraint?: DIRECTION
  Defines the direction(s) in which edges are allowed to connect to cells.
- OptionalportConstraintRotation?: boolean
  Define 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.
  Default
```
false
```
- Optionalresizable?: boolean
  This specifies if a cell can be resized.
  
  See Graph.isCellResizable.
  Default
```
true
```
- OptionalresizeHeight?: boolean
  This specifies if the height of a cell is resized if the parent is resized.
  - If true, then the height will be resized even if the cell geometry is relative.
  - If false, then the height will not be resized.
  Default
```
false
```
- OptionalresizeWidth?: boolean
  This specifies if the width of a cell is resized if the parent is resized.
  - If true, then the width will be resized even if the cell geometry is relative.
  - If false, then the width will not be resized.
  Default
```
false
```
- Optionalrotatable?: boolean
  This specifies if a cell can be rotated.
  Default
```
true
```
- Optionalrotation?: number
  The possible range is 0-360.
  Default
```
0
```
- Optionalrounded?: boolean
  For 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.
  Default
```
false
```
- OptionalroutingCenterX?: number
  This is the relative offset from the center used to connect the edges.
  
  The possible values are between -0.5 and 0.5.
  Default
```
0
```
- OptionalroutingCenterY?: number
  This is the relative offset from the center used to connect the edges.
  
  The possible values are between -0.5 and 0.5.
  Default
```
0
```
- Optionalsegment?: number
  The type of this value is float and the value represents the size of the horizontal segment of the entity relation style.
  Default
```
constants.ENTITY_SEGMENT
```
- OptionalseparatorColor?: string
  The possible values are all HTML color names or HEX codes. This style is only used for swimlane shapes.
- Optionalshadow?: boolean
  Add a shadow when painting the shape.
  Default
```
false
```
- Optionalshape?: StyleShapeValue
  The possible values are all names of the shapes registered with CellRenderer.registerShape. This includes ShapeValue values and custom names that have been registered.
- OptionalsourceJettySize?: number | "auto"
  The size of the source jetty in EdgeStyle.OrthConnector.
  
  This value takes precedence over jettySize.
  
  Default
  jettySize
- OptionalsourcePerimeterSpacing?: number
  This 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.
  Default
```
0
```
- OptionalsourcePort?: string
  Defines 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.
- OptionalsourcePortConstraint?: DIRECTION
  Defines the direction(s) in which edges are allowed to connect to sources.
- Optionalspacing?: number
  The value represents the spacing, in pixels, added to each side of a label in a vertex.
  
  This style only applies to vertices.
  Default
```
0
```
- OptionalspacingBottom?: number
  The 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.
  Default
```
0
```
- OptionalspacingLeft?: number
  The 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.
  Default
```
0
```
- OptionalspacingRight?: number
  The 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.
  Default
```
0
```
- OptionalspacingTop?: number
  The 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.
  Default
```
0
```
- OptionalstartArrow?: StyleArrowValue
  This 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.
- OptionalstartFill?: boolean
  Use false to not fill or true to fill the start arrow marker. See endFill.
  Default
```
true
```
- OptionalstartFillColor?: string
  Set the fill color of the start arrow marker if startFill is true. If not set, use startStrokeColor.
  
  Since
  0.10.0
- OptionalstartSize?: number
  The 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.
- OptionalstartStrokeColor?: string
  Set the stroke color of the start arrow marker. If not set, use strokeColor.
  
  Since
  0.10.0
- OptionalstrokeColor?: SpecialStyleColorValue
  The 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 shape
  - inherit to use the color of the direct parent cell
  - none for no color
  - swimlane to use the color of the parent swimlane if one exists in the parent hierarchy
- OptionalstrokeOpacity?: number
  The possible range is 0-100.
- OptionalstrokeWidth?: number
  The 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.
- OptionalswimlaneFillColor?: string
  The fill color of the swimlane background. The possible values are all HTML color names or HEX codes.
  Default
```
no background
```
- OptionalswimlaneLine?: boolean
  This style specifies whether the line between the title region of a swimlane should be visible. Use false for hidden or true for visible.
  Default
```
true
```
- OptionaltargetJettySize?: number | "auto"
  The size of the target jetty in EdgeStyle.OrthConnector.
  
  This value takes precedence over jettySize.
  
  Default
  jettySize
- OptionaltargetPerimeterSpacing?: number
  This 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.
  Default
```
0
```
- OptionaltargetPort?: string
  Defines 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.
- OptionaltargetPortConstraint?: DIRECTION
  Defines the direction(s) in which edges are allowed to connect to sources.
- OptionaltextDirection?: TextDirectionValue
  Default
```
constants.DEFAULT_TEXT_DIRECTION
```
- OptionaltextOpacity?: number
  The possible range is 0-100.
- OptionalverticalAlign?: VAlignValue
  This 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.
  Default
```
'middle'
```
- OptionalverticalLabelPosition?: VAlignValue
  The label alignment defines the position of the label relative to the cell.
  - 'top' means that the entire label bounds are placed completely just on the top of the vertex.
  - 'bottom' means that the label bounds are adjusted on the bottom of the vertex.
  - 'middle' means that the label bounds are horizontally aligned with the bounds of the vertex.
  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.
  Default
```
'middle'
```
- OptionalwhiteSpace?: WhiteSpaceValue
  This value specifies how white-space inside an HTML vertex label should be handled.
  - A 'nowrap' value means that the text will never wrap to the next line until a line break is encountered.
  - A 'wrap' value means that the text will wrap if necessary.
  This style is only used for HTML labels.
  Default
```
'nowrap'
```
- Defined in view/style/Stylesheet.ts:173

getDefaultEdgeStyle

getDefaultEdgeStyle(): CellStateStyle
Returns the default style for edges.

Returns CellStateStyle
- Defined in view/style/Stylesheet.ts:119

getDefaultVertexStyle

getDefaultVertexStyle(): CellStateStyle
Returns the default style for vertices.

Returns CellStateStyle
- Defined in view/style/Stylesheet.ts:111

putCellStyle

putCellStyle(name, style): void
Stores the given CellStateStyle under the given name in styles.

Example
The following example adds a new style called rounded into an existing stylesheet:
```
const style = {} as CellStateStyle;
style.shape = SHAPE.RECTANGLE;
style.perimeter = PERIMETER.RECTANGLE;
style.rounded = true;
graph.getStylesheet().putCellStyle('rounded', style);
```
Description
Note that not all properties will be interpreted by all shapes. For example, the 'line' shape ignores the fill color. The final call to this method associates the style with a name in the stylesheet.

The style is used in a cell with the following code:
```
// model is an instance of GraphDataModel
// style is an instance of CellStyle
model.setStyle(cell, { baseStyleNames: ['rounded'] });
```
Parameters
- name: string
  Name for the style to be stored.
- style: CellStateStyle
  The instance of the style to be stored.
Returns void
- Defined in view/style/Stylesheet.ts:154

putDefaultEdgeStyle

putDefaultEdgeStyle(style): void
Sets the default style for edges using defaultEdge as the style name.
Parameters
- style: CellStateStyle
  The style to be stored.
Returns void
- Defined in view/style/Stylesheet.ts:104

putDefaultVertexStyle

putDefaultVertexStyle(style): void
Sets the default style for vertices using defaultVertex as the style name.
Parameters
- style: CellStateStyle
  The style to be stored.
Returns void
- Defined in view/style/Stylesheet.ts:96

Class Stylesheet

Default Styles

Example

Index

Constructors

Properties

Methods

Constructors

constructor

Returns Stylesheet

Properties

styles

Methods

createDefaultEdgeStyle

Returns CellStateStyle

createDefaultVertexStyle

Returns CellStateStyle

getCellStyle

Parameters

OptionalabsoluteArcSize?: boolean

Default

Optionalalign?: AlignValue

Default

OptionalanchorPointDirection?: boolean

Default

OptionalarcSize?: number

Optionalaspect?: string

Default

OptionalautoSize?: boolean

Default

OptionalbackgroundOutline?: boolean

Default

Optionalbendable?: boolean

Default

Optionalcloneable?: boolean

Default

Optionalcurved?: boolean

Default

Optionaldashed?: boolean

Default

OptionaldashPattern?: string

Optionaldeletable?: boolean

Default

Optionaldirection?: DirectionValue

Default

OptionaledgeStyle?: string

Optionaleditable?: boolean

Default

Optionalelbow?: string

Default

OptionalendArrow?: StyleArrowValue

OptionalendFill?: boolean

Default

OptionalendFillColor?: string

Since

OptionalendSize?: number

OptionalendStrokeColor?: string

Since

OptionalentryDx?: number

OptionalentryDy?: number

OptionalentryPerimeter?: boolean

Default

OptionalentryX?: number

OptionalentryY?: number

OptionalexitDx?: number

OptionalexitDy?: number

OptionalexitPerimeter?: boolean

Default

OptionalexitX?: number

OptionalexitY?: number

OptionalfillColor?: SpecialStyleColorValue

OptionalfillOpacity?: number

OptionalfixDash?: boolean

Default

OptionalflipH?: boolean

Default

OptionalflipV?: boolean

Default

Optionalfoldable?: boolean

Default

`Optional`absoluteArcSize?: boolean

`Optional`align?: AlignValue

`Optional`anchorPointDirection?: boolean

`Optional`arcSize?: number

`Optional`aspect?: string

`Optional`autoSize?: boolean

`Optional`backgroundOutline?: boolean

`Optional`bendable?: boolean

`Optional`cloneable?: boolean

`Optional`curved?: boolean

`Optional`dashed?: boolean

`Optional`dashPattern?: string

`Optional`deletable?: boolean

`Optional`direction?: DirectionValue

`Optional`edgeStyle?: string

`Optional`editable?: boolean

`Optional`elbow?: string

`Optional`endArrow?: StyleArrowValue

`Optional`endFill?: boolean

`Optional`endFillColor?: string

`Optional`endSize?: number

`Optional`endStrokeColor?: string

`Optional`entryDx?: number

`Optional`entryDy?: number

`Optional`entryPerimeter?: boolean

`Optional`entryX?: number

`Optional`entryY?: number

`Optional`exitDx?: number

`Optional`exitDy?: number

`Optional`exitPerimeter?: boolean

`Optional`exitX?: number

`Optional`exitY?: number

`Optional`fillColor?: SpecialStyleColorValue

`Optional`fillOpacity?: number

`Optional`fixDash?: boolean

`Optional`flipH?: boolean

`Optional`flipV?: boolean

`Optional`foldable?: boolean

`Optional`fontColor?: SpecialStyleColorValue

`Optional`fontFamily?: string

`Optional`fontSize?: number

`Optional`fontStyle?: number

`Optional`glass?: boolean

`Optional`gradientColor?: SpecialStyleColorValue

`Optional`gradientDirection?: DirectionValue

`Optional`horizontal?: boolean

`Optional`image?: string

`Optional`imageAlign?: AlignValue

`Optional`imageAspect?: boolean

`Optional`imageBackground?: string

`Optional`imageBorder?: string

`Optional`imageHeight?: number

`Optional`imageWidth?: number

`Optional`indicatorColor?: string

`Optional`indicatorDirection?: DirectionValue

`Optional`indicatorHeight?: number

`Optional`indicatorImage?: string

`Optional`indicatorShape?: StyleShapeValue

`Optional`indicatorStrokeColor?: string

`Optional`indicatorWidth?: number

`Optional`jettySize?: number | "auto"

`Optional`labelBackgroundColor?: string

`Optional`labelBorderColor?: string

`Optional`labelPadding?: number

`Optional`labelPosition?: AlignValue | "ignore"

`Optional`labelWidth?: number

`Optional`loopStyle?: EdgeStyleFunction

`Optional`margin?: number

`Optional`movable?: boolean

`Optional`noEdgeStyle?: boolean

`Optional`noLabel?: boolean

`Optional`opacity?: number

`Optional`orthogonal?: null | boolean

`Optional`orthogonalLoop?: boolean

`Optional`overflow?: OverflowValue

`Optional`perimeter?:
| null
| string & {}
| PerimeterFunction
| PerimeterValue

`Optional`perimeterSpacing?: number

`Optional`pointerEvents?: boolean

`Optional`portConstraint?: DIRECTION

`Optional`portConstraintRotation?: boolean