mxCellRenderer

Renders cells into a document object model.  The defaultShapes is a global map of shapename, 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 hieararchy in the display (ie. 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.

mxLog.show();
for (var i in mxCellRenderer.defaultShapes)
{
  mxLog.debug(i);
}
Summary
mxCellRendererRenders cells into a document object model.
Functions
mxCellRendererarrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.
Variables
defaultShapesStatic array that contains the globally registered shapes which are known to all instances of this class.
defaultEdgeShapeDefines the default shape for edges.
defaultVertexShapeDefines the default shape for vertices.
defaultTextShapeDefines the default shape for labels.
legacyControlPositionSpecifies if the folding icon should ignore the horizontal orientation of a swimlane.
legacySpacingSpecifies if spacing and label position should be ignored if overflow is fill or width.
antiAliasAnti-aliasing option for new shapes.
minSvgStrokeWidthMinimum stroke width for SVG output.
forceControlClickHandlerSpecifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).
Functions
registerShapeRegisters the given constructor under the specified key in this instance of the renderer.
initializeShapeInitializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
createShapeCreates and returns the shape for the given cell state.
createIndicatorShapeCreates the indicator shape for the given cell state.
getShapeReturns the shape for the given name from defaultShapes.
getShapeConstructorReturns the constructor to be used for creating the shape.
configureShapeConfigures the shape for the given cell state.
postConfigureShapeReplaces any reserved words used for attributes, eg.
checkPlaceholderStylesResolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
resolveColorResolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
getLabelValueReturns the value to be used for the label.
createLabelCreates the label for the given cell state.
initializeLabelInitiailzes the label with a suitable container.
createCellOverlaysCreates the actual shape for showing the overlay for the given cell state.
initializeOverlayInitializes the given overlay.
installOverlayListenersInstalls the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.
createControlCreates the control for the given cell state.
createControlClickHandlerHook for creating the click handler for the folding icon.
initControlInitializes the given control and returns the corresponding DOM node.
isShapeEventReturns true if the event is for the shape of the given state.
isLabelEventReturns true if the event is for the label of the given state.
installListenersInstalls the event listeners for the given cell state.
redrawLabelRedraws the label for the given cell state.
isTextShapeInvalidReturns true if the style for the text shape has changed.
redrawLabelShapeCalled to invoked redraw on the given text shape.
getTextScaleReturns the scaling used for the label of the given state
getLabelBoundsReturns the bounds to be used to draw the label of the given state.
rotateLabelBoundsAdds the shape rotation to the given label bounds and applies the alignment and offsets.
redrawCellOverlaysRedraws the overlays for the given cell state.
redrawControlRedraws the control for the given cell state.
getControlBoundsReturns the bounds to be used to draw the control (folding icon) of the given state.
insertStateAfterInserts the given array of mxShapes after the given nodes in the DOM.
getShapesForStateReturns the mxShapes for the given cell state in the order in which they should appear in the DOM.
redrawUpdates the bounds or points and scale of the shapes for the given cell state.
redrawShapeRedraws the shape for the given cell state.
doRedrawShapeInvokes redraw on the shape of the given state.
isShapeInvalidReturns true if the given shape must be repainted.
destroyDestroys the shapes associated with the given cell state.

Functions

mxCellRenderer

function mxCellRenderer()

Constructs a new cell renderer with the following built-in shapes

arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.

Variables

defaultShapes

mxCellRenderer.defaultShapes

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 mxCellRenderer.registerShape function.

defaultEdgeShape

mxCellRenderer.prototype.defaultEdgeShape

Defines the default shape for edges.  Default is mxConnector.

defaultVertexShape

mxCellRenderer.prototype.defaultVertexShape

Defines the default shape for vertices.  Default is mxRectangleShape.

defaultTextShape

mxCellRenderer.prototype.defaultTextShape

Defines the default shape for labels.  Default is mxText.

legacyControlPosition

mxCellRenderer.prototype.legacyControlPosition

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

legacySpacing

mxCellRenderer.prototype.legacySpacing

Specifies if spacing and label position should be ignored if overflow is fill or width.  Default is true for backwards compatiblity.

antiAlias

mxCellRenderer.prototype.antiAlias

