mxGraphView

function mxGraphView( graph )

Constructs a new view for the given mxGraph.

Parameters

Specifies the resource key for the status message while the document is being updated.  If the resource for this key does not exist then the value is used as the status message.  Default is ‘updatingDocument’.

mxGraphView.prototype.getGraphBounds = function()

Returns graphBounds.

mxGraphView.prototype.setGraphBounds = function( value )

Sets graphBounds.

mxGraphView.prototype.getBounds = function( cells )

Returns the union of all mxCellStates for the given array of mxCells.

Parameters

mxGraphView.prototype.setCurrentRoot = function( root )

Sets and returns the current root and fires an <undo> event before calling mxGraph.sizeDidChange.

Parameters

mxGraphView.prototype.scaleAndTranslate = function( scale, dx, dy )

Sets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.

Parameters

mxGraphView.prototype.getScale = function()

Returns the scale.

mxGraphView.prototype.setScale = function( value )

Sets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.

Parameters

mxGraphView.prototype.getTranslate = function()

Returns the translate.

mxGraphView.prototype.setTranslate = function( dx, dy )

Sets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.  The translation is the negative of the origin.

Parameters

mxGraphView.prototype.refresh = function()

Clears the view if currentRoot is not null and revalidates.

mxGraphView.prototype.revalidate = function()

Revalidates the complete view with all cell states.

mxGraphView.prototype.clear = function( cell, force, recurse )

Removes the state of the given cell and all descendants if the given cell is not the current root.

Parameters

mxGraphView.prototype.invalidate = function( cell, recurse, includeEdges )

Invalidates the state of the given cell, all its descendants and connected edges.

Parameters

mxGraphView.prototype.validate = function( cell )

Calls validateCell and validateCellState and updates the graphBounds using getBoundingBox.  Finally the background is validated using validateBackground.

Parameters

mxGraphView.prototype.getEmptyBounds = function()

Returns the bounds for an empty graph.  This returns a rectangle at translate with the size of 0 x 0.

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.

Parameters

mxGraphView.prototype.createBackgroundPageShape = function( bounds )

Creates and returns the shape used as the background page.

Parameters

mxGraphView.prototype.validateBackground = function()

Calls validateBackgroundImage and validateBackgroundPage.

mxGraphView.prototype.validateBackgroundImage = function()

Validates the background image.

mxGraphView.prototype.validateBackgroundPage = function()

Validates the background page.

mxGraphView.prototype.getBackgroundPageBounds = function()

Returns the bounds for the background page.

mxGraphView.prototype.redrawBackgroundImage = function( backgroundImage, bg )

Updates the bounds and redraws the background image.

Example

If the background image should not be scaled, this can be replaced with the following.

mxGraphView.prototype.redrawBackground = function(backgroundImage, bg)
{
  backgroundImage.bounds.x = this.translate.x;
  backgroundImage.bounds.y = this.translate.y;
  backgroundImage.bounds.width = bg.width;
  backgroundImage.bounds.height = bg.height;

  backgroundImage.redraw();
};

Parameters

mxGraphView.prototype.validateCell = function( cell, visible )

Recursively creates the cell state for the given cell if visible is true and the given cell is visible.  If the cell is not visible but the state exists then it is removed using removeState.

Parameters

mxGraphView.prototype.validateCellState = function( cell, recurse )

Validates and repaints the mxCellState for the given mxCell.

Parameters

mxGraphView.prototype.updateCellState = function( state )

Updates the given mxCellState.

Parameters

mxGraphView.prototype.isCellCollapsed = function( cell )

Returns true if the children of the given cell should not be visible in the view.  This implementation uses mxGraph.isCellVisible but it can be overidden to use a separate condition.

mxGraphView.prototype.updateVertexState = function( state, geo )

Validates the given cell state.

mxGraphView.prototype.updateEdgeState = function( state, geo )

Validates the given cell state.

mxGraphView.prototype.updateVertexLabelOffset = function( state )

Updates the absoluteOffset of the given vertex cell state.  This takes into account the label position styles.

Parameters

mxGraphView.prototype.resetValidationState = function()

Resets the current validation state.

mxGraphView.prototype.stateValidated = function( state )

Invoked when a state has been processed in <validatePoints>.  This is used to update the order of the DOM nodes of the shape.

Parameters

mxGraphView.prototype.updateFixedTerminalPoints = function( edge, source, target )

Sets the initial absolute terminal points in the given state before the edge style is computed.

Parameters

mxGraphView.prototype.updateFixedTerminalPoint = function( edge, terminal, source, constraint )

Sets the fixed source or target terminal point on the given edge.

Parameters

mxGraphView.prototype.getFixedTerminalPoint = function( edge, terminal, source, constraint )

Returns the fixed source or target terminal point for the given edge.

Parameters

mxGraphView.prototype.updateBoundsFromStencil = function( state )

Updates the bounds of the given cell state to reflect the bounds of the stencil if it has a fixed aspect and returns the previous bounds as an mxRectangle if the bounds have been modified or null otherwise.

Parameters

mxGraphView.prototype.updatePoints = function( edge, points, source, target )

Updates the absolute points in the given state using the specified array of mxPoints as the relative points.

Parameters

mxGraphView.prototype.transformControlPoint = function( state, pt )

Transforms the given control point to an absolute point.

mxGraphView.prototype.isLoopStyleEnabled = function( edge, points, source, target )

Returns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge.  This implementation returns true if the given edge is a loop and does not

mxGraphView.prototype.getEdgeStyle = function( edge, points, source, target )

Returns the edge style function to be used to render the given edge state.

mxGraphView.prototype.updateFloatingTerminalPoints = function( state, source, target )

Updates the terminal points in the given state after the edge style was computed for the edge.

Parameters

mxGraphView.prototype.updateFloatingTerminalPoint = function( edge, start, end, source )

Updates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.

Parameters

mxGraphView.prototype.getFloatingTerminalPoint = function( edge, start, end, source )

Returns the floating terminal point for the given edge, start and end state, where start is the source if source is true.

Parameters

mxGraphView.prototype.getTerminalPort = function( state, terminal, source )

Returns an mxCellState that represents the source or target terminal or port for the given edge.

Parameters

mxGraphView.prototype.getPerimeterPoint = function( terminal, next, orthogonal, border )

Returns an mxPoint that defines the location of the intersection point between the perimeter and the line between the center of the shape and the given point.

Parameters

mxGraphView.prototype.getRoutingCenterX = function ( state )

Returns the x-coordinate of the center point for automatic routing.

mxGraphView.prototype.getRoutingCenterY = function ( state )

Returns the y-coordinate of the center point for automatic routing.

mxGraphView.prototype.getPerimeterBounds = function( terminal, border )

Returns the perimeter bounds for the given terminal, edge pair as an mxRectangle.

If you have a model where each terminal has a relative child that should act as the graphical endpoint for a connection from/to the terminal, then this method can be replaced as follows:

var oldGetPerimeterBounds = mxGraphView.prototype.getPerimeterBounds;
mxGraphView.prototype.getPerimeterBounds = function(terminal, edge, isSource)
{
  var model = this.graph.getModel();
  var childCount = model.getChildCount(terminal.cell);

  if (childCount > 0)
  {
    var child = model.getChildAt(terminal.cell, 0);
    var geo = model.getGeometry(child);

    if (geo != null &&
        geo.relative)
    {
      var state = this.getState(child);

      if (state != null)
      {
        terminal = state;
      }
    }
  }

  return oldGetPerimeterBounds.apply(this, arguments);
};

Parameters

mxGraphView.prototype.getPerimeterFunction = function( state )

Returns the perimeter function for the given state.

mxGraphView.prototype.getNextPoint = function( edge, opposite, source )

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

Parameters

mxGraphView.prototype.getVisibleTerminal = function( edge, source )

Returns the nearest ancestor terminal that is visible.  The edge appears to be connected to this terminal on the display.  The result of this method is cached in mxCellState.getVisibleTerminalState.

Parameters

mxGraphView.prototype.updateEdgeBounds = function( state )

Updates the given state using the bounding box of t he absolute points.  Also updates mxCellState.terminalDistance, mxCellState.length and mxCellState.segments.

Parameters

mxGraphView.prototype.getPoint = function( state, geometry )

Returns the absolute point on the edge for the given relative mxGeometry as an mxPoint.  The edge is represented by the given mxCellState.

Parameters

mxGraphView.prototype.getRelativePoint = function( edgeState, x, y )

Gets the relative point that describes the given, absolute label position for the given edge state.

Parameters

mxGraphView.prototype.updateEdgeLabelOffset = function( state )

Updates mxCellState.absoluteOffset for the given state.  The absolute offset is normally used for the position of the edge label.  Is is calculated from the geometry as an absolute offset from the center between the two endpoints if the geometry is absolute, or as the relative distance between the center along the line and the absolute orthogonal distance if the geometry is relative.

Parameters

mxGraphView.prototype.getState = function( cell, create )

Returns the mxCellState for the given cell.  If create is true, then the state is created if it does not yet exist.

Parameters

mxGraphView.prototype.isRendering = function()

Returns rendering.

mxGraphView.prototype.setRendering = function( value )

Sets rendering.

mxGraphView.prototype.isAllowEval = function()

Returns allowEval.

mxGraphView.prototype.setAllowEval = function( value )

Sets allowEval.

mxGraphView.prototype.getStates = function()

Returns states.

mxGraphView.prototype.setStates = function( value )

Sets states.

mxGraphView.prototype.getCellStates = function( cells )

Returns the mxCellStates for the given array of mxCells.  The array contains all states that are not null, that is, the returned array may have less elements than the given array.  If no argument is given, then this returns states.

mxGraphView.prototype.removeState = function( cell )

Removes and returns the mxCellState for the given cell.

Parameters

mxGraphView.prototype.createState = function( cell )

Creates and returns an mxCellState for the given cell and initializes it using <mxCellRenderer.initialize>.

Parameters

mxGraphView.prototype.getCanvas = function()

Returns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.

mxGraphView.prototype.getBackgroundPane = function()

Returns the DOM node that represents the background layer.

mxGraphView.prototype.getDrawPane = function()

Returns the DOM node that represents the main drawing layer.

mxGraphView.prototype.getOverlayPane = function()

Returns the DOM node that represents the layer above the drawing layer.

mxGraphView.prototype.getDecoratorPane = function()

Returns the DOM node that represents the topmost drawing layer.

mxGraphView.prototype.isContainerEvent = function( evt )

Returns true if the event origin is one of the drawing panes or containers of the view.

mxGraphView.prototype.isScrollEvent = function( evt )

Returns true if the event origin is one of the scrollbars of the container in IE.  Such events are ignored.

mxGraphView.prototype.init = function()

Initializes the graph event dispatch loop for the specified container and invokes create to create the required DOM nodes for the display.

mxGraphView.prototype.installListeners = function()

Installs the required listeners in the container.

mxGraphView.prototype.createHtml = function()

Creates the DOM nodes for the HTML display.

mxGraphView.prototype.updateHtmlCanvasSize = function( width, height )

Updates the size of the HTML canvas.

mxGraphView.prototype.createHtmlPane = function( width, height )

Creates and returns a drawing pane in HTML (DIV).

mxGraphView.prototype.createVml = function()

Creates the DOM nodes for the VML display.

mxGraphView.prototype.createVmlPane = function( width, height )

Creates a drawing pane in VML (group).

mxGraphView.prototype.createSvg = function()

Creates and returns the DOM nodes for the SVG display.

mxGraphView.prototype.updateContainerStyle = function( container )

Updates the style of the container after installing the SVG DOM elements.

mxGraphView.prototype.destroy = function()

Destroys the view and all its resources.

function mxCurrentRootChange( view, root )

Constructs a change of the current root in the given view.

mxCurrentRootChange.prototype.execute = function()

Changes the current root of the view.