mxCellOverlay

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.

Example

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.

Summary
mxCellOverlayExtends mxEventSource to implement a graph overlay, represented by an icon and a tooltip.
Events
mxEvent.CLICKFires when the user clicks on the overlay.
Functions
mxCellOverlayConstructs a new overlay using the given image and tooltip.
Variables
imageHolds the mxImage to be used as the icon.
tooltipHolds the optional string to be used as the tooltip.
alignHolds the horizontal alignment for the overlay.
verticalAlignHolds the vertical alignment for the overlay.
offsetHolds the offset as an mxPoint.
cursorHolds the cursor for the overlay.
defaultOverlapDefines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.
Functions
getBoundsReturns the bounds of the overlay for the given mxCellState as an mxRectangle.
toStringReturns the textual representation of the overlay to be used as the tooltip.

Events

mxEvent.CLICK

Fires when the user clicks on the overlay.  The <code>event</code> property contains the corresponding mouse event and the <code>cell</code> property contains the cell.  For touch devices this is fired if the element receives a touchend event.

Functions

mxCellOverlay

function mxCellOverlay(image,
tooltip,
align,
verticalAlign,
offset,
cursor)

Constructs a new overlay using the given image and tooltip.

Parameters

imagemxImage that represents the icon to be displayed.
tooltipOptional string that specifies the tooltip.
alignOptional horizontal alignment for the overlay.  Possible values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT> (default).
verticalAlignVertical alignment for the overlay.  Possible values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM> (default).

Variables

image

mxCellOverlay.prototype.image

Holds the mxImage to be used as the icon.

tooltip

mxCellOverlay.prototype.tooltip

Holds the optional string to be used as the tooltip.

align

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.

verticalAlign

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.

offset

mxCellOverlay.prototype.offset

Holds the offset as an mxPoint.  The offset will be scaled according to the current scale.

cursor

mxCellOverlay.prototype.cursor

Holds the cursor for the overlay.  Default is ‘help’.

defaultOverlap

mxCellOverlay.prototype.defaultOverlap

Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.  Default is 0.5.

Functions

getBounds

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.

The following example will place the overlay along an edge (where x=[-1..1] from the start to the end of the edge and y is the orthogonal offset in px).

overlay.getBounds = function(state)
{
  var bounds = mxCellOverlay.prototype.getBounds.apply(this, arguments);

  if (state.view.graph.getModel().isEdge(state.cell))
  {
    var pt = state.view.getPoint(state, {x: 0, y: 0, relative: true});

    bounds.x = pt.x - bounds.width / 2;
    bounds.y = pt.y - bounds.height / 2;
  }

  return bounds;
};

Parameters

statemxCellState that represents the current state of the associated cell.

toString

mxCellOverlay.prototype.toString = function()

Returns the textual representation of the overlay to be used as the tooltip.  This implementation returns tooltip.

Base class for objects that dispatch named events.
function mxCellOverlay(image,
tooltip,
align,
verticalAlign,
offset,
cursor)
Constructs a new overlay using the given image and tooltip.
mxCellOverlay.prototype.image
Holds the mxImage to be used as the icon.
Encapsulates the URL, width and height of an image.
mxCellOverlay.prototype.tooltip
Holds the optional string to be used as the tooltip.
mxCellOverlay.prototype.align
Holds the horizontal alignment for the overlay.
mxCellOverlay.prototype.verticalAlign
Holds the vertical alignment for the overlay.
mxCellOverlay.prototype.offset
Holds the offset as an mxPoint.
Implements a 2-dimensional vector with double precision coordinates.
mxCellOverlay.prototype.cursor
Holds the cursor for the overlay.
mxCellOverlay.prototype.defaultOverlap
Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.
mxCellOverlay.prototype.getBounds = function(state)
Returns the bounds of the overlay for the given mxCellState as an mxRectangle.
Represents the current state of a cell in a given mxGraphView.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxCellOverlay.prototype.toString = function()
Returns the textual representation of the overlay to be used as the tooltip.
mxGraph.prototype.addCellOverlay = function(cell,
overlay)
Adds an mxCellOverlay for the specified cell.
mxGraph.prototype.removeCellOverlay = function(cell,
overlay)
Removes and returns the given mxCellOverlay from the given cell.
mxGraph.prototype.removeCellOverlays = function(cell)
Removes all mxCellOverlays from the given cell.
mxGraph.prototype.getCellOverlays = function(cell)
Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
mxPrintPreview.prototype.printOverlays
Specifies if overlays should be printed.
ALIGN_RIGHT: 'right'
Constant for right horizontal alignment.
ALIGN_BOTTOM: 'bottom'
Constant for bottom vertical alignment.
Close