Class CellRenderer

Renders cells into a document object model. The is a global map of shape names, constructor pairs that is used in all instances. You can get a list of all available shape names using the following code.

In general the cell renderer is in charge of creating, redrawing and destroying the shape and label associated with a cell state, as well as some other graphical objects, namely controls and overlays. The shape hierarchy in the display (i.e. the hierarchy in which the DOM nodes appear in the document) does not reflect the cell hierarchy. The shapes are a (flat) sequence of shapes and labels inside the draw pane of the graph view, with some exceptions, namely the HTML labels being placed directly inside the graph container for certain browsers.

Constructors

constructor

new CellRenderer(): CellRenderer
Returns CellRenderer

Properties

antiAlias

antiAlias: boolean = true

Antialiasing option for new shapes.

Default

true.

defaultEdgeShape

defaultEdgeShape: typeof Shape = ConnectorShape

Defines the default shape for edges.

Default

ConnectorShape

defaultTextShape

defaultTextShape: typeof TextShape = TextShape

Defines the default shape for labels.

Default

TextShape.

defaultVertexShape

defaultVertexShape: typeof RectangleShape = RectangleShape

Defines the default shape for vertices.

Default

RectangleShape.

forceControlClickHandler

forceControlClickHandler: boolean = false

Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).

Default

false.

legacyControlPosition

legacyControlPosition: boolean = true

Specifies if the folding icon should ignore the horizontal orientation of a swimlane.

Default

true.

legacySpacing

legacySpacing: boolean = true

Specifies if spacing and label position should be ignored if overflow is fill or width.

Default

true for backwards compatibility.

minSvgStrokeWidth

minSvgStrokeWidth: number = 1

Minimum stroke width for SVG output.

`Static`defaultShapes

defaultShapes: { [key: string]: typeof Shape } = {}

Static array that contains the globally registered shapes which are known to all instances of this class. For adding new shapes you should use the static CellRenderer#registerShape function.

Built-in shapes: arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.

Methods

checkPlaceholderStyles

checkPlaceholderStyles(state: CellState): boolean
Check if style properties supporting placeholders requires resolution.
Parameters
- state: CellState
Returns boolean
- Defined in view/cell/CellRenderer.ts:250

configureShape

configureShape(state: CellState): void
Configures the shape for the given cell state.
Parameters
- state: CellState
  CellState for which the shape should be configured.
Returns void
- Defined in view/cell/CellRenderer.ts:214

createCellOverlays

createCellOverlays(state: CellState): void
Creates the actual shape for showing the overlay for the given cell state.
Parameters
- state: CellState
  CellState for which the overlay should be created.
Returns void
- Defined in view/cell/CellRenderer.ts:462

createControl

createControl(state: CellState): void
Creates the control for the given cell state.
Parameters
- state: CellState
  CellState for which the control should be created.
Returns void
- Defined in view/cell/CellRenderer.ts:553

createControlClickHandler

createControlClickHandler(state: CellState): (evt: Event) => void
Hook for creating the click handler for the folding icon.
Parameters
- state: CellState
  CellState whose control click handler should be returned.
Returns (evt: Event) => void
- Defined in view/cell/CellRenderer.ts:582

createIndicatorShape

createIndicatorShape(state: CellState): void
Creates the indicator shape for the given cell state.
Parameters
- state: CellState
  CellState for which the indicator shape should be created.
Returns void
- Defined in view/cell/CellRenderer.ts:182

createLabel

createLabel(state: CellState, value: string): void
Creates the label for the given cell state.
Parameters
- state: CellState
  CellState for which the label should be created.
- value: string
  the label value.
Returns void
- Defined in view/cell/CellRenderer.ts:336

createShape

createShape(state: CellState): Shape
Creates and returns the shape for the given cell state.
Parameters
- state: CellState
  CellState for which the shape should be created.
Returns Shape
- Defined in view/cell/CellRenderer.ts:167

destroy

destroy(state: CellState): void
Destroys the shapes associated with the given cell state.
Parameters
- state: CellState
  CellState for which the shapes should be destroyed.
Returns void
- Defined in view/cell/CellRenderer.ts:1468

doRedrawShape

doRedrawShape(state: CellState): void
Invokes redraw on the shape of the given state.
Parameters
- state: CellState
Returns void
- Defined in view/cell/CellRenderer.ts:1446

getControlBounds

getControlBounds(state: CellState, w: number, h: number): null | Rectangle
Returns the bounds to be used to draw the control (folding icon) of the given state.
Parameters
- state: CellState
- w: number
- h: number
Returns null | Rectangle
- Defined in view/cell/CellRenderer.ts:1166

getLabelBounds

getLabelBounds(state: CellState): Rectangle
Returns the bounds to be used to draw the label of the given state.
Parameters
- state: CellState
  CellState whose label bounds should be returned.
Returns Rectangle
- Defined in view/cell/CellRenderer.ts:943

getLabelValue

getLabelValue(state: CellState): null | string
Returns the value to be used for the label.
Parameters
- state: CellState
  CellState for which the label should be created.
