Class CellOverlay

Extends EventSource to implement a graph overlay, represented by an icon and a tooltip. Overlays can handle and fire events and are added to the graph using Graph#addCellOverlay, and removed using Graph#removeCellOverlay, or Graph#removeCellOverlays to remove all overlays. The Graph#getCellOverlays function returns the array of overlays for a given cell in a graph. If multiple overlays exist for the same cell, then 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.

let overlay = new CellOverlay(img, html);
graph.addCellOverlay(vertex, overlay);
overlay.addListener(mxEvent.CLICK, (sender, evt)=>
{
  let cell = evt.getProperty('cell');
  graph.setSelectionCell(cell);
});

For cell overlays to be printed use PrintPreview#printOverlays.

Event: mxEvent.CLICK

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

Constructor: CellOverlay

Constructs a new overlay using the given image and tooltip.

Param: image

Image that represents the icon to be displayed.

Param: tooltip

Optional string that specifies the tooltip.

Param: align

Optional horizontal alignment for the overlay. Possible values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT> (default).

Param: verticalAlign

Vertical alignment for the overlay. Possible values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM> (default).

Hierarchy (view full)

Implements

Constructors

constructor

Properties

align cursor defaultOverlap eventListeners eventsEnabled eventSource image offset tooltip? verticalAlign

Methods

addListener fireEvent getBounds getEventSource isEventsEnabled removeListener setEventsEnabled setEventSource toString

Constructors

constructor

Properties

align

align: AlignValue = 'right'

Holds the horizontal alignment for the overlay.

For edges, the overlay always appears in the center of the edge.

Default

'right'

cursor

cursor: string = 'help'

Holds the cursor for the overlay.

Default

'help'.

defaultOverlap

defaultOverlap: number = 0.5

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.

eventListeners

eventListeners: EventListenerObject[] = []

Holds the event names and associated listeners in an array. The array contains the event name followed by the respective listener for each registered listener.

eventsEnabled

eventsEnabled: boolean = true

Specifies if events can be fired. Default is true.

eventSource

eventSource: null | EventTarget = null

Optional source for events. Default is null.

image

image: ImageBox

Holds the Image to be used as the icon.

offset

offset: Point = ...

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

Optionaltooltip

tooltip?: null | string

Holds the optional string to be used as the tooltip.

verticalAlign

verticalAlign: VAlignValue = 'bottom'

Holds the vertical alignment for the overlay.

For edges, the overlay always appears in the center of the edge.

Default

'bottom'

Methods

addListener

  • addListener(name, funct): void

  • Binds the specified function to the given event name. If no event name is given, then the listener is registered for all events.

    The parameters of the listener are the sender and an EventObject.

    Parameters

    • name: string
    • funct: Function

    Returns void

fireEvent

  • fireEvent(evt, sender?): void

  • Dispatches the given event to the listeners which are registered for the event. The sender argument is optional. The current execution scope ("this") is used for the listener invocation (see Utils#bind).

    Example:

    fireEvent(new mxEventObject("eventName", key1, val1, .., keyN, valN))

    Parameters

    • evt: EventObject

      EventObject that represents the event.

    • sender: null | EventTarget = null

      Optional sender to be passed to the listener. Default value is the return value of .

    Returns void

getBounds

  • getBounds(state): Rectangle

  • Returns the bounds of the overlay for the given as an Rectangle. 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 = getBounds.apply(this, arguments);

      if (state.view.graph.getDataModel().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

    • state: CellState

      that represents the current state of the associated cell.

    Returns Rectangle

getEventSource

isEventsEnabled

removeListener

setEventsEnabled

setEventSource

toString

  • toString(): undefined | null | string

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

    Returns undefined | null | string

Settings

Member Visibility

On This Page

Constructors
Properties
Methods