Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip. Overlays can handle and fire <click> events and are added to the graph using mxGraph.addCellOverlay, and removed using mxGraph.removeCellOverlay, or mxGraph.removeCellOverlays to remove all overlays. The mxGraph.getCellOverlays function returns the array of overlays for a given cell in a graph. If multiple overlays exist for the same cell, then getBounds should be overridden in at least one of the overlays.
Overlays appear on top of all cells in a special layer. If this is not desirable, then the image must be rendered as part of the shape or label of the cell instead.
The following adds a new overlays for a given vertex and selects the cell if the overlay is clicked.
var overlay = new mxCellOverlay(img, html);
graph.addCellOverlay(vertex, overlay);
overlay.addListener(mxEvent.CLICK, function(sender, evt)
{
var cell = evt.getProperty('cell');
graph.setSelectionCell(cell);
});For cell overlays to be printed use mxPrintPreview.printOverlays.
| mxCellOverlay | Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip. |
| Events | |
| mxEvent. | Fires when the user clicks on the overlay. |
| Functions | |
| mxCellOverlay | Constructs a new overlay using the given image and tooltip. |
| Variables | |
| image | Holds the mxImage to be used as the icon. |
| tooltip | Holds the optional string to be used as the tooltip. |
| align | Holds the horizontal alignment for the overlay. |
| verticalAlign | Holds the vertical alignment for the overlay. |
| offset | Holds the offset as an mxPoint. |
| cursor | Holds the cursor for the overlay. |
| defaultOverlap | Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment. |
| Functions | |
| getBounds | Returns the bounds of the overlay for the given mxCellState as an mxRectangle. |
| toString | Returns the textual representation of the overlay to be used as the tooltip. |
function mxCellOverlay( image, tooltip, align, verticalAlign, offset, cursor )
Constructs a new overlay using the given image and tooltip.
| image | mxImage that represents the icon to be displayed. |
| tooltip | Optional string that specifies the tooltip. |
| align | Optional horizontal alignment for the overlay. Possible values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT> (default). |
| verticalAlign | Vertical alignment for the overlay. Possible values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM> (default). |
mxCellOverlay.prototype.image
Holds the mxImage to be used as the icon.
mxCellOverlay.prototype.align
Holds the horizontal alignment for the overlay. Default is mxConstants.ALIGN_RIGHT. For edges, the overlay always appears in the center of the edge.
mxCellOverlay.prototype.verticalAlign
Holds the vertical alignment for the overlay. Default is mxConstants.ALIGN_BOTTOM. For edges, the overlay always appears in the center of the edge.
mxCellOverlay.prototype.offset
Holds the offset as an mxPoint. The offset will be scaled according to the current scale.
mxCellOverlay.prototype.getBounds = function( state )
Returns the bounds of the overlay for the given mxCellState as an mxRectangle. This should be overridden when using multiple overlays per cell so that the overlays do not overlap.
| state | mxCellState that represents the current state of the associated cell. |
mxCellOverlay.prototype.toString = function()
Returns the textual representation of the overlay to be used as the tooltip. This implementation returns tooltip.
Constructs a new overlay using the given image and tooltip.
function mxCellOverlay( image, tooltip, align, verticalAlign, offset, cursor )
Holds the mxImage to be used as the icon.
mxCellOverlay.prototype.image
Holds the optional string to be used as the tooltip.
mxCellOverlay.prototype.tooltip
Holds the horizontal alignment for the overlay.
mxCellOverlay.prototype.align
Holds the vertical alignment for the overlay.
mxCellOverlay.prototype.verticalAlign
Holds the offset as an mxPoint.
mxCellOverlay.prototype.offset
Holds the cursor for the overlay.
mxCellOverlay.prototype.cursor
Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.
mxCellOverlay.prototype.defaultOverlap
Returns the bounds of the overlay for the given mxCellState as an mxRectangle.
mxCellOverlay.prototype.getBounds = function( state )
Returns the textual representation of the overlay to be used as the tooltip.
mxCellOverlay.prototype.toString = function()
Adds an mxCellOverlay for the specified cell.
mxGraph.prototype.addCellOverlay = function( cell, overlay )
Removes and returns the given mxCellOverlay from the given cell.
mxGraph.prototype.removeCellOverlay = function( cell, overlay )
Removes all mxCellOverlays from the given cell.
mxGraph.prototype.removeCellOverlays = function( cell )
Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
mxGraph.prototype.getCellOverlays = function( cell )
Specifies if overlays should be printed.
mxPrintPreview.prototype.printOverlays