mxGraph

Extends mxEventSource to implement a graph component for the browser.  This is the main class of the package.  To activate panning and connections use setPanning and setConnectable.  For rubberband selection you must create a new instance of mxRubberband.  The following listeners are added to mouseListeners by default:

These listeners will be called in the above order if they are enabled.

Background Images

To display a background image, set the image, image width and image height using setBackgroundImage.  If one of the above values has changed then the view’s mxGraphView.validate should be invoked.

Cell Images

To use images in cells, a shape must be specified in the default vertex style (or any named style).  Possible shapes are mxConstants.SHAPE_IMAGE and mxConstants.SHAPE_LABEL.  The code to change the shape used in the default vertex style, the following code is used:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;

For the default vertex style, the image to be displayed can be specified in a cell’s style using the mxConstants.STYLE_IMAGE key and the image URL as a value, for example:

image=http://www.example.com/image.gif

For a named style, the the stylename must be the first element of the cell style:

stylename;image=http://www.example.com/image.gif

A cell style can have any number of key=value pairs added, divided by a semicolon as follows:

[stylename;|key=value;]

Labels

The cell labels are defined by getLabel which uses convertValueToString if labelsVisible is true.  If a label must be rendered as HTML markup, then isHtmlLabel should return true for the respective cell.  If all labels contain HTML markup, htmlLabels can be set to true.  NOTE: Enabling HTML labels carries a possible security risk (see the section on security in the manual).

If wrapping is needed for a label, then isHtmlLabel and isWrapping must return true for the cell whose label should be wrapped.  See isWrapping for an example.

If clipping is needed to keep the rendering of a HTML label inside the bounds of its vertex, then <isClipping> should return true for the respective cell.

By default, edge labels are movable and vertex labels are fixed.  This can be changed by setting edgeLabelsMovable and vertexLabelsMovable, or by overriding isLabelMovable.

In-place Editing

In-place editing is started with a doubleclick or by typing F2.  Programmatically, <edit> is used to check if the cell is editable (isCellEditable) and call startEditingAtCell, which invokes mxCellEditor.startEditing.  The editor uses the value returned by getEditingValue as the editing value.

After in-place editing, labelChanged is called, which invokes mxGraphModel.setValue, which in turn calls mxGraphModel.valueForCellChanged via mxValueChange.

The event that triggers in-place editing is passed through to the cellEditor, which may take special actions depending on the type of the event or mouse location, and is also passed to getEditingValue.  The event is then passed back to the event processing functions which can perform specific actions based on the trigger event.

Tooltips

Tooltips are implemented by getTooltip, which calls getTooltipForCell if a cell is under the mousepointer.  The default implementation checks if the cell has a getTooltip function and calls it if it exists.  Hence, in order to provide custom tooltips, the cell must provide a getTooltip function, or one of the two above functions must be overridden.

Typically, for custom cell tooltips, the latter function is overridden as follows:

graph.getTooltipForCell = function(cell)
{
  var label = this.convertValueToString(cell);
  return 'Tooltip for '+label;
}

When using a config file, the function is overridden in the mxGraph section using the following entry:

<add as="getTooltipForCell"><![CDATA[
  function(cell)
  {
    var label = this.convertValueToString(cell);
    return 'Tooltip for '+label;
  }
]]></add>

”this” refers to the graph in the implementation, so for example to check if a cell is an edge, you use this.getModel().isEdge(cell)

For replacing the default implementation of getTooltipForCell (rather than replacing the function on a specific instance), the following code should be used after loading the JavaScript files, but before creating a new mxGraph instance using mxGraph:

mxGraph.prototype.getTooltipForCell = function(cell)
{
  var label = this.convertValueToString(cell);
  return 'Tooltip for '+label;
}

Shapes & Styles

The implementation of new shapes is demonstrated in the examples.  We’ll assume that we have implemented a custom shape with the name BoxShape which we want to use for drawing vertices.  To use this shape, it must first be registered in the cell renderer as follows:

mxCellRenderer.registerShape('box', BoxShape);

The code registers the BoxShape constructor under the name box in the cell renderer of the graph.  The shape can now be referenced using the shape-key in a style definition.  (The cell renderer contains a set of additional shapes, namely one for each constant with a SHAPE-prefix in mxConstants.)

Styles are a collection of key, value pairs and a stylesheet is a collection of named styles.  The names are referenced by the cellstyle, which is stored in mxCell.style with the following format: [stylename;|key=value;].  The string is resolved to a collection of key, value pairs, where the keys are overridden with the values in the string.

When introducing a new shape, the name under which the shape is registered must be used in the stylesheet.  There are three ways of doing this:

  • By changing the default style, so that all vertices will use the new shape
  • By defining a new style, so that only vertices with the respective cellstyle will use the new shape
  • By using shape=box in the cellstyle’s optional list of key, value pairs to be overridden

In the first case, the code to fetch and modify the default style for vertices is as follows:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box';

The code takes the default vertex style, which is used for all vertices that do not have a specific cellstyle, and modifies the value for the shape-key in-place to use the new BoxShape for drawing vertices.  This is done by assigning the box value in the second line, which refers to the name of the BoxShape in the cell renderer.

In the second case, a collection of key, value pairs is created and then added to the stylesheet under a new name.  In order to distinguish the shapename and the stylename we’ll use boxstyle for the stylename:

var style = new Object();
style[mxConstants.STYLE_SHAPE] = 'box';
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
graph.getStylesheet().putCellStyle('boxstyle', style);

The code adds a new style with the name boxstyle to the stylesheet.  To use this style with a cell, it must be referenced from the cellstyle as follows:

var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 20,
             'boxstyle');

To summarize, each new shape must be registered in the mxCellRenderer with a unique name.  That name is then used as the value of the shape-key in a default or custom style.  If there are multiple custom shapes, then there should be a separate style for each shape.

Inheriting Styles

For fill-, stroke-, gradient-, font- and indicatorColors special keywords can be used.  The inherit keyword for one of these colors will inherit the color for the same key from the parent cell.  The swimlane keyword does the same, but inherits from the nearest swimlane in the ancestor hierarchy.  Finally, the indicated keyword will use the color of the indicator as the color for the given key.

Scrollbars

The <containers> overflow CSS property defines if scrollbars are used to display the graph.  For values of ‘auto’ or ‘scroll’, the scrollbars will be shown.  Note that the resizeContainer flag is normally not used together with scrollbars, as it will resize the container to match the size of the graph after each change.

Multiplicities and Validation

To control the possible connections in mxGraph, getEdgeValidationError is used.  The default implementation of the function uses multiplicities, which is an array of mxMultiplicity.  Using this class allows to establish simple multiplicities, which are enforced by the graph.

The mxMultiplicity uses <mxCell.is> to determine for which terminals it applies.  The default implementation of <mxCell.is> works with DOM nodes (XML nodes) and checks if the given type parameter matches the nodeName of the node (case insensitive).  Optionally, an attributename and value can be specified which are also checked.

getEdgeValidationError is called whenever the connectivity of an edge changes.  It returns an empty string or an error message if the edge is invalid or null if the edge is valid.  If the returned string is not empty then it is displayed as an error message.

mxMultiplicity allows to specify the multiplicity between a terminal and its possible neighbors.  For example, if any rectangle may only be connected to, say, a maximum of two circles you can add the following rule to multiplicities:

graph.multiplicities.push(new mxMultiplicity(
  true, 'rectangle', null, null, 0, 2, ['circle'],
  'Only 2 targets allowed',
  'Only shape targets allowed'));

This will display the first error message whenever a rectangle is connected to more than two circles and the second error message if a rectangle is connected to anything but a circle.

For certain multiplicities, such as a minimum of 1 connection, which cannot be enforced at cell creation time (unless the cell is created together with the connection), mxGraph offers <validate> which checks all multiplicities for all cells and displays the respective error messages in an overlay icon on the cells.

If a cell is collapsed and contains validation errors, a respective warning icon is attached to the collapsed cell.

Auto-Layout

For automatic layout, the <getLayout> hook is provided in mxLayoutManager.  It can be overridden to return a layout algorithm for the children of a given cell.

Unconnected edges

The default values for all switches are designed to meet the requirements of general diagram drawing applications.  A very typical set of settings to avoid edges that are not connected is the following:

graph.setAllowDanglingEdges(false);
graph.setDisconnectOnMove(false);

Setting the cloneInvalidEdges switch to true is optional.  This switch controls if edges are inserted after a copy, paste or clone-drag if they are invalid.  For example, edges are invalid if copied or control-dragged without having selected the corresponding terminals and allowDanglingEdges is false, in which case the edges will not be cloned if the switch is false.

Output

To produce an XML representation for a diagram, the following code can be used.

var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(graph.getModel());

This will produce an XML node than can be handled using the DOM API or turned into a string representation using the following code:

var xml = mxUtils.getXml(node);

To obtain a formatted string, mxUtils.getPrettyXml can be used instead.

This string can now be stored in a local persistent storage (for example using Google Gears) or it can be passed to a backend using mxUtils.post as follows.  The url variable is the URL of the Java servlet, PHP page or HTTP handler, depending on the server.

var xmlString = encodeURIComponent(mxUtils.getXml(node));
mxUtils.post(url, 'xml='+xmlString, function(req)
{
  // Process server response using req of type mxXmlRequest
});

Input

To load an XML representation of a diagram into an existing graph object mxUtils.load can be used as follows.  The url variable is the URL of the Java servlet, PHP page or HTTP handler that produces the XML string.

var xmlDoc = mxUtils.load(url).getXml();
var node = xmlDoc.documentElement;
var dec = new mxCodec(node.ownerDocument);
dec.decode(node, graph.getModel());

For creating a page that loads the client and a diagram using a single request please refer to the deployment examples in the backends.

Functional dependencies

Resources

resources/graphLanguage resources for mxGraph
Summary
mxGraphExtends mxEventSource to implement a graph component for the browser.
Events
mxEvent.ROOTFires if the root in the model has changed.
mxEvent.ALIGN_CELLSFires between begin- and endUpdate in alignCells.
mxEvent.FLIP_EDGEFires between begin- and endUpdate in flipEdge.
mxEvent.ORDER_CELLSFires between begin- and endUpdate in orderCells.
mxEvent.CELLS_ORDEREDFires between begin- and endUpdate in cellsOrdered.
mxEvent.GROUP_CELLSFires between begin- and endUpdate in groupCells.
mxEvent.UNGROUP_CELLSFires between begin- and endUpdate in ungroupCells.
mxEvent.REMOVE_CELLS_FROM_PARENTFires between begin- and endUpdate in removeCellsFromParent.
mxEvent.ADD_CELLSFires between begin- and endUpdate in addCells.
mxEvent.CELLS_ADDEDFires between begin- and endUpdate in cellsAdded.
mxEvent.REMOVE_CELLSFires between begin- and endUpdate in removeCells.
mxEvent.CELLS_REMOVEDFires between begin- and endUpdate in cellsRemoved.
mxEvent.SPLIT_EDGEFires between begin- and endUpdate in splitEdge.
mxEvent.TOGGLE_CELLSFires between begin- and endUpdate in toggleCells.
mxEvent.FOLD_CELLSFires between begin- and endUpdate in foldCells.
mxEvent.CELLS_FOLDEDFires between begin- and endUpdate in cellsFolded.
mxEvent.UPDATE_CELL_SIZEFires between begin- and endUpdate in updateCellSize.
mxEvent.RESIZE_CELLSFires between begin- and endUpdate in resizeCells.
mxEvent.CELLS_RESIZEDFires between begin- and endUpdate in cellsResized.
mxEvent.MOVE_CELLSFires between begin- and endUpdate in moveCells.
mxEvent.CELLS_MOVEDFires between begin- and endUpdate in cellsMoved.
mxEvent.CONNECT_CELLFires between begin- and endUpdate in connectCell.
mxEvent.CELL_CONNECTEDFires between begin- and endUpdate in cellConnected.
mxEvent.REFRESHFires after refresh was executed.
mxEvent.CLICKFires in click after a click event.
mxEvent.DOUBLE_CLICKFires in dblClick after a double click.
mxEvent.GESTUREFires in fireGestureEvent after a touch gesture.
mxEvent.TAP_AND_HOLDFires in tapAndHold if a tap and hold event was detected.
mxEvent.FIRE_MOUSE_EVENTFires in fireMouseEvent before the mouse listeners are invoked.
mxEvent.SIZEFires after sizeDidChange was executed.
mxEvent.START_EDITINGFires before the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STARTEDFires after the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STOPPEDFires after the in-place editor stops in stopEditing.
mxEvent.LABEL_CHANGEDFires between begin- and endUpdate in cellLabelChanged.
mxEvent.ADD_OVERLAYFires after an overlay is added in addCellOverlay.
mxEvent.REMOVE_OVERLAYFires after an overlay is removed in removeCellOverlay and removeCellOverlays.
mxGraphConstructs a new mxGraph in the specified container.
Variables
mouseListenersHolds the mouse event listeners.
isMouseDownHolds the state of the mouse button.
modelHolds the mxGraphModel that contains the cells to be displayed.
viewHolds the mxGraphView that caches the mxCellStates for the cells.
stylesheetHolds the mxStylesheet that defines the appearance of the cells.
selectionModelHolds the mxGraphSelectionModel that models the current selection.
cellEditorHolds the mxCellEditor that is used as the in-place editing.
cellRendererHolds the mxCellRenderer for rendering the cells in the graph.
multiplicitiesAn array of mxMultiplicities describing the allowed connections in a graph.
renderHintRenderHint as it was passed to the constructor.
dialectDialect to be used for drawing the graph.
gridSizeSpecifies the grid size.
gridEnabledSpecifies if the grid is enabled.
portsEnabledSpecifies if ports are enabled.
nativeDoubleClickEnabledSpecifies if native double click events should be detected.
doubleTapEnabledSpecifies if double taps on touch-based devices should be handled as a double click.
doubleTapTimeoutSpecifies the timeout for double taps and non-native double clicks.
doubleTapToleranceSpecifies the tolerance for double taps and double clicks in quirks mode.
lastTouchXHolds the x-coordinate of the last touch event for double tap detection.
lastTouchXHolds the y-coordinate of the last touch event for double tap detection.
lastTouchTimeHolds the time of the last touch event for double click detection.
tapAndHoldEnabledSpecifies if tap and hold should be used for starting connections on touch-based devices.
tapAndHoldDelaySpecifies the time for a tap and hold.
tapAndHoldInProgressTrue if the timer for tap and hold events is running.
tapAndHoldValidTrue as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.
initialTouchXHolds the x-coordinate of the intial touch event for tap and hold.
initialTouchYHolds the y-coordinate of the intial touch event for tap and hold.
toleranceTolerance for a move to be handled as a single click.
defaultOverlapValue returned by getOverlap if isAllowOverlapParent returns true for the given cell.
defaultParentSpecifies the default parent to be used to insert new cells.
alternateEdgeStyleSpecifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.
backgroundImageSpecifies the mxImage to be returned by getBackgroundImage.
pageVisibleSpecifies if the background page should be visible.
pageBreaksVisibleSpecifies if a dashed line should be drawn between multiple pages.
pageBreakColorSpecifies the color for page breaks.
pageBreakDashedSpecifies the page breaks should be dashed.
minPageBreakDistSpecifies the minimum distance for page breaks to be visible.
preferPageSizeSpecifies if the graph size should be rounded to the next page number in sizeDidChange.
pageFormatSpecifies the page format for the background page.
pageScaleSpecifies the scale of the background page.
enabledSpecifies the return value for isEnabled.
escapeEnabledSpecifies if mxKeyHandler should invoke escape when the escape key is pressed.
invokesStopCellEditingIf true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.
enterStopsCellEditingIf true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
useScrollbarsForPanningSpecifies if scrollbars should be used for panning in panGraph if any scrollbars are available.
exportEnabledSpecifies the return value for canExportCell.
importEnabledSpecifies the return value for canImportCell.
cellsLockedSpecifies the return value for isCellLocked.
cellsCloneableSpecifies the return value for isCellCloneable.
foldingEnabledSpecifies if folding (collapse and expand via an image icon in the graph should be enabled).
cellsEditableSpecifies the return value for isCellEditable.
cellsDeletableSpecifies the return value for isCellDeletable.
cellsMovableSpecifies the return value for isCellMovable.
edgeLabelsMovableSpecifies the return value for edges in isLabelMovable.
vertexLabelsMovableSpecifies the return value for vertices in isLabelMovable.
dropEnabledSpecifies the return value for isDropEnabled.
splitEnabledSpecifies if dropping onto edges should be enabled.
cellsResizableSpecifies the return value for isCellResizable.
cellsBendableSpecifies the return value for isCellsBendable.
cellsSelectableSpecifies the return value for isCellSelectable.
cellsDisconnectableSpecifies the return value for <isCellDisconntable>.
autoSizeCellsSpecifies if the graph should automatically update the cell size after an edit.
autoSizeCellsOnAddSpecifies if autoSize style should be applied when cells are added.
autoScrollSpecifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.
ignoreScrollbarsSpecifies if the graph should automatically scroll regardless of the scrollbars.
translateToScrollPositionSpecifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.
timerAutoScrollSpecifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.
allowAutoPanningSpecifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.
autoExtendSpecifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.
maximumGraphBoundsmxRectangle that specifies the area in which all cells in the diagram should be placed.
minimumGraphSizemxRectangle that specifies the minimum size of the graph.
minimumContainerSizemxRectangle that specifies the minimum size of the <container> if resizeContainer is true.
maximumContainerSizemxRectangle that specifies the maximum size of the container if resizeContainer is true.
resizeContainerSpecifies if the container should be resized to the graph size when the graph size has changed.
borderBorder to be added to the bottom and right side when the container is being resized after the graph has been changed.
keepEdgesInForegroundSpecifies if edges should appear in the foreground regardless of their order in the model.
keepEdgesInBackgroundSpecifies if edges should appear in the background regardless of their order in the model.
allowNegativeCoordinatesSpecifies if negative coordinates for vertices are allowed.
constrainChildrenSpecifies if a child should be constrained inside the parent bounds after a move or resize of the child.
constrainRelativeChildrenSpecifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.
extendParentsSpecifies if a parent should contain the child bounds after a resize of the child.
extendParentsOnAddSpecifies if parents should be extended according to the extendParents switch if cells are added.
extendParentsOnAddSpecifies if parents should be extended according to the extendParents switch if cells are added.
recursiveResizeSpecifies the return value for isRecursiveResize.
collapseToPreferredSizeSpecifies if the cell size should be changed to the preferred size when a cell is first collapsed.
zoomFactorSpecifies the factor used for zoomIn and zoomOut.
keepSelectionVisibleOnZoomSpecifies if the viewport should automatically contain the selection cells after a zoom operation.
centerZoomSpecifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.
resetViewOnRootChangeSpecifies if the scale and translate should be reset if the root changes in the model.
resetEdgesOnResizeSpecifies if edge control points should be reset after the resize of a connected cell.
resetEdgesOnMoveSpecifies if edge control points should be reset after the move of a connected cell.
resetEdgesOnConnectSpecifies if edge control points should be reset after the the edge has been reconnected.
allowLoopsSpecifies if loops (aka self-references) are allowed.
defaultLoopStylemxEdgeStyle to be used for loops.
multigraphSpecifies if multiple edges in the same direction between the same pair of vertices are allowed.
connectableEdgesSpecifies if edges are connectable.
allowDanglingEdgesSpecifies if edges with disconnected terminals are allowed in the graph.
cloneInvalidEdgesSpecifies if edges that are cloned should be validated and only inserted if they are valid.
disconnectOnMoveSpecifies if edges should be disconnected from their terminals when they are moved.
labelsVisibleSpecifies if labels should be visible.
htmlLabelsSpecifies the return value for isHtmlLabel.
swimlaneSelectionEnabledSpecifies if swimlanes should be selectable via the content if the mouse is released.
swimlaneNestingSpecifies if nesting of swimlanes is allowed.
swimlaneIndicatorColorAttributeThe attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.
imageBundlesHolds the list of image bundles.
minFitScaleSpecifies the minimum scale to be applied in fit.
maxFitScaleSpecifies the maximum scale to be applied in fit.
panDxCurrent horizontal panning value.
panDyCurrent vertical panning value.
collapsedImageSpecifies the mxImage to indicate a collapsed state.
expandedImageSpecifies the mxImage to indicate a expanded state.
warningImageSpecifies the mxImage for the image to be used to display a warning overlay.
alreadyConnectedResourceSpecifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected.
containsValidationErrorsResourceSpecifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors.
collapseExpandResourceSpecifies the resource key for the tooltip on the collapse/expand icon.
initInitializes the <container> and creates the respective datastructures.
createHandlersCreates the tooltip-, panning-, connection- and graph-handler (in this order).
createTooltipHandlerCreates and returns a new mxTooltipHandler to be used in this graph.
createSelectionCellsHandlerCreates and returns a new mxTooltipHandler to be used in this graph.
createConnectionHandlerCreates and returns a new mxConnectionHandler to be used in this graph.
createGraphHandlerCreates and returns a new mxGraphHandler to be used in this graph.
createPanningHandlerCreates and returns a new mxPanningHandler to be used in this graph.
createPopupMenuHandlerCreates and returns a new mxPopupMenuHandler to be used in this graph.
createSelectionModelCreates a new mxGraphSelectionModel to be used in this graph.
createStylesheetCreates a new mxGraphSelectionModel to be used in this graph.
createGraphViewCreates a new mxGraphView to be used in this graph.
createCellRendererCreates a new mxCellRenderer to be used in this graph.
createCellEditorCreates a new mxCellEditor to be used in this graph.
getModelReturns the mxGraphModel that contains the cells.
getViewReturns the mxGraphView that contains the mxCellStates.
getStylesheetReturns the mxStylesheet that defines the style.
setStylesheetSets the mxStylesheet that defines the style.
getSelectionModelReturns the mxGraphSelectionModel that contains the selection.
setSelectionModelSets the <mxSelectionModel> that contains the selection.
getSelectionCellsForChangesReturns the cells to be selected for the given array of changes.
graphModelChangedCalled when the graph model changes.
updateSelectionRemoves selection cells that are not in the model from the selection.
processChangeProcesses the given change and invalidates the respective cached data in view.
removeStateForCellRemoves all cached information for the given cell and its descendants.
Overlays
addCellOverlayAdds an mxCellOverlay for the specified cell.
getCellOverlaysReturns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
removeCellOverlayRemoves and returns the given mxCellOverlay from the given cell.
removeCellOverlaysRemoves all mxCellOverlays from the given cell.
clearCellOverlaysRemoves all mxCellOverlays in the graph for the given cell and all its descendants.
setCellWarningCreates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.
In-place editing
startEditingCalls startEditingAtCell using the given cell or the first selection cell.
startEditingAtCellFires a startEditing event and invokes mxCellEditor.startEditing on <editor>.
getEditingValueReturns the initial value for in-place editing.
stopEditingStops the current editing and fires a <editingStopped> event.
labelChangedSets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.
cellLabelChangedSets the new label for a cell.
Event processing
escapeProcesses an escape keystroke.
clickProcesses a singleclick on an optional cell and fires a click event.
isSiblingSelectedReturns true if any sibling of the given cell is selected.
dblClickProcesses a doubleclick on an optional cell and fires a <dblclick> event.
tapAndHoldHandles the mxMouseEvent by highlighting the mxCellState.
scrollPointToVisibleScrolls the graph to the given point, extending the graph container if specified.
createPanningManagerCreates and returns an mxPanningManager.
getBorderSizesReturns the size of the border and padding on all four sides of the container.
getPreferredPageSizeReturns the preferred size of the background page if preferPageSize is true.
fitScales the graph such that the complete diagram fits into <container> and returns the current scale in the view.
sizeDidChangeCalled when the size of the graph has changed.
doResizeContainerResizes the container for the given graph width and height.
updatePageBreaksInvokes from sizeDidChange to redraw the page breaks.
Cell styles
getCurrentCellStyleReturns the style for the given cell from the cell state, if one exists, or using getCellStyle.
getCellStyleReturns an array of key, value pairs representing the cell style for the given cell.
postProcessCellStyleTries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.
setCellStyleSets the style of the specified cells.
toggleCellStyleToggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.
toggleCellStylesToggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.
setCellStylesSets the key to value in the styles of the given cells.
toggleCellStyleFlagsToggles the given bit for the given key in the styles of the specified cells.
setCellStyleFlagsSets or toggles the given bit for the given key in the styles of the specified cells.
Cell alignment and orientation
alignCellsAligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
flipEdgeToggles the style of the given edge between null (or empty) and alternateEdgeStyle.
addImageBundleAdds the specified mxImageBundle.
removeImageBundleRemoves the specified mxImageBundle.
getImageFromBundlesSearches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
Order
orderCellsMoves the given cells to the front or back.
cellsOrderedMoves the given cells to the front or back.
Grouping
groupCellsAdds the cells into the given group.
getCellsForGroupReturns the cells with the same parent as the first cell in the given array.
getBoundsForGroupReturns the bounds to be used for the given group and children.
createGroupCellHook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function.
ungroupCellsUngroups the given cells by moving the children the children to their parents parent and removing the empty groups.
getCellsForUngroupReturns the selection cells that can be ungrouped.
removeCellsAfterUngroupHook to remove the groups after ungroupCells.
removeCellsFromParentRemoves the specified cells from their parents and adds them to the default parent.
updateGroupBoundsUpdates the bounds of the given groups to include all children and returns the passed-in cells.
getBoundingBoxReturns the bounding box for the given array of mxCells.
Cell cloning, insertion and removal
cloneCellReturns the clone for the given cell.
cloneCellsReturns the clones for the given cells.
insertVertexAdds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.
createVertexHook method that creates the new vertex for insertVertex.
insertEdgeAdds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.
createEdgeHook method that creates the new edge for insertEdge.
addEdgeAdds the edge to the parent and connects it to the given source and target terminals.
addCellAdds the cell to the parent and connects it to the given source and target terminals.
addCellsAdds the cells to the parent at the given index, connecting each cell to the optional source and target terminal.
cellsAddedAdds the specified cells to the given parent.
autoSizeCellResizes the specified cell to just fit around the its label and/or children
removeCellsRemoves the given cells from the graph including all connected edges if includeEdges is true.
cellsRemovedRemoves the given cells from the model.
splitEdgeSplits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.
Cell visibility
toggleCellsSets the visible state of the specified cells and all connected edges if includeEdges is true.
cellsToggledSets the visible state of the specified cells.
Folding
foldCellsSets the collapsed state of the specified cells and all descendants if recurse is true.
cellsFoldedSets the collapsed state of the specified cells.
swapBoundsSwaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
updateAlternateBoundsUpdates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.
addAllEdgesReturns an array with the given cells and all edges that are connected to a cell or one of its descendants.
getAllEdgesReturns all edges connected to the given cells or its descendants.
Cell sizing
updateCellSizeUpdates the size of the given cell in the model using cellSizeUpdated.
cellSizeUpdatedUpdates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
getPreferredSizeForCellReturns the preferred width and height of the given mxCell as an mxRectangle.
resizeCellSets the bounds of the given cell using resizeCells.
resizeCellsSets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.
cellsResizedSets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event.
cellResizedResizes the parents recursively so that they contain the complete area of the resized child cell.
resizeChildCellsResizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
constrainChildCellsConstrains the children of the given cell using constrainChild.
scaleCellScales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
extendParentResizes the parents recursively so that they contain the complete area of the resized child cell.
Cell moving
importCellsClones and inserts the given cells into the graph using the move method and returns the inserted cells.
moveCellsMoves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.
cellsMovedMoves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.
translateCellTranslates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.
getCellContainmentAreaReturns the mxRectangle inside which a cell is to be kept.
getMaximumGraphBoundsReturns the bounds inside which the diagram should be kept as an mxRectangle.
constrainChildKeeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.
resetEdgesResets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.
resetEdgeResets the control points of the given edge.
Cell connecting and connection constraints
getOutlineConstraintReturns the constraint used to connect to the outline of the given state.
getAllConnectionConstraintsReturns an array of all mxConnectionConstraints for the given terminal.
getConnectionConstraintReturns an mxConnectionConstraint that describes the given connection point.
setConnectionConstraintSets the mxConnectionConstraint that describes the given connection point.
getConnectionPointReturns the nearest point in the list of absolute points or the center of the opposite terminal.
connectCellConnects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress.
cellConnectedSets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.
disconnectGraphDisconnects the given edges from the terminals which are not in the given array.
Drilldown
getCurrentRootReturns the current root of the displayed cell hierarchy.
getTranslateForRootReturns the translation to be used if the given cell is the root cell as an mxPoint.
isPortReturns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.
getTerminalForPortReturns the terminal to be used for a given port.
getChildOffsetForCellReturns the offset to be used for the cells inside the given cell.
enterGroupUses the given cell as the root of the displayed cell hierarchy.
exitGroupChanges the current root to the next valid root in the displayed cell hierarchy.
homeUses the root of the model as the root of the displayed cell hierarchy and selects the previous root.
isValidRootReturns true if the given cell is a valid root for the cell display hierarchy.
Graph display
getGraphBoundsReturns the bounds of the visible graph.
getCellBoundsReturns the scaled, translated bounds for the given cell.
getBoundingBoxFromGeometryReturns the bounding box for the geometries of the vertices in the given array of cells.
refreshClears all cell states or the states for the hierarchy starting at the given cell and validates the graph.
snapSnaps the given numeric value to the grid if gridEnabled is true.
snapDeltaSnaps the given delta with the given scaled bounds.
panGraphShifts the graph display by the given amount.
zoomInZooms into the graph by zoomFactor.
zoomOutZooms out of the graph by zoomFactor.
zoomActualResets the zoom and panning in the view.
zoomToZooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
centerCenters the graph in the container.
zoomZooms the graph using the given factor.
zoomToRectZooms the graph to the specified rectangle.
scrollCellToVisiblePans the graph so that it shows the given cell.
scrollRectToVisiblePans the graph so that it shows the given rectangle.
getCellGeometryReturns the mxGeometry for the given cell.
isCellVisibleReturns true if the given cell is visible in this graph.
isCellCollapsedReturns true if the given cell is collapsed in this graph.
isCellConnectableReturns true if the given cell is connectable in this graph.
isOrthogonalReturns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
isLoopReturns true if the given cell state is a loop.
isCloneEventReturns true if the given event is a clone event.
isTransparentClickEventHook for implementing click-through behaviour on selected cells.
isToggleEventReturns true if the given event is a toggle event.
isGridEnabledEventReturns true if the given mouse event should be aligned to the grid.
isConstrainedEventReturns true if the given mouse event should be aligned to the grid.
isIgnoreTerminalEventReturns true if the given mouse event should not allow any connections to be made.
Validation
validationAlertDisplays the given validation error in a dialog.
isEdgeValidChecks if the return value of getEdgeValidationError for the given arguments is null.
getEdgeValidationErrorReturns the validation error message to be displayed when inserting or changing an edges’ connectivity.
validateEdgeHook method for subclassers to return an error message for the given edge and terminals.
validateGraphValidates the graph by validating each descendant of the given cell or the root of the model.
getCellValidationErrorChecks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
validateCellHook method for subclassers to return an error message for the given cell and validation context.
Graph appearance
getBackgroundImageReturns the backgroundImage as an mxImage.
setBackgroundImageSets the new backgroundImage.
getFoldingImageReturns the mxImage used to display the collapsed state of the specified cell state.
convertValueToStringReturns the textual representation for the given cell.
getLabelReturns a string or DOM node that represents the label for the given cell.
isHtmlLabelReturns true if the label must be rendered as HTML markup.
isHtmlLabelsReturns htmlLabels.
setHtmlLabelsSets htmlLabels.
isWrappingThis enables wrapping for HTML labels.
isLabelClippedReturns true if the overflow portion of labels should be hidden.
getTooltipReturns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.
getTooltipForCellReturns the string or DOM node to be used as the tooltip for the given cell.
getLinkForCellReturns the string to be used as the link for the given cell.
getCursorForMouseEventReturns the cursor value to be used for the CSS of the shape for the given event.
getCursorForCellReturns the cursor value to be used for the CSS of the shape for the given cell.
getStartSizeReturns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.
getSwimlaneDirectionReturns the direction for the given swimlane style.
getActualStartSizeReturns the actual start size of the given swimlane taking into account direction and horizontal and vertial flip styles.
getImageReturns the image URL for the given cell state.
isTransparentStateReturns true if the given state has no stroke- or fillcolor and no image.
getVerticalAlignReturns the vertical alignment for the given cell state.
getIndicatorColorReturns the indicator color for the given cell state.
getIndicatorGradientColorReturns the indicator gradient color for the given cell state.
getIndicatorShapeReturns the indicator shape for the given cell state.
getIndicatorImageReturns the indicator image for the given cell state.
getBorderReturns the value of border.
setBorderSets the value of border.
isSwimlaneReturns true if the given cell is a swimlane in the graph.
Graph behaviour
isResizeContainerReturns resizeContainer.
setResizeContainerSets resizeContainer.
isEnabledReturns true if the graph is enabled.
setEnabledSpecifies if the graph should allow any interactions.
isEscapeEnabledReturns escapeEnabled.
setEscapeEnabledSets escapeEnabled.
isInvokesStopCellEditingReturns invokesStopCellEditing.
setInvokesStopCellEditingSets invokesStopCellEditing.
isEnterStopsCellEditingReturns enterStopsCellEditing.
setEnterStopsCellEditingSets enterStopsCellEditing.
isCellLockedReturns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
isCellsLockedReturns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
setCellsLockedSets if any cell may be moved, sized, bended, disconnected, edited or selected.
getCloneableCellsReturns the cells which may be exported in the given array of cells.
isCellCloneableReturns true if the given cell is cloneable.
isCellsCloneableReturns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
setCellsCloneableSpecifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.
getExportableCellsReturns the cells which may be exported in the given array of cells.
canExportCellReturns true if the given cell may be exported to the clipboard.
getImportableCellsReturns the cells which may be imported in the given array of cells.
canImportCellReturns true if the given cell may be imported from the clipboard.
isCellSelectableReturns true if the given cell is selectable.
isCellsSelectableReturns cellsSelectable.
setCellsSelectableSets cellsSelectable.
getDeletableCellsReturns the cells which may be exported in the given array of cells.
isCellDeletableReturns true if the given cell is moveable.
isCellsDeletableReturns cellsDeletable.
setCellsDeletableSets cellsDeletable.
isLabelMovableReturns true if the given edges’s label is moveable.
isCellRotatableReturns true if the given cell is rotatable.
getMovableCellsReturns the cells which are movable in the given array of cells.
isCellMovableReturns true if the given cell is moveable.
isCellsMovableReturns cellsMovable.
setCellsMovableSpecifies if the graph should allow moving of cells.
isGridEnabledReturns gridEnabled as a boolean.
setGridEnabledSpecifies if the grid should be enabled.
isPortsEnabledReturns portsEnabled as a boolean.
setPortsEnabledSpecifies if the ports should be enabled.
getGridSizeReturns gridSize.
setGridSizeSets gridSize.
getToleranceReturns tolerance.
setToleranceSets tolerance.
isVertexLabelsMovableReturns vertexLabelsMovable.
setVertexLabelsMovableSets vertexLabelsMovable.
isEdgeLabelsMovableReturns edgeLabelsMovable.
isEdgeLabelsMovableSets edgeLabelsMovable.
isSwimlaneNestingReturns swimlaneNesting as a boolean.
setSwimlaneNestingSpecifies if swimlanes can be nested by drag and drop.
isSwimlaneSelectionEnabledReturns swimlaneSelectionEnabled as a boolean.
setSwimlaneSelectionEnabledSpecifies if swimlanes should be selected if the mouse is released over their content area.
isMultigraphReturns multigraph as a boolean.
setMultigraphSpecifies if the graph should allow multiple connections between the same pair of vertices.
isAllowLoopsReturns allowLoops as a boolean.
setAllowDanglingEdgesSpecifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.
isAllowDanglingEdgesReturns allowDanglingEdges as a boolean.
setConnectableEdgesSpecifies if edges should be connectable.
isConnectableEdgesReturns connectableEdges as a boolean.
setCloneInvalidEdgesSpecifies if edges should be inserted when cloned but not valid wrt.
isCloneInvalidEdgesReturns cloneInvalidEdges as a boolean.
setAllowLoopsSpecifies if loops are allowed.
isDisconnectOnMoveReturns disconnectOnMove as a boolean.
setDisconnectOnMoveSpecifies if edges should be disconnected when moved.
isDropEnabledReturns dropEnabled as a boolean.
setDropEnabledSpecifies if the graph should allow dropping of cells onto or into other cells.
isSplitEnabledReturns splitEnabled as a boolean.
setSplitEnabledSpecifies if the graph should allow dropping of cells onto or into other cells.
isCellResizableReturns true if the given cell is resizable.
isCellsResizableReturns cellsResizable.
setCellsResizableSpecifies if the graph should allow resizing of cells.
isTerminalPointMovableReturns true if the given terminal point is movable.
isCellBendableReturns true if the given cell is bendable.
isCellsBendableReturns <cellsBenadable>.
setCellsBendableSpecifies if the graph should allow bending of edges.
isCellEditableReturns true if the given cell is editable.
isCellsEditableReturns cellsEditable.
setCellsEditableSpecifies if the graph should allow in-place editing for cell labels.
isCellDisconnectableReturns true if the given cell is disconnectable from the source or target terminal.
isCellsDisconnectableReturns cellsDisconnectable.
setCellsDisconnectableSets cellsDisconnectable.
isValidSourceReturns true if the given cell is a valid source for new connections.
isValidTargetReturns isValidSource for the given cell.
isValidConnectionReturns true if the given target cell is a valid target for source.
setConnectableSpecifies if the graph should allow new connections.
isConnectableReturns true if the <connectionHandler> is enabled.
setTooltipsSpecifies if tooltips should be enabled.
setPanningSpecifies if panning should be enabled.
isEditingReturns true if the given cell is currently being edited.
isAutoSizeCellReturns true if the size of the given cell should automatically be updated after a change of the label.
isAutoSizeCellsReturns autoSizeCells.
setAutoSizeCellsSpecifies if cell sizes should be automatically updated after a label change.
isExtendParentReturns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.
isExtendParentsReturns extendParents.
setExtendParentsSets extendParents.
isExtendParentsOnAddReturns extendParentsOnAdd.
setExtendParentsOnAddSets extendParentsOnAdd.
isExtendParentsOnMoveReturns <extendParentsOnMove>.
setExtendParentsOnMoveSets <extendParentsOnMove>.
isRecursiveResizeReturns recursiveResize.
setRecursiveResizeSets recursiveResize.
isConstrainChildReturns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.
isConstrainChildrenReturns constrainChildren.
setConstrainChildrenSets constrainChildren.
isConstrainRelativeChildrenReturns constrainRelativeChildren.
setConstrainRelativeChildrenSets constrainRelativeChildren.
isConstrainChildrenReturns allowNegativeCoordinates.
setConstrainChildrenSets allowNegativeCoordinates.
getOverlapReturns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.
isAllowOverlapParentReturns true if the given cell is allowed to be placed outside of the parents area.
getFoldableCellsReturns the cells which are movable in the given array of cells.
isCellFoldableReturns true if the given cell is foldable.
isValidDropTargetReturns true if the given cell is a valid drop target for the specified cells.
isSplitTargetReturns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
getDropTargetReturns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.
Cell retrieval
getDefaultParentReturns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.
setDefaultParentSets the defaultParent to the given cell.
getSwimlaneReturns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.
getSwimlaneAtReturns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
getCellAtReturns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.
intersectsReturns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
hitsSwimlaneContentReturns true if the given coordinate pair is inside the content are of the given swimlane.
getChildVerticesReturns the visible child vertices of the given parent.
getChildEdgesReturns the visible child edges of the given parent.
getChildCellsReturns the visible child vertices or edges in the given parent.
getConnectionsReturns all visible edges connected to the given cell without loops.
getIncomingEdgesReturns the visible incoming edges for the given cell.
getOutgoingEdgesReturns the visible outgoing edges for the given cell.
getEdgesReturns the incoming and/or outgoing edges for the given cell.
isValidAncestorReturns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.
getOppositesReturns all distinct visible opposite cells for the specified terminal on the given edges.
getEdgesBetweenReturns the edges between the given source and target.
getPointForEventReturns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.
getCellsReturns the child vertices and edges of the given parent that are contained in the given rectangle.
getCellsBeyondReturns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.
findTreeRootsReturns all children in the given parent which do not have incoming edges.
traverseTraverses the (directed) graph invoking the given function for each visited vertex and edge.
Selection
isCellSelectedReturns true if the given cell is selected.
isSelectionEmptyReturns true if the selection is empty.
clearSelectionClears the selection using mxGraphSelectionModel.clear.
getSelectionCountReturns the number of selected cells.
getSelectionCellReturns the first cell from the array of selected mxCells.
getSelectionCellsReturns the array of selected mxCells.
setSelectionCellSets the selection cell.
setSelectionCellsSets the selection cell.
addSelectionCellAdds the given cell to the selection.
addSelectionCellsAdds the given cells to the selection.
removeSelectionCellRemoves the given cell from the selection.
removeSelectionCellsRemoves the given cells from the selection.
selectRegionSelects and returns the cells inside the given rectangle for the specified event.
selectNextCellSelects the next cell.
selectPreviousCellSelects the previous cell.
selectParentCellSelects the parent cell.
selectChildCellSelects the first child cell.
selectCellSelects the next, parent, first child or previous cell, if all arguments are false.
selectAllSelects all children of the given parent cell or the children of the default parent if no parent is specified.
selectVerticesSelect all vertices inside the given parent or the default parent.
selectVerticesSelect all vertices inside the given parent or the default parent.
selectCellsSelects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.
selectCellForEventSelects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
selectCellsForEventSelects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
Selection state
createHandlerCreates a new handler for the given cell state.
createVertexHandlerHooks to create a new mxVertexHandler for the given mxCellState.
createEdgeHandlerHooks to create a new mxEdgeHandler for the given mxCellState.
createEdgeSegmentHandlerHooks to create a new <mxEdgeSegmentHandler> for the given mxCellState.
createElbowEdgeHandlerHooks to create a new mxElbowEdgeHandler for the given mxCellState.
Graph events
addMouseListenerAdds a listener to the graph event dispatch loop.
removeMouseListenerRemoves the specified graph listener.
updateMouseEventSets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.
getStateForEventReturns the state for the given touch event.
isEventIgnoredReturns true if the event should be ignored in fireMouseEvent.
isSyntheticEventIgnoredHook for ignoring synthetic mouse events after touchend in Firefox.
isEventSourceIgnoredReturns true if the event should be ignored in fireMouseEvent.
getEventStateReturns the mxCellState to be used when firing the mouse event for the given state.
fireMouseEventDispatches the given event in the graph event dispatch loop.
consumeMouseEventConsumes the given mxMouseEvent if it’s a touchStart event.
fireGestureEventDispatches a mxEvent.GESTURE event.
destroyDestroys the graph and all its resources.