Returns null | string
- Defined in view/cell/CellRenderer.ts:325

getShape

getShape(name: null | string): null | typeof Shape
Returns the shape for the given name from defaultShapes.
Parameters
- name: null | string
Returns null | typeof Shape
- Defined in view/cell/CellRenderer.ts:191

getShapeConstructor

getShapeConstructor(state: CellState): typeof Shape
Returns the constructor to be used for creating the shape.
Parameters
- state: CellState
Returns typeof Shape
- Defined in view/cell/CellRenderer.ts:198

getShapesForState

getShapesForState(
state: CellState,
): [null | Shape, null | TextShape, null | Shape]
Returns the Shapes for the given cell state in the order in which they should appear in the DOM.
Parameters
- state: CellState
  CellState whose shapes should be returned.
Returns [null | Shape, null | TextShape, null | Shape]
- Defined in view/cell/CellRenderer.ts:1308

getTextScale

getTextScale(state: CellState): number
Returns the scaling used for the label of the given state
Parameters
- state: CellState
  CellState whose label scale should be returned.
Returns number
- Defined in view/cell/CellRenderer.ts:934

initControl

initControl(
    state: CellState,
    control: Shape,
    handleEvents: boolean,
    clickHandler: EventListener,
): null | Element
Initializes the given control and returns the corresponding DOM node.
Parameters
- state: CellState
  CellState for which the control should be initialized.
- control: Shape
  Shape to be initialized.
- handleEvents: boolean
  Boolean indicating if mousedown and mousemove should fire events via the graph.
- clickHandler: EventListener
  Optional function to implement clicks on the control.
Returns null | Element
- Defined in view/cell/CellRenderer.ts:602

initializeLabel

initializeLabel(state: CellState, shape: Shape): void
Initializes the label with a suitable container.
Parameters
- state: CellState
  CellState whose label should be initialized.
- shape: Shape
  Shape that represents the label.
Returns void
- Defined in view/cell/CellRenderer.ts:448

initializeOverlay

initializeOverlay(state: CellState, overlay: Shape): void
Initializes the given overlay.
Parameters
- state: CellState
  CellState for which the overlay should be created.
- overlay: Shape
  Shape that represents the overlay.
Returns void
- Defined in view/cell/CellRenderer.ts:502

initializeShape

initializeShape(state: CellState): void
Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
Parameters
- state: CellState
  CellState for which the shape should be initialized.
Returns void
- Defined in view/cell/CellRenderer.ts:154

insertStateAfter

insertStateAfter(
    state: CellState,
    node: null | HTMLElement | SVGElement,
    htmlNode: null | HTMLElement | SVGElement,
): (null | HTMLElement | SVGElement)[]
Inserts the given CellState after the given nodes in the DOM.
Parameters
- state: CellState
  CellState to be inserted.
- node: null | HTMLElement | SVGElement
  Node in GraphView.drawPane after which the shapes should be inserted.
- htmlNode: null | HTMLElement | SVGElement
  Node in the graph container after which the shapes should be inserted that will not go into the GraphView.drawPane (e.g. HTML labels without foreignObjects).
Returns (null | HTMLElement | SVGElement)[]
- Defined in view/cell/CellRenderer.ts:1231

installCellOverlayListeners

installCellOverlayListeners(
    state: CellState,
    overlay: CellOverlay,
    shape: Shape,
): void
Installs the listeners for the given CellState , CellOverlay and Shape that represents the overlay.
Parameters
- state: CellState
- overlay: CellOverlay
- shape: Shape
Returns void
- Defined in view/cell/CellRenderer.ts:509

installListeners

installListeners(state: CellState): void
Installs the event listeners for the given cell state.
Parameters
- state: CellState
  CellState for which the event listeners should be isntalled.
Returns void
- Defined in view/cell/CellRenderer.ts:717

isLabelEvent

isLabelEvent(state: CellState, evt: MouseEvent): boolean
Returns true if the event is for the label of the given state.

This implementation always returns true.
Parameters
- state: CellState
  CellState whose label fired the event.
- evt: MouseEvent
  Mouse event which was fired.
Returns boolean
- Defined in view/cell/CellRenderer.ts:708

isShapeEvent

isShapeEvent(state: CellState, evt: MouseEvent): boolean
Returns true if the event is for the shape of the given state.

This implementation always returns true.
Parameters
- state: CellState
  CellState whose shape fired the event.
- evt: MouseEvent
  Mouse event which was fired.
Returns boolean
- Defined in view/cell/CellRenderer.ts:696

isShapeInvalid

isShapeInvalid(state: CellState, shape: Shape): boolean
Returns true if the given shape must be repainted.
Parameters
- state: CellState
- shape: Shape
Returns boolean
- Defined in view/cell/CellRenderer.ts:1453

isTextShapeInvalid

isTextShapeInvalid(state: CellState, shape: TextShape): boolean
Returns true if the style for the text shape has changed.
Parameters
- state: CellState
  CellState whose label should be checked.
