Class Graph

Returns an array with the given cells and all edges that are connected to a cell or one of its descendants.

Adds the cell to the parent and connects it to the given source and target terminals.

This is a shortcut method.

Adds an CellOverlay for the specified cell.

This method fires an InternalEvent.ADD_OVERLAY event and returns the new CellOverlay.

Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal. The change is carried out using cellsAdded. This method fires Event#ADD_CELLS while the transaction is in progress. Returns the cells that were added.

Adds the edge to the parent and connects it to the given source and target terminals. This is a shortcut method.

Adds the specified ImageBundle.

Adds a listener to the graph event dispatch loop.

The listener must implement the mouseDown, mouseMove and mouseUp methods as shown in the InternalMouseEvent class.

Adds the given cell to the selection.

Adds the given cells to the selection.

Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.

Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.

To enable panning inside the container, near the edge, set PanningManager.border to a positive value.

Default

false
Copy

Specifies if edges with disconnected terminals are allowed in the graph.

Default

true
Copy

Specifies if loops (aka self-references) are allowed.

Default

false
Copy

Specifies if negative coordinates for vertices are allowed.

Default

true
Copy

Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected. If the resource for this key does not exist then the value is used as the error message.

Default

'alreadyConnected'
Copy

Specifies the alternate edge style to be used if the main control point on an edge is being double-clicked.

Default

{}
Copy

Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.

This is only taken into account if the container has scrollbars.

See autoScroll.

Default

true
Copy

Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.

This is only taken into account if the container has scrollbars.

If you need this to work without scrollbars then set ignoreScrollbars to true. Please consult the ignoreScrollbars for details. In general, with no scrollbars, the use of allowAutoPanning is recommended.

Default

true
Copy

Resizes the specified cell to just fit around its label and/or children.

Specifies if the graph should automatically update the cell size after an edit. This is used in isAutoSizeCell.

Default

false
Copy

Specifies if autoSize style should be applied when cells are added.

Default

false
Copy

Specifies the Image to be returned by getBackgroundImage.

Default

null
Copy

Example

var img = new mxImage('http://www.example.com/maps/examplemap.jpg', 1024, 768);
graph.setBackgroundImage(img);
graph.view.validate();
Copy

Border to be added to the bottom and right side when the container is being resized after the graph has been changed.

Default

0
Copy

Returns true if the given cell may be exported to the clipboard.

This implementation returns exportEnabled for all cells.

Returns true if the given cell may be imported from the clipboard.

This implementation returns importEnabled for all cells.

Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.

This method fires InternalEvent.CELL_CONNECTED while the transaction is in progress.

Sets the new label for a cell. If autoSize is true, then cellSizeUpdated will be called.

In the following example, the function is extended to map changes to attributes in an XML node, as shown in convertValueToString. Alternatively, the handling of this can be implemented as shown in GraphDataModel.valueForCellChanged without the need to clone the user object.

const graphCellLabelChanged = graph.cellLabelChanged;
graph.cellLabelChanged = function(cell, newValue, autoSize) {
	// Cloned for correct undo/redo
	const elt = cell.value.cloneNode(true);
 elt.setAttribute('label', newValue);

 newValue = elt;
 graphCellLabelChanged.apply(this, arguments);
};
Copy

Holds the CellRenderer for rendering the cells in the graph.

Resizes the parents recursively so that they contain the complete area of the resized child cell.

Adds the specified cells to the given parent. This method fires Event#CELLS_ADDED while the transaction is in progress.

Specifies the return value for isCellsBendable.

Default

true
Copy

Specifies the return value for isCellCloneable.

Default

true
Copy

Specifies the return value for isCellDeletable.

Default

true
Copy

Specifies the return value for isCellsDisconnectable.

Default

true
Copy

Default

true
Copy

Sets the collapsed state of the specified cells.

This method fires InternalEvent.CELLS_FOLDED while the transaction is in progress.

Returns the cells whose collapsed state was changed.

Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.

Specifies the return value for isCellLocked.

Default

false
Copy

Specifies the return value for isCellMovable.

Default

true
Copy

Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.

This method fires InternalEvent.CELLS_MOVED while the transaction is in progress.

Moves the given cells to the front or back.

This method fires InternalEvent.CELLS_ORDERED while the transaction is in progress.

Removes the given cells from the model. This method fires InternalEvent.CELLS_REMOVED while the transaction is in progress.

Specifies the return value for isCellsResizable.

Default

true
Copy

Sets the bounds of the given cells and fires a InternalEvent.CELLS_RESIZED event. If extendParents is true, then the parent is extended if a child size is changed so that it overlaps with the parent.

The following example shows how to control group resizes to make sure that all child cells stay within the group.

graph.addListener(mxEvent.CELLS_RESIZED, function(sender, evt)
{
  var cells = evt.getProperty('cells');

  if (cells != null)
  {
    for (var i = 0; i < cells.length; i++)
    {
      if (graph.getDataModel().getChildCount(cells[i]) > 0)
      {
        var geo = cells[i].getGeometry();

        if (geo != null)
        {
          var children = graph.getChildCells(cells[i], true, true);
          var bounds = graph.getBoundingBoxFromGeometry(children, true);

          geo = geo.clone();
          geo.width = Math.max(geo.width, bounds.width);
          geo.height = Math.max(geo.height, bounds.height);

          graph.getDataModel().setGeometry(cells[i], geo);
        }
      }
    }
  }
});
Copy

Specifies the return value for isCellsSelectable.

Default

true
Copy

Sets the visible state of the specified cells.

Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.

Default

true
Copy

Removes all CellOverlays in the graph for the given cell and all its descendants.

If no cell is specified then all overlays are removed from the graph.

This implementation uses removeCellOverlays to remove the overlays from the individual cells.

Clears the selection using GraphSelectionModel.clear.

Processes a single click on an optional cell and fires a click event. The click event is fired initially. If the graph is enabled and the event has not been consumed, then the cell is selected using selectCellForEvent or the selection is cleared using clearSelection.

The events consumed state is set to true if the corresponding InternalMouseEvent has been consumed.

To handle a click event, use the following code.

graph.addListener(InternalEvent.CLICK, function(sender, evt) {
  const e = evt.getProperty('event'); // mouse event
  const cell = evt.getProperty('cell'); // cell may be null

  if (cell) {
    // Do something useful with cell and consume the event
    evt.consume();
  }
});
Copy

Returns the clone for the given cell. Uses cloneCells.

Returns the clones for the given cells. The clones are created recursively using cloneCells.

If the terminal of an edge is not in the given array, then the respective end is assigned a terminal point and the terminal is removed.

Specifies if edges that are cloned should be validated and only inserted if they are valid.

Default

false
Copy

Specifies the resource key for the tooltip on the collapse/expand icon. If the resource for this key does not exist then the value is used as the tooltip.

Default

'collapse-expand' is Client.language is not 'none'. Else, it is an empty string.

Specifies if edges are connectable. This overrides the connectable field in edges.

Default

false
Copy

Connects the specified end of the given edge to the given terminal using cellConnected and fires InternalEvent.CONNECT_CELL while the transaction is in progress.

Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.

This modifies the cell's geometry in-place and does not clone it.

Constrains the children of the given cell using constrainChild.

Specifies if a child should be constrained inside the parent bounds after a move or resize of the child.

Default

true
Copy

Specifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.

Default

false
Copy

Consumes the given InternalMouseEvent if it's a touchStart event.

Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors. If the resource for this key does not exist then the value is used as the warning message.

Default

'containsValidationErrors'
Copy

Hook method that creates the new edge for insertEdge.

This implementation does not set the source and target of the edge, these are set when the edge is added to the model.

Hook for creating the group cell to hold the given array of Cell if no group cell was given to the group function.

The following code can be used to set the style of new group cells.

const graphCreateGroupCell = graph.createGroupCell;
graph.createGroupCell = function(cells) {
  const group = graphCreateGroupCell.apply(this, arguments);
  group.setStyle('group');

  return group;

Copy

Processes a double click on an optional cell and fires a dblclick event. The event is fired initially.

If the graph is enabled and the event has not been consumed, then edit is called with the given cell. The event is ignored if no cell was specified.

Example for overriding this method.

graph.dblClick = function(evt, cell) {
  const mxe = new EventObject(InternalEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell);
  this.fireEvent(mxe);

  if (this.isEnabled() && !InternalEvent.isConsumed(evt) && !mxe.isConsumed()) {
	   alert('Hello, World!');
    mxe.consume();
  }
}
Copy

Example listener for this event.

graph.addListener(InternalEvent.DOUBLE_CLICK, function(sender, evt) {
  const cell = evt.getProperty('cell');
  // do something with the cell and consume the
  // event to prevent in-place editing from start
});
Copy

EdgeStyle to be used for loops. This is a fallback for loops if the CellStateStyle.loopStyle is undefined.

Default

EdgeStyle.Loop

Value returned by getOverlap if isAllowOverlapParent returns true for the given cell. getOverlap is used in constrainChild if isConstrainChild returns true. The value specifies the portion of the child which is allowed to overlap the parent.

Specifies the default parent to be used to insert new cells. This is used in getDefaultParent.

Default

null
Copy

Dialect to be used for drawing the graph. Possible values are all constants in DIALECT.

Disconnects the given edges from the terminals which are not in the given array.

Specifies if edges should be disconnected from their terminals when they are moved.

Default

true
Copy

Specifies if double taps on touch-based devices should be handled as a double click.

Default

true
Copy

Specifies the timeout in milliseconds for double taps and non-native double clicks.

Default

500
Copy

Specifies the tolerance in pixels for double taps and double-clicks in quirks mode.

Default

25
Copy

Specifies the return value for isDropEnabled.

Default

false
Copy

Specifies the return value for edges in isLabelMovable.

Default

true
Copy

Specifies the return value for isEnabled.

Default

true
Copy

Uses the given cell as the root of the displayed cell hierarchy. If no cell is specified then the selection cell is used.

The cell is only used if isValidRoot returns true.

If true, pressing the enter key without pressing control or shift will stop editing and accept the new value. This is used in CellEditorHandler to stop cell editing. Note: You can always use F2 and escape to stop editing.

Default

false
Copy

Processes an escape keystroke.

Specifies if KeyHandler should invoke escape when the escape key is pressed.

Default

true
Copy

Changes the current root to the next valid root in the displayed cell hierarchy.

Specifies the return value for canExportCell.

Default

true
Copy

Resizes the parents recursively so that they contain the complete area of the resized child cell.

Specifies if a parent should contain the child bounds after a resize of the child. This has precedence over constrainChildren.

Default

true
Copy

Specifies if parents should be extended according to the extendParents switch if cells are added.

Default

true
Copy

Specifies if parents should be extended according to the extendParents switch if cells are added.

Default

false (for backwards compatibility)
Copy

Dispatches a InternalEvent.GESTURE event. The following example will resize the cell under the mouse based on the scale property of the native touch event.

graph.addListener(mxEvent.GESTURE, function(sender, eo) {
  const evt = eo.getProperty('event');
  const state = graph.view.getState(eo.getProperty('cell'));

  if (graph.isEnabled() && graph.isCellResizable(state.cell) && Math.abs(1 - evt.scale) > 0.2) {
    const scale = graph.view.scale;
    const tr = graph.view.translate;

    const w = state.width * evt.scale;
    const h = state.height * evt.scale;
    const x = state.x - (w - state.width) / 2;
    const y = state.y - (h - state.height) / 2;

    const bounds = new Rectangle(graph.snap(x / scale) - tr.x,
    		graph.snap(y / scale) - tr.y,
    		graph.snap(w / scale),
    		graph.snap(h / scale));
    graph.resizeCell(state.cell, bounds);
    eo.consume();
  }
});
Copy