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);
}| mxCellRenderer | Renders cells into a document object model. |
| Functions | |
| mxCellRenderer | arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud. |
| Variables | |
| shapes | Array that maps from shape names to shape constructors. |
| defaultEdgeShape | Defines the default shape for edges. |
| defaultVertexShape | Defines the default shape for vertices. |
| defaultShapes | Static array that contains the globally registered shapes which are known to all instances of this class. |
| Functions | |
| registerShape | Registers the given constructor under the specified key in this instance of the renderer. |
| initialize | Initializes the display for the given cell state. |
| initializeShape | Initializes the shape in the given state by calling its init method with the correct container. |
| order | Orders the DOM node of the shape for the given state according to the position of the corresponding cell in the graph model. |
| orderEdge | Orders the DOM node of the shape for the given edge’s state according to the mxGraph.keepEdgesInBackground and mxGraph.keepEdgesInBackground rules. |
| insertState | Inserts the given state before the given node into its parent. |
| createShape | Creates the shape for the given cell state. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| redraw | Updates the bounds or points and scale of the shapes for the given cell state. |
| destroy | Destroys the shapes associated with the given cell state. |
mxCellRenderer.prototype.shapes
Array that maps from shape names to shape constructors. All entries in defaultShapes are added to this array.
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.defaultShapes
Static array that contains the globally registered shapes which are known to all instances of this class. For adding instance-specific shapes you should use registerShape on the instance. For adding a shape to this array you can use the following code:
mxCellRenderer.prototype.defaultShapes['myshape'] = myShape;
Where ‘myshape’ is the key under which the shape is to be registered and myShape is the name of the constructor function.
mxCellRenderer.prototype.registerShape = function( key, shape )
Registers the given constructor under the specified key in this instance of the renderer.
this.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);
| key | String representing the shape name. |
| shape | Constructor of the mxShape subclass. |
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.
| state | mxCellState for which the display should be initialized. |
| rendering | Optional 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. |
mxCellRenderer.prototype.initializeShape = function( state )
Initializes the shape in the given state by calling its init method with the correct container.
| state | mxCellState for which the shape should be initialized. |
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.
| state | mxCellState whose shape’s DOM node should be ordered. |
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.
| state | mxCellState whose shape’s DOM node should be ordered. |
mxCellRenderer.prototype.insertState = function( state, nextNode )
Inserts the given state before the given node into its parent.
| state | mxCellState for which the shape should be created. |
mxCellRenderer.prototype.createShape = function( state )
Creates the shape for the given cell state. The shape is configured using configureShape.
| state | mxCellState for which the shape should be created. |
mxCellRenderer.prototype.configureShape = function( state )
Configures the shape for the given cell state.
| state | mxCellState for which the shape should be configured. |
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 )
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.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 )
Redraws the label for the given cell state.
| state | mxCellState whose label should 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.redrawCellOverlays = function( state )
Redraws the overlays for the given cell state.
| state | mxCellState whose overlays should be redrawn. |
mxCellRenderer.prototype.redrawControl = function( state )
Redraws the control for the given cell state.
| state | mxCellState whose control should be redrawn. |
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.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()
Array that maps from shape names to shape constructors.
mxCellRenderer.prototype.shapes
Defines the default shape for edges.
mxCellRenderer.prototype.defaultEdgeShape
Defines the default shape for vertices.
mxCellRenderer.prototype.defaultVertexShape
Static array that contains the globally registered shapes which are known to all instances of this class.
mxCellRenderer.prototype.defaultShapes
Registers the given constructor under the specified key in this instance of the renderer.
mxCellRenderer.prototype.registerShape = function( key, shape )
Initializes the display for the given cell state.
mxCellRenderer.prototype.initialize = function( state, rendering )
Initializes the shape in the given state by calling its init method with the correct container.
mxCellRenderer.prototype.initializeShape = 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.order = function( state )
Orders the DOM node of the shape for the given edge’s state according to the mxGraph.keepEdgesInBackground and mxGraph.keepEdgesInBackground rules.
mxCellRenderer.prototype.orderEdge = function( state )
Specifies if edges should appear in the background regardless of their order in the model.
mxGraph.prototype.keepEdgesInBackground
Inserts the given state before the given node into its parent.
mxCellRenderer.prototype.insertState = function( state, nextNode )
Creates the shape for the given cell state.
mxCellRenderer.prototype.createShape = function( state )
Returns the constructor to be used for creating the shape.
mxCellRenderer.prototype.getShapeConstructor = function( state )
Configures the shape for the given cell state.
mxCellRenderer.prototype.configureShape = function( state )
Replaces any reserved words used for attributes, eg.
mxCellRenderer.prototype.postConfigureShape = 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 )
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 )
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 )
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 )
Redraws the overlays for the given cell state.
mxCellRenderer.prototype.redrawCellOverlays = function( state )
Redraws the control for the given cell state.
mxCellRenderer.prototype.redrawControl = function( state )
Returns the bounds to be used to draw the control (folding icon) of the given state.
mxCellRenderer.prototype.getControlBounds = function( state )
Updates the bounds or points and scale of the shapes for the given cell state.
mxCellRenderer.prototype.redraw = function( state, force, rendering )
Destroys the shapes associated with the given cell state.
mxCellRenderer.prototype.destroy = function( state )