- shape: TextShape
  Text shape to be checked.
Returns boolean
- Defined in view/cell/CellRenderer.ts:877

postConfigureShape

postConfigureShape(state: CellState): void
Replaces any reserved words used for attributes, eg. inherit, indicated or swimlane for colors in the shape for the given state. This implementation resolves these keywords on the fill, stroke and gradient color keys.
Parameters
- state: CellState
Returns void
- Defined in view/cell/CellRenderer.ts:237

redraw

redraw(state: CellState, force?: boolean, rendering?: boolean): void
Updates the bounds or points and scale of the shapes for the given cell state. This is called in mxGraphView.validatePoints as the last step of updating all cells.
Parameters
- state: CellState
  CellState for which the shapes should be updated.
- force: boolean = false
  Optional boolean that specifies if the cell should be reconfiured and redrawn without any additional checks.
- rendering: boolean = true
  Optional boolean that specifies if the cell should actually be drawn into the DOM. If this is false then redraw and/or reconfigure will not be called on the shape.
Returns void
- Defined in view/cell/CellRenderer.ts:1324

redrawCellOverlays

redrawCellOverlays(state: CellState, forced?: boolean): void
Redraws the overlays for the given cell state.
Parameters
- state: CellState
  CellState whose overlays should be redrawn.
- forced: boolean = false
Returns void
- Defined in view/cell/CellRenderer.ts:1086

redrawControl

redrawControl(state: CellState, forced?: boolean): void
Redraws the control for the given cell state.
Parameters
- state: CellState
  CellState whose control should be redrawn.
- forced: boolean = false
Returns void
- Defined in view/cell/CellRenderer.ts:1137

redrawLabel

redrawLabel(state: CellState, forced: boolean): void
Redraws the label for the given cell state.
Parameters
- state: CellState
  CellState whose label should be redrawn.
- forced: boolean
Returns void
- Defined in view/cell/CellRenderer.ts:794

redrawLabelShape

redrawLabelShape(shape: TextShape): void
Called to invoked redraw on the given text shape.
Parameters
- shape: TextShape
  Text shape to be redrawn.
Returns void
- Defined in view/cell/CellRenderer.ts:925

redrawShape

redrawShape(state: CellState, force?: boolean, rendering?: boolean): boolean
Redraws the shape for the given cell state.
Parameters
- state: CellState
  CellState whose label should be redrawn.
- force: boolean = false
- rendering: boolean = true
Returns boolean
- Defined in view/cell/CellRenderer.ts:1339

resolveColor

resolveColor(state: CellState, field: string, key: string): void
Resolves special keywords 'inherit', 'indicated' and 'swimlane' and sets the respective color on the shape.
Parameters
- state: CellState
- field: string
- key: string
Returns void
- Defined in view/cell/CellRenderer.ts:264

rotateLabelBounds

rotateLabelBounds(state: CellState, bounds: Rectangle): void
Adds the shape rotation to the given label bounds and applies the alignment and offsets.
Parameters
- state: CellState
  CellState whose label bounds should be rotated.
- bounds: Rectangle
  Rectangle the rectangle to be rotated.
Returns void
- Defined in view/cell/CellRenderer.ts:1018

`Static`registerShape

registerShape(key: string, shape: typeof Shape): void
Registers the given constructor under the specified key in this instance of the renderer.
Parameters
- key: string
  the shape name.
- shape: typeof Shape
  constructor of the Shape subclass.
Returns void
Example
```
CellRenderer.registerShape(Constants.SHAPE_RECTANGLE, RectangleShape);
```
- Defined in view/cell/CellRenderer.ts:144

Class CellRenderer

Index

Constructors

Properties

Methods

Constructors

constructor

Returns CellRenderer

Properties

antiAlias

Default

defaultEdgeShape

Default

defaultTextShape

Default

defaultVertexShape

Default

forceControlClickHandler

Default

legacyControlPosition

Default

legacySpacing

Default

minSvgStrokeWidth

StaticdefaultShapes

Methods

checkPlaceholderStyles

Parameters

Returns boolean

configureShape

Parameters

Returns void

createCellOverlays

Parameters

Returns void

createControl

Parameters

Returns void

createControlClickHandler

Parameters

Returns (evt: Event) => void

createIndicatorShape

Parameters

Returns void

createLabel

Parameters

Returns void

createShape

Parameters

Returns Shape

destroy

Parameters

Returns void

doRedrawShape

Parameters

Returns void

getControlBounds

Parameters

Returns null | Rectangle

getLabelBounds

Parameters

Returns Rectangle

getLabelValue

Parameters

Returns null | string

getShape

Parameters

Returns null | typeof Shape

getShapeConstructor

Parameters

Returns typeof Shape

getShapesForState

Parameters

Returns [null | Shape, null | TextShape, null | Shape]

getTextScale

Parameters

Returns number

initControl

Parameters

Returns null | Element

`Static`defaultShapes

`Static`registerShape