Events

mxEvent.ROOT

Fires if the root in the model has changed.  This event has no properties.

mxEvent.ALIGN_CELLS

Fires between begin- and endUpdate in alignCells.  The <code>cells</code> and <code>align</code> properties contain the respective arguments that were passed to alignCells.

mxEvent.FLIP_EDGE

Fires between begin- and endUpdate in flipEdge.  The <code>edge</code> property contains the edge passed to flipEdge.

mxEvent.ORDER_CELLS

Fires between begin- and endUpdate in orderCells.  The <code>cells</code> and <code>back</code> properties contain the respective arguments that were passed to orderCells.

mxEvent.CELLS_ORDERED

Fires between begin- and endUpdate in cellsOrdered.  The <code>cells</code> and <code>back</code> arguments contain the respective arguments that were passed to cellsOrdered.

mxEvent.GROUP_CELLS

Fires between begin- and endUpdate in groupCells.  The <code>group</code>, <code>cells</code> and <code>border</code> arguments contain the respective arguments that were passed to groupCells.

mxEvent.UNGROUP_CELLS

Fires between begin- and endUpdate in ungroupCells.  The <code>cells</code> property contains the array of cells that was passed to ungroupCells.

mxEvent.REMOVE_CELLS_FROM_PARENT

Fires between begin- and endUpdate in removeCellsFromParent.  The <code>cells</code> property contains the array of cells that was passed to removeCellsFromParent.

mxEvent.ADD_CELLS

Fires between begin- and endUpdate in addCells.  The <code>cells</code>, <code>parent</code>, <code>index</code>, <code>source</code> and <code>target</code> properties contain the respective arguments that were passed to addCells.

mxEvent.CELLS_ADDED

Fires between begin- and endUpdate in cellsAdded.  The <code>cells</code>, <code>parent</code>, <code>index</code>, <code>source</code>, <code>target</code> and <code>absolute</code> properties contain the respective arguments that were passed to cellsAdded.

mxEvent.REMOVE_CELLS

Fires between begin- and endUpdate in removeCells.  The <code>cells</code> and <code>includeEdges</code> arguments contain the respective arguments that were passed to removeCells.

mxEvent.CELLS_REMOVED

Fires between begin- and endUpdate in cellsRemoved.  The <code>cells</code> argument contains the array of cells that was removed.

mxEvent.SPLIT_EDGE

Fires between begin- and endUpdate in splitEdge.  The <code>edge</code> property contains the edge to be splitted, the <code>cells</code>, <code>newEdge</code>, <code>dx</code> and <code>dy</code> properties contain the respective arguments that were passed to splitEdge.

mxEvent.TOGGLE_CELLS

Fires between begin- and endUpdate in toggleCells.  The <code>show</code>, <code>cells</code> and <code>includeEdges</code> properties contain the respective arguments that were passed to toggleCells.

mxEvent.FOLD_CELLS

Fires between begin- and endUpdate in foldCells.  The <code>collapse</code>, <code>cells</code> and <code>recurse</code> properties contain the respective arguments that were passed to foldCells.

mxEvent.CELLS_FOLDED

Fires between begin- and endUpdate in cellsFolded.  The <code>collapse</code>, <code>cells</code> and <code>recurse</code> properties contain the respective arguments that were passed to cellsFolded.

mxEvent.UPDATE_CELL_SIZE

Fires between begin- and endUpdate in updateCellSize.  The <code>cell</code> and <code>ignoreChildren</code> properties contain the respective arguments that were passed to updateCellSize.

mxEvent.RESIZE_CELLS

Fires between begin- and endUpdate in resizeCells.  The <code>cells</code> and <code>bounds</code> properties contain the respective arguments that were passed to resizeCells.

mxEvent.CELLS_RESIZED

Fires between begin- and endUpdate in cellsResized.  The <code>cells</code> and <code>bounds</code> properties contain the respective arguments that were passed to cellsResized.

mxEvent.MOVE_CELLS

Fires between begin- and endUpdate in moveCells.  The <code>cells</code>, <code>dx</code>, <code>dy</code>, <code>clone</code>, <code>target</code> and <code>event</code> properties contain the respective arguments that were passed to moveCells.

mxEvent.CELLS_MOVED

Fires between begin- and endUpdate in cellsMoved.  The <code>cells</code>, <code>dx</code>, <code>dy</code> and <code>disconnect</code> properties contain the respective arguments that were passed to cellsMoved.

mxEvent.CONNECT_CELL

Fires between begin- and endUpdate in connectCell.  The <code>edge</code>, <code>terminal</code> and <code>source</code> properties contain the respective arguments that were passed to connectCell.

mxEvent.CELL_CONNECTED

Fires between begin- and endUpdate in cellConnected.  The <code>edge</code>, <code>terminal</code> and <code>source</code> properties contain the respective arguments that were passed to cellConnected.

mxEvent.REFRESH

Fires after refresh was executed.  This event has no properties.

mxEvent.CLICK

Fires in click after a click event.  The <code>event</code> property contains the original mouse event and <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.DOUBLE_CLICK

Fires in dblClick after a double click.  The <code>event</code> property contains the original mouse event and the <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.GESTURE

Fires in fireGestureEvent after a touch gesture.  The <code>event</code> property contains the original gesture end event and the <code>cell</code> property contains the optional cell associated with the gesture.

mxEvent.TAP_AND_HOLD

Fires in tapAndHold if a tap and hold event was detected.  The <code>event</code> property contains the initial touch event and the <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.FIRE_MOUSE_EVENT

Fires in fireMouseEvent before the mouse listeners are invoked.  The <code>eventName</code> property contains the event name and the <code>event</code> property contains the mxMouseEvent.

mxEvent.SIZE

Fires after sizeDidChange was executed.  The <code>bounds</code> property contains the new graph bounds.

mxEvent.START_EDITING

Fires before the in-place editor starts in startEditingAtCell.  The <code>cell</code> property contains the cell that is being edited and the <code>event</code> property contains the optional event argument that was passed to startEditingAtCell.

mxEvent.EDITING_STARTED

Fires after the in-place editor starts in startEditingAtCell.  The <code>cell</code> property contains the cell that is being edited and the <code>event</code> property contains the optional event argument that was passed to startEditingAtCell.

mxEvent.EDITING_STOPPED

Fires after the in-place editor stops in stopEditing.

mxEvent.LABEL_CHANGED

Fires between begin- and endUpdate in cellLabelChanged.  The <code>cell</code> property contains the cell, the <code>value</code> property contains the new value for the cell, the <code>old</code> property contains the old value and the optional <code>event</code> property contains the mouse event that started the edit.

mxEvent.ADD_OVERLAY

Fires after an overlay is added in addCellOverlay.  The <code>cell</code> property contains the cell and the <code>overlay</code> property contains the mxCellOverlay that was added.

mxEvent.REMOVE_OVERLAY

Fires after an overlay is removed in removeCellOverlay and removeCellOverlays.  The <code>cell</code> property contains the cell and the <code>overlay</code> property contains the mxCellOverlay that was removed.

mxGraph

function mxGraph(container,
model,
renderHint,
stylesheet)

Constructs a new mxGraph in the specified container.  Model is an optional mxGraphModel.  If no model is provided, a new mxGraphModel instance is used as the model.  The container must have a valid owner document prior to calling this function in Internet Explorer.  RenderHint is a string to affect the display performance and rendering in IE, but not in SVG-based browsers.  The parameter is mapped to dialect, which may be one of mxConstants.DIALECT_SVG for SVG-based browsers, mxConstants.DIALECT_STRICTHTML for fastest display mode, mxConstants.DIALECT_PREFERHTML for faster display mode, mxConstants.DIALECT_MIXEDHTML for fast and mxConstants.DIALECT_VML for exact display mode (slowest).  The dialects are defined in mxConstants.  The default values are DIALECT_SVG for SVG-based browsers and DIALECT_MIXED for IE.

The possible values for the renderingHint parameter are explained below

fastThe parameter is based on the fact that the display performance is highly improved in IE if the VML is not contained within a VML group element.  The lack of a group element only slightly affects the display while panning, but improves the performance by almost a factor of 2, while keeping the display sufficiently accurate.  This also allows to render certain shapes as HTML if the display accuracy is not affected, which is implemented by <mxShape.isMixedModeHtml>.  This is the default setting and is mapped to DIALECT_MIXEDHTML.
fasterSame as fast, but more expensive shapes are avoided.  This is controlled by <mxShape.preferModeHtml>.  The default implementation will avoid gradients and rounded rectangles, but more significant shapes, such as rhombus, ellipse, actor and cylinder will be rendered accurately.  This setting is mapped to DIALECT_PREFERHTML.
fastestAlmost anything will be rendered in Html.  This allows for rectangles, labels and images.  This setting is mapped to DIALECT_STRICTHTML.
exactIf accurate panning is required and if the diagram is small (up to 100 cells), then this value should be used.  In this mode, a group is created that contains the VML.  This allows for accurate panning and is mapped to DIALECT_VML.

Example

To create a graph inside a DOM node with an id of graph

var container = document.getElementById('graph');
var graph = new mxGraph(container);

Parameters

containerOptional DOM node that acts as a container for the graph.  If this is null then the container can be initialized later using init.
modelOptional mxGraphModel that constitutes the graph data.
renderHintOptional string that specifies the display accuracy and performance.  Default is mxConstants.DIALECT_MIXEDHTML (for IE).
stylesheetOptional mxStylesheet to be used in the graph.

Variables

mouseListeners

mxGraph.prototype.mouseListeners

Holds the mouse event listeners.  See fireMouseEvent.

isMouseDown

mxGraph.prototype.isMouseDown

Holds the state of the mouse button.

model

mxGraph.prototype.model

Holds the mxGraphModel that contains the cells to be displayed.

view

mxGraph.prototype.view

Holds the mxGraphView that caches the mxCellStates for the cells.

stylesheet

mxGraph.prototype.stylesheet

Holds the mxStylesheet that defines the appearance of the cells.

Example

Use the following code to read a stylesheet into an existing graph.

var req = mxUtils.load('stylesheet.xml');
var root = req.getDocumentElement();
var dec = new mxCodec(root.ownerDocument);
dec.decode(root, graph.stylesheet);

selectionModel

mxGraph.prototype.selectionModel

Holds the mxGraphSelectionModel that models the current selection.

cellEditor

mxGraph.prototype.cellEditor

Holds the mxCellEditor that is used as the in-place editing.

cellRenderer

mxGraph.prototype.cellRenderer

Holds the mxCellRenderer for rendering the cells in the graph.

multiplicities

mxGraph.prototype.multiplicities

An array of mxMultiplicities describing the allowed connections in a graph.

renderHint

mxGraph.prototype.renderHint

RenderHint as it was passed to the constructor.

dialect

mxGraph.prototype.dialect

Dialect to be used for drawing the graph.  Possible values are all constants in mxConstants with a DIALECT-prefix.

gridSize

mxGraph.prototype.gridSize

Specifies the grid size.  Default is 10.

gridEnabled

mxGraph.prototype.gridEnabled

Specifies if the grid is enabled.  This is used in snap.  Default is true.

portsEnabled

mxGraph.prototype.portsEnabled

Specifies if ports are enabled.  This is used in cellConnected to update the respective style.  Default is true.

nativeDoubleClickEnabled

Specifies if native double click events should be detected.  Default is true.

doubleTapEnabled

mxGraph.prototype.doubleTapEnabled

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

doubleTapTimeout

mxGraph.prototype.doubleTapTimeout

Specifies the timeout for double taps and non-native double clicks.  Default is 500 ms.

doubleTapTolerance

mxGraph.prototype.doubleTapTolerance

Specifies the tolerance for double taps and double clicks in quirks mode.  Default is 25 pixels.

lastTouchX

Holds the x-coordinate of the last touch event for double tap detection.

lastTouchX

Holds the y-coordinate of the last touch event for double tap detection.

lastTouchTime

mxGraph.prototype.lastTouchTime

Holds the time of the last touch event for double click detection.

tapAndHoldEnabled

mxGraph.prototype.tapAndHoldEnabled

Specifies if tap and hold should be used for starting connections on touch-based devices.  Default is true.

tapAndHoldDelay

mxGraph.prototype.tapAndHoldDelay

Specifies the time for a tap and hold.  Default is 500 ms.

tapAndHoldInProgress

mxGraph.prototype.tapAndHoldInProgress

True if the timer for tap and hold events is running.

tapAndHoldValid

mxGraph.prototype.tapAndHoldValid

True as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.

initialTouchX

mxGraph.prototype.initialTouchX

Holds the x-coordinate of the intial touch event for tap and hold.

initialTouchY

mxGraph.prototype.initialTouchY

Holds the y-coordinate of the intial touch event for tap and hold.

tolerance

mxGraph.prototype.tolerance

Tolerance for a move to be handled as a single click.  Default is 4 pixels.

defaultOverlap

mxGraph.prototype.defaultOverlap

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.

defaultParent

mxGraph.prototype.defaultParent

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

alternateEdgeStyle

mxGraph.prototype.alternateEdgeStyle

Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.  Default is null.

backgroundImage

mxGraph.prototype.backgroundImage

Specifies the mxImage to be returned by getBackgroundImage.  Default is null.

Example

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

pageVisible

mxGraph.prototype.pageVisible

Specifies if the background page should be visible.  Default is false.  Not yet implemented.

pageBreaksVisible

mxGraph.prototype.pageBreaksVisible

Specifies if a dashed line should be drawn between multiple pages.  Default is false.  If you change this value while a graph is being displayed then you should call sizeDidChange to force an update of the display.

pageBreakColor

mxGraph.prototype.pageBreakColor

Specifies the color for page breaks.  Default is ‘gray’.

pageBreakDashed

mxGraph.prototype.pageBreakDashed

Specifies the page breaks should be dashed.  Default is true.

minPageBreakDist

mxGraph.prototype.minPageBreakDist

Specifies the minimum distance for page breaks to be visible.  Default is 20 (in pixels).

preferPageSize

mxGraph.prototype.preferPageSize

Specifies if the graph size should be rounded to the next page number in sizeDidChange.  This is only used if the graph container has scrollbars.  Default is false.

pageFormat

mxGraph.prototype.pageFormat

Specifies the page format for the background page.  Default is mxConstants.PAGE_FORMAT_A4_PORTRAIT.  This is used as the default in mxPrintPreview and for painting the background page if pageVisible is true and the pagebreaks if pageBreaksVisible is true.

pageScale

mxGraph.prototype.pageScale

Specifies the scale of the background page.  Default is 1.5.  Not yet implemented.

enabled

mxGraph.prototype.enabled

Specifies the return value for isEnabled.  Default is true.

escapeEnabled

mxGraph.prototype.escapeEnabled

Specifies if mxKeyHandler should invoke escape when the escape key is pressed.  Default is true.

invokesStopCellEditing

mxGraph.prototype.invokesStopCellEditing

If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.  This is implemented in a focus handler in mxCellEditor.  Default is true.

enterStopsCellEditing

mxGraph.prototype.enterStopsCellEditing

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

useScrollbarsForPanning

mxGraph.prototype.useScrollbarsForPanning

Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available.  If scrollbars are enabled in CSS, but no scrollbars appear because the graph is smaller than the container size, then no panning occurs if this is true.  Default is true.

exportEnabled

mxGraph.prototype.exportEnabled

Specifies the return value for canExportCell.  Default is true.

importEnabled

mxGraph.prototype.importEnabled

Specifies the return value for canImportCell.  Default is true.

cellsLocked

mxGraph.prototype.cellsLocked

Specifies the return value for isCellLocked.  Default is false.

cellsCloneable

mxGraph.prototype.cellsCloneable

Specifies the return value for isCellCloneable.  Default is true.

foldingEnabled

mxGraph.prototype.foldingEnabled

Specifies if folding (collapse and expand via an image icon in the graph should be enabled).  Default is true.

cellsEditable

mxGraph.prototype.cellsEditable

Specifies the return value for isCellEditable.  Default is true.

cellsDeletable

mxGraph.prototype.cellsDeletable

Specifies the return value for isCellDeletable.  Default is true.

cellsMovable

mxGraph.prototype.cellsMovable

Specifies the return value for isCellMovable.  Default is true.

edgeLabelsMovable

mxGraph.prototype.edgeLabelsMovable

Specifies the return value for edges in isLabelMovable.  Default is true.

vertexLabelsMovable

mxGraph.prototype.vertexLabelsMovable

Specifies the return value for vertices in isLabelMovable.  Default is false.

dropEnabled

mxGraph.prototype.dropEnabled

Specifies the return value for isDropEnabled.  Default is false.

splitEnabled

mxGraph.prototype.splitEnabled

Specifies if dropping onto edges should be enabled.  This is ignored if dropEnabled is false.  If enabled, it will call splitEdge to carry out the drop operation.  Default is true.

cellsResizable

mxGraph.prototype.cellsResizable

Specifies the return value for isCellResizable.  Default is true.

cellsBendable

mxGraph.prototype.cellsBendable

Specifies the return value for isCellsBendable.  Default is true.

cellsSelectable

mxGraph.prototype.cellsSelectable

Specifies the return value for isCellSelectable.  Default is true.

cellsDisconnectable

mxGraph.prototype.cellsDisconnectable

Specifies the return value for <isCellDisconntable>.  Default is true.

autoSizeCells

mxGraph.prototype.autoSizeCells

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

autoSizeCellsOnAdd

mxGraph.prototype.autoSizeCellsOnAdd

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

autoScroll

mxGraph.prototype.autoScroll

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.  Default is true.

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.

ignoreScrollbars

mxGraph.prototype.ignoreScrollbars

Specifies if the graph should automatically scroll regardless of the scrollbars.  This will scroll the container using positive values for scroll positions (ie usually only rightwards and downwards).  To avoid possible conflicts with panning, set translateToScrollPosition to true.

translateToScrollPosition

mxGraph.prototype.translateToScrollPosition

Specifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.  This can be used to avoid conflicts when using autoScroll and ignoreScrollbars with no scrollbars in the container.

timerAutoScroll

mxGraph.prototype.timerAutoScroll

Specifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.  This disables scrollPointToVisible and uses mxPanningManager instead.  If this is true then autoExtend is disabled.  It should only be used with a scroll buffer or when scollbars are visible and scrollable in all directions.  Default is false.

allowAutoPanning

mxGraph.prototype.allowAutoPanning

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 mxPanningManager.border to a positive value.  Default is false.

autoExtend

mxGraph.prototype.autoExtend

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.  Default is true.  See autoScroll.

maximumGraphBounds

mxGraph.prototype.maximumGraphBounds

mxRectangle that specifies the area in which all cells in the diagram should be placed.  Uses in getMaximumGraphBounds.  Use a width or height of 0 if you only want to give a upper, left corner.

minimumGraphSize

mxGraph.prototype.minimumGraphSize

mxRectangle that specifies the minimum size of the graph.  This is ignored if the graph container has no scrollbars.  Default is null.

minimumContainerSize

mxGraph.prototype.minimumContainerSize

mxRectangle that specifies the minimum size of the <container> if resizeContainer is true.

maximumContainerSize

mxGraph.prototype.maximumContainerSize

mxRectangle that specifies the maximum size of the container if resizeContainer is true.

resizeContainer

mxGraph.prototype.resizeContainer

Specifies if the container should be resized to the graph size when the graph size has changed.  Default is false.

border

mxGraph.prototype.border

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

keepEdgesInForeground

mxGraph.prototype.keepEdgesInForeground

Specifies if edges should appear in the foreground regardless of their order in the model.  If keepEdgesInForeground and keepEdgesInBackground are both true then the normal order is applied.  Default is false.

keepEdgesInBackground

mxGraph.prototype.keepEdgesInBackground

Specifies if edges should appear in the background regardless of their order in the model.  If keepEdgesInForeground and keepEdgesInBackground are both true then the normal order is applied.  Default is false.

allowNegativeCoordinates

mxGraph.prototype.allowNegativeCoordinates

Specifies if negative coordinates for vertices are allowed.  Default is true.

constrainChildren

mxGraph.prototype.constrainChildren

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

constrainRelativeChildren

mxGraph.prototype.constrainRelativeChildren

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

extendParents

mxGraph.prototype.extendParents

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

extendParentsOnAdd

mxGraph.prototype.extendParentsOnAdd

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

extendParentsOnAdd

Specifies if parents should be extended according to the extendParents switch if cells are added.  Default is false for backwards compatiblity.

recursiveResize

mxGraph.prototype.recursiveResize

Specifies the return value for isRecursiveResize.  Default is false for backwards compatiblity.

collapseToPreferredSize

mxGraph.prototype.collapseToPreferredSize

Specifies if the cell size should be changed to the preferred size when a cell is first collapsed.  Default is true.

zoomFactor

mxGraph.prototype.zoomFactor

Specifies the factor used for zoomIn and zoomOut.  Default is 1.2 (120%).

keepSelectionVisibleOnZoom

mxGraph.prototype.keepSelectionVisibleOnZoom

Specifies if the viewport should automatically contain the selection cells after a zoom operation.  Default is false.

centerZoom

mxGraph.prototype.centerZoom

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

resetViewOnRootChange

mxGraph.prototype.resetViewOnRootChange

Specifies if the scale and translate should be reset if the root changes in the model.  Default is true.

resetEdgesOnResize

mxGraph.prototype.resetEdgesOnResize

Specifies if edge control points should be reset after the resize of a connected cell.  Default is false.

resetEdgesOnMove

mxGraph.prototype.resetEdgesOnMove

Specifies if edge control points should be reset after the move of a connected cell.  Default is false.

resetEdgesOnConnect

mxGraph.prototype.resetEdgesOnConnect

Specifies if edge control points should be reset after the the edge has been reconnected.  Default is true.

allowLoops

mxGraph.prototype.allowLoops

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

defaultLoopStyle

mxGraph.prototype.defaultLoopStyle

mxEdgeStyle to be used for loops.  This is a fallback for loops if the mxConstants.STYLE_LOOP is undefined.  Default is mxEdgeStyle.Loop.

multigraph

mxGraph.prototype.multigraph

Specifies if multiple edges in the same direction between the same pair of vertices are allowed.  Default is true.

connectableEdges

mxGraph.prototype.connectableEdges

Specifies if edges are connectable.  Default is false.  This overrides the connectable field in edges.

allowDanglingEdges

mxGraph.prototype.allowDanglingEdges

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

cloneInvalidEdges

mxGraph.prototype.cloneInvalidEdges

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

disconnectOnMove

mxGraph.prototype.disconnectOnMove

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

labelsVisible

mxGraph.prototype.labelsVisible

Specifies if labels should be visible.  This is used in getLabel.  Default is true.

htmlLabels

mxGraph.prototype.htmlLabels

Specifies the return value for isHtmlLabel.  Default is false.

swimlaneSelectionEnabled

mxGraph.prototype.swimlaneSelectionEnabled

Specifies if swimlanes should be selectable via the content if the mouse is released.  Default is true.

swimlaneNesting

mxGraph.prototype.swimlaneNesting

Specifies if nesting of swimlanes is allowed.  Default is true.

swimlaneIndicatorColorAttribute

mxGraph.prototype.swimlaneIndicatorColorAttribute

The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.  Default is mxConstants.STYLE_FILLCOLOR.

imageBundles

mxGraph.prototype.imageBundles

Holds the list of image bundles.

minFitScale

mxGraph.prototype.minFitScale

Specifies the minimum scale to be applied in fit.  Default is 0.1.  Set this to null to allow any value.

maxFitScale

mxGraph.prototype.maxFitScale

Specifies the maximum scale to be applied in fit.  Default is 8.  Set this to null to allow any value.

panDx

mxGraph.prototype.panDx

Current horizontal panning value.  Default is 0.

panDy

mxGraph.prototype.panDy

Current vertical panning value.  Default is 0.

collapsedImage

mxGraph.prototype.collapsedImage

Specifies the mxImage to indicate a collapsed state.  Default value is mxClient.imageBasePath + ‘/collapsed.gif’

expandedImage

mxGraph.prototype.expandedImage

Specifies the mxImage to indicate a expanded state.  Default value is mxClient.imageBasePath + ‘/expanded.gif’

warningImage

mxGraph.prototype.warningImage

Specifies the mxImage for the image to be used to display a warning overlay.  See setCellWarning.  Default value is mxClient.imageBasePath + ‘/warning’.  The extension for the image depends on the platform.  It is ‘.png’ on the Mac and ‘.gif’ on all other platforms.

alreadyConnectedResource

mxGraph.prototype.alreadyConnectedResource

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 is ‘alreadyConnected’.

containsValidationErrorsResource

mxGraph.prototype.containsValidationErrorsResource

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 is ‘containsValidationErrors’.

collapseExpandResource

mxGraph.prototype.collapseExpandResource

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 is ‘collapse-expand’.

init

mxGraph.prototype.init = function(container)

Initializes the <container> and creates the respective datastructures.

Parameters

containerDOM node that will contain the graph display.

createHandlers

mxGraph.prototype.createHandlers = function()

Creates the tooltip-, panning-, connection- and graph-handler (in this order).  This is called in the constructor before init is called.

createTooltipHandler

mxGraph.prototype.createTooltipHandler = function()

Creates and returns a new mxTooltipHandler to be used in this graph.

createSelectionCellsHandler

mxGraph.prototype.createSelectionCellsHandler = function()

Creates and returns a new mxTooltipHandler to be used in this graph.

createConnectionHandler

mxGraph.prototype.createConnectionHandler = function()

Creates and returns a new mxConnectionHandler to be used in this graph.

createGraphHandler

mxGraph.prototype.createGraphHandler = function()

Creates and returns a new mxGraphHandler to be used in this graph.

createPanningHandler

mxGraph.prototype.createPanningHandler = function()

Creates and returns a new mxPanningHandler to be used in this graph.

createPopupMenuHandler

mxGraph.prototype.createPopupMenuHandler = function()

Creates and returns a new mxPopupMenuHandler to be used in this graph.

createSelectionModel

mxGraph.prototype.createSelectionModel = function()

Creates a new mxGraphSelectionModel to be used in this graph.

createStylesheet

mxGraph.prototype.createStylesheet = function()

Creates a new mxGraphSelectionModel to be used in this graph.

createGraphView

mxGraph.prototype.createGraphView = function()

Creates a new mxGraphView to be used in this graph.

createCellRenderer

mxGraph.prototype.createCellRenderer = function()

Creates a new mxCellRenderer to be used in this graph.

createCellEditor

mxGraph.prototype.createCellEditor = function()

Creates a new mxCellEditor to be used in this graph.

getModel

mxGraph.prototype.getModel = function()

Returns the mxGraphModel that contains the cells.

getView

mxGraph.prototype.getView = function()

Returns the mxGraphView that contains the mxCellStates.

getStylesheet

mxGraph.prototype.getStylesheet = function()

Returns the mxStylesheet that defines the style.

setStylesheet

mxGraph.prototype.setStylesheet = function(stylesheet)

Sets the mxStylesheet that defines the style.

getSelectionModel

mxGraph.prototype.getSelectionModel = function()

Returns the mxGraphSelectionModel that contains the selection.

setSelectionModel

mxGraph.prototype.setSelectionModel = function(selectionModel)

Sets the <mxSelectionModel> that contains the selection.

getSelectionCellsForChanges

mxGraph.prototype.getSelectionCellsForChanges = function(changes,
ignoreFn)

Returns the cells to be selected for the given array of changes.

Parameters

ignoreFnOptional function that takes a change and returns true if the change should be ignored.

graphModelChanged

mxGraph.prototype.graphModelChanged = function(changes)

Called when the graph model changes.  Invokes processChange on each item of the given array to update the view accordingly.

Parameters

changesArray that contains the individual changes.

updateSelection

mxGraph.prototype.updateSelection = function()

Removes selection cells that are not in the model from the selection.

processChange

mxGraph.prototype.processChange = function(change)

Processes the given change and invalidates the respective cached data in view.  This fires a <root> event if the root has changed in the model.

Parameters

changeObject that represents the change on the model.

removeStateForCell

mxGraph.prototype.removeStateForCell = function(cell)

Removes all cached information for the given cell and its descendants.  This is called when a cell was removed from the model.

Paramters

cellmxCell that was removed from the model.

Overlays

addCellOverlay

mxGraph.prototype.addCellOverlay = function(cell,
overlay)

Adds an mxCellOverlay for the specified cell.  This method fires an <addoverlay> event and returns the new mxCellOverlay.

Parameters

cellmxCell to add the overlay for.
overlaymxCellOverlay to be added for the cell.

getCellOverlays

mxGraph.prototype.getCellOverlays = function(cell)

Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.

Parameters

cellmxCell whose overlays should be returned.

removeCellOverlay

mxGraph.prototype.removeCellOverlay = function(cell,
overlay)

Removes and returns the given mxCellOverlay from the given cell.  This method fires a <removeoverlay> event.  If no overlay is given, then all overlays are removed using <removeOverlays>.

Parameters

cellmxCell whose overlay should be removed.
overlayOptional mxCellOverlay to be removed.

removeCellOverlays

mxGraph.prototype.removeCellOverlays = function(cell)

Removes all mxCellOverlays from the given cell.  This method fires a <removeoverlay> event for each mxCellOverlay and returns the array of mxCellOverlays that was removed from the cell.

Parameters

cellmxCell whose overlays should be removed

clearCellOverlays

mxGraph.prototype.clearCellOverlays = function(cell)

Removes all mxCellOverlays 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.

Parameters

cellOptional mxCell that represents the root of the subtree to remove the overlays from.  Default is the root in the model.

setCellWarning

mxGraph.prototype.setCellWarning = function(cell,
warning,
img,
isSelect)

Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.  The warning is displayed as a tooltip in a red font and may contain HTML markup.  If the warning is null or a zero length string, then all overlays are removed from the cell.

Example

graph.setCellWarning(cell, '<b>Warning:</b>: Hello, World!');

Parameters

cellmxCell whose warning should be set.
warningString that represents the warning to be displayed.
imgOptional mxImage to be used for the overlay.  Default is warningImage.
isSelectOptional boolean indicating if a click on the overlay should select the corresponding cell.  Default is false.

In-place editing

startEditing

mxGraph.prototype.startEditing = function(evt)

Calls startEditingAtCell using the given cell or the first selection cell.

Parameters

evtOptional mouse event that triggered the editing.

startEditingAtCell

mxGraph.prototype.startEditingAtCell = function(cell,
evt)

Fires a startEditing event and invokes mxCellEditor.startEditing on <editor>.  After editing was started, a <editingStarted> event is fired.

Parameters

cellmxCell to start the in-place editor for.
evtOptional mouse event that triggered the editing.

getEditingValue

mxGraph.prototype.getEditingValue = function(cell,
evt)

Returns the initial value for in-place editing.  This implementation returns convertValueToString for the given cell.  If this function is overridden, then mxGraphModel.valueForCellChanged should take care of correctly storing the actual new value inside the user object.

Parameters

cellmxCell for which the initial editing value should be returned.
evtOptional mouse event that triggered the editor.

stopEditing

mxGraph.prototype.stopEditing = function(cancel)

Stops the current editing and fires a <editingStopped> event.

Parameters

cancelBoolean that specifies if the current editing value should be stored.

labelChanged

mxGraph.prototype.labelChanged = function(cell,
value,
evt)

Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.  Returns the cell whose label was changed.

Parameters

cellmxCell whose label should be changed.
valueNew label to be assigned.
evtOptional event that triggered the change.

cellLabelChanged

mxGraph.prototype.cellLabelChanged = function(cell,
value,
autoSize)

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 mxGraphModel.valueForCellChanged without the need to clone the user object.

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

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

Parameters

cellmxCell whose label should be changed.
valueNew label to be assigned.
autoSizeBoolean that specifies if cellSizeUpdated should be called.

Event processing

escape

mxGraph.prototype.escape = function(evt)

Processes an escape keystroke.

Parameters

evtMouseevent that represents the keystroke.

click

mxGraph.prototype.click = function(me)

Processes a singleclick 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 mxMouseEvent has been consumed.

To handle a click event, use the following code.

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

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

Parameters

memxMouseEvent that represents the single click.

isSiblingSelected

mxGraph.prototype.isSiblingSelected = function(cell)

Returns true if any sibling of the given cell is selected.

dblClick

mxGraph.prototype.dblClick = function(evt,
cell)

Processes a doubleclick 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)
{
  var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell);
  this.fireEvent(mxe);

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

Example listener for this event.

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

Parameters

evtMouseevent that represents the doubleclick.
cellOptional mxCell under the mousepointer.

tapAndHold

mxGraph.prototype.tapAndHold = function(me)

Handles the mxMouseEvent by highlighting the mxCellState.

Parameters

memxMouseEvent that represents the touch event.
stateOptional mxCellState that is associated with the event.

scrollPointToVisible

mxGraph.prototype.scrollPointToVisible = function(x,
y,
extend,
border)

Scrolls the graph to the given point, extending the graph container if specified.

createPanningManager

mxGraph.prototype.createPanningManager = function()

Creates and returns an mxPanningManager.

getBorderSizes

mxGraph.prototype.getBorderSizes = function()

Returns the size of the border and padding on all four sides of the container.  The left, top, right and bottom borders are stored in the x, y, width and height of the returned mxRectangle, respectively.

getPreferredPageSize

mxGraph.prototype.getPreferredPageSize = function(bounds,
width,
height)

Returns the preferred size of the background page if preferPageSize is true.

fit

mxGraph.prototype.fit = function(border,
keepOrigin,
margin,
enabled,
ignoreWidth,
ignoreHeight,
maxHeight)

Scales the graph such that the complete diagram fits into <container> and returns the current scale in the view.  To fit an initial graph prior to rendering, set mxGraphView.rendering to false prior to changing the model and execute the following after changing the model.

graph.fit();
graph.view.rendering = true;
graph.refresh();

To fit and center the graph, the following code can be used.

var margin = 2;
var max = 3;

var bounds = graph.getGraphBounds();
var cw = graph.container.clientWidth - margin;
var ch = graph.container.clientHeight - margin;
var w = bounds.width / graph.view.scale;
var h = bounds.height / graph.view.scale;
var s = Math.min(max, Math.min(cw / w, ch / h));

graph.view.scaleAndTranslate(s,
  (margin + cw - w * s) / (2 * s) - bounds.x / graph.view.scale,
  (margin + ch - h * s) / (2 * s) - bounds.y / graph.view.scale);

Parameters

borderOptional number that specifies the border.  Default is border.
keepOriginOptional boolean that specifies if the translate should be changed.  Default is false.
marginOptional margin in pixels.  Default is 0.
enabledOptional boolean that specifies if the scale should be set or just returned.  Default is true.
ignoreWidthOptional boolean that specifies if the width should be ignored.  Default is false.
ignoreHeightOptional boolean that specifies if the height should be ignored.  Default is false.
maxHeightOptional maximum height.

sizeDidChange

mxGraph.prototype.sizeDidChange = function()

Called when the size of the graph has changed.  This implementation fires a <size> event after updating the clipping region of the SVG element in SVG-bases browsers.

doResizeContainer

mxGraph.prototype.doResizeContainer = function(width,
height)

Resizes the container for the given graph width and height.

updatePageBreaks

mxGraph.prototype.updatePageBreaks = function(visible,
width,
height)

Invokes from sizeDidChange to redraw the page breaks.

Parameters

visibleBoolean that specifies if page breaks should be shown.
widthSpecifies the width of the container in pixels.
heightSpecifies the height of the container in pixels.

Cell styles

getCurrentCellStyle

mxGraph.prototype.getCurrentCellStyle = function(cell,
ignoreState)

Returns the style for the given cell from the cell state, if one exists, or using getCellStyle.

Parameters

cellmxCell whose style should be returned as an array.
ignoreStateOptional boolean that specifies if the cell state should be ignored.

getCellStyle

mxGraph.prototype.getCellStyle = function(cell)

Returns an array of key, value pairs representing the cell style for the given cell.  If no string is defined in the model that specifies the style, then the default style for the cell is returned or an empty object, if no style can be found.  Note: You should try and get the cell state for the given cell and use the cached style in the state before using this method.

Parameters

cellmxCell whose style should be returned as an array.

postProcessCellStyle

mxGraph.prototype.postProcessCellStyle = function(style)

Tries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.

setCellStyle

mxGraph.prototype.setCellStyle = function(style,
cells)

Sets the style of the specified cells.  If no cells are given, then the selection cells are changed.

Parameters

styleString representing the new style of the cells.
cellsOptional array of mxCells to set the style for.  Default is the selection cells.

toggleCellStyle

mxGraph.prototype.toggleCellStyle = function(key,
defaultValue,
cell)

Toggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.  If no cell is specified then the selection cell is used.

Parameter

keyString representing the key for the boolean value to be toggled.
defaultValueOptional boolean default value if no value is defined.  Default is false.
cellOptional mxCell whose style should be modified.  Default is the selection cell.

toggleCellStyles

mxGraph.prototype.toggleCellStyles = function(key,
defaultValue,
cells)

Toggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.  If no cells are specified, then the selection cells are used.  For example, this can be used to toggle mxConstants.STYLE_ROUNDED or any other style with a boolean value.

Parameter

keyString representing the key for the boolean value to be toggled.
defaultValueOptional boolean default value if no value is defined.  Default is false.
cellsOptional array of mxCells whose styles should be modified.  Default is the selection cells.

setCellStyles

mxGraph.prototype.setCellStyles = function(key,
value,
cells)

Sets the key to value in the styles of the given cells.  This will modify the existing cell styles in-place and override any existing assignment for the given key.  If no cells are specified, then the selection cells are changed.  If no value is specified, then the respective key is removed from the styles.

Parameters

keyString representing the key to be assigned.
valueString representing the new value for the key.
cellsOptional array of mxCells to change the style for.  Default is the selection cells.

toggleCellStyleFlags

mxGraph.prototype.toggleCellStyleFlags = function(key,
flag,
cells)

Toggles the given bit for the given key in the styles of the specified cells.

Parameters

keyString representing the key to toggle the flag in.
flagInteger that represents the bit to be toggled.
cellsOptional array of mxCells to change the style for.  Default is the selection cells.

setCellStyleFlags

mxGraph.prototype.setCellStyleFlags = function(key,
flag,
value,
cells)

Sets or toggles the given bit for the given key in the styles of the specified cells.

Parameters

keyString representing the key to toggle the flag in.
flagInteger that represents the bit to be toggled.
valueBoolean value to be used or null if the value should be toggled.
cellsOptional array of mxCells to change the style for.  Default is the selection cells.

Cell alignment and orientation

alignCells

mxGraph.prototype.alignCells = function(align,
cells,
param)

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

Parameters

alignSpecifies the alignment.  Possible values are all constants in mxConstants with an ALIGN prefix.
cellsArray of mxCells to be aligned.
paramOptional coordinate for the alignment.

flipEdge

mxGraph.prototype.flipEdge = function(edge)

Toggles the style of the given edge between null (or empty) and alternateEdgeStyle.  This method fires mxEvent.FLIP_EDGE while the transaction is in progress.  Returns the edge that was flipped.

Here is an example that overrides this implementation to invert the value of mxConstants.STYLE_ELBOW without removing any existing styles.

graph.flipEdge = function(edge)
{
  if (edge != null)
  {
    var style = this.getCurrentCellStyle(edge);
    var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
        mxConstants.ELBOW_HORIZONTAL);
    var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
        mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
    this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
  }
};

Parameters

edgemxCell whose style should be changed.

addImageBundle

mxGraph.prototype.addImageBundle = function(bundle)

Adds the specified mxImageBundle.

removeImageBundle

mxGraph.prototype.removeImageBundle = function(bundle)

Removes the specified mxImageBundle.

getImageFromBundles

mxGraph.prototype.getImageFromBundles = function(key)

Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.

Order

orderCells

mxGraph.prototype.orderCells = function(back,
cells)

Moves the given cells to the front or back.  The change is carried out using cellsOrdered.  This method fires mxEvent.ORDER_CELLS while the transaction is in progress.

Parameters

backBoolean that specifies if the cells should be moved to back.
cellsArray of mxCells to move to the background.  If null is specified then the selection cells are used.

cellsOrdered

mxGraph.prototype.cellsOrdered = function(cells,
back)

Moves the given cells to the front or back.  This method fires mxEvent.CELLS_ORDERED while the transaction is in progress.

Parameters

cellsArray of mxCells whose order should be changed.
backBoolean that specifies if the cells should be moved to back.

Grouping

groupCells

mxGraph.prototype.groupCells = function(group,
border,
cells)

Adds the cells into the given group.  The change is carried out using cellsAdded, cellsMoved and cellsResized.  This method fires mxEvent.GROUP_CELLS while the transaction is in progress.  Returns the new group.  A group is only created if there is at least one entry in the given array of cells.

Parameters

groupmxCell that represents the target group.  If null is specified then a new group is created using createGroupCell.
borderOptional integer that specifies the border between the child area and the group bounds.  Default is 0.
cellsOptional array of mxCells to be grouped.  If null is specified then the selection cells are used.

getCellsForGroup

mxGraph.prototype.getCellsForGroup = function(cells)

Returns the cells with the same parent as the first cell in the given array.

getBoundsForGroup

mxGraph.prototype.getBoundsForGroup = function(group,
children,
border)

Returns the bounds to be used for the given group and children.

createGroupCell

mxGraph.prototype.createGroupCell = function(cells)

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

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

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

  return group;
};

ungroupCells

mxGraph.prototype.ungroupCells = function(cells)

Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups.  Returns the children that have been removed from the groups.

Parameters

cellsArray of cells to be ungrouped.  If null is specified then the selection cells are used.

getCellsForUngroup

mxGraph.prototype.getCellsForUngroup = function()

Returns the selection cells that can be ungrouped.

removeCellsAfterUngroup

mxGraph.prototype.removeCellsAfterUngroup = function(cells)

Hook to remove the groups after ungroupCells.

Parameters

cellsArray of mxCells that were ungrouped.

removeCellsFromParent

mxGraph.prototype.removeCellsFromParent = function(cells)

Removes the specified cells from their parents and adds them to the default parent.  Returns the cells that were removed from their parents.

Parameters

cellsArray of mxCells to be removed from their parents.

updateGroupBounds

mxGraph.prototype.updateGroupBounds = function(cells,
border,
moveGroup,
topBorder,
rightBorder,
bottomBorder,
leftBorder)

Updates the bounds of the given groups to include all children and returns the passed-in cells.  Call this with the groups in parent to child order, top-most group first, the cells are processed in reverse order and cells with no children are ignored.

Parameters

cellsThe groups whose bounds should be updated.  If this is null, then the selection cells are used.
borderOptional border to be added in the group.  Default is 0.
moveGroupOptional boolean that allows the group to be moved.  Default is false.
topBorderOptional top border to be added in the group.  Default is 0.
rightBorderOptional top border to be added in the group.  Default is 0.
bottomBorderOptional top border to be added in the group.  Default is 0.
leftBorderOptional top border to be added in the group.  Default is 0.

getBoundingBox

mxGraph.prototype.getBoundingBox = function(cells)

Returns the bounding box for the given array of mxCells.  The bounding box for each cell and its descendants is computed using mxGraphView.getBoundingBox.

Parameters

cellsArray of mxCells whose bounding box should be returned.

Cell cloning, insertion and removal

cloneCell

mxGraph.prototype.cloneCell = function(cell,
allowInvalidEdges,
mapping,
keepPosition)

Returns the clone for the given cell.  Uses cloneCells.

Parameters

cellmxCell to be cloned.
allowInvalidEdgesOptional boolean that specifies if invalid edges should be cloned.  Default is true.
mappingOptional mapping for existing clones.
keepPositionOptional boolean indicating if the position of the cells should be updated to reflect the lost parent cell.  Default is false.

cloneCells

mxGraph.prototype.cloneCells = function(cells,
allowInvalidEdges,
mapping,
keepPosition)

Returns the clones for the given cells.  The clones are created recursively using mxGraphModel.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.

Parameters

cellsArray of mxCells to be cloned.
allowInvalidEdgesOptional boolean that specifies if invalid edges should be cloned.  Default is true.
mappingOptional mapping for existing clones.
keepPositionOptional boolean indicating if the position of the cells should be updated to reflect the lost parent cell.  Default is false.

insertVertex

mxGraph.prototype.insertVertex = function(parent,
id,
value,
x,
y,
width,
height,
style,
relative)

Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.  The id and style are used for the respective properties of the new mxCell, which is returned.

When adding new vertices from a mouse event, one should take into account the offset of the graph container and the scale and translation of the view in order to find the correct unscaled, untranslated coordinates using mxGraph.getPointForEvent as follows:

var pt = graph.getPointForEvent(evt);
var parent = graph.getDefaultParent();
graph.insertVertex(parent, null,
         'Hello, World!', x, y, 220, 30);

For adding image cells, the style parameter can be assigned as

stylename;image=imageUrl

See mxGraph for more information on using images.

Parameters

parentmxCell that specifies the parent of the new vertex.
idOptional string that defines the Id of the new vertex.
valueObject to be used as the user object.
xInteger that defines the x coordinate of the vertex.
yInteger that defines the y coordinate of the vertex.
widthInteger that defines the width of the vertex.
heightInteger that defines the height of the vertex.
styleOptional string that defines the cell style.
relativeOptional boolean that specifies if the geometry is relative.  Default is false.

createVertex

mxGraph.prototype.createVertex = function(parent,
id,
value,
x,
y,
width,
height,
style,
relative)

Hook method that creates the new vertex for insertVertex.

insertEdge

mxGraph.prototype.insertEdge = function(parent,
id,
value,
source,
target,
style)

Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.  The id and style are used for the respective properties of the new mxCell, which is returned.

Parameters

parentmxCell that specifies the parent of the new edge.
idOptional string that defines the Id of the new edge.
valueJavaScript object to be used as the user object.
sourcemxCell that defines the source of the edge.
targetmxCell that defines the target of the edge.
styleOptional string that defines the cell style.

createEdge

mxGraph.prototype.createEdge = function(parent,
id,
value,
source,
target,
style)

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.

addEdge

mxGraph.prototype.addEdge = function(edge,
parent,
source,
target,
index)

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

Parameters

edgemxCell to be inserted into the given parent.
parentmxCell that represents the new parent.  If no parent is given then the default parent is used.
sourceOptional mxCell that represents the source terminal.
targetOptional mxCell that represents the target terminal.
indexOptional index to insert the cells at.  Default is to append.

addCell

mxGraph.prototype.addCell = function(cell,
parent,
index,
source,
target)

Adds the cell to the parent and connects it to the given source and target terminals.  This is a shortcut method.  Returns the cell that was added.

Parameters

cellmxCell to be inserted into the given parent.
parentmxCell that represents the new parent.  If no parent is given then the default parent is used.
indexOptional index to insert the cells at.  Default is to append.
sourceOptional mxCell that represents the source terminal.
targetOptional mxCell that represents the target terminal.

addCells

mxGraph.prototype.addCells = function(cells,
parent,
index,
source,
target,
absolute)

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 mxEvent.ADD_CELLS while the transaction is in progress.  Returns the cells that were added.

Parameters

cellsArray of mxCells to be inserted.
parentmxCell that represents the new parent.  If no parent is given then the default parent is used.
indexOptional index to insert the cells at.  Default is to append.
sourceOptional source mxCell for all inserted cells.
targetOptional target mxCell for all inserted cells.
absoluteOptional boolean indicating of cells should be kept at their absolute position.  Default is false.

cellsAdded

mxGraph.prototype.cellsAdded = function(cells,
parent,
index,
source,
target,
absolute,
constrain,
extend)

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

autoSizeCell

mxGraph.prototype.autoSizeCell = function(cell,
recurse)

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

Parameters

cellmxCells to be resized.
recurseOptional boolean which specifies if all descendants should be autosized.  Default is true.

removeCells

mxGraph.prototype.removeCells = function(cells,
includeEdges)

Removes the given cells from the graph including all connected edges if includeEdges is true.  The change is carried out using cellsRemoved.  This method fires mxEvent.REMOVE_CELLS while the transaction is in progress.  The removed cells are returned as an array.

Parameters

cellsArray of mxCells to remove.  If null is specified then the selection cells which are deletable are used.
includeEdgesOptional boolean which specifies if all connected edges should be removed as well.  Default is true.

cellsRemoved

mxGraph.prototype.cellsRemoved = function(cells)

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

Parameters

cellsArray of mxCells to remove.

splitEdge

mxGraph.prototype.splitEdge = function(edge,
cells,
newEdge,
dx,
dy,
x,
y,
parent)

Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.  This method fires mxEvent.SPLIT_EDGE while the transaction is in progress.  Returns the new edge that was inserted.

Parameters

edgemxCell that represents the edge to be splitted.
cellsmxCells that represents the cells to insert into the edge.
newEdgemxCell that represents the edge to be inserted.
dxOptional integer that specifies the vector to move the cells.
dyOptional integer that specifies the vector to move the cells.
xInteger that specifies the x-coordinate of the drop location.
yInteger that specifies the y-coordinate of the drop location.
parentOptional parent to insert the cell.  If null the parent of the edge is used.

Cell visibility

toggleCells

mxGraph.prototype.toggleCells = function(show,
cells,
includeEdges)

Sets the visible state of the specified cells and all connected edges if includeEdges is true.  The change is carried out using cellsToggled.  This method fires mxEvent.TOGGLE_CELLS while the transaction is in progress.  Returns the cells whose visible state was changed.

Parameters

showBoolean that specifies the visible state to be assigned.
cellsArray of mxCells whose visible state should be changed.  If null is specified then the selection cells are used.
includeEdgesOptional boolean indicating if the visible state of all connected edges should be changed as well.  Default is true.

cellsToggled

mxGraph.prototype.cellsToggled = function(cells,
show)

Sets the visible state of the specified cells.

Parameters

cellsArray of mxCells whose visible state should be changed.
showBoolean that specifies the visible state to be assigned.

Folding

foldCells

mxGraph.prototype.foldCells = function(collapse,
recurse,
cells,
checkFoldable,
evt)

Sets the collapsed state of the specified cells and all descendants if recurse is true.  The change is carried out using cellsFolded.  This method fires mxEvent.FOLD_CELLS while the transaction is in progress.  Returns the cells whose collapsed state was changed.

Parameters

collapsedBoolean indicating the collapsed state to be assigned.
recurseOptional boolean indicating if the collapsed state of all descendants should be set.  Default is false.
cellsArray of mxCells whose collapsed state should be set.  If null is specified then the foldable selection cells are used.
checkFoldableOptional boolean indicating of isCellFoldable should be checked.  Default is false.
evtOptional native event that triggered the invocation.

cellsFolded

mxGraph.prototype.cellsFolded = function(cells,
collapse,
recurse,
checkFoldable)

Sets the collapsed state of the specified cells.  This method fires mxEvent.CELLS_FOLDED while the transaction is in progress.  Returns the cells whose collapsed state was changed.

Parameters

cellsArray of mxCells whose collapsed state should be set.
collapsedBoolean indicating the collapsed state to be assigned.
recurseBoolean indicating if the collapsed state of all descendants should be set.
checkFoldableOptional boolean indicating of isCellFoldable should be checked.  Default is false.

swapBounds

mxGraph.prototype.swapBounds = function(cell,
willCollapse)

Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.

Parameters

cellmxCell for which the bounds should be swapped.
willCollapseBoolean indicating if the cell is going to be collapsed.

updateAlternateBounds

mxGraph.prototype.updateAlternateBounds = function(cell,
geo,
willCollapse)

Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.  If no alternate bounds are defined in the geometry and collapseToPreferredSize is true, then the preferred size is used for the alternate bounds.  The top, left corner is always kept at the same location.

Parameters

cellmxCell for which the geometry is being udpated.
gmxGeometry for which the alternate bounds should be updated.
willCollapseBoolean indicating if the cell is going to be collapsed.

addAllEdges

mxGraph.prototype.addAllEdges = function(cells)

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

getAllEdges

mxGraph.prototype.getAllEdges = function(cells)

Returns all edges connected to the given cells or its descendants.

Cell sizing

updateCellSize

mxGraph.prototype.updateCellSize = function(cell,
ignoreChildren)

Updates the size of the given cell in the model using cellSizeUpdated.  This method fires mxEvent.UPDATE_CELL_SIZE while the transaction is in progress.  Returns the cell whose size was updated.

Parameters

cellmxCell whose size should be updated.

cellSizeUpdated

mxGraph.prototype.cellSizeUpdated = function(cell,
ignoreChildren)

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

Parameters

cellmxCell for which the size should be changed.

getPreferredSizeForCell

mxGraph.prototype.getPreferredSizeForCell = function(cell,
textWidth)

Returns the preferred width and height of the given mxCell as an mxRectangle.  To implement a minimum width, add a new style eg. minWidth in the vertex and override this method as follows.

var graphGetPreferredSizeForCell = graph.getPreferredSizeForCell;
graph.getPreferredSizeForCell = function(cell)
{
  var result = graphGetPreferredSizeForCell.apply(this, arguments);
  var style = this.getCellStyle(cell);

  if (style['minWidth'] > 0)
  {
    result.width = Math.max(style['minWidth'], result.width);
  }

  return result;
};

Parameters

cellmxCell for which the preferred size should be returned.
textWidthOptional maximum text width for word wrapping.

resizeCell

mxGraph.prototype.resizeCell = function(cell,
bounds,
recurse)

Sets the bounds of the given cell using resizeCells.  Returns the cell which was passed to the function.

Parameters

cellmxCell whose bounds should be changed.
boundsmxRectangle that represents the new bounds.

resizeCells

mxGraph.prototype.resizeCells = function(cells,
bounds,
recurse)

Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.  Returns the cells which have been passed to the function.

Parameters

cellsArray of mxCells whose bounds should be changed.
boundsArray of mxRectangles that represent the new bounds.

cellsResized

mxGraph.prototype.cellsResized = function(cells,
bounds,
recurse)

Sets the bounds of the given cells and fires a mxEvent.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.getModel().getChildCount(cells[i]) > 0)
      {
        var geo = graph.getCellGeometry(cells[i]);

        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.getModel().setGeometry(cells[i], geo);
        }
      }
    }
  }
});

Parameters

cellsArray of mxCells whose bounds should be changed.
boundsArray of mxRectangles that represent the new bounds.
recurseOptional boolean that specifies if the children should be resized.

cellResized

mxGraph.prototype.cellResized = function(cell,
bounds,
ignoreRelative,
recurse)

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

Parameters

cellmxCell whose bounds should be changed.
boundsmxRectangles that represent the new bounds.
ignoreRelativeBoolean that indicates if relative cells should be ignored.
recurseOptional boolean that specifies if the children should be resized.

resizeChildCells

mxGraph.prototype.resizeChildCells = function(cell,
newGeo)

Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.

Parameters

cellmxCell that has been resized.
newGeomxGeometry that represents the new bounds.

constrainChildCells

mxGraph.prototype.constrainChildCells = function(cell)

Constrains the children of the given cell using constrainChild.

Parameters

cellmxCell that has been resized.

scaleCell

mxGraph.prototype.scaleCell = function(cell,
dx,
dy,
recurse)

Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.

Parameters

cellmxCell whose geometry should be scaled.
dxHorizontal scaling factor.
dyVertical scaling factor.
recurseBoolean indicating if the child cells should be scaled.

extendParent

mxGraph.prototype.extendParent = function(cell)

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

Parameters

cellmxCell that has been resized.

Cell moving

importCells

mxGraph.prototype.importCells = function(cells,
dx,
dy,
target,
evt,
mapping)

Clones and inserts the given cells into the graph using the move method and returns the inserted cells.  This shortcut is used if cells are inserted via datatransfer.

Parameters

cellsArray of mxCells to be imported.
dxInteger that specifies the x-coordinate of the vector.  Default is 0.
dyInteger that specifies the y-coordinate of the vector.  Default is 0.
targetmxCell that represents the new parent of the cells.
evtMouseevent that triggered the invocation.
mappingOptional mapping for existing clones.

moveCells

mxGraph.prototype.moveCells = function(cells,
dx,
dy,
clone,
target,
evt,
mapping)

Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.  The evt is the mouse event as the mouse was released.  The change is carried out using cellsMoved.  This method fires mxEvent.MOVE_CELLS while the transaction is in progress.  Returns the cells that were moved.

Use the following code to move all cells in the graph.

graph.moveCells(graph.getChildCells(null, true, true), 10, 10);

Parameters

cellsArray of mxCells to be moved, cloned or added to the target.
dxInteger that specifies the x-coordinate of the vector.  Default is 0.
dyInteger that specifies the y-coordinate of the vector.  Default is 0.
cloneBoolean indicating if the cells should be cloned.  Default is false.
targetmxCell that represents the new parent of the cells.
evtMouseevent that triggered the invocation.
mappingOptional mapping for existing clones.

cellsMoved

mxGraph.prototype.cellsMoved = function(cells,
dx,
dy,
disconnect,
constrain,
extend)

Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.  This method fires mxEvent.CELLS_MOVED while the transaction is in progress.

translateCell

mxGraph.prototype.translateCell = function(cell,
dx,
dy)

Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.

getCellContainmentArea

mxGraph.prototype.getCellContainmentArea = function(cell)

Returns the mxRectangle inside which a cell is to be kept.

Parameters

cellmxCell for which the area should be returned.

getMaximumGraphBounds

mxGraph.prototype.getMaximumGraphBounds = function()

Returns the bounds inside which the diagram should be kept as an mxRectangle.

constrainChild

mxGraph.prototype.constrainChild = function(cell,
sizeFirst)

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.

Parameters

cellsmxCell which should be constrained.
sizeFirstSpecifies if the size should be changed first.  Default is true.

resetEdges

mxGraph.prototype.resetEdges = function(cells)

Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.

Parameters

cellsArray of mxCells for which the connected edges should be reset.

resetEdge

mxGraph.prototype.resetEdge = function(edge)

Resets the control points of the given edge.

Parameters

edgemxCell whose points should be reset.

Cell connecting and connection constraints

getOutlineConstraint

mxGraph.prototype.getOutlineConstraint = function(point,
terminalState,
me)

Returns the constraint used to connect to the outline of the given state.

getAllConnectionConstraints

mxGraph.prototype.getAllConnectionConstraints = function(terminal,
source)

Returns an array of all mxConnectionConstraints for the given terminal.  If the shape of the given terminal is a <mxStencilShape> then the constraints of the corresponding mxStencil are returned.

Parameters

terminalmxCellState that represents the terminal.
sourceBoolean that specifies if the terminal is the source or target.

getConnectionConstraint

mxGraph.prototype.getConnectionConstraint = function(edge,
terminal,
source)

Returns an mxConnectionConstraint that describes the given connection point.  This result can then be passed to getConnectionPoint.

Parameters

edgemxCellState that represents the edge.
terminalmxCellState that represents the terminal.
sourceBoolean indicating if the terminal is the source or target.

setConnectionConstraint

mxGraph.prototype.setConnectionConstraint = function(edge,
terminal,
source,
constraint)

Sets the mxConnectionConstraint that describes the given connection point.  If no constraint is given then nothing is changed.  To remove an existing constraint from the given edge, use an empty constraint instead.

Parameters

edgemxCell that represents the edge.
terminalmxCell that represents the terminal.
sourceBoolean indicating if the terminal is the source or target.
constraintOptional mxConnectionConstraint to be used for this connection.

getConnectionPoint

mxGraph.prototype.getConnectionPoint = function(vertex,
constraint,
round)

Returns the nearest point in the list of absolute points or the center of the opposite terminal.

Parameters

vertexmxCellState that represents the vertex.
constraintmxConnectionConstraint that represents the connection point constraint as returned by getConnectionConstraint.

connectCell

mxGraph.prototype.connectCell = function(edge,
terminal,
source,
constraint)

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

Parameters

edgemxCell whose terminal should be updated.
terminalmxCell that represents the new terminal to be used.
sourceBoolean indicating if the new terminal is the source or target.
constraintOptional mxConnectionConstraint to be used for this connection.

cellConnected

mxGraph.prototype.cellConnected = function(edge,
terminal,
source,
constraint)

Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.  This method fires mxEvent.CELL_CONNECTED while the transaction is in progress.

Parameters

edgemxCell whose terminal should be updated.
terminalmxCell that represents the new terminal to be used.
sourceBoolean indicating if the new terminal is the source or target.
constraintmxConnectionConstraint to be used for this connection.

disconnectGraph

mxGraph.prototype.disconnectGraph = function(cells)

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

Parameters

cellsArray of mxCells to be disconnected.

Drilldown

getCurrentRoot

mxGraph.prototype.getCurrentRoot = function()

Returns the current root of the displayed cell hierarchy.  This is a shortcut to mxGraphView.currentRoot in view.

getTranslateForRoot

mxGraph.prototype.getTranslateForRoot = function(cell)

Returns the translation to be used if the given cell is the root cell as an mxPoint.  This implementation returns null.

Example

To keep the children at their absolute position while stepping into groups, this function can be overridden as follows.

var offset = new mxPoint(0, 0);

while (cell != null)
{
  var geo = this.model.getGeometry(cell);

  if (geo != null)
  {
    offset.x -= geo.x;
    offset.y -= geo.y;
  }

  cell = this.model.getParent(cell);
}

return offset;

Parameters

cellmxCell that represents the root.

isPort

mxGraph.prototype.isPort = function(cell)

Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.  Note that a port should not be movable.  This implementation always returns false.

A typical implementation is the following

graph.isPort = function(cell)
{
  var geo = this.getCellGeometry(cell);

  return (geo != null) ? geo.relative : false;
};

Parameters

cellmxCell that represents the port.

getTerminalForPort

mxGraph.prototype.getTerminalForPort = function(cell,
source)

Returns the terminal to be used for a given port.  This implementation always returns the parent cell.

Parameters

cellmxCell that represents the port.
sourceIf the cell is the source or target port.

getChildOffsetForCell

mxGraph.prototype.getChildOffsetForCell = function(cell)

Returns the offset to be used for the cells inside the given cell.  The root and layer cells may be identified using mxGraphModel.isRoot and mxGraphModel.isLayer.  For all other current roots, the mxGraphView.currentRoot field points to the respective cell, so that the following holds: cell == this.view.currentRoot.  This implementation returns null.

Parameters

cellmxCell whose offset should be returned.

enterGroup

mxGraph.prototype.enterGroup = function(cell)

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.

Parameters

cellOptional mxCell to be used as the new root.  Default is the selection cell.

exitGroup

mxGraph.prototype.exitGroup = function()

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

home

mxGraph.prototype.home = function()

Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.

isValidRoot

mxGraph.prototype.isValidRoot = function(cell)

Returns true if the given cell is a valid root for the cell display hierarchy.  This implementation returns true for all non-null values.

Parameters

cellmxCell which should be checked as a possible root.

Graph display

getGraphBounds

mxGraph.prototype.getGraphBounds = function()

Returns the bounds of the visible graph.  Shortcut to mxGraphView.getGraphBounds.  See also: getBoundingBoxFromGeometry.

getCellBounds

mxGraph.prototype.getCellBounds = function(cell,
includeEdges,
includeDescendants)

Returns the scaled, translated bounds for the given cell.  See mxGraphView.getBounds for arrays.

Parameters

cellmxCell whose bounds should be returned.
includeEdgeOptional boolean that specifies if the bounds of the connected edges should be included.  Default is false.
includeDescendantsOptional boolean that specifies if the bounds of all descendants should be included.  Default is false.

getBoundingBoxFromGeometry

mxGraph.prototype.getBoundingBoxFromGeometry = function(cells,
includeEdges)

Returns the bounding box for the geometries of the vertices in the given array of cells.  This can be used to find the graph bounds during a layout operation (ie. before the last endUpdate) as follows:

var cells = graph.getChildCells(graph.getDefaultParent(), true, true);
var bounds = graph.getBoundingBoxFromGeometry(cells, true);

This can then be used to move cells to the origin

if (bounds.x < 0 || bounds.y < 0)
{
  graph.moveCells(cells, -Math.min(bounds.x, 0), -Math.min(bounds.y, 0))
}

Or to translate the graph view

if (bounds.x < 0 || bounds.y < 0)
{
  graph.view.setTranslate(-Math.min(bounds.x, 0), -Math.min(bounds.y, 0));
}

Parameters

cellsArray of mxCells whose bounds should be returned.
includeEdgesSpecifies if edge bounds should be included by computing the bounding box for all points in geometry.  Default is false.

refresh

mxGraph.prototype.refresh = function(cell)

Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph.  This fires a refresh event as the last step.

Parameters

cellOptional mxCell for which the cell states should be cleared.

snap

mxGraph.prototype.snap = function(value)

Snaps the given numeric value to the grid if gridEnabled is true.

Parameters

valueNumeric value to be snapped to the grid.

snapDelta

mxGraph.prototype.snapDelta = function(delta,
bounds,
ignoreGrid,
ignoreHorizontal,
ignoreVertical)

Snaps the given delta with the given scaled bounds.

panGraph

mxGraph.prototype.panGraph = function(dx,
dy)

Shifts the graph display by the given amount.  This is used to preview panning operations, use mxGraphView.setTranslate to set a persistent translation of the view.  Fires mxEvent.PAN.

Parameters

dxAmount to shift the graph along the x-axis.
dyAmount to shift the graph along the y-axis.

zoomIn

mxGraph.prototype.zoomIn = function()

Zooms into the graph by zoomFactor.

zoomOut

mxGraph.prototype.zoomOut = function()

Zooms out of the graph by zoomFactor.

zoomActual

mxGraph.prototype.zoomActual = function()

Resets the zoom and panning in the view.

zoomTo

mxGraph.prototype.zoomTo = function(scale,
center)

Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.

center

mxGraph.prototype.center = function(horizontal,
vertical,
cx,
cy)

Centers the graph in the container.

Parameters

horizontalOptional boolean that specifies if the graph should be centered horizontally.  Default is true.
verticalOptional boolean that specifies if the graph should be centered vertically.  Default is true.
cxOptional float that specifies the horizontal center.  Default is 0.5.
cyOptional float that specifies the vertical center.  Default is 0.5.

zoom

mxGraph.prototype.zoom = function(factor,
center)

Zooms the graph using the given factor.  Center is an optional boolean argument that keeps the graph scrolled to the center.  If the center argument is omitted, then centerZoom will be used as its value.

zoomToRect

mxGraph.prototype.zoomToRect = function(rect)

Zooms the graph to the specified rectangle.  If the rectangle does not have same aspect ratio as the display container, it is increased in the smaller relative dimension only until the aspect match.  The original rectangle is centralised within this expanded one.

Note that the input rectangular must be un-scaled and un-translated.

Parameters

rectThe un-scaled and un-translated rectangluar region that should be just visible after the operation

scrollCellToVisible

mxGraph.prototype.scrollCellToVisible = function(cell,
center)

Pans the graph so that it shows the given cell.  Optionally the cell may be centered in the container.

To center a given graph if the <container> has no scrollbars, use the following code.

[code] var bounds = graph.getGraphBounds(); graph.view.setTranslate(-bounds.x - (bounds.width - container.clientWidth) / 2, -bounds.y - (bounds.height - container.clientHeight) / 2); [/code]

Parameters

cellmxCell to be made visible.
centerOptional boolean flag.  Default is false.

scrollRectToVisible

mxGraph.prototype.scrollRectToVisible = function(rect)

Pans the graph so that it shows the given rectangle.

Parameters

rectmxRectangle to be made visible.

getCellGeometry

mxGraph.prototype.getCellGeometry = function(cell)

Returns the mxGeometry for the given cell.  This implementation uses mxGraphModel.getGeometry.  Subclasses can override this to implement specific geometries for cells in only one graph, that is, it can return geometries that depend on the current state of the view.

Parameters

cellmxCell whose geometry should be returned.

isCellVisible

mxGraph.prototype.isCellVisible = function(cell)

Returns true if the given cell is visible in this graph.  This implementation uses mxGraphModel.isVisible.  Subclassers can override this to implement specific visibility for cells in only one graph, that is, without affecting the visible state of the cell.

When using dynamic filter expressions for cell visibility, then the graph should be revalidated after the filter expression has changed.

Parameters

cellmxCell whose visible state should be returned.

isCellCollapsed

mxGraph.prototype.isCellCollapsed = function(cell)

Returns true if the given cell is collapsed in this graph.  This implementation uses mxGraphModel.isCollapsed.  Subclassers can override this to implement specific collapsed states for cells in only one graph, that is, without affecting the collapsed state of the cell.

When using dynamic filter expressions for the collapsed state, then the graph should be revalidated after the filter expression has changed.

Parameters

cellmxCell whose collapsed state should be returned.

isCellConnectable

mxGraph.prototype.isCellConnectable = function(cell)

Returns true if the given cell is connectable in this graph.  This implementation uses mxGraphModel.isConnectable.  Subclassers can override this to implement specific connectable states for cells in only one graph, that is, without affecting the connectable state of the cell in the model.

Parameters

cellmxCell whose connectable state should be returned.

isOrthogonal

mxGraph.prototype.isOrthogonal = function(edge)

Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.

Parameters

edgemxCellState that represents the edge.

isLoop

mxGraph.prototype.isLoop = function(state)

Returns true if the given cell state is a loop.

Parameters

statemxCellState that represents a potential loop.

isCloneEvent

mxGraph.prototype.isCloneEvent = function(evt)

Returns true if the given event is a clone event.  This implementation returns true if control is pressed.

isTransparentClickEvent

mxGraph.prototype.isTransparentClickEvent = function(evt)

Hook for implementing click-through behaviour on selected cells.  If this returns true the cell behind the selected cell will be selected.  This implementation returns false;

isToggleEvent

mxGraph.prototype.isToggleEvent = function(evt)

Returns true if the given event is a toggle event.  This implementation returns true if the meta key (Cmd) is pressed on Macs or if control is pressed on any other platform.

isGridEnabledEvent

mxGraph.prototype.isGridEnabledEvent = function(evt)

Returns true if the given mouse event should be aligned to the grid.

isConstrainedEvent

mxGraph.prototype.isConstrainedEvent = function(evt)

Returns true if the given mouse event should be aligned to the grid.

isIgnoreTerminalEvent

mxGraph.prototype.isIgnoreTerminalEvent = function(evt)

Returns true if the given mouse event should not allow any connections to be made.  This implementation returns false.

Validation

validationAlert

mxGraph.prototype.validationAlert = function(message)

Displays the given validation error in a dialog.  This implementation uses mxUtils.alert.

isEdgeValid

mxGraph.prototype.isEdgeValid = function(edge,
source,
target)

Checks if the return value of getEdgeValidationError for the given arguments is null.

Parameters

edgemxCell that represents the edge to validate.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.

getEdgeValidationError

mxGraph.prototype.getEdgeValidationError = function(edge,
source,
target)

Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.  A return value of null means the edge is valid, a return value of ‘’ means it’s not valid, but do not display an error message.  Any other (non-empty) string returned from this method is displayed as an error message when trying to connect an edge to a source and target.  This implementation uses the multiplicities, and checks multigraph, allowDanglingEdges and allowLoops to generate validation errors.

For extending this method with specific checks for source/target cells, the method can be extended as follows.  Returning an empty string means the edge is invalid with no error message, a non-null string specifies the error message, and null means the edge is valid.

graph.getEdgeValidationError = function(edge, source, target)
{
  if (source != null && target != null &&
    this.model.getValue(source) != null &&
    this.model.getValue(target) != null)
  {
    if (target is not valid for source)
    {
      return 'Invalid Target';
    }
  }

  // "Supercall"
  return mxGraph.prototype.getEdgeValidationError.apply(this, arguments);
}

Parameters

edgemxCell that represents the edge to validate.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.

validateEdge

mxGraph.prototype.validateEdge = function(edge,
source,
target)

Hook method for subclassers to return an error message for the given edge and terminals.  This implementation returns null.

Parameters

edgemxCell that represents the edge to validate.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.

validateGraph

mxGraph.prototype.validateGraph = function(cell,
context)

Validates the graph by validating each descendant of the given cell or the root of the model.  Context is an object that contains the validation state for the complete validation run.  The validation errors are attached to their cells using setCellWarning.  Returns null in the case of successful validation or an array of strings (warnings) in the case of failed validations.

Paramters

cellOptional mxCell to start the validation recursion.  Default is the graph root.
contextObject that represents the global validation state.

getCellValidationError

mxGraph.prototype.getCellValidationError = function(cell)

Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.

Parameters

cellmxCell for which the multiplicities should be checked.

validateCell

mxGraph.prototype.validateCell = function(cell,
context)

Hook method for subclassers to return an error message for the given cell and validation context.  This implementation returns null.  Any HTML breaks will be converted to linefeeds in the calling method.

Parameters

cellmxCell that represents the cell to validate.
contextObject that represents the global validation state.

Graph appearance

getBackgroundImage

mxGraph.prototype.getBackgroundImage = function()

Returns the backgroundImage as an mxImage.

setBackgroundImage

mxGraph.prototype.setBackgroundImage = function(image)

Sets the new backgroundImage.

Parameters

imageNew mxImage to be used for the background.

getFoldingImage

mxGraph.prototype.getFoldingImage = function(state)

Returns the mxImage used to display the collapsed state of the specified cell state.  This returns null for all edges.

convertValueToString

mxGraph.prototype.convertValueToString = function(cell)

Returns the textual representation for the given cell.  This implementation returns the nodename or string-representation of the user object.

Example

The following returns the label attribute from the cells user object if it is an XML node.

graph.convertValueToString = function(cell)
{
 return cell.getAttribute('label');
}

See also: cellLabelChanged.

Parameters

cellmxCell whose textual representation should be returned.

getLabel

mxGraph.prototype.getLabel = function(cell)

Returns a string or DOM node that represents the label for the given cell.  This implementation uses convertValueToString if labelsVisible is true.  Otherwise it returns an empty string.

To truncate a label to match the size of the cell, the following code can be used.

graph.getLabel = function(cell)
{
  var label = mxGraph.prototype.getLabel.apply(this, arguments);

  if (label != null && this.model.isVertex(cell))
  {
    var geo = this.getCellGeometry(cell);

    if (geo != null)
    {
      var max = parseInt(geo.width / 8);

      if (label.length > max)
      {
        label = label.substring(0, max)+'...';
      }
    }
  }
  return mxUtils.htmlEntities(label);
}

A resize listener is needed in the graph to force a repaint of the label after a resize.

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

  for (var i = 0; i < cells.length; i++)
  {
    this.view.removeState(cells[i]);
  }
});

Parameters

cellmxCell whose label should be returned.

isHtmlLabel

mxGraph.prototype.isHtmlLabel = function(cell)

Returns true if the label must be rendered as HTML markup.  The default implementation returns htmlLabels.

Parameters

cellmxCell whose label should be displayed as HTML markup.

isHtmlLabels

mxGraph.prototype.isHtmlLabels = function()

Returns htmlLabels.

setHtmlLabels

mxGraph.prototype.setHtmlLabels = function(value)

Sets htmlLabels.

isWrapping

mxGraph.prototype.isWrapping = function(cell)

This enables wrapping for HTML labels.

Returns true if no white-space CSS style directive should be used for displaying the given cells label.  This implementation returns true if mxConstants.STYLE_WHITE_SPACE in the style of the given cell is ‘wrap’.

This is used as a workaround for IE ignoring the white-space directive of child elements if the directive appears in a parent element.  It should be overridden to return true if a white-space directive is used in the HTML markup that represents the given cells label.  In order for HTML markup to work in labels, isHtmlLabel must also return true for the given cell.

Example

graph.getLabel = function(cell)
{
  var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"

  if (this.model.isEdge(cell))
  {
    tmp = '<div style="width: 150px; white-space:normal;">'+tmp+'</div>';
  }

  return tmp;
}

graph.isWrapping = function(state)
{
  return this.model.isEdge(state.cell);
}

Makes sure no edge label is wider than 150 pixels, otherwise the content is wrapped.  Note: No width must be specified for wrapped vertex labels as the vertex defines the width in its geometry.

Parameters

statemxCell whose label should be wrapped.

isLabelClipped

mxGraph.prototype.isLabelClipped = function(cell)

Returns true if the overflow portion of labels should be hidden.  If this returns true then vertex labels will be clipped to the size of the vertices.  This implementation returns true if mxConstants.STYLE_OVERFLOW in the style of the given cell is ‘hidden’.

Parameters

statemxCell whose label should be clipped.

getTooltip

mxGraph.prototype.getTooltip = function(state,
node,
x,
y)

Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.  This implementation checks if the given node is a folding icon or overlay and returns the respective tooltip.  If this does not result in a tooltip, the handler for the cell is retrieved from <selectionCellsHandler> and the optional getTooltipForNode method is called.  If no special tooltip exists here then getTooltipForCell is used with the cell in the given state as the argument to return a tooltip for the given state.

Parameters

statemxCellState whose tooltip should be returned.
nodeDOM node that is currently under the mouse.
xX-coordinate of the mouse.
yY-coordinate of the mouse.

getTooltipForCell

mxGraph.prototype.getTooltipForCell = function(cell)

Returns the string or DOM node to be used as the tooltip for the given cell.  This implementation uses the cells getTooltip function if it exists, or else it returns convertValueToString for the cell.

Example

graph.getTooltipForCell = function(cell)
{
  return 'Hello, World!';
}

Replaces all tooltips with the string Hello, World!

Parameters

cellmxCell whose tooltip should be returned.

getLinkForCell

mxGraph.prototype.getLinkForCell = function(cell)

Returns the string to be used as the link for the given cell.  This implementation returns null.

Parameters

cellmxCell whose tooltip should be returned.

getCursorForMouseEvent

mxGraph.prototype.getCursorForMouseEvent = function(me)

Returns the cursor value to be used for the CSS of the shape for the given event.  This implementation calls getCursorForCell.

Parameters

memxMouseEvent whose cursor should be returned.

getCursorForCell

mxGraph.prototype.getCursorForCell = function(cell)

Returns the cursor value to be used for the CSS of the shape for the given cell.  This implementation returns null.

Parameters

cellmxCell whose cursor should be returned.

getStartSize

mxGraph.prototype.getStartSize = function(swimlane,
ignoreState)

Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.  The return value is an mxRectangle with either width or height set as appropriate.

Parameters

swimlanemxCell whose start size should be returned.
ignoreStateOptional boolean that specifies if cell state should be ignored.

getSwimlaneDirection

mxGraph.prototype.getSwimlaneDirection = function(style)

Returns the direction for the given swimlane style.

getActualStartSize

mxGraph.prototype.getActualStartSize = function(swimlane,
ignoreState)

Returns the actual start size of the given swimlane taking into account direction and horizontal and vertial flip styles.  The start size is returned as an mxRectangle where top, left, bottom, right start sizes are returned as x, y, height and width, respectively.

Parameters

swimlanemxCell whose start size should be returned.
ignoreStateOptional boolean that specifies if cell state should be ignored.

getImage

mxGraph.prototype.getImage = function(state)

Returns the image URL for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_IMAGE in the cell style.

Parameters

statemxCellState whose image URL should be returned.

isTransparentState

mxGraph.prototype.isTransparentState = function(state)

Returns true if the given state has no stroke- or fillcolor and no image.

Parameters

statemxCellState to check.

getVerticalAlign

mxGraph.prototype.getVerticalAlign = function(state)

Returns the vertical alignment for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_VERTICAL_ALIGN in the cell style.

Parameters

statemxCellState whose vertical alignment should be returned.

getIndicatorColor

mxGraph.prototype.getIndicatorColor = function(state)

Returns the indicator color for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_INDICATOR_COLOR in the cell style.

Parameters

statemxCellState whose indicator color should be returned.

getIndicatorGradientColor

mxGraph.prototype.getIndicatorGradientColor = function(state)

Returns the indicator gradient color for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_INDICATOR_GRADIENTCOLOR in the cell style.

Parameters

statemxCellState whose indicator gradient color should be returned.

getIndicatorShape

mxGraph.prototype.getIndicatorShape = function(state)

Returns the indicator shape for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_INDICATOR_SHAPE in the cell style.

Parameters

statemxCellState whose indicator shape should be returned.

getIndicatorImage

mxGraph.prototype.getIndicatorImage = function(state)

Returns the indicator image for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_INDICATOR_IMAGE in the cell style.

Parameters

statemxCellState whose indicator image should be returned.

getBorder

mxGraph.prototype.getBorder = function()

Returns the value of border.

setBorder

mxGraph.prototype.setBorder = function(value)

Sets the value of border.

Parameters

valuePositive integer that represents the border to be used.

isSwimlane

mxGraph.prototype.isSwimlane = function(cell,
ignoreState)

Returns true if the given cell is a swimlane in the graph.  A swimlane is a container cell with some specific behaviour.  This implementation checks if the shape associated with the given cell is a mxSwimlane.

Parameters

cellmxCell to be checked.
ignoreStateOptional boolean that specifies if the cell state should be ignored.

Graph behaviour

isResizeContainer

mxGraph.prototype.isResizeContainer = function()

Returns resizeContainer.

setResizeContainer

mxGraph.prototype.setResizeContainer = function(value)

Sets resizeContainer.

Parameters

valueBoolean indicating if the container should be resized.

isEnabled

mxGraph.prototype.isEnabled = function()

Returns true if the graph is enabled.

setEnabled

mxGraph.prototype.setEnabled = function(value)

Specifies if the graph should allow any interactions.  This implementation updates enabled.

Parameters

valueBoolean indicating if the graph should be enabled.

isEscapeEnabled

mxGraph.prototype.isEscapeEnabled = function()

Returns escapeEnabled.

setEscapeEnabled

mxGraph.prototype.setEscapeEnabled = function(value)

Sets escapeEnabled.

Parameters

enabledBoolean indicating if escape should be enabled.

isInvokesStopCellEditing

mxGraph.prototype.isInvokesStopCellEditing = function()

Returns invokesStopCellEditing.

setInvokesStopCellEditing

mxGraph.prototype.setInvokesStopCellEditing = function(value)

Sets invokesStopCellEditing.

isEnterStopsCellEditing

mxGraph.prototype.isEnterStopsCellEditing = function()

Returns enterStopsCellEditing.

setEnterStopsCellEditing

mxGraph.prototype.setEnterStopsCellEditing = function(value)

Sets enterStopsCellEditing.

isCellLocked

mxGraph.prototype.isCellLocked = function(cell)

Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.  This implementation returns true for all vertices with a relative geometry if <locked> is false.

Parameters

cellmxCell whose locked state should be returned.

isCellsLocked

mxGraph.prototype.isCellsLocked = function()

Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.  This implementation returns true for all vertices with a relative geometry if <locked> is false.

Parameters

cellmxCell whose locked state should be returned.

setCellsLocked

mxGraph.prototype.setCellsLocked = function(value)

Sets if any cell may be moved, sized, bended, disconnected, edited or selected.

Parameters

valueBoolean that defines the new value for cellsLocked.

getCloneableCells

mxGraph.prototype.getCloneableCells = function(cells)

Returns the cells which may be exported in the given array of cells.

isCellCloneable

mxGraph.prototype.isCellCloneable = function(cell)

Returns true if the given cell is cloneable.  This implementation returns isCellsCloneable for all cells unless a cell style specifies mxConstants.STYLE_CLONEABLE to be 0.

Parameters

cellOptional mxCell whose cloneable state should be returned.

isCellsCloneable

mxGraph.prototype.isCellsCloneable = function()

Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.

setCellsCloneable

mxGraph.prototype.setCellsCloneable = function(value)

Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.  This implementation updates cellsCloneable.

Parameters

valueBoolean indicating if the graph should be cloneable.

getExportableCells

mxGraph.prototype.getExportableCells = function(cells)

Returns the cells which may be exported in the given array of cells.

canExportCell

mxGraph.prototype.canExportCell = function(cell)

Returns true if the given cell may be exported to the clipboard.  This implementation returns exportEnabled for all cells.

Parameters

cellmxCell that represents the cell to be exported.

getImportableCells

mxGraph.prototype.getImportableCells = function(cells)

Returns the cells which may be imported in the given array of cells.

canImportCell

mxGraph.prototype.canImportCell = function(cell)

Returns true if the given cell may be imported from the clipboard.  This implementation returns importEnabled for all cells.

Parameters

cellmxCell that represents the cell to be imported.

isCellSelectable

mxGraph.prototype.isCellSelectable = function(cell)

Returns true if the given cell is selectable.  This implementation returns cellsSelectable.

To add a new style for making cells (un)selectable, use the following code.

mxGraph.prototype.isCellSelectable = function(cell)
{
  var style = this.getCurrentCellStyle(cell);

  return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;
};

You can then use the new style as shown in this example.

graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0');

Parameters

cellmxCell whose selectable state should be returned.

isCellsSelectable

mxGraph.prototype.isCellsSelectable = function()

Returns cellsSelectable.

setCellsSelectable

mxGraph.prototype.setCellsSelectable = function(value)

Sets cellsSelectable.

getDeletableCells

mxGraph.prototype.getDeletableCells = function(cells)

Returns the cells which may be exported in the given array of cells.

isCellDeletable

mxGraph.prototype.isCellDeletable = function(cell)

Returns true if the given cell is moveable.  This returns cellsDeletable for all given cells if a cells style does not specify mxConstants.STYLE_DELETABLE to be 0.

Parameters

cellmxCell whose deletable state should be returned.

isCellsDeletable

mxGraph.prototype.isCellsDeletable = function()

Returns cellsDeletable.

setCellsDeletable

mxGraph.prototype.setCellsDeletable = function(value)

Sets cellsDeletable.

Parameters

valueBoolean indicating if the graph should allow deletion of cells.

isLabelMovable

mxGraph.prototype.isLabelMovable = function(cell)

Returns true if the given edges’s label is moveable.  This returns <movable> for all given cells if <isLocked> does not return true for the given cell.

Parameters

cellmxCell whose label should be moved.

isCellRotatable

mxGraph.prototype.isCellRotatable = function(cell)

Returns true if the given cell is rotatable.  This returns true for the given cell if its style does not specify mxConstants.STYLE_ROTATABLE to be 0.

Parameters

cellmxCell whose rotatable state should be returned.

getMovableCells

mxGraph.prototype.getMovableCells = function(cells)

Returns the cells which are movable in the given array of cells.

isCellMovable

mxGraph.prototype.isCellMovable = function(cell)

Returns true if the given cell is moveable.  This returns cellsMovable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_MOVABLE to be 0.

Parameters

cellmxCell whose movable state should be returned.

isCellsMovable

mxGraph.prototype.isCellsMovable = function()

Returns cellsMovable.

setCellsMovable

mxGraph.prototype.setCellsMovable = function(value)

Specifies if the graph should allow moving of cells.  This implementation updates <cellsMsovable>.

Parameters

valueBoolean indicating if the graph should allow moving of cells.

isGridEnabled

mxGraph.prototype.isGridEnabled = function()

Returns gridEnabled as a boolean.

setGridEnabled

mxGraph.prototype.setGridEnabled = function(value)

Specifies if the grid should be enabled.

Parameters

valueBoolean indicating if the grid should be enabled.

isPortsEnabled

mxGraph.prototype.isPortsEnabled = function()

Returns portsEnabled as a boolean.

setPortsEnabled

mxGraph.prototype.setPortsEnabled = function(value)

Specifies if the ports should be enabled.

Parameters

valueBoolean indicating if the ports should be enabled.

getGridSize

mxGraph.prototype.getGridSize = function()

Returns gridSize.

setGridSize

mxGraph.prototype.setGridSize = function(value)

Sets gridSize.

getTolerance

mxGraph.prototype.getTolerance = function()

Returns tolerance.

setTolerance

mxGraph.prototype.setTolerance = function(value)

Sets tolerance.

isVertexLabelsMovable

mxGraph.prototype.isVertexLabelsMovable = function()

Returns vertexLabelsMovable.

setVertexLabelsMovable

mxGraph.prototype.setVertexLabelsMovable = function(value)

Sets vertexLabelsMovable.

isEdgeLabelsMovable

mxGraph.prototype.isEdgeLabelsMovable = function()

Returns edgeLabelsMovable.

isEdgeLabelsMovable

isSwimlaneNesting

mxGraph.prototype.isSwimlaneNesting = function()

Returns swimlaneNesting as a boolean.

setSwimlaneNesting

mxGraph.prototype.setSwimlaneNesting = function(value)

Specifies if swimlanes can be nested by drag and drop.  This is only taken into account if dropEnabled is true.

Parameters

valueBoolean indicating if swimlanes can be nested.

isSwimlaneSelectionEnabled

mxGraph.prototype.isSwimlaneSelectionEnabled = function()

Returns swimlaneSelectionEnabled as a boolean.

setSwimlaneSelectionEnabled

mxGraph.prototype.setSwimlaneSelectionEnabled = function(value)

Specifies if swimlanes should be selected if the mouse is released over their content area.

Parameters

valueBoolean indicating if swimlanes content areas should be selected when the mouse is released over them.

isMultigraph

mxGraph.prototype.isMultigraph = function()

Returns multigraph as a boolean.

setMultigraph

mxGraph.prototype.setMultigraph = function(value)

Specifies if the graph should allow multiple connections between the same pair of vertices.

Parameters

valueBoolean indicating if the graph allows multiple connections between the same pair of vertices.

isAllowLoops

mxGraph.prototype.isAllowLoops = function()

Returns allowLoops as a boolean.

setAllowDanglingEdges

mxGraph.prototype.setAllowDanglingEdges = function(value)

Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.

Parameters

valueBoolean indicating if dangling edges are allowed.

isAllowDanglingEdges

mxGraph.prototype.isAllowDanglingEdges = function()

Returns allowDanglingEdges as a boolean.

setConnectableEdges

mxGraph.prototype.setConnectableEdges = function(value)

Specifies if edges should be connectable.

Parameters

valueBoolean indicating if edges should be connectable.

isConnectableEdges

mxGraph.prototype.isConnectableEdges = function()

Returns connectableEdges as a boolean.

setCloneInvalidEdges

mxGraph.prototype.setCloneInvalidEdges = function(value)

Specifies if edges should be inserted when cloned but not valid wrt.  getEdgeValidationError.  If false such edges will be silently ignored.

Parameters

valueBoolean indicating if cloned invalid edges should be inserted into the graph or ignored.

isCloneInvalidEdges

mxGraph.prototype.isCloneInvalidEdges = function()

Returns cloneInvalidEdges as a boolean.

setAllowLoops

mxGraph.prototype.setAllowLoops = function(value)

Specifies if loops are allowed.

Parameters

valueBoolean indicating if loops are allowed.

isDisconnectOnMove

mxGraph.prototype.isDisconnectOnMove = function()

Returns disconnectOnMove as a boolean.

setDisconnectOnMove

mxGraph.prototype.setDisconnectOnMove = function(value)

Specifies if edges should be disconnected when moved.  (Note: Cloned edges are always disconnected.)

Parameters

valueBoolean indicating if edges should be disconnected when moved.

isDropEnabled

mxGraph.prototype.isDropEnabled = function()

Returns dropEnabled as a boolean.

setDropEnabled

mxGraph.prototype.setDropEnabled = function(value)

Specifies if the graph should allow dropping of cells onto or into other cells.

Parameters

dropEnabledBoolean indicating if the graph should allow dropping of cells into other cells.

isSplitEnabled

mxGraph.prototype.isSplitEnabled = function()

Returns splitEnabled as a boolean.

setSplitEnabled

mxGraph.prototype.setSplitEnabled = function(value)

Specifies if the graph should allow dropping of cells onto or into other cells.

Parameters

dropEnabledBoolean indicating if the graph should allow dropping of cells into other cells.

isCellResizable

mxGraph.prototype.isCellResizable = function(cell)

Returns true if the given cell is resizable.  This returns cellsResizable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_RESIZABLE to be 0.

Parameters

cellmxCell whose resizable state should be returned.

isCellsResizable

mxGraph.prototype.isCellsResizable = function()

Returns cellsResizable.

setCellsResizable

mxGraph.prototype.setCellsResizable = function(value)

Specifies if the graph should allow resizing of cells.  This implementation updates cellsResizable.

Parameters

valueBoolean indicating if the graph should allow resizing of cells.

isTerminalPointMovable

mxGraph.prototype.isTerminalPointMovable = function(cell,
source)

Returns true if the given terminal point is movable.  This is independent from isCellConnectable and isCellDisconnectable and controls if terminal points can be moved in the graph if the edge is not connected.  Note that it is required for this to return true to connect unconnected edges.  This implementation returns true.

Parameters

cellmxCell whose terminal point should be moved.
sourceBoolean indicating if the source or target terminal should be moved.

isCellBendable

mxGraph.prototype.isCellBendable = function(cell)

Returns true if the given cell is bendable.  This returns cellsBendable for all given cells if <isLocked> does not return true for the given cell and its style does not specify mxConstants.STYLE_BENDABLE to be 0.

Parameters

cellmxCell whose bendable state should be returned.

isCellsBendable

mxGraph.prototype.isCellsBendable = function()

Returns <cellsBenadable>.

setCellsBendable

mxGraph.prototype.setCellsBendable = function(value)

Specifies if the graph should allow bending of edges.  This implementation updates <bendable>.

Parameters

valueBoolean indicating if the graph should allow bending of edges.

isCellEditable

mxGraph.prototype.isCellEditable = function(cell)

Returns true if the given cell is editable.  This returns cellsEditable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_EDITABLE to be 0.

Parameters

cellmxCell whose editable state should be returned.

isCellsEditable

mxGraph.prototype.isCellsEditable = function()

Returns cellsEditable.

setCellsEditable

mxGraph.prototype.setCellsEditable = function(value)

Specifies if the graph should allow in-place editing for cell labels.  This implementation updates cellsEditable.

Parameters

valueBoolean indicating if the graph should allow in-place editing.

isCellDisconnectable

mxGraph.prototype.isCellDisconnectable = function(cell,
terminal,
source)

Returns true if the given cell is disconnectable from the source or target terminal.  This returns isCellsDisconnectable for all given cells if isCellLocked does not return true for the given cell.

Parameters

cellmxCell whose disconnectable state should be returned.
terminalmxCell that represents the source or target terminal.
sourceBoolean indicating if the source or target terminal is to be disconnected.

isCellsDisconnectable

mxGraph.prototype.isCellsDisconnectable = function()

Returns cellsDisconnectable.

setCellsDisconnectable

mxGraph.prototype.setCellsDisconnectable = function(value)

Sets cellsDisconnectable.

isValidSource

mxGraph.prototype.isValidSource = function(cell)

Returns true if the given cell is a valid source for new connections.  This implementation returns true for all non-null values and is called by is called by isValidConnection.

Parameters

cellmxCell that represents a possible source or null.

isValidTarget

mxGraph.prototype.isValidTarget = function(cell)

Returns isValidSource for the given cell.  This is called by isValidConnection.

Parameters

cellmxCell that represents a possible target or null.

isValidConnection

mxGraph.prototype.isValidConnection = function(source,
target)

Returns true if the given target cell is a valid target for source.  This is a boolean implementation for not allowing connections between certain pairs of vertices and is called by getEdgeValidationError.  This implementation returns true if isValidSource returns true for the source and isValidTarget returns true for the target.

Parameters

sourcemxCell that represents the source cell.
targetmxCell that represents the target cell.

setConnectable

mxGraph.prototype.setConnectable = function(connectable)

Specifies if the graph should allow new connections.  This implementation updates mxConnectionHandler.enabled in <connectionHandler>.

Parameters

connectableBoolean indicating if new connections should be allowed.

isConnectable

mxGraph.prototype.isConnectable = function()

Returns true if the <connectionHandler> is enabled.

setTooltips

mxGraph.prototype.setTooltips = function (enabled)

Specifies if tooltips should be enabled.  This implementation updates mxTooltipHandler.enabled in <tooltipHandler>.

Parameters

enabledBoolean indicating if tooltips should be enabled.

setPanning

mxGraph.prototype.setPanning = function(enabled)

Specifies if panning should be enabled.  This implementation updates mxPanningHandler.panningEnabled in <panningHandler>.

Parameters

enabledBoolean indicating if panning should be enabled.

isEditing

mxGraph.prototype.isEditing = function(cell)

Returns true if the given cell is currently being edited.  If no cell is specified then this returns true if any cell is currently being edited.

Parameters

cellmxCell that should be checked.

isAutoSizeCell

mxGraph.prototype.isAutoSizeCell = function(cell)

Returns true if the size of the given cell should automatically be updated after a change of the label.  This implementation returns autoSizeCells or checks if the cell style does specify mxConstants.STYLE_AUTOSIZE to be 1.

Parameters

cellmxCell that should be resized.

isAutoSizeCells

mxGraph.prototype.isAutoSizeCells = function()

Returns autoSizeCells.

setAutoSizeCells

mxGraph.prototype.setAutoSizeCells = function(value)

Specifies if cell sizes should be automatically updated after a label change.  This implementation sets autoSizeCells to the given parameter.  To update the size of cells when the cells are added, set autoSizeCellsOnAdd to true.

Parameters

valueBoolean indicating if cells should be resized automatically.

isExtendParent

mxGraph.prototype.isExtendParent = function(cell)

Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.  This implementation returns isExtendParents if the cell is not an edge.

Parameters

cellmxCell that has been resized.

isExtendParents

mxGraph.prototype.isExtendParents = function()

Returns extendParents.

setExtendParents

mxGraph.prototype.setExtendParents = function(value)

Sets extendParents.

Parameters

valueNew boolean value for extendParents.

isExtendParentsOnAdd

mxGraph.prototype.isExtendParentsOnAdd = function(cell)

Returns extendParentsOnAdd.

setExtendParentsOnAdd

mxGraph.prototype.setExtendParentsOnAdd = function(value)

Sets extendParentsOnAdd.

Parameters

valueNew boolean value for extendParentsOnAdd.

isExtendParentsOnMove

mxGraph.prototype.isExtendParentsOnMove = function()

Returns <extendParentsOnMove>.

setExtendParentsOnMove

mxGraph.prototype.setExtendParentsOnMove = function(value)

Sets <extendParentsOnMove>.

Parameters

valueNew boolean value for extendParentsOnAdd.

isRecursiveResize

mxGraph.prototype.isRecursiveResize = function(state)

Returns recursiveResize.

Parameters

statemxCellState that is being resized.

setRecursiveResize

mxGraph.prototype.setRecursiveResize = function(value)

Sets recursiveResize.

Parameters

valueNew boolean value for recursiveResize.

isConstrainChild

mxGraph.prototype.isConstrainChild = function(cell)

Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.  This implementation returns false for all children of edges and isConstrainChildren otherwise.

Parameters

cellmxCell that should be constrained.

isConstrainChildren

mxGraph.prototype.isConstrainChildren = function()

Returns constrainChildren.

setConstrainChildren

mxGraph.prototype.setConstrainChildren = function(value)

Sets constrainChildren.

isConstrainRelativeChildren

mxGraph.prototype.isConstrainRelativeChildren = function()

Returns constrainRelativeChildren.

setConstrainRelativeChildren

mxGraph.prototype.setConstrainRelativeChildren = function(value)

Sets constrainRelativeChildren.

isConstrainChildren

setConstrainChildren

getOverlap

mxGraph.prototype.getOverlap = function(cell)

Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.  A value of 0 means all children must stay inside the parent, 1 means the child is allowed to be placed outside of the parent such that it touches one of the parents sides.  If isAllowOverlapParent returns false for the given cell, then this method returns 0.

Parameters

cellmxCell for which the overlap ratio should be returned.

isAllowOverlapParent

mxGraph.prototype.isAllowOverlapParent = function(cell)

Returns true if the given cell is allowed to be placed outside of the parents area.

Parameters

cellmxCell that represents the child to be checked.

getFoldableCells

mxGraph.prototype.getFoldableCells = function(cells,
collapse)

Returns the cells which are movable in the given array of cells.

isCellFoldable

mxGraph.prototype.isCellFoldable = function(cell,
collapse)

Returns true if the given cell is foldable.  This implementation returns true if the cell has at least one child and its style does not specify mxConstants.STYLE_FOLDABLE to be 0.

Parameters

cellmxCell whose foldable state should be returned.

isValidDropTarget

mxGraph.prototype.isValidDropTarget = function(cell,
cells,
evt)

Returns true if the given cell is a valid drop target for the specified cells.  If splitEnabled is true then this returns isSplitTarget for the given arguments else it returns true if the cell is not collapsed and its child count is greater than 0.

Parameters

cellmxCell that represents the possible drop target.
cellsmxCells that should be dropped into the target.
evtMouseevent that triggered the invocation.

isSplitTarget

mxGraph.prototype.isSplitTarget = function(target,
cells,
evt)

Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.

Parameters

targetmxCell that represents the edge to be splitted.
cellsmxCells that should split the edge.
evtMouseevent that triggered the invocation.

getDropTarget

mxGraph.prototype.getDropTarget = function(cells,
evt,
cell,
clone)

Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.  If the given array contains a swimlane and swimlaneNesting is false then this always returns null.  If no cell is given, then the bottommost swimlane at the location of the given event is returned.

This function should only be used if isDropEnabled returns true.

Parameters

cellsArray of mxCells which are to be dropped onto the target.
evtMouseevent for the drag and drop.
cellmxCell that is under the mousepointer.
cloneOptional boolean to indicate of cells will be cloned.

Cell retrieval

getDefaultParent

mxGraph.prototype.getDefaultParent = function()

Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.  The value returned by this function should be used as the parent for new cells (aka default layer).

setDefaultParent

mxGraph.prototype.setDefaultParent = function(cell)

Sets the defaultParent to the given cell.  Set this to null to return the first child of the root in getDefaultParent.

getSwimlane

mxGraph.prototype.getSwimlane = function(cell)

Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.

Parameters

cellmxCell for which the ancestor swimlane should be returned.

getSwimlaneAt

mxGraph.prototype.getSwimlaneAt = function (x,
y,
parent)

Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.

Parameters

xX-coordinate of the location to be checked.
yY-coordinate of the location to be checked.
parentmxCell that should be used as the root of the recursion.  Default is defaultParent.

getCellAt

mxGraph.prototype.getCellAt = function(x,
y,
parent,
vertices,
edges,
ignoreFn)

Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.  This will also return swimlanes if the given location intersects the content area of the swimlane.  If this is not desired, then the hitsSwimlaneContent may be used if the returned cell is a swimlane to determine if the location is inside the content area or on the actual title of the swimlane.

Parameters

xX-coordinate of the location to be checked.
yY-coordinate of the location to be checked.
parentmxCell that should be used as the root of the recursion.  Default is current root of the view or the root of the model.
verticesOptional boolean indicating if vertices should be returned.  Default is true.
edgesOptional boolean indicating if edges should be returned.  Default is true.
ignoreFnOptional function that returns true if cell should be ignored.  The function is passed the cell state and the x and y parameter.

intersects

mxGraph.prototype.intersects = function(state,
x,
y)

Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.

Parameters

statemxCellState that represents the cell state.
xX-coordinate of the location to be checked.
yY-coordinate of the location to be checked.

hitsSwimlaneContent

mxGraph.prototype.hitsSwimlaneContent = function(swimlane,
x,
y)

Returns true if the given coordinate pair is inside the content are of the given swimlane.

Parameters

swimlanemxCell that specifies the swimlane.
xX-coordinate of the mouse event.
yY-coordinate of the mouse event.

getChildVertices

mxGraph.prototype.getChildVertices = function(parent)

Returns the visible child vertices of the given parent.

Parameters

parentmxCell whose children should be returned.

getChildEdges

mxGraph.prototype.getChildEdges = function(parent)

Returns the visible child edges of the given parent.

Parameters

parentmxCell whose child vertices should be returned.

getChildCells

mxGraph.prototype.getChildCells = function(parent,
vertices,
edges)

Returns the visible child vertices or edges in the given parent.  If vertices and edges is false, then all children are returned.

Parameters

parentmxCell whose children should be returned.
verticesOptional boolean that specifies if child vertices should be returned.  Default is false.
edgesOptional boolean that specifies if child edges should be returned.  Default is false.

getConnections

mxGraph.prototype.getConnections = function(cell,
parent)

Returns all visible edges connected to the given cell without loops.

Parameters

cellmxCell whose connections should be returned.
parentOptional parent of the opposite end for a connection to be returned.

getIncomingEdges

mxGraph.prototype.getIncomingEdges = function(cell,
parent)

Returns the visible incoming edges for the given cell.  If the optional parent argument is specified, then only child edges of the given parent are returned.

Parameters

cellmxCell whose incoming edges should be returned.
parentOptional parent of the opposite end for an edge to be returned.

getOutgoingEdges

mxGraph.prototype.getOutgoingEdges = function(cell,
parent)

Returns the visible outgoing edges for the given cell.  If the optional parent argument is specified, then only child edges of the given parent are returned.

Parameters

cellmxCell whose outgoing edges should be returned.
parentOptional parent of the opposite end for an edge to be returned.

getEdges

mxGraph.prototype.getEdges = function(cell,
parent,
incoming,
outgoing,
includeLoops,
recurse)

Returns the incoming and/or outgoing edges for the given cell.  If the optional parent argument is specified, then only edges are returned where the opposite is in the given parent cell.  If at least one of incoming or outgoing is true, then loops are ignored, if both are false, then all edges connected to the given cell are returned including loops.

Parameters

cellmxCell whose edges should be returned.
parentOptional parent of the opposite end for an edge to be returned.
incomingOptional boolean that specifies if incoming edges should be included in the result.  Default is true.
outgoingOptional boolean that specifies if outgoing edges should be included in the result.  Default is true.
includeLoopsOptional boolean that specifies if loops should be included in the result.  Default is true.
recurseOptional boolean the specifies if the parent specified only need be an ancestral parent, true, or the direct parent, false.  Default is false

isValidAncestor

mxGraph.prototype.isValidAncestor = function(cell,
parent,
recurse)

Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.

Parameters

cellmxCell the possible child cell
parentmxCell the possible parent cell
recurseboolean whether or not to recurse the child ancestors

getOpposites

mxGraph.prototype.getOpposites = function(edges,
terminal,
sources,
targets)

Returns all distinct visible opposite cells for the specified terminal on the given edges.

Parameters

edgesArray of mxCells that contains the edges whose opposite terminals should be returned.
terminalTerminal that specifies the end whose opposite should be returned.
sourcesOptional boolean that specifies if source terminals should be included in the result.  Default is true.
targetsOptional boolean that specifies if targer terminals should be included in the result.  Default is true.

getEdgesBetween

mxGraph.prototype.getEdgesBetween = function(source,
target,
directed)

Returns the edges between the given source and target.  This takes into account collapsed and invisible cells and returns the connected edges as displayed on the screen.

Parameters

source - target - directed -

getPointForEvent

mxGraph.prototype.getPointForEvent = function(evt,
addOffset)

Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.

Parameters

evtMousevent that contains the mouse pointer location.
addOffsetOptional boolean that specifies if the position should be offset by half of the gridSize.  Default is true.

getCells

mxGraph.prototype.getCells = function(x,
y,
width,
height,
parent,
result,
intersection,
ignoreFn,
includeDescendants)

Returns the child vertices and edges of the given parent that are contained in the given rectangle.  The result is added to the optional result array, which is returned.  If no result array is specified then a new array is created and returned.

Parameters

xX-coordinate of the rectangle.
yY-coordinate of the rectangle.
widthWidth of the rectangle.
heightHeight of the rectangle.
parentmxCell that should be used as the root of the recursion.  Default is current root of the view or the root of the model.
resultOptional array to store the result in.
intersectionOptional mxRectangle to check vertices for intersection.
ignoreFnOptional function to check if a cell state is ignored.
includeDescendantsOptional boolean flag to add descendants to the result.  Default is false.

getCellsBeyond

mxGraph.prototype.getCellsBeyond = function(x0,
y0,
parent,
rightHalfpane,
bottomHalfpane)

Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.

Parameters

x0X-coordinate of the origin.
y0Y-coordinate of the origin.
parentOptional mxCell whose children should be checked.  Default is defaultParent.
rightHalfpaneBoolean indicating if the cells in the right halfpane from the origin should be returned.
bottomHalfpaneBoolean indicating if the cells in the bottom halfpane from the origin should be returned.

findTreeRoots

mxGraph.prototype.findTreeRoots = function(parent,
isolate,
invert)

Returns all children in the given parent which do not have incoming edges.  If the result is empty then the with the greatest difference between incoming and outgoing edges is returned.

Parameters

parentmxCell whose children should be checked.
isolateOptional boolean that specifies if edges should be ignored if the opposite end is not a child of the given parent cell.  Default is false.
invertOptional boolean that specifies if outgoing or incoming edges should be counted for a tree root.  If false then outgoing edges will be counted.  Default is false.

traverse

mxGraph.prototype.traverse = function(vertex,
directed,
func,
edge,
visited,
inverse)

Traverses the (directed) graph invoking the given function for each visited vertex and edge.  The function is invoked with the current vertex and the incoming edge as a parameter.  This implementation makes sure each vertex is only visited once.  The function may return false if the traversal should stop at the given vertex.

Example

mxLog.show();
var cell = graph.getSelectionCell();
graph.traverse(cell, false, function(vertex, edge)
{
  mxLog.debug(graph.getLabel(vertex));
});

Parameters

vertexmxCell that represents the vertex where the traversal starts.
directedOptional boolean indicating if edges should only be traversed from source to target.  Default is true.
funcVisitor function that takes the current vertex and the incoming edge as arguments.  The traversal stops if the function returns false.
edgeOptional mxCell that represents the incoming edge.  This is null for the first step of the traversal.
visitedOptional mxDictionary from cells to true for the visited cells.
inverseOptional boolean to traverse in inverse direction.  Default is false.  This is ignored if directed is false.

Selection

isCellSelected

mxGraph.prototype.isCellSelected = function(cell)

Returns true if the given cell is selected.

Parameters

cellmxCell for which the selection state should be returned.

isSelectionEmpty

mxGraph.prototype.isSelectionEmpty = function()

Returns true if the selection is empty.

clearSelection

mxGraph.prototype.clearSelection = function()

Clears the selection using mxGraphSelectionModel.clear.

getSelectionCount

mxGraph.prototype.getSelectionCount = function()

Returns the number of selected cells.

getSelectionCell

mxGraph.prototype.getSelectionCell = function()

Returns the first cell from the array of selected mxCells.

getSelectionCells

mxGraph.prototype.getSelectionCells = function()

Returns the array of selected mxCells.

setSelectionCell

mxGraph.prototype.setSelectionCell = function(cell)

Sets the selection cell.

Parameters

cellmxCell to be selected.

setSelectionCells

mxGraph.prototype.setSelectionCells = function(cells)

Sets the selection cell.

Parameters

cellsArray of mxCells to be selected.

addSelectionCell

mxGraph.prototype.addSelectionCell = function(cell)

Adds the given cell to the selection.

Parameters

cellmxCell to be add to the selection.

addSelectionCells

mxGraph.prototype.addSelectionCells = function(cells)

Adds the given cells to the selection.

Parameters

cellsArray of mxCells to be added to the selection.

removeSelectionCell

mxGraph.prototype.removeSelectionCell = function(cell)

Removes the given cell from the selection.

Parameters

cellmxCell to be removed from the selection.

removeSelectionCells

mxGraph.prototype.removeSelectionCells = function(cells)

Removes the given cells from the selection.

Parameters

cellsArray of mxCells to be removed from the selection.

selectRegion

mxGraph.prototype.selectRegion = function(rect,
evt)

Selects and returns the cells inside the given rectangle for the specified event.

Parameters

rectmxRectangle that represents the region to be selected.
evtMouseevent that triggered the selection.

selectNextCell

mxGraph.prototype.selectNextCell = function()

Selects the next cell.

selectPreviousCell

mxGraph.prototype.selectPreviousCell = function()

Selects the previous cell.

selectParentCell

mxGraph.prototype.selectParentCell = function()

Selects the parent cell.

selectChildCell

mxGraph.prototype.selectChildCell = function()

Selects the first child cell.

selectCell

mxGraph.prototype.selectCell = function(isNext,
isParent,
isChild)

Selects the next, parent, first child or previous cell, if all arguments are false.

Parameters

isNextBoolean indicating if the next cell should be selected.
isParentBoolean indicating if the parent cell should be selected.
isChildBoolean indicating if the first child cell should be selected.

selectAll

mxGraph.prototype.selectAll = function(parent,
descendants)

Selects all children of the given parent cell or the children of the default parent if no parent is specified.  To select leaf vertices and/or edges use selectCells.

Parameters

parentOptional mxCell whose children should be selected.  Default is defaultParent.
descendantsOptional boolean specifying whether all descendants should be selected.  Default is false.

selectVertices

mxGraph.prototype.selectVertices = function(parent,
selectGroups)

Select all vertices inside the given parent or the default parent.

selectVertices

Select all vertices inside the given parent or the default parent.

selectCells

mxGraph.prototype.selectCells = function(vertices,
edges,
parent,
selectGroups)

Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.  Use selectAll to select all cells.  For vertices, only cells with no children are selected.

Parameters

verticesBoolean indicating if vertices should be selected.
edgesBoolean indicating if edges should be selected.
parentOptional mxCell that acts as the root of the recursion.  Default is defaultParent.
selectGroupsOptional boolean that specifies if groups should be selected.  Default is false.

selectCellForEvent

mxGraph.prototype.selectCellForEvent = function(cell,
evt)

Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.

Parameters

cellmxCell to be selected.
evtOptional mouseevent that triggered the selection.

selectCellsForEvent

mxGraph.prototype.selectCellsForEvent = function(cells,
evt)

Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.

Parameters

cellsArray of mxCells to be selected.
evtOptional mouseevent that triggered the selection.

Selection state

createHandler

mxGraph.prototype.createHandler = function(state)

Creates a new handler for the given cell state.  This implementation returns a new mxEdgeHandler of the corresponding cell is an edge, otherwise it returns an mxVertexHandler.

Parameters

statemxCellState whose handler should be created.

createVertexHandler

mxGraph.prototype.createVertexHandler = function(state)

Hooks to create a new mxVertexHandler for the given mxCellState.

Parameters

statemxCellState to create the handler for.

createEdgeHandler

mxGraph.prototype.createEdgeHandler = function(state,
edgeStyle)

Hooks to create a new mxEdgeHandler for the given mxCellState.

Parameters

statemxCellState to create the handler for.

createEdgeSegmentHandler

mxGraph.prototype.createEdgeSegmentHandler = function(state)

Hooks to create a new <mxEdgeSegmentHandler> for the given mxCellState.

Parameters

statemxCellState to create the handler for.

createElbowEdgeHandler

mxGraph.prototype.createElbowEdgeHandler = function(state)

Hooks to create a new mxElbowEdgeHandler for the given mxCellState.

Parameters

statemxCellState to create the handler for.

Graph events

addMouseListener

mxGraph.prototype.addMouseListener = function(listener)

Adds a listener to the graph event dispatch loop.  The listener must implement the mouseDown, mouseMove and mouseUp methods as shown in the mxMouseEvent class.

Parameters

listenerListener to be added to the graph event listeners.

removeMouseListener

mxGraph.prototype.removeMouseListener = function(listener)

Removes the specified graph listener.

Parameters

listenerListener to be removed from the graph event listeners.

updateMouseEvent

mxGraph.prototype.updateMouseEvent = function(me,
evtName)

Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.

Parameters

memxMouseEvent to be updated.
evtNameName of the mouse event.

getStateForEvent

Returns the state for the given touch event.

isEventIgnored

mxGraph.prototype.isEventIgnored = function(evtName,
me,
sender)

Returns true if the event should be ignored in fireMouseEvent.

isSyntheticEventIgnored

mxGraph.prototype.isSyntheticEventIgnored = function(evtName,
me,
sender)

Hook for ignoring synthetic mouse events after touchend in Firefox.

isEventSourceIgnored

mxGraph.prototype.isEventSourceIgnored = function(evtName,
me)

Returns true if the event should be ignored in fireMouseEvent.  This implementation returns true for select, option and input (if not of type checkbox, radio, button, submit or file) event sources if the event is not a mouse event or a left mouse button press event.

Parameters

evtNameThe name of the event.
memxMouseEvent that should be ignored.

getEventState

mxGraph.prototype.getEventState = function(state)

Returns the mxCellState to be used when firing the mouse event for the given state.  This implementation returns the given state.

Parameters

<mxCellState>State whose event source should be returned.

fireMouseEvent

mxGraph.prototype.fireMouseEvent = function(evtName,
me,
sender)

Dispatches the given event in the graph event dispatch loop.  Possible event names are mxEvent.MOUSE_DOWN, mxEvent.MOUSE_MOVE and mxEvent.MOUSE_UP.  All listeners are invoked for all events regardless of the consumed state of the event.

Parameters

evtNameString that specifies the type of event to be dispatched.
memxMouseEvent to be fired.
senderOptional sender argument.  Default is this.

consumeMouseEvent

mxGraph.prototype.consumeMouseEvent = function(evtName,
me,
sender)

Consumes the given mxMouseEvent if it’s a touchStart event.

fireGestureEvent

mxGraph.prototype.fireGestureEvent = function(evt,
cell)

Dispatches a mxEvent.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)
{
  var evt = eo.getProperty('event');
  var state = graph.view.getState(eo.getProperty('cell'));

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

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

    var bounds = new mxRectangle(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();
  }
});

Parameters

evtGestureend event that represents the gesture.
cellOptional mxCell associated with the gesture.

destroy

mxGraph.prototype.destroy = function()

Destroys the graph and all its resources.

Base class for objects that dispatch named events.
mxGraph.prototype.alignCells = function(align,
cells,
param)
Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
mxGraph.prototype.flipEdge = function(edge)
Toggles the style of the given edge between null (or empty) and alternateEdgeStyle.
mxGraph.prototype.orderCells = function(back,
cells)
Moves the given cells to the front or back.
mxGraph.prototype.cellsOrdered = function(cells,
back)
Moves the given cells to the front or back.
mxGraph.prototype.groupCells = function(group,
border,
cells)
Adds the cells into the given group.
mxGraph.prototype.ungroupCells = function(cells)
Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups.
mxGraph.prototype.removeCellsFromParent = function(cells)
Removes the specified cells from their parents and adds them to the default parent.
mxGraph.prototype.addCells = function(cells,
parent,
index,
source,
target,
absolute)
Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal.
mxGraph.prototype.cellsAdded = function(cells,
parent,
index,
source,
target,
absolute,
constrain,
extend)
Adds the specified cells to the given parent.
mxGraph.prototype.removeCells = function(cells,
includeEdges)
Removes the given cells from the graph including all connected edges if includeEdges is true.
mxGraph.prototype.cellsRemoved = function(cells)
Removes the given cells from the model.
mxGraph.prototype.splitEdge = function(edge,
cells,
newEdge,
dx,
dy,
x,
y,
parent)
Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.
mxGraph.prototype.toggleCells = function(show,
cells,
includeEdges)
Sets the visible state of the specified cells and all connected edges if includeEdges is true.
mxGraph.prototype.foldCells = function(collapse,
recurse,
cells,
checkFoldable,
evt)
Sets the collapsed state of the specified cells and all descendants if recurse is true.
mxGraph.prototype.updateCellSize = function(cell,
ignoreChildren)
Updates the size of the given cell in the model using cellSizeUpdated.
mxGraph.prototype.resizeCells = function(cells,
bounds,
recurse)
Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.
mxGraph.prototype.cellsResized = function(cells,
bounds,
recurse)
Sets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event.
mxGraph.prototype.moveCells = function(cells,
dx,
dy,
clone,
target,
evt,
mapping)
Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.
mxGraph.prototype.cellsMoved = function(cells,
dx,
dy,
disconnect,
constrain,
extend)
Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.
mxGraph.prototype.connectCell = function(edge,
terminal,
source,
constraint)
Connects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress.
mxGraph.prototype.cellConnected = function(edge,
terminal,
source,
constraint)
Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.
mxGraph.prototype.refresh = function(cell)
Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph.
mxGraph.prototype.click = function(me)
Processes a singleclick on an optional cell and fires a click event.
mxGraph.prototype.dblClick = function(evt,
cell)
Processes a doubleclick on an optional cell and fires a dblclick event.
mxGraph.prototype.fireGestureEvent = function(evt,
cell)
Dispatches a mxEvent.GESTURE event.
mxGraph.prototype.tapAndHold = function(me)
Handles the mxMouseEvent by highlighting the mxCellState.
mxGraph.prototype.fireMouseEvent = function(evtName,
me,
sender)
Dispatches the given event in the graph event dispatch loop.
mxGraph.prototype.sizeDidChange = function()
Called when the size of the graph has changed.
mxGraph.prototype.startEditingAtCell = function(cell,
evt)
Fires a startEditing event and invokes mxCellEditor.startEditing on editor.
mxGraph.prototype.stopEditing = function(cancel)
Stops the current editing and fires a editingStopped event.
mxGraph.prototype.cellLabelChanged = function(cell,
value,
autoSize)
Sets the new label for a cell.
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.
function mxGraph(container,
model,
renderHint,
stylesheet)
Constructs a new mxGraph in the specified container.
mxGraph.prototype.mouseListeners
Holds the mouse event listeners.
mxGraph.prototype.isMouseDown
Holds the state of the mouse button.
mxGraph.prototype.model
Holds the mxGraphModel that contains the cells to be displayed.
Extends mxEventSource to implement a graph model.
mxGraph.prototype.view
Holds the mxGraphView that caches the mxCellStates for the cells.
Extends mxEventSource to implement a view for a graph.
Represents the current state of a cell in a given mxGraphView.
mxGraph.prototype.stylesheet
Holds the mxStylesheet that defines the appearance of the cells.
Defines the appearance of the cells in a graph.
mxGraph.prototype.selectionModel
Holds the mxGraphSelectionModel that models the current selection.
Implements the selection model for a graph.
mxGraph.prototype.cellEditor
Holds the mxCellEditor that is used as the in-place editing.
In-place editor for the graph.
mxGraph.prototype.cellRenderer
Holds the mxCellRenderer for rendering the cells in the graph.
Renders cells into a document object model.
mxGraph.prototype.multiplicities
An array of mxMultiplicities describing the allowed connections in a graph.
Defines invalid connections along with the error messages that they produce.
mxGraph.prototype.renderHint
RenderHint as it was passed to the constructor.
mxGraph.prototype.dialect
Dialect to be used for drawing the graph.
mxGraph.prototype.gridSize
Specifies the grid size.
mxGraph.prototype.gridEnabled
Specifies if the grid is enabled.
mxGraph.prototype.portsEnabled
Specifies if ports are enabled.
mxGraph.prototype.doubleTapEnabled
Specifies if double taps on touch-based devices should be handled as a double click.
mxGraph.prototype.doubleTapTimeout
Specifies the timeout for double taps and non-native double clicks.
mxGraph.prototype.doubleTapTolerance
Specifies the tolerance for double taps and double clicks in quirks mode.
mxGraph.prototype.lastTouchTime
Holds the time of the last touch event for double click detection.
mxGraph.prototype.tapAndHoldEnabled
Specifies if tap and hold should be used for starting connections on touch-based devices.
mxGraph.prototype.tapAndHoldDelay
Specifies the time for a tap and hold.
mxGraph.prototype.tapAndHoldInProgress
True if the timer for tap and hold events is running.
mxGraph.prototype.tapAndHoldValid
True as long as the timer is running and the touch events stay within the given tapAndHoldTolerance.
mxGraph.prototype.initialTouchX
Holds the x-coordinate of the intial touch event for tap and hold.
mxGraph.prototype.initialTouchY
Holds the y-coordinate of the intial touch event for tap and hold.
mxGraph.prototype.tolerance
Tolerance for a move to be handled as a single click.
mxGraph.prototype.defaultOverlap
Value returned by getOverlap if isAllowOverlapParent returns true for the given cell.
mxGraph.prototype.getOverlap = function(cell)
Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.
mxGraph.prototype.isAllowOverlapParent = function(cell)
Returns true if the given cell is allowed to be placed outside of the parents area.
mxGraph.prototype.defaultParent
Specifies the default parent to be used to insert new cells.
mxGraph.prototype.alternateEdgeStyle
Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.
mxGraph.prototype.backgroundImage
Specifies the mxImage to be returned by getBackgroundImage.
Encapsulates the URL, width and height of an image.
mxGraph.prototype.getBackgroundImage = function()
Returns the backgroundImage as an mxImage.
mxGraph.prototype.pageVisible
Specifies if the background page should be visible.
mxGraph.prototype.pageBreaksVisible
Specifies if a dashed line should be drawn between multiple pages.
mxGraph.prototype.pageBreakColor
Specifies the color for page breaks.
mxGraph.prototype.pageBreakDashed
Specifies the page breaks should be dashed.
mxGraph.prototype.minPageBreakDist
Specifies the minimum distance for page breaks to be visible.
mxGraph.prototype.preferPageSize
Specifies if the graph size should be rounded to the next page number in sizeDidChange.
mxGraph.prototype.pageFormat
Specifies the page format for the background page.
mxGraph.prototype.pageScale
Specifies the scale of the background page.
mxGraph.prototype.enabled
Specifies the return value for isEnabled.
mxGraph.prototype.isEnabled = function()
Returns true if the graph is enabled.
mxGraph.prototype.escapeEnabled
Specifies if mxKeyHandler should invoke escape when the escape key is pressed.
Event handler that listens to keystroke events.
mxGraph.prototype.escape = function(evt)
Processes an escape keystroke.
mxGraph.prototype.invokesStopCellEditing
If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.
mxGraph.prototype.enterStopsCellEditing
If true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
mxGraph.prototype.useScrollbarsForPanning
Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available.
mxGraph.prototype.panGraph = function(dx,
dy)
Shifts the graph display by the given amount.
mxGraph.prototype.exportEnabled
Specifies the return value for canExportCell.
mxGraph.prototype.canExportCell = function(cell)
Returns true if the given cell may be exported to the clipboard.
mxGraph.prototype.importEnabled
Specifies the return value for canImportCell.
mxGraph.prototype.canImportCell = function(cell)
Returns true if the given cell may be imported from the clipboard.
mxGraph.prototype.cellsLocked
Specifies the return value for isCellLocked.
mxGraph.prototype.isCellLocked = function(cell)
Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
mxGraph.prototype.cellsCloneable
Specifies the return value for isCellCloneable.
mxGraph.prototype.isCellCloneable = function(cell)
Returns true if the given cell is cloneable.
mxGraph.prototype.foldingEnabled
Specifies if folding (collapse and expand via an image icon in the graph should be enabled).
mxGraph.prototype.cellsEditable
Specifies the return value for isCellEditable.
mxGraph.prototype.isCellEditable = function(cell)
Returns true if the given cell is editable.
mxGraph.prototype.cellsDeletable
Specifies the return value for isCellDeletable.
mxGraph.prototype.isCellDeletable = function(cell)
Returns true if the given cell is moveable.
mxGraph.prototype.cellsMovable
Specifies the return value for isCellMovable.
mxGraph.prototype.isCellMovable = function(cell)
Returns true if the given cell is moveable.
mxGraph.prototype.edgeLabelsMovable
Specifies the return value for edges in isLabelMovable.
mxGraph.prototype.isLabelMovable = function(cell)
Returns true if the given edges’s label is moveable.
mxGraph.prototype.vertexLabelsMovable
Specifies the return value for vertices in isLabelMovable.
mxGraph.prototype.dropEnabled
Specifies the return value for isDropEnabled.
mxGraph.prototype.isDropEnabled = function()
Returns dropEnabled as a boolean.
mxGraph.prototype.splitEnabled
Specifies if dropping onto edges should be enabled.
mxGraph.prototype.cellsResizable
Specifies the return value for isCellResizable.
mxGraph.prototype.isCellResizable = function(cell)
Returns true if the given cell is resizable.
mxGraph.prototype.cellsBendable
Specifies the return value for isCellsBendable.
mxGraph.prototype.isCellsBendable = function()
Returns cellsBenadable.
mxGraph.prototype.cellsSelectable
Specifies the return value for isCellSelectable.
mxGraph.prototype.isCellSelectable = function(cell)
Returns true if the given cell is selectable.
mxGraph.prototype.cellsDisconnectable
Specifies the return value for isCellDisconntable.
mxGraph.prototype.autoSizeCells
Specifies if the graph should automatically update the cell size after an edit.
mxGraph.prototype.autoSizeCellsOnAdd
Specifies if autoSize style should be applied when cells are added.
mxGraph.prototype.autoScroll
Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.
mxGraph.prototype.ignoreScrollbars
Specifies if the graph should automatically scroll regardless of the scrollbars.
mxGraph.prototype.translateToScrollPosition
Specifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.
mxGraph.prototype.timerAutoScroll
Specifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.
mxGraph.prototype.allowAutoPanning
Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.
mxGraph.prototype.scrollPointToVisible = function(x,
y,
extend,
border)
Scrolls the graph to the given point, extending the graph container if specified.
mxGraph.prototype.autoExtend
Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.
mxGraph.prototype.maximumGraphBounds
mxRectangle that specifies the area in which all cells in the diagram should be placed.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxGraph.prototype.minimumGraphSize
mxRectangle that specifies the minimum size of the graph.
mxGraph.prototype.minimumContainerSize
mxRectangle that specifies the minimum size of the container if resizeContainer is true.
mxGraph.prototype.resizeContainer
Specifies if the container should be resized to the graph size when the graph size has changed.
mxGraph.prototype.maximumContainerSize
mxRectangle that specifies the maximum size of the container if resizeContainer is true.
mxGraph.prototype.border
Border to be added to the bottom and right side when the container is being resized after the graph has been changed.
mxGraph.prototype.keepEdgesInForeground
Specifies if edges should appear in the foreground regardless of their order in the model.
mxGraph.prototype.keepEdgesInBackground
Specifies if edges should appear in the background regardless of their order in the model.
mxGraph.prototype.allowNegativeCoordinates
Specifies if negative coordinates for vertices are allowed.
mxGraph.prototype.constrainChildren
Specifies if a child should be constrained inside the parent bounds after a move or resize of the child.
mxGraph.prototype.constrainRelativeChildren
Specifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.
mxGraph.prototype.extendParents
Specifies if a parent should contain the child bounds after a resize of the child.
mxGraph.prototype.extendParentsOnAdd
Specifies if parents should be extended according to the extendParents switch if cells are added.
mxGraph.prototype.recursiveResize
Specifies the return value for isRecursiveResize.
mxGraph.prototype.isRecursiveResize = function(state)
Returns recursiveResize.
mxGraph.prototype.collapseToPreferredSize
Specifies if the cell size should be changed to the preferred size when a cell is first collapsed.
mxGraph.prototype.zoomFactor
Specifies the factor used for zoomIn and zoomOut.
mxGraph.prototype.zoomIn = function()
Zooms into the graph by zoomFactor.
mxGraph.prototype.zoomOut = function()
Zooms out of the graph by zoomFactor.
mxGraph.prototype.keepSelectionVisibleOnZoom
Specifies if the viewport should automatically contain the selection cells after a zoom operation.
mxGraph.prototype.centerZoom
Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.
mxGraph.prototype.resetViewOnRootChange
Specifies if the scale and translate should be reset if the root changes in the model.
mxGraph.prototype.resetEdgesOnResize
Specifies if edge control points should be reset after the resize of a connected cell.
mxGraph.prototype.resetEdgesOnMove
Specifies if edge control points should be reset after the move of a connected cell.
mxGraph.prototype.resetEdgesOnConnect
Specifies if edge control points should be reset after the the edge has been reconnected.
mxGraph.prototype.allowLoops
Specifies if loops (aka self-references) are allowed.
mxGraph.prototype.defaultLoopStyle
mxEdgeStyle to be used for loops.
Provides various edge styles to be used as the values for mxConstants.STYLE_EDGE in a cell style.
mxGraph.prototype.multigraph
Specifies if multiple edges in the same direction between the same pair of vertices are allowed.
mxGraph.prototype.connectableEdges
Specifies if edges are connectable.
mxGraph.prototype.allowDanglingEdges
Specifies if edges with disconnected terminals are allowed in the graph.
mxGraph.prototype.cloneInvalidEdges
Specifies if edges that are cloned should be validated and only inserted if they are valid.
mxGraph.prototype.disconnectOnMove
Specifies if edges should be disconnected from their terminals when they are moved.
mxGraph.prototype.labelsVisible
Specifies if labels should be visible.
mxGraph.prototype.htmlLabels
Specifies the return value for isHtmlLabel.
mxGraph.prototype.isHtmlLabel = function(cell)
Returns true if the label must be rendered as HTML markup.
mxGraph.prototype.swimlaneSelectionEnabled
Specifies if swimlanes should be selectable via the content if the mouse is released.
mxGraph.prototype.swimlaneNesting
Specifies if nesting of swimlanes is allowed.
mxGraph.prototype.swimlaneIndicatorColorAttribute
The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.
mxGraph.prototype.imageBundles
Holds the list of image bundles.
mxGraph.prototype.minFitScale
Specifies the minimum scale to be applied in fit.
mxGraph.prototype.fit = function(border,
keepOrigin,
margin,
enabled,
ignoreWidth,
ignoreHeight,
maxHeight)
Scales the graph such that the complete diagram fits into container and returns the current scale in the view.
mxGraph.prototype.maxFitScale
Specifies the maximum scale to be applied in fit.
mxGraph.prototype.panDx
Current horizontal panning value.
mxGraph.prototype.panDy
Current vertical panning value.
mxGraph.prototype.collapsedImage
Specifies the mxImage to indicate a collapsed state.
mxGraph.prototype.expandedImage
Specifies the mxImage to indicate a expanded state.
mxGraph.prototype.warningImage
Specifies the mxImage for the image to be used to display a warning overlay.
mxGraph.prototype.alreadyConnectedResource
Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected.
mxGraph.prototype.containsValidationErrorsResource
Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors.
mxGraph.prototype.collapseExpandResource
Specifies the resource key for the tooltip on the collapse/expand icon.
mxGraph.prototype.init = function(container)
Initializes the container and creates the respective datastructures.
mxGraph.prototype.createHandlers = function()
Creates the tooltip-, panning-, connection- and graph-handler (in this order).
mxGraph.prototype.createTooltipHandler = function()
Creates and returns a new mxTooltipHandler to be used in this graph.
Graph event handler that displays tooltips.
mxGraph.prototype.createSelectionCellsHandler = function()
Creates and returns a new mxTooltipHandler to be used in this graph.
mxGraph.prototype.createConnectionHandler = function()
Creates and returns a new mxConnectionHandler to be used in this graph.
Graph event handler that creates new connections.
mxGraph.prototype.createGraphHandler = function()
Creates and returns a new mxGraphHandler to be used in this graph.
Graph event handler that handles selection.
mxGraph.prototype.createPanningHandler = function()
Creates and returns a new mxPanningHandler to be used in this graph.
Event handler that pans and creates popupmenus.
mxGraph.prototype.createPopupMenuHandler = function()
Creates and returns a new mxPopupMenuHandler to be used in this graph.
Event handler that creates popupmenus.
mxGraph.prototype.createSelectionModel = function()
Creates a new mxGraphSelectionModel to be used in this graph.
mxGraph.prototype.createStylesheet = function()
Creates a new mxGraphSelectionModel to be used in this graph.
mxGraph.prototype.createGraphView = function()
Creates a new mxGraphView to be used in this graph.
mxGraph.prototype.createCellRenderer = function()
Creates a new mxCellRenderer to be used in this graph.
mxGraph.prototype.createCellEditor = function()
Creates a new mxCellEditor to be used in this graph.
mxGraph.prototype.getModel = function()
Returns the mxGraphModel that contains the cells.
mxGraph.prototype.getView = function()
Returns the mxGraphView that contains the mxCellStates.
mxGraph.prototype.getStylesheet = function()
Returns the mxStylesheet that defines the style.
mxGraph.prototype.setStylesheet = function(stylesheet)
Sets the mxStylesheet that defines the style.
mxGraph.prototype.getSelectionModel = function()
Returns the mxGraphSelectionModel that contains the selection.
mxGraph.prototype.setSelectionModel = function(selectionModel)
Sets the mxSelectionModel that contains the selection.
mxGraph.prototype.getSelectionCellsForChanges = function(changes,
ignoreFn)
Returns the cells to be selected for the given array of changes.
mxGraph.prototype.graphModelChanged = function(changes)
Called when the graph model changes.
mxGraph.prototype.updateSelection = function()
Removes selection cells that are not in the model from the selection.
mxGraph.prototype.processChange = function(change)
Processes the given change and invalidates the respective cached data in view.
mxGraph.prototype.removeStateForCell = function(cell)
Removes all cached information for the given cell and its descendants.
Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip.
mxGraph.prototype.getCellOverlays = function(cell)
Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
mxGraph.prototype.clearCellOverlays = function(cell)
Removes all mxCellOverlays in the graph for the given cell and all its descendants.
mxGraph.prototype.setCellWarning = function(cell,
warning,
img,
isSelect)
Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.
mxGraph.prototype.startEditing = function(evt)
Calls startEditingAtCell using the given cell or the first selection cell.
mxCellEditor.prototype.startEditing = function(cell,
trigger)
Starts the editor for the given cell.
mxGraph.prototype.getEditingValue = function(cell,
evt)
Returns the initial value for in-place editing.
mxGraph.prototype.labelChanged = function(cell,
value,
evt)
Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.
Fires between begin- and endUpdate in cellLabelChanged.
mxGraph.prototype.isSiblingSelected = function(cell)
Returns true if any sibling of the given cell is selected.
Base class for all mouse events in mxGraph.
mxGraph.prototype.createPanningManager = function()
Creates and returns an mxPanningManager.
Implements a handler for panning.
mxGraph.prototype.getBorderSizes = function()
Returns the size of the border and padding on all four sides of the container.
mxGraph.prototype.getPreferredPageSize = function(bounds,
width,
height)
Returns the preferred size of the background page if preferPageSize is true.
mxGraph.prototype.doResizeContainer = function(width,
height)
Resizes the container for the given graph width and height.
mxGraph.prototype.updatePageBreaks = function(visible,
width,
height)
Invokes from sizeDidChange to redraw the page breaks.
mxGraph.prototype.getCurrentCellStyle = function(cell,
ignoreState)
Returns the style for the given cell from the cell state, if one exists, or using getCellStyle.
mxGraph.prototype.getCellStyle = function(cell)
Returns an array of key, value pairs representing the cell style for the given cell.
mxGraph.prototype.postProcessCellStyle = function(style)
Tries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.
mxGraph.prototype.setCellStyle = function(style,
cells)
Sets the style of the specified cells.
mxGraph.prototype.toggleCellStyle = function(key,
defaultValue,
cell)
Toggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.
mxGraph.prototype.toggleCellStyles = function(key,
defaultValue,
cells)
Toggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.
mxGraph.prototype.setCellStyles = function(key,
value,
cells)
Sets the key to value in the styles of the given cells.
mxGraph.prototype.toggleCellStyleFlags = function(key,
flag,
cells)
Toggles the given bit for the given key in the styles of the specified cells.
mxGraph.prototype.setCellStyleFlags = function(key,
flag,
value,
cells)
Sets or toggles the given bit for the given key in the styles of the specified cells.
mxGraph.prototype.addImageBundle = function(bundle)
Adds the specified mxImageBundle.
Maps from keys to base64 encoded images or file locations.
mxGraph.prototype.removeImageBundle = function(bundle)
Removes the specified mxImageBundle.
mxGraph.prototype.getImageFromBundles = function(key)
Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
mxGraph.prototype.getCellsForGroup = function(cells)
Returns the cells with the same parent as the first cell in the given array.
mxGraph.prototype.getBoundsForGroup = function(group,
children,
border)
Returns the bounds to be used for the given group and children.
mxGraph.prototype.createGroupCell = function(cells)
Hook for creating the group cell to hold the given array of mxCells if no group cell was given to the group function.
Cells are the elements of the graph model.
mxGraph.prototype.getCellsForUngroup = function()
Returns the selection cells that can be ungrouped.
mxGraph.prototype.removeCellsAfterUngroup = function(cells)
Hook to remove the groups after ungroupCells.
mxGraph.prototype.updateGroupBounds = function(cells,
border,
moveGroup,
topBorder,
rightBorder,
bottomBorder,
leftBorder)
Updates the bounds of the given groups to include all children and returns the passed-in cells.
mxGraph.prototype.getBoundingBox = function(cells)
Returns the bounding box for the given array of mxCells.
mxGraph.prototype.cloneCell = function(cell,
allowInvalidEdges,
mapping,
keepPosition)
Returns the clone for the given cell.
mxGraph.prototype.cloneCells = function(cells,
allowInvalidEdges,
mapping,
keepPosition)
Returns the clones for the given cells.
mxGraph.prototype.insertVertex = function(parent,
id,
value,
x,
y,
width,
height,
style,
relative)
Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.
Extends mxRectangle to represent the geometry of a cell.
mxGraph.prototype.createVertex = function(parent,
id,
value,
x,
y,
width,
height,
style,
relative)
Hook method that creates the new vertex for insertVertex.
mxGraph.prototype.insertEdge = function(parent,
id,
value,
source,
target,
style)
Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.
mxGraph.prototype.createEdge = function(parent,
id,
value,
source,
target,
style)
Hook method that creates the new edge for insertEdge.
mxGraph.prototype.addEdge = function(edge,
parent,
source,
target,
index)
Adds the edge to the parent and connects it to the given source and target terminals.
mxGraph.prototype.addCell = function(cell,
parent,
index,
source,
target)
Adds the cell to the parent and connects it to the given source and target terminals.
mxGraph.prototype.autoSizeCell = function(cell,
recurse)
Resizes the specified cell to just fit around the its label and/or children
mxGraph.prototype.cellsToggled = function(cells,
show)
Sets the visible state of the specified cells.
mxGraph.prototype.cellsFolded = function(cells,
collapse,
recurse,
checkFoldable)
Sets the collapsed state of the specified cells.
mxGraph.prototype.swapBounds = function(cell,
willCollapse)
Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
mxGraph.prototype.updateAlternateBounds = function(cell,
geo,
willCollapse)
Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.
mxGraph.prototype.addAllEdges = function(cells)
Returns an array with the given cells and all edges that are connected to a cell or one of its descendants.
mxGraph.prototype.getAllEdges = function(cells)
Returns all edges connected to the given cells or its descendants.
mxGraph.prototype.cellSizeUpdated = function(cell,
ignoreChildren)
Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
mxGraph.prototype.getPreferredSizeForCell = function(cell,
textWidth)
Returns the preferred width and height of the given mxCell as an mxRectangle.
mxGraph.prototype.resizeCell = function(cell,
bounds,
recurse)
Sets the bounds of the given cell using resizeCells.
Fires between begin- and endUpdate in resizeCells.
Fires between begin- and endUpdate in cellsResized.
mxGraph.prototype.cellResized = function(cell,
bounds,
ignoreRelative,
recurse)
Resizes the parents recursively so that they contain the complete area of the resized child cell.
mxGraph.prototype.resizeChildCells = function(cell,
newGeo)
Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
mxGraph.prototype.constrainChildCells = function(cell)
Constrains the children of the given cell using constrainChild.
mxGraph.prototype.constrainChild = function(cell,
sizeFirst)
Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.
mxGraph.prototype.scaleCell = function(cell,
dx,
dy,
recurse)
Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
mxGraph.prototype.extendParent = function(cell)
Resizes the parents recursively so that they contain the complete area of the resized child cell.
mxGraph.prototype.importCells = function(cells,
dx,
dy,
target,
evt,
mapping)
Clones and inserts the given cells into the graph using the move method and returns the inserted cells.
mxGraph.prototype.translateCell = function(cell,
dx,
dy)
Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.
mxGraph.prototype.getCellContainmentArea = function(cell)
Returns the mxRectangle inside which a cell is to be kept.
mxGraph.prototype.getMaximumGraphBounds = function()
Returns the bounds inside which the diagram should be kept as an mxRectangle.
mxGraph.prototype.isConstrainChild = function(cell)
Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.
mxGraph.prototype.resetEdges = function(cells)
Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.
mxGraph.prototype.resetEdge = function(edge)
Resets the control points of the given edge.
mxGraph.prototype.getOutlineConstraint = function(point,
terminalState,
me)
Returns the constraint used to connect to the outline of the given state.
mxGraph.prototype.getAllConnectionConstraints = function(terminal,
source)
Returns an array of all mxConnectionConstraints for the given terminal.
Defines an object that contains the constraints about how to connect one side of an edge to its terminal.
mxGraph.prototype.getConnectionConstraint = function(edge,
terminal,
source)
Returns an mxConnectionConstraint that describes the given connection point.
mxGraph.prototype.setConnectionConstraint = function(edge,
terminal,
source,
constraint)
Sets the mxConnectionConstraint that describes the given connection point.
mxGraph.prototype.getConnectionPoint = function(vertex,
constraint,
round)
Returns the nearest point in the list of absolute points or the center of the opposite terminal.
Fires between begin- and endUpdate in connectCell.
mxGraph.prototype.disconnectGraph = function(cells)
Disconnects the given edges from the terminals which are not in the given array.
mxGraph.prototype.getCurrentRoot = function()
Returns the current root of the displayed cell hierarchy.
mxGraph.prototype.getTranslateForRoot = function(cell)
Returns the translation to be used if the given cell is the root cell as an mxPoint.
Implements a 2-dimensional vector with double precision coordinates.
mxGraph.prototype.isPort = function(cell)
Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.
mxGraph.prototype.getTerminalForPort = function(cell,
source)
Returns the terminal to be used for a given port.
mxGraph.prototype.getChildOffsetForCell = function(cell)
Returns the offset to be used for the cells inside the given cell.
mxGraph.prototype.enterGroup = function(cell)
Uses the given cell as the root of the displayed cell hierarchy.
mxGraph.prototype.exitGroup = function()
Changes the current root to the next valid root in the displayed cell hierarchy.
mxGraph.prototype.home = function()
Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.
mxGraph.prototype.isValidRoot = function(cell)
Returns true if the given cell is a valid root for the cell display hierarchy.
mxGraph.prototype.getGraphBounds = function()
Returns the bounds of the visible graph.
mxGraph.prototype.getCellBounds = function(cell,
includeEdges,
includeDescendants)
Returns the scaled, translated bounds for the given cell.
mxGraph.prototype.getBoundingBoxFromGeometry = function(cells,
includeEdges)
Returns the bounding box for the geometries of the vertices in the given array of cells.
mxGraph.prototype.snap = function(value)
Snaps the given numeric value to the grid if gridEnabled is true.
mxGraph.prototype.snapDelta = function(delta,
bounds,
ignoreGrid,
ignoreHorizontal,
ignoreVertical)
Snaps the given delta with the given scaled bounds.
mxGraph.prototype.zoomActual = function()
Resets the zoom and panning in the view.
mxGraph.prototype.zoomTo = function(scale,
center)
Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
mxGraph.prototype.zoom = function(factor,
center)
Zooms the graph using the given factor.
mxGraph.prototype.center = function(horizontal,
vertical,
cx,
cy)
Centers the graph in the container.
mxGraph.prototype.zoomToRect = function(rect)
Zooms the graph to the specified rectangle.
mxGraph.prototype.scrollCellToVisible = function(cell,
center)
Pans the graph so that it shows the given cell.
mxGraph.prototype.scrollRectToVisible = function(rect)
Pans the graph so that it shows the given rectangle.
mxGraph.prototype.getCellGeometry = function(cell)
Returns the mxGeometry for the given cell.
mxGraph.prototype.isCellVisible = function(cell)
Returns true if the given cell is visible in this graph.
mxGraph.prototype.isCellCollapsed = function(cell)
Returns true if the given cell is collapsed in this graph.
mxGraph.prototype.isCellConnectable = function(cell)
Returns true if the given cell is connectable in this graph.
mxGraph.prototype.isOrthogonal = function(edge)
Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
mxGraph.prototype.isLoop = function(state)
Returns true if the given cell state is a loop.
mxGraph.prototype.isCloneEvent = function(evt)
Returns true if the given event is a clone event.
mxGraph.prototype.isTransparentClickEvent = function(evt)
Hook for implementing click-through behaviour on selected cells.
mxGraph.prototype.isToggleEvent = function(evt)
Returns true if the given event is a toggle event.
mxGraph.prototype.isGridEnabledEvent = function(evt)
Returns true if the given mouse event should be aligned to the grid.
mxGraph.prototype.isConstrainedEvent = function(evt)
Returns true if the given mouse event should be aligned to the grid.
mxGraph.prototype.isIgnoreTerminalEvent = function(evt)
Returns true if the given mouse event should not allow any connections to be made.
mxGraph.prototype.validationAlert = function(message)
Displays the given validation error in a dialog.
mxGraph.prototype.isEdgeValid = function(edge,
source,
target)
Checks if the return value of getEdgeValidationError for the given arguments is null.
mxGraph.prototype.getEdgeValidationError = function(edge,
source,
target)
Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.
mxGraph.prototype.validateEdge = function(edge,
source,
target)
Hook method for subclassers to return an error message for the given edge and terminals.
mxGraph.prototype.validateGraph = function(cell,
context)
Validates the graph by validating each descendant of the given cell or the root of the model.
mxGraph.prototype.getCellValidationError = function(cell)
Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
mxGraph.prototype.validateCell = function(cell,
context)
Hook method for subclassers to return an error message for the given cell and validation context.
mxGraph.prototype.setBackgroundImage = function(image)
Sets the new backgroundImage.
mxGraph.prototype.getFoldingImage = function(state)
Returns the mxImage used to display the collapsed state of the specified cell state.
mxGraph.prototype.convertValueToString = function(cell)
Returns the textual representation for the given cell.
mxGraph.prototype.getLabel = function(cell)
Returns a string or DOM node that represents the label for the given cell.
mxGraph.prototype.isHtmlLabels = function()
Returns htmlLabels.
mxGraph.prototype.setHtmlLabels = function(value)
Sets htmlLabels.
mxGraph.prototype.isWrapping = function(cell)
This enables wrapping for HTML labels.
mxGraph.prototype.isLabelClipped = function(cell)
Returns true if the overflow portion of labels should be hidden.
mxGraph.prototype.getTooltip = function(state,
node,
x,
y)
Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.
mxGraph.prototype.getTooltipForCell = function(cell)
Returns the string or DOM node to be used as the tooltip for the given cell.
mxGraph.prototype.getLinkForCell = function(cell)
Returns the string to be used as the link for the given cell.
mxGraph.prototype.getCursorForMouseEvent = function(me)
Returns the cursor value to be used for the CSS of the shape for the given event.
mxGraph.prototype.getCursorForCell = function(cell)
Returns the cursor value to be used for the CSS of the shape for the given cell.
mxGraph.prototype.getStartSize = function(swimlane,
ignoreState)
Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.
mxGraph.prototype.getSwimlaneDirection = function(style)
Returns the direction for the given swimlane style.
mxGraph.prototype.getActualStartSize = function(swimlane,
ignoreState)
Returns the actual start size of the given swimlane taking into account direction and horizontal and vertial flip styles.
mxGraph.prototype.getImage = function(state)
Returns the image URL for the given cell state.
mxGraph.prototype.isTransparentState = function(state)
Returns true if the given state has no stroke- or fillcolor and no image.
mxGraph.prototype.getVerticalAlign = function(state)
Returns the vertical alignment for the given cell state.
mxGraph.prototype.getIndicatorColor = function(state)
Returns the indicator color for the given cell state.
mxGraph.prototype.getIndicatorGradientColor = function(state)
Returns the indicator gradient color for the given cell state.
mxGraph.prototype.getIndicatorShape = function(state)
Returns the indicator shape for the given cell state.
mxGraph.prototype.getIndicatorImage = function(state)
Returns the indicator image for the given cell state.
mxGraph.prototype.getBorder = function()
Returns the value of border.
mxGraph.prototype.setBorder = function(value)
Sets the value of border.
mxGraph.prototype.isSwimlane = function(cell,
ignoreState)
Returns true if the given cell is a swimlane in the graph.
mxGraph.prototype.isResizeContainer = function()
Returns resizeContainer.
mxGraph.prototype.setResizeContainer = function(value)
Sets resizeContainer.
mxGraph.prototype.setEnabled = function(value)
Specifies if the graph should allow any interactions.
mxGraph.prototype.isEscapeEnabled = function()
Returns escapeEnabled.
mxGraph.prototype.setEscapeEnabled = function(value)
Sets escapeEnabled.
mxGraph.prototype.isInvokesStopCellEditing = function()
Returns invokesStopCellEditing.
mxGraph.prototype.setInvokesStopCellEditing = function(value)
Sets invokesStopCellEditing.
mxGraph.prototype.isEnterStopsCellEditing = function()
Returns enterStopsCellEditing.
mxGraph.prototype.setEnterStopsCellEditing = function(value)
Sets enterStopsCellEditing.
mxGraph.prototype.isCellsLocked = function()
Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
mxGraph.prototype.setCellsLocked = function(value)
Sets if any cell may be moved, sized, bended, disconnected, edited or selected.
mxGraph.prototype.getCloneableCells = function(cells)
Returns the cells which may be exported in the given array of cells.
mxGraph.prototype.isCellsCloneable = function()
Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
mxGraph.prototype.setCellsCloneable = function(value)
Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.
mxGraph.prototype.getExportableCells = function(cells)
Returns the cells which may be exported in the given array of cells.
mxGraph.prototype.getImportableCells = function(cells)
Returns the cells which may be imported in the given array of cells.
mxGraph.prototype.isCellsSelectable = function()
Returns cellsSelectable.
mxGraph.prototype.setCellsSelectable = function(value)
Sets cellsSelectable.
mxGraph.prototype.getDeletableCells = function(cells)
Returns the cells which may be exported in the given array of cells.
mxGraph.prototype.isCellsDeletable = function()
Returns cellsDeletable.
mxGraph.prototype.setCellsDeletable = function(value)
Sets cellsDeletable.
mxGraph.prototype.isCellRotatable = function(cell)
Returns true if the given cell is rotatable.
mxGraph.prototype.getMovableCells = function(cells)
Returns the cells which are movable in the given array of cells.
mxGraph.prototype.isCellsMovable = function()
Returns cellsMovable.
mxGraph.prototype.setCellsMovable = function(value)
Specifies if the graph should allow moving of cells.
mxGraph.prototype.isGridEnabled = function()
Returns gridEnabled as a boolean.
mxGraph.prototype.setGridEnabled = function(value)
Specifies if the grid should be enabled.
mxGraph.prototype.isPortsEnabled = function()
Returns portsEnabled as a boolean.
mxGraph.prototype.setPortsEnabled = function(value)
Specifies if the ports should be enabled.
mxGraph.prototype.getGridSize = function()
Returns gridSize.
mxGraph.prototype.setGridSize = function(value)
Sets gridSize.
mxGraph.prototype.getTolerance = function()
Returns tolerance.
mxGraph.prototype.setTolerance = function(value)
Sets tolerance.
mxGraph.prototype.isVertexLabelsMovable = function()
Returns vertexLabelsMovable.
mxGraph.prototype.setVertexLabelsMovable = function(value)
Sets vertexLabelsMovable.
mxGraph.prototype.isEdgeLabelsMovable = function()
Returns edgeLabelsMovable.
mxGraph.prototype.isSwimlaneNesting = function()
Returns swimlaneNesting as a boolean.
mxGraph.prototype.setSwimlaneNesting = function(value)
Specifies if swimlanes can be nested by drag and drop.
mxGraph.prototype.isSwimlaneSelectionEnabled = function()
Returns swimlaneSelectionEnabled as a boolean.
mxGraph.prototype.setSwimlaneSelectionEnabled = function(value)
Specifies if swimlanes should be selected if the mouse is released over their content area.
mxGraph.prototype.isMultigraph = function()
Returns multigraph as a boolean.
mxGraph.prototype.setMultigraph = function(value)
Specifies if the graph should allow multiple connections between the same pair of vertices.
mxGraph.prototype.isAllowLoops = function()
Returns allowLoops as a boolean.
mxGraph.prototype.setAllowDanglingEdges = function(value)
Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.
mxGraph.prototype.isAllowDanglingEdges = function()
Returns allowDanglingEdges as a boolean.
mxGraph.prototype.setConnectableEdges = function(value)
Specifies if edges should be connectable.
mxGraph.prototype.isConnectableEdges = function()
Returns connectableEdges as a boolean.
mxGraph.prototype.setCloneInvalidEdges = function(value)
Specifies if edges should be inserted when cloned but not valid wrt.
mxGraph.prototype.isCloneInvalidEdges = function()
Returns cloneInvalidEdges as a boolean.
mxGraph.prototype.setAllowLoops = function(value)
Specifies if loops are allowed.
mxGraph.prototype.isDisconnectOnMove = function()
Returns disconnectOnMove as a boolean.
mxGraph.prototype.setDisconnectOnMove = function(value)
Specifies if edges should be disconnected when moved.
mxGraph.prototype.setDropEnabled = function(value)
Specifies if the graph should allow dropping of cells onto or into other cells.
mxGraph.prototype.isSplitEnabled = function()
Returns splitEnabled as a boolean.
mxGraph.prototype.setSplitEnabled = function(value)
Specifies if the graph should allow dropping of cells onto or into other cells.
mxGraph.prototype.isCellsResizable = function()
Returns cellsResizable.
mxGraph.prototype.setCellsResizable = function(value)
Specifies if the graph should allow resizing of cells.
mxGraph.prototype.isTerminalPointMovable = function(cell,
source)
Returns true if the given terminal point is movable.
mxGraph.prototype.isCellBendable = function(cell)
Returns true if the given cell is bendable.
mxGraph.prototype.setCellsBendable = function(value)
Specifies if the graph should allow bending of edges.
mxGraph.prototype.isCellsEditable = function()
Returns cellsEditable.
mxGraph.prototype.setCellsEditable = function(value)
Specifies if the graph should allow in-place editing for cell labels.
mxGraph.prototype.isCellDisconnectable = function(cell,
terminal,
source)
Returns true if the given cell is disconnectable from the source or target terminal.
mxGraph.prototype.isCellsDisconnectable = function()
Returns cellsDisconnectable.
mxGraph.prototype.setCellsDisconnectable = function(value)
Sets cellsDisconnectable.
mxGraph.prototype.isValidSource = function(cell)
Returns true if the given cell is a valid source for new connections.
mxGraph.prototype.isValidTarget = function(cell)
Returns isValidSource for the given cell.
mxGraph.prototype.isValidConnection = function(source,
target)
Returns true if the given target cell is a valid target for source.
mxGraph.prototype.setConnectable = function(connectable)
Specifies if the graph should allow new connections.
mxGraph.prototype.isConnectable = function()
Returns true if the connectionHandler is enabled.
mxGraph.prototype.setTooltips = function (enabled)
Specifies if tooltips should be enabled.
mxGraph.prototype.setPanning = function(enabled)
Specifies if panning should be enabled.
mxGraph.prototype.isEditing = function(cell)
Returns true if the given cell is currently being edited.
mxGraph.prototype.isAutoSizeCell = function(cell)
Returns true if the size of the given cell should automatically be updated after a change of the label.
mxGraph.prototype.isAutoSizeCells = function()
Returns autoSizeCells.
mxGraph.prototype.setAutoSizeCells = function(value)
Specifies if cell sizes should be automatically updated after a label change.
mxGraph.prototype.isExtendParent = function(cell)
Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.
mxGraph.prototype.isExtendParents = function()
Returns extendParents.
mxGraph.prototype.setExtendParents = function(value)
Sets extendParents.
mxGraph.prototype.isExtendParentsOnAdd = function(cell)
Returns extendParentsOnAdd.
mxGraph.prototype.setExtendParentsOnAdd = function(value)
Sets extendParentsOnAdd.
mxGraph.prototype.isExtendParentsOnMove = function()
Returns extendParentsOnMove.
mxGraph.prototype.setExtendParentsOnMove = function(value)
Sets extendParentsOnMove.
mxGraph.prototype.setRecursiveResize = function(value)
Sets recursiveResize.
mxGraph.prototype.isConstrainChildren = function()
Returns constrainChildren.
mxGraph.prototype.setConstrainChildren = function(value)
Sets constrainChildren.
mxGraph.prototype.isConstrainRelativeChildren = function()
Returns constrainRelativeChildren.
mxGraph.prototype.setConstrainRelativeChildren = function(value)
Sets constrainRelativeChildren.
mxGraph.prototype.getFoldableCells = function(cells,
collapse)
Returns the cells which are movable in the given array of cells.
mxGraph.prototype.isCellFoldable = function(cell,
collapse)
Returns true if the given cell is foldable.
mxGraph.prototype.isValidDropTarget = function(cell,
cells,
evt)
Returns true if the given cell is a valid drop target for the specified cells.
mxGraph.prototype.isSplitTarget = function(target,
cells,
evt)
Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
mxGraph.prototype.getDropTarget = function(cells,
evt,
cell,
clone)
Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.
mxGraph.prototype.getDefaultParent = function()
Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.
mxGraphView.prototype.currentRoot
mxCell that acts as the root of the displayed cell hierarchy.
mxGraphModel.prototype.root
Holds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells.
mxGraph.prototype.setDefaultParent = function(cell)
Sets the defaultParent to the given cell.
mxGraph.prototype.getSwimlane = function(cell)
Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.
mxGraph.prototype.getSwimlaneAt = function (x,
y,
parent)
Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
mxGraph.prototype.getCellAt = function(x,
y,
parent,
vertices,
edges,
ignoreFn)
Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.
mxGraph.prototype.intersects = function(state,
x,
y)
Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
mxGraph.prototype.hitsSwimlaneContent = function(swimlane,
x,
y)
Returns true if the given coordinate pair is inside the content are of the given swimlane.
mxGraph.prototype.getChildVertices = function(parent)
Returns the visible child vertices of the given parent.
mxGraph.prototype.getChildEdges = function(parent)
Returns the visible child edges of the given parent.
mxGraph.prototype.getChildCells = function(parent,
vertices,
edges)
Returns the visible child vertices or edges in the given parent.
mxGraph.prototype.getConnections = function(cell,
parent)
Returns all visible edges connected to the given cell without loops.
mxGraph.prototype.getIncomingEdges = function(cell,
parent)
Returns the visible incoming edges for the given cell.
mxGraph.prototype.getOutgoingEdges = function(cell,
parent)
Returns the visible outgoing edges for the given cell.
mxGraph.prototype.getEdges = function(cell,
parent,
incoming,
outgoing,
includeLoops,
recurse)
Returns the incoming and/or outgoing edges for the given cell.
mxGraph.prototype.isValidAncestor = function(cell,
parent,
recurse)
Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.
mxGraph.prototype.getOpposites = function(edges,
terminal,
sources,
targets)
Returns all distinct visible opposite cells for the specified terminal on the given edges.
mxGraph.prototype.getEdgesBetween = function(source,
target,
directed)
Returns the edges between the given source and target.
mxGraph.prototype.getPointForEvent = function(evt,
addOffset)
Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of container and applies the grid.
mxGraph.prototype.getCells = function(x,
y,
width,
height,
parent,
result,
intersection,
ignoreFn,
includeDescendants)
Returns the child vertices and edges of the given parent that are contained in the given rectangle.
mxGraph.prototype.getCellsBeyond = function(x0,
y0,
parent,
rightHalfpane,
bottomHalfpane)
Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.
mxGraph.prototype.findTreeRoots = function(parent,
isolate,
invert)
Returns all children in the given parent which do not have incoming edges.
mxGraph.prototype.traverse = function(vertex,
directed,
func,
edge,
visited,
inverse)
Traverses the (directed) graph invoking the given function for each visited vertex and edge.
mxGraph.prototype.isCellSelected = function(cell)
Returns true if the given cell is selected.
mxGraph.prototype.isSelectionEmpty = function()
Returns true if the selection is empty.
mxGraph.prototype.clearSelection = function()
Clears the selection using mxGraphSelectionModel.clear.
mxGraphSelectionModel.prototype.clear = function()
Clears the selection and fires a change event if the selection was not empty.
mxGraph.prototype.getSelectionCount = function()
Returns the number of selected cells.
mxGraph.prototype.getSelectionCell = function()
Returns the first cell from the array of selected mxCells.
mxGraph.prototype.getSelectionCells = function()
Returns the array of selected mxCells.
mxGraph.prototype.setSelectionCell = function(cell)
Sets the selection cell.
mxGraph.prototype.setSelectionCells = function(cells)
Sets the selection cell.
mxGraph.prototype.addSelectionCell = function(cell)
Adds the given cell to the selection.
mxGraph.prototype.addSelectionCells = function(cells)
Adds the given cells to the selection.
mxGraph.prototype.removeSelectionCell = function(cell)
Removes the given cell from the selection.
mxGraph.prototype.removeSelectionCells = function(cells)
Removes the given cells from the selection.
mxGraph.prototype.selectRegion = function(rect,
evt)
Selects and returns the cells inside the given rectangle for the specified event.
mxGraph.prototype.selectNextCell = function()
Selects the next cell.
mxGraph.prototype.selectPreviousCell = function()
Selects the previous cell.
mxGraph.prototype.selectParentCell = function()
Selects the parent cell.
mxGraph.prototype.selectChildCell = function()
Selects the first child cell.
mxGraph.prototype.selectCell = function(isNext,
isParent,
isChild)
Selects the next, parent, first child or previous cell, if all arguments are false.
mxGraph.prototype.selectAll = function(parent,
descendants)
Selects all children of the given parent cell or the children of the default parent if no parent is specified.
mxGraph.prototype.selectVertices = function(parent,
selectGroups)
Select all vertices inside the given parent or the default parent.
mxGraph.prototype.selectCells = function(vertices,
edges,
parent,
selectGroups)
Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.
mxGraph.prototype.selectCellForEvent = function(cell,
evt)
Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
mxGraph.prototype.selectCellsForEvent = function(cells,
evt)
Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
mxGraph.prototype.createHandler = function(state)
Creates a new handler for the given cell state.
mxGraph.prototype.createVertexHandler = function(state)
Hooks to create a new mxVertexHandler for the given mxCellState.
Event handler for resizing cells.
mxGraph.prototype.createEdgeHandler = function(state,
edgeStyle)
Hooks to create a new mxEdgeHandler for the given mxCellState.
Graph event handler that reconnects edges and modifies control points and the edge label location.
mxGraph.prototype.createEdgeSegmentHandler = function(state)
Hooks to create a new mxEdgeSegmentHandler for the given mxCellState.
mxGraph.prototype.createElbowEdgeHandler = function(state)
Hooks to create a new mxElbowEdgeHandler for the given mxCellState.
Graph event handler that reconnects edges and modifies control points and the edge label location.
mxGraph.prototype.addMouseListener = function(listener)
Adds a listener to the graph event dispatch loop.
mxGraph.prototype.removeMouseListener = function(listener)
Removes the specified graph listener.
mxGraph.prototype.updateMouseEvent = function(me,
evtName)
Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.
mxGraph.prototype.isEventIgnored = function(evtName,
me,
sender)
Returns true if the event should be ignored in fireMouseEvent.
mxGraph.prototype.isSyntheticEventIgnored = function(evtName,
me,
sender)
Hook for ignoring synthetic mouse events after touchend in Firefox.
mxGraph.prototype.isEventSourceIgnored = function(evtName,
me)
Returns true if the event should be ignored in fireMouseEvent.
mxGraph.prototype.getEventState = function(state)
Returns the mxCellState to be used when firing the mouse event for the given state.
mxGraph.prototype.consumeMouseEvent = function(evtName,
me,
sender)
Consumes the given mxMouseEvent if it’s a touchStart event.
Fires in fireGestureEvent after a touch gesture.
mxGraph.prototype.destroy = function()
Destroys the graph and all its resources.
Event handler that selects rectangular regions.
mxGraphView.prototype.validate = function(cell)
Calls validateCell and validateCellState and updates the graphBounds using getBoundingBox.
SHAPE_IMAGE: 'image'
Name under which mxImageShape is registered in mxCellRenderer.
SHAPE_LABEL: 'label'
Name under which mxLabel is registered in mxCellRenderer.
STYLE_IMAGE: 'image'
Defines the key for the image style.
mxGraphModel.prototype.setValue = function(cell,
value)
Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.
mxGraphModel.prototype.valueForCellChanged = function(cell,
value)
Inner callback to update the user object of the given mxCell using mxCell.valueChanged and return the previous value, that is, the return value of mxCell.valueChanged.
Action to change a user object in a model.
Defines various global constants.
mxCell.prototype.style
Holds the style as a string of the form [(stylename|key=value);].
DIALECT_SVG: 'svg'
Defines the SVG display dialect name.
DIALECT_STRICTHTML: 'strictHtml'
Defines the strict HTML display dialect.
DIALECT_PREFERHTML: 'preferHtml'
Defines the preferred HTML display dialect name.
DIALECT_MIXEDHTML: 'mixedHtml'
Defines the mixed HTML display dialect name.
DIALECT_VML: 'vml'
Defines the VML display dialect name.
PAGE_FORMAT_A4_PORTRAIT: new mxRectangle(0,
0,
827,
1169)
Defines the rectangle for the A4 portrait page format.
Implements printing of a diagram across multiple pages.
mxPanningManager.prototype.border
Border to handle automatic panning inside the component.
STYLE_LOOP: 'loopStyle'
Defines the key for the loop style.
Loop: function(state,
source,
target,
points,
result)
Implements a self-reference, aka.
STYLE_FILLCOLOR: 'fillColor'
Defines the key for the fill color.
mxGraphView.prototype.rendering
Specifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.
STYLE_ROUNDED: 'rounded'
Defines the key for the rounded style.
Fires between begin- and endUpdate in flipEdge.
STYLE_ELBOW: 'elbow'
Defines the key for the elbow style.
Fires between begin- and endUpdate in orderCells.
Fires between begin- and endUpdate in cellsOrdered.
Fires between begin- and endUpdate in groupCells.
mxGraphView.prototype.getBoundingBox = function(state,
recurse)
Returns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.
mxGraphModel.prototype.cloneCells = function(cells,
includeChildren,
mapping)
Returns an array of clones for the given array of mxCells.
Fires between begin- and endUpdate in addCells.
Fires between begin- and endUpdate in cellsAdded.
Fires between begin- and endUpdate in removeCells.
Fires between begin- and endUpdate in cellsRemoved.
Fires between begin- and endUpdate in splitEdge.
Fires between begin- and endUpdate in toggleCells.
Fires between begin- and endUpdate in foldCells.
Fires between begin- and endUpdate in cellsFolded.
Fires between begin- and endUpdate in updateCellSize.
Fires between begin- and endUpdate in moveCells.
Fires between begin- and endUpdate in cellsMoved.
Implements a generic shape which is based on a XML node as a description.
Fires between begin- and endUpdate in cellConnected.
mxGraphModel.prototype.isRoot = function(cell)
Returns true if the given cell is the root of the model and a non-null value.
mxGraphModel.prototype.isLayer = function(cell)
Returns true if isRoot returns true for the parent of the given cell.
mxGraphView.prototype.getGraphBounds = function()
Returns graphBounds.
mxGraphView.prototype.getBounds = function(cells)
Returns the union of all mxCellStates for the given array of mxCells.
mxGraphView.prototype.setTranslate = function(dx,
dy)
Sets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.
PAN: 'pan'
Specifies the event name for pan.
mxGraphModel.prototype.getGeometry = function(cell)
Returns the mxGeometry of the given mxCell.
mxGraphModel.prototype.isVisible = function(cell)
Returns true if the given mxCell is visible.
mxGraphModel.prototype.isCollapsed = function(cell)
Returns true if the given mxCell is collapsed.
mxGraphModel.prototype.isConnectable = function(cell)
Returns true if the given mxCell is connectable.
STYLE_WHITE_SPACE: 'whiteSpace'
Defines the key for the white-space style.
STYLE_OVERFLOW: 'overflow'
Defines the key for the overflow style.
STYLE_VERTICAL_ALIGN: 'verticalAlign'
Defines the key for the verticalAlign style.
STYLE_INDICATOR_COLOR: 'indicatorColor'
Defines the key for the indicatorColor style.
STYLE_INDICATOR_GRADIENTCOLOR: 'indicatorGradientColor'
Defines the key for the indicatorGradientColor style.
STYLE_INDICATOR_SHAPE: 'indicatorShape'
Defines the key for the indicator shape used within an mxLabel.
STYLE_INDICATOR_IMAGE: 'indicatorImage'
Defines the key for the indicator image used within an mxLabel.
Extends mxShape to implement a swimlane shape.
STYLE_CLONEABLE: 'cloneable'
Defines the key for the cloneable style.
STYLE_DELETABLE: 'deletable'
Defines the key for the deletable style.
STYLE_ROTATABLE: 'rotatable'
Defines the key for the rotatable style.
STYLE_MOVABLE: 'movable'
Defines the key for the movable style.
STYLE_RESIZABLE: 'resizable'
Defines the key for the resizable style.
STYLE_BENDABLE: 'bendable'
Defines the key for the bendable style.
STYLE_EDITABLE: 'editable'
Defines the key for the editable style.
mxConnectionHandler.prototype.enabled
Specifies if events are handled.
mxTooltipHandler.prototype.enabled
Specifies if events are handled.
mxPanningHandler.prototype.panningEnabled
Specifies if panning should be enabled.
STYLE_AUTOSIZE: 'autosize'
Defines the key for the autosize style.
STYLE_FOLDABLE: 'foldable'
Defines the key for the foldable style.
A wrapper class for an associative array with object keys.
MOUSE_DOWN: 'mouseDown'
Specifies the event name for mouseDown.
MOUSE_MOVE: 'mouseMove'
Specifies the event name for mouseMove.
MOUSE_UP: 'mouseUp'
Specifies the event name for mouseUp.
Close