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);
}| mxCellRenderer | Renders cells into a document object model. |
| Functions | |
| mxCellRenderer | arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud. |
| Variables | |
| defaultShapes | Static array that contains the globally registered shapes which are known to all instances of this class. |
| defaultEdgeShape | Defines the default shape for edges. |
| defaultVertexShape | Defines the default shape for vertices. |
| defaultTextShape | Defines the default shape for labels. |
| legacyControlPosition | Specifies if the folding icon should ignore the horizontal orientation of a swimlane. |
| legacySpacing | Specifies if spacing and label position should be ignored if overflow is fill or width. |
| antiAlias | Anti-aliasing option for new shapes. |
| minSvgStrokeWidth | Minimum stroke width for SVG output. |
| forceControlClickHandler | Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs). |
| Functions | |
| registerShape | Registers the given constructor under the specified key in this instance of the renderer. |
| initializeShape | Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape. |
| createShape | Creates and returns the shape for the given cell state. |
| createIndicatorShape | Creates the indicator shape for the given cell state. |
| getShape | Returns the shape for the given name from defaultShapes. |
| getShapeConstructor | Returns the constructor to be used for creating the shape. |
| configureShape | Configures the shape for the given cell state. |
| postConfigureShape | Replaces any reserved words used for attributes, eg. |
| checkPlaceholderStyles | Checks if the style of the given mxCellState contains ‘inherit’, ‘indicated’ or ‘swimlane’ for colors that support those keywords. |
| resolveColor | Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape. |
| getLabelValue | Returns the value to be used for the label. |
| createLabel | Creates the label for the given cell state. |
| initializeLabel | Initiailzes the label with a suitable container. |
| createCellOverlays | Creates the actual shape for showing the overlay for the given cell state. |
| initializeOverlay | Initializes the given overlay. |
| installOverlayListeners | Installs the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay. |
| createControl | Creates the control for the given cell state. |
| createControlClickHandler | Hook for creating the click handler for the folding icon. |
| initControl | Initializes the given control and returns the corresponding DOM node. |
| isShapeEvent | Returns true if the event is for the shape of the given state. |
| isLabelEvent | Returns true if the event is for the label of the given state. |
| installListeners | Installs the event listeners for the given cell state. |
| redrawLabel | Redraws the label for the given cell state. |
| isTextShapeInvalid | Returns true if the style for the text shape has changed. |
| redrawLabelShape | Called to invoked redraw on the given text shape. |
| getTextScale | Returns the scaling used for the label of the given state |
| getLabelBounds | Returns the bounds to be used to draw the label of the given state. |
| rotateLabelBounds | Adds the shape rotation to the given label bounds and applies the alignment and offsets. |
| redrawCellOverlays | Redraws the overlays for the given cell state. |
| redrawControl | Redraws the control for the given cell state. |
| getControlBounds | Returns the bounds to be used to draw the control (folding icon) of the given state. |
| insertStateAfter | Inserts the given array of mxShapes after the given nodes in the DOM. |
| getShapesForState | Returns the mxShapes for the given cell state in the order in which they should appear in the DOM. |
| redraw | Updates the bounds or points and scale of the shapes for the given cell state. |
| redrawShape | Redraws the shape for the given cell state. |
| doRedrawShape | Invokes redraw on the shape of the given state. |
| isShapeInvalid | Returns true if the given shape must be repainted. |
| destroy | Destroys the shapes associated with the given cell state. |
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.
mxCellRenderer.prototype.defaultEdgeShape
Defines the default shape for edges. Default is mxConnector.
mxCellRenderer.prototype.defaultVertexShape
Defines the default shape for vertices. Default is mxRectangleShape.
mxCellRenderer.prototype.defaultTextShape
Defines the default shape for labels. Default is mxText.
mxCellRenderer.registerShape = function( key, shape )
Registers the given constructor under the specified key in this instance of the renderer.
mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);
| key | String representing the shape name. |
| shape | Constructor of the mxShape subclass. |
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.
| state | mxCellState for which the shape should be initialized. |
mxCellRenderer.prototype.createShape = function( state )
Creates and returns the shape for the given cell state.
| state | mxCellState for which the shape should be created. |
mxCellRenderer.prototype.createIndicatorShape = function( state )
Creates the indicator shape for the given cell state.
| state | mxCellState for which the indicator shape should be created. |
mxCellRenderer.prototype.getShape = function( name )
Returns the shape for the given name from defaultShapes.
mxCellRenderer.prototype.configureShape = function( state )
Configures the shape for the given cell state.
| state | mxCellState for which the shape should be configured. |
mxCellRenderer.prototype.checkPlaceholderStyles = function( state )
Checks if the style of the given mxCellState contains ‘inherit’, ‘indicated’ or ‘swimlane’ for colors that support those keywords.
mxCellRenderer.prototype.getLabelValue = function( state )
Returns the value to be used for the label.
| state | mxCellState for which the label should be created. |
mxCellRenderer.prototype.createLabel = function( state, value )
Creates the label for the given cell state.
| state | mxCellState for which the label should be created. |
mxCellRenderer.prototype.initializeLabel = function( state, shape )
Initiailzes the label with a suitable container.
| state | mxCellState whose label should be initialized. |
mxCellRenderer.prototype.createCellOverlays = function( state )
Creates the actual shape for showing the overlay for the given cell state.
| state | mxCellState for which the overlay should be created. |
mxCellRenderer.prototype.initializeOverlay = function( state, overlay )
Initializes the given overlay.
| state | mxCellState for which the overlay should be created. |
| overlay | mxImageShape that represents the overlay. |
Installs the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.
mxCellRenderer.prototype.createControl = function( state )
Creates the control for the given cell state.
| state | mxCellState for which the control should be created. |
mxCellRenderer.prototype.createControlClickHandler = function( state )
Hook for creating the click handler for the folding icon.
| state | mxCellState whose control click handler should be returned. |
mxCellRenderer.prototype.initControl = function( state, control, handleEvents, clickHandler )
Initializes the given control and returns the corresponding DOM node.
| state | mxCellState for which the control should be initialized. |
| control | mxShape to be initialized. |
| handleEvents | Boolean indicating if mousedown and mousemove should fire events via the graph. |
| clickHandler | Optional function to implement clicks on the control. |
mxCellRenderer.prototype.isShapeEvent = function( state, evt )
Returns true if the event is for the shape of the given state. This implementation always returns true.
| state | mxCellState whose shape fired the event. |
| evt | Mouse event which was fired. |
mxCellRenderer.prototype.isLabelEvent = function( state, evt )
Returns true if the event is for the label of the given state. This implementation always returns true.
| state | mxCellState whose label fired the event. |
| evt | Mouse event which was fired. |
mxCellRenderer.prototype.installListeners = function( state )
Installs the event listeners for the given cell state.
| state | mxCellState for which the event listeners should be isntalled. |
mxCellRenderer.prototype.redrawLabel = function( state, forced )
Redraws the label for the given cell state.
| state | mxCellState whose label should be redrawn. |
mxCellRenderer.prototype.isTextShapeInvalid = function( state, shape )
Returns true if the style for the text shape has changed.
| state | mxCellState whose label should be checked. |
| shape | mxText shape to be checked. |
mxCellRenderer.prototype.redrawLabelShape = function( shape )
Called to invoked redraw on the given text shape.
| shape | mxText shape to be redrawn. |
mxCellRenderer.prototype.getTextScale = function( state )
Returns the scaling used for the label of the given state
| state | mxCellState whose label scale should be returned. |
mxCellRenderer.prototype.getLabelBounds = function( state )
Returns the bounds to be used to draw the label of the given state.
| state | mxCellState whose label bounds should be returned. |
mxCellRenderer.prototype.rotateLabelBounds = function( state, bounds )
Adds the shape rotation to the given label bounds and applies the alignment and offsets.
| state | mxCellState whose label bounds should be rotated. |
| bounds | mxRectangle the rectangle to be rotated. |
mxCellRenderer.prototype.redrawCellOverlays = function( state, forced )
Redraws the overlays for the given cell state.
| state | mxCellState whose overlays should be redrawn. |
mxCellRenderer.prototype.redrawControl = function( state, forced )
Redraws the control for the given cell state.
| state | mxCellState whose control should be redrawn. |
mxCellRenderer.prototype.insertStateAfter = function( state, node, htmlNode )
Inserts the given array of mxShapes after the given nodes in the DOM.
| shapes | Array of mxShapes to be inserted. |
| node | Node in <drawPane> after which the shapes should be inserted. |
| htmlNode | Node in the graph container after which the shapes should be inserted that will not go into the <drawPane> (eg. HTML labels without foreignObjects). |
mxCellRenderer.prototype.getShapesForState = function( state )
Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.
| state | mxCellState whose shapes should be returned. |
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.
| state | mxCellState for which the shapes should be updated. |
| force | Optional boolean that specifies if the cell should be reconfiured and redrawn without any additional checks. |
| rendering | 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. |
mxCellRenderer.prototype.redrawShape = function( state, force, rendering )
Redraws the shape for the given cell state.
| state | mxCellState whose label should be redrawn. |
mxCellRenderer.prototype.destroy = function( state )
Destroys the shapes associated with the given cell state.
| state | mxCellState for which the shapes should be destroyed. |
arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.
function mxCellRenderer()
Static array that contains the globally registered shapes which are known to all instances of this class.
mxCellRenderer.defaultShapes
Defines the default shape for edges.
mxCellRenderer.prototype.defaultEdgeShape
Defines the default shape for vertices.
mxCellRenderer.prototype.defaultVertexShape
Defines the default shape for labels.
mxCellRenderer.prototype.defaultTextShape
Specifies if the folding icon should ignore the horizontal orientation of a swimlane.
mxCellRenderer.prototype.legacyControlPosition
Specifies if spacing and label position should be ignored if overflow is fill or width.
mxCellRenderer.prototype.legacySpacing
Anti-aliasing option for new shapes.
mxCellRenderer.prototype.antiAlias
Minimum stroke width for SVG output.
mxCellRenderer.prototype.minSvgStrokeWidth
Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).
mxCellRenderer.prototype.forceControlClickHandler
Registers the given constructor under the specified key in this instance of the renderer.
mxCellRenderer.registerShape = function( key, shape )
Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
mxCellRenderer.prototype.initializeShape = function( state )
Configures the shape for the given cell state.
mxCellRenderer.prototype.configureShape = function( state )
Creates and returns the shape for the given cell state.
mxCellRenderer.prototype.createShape = function( state )
Creates the indicator shape for the given cell state.
mxCellRenderer.prototype.createIndicatorShape = function( state )
Returns the shape for the given name from defaultShapes.
mxCellRenderer.prototype.getShape = function( name )
Returns the constructor to be used for creating the shape.
mxCellRenderer.prototype.getShapeConstructor = function( state )
Replaces any reserved words used for attributes, eg.
mxCellRenderer.prototype.postConfigureShape = function( state )
Checks if the style of the given mxCellState contains ‘inherit’, ‘indicated’ or ‘swimlane’ for colors that support those keywords.
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 )
Returns the value to be used for the label.
mxCellRenderer.prototype.getLabelValue = function( state )
Creates the label for the given cell state.
mxCellRenderer.prototype.createLabel = function( state, value )
Initiailzes the label with a suitable container.
mxCellRenderer.prototype.initializeLabel = function( state, shape )
Creates the actual shape for showing the overlay for the given cell state.
mxCellRenderer.prototype.createCellOverlays = function( state )
Initializes the given overlay.
mxCellRenderer.prototype.initializeOverlay = function( state, overlay )
Creates the control for the given cell state.
mxCellRenderer.prototype.createControl = function( state )
Hook for creating the click handler for the folding icon.
mxCellRenderer.prototype.createControlClickHandler = function( state )
Initializes the given control and returns the corresponding DOM node.
mxCellRenderer.prototype.initControl = function( state, control, handleEvents, clickHandler )
Returns true if the event is for the shape of the given state.
mxCellRenderer.prototype.isShapeEvent = function( state, evt )
Returns true if the event is for the label of the given state.
mxCellRenderer.prototype.isLabelEvent = function( state, evt )
Installs the event listeners for the given cell state.
mxCellRenderer.prototype.installListeners = function( state )
Redraws the label for the given cell state.
mxCellRenderer.prototype.redrawLabel = function( state, forced )
Returns true if the style for the text shape has changed.
mxCellRenderer.prototype.isTextShapeInvalid = function( state, shape )
Called to invoked redraw on the given text shape.
mxCellRenderer.prototype.redrawLabelShape = function( shape )
Returns the scaling used for the label of the given state
mxCellRenderer.prototype.getTextScale = function( state )
Returns the bounds to be used to draw the label of the given state.
mxCellRenderer.prototype.getLabelBounds = function( state )
Adds the shape rotation to the given label bounds and applies the alignment and offsets.
mxCellRenderer.prototype.rotateLabelBounds = function( state, bounds )
Redraws the overlays for the given cell state.
mxCellRenderer.prototype.redrawCellOverlays = function( state, forced )
Redraws the control for the given cell state.
mxCellRenderer.prototype.redrawControl = function( state, forced )
Returns the bounds to be used to draw the control (folding icon) of the given state.
mxCellRenderer.prototype.getControlBounds = function( state, w, h )
Inserts the given array of mxShapes after the given nodes in the DOM.
mxCellRenderer.prototype.insertStateAfter = function( state, node, htmlNode )
Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.
mxCellRenderer.prototype.getShapesForState = function( state )
Updates the bounds or points and scale of the shapes for the given cell state.
mxCellRenderer.prototype.redraw = function( state, force, rendering )
Redraws the shape for the given cell state.
mxCellRenderer.prototype.redrawShape = function( state, force, rendering )
Invokes redraw on the shape of the given state.
mxCellRenderer.prototype.doRedrawShape = function( state )
Returns true if the given shape must be repainted.
mxCellRenderer.prototype.isShapeInvalid = function( state, shape )
Destroys the shapes associated with the given cell state.
mxCellRenderer.prototype.destroy = function( state )