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.prototype.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
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.
defaultShapesStatic array that contains the globally registered shapes which are known to all instances of this class.
Functions
registerShapeRegisters the given constructor under the specified key in this instance of the renderer.
initializeInitializes the display for the given cell state.
initializeShapeInitializes the shape in the given state by calling its init method with the correct container.
orderOrders the DOM node of the shape for the given state according to the position of the corresponding cell in the graph model.
orderEdgeOrders the DOM node of the shape for the given edge’s state according to the mxGraph.keepEdgesInBackground and mxGraph.keepEdgesInBackground rules.
insertStateInserts the given state before the given node into its parent.
createShapeCreates the 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.
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.
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.
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.
redrawUpdates the bounds or points and scale of the shapes for the given cell state.
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

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.

defaultShapes

mxCellRenderer.prototype.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.

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.

initialize

mxCellRenderer.prototype.initialize = function(state,
rendering)

Initializes the display for the given cell state.  This is required once after the cell state has been created.  This is invoked in mxGraphView.createState.

Parameters

statemxCellState for which the display should be initialized.
renderingOptional boolean that specifies if the cell should actually be initialized for any given DOM node.  If this is false then init will not be called on the shape.

initializeShape

mxCellRenderer.prototype.initializeShape = function(state)

Initializes the shape in the given state by calling its init method with the correct container.

Parameters

statemxCellState for which the shape should be initialized.

order

mxCellRenderer.prototype.order = function(state)

Orders the DOM node of the shape for the given state according to the position of the corresponding cell in the graph model.

Parameters

statemxCellState whose shape’s DOM node should be ordered.

orderEdge

mxCellRenderer.prototype.orderEdge = function(state)

Orders the DOM node of the shape for the given edge’s state according to the mxGraph.keepEdgesInBackground and mxGraph.keepEdgesInBackground rules.

Parameters

statemxCellState whose shape’s DOM node should be ordered.

insertState

mxCellRenderer.prototype.insertState = function(state,
nextNode)

Inserts the given state before the given node into its parent.

Parameters

statemxCellState for which the shape should be created.

createShape

mxCellRenderer.prototype.createShape = function(state)

Creates the shape for the given cell state.  The shape is configured using configureShape.

Parameters

statemxCellState for which the 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.

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)

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.

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.

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)

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

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.

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.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.defaultShapes
Static array that contains the globally registered shapes which are known to all instances of this class.
mxCellRenderer.registerShape = function(key,
shape)
Registers the given constructor under the specified key in this instance of the renderer.
mxCellRenderer.prototype.initialize = function(state,
rendering)
Initializes the display for the given cell state.
mxCellRenderer.prototype.initializeShape = function(state)
Initializes the shape in the given state by calling its init method with the correct container.
mxCellRenderer.prototype.order = function(state)
Orders the DOM node of the shape for the given state according to the position of the corresponding cell in the graph model.
mxCellRenderer.prototype.orderEdge = function(state)
Orders the DOM node of the shape for the given edge’s state according to the mxGraph.keepEdgesInBackground and mxGraph.keepEdgesInBackground rules.
mxGraph.prototype.keepEdgesInBackground
Specifies if edges should appear in the background regardless of their order in the model.
mxCellRenderer.prototype.insertState = function(state,
nextNode)
Inserts the given state before the given node into its parent.
mxCellRenderer.prototype.createShape = function(state)
Creates the 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.configureShape = function(state)
Configures the shape for the given cell state.
mxCellRenderer.prototype.postConfigureShape = function(state)
Replaces any reserved words used for attributes, eg.
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)
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.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.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)
Returns the bounds to be used to draw the control (folding icon) of the given state.
mxCellRenderer.prototype.redraw = function(state,
force,
rendering)
Updates the bounds or points and scale of the shapes for the given cell state.
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