Anti-aliasing option for new shapes.  Default is true.

minSvgStrokeWidth

mxCellRenderer.prototype.minSvgStrokeWidth

Minimum stroke width for SVG output.

forceControlClickHandler

mxCellRenderer.prototype.forceControlClickHandler

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

Functions

registerShape

mxCellRenderer.registerShape = function(key,
shape)

Registers the given constructor under the specified key in this instance of the renderer.

Example

mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);

Parameters

keyString representing the shape name.
shapeConstructor of the mxShape subclass.

initializeShape

mxCellRenderer.prototype.initializeShape = function(state)

Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.

Parameters

statemxCellState for which the shape should be initialized.

createShape

mxCellRenderer.prototype.createShape = function(state)

Creates and returns the shape for the given cell state.

Parameters

statemxCellState for which the shape should be created.

createIndicatorShape

mxCellRenderer.prototype.createIndicatorShape = function(state)

Creates the indicator shape for the given cell state.

Parameters

statemxCellState for which the indicator shape should be created.

getShape

mxCellRenderer.prototype.getShape = function(name)

Returns the shape for the given name from defaultShapes.

getShapeConstructor

mxCellRenderer.prototype.getShapeConstructor = function(state)

Returns the constructor to be used for creating the shape.

configureShape

mxCellRenderer.prototype.configureShape = function(state)

Configures the shape for the given cell state.

Parameters

statemxCellState for which the shape should be configured.

postConfigureShape

mxCellRenderer.prototype.postConfigureShape = function(state)

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.

checkPlaceholderStyles

mxCellRenderer.prototype.checkPlaceholderStyles = function(state)

Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.

resolveColor

mxCellRenderer.prototype.resolveColor = function(state,
field,
key)

Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.

getLabelValue

mxCellRenderer.prototype.getLabelValue = function(state)

Returns the value to be used for the label.

Parameters

statemxCellState for which the label should be created.

createLabel

mxCellRenderer.prototype.createLabel = function(state,
value)

Creates the label for the given cell state.

Parameters

statemxCellState for which the label should be created.

initializeLabel

mxCellRenderer.prototype.initializeLabel = function(state,
shape)

Initiailzes the label with a suitable container.

Parameters

statemxCellState whose label should be initialized.

createCellOverlays

mxCellRenderer.prototype.createCellOverlays = function(state)

Creates the actual shape for showing the overlay for the given cell state.

Parameters

statemxCellState for which the overlay should be created.

initializeOverlay

mxCellRenderer.prototype.initializeOverlay = function(state,
overlay)

Initializes the given overlay.

Parameters

statemxCellState for which the overlay should be created.
overlaymxImageShape that represents the overlay.

installOverlayListeners

Installs the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.

createControl

mxCellRenderer.prototype.createControl = function(state)

Creates the control for the given cell state.

Parameters

statemxCellState for which the control should be created.

createControlClickHandler

mxCellRenderer.prototype.createControlClickHandler = function(state)

Hook for creating the click handler for the folding icon.

Parameters

statemxCellState whose control click handler should be returned.

initControl

mxCellRenderer.prototype.initControl = function(state,
control,
handleEvents,
clickHandler)

Initializes the given control and returns the corresponding DOM node.

Parameters

statemxCellState for which the control should be initialized.
controlmxShape to be initialized.
handleEventsBoolean indicating if mousedown and mousemove should fire events via the graph.
clickHandlerOptional function to implement clicks on the control.

isShapeEvent

mxCellRenderer.prototype.isShapeEvent = function(state,
evt)

Returns true if the event is for the shape of the given state.  This implementation always returns true.

Parameters

statemxCellState whose shape fired the event.
evtMouse event which was fired.

isLabelEvent

mxCellRenderer.prototype.isLabelEvent = function(state,
evt)

Returns true if the event is for the label of the given state.  This implementation always returns true.

Parameters

statemxCellState whose label fired the event.
evtMouse event which was fired.

installListeners

mxCellRenderer.prototype.installListeners = function(state)

Installs the event listeners for the given cell state.

Parameters

statemxCellState for which the event listeners should be isntalled.

redrawLabel

mxCellRenderer.prototype.redrawLabel = function(state,
forced)

Redraws the label for the given cell state.

Parameters

statemxCellState whose label should be redrawn.

isTextShapeInvalid

mxCellRenderer.prototype.isTextShapeInvalid = function(state,
shape)

Returns true if the style for the text shape has changed.

Parameters

statemxCellState whose label should be checked.
shapemxText shape to be checked.

redrawLabelShape

mxCellRenderer.prototype.redrawLabelShape = function(shape)

Called to invoked redraw on the given text shape.

Parameters

shapemxText shape to be redrawn.

getTextScale

mxCellRenderer.prototype.getTextScale = function(state)

Returns the scaling used for the label of the given state

Parameters

statemxCellState whose label scale should be returned.

getLabelBounds

mxCellRenderer.prototype.getLabelBounds = function(state)

Returns the bounds to be used to draw the label of the given state.

Parameters

statemxCellState whose label bounds should be returned.

rotateLabelBounds

mxCellRenderer.prototype.rotateLabelBounds = function(state,
bounds)

Adds the shape rotation to the given label bounds and applies the alignment and offsets.

Parameters

statemxCellState whose label bounds should be rotated.
boundsmxRectangle the rectangle to be rotated.

redrawCellOverlays

mxCellRenderer.prototype.redrawCellOverlays = function(state,
forced)

Redraws the overlays for the given cell state.

Parameters

statemxCellState whose overlays should be redrawn.

redrawControl

mxCellRenderer.prototype.redrawControl = function(state,
forced)

Redraws the control for the given cell state.

Parameters

statemxCellState whose control should be redrawn.

getControlBounds

mxCellRenderer.prototype.getControlBounds = function(state,
w,
h)

Returns the bounds to be used to draw the control (folding icon) of the given state.

insertStateAfter

mxCellRenderer.prototype.insertStateAfter = function(state,
node,
htmlNode)

Inserts the given array of mxShapes after the given nodes in the DOM.

Parameters

shapesArray of mxShapes to be inserted.
nodeNode in <drawPane> after which the shapes should be inserted.
htmlNodeNode in the graph container after which the shapes should be inserted that will not go into the <drawPane> (eg.  HTML labels without foreignObjects).

getShapesForState

mxCellRenderer.prototype.getShapesForState = function(state)

Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.

Parameters

statemxCellState whose shapes should be returned.

redraw

mxCellRenderer.prototype.redraw = function(state,
force,
rendering)

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

statemxCellState for which the shapes should be updated.
forceOptional boolean that specifies if the cell should be reconfiured and redrawn without any additional checks.
renderingOptional 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.

redrawShape

mxCellRenderer.prototype.redrawShape = function(state,
force,
rendering)

Redraws the shape for the given cell state.

Parameters

statemxCellState whose label should be redrawn.

doRedrawShape

mxCellRenderer.prototype.doRedrawShape = function(state)

Invokes redraw on the shape of the given state.

isShapeInvalid

mxCellRenderer.prototype.isShapeInvalid = function(state,
shape)

Returns true if the given shape must be repainted.

destroy

mxCellRenderer.prototype.destroy = function(state)

Destroys the shapes associated with the given cell state.

Parameters

statemxCellState for which the shapes should be destroyed.
function mxCellRenderer()
arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.
mxCellRenderer.defaultShapes
Static array that contains the globally registered shapes which are known to all instances of this class.
mxCellRenderer.prototype.defaultEdgeShape
Defines the default shape for edges.
mxCellRenderer.prototype.defaultVertexShape
Defines the default shape for vertices.
mxCellRenderer.prototype.defaultTextShape
Defines the default shape for labels.
mxCellRenderer.prototype.legacyControlPosition
Specifies if the folding icon should ignore the horizontal orientation of a swimlane.
mxCellRenderer.prototype.legacySpacing
Specifies if spacing and label position should be ignored if overflow is fill or width.
mxCellRenderer.prototype.antiAlias
Anti-aliasing option for new shapes.
mxCellRenderer.prototype.minSvgStrokeWidth
Minimum stroke width for SVG output.
mxCellRenderer.prototype.forceControlClickHandler
Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).
mxCellRenderer.registerShape = function(key,
shape)
Registers the given constructor under the specified key in this instance of the renderer.
mxCellRenderer.prototype.initializeShape = function(state)
Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
mxCellRenderer.prototype.configureShape = function(state)
Configures the shape for the given cell state.
mxCellRenderer.prototype.createShape = function(state)
Creates and returns the shape for the given cell state.
mxCellRenderer.prototype.createIndicatorShape = function(state)
Creates the indicator shape for the given cell state.
mxCellRenderer.prototype.getShape = function(name)
Returns the shape for the given name from defaultShapes.
mxCellRenderer.prototype.getShapeConstructor = function(state)
Returns the constructor to be used for creating the shape.
mxCellRenderer.prototype.postConfigureShape = function(state)
Replaces any reserved words used for attributes, eg.
mxCellRenderer.prototype.checkPlaceholderStyles = function(state)
Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
mxCellRenderer.prototype.resolveColor = function(state,
field,
key)
Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
mxCellRenderer.prototype.getLabelValue = function(state)
Returns the value to be used for the label.
mxCellRenderer.prototype.createLabel = function(state,
value)
Creates the label for the given cell state.
mxCellRenderer.prototype.initializeLabel = function(state,
shape)
Initiailzes the label with a suitable container.
mxCellRenderer.prototype.createCellOverlays = function(state)
Creates the actual shape for showing the overlay for the given cell state.
mxCellRenderer.prototype.initializeOverlay = function(state,
overlay)
Initializes the given overlay.
Represents the current state of a cell in a given mxGraphView.
Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip.
Base class for all shapes.
mxCellRenderer.prototype.createControl = function(state)
Creates the control for the given cell state.
mxCellRenderer.prototype.createControlClickHandler = function(state)
Hook for creating the click handler for the folding icon.
mxCellRenderer.prototype.initControl = function(state,
control,
handleEvents,
clickHandler)
Initializes the given control and returns the corresponding DOM node.
mxCellRenderer.prototype.isShapeEvent = function(state,
evt)
Returns true if the event is for the shape of the given state.
mxCellRenderer.prototype.isLabelEvent = function(state,
evt)
Returns true if the event is for the label of the given state.
mxCellRenderer.prototype.installListeners = function(state)
Installs the event listeners for the given cell state.
mxCellRenderer.prototype.redrawLabel = function(state,
forced)
Redraws the label for the given cell state.
mxCellRenderer.prototype.isTextShapeInvalid = function(state,
shape)
Returns true if the style for the text shape has changed.
mxCellRenderer.prototype.redrawLabelShape = function(shape)
Called to invoked redraw on the given text shape.
mxCellRenderer.prototype.getTextScale = function(state)
Returns the scaling used for the label of the given state
mxCellRenderer.prototype.getLabelBounds = function(state)
Returns the bounds to be used to draw the label of the given state.
mxCellRenderer.prototype.rotateLabelBounds = function(state,
bounds)
Adds the shape rotation to the given label bounds and applies the alignment and offsets.
mxCellRenderer.prototype.redrawCellOverlays = function(state,
forced)
Redraws the overlays for the given cell state.
mxCellRenderer.prototype.redrawControl = function(state,
forced)
Redraws the control for the given cell state.
mxCellRenderer.prototype.getControlBounds = function(state,
w,
h)
Returns the bounds to be used to draw the control (folding icon) of the given state.
mxCellRenderer.prototype.insertStateAfter = function(state,
node,
htmlNode)
Inserts the given array of mxShapes after the given nodes in the DOM.
mxCellRenderer.prototype.getShapesForState = function(state)
Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.
mxCellRenderer.prototype.redraw = function(state,
force,
rendering)
Updates the bounds or points and scale of the shapes for the given cell state.
mxCellRenderer.prototype.redrawShape = function(state,
force,
rendering)
Redraws the shape for the given cell state.
mxCellRenderer.prototype.doRedrawShape = function(state)
Invokes redraw on the shape of the given state.
mxCellRenderer.prototype.isShapeInvalid = function(state,
shape)
Returns true if the given shape must be repainted.
mxCellRenderer.prototype.destroy = function(state)
Destroys the shapes associated with the given cell state.
Extends mxShape to implement a connector shape.
Extends mxShape to implement a rectangle shape.
Extends mxShape to implement a text shape.
Extends mxShape to implement an image shape.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
Close