mxGraphView

Extends mxEventSource to implement a view for a graph.  This class is in charge of computing the absolute coordinates for the relative child geometries, the points for perimeters and edge styles and keeping them cached in mxCellStates for faster retrieval.  The states are updated whenever the model or the view state (translate, scale) changes.  The scale and translate are honoured in the bounds.

Summary
mxGraphViewExtends mxEventSource to implement a view for a graph.
Events
mxEvent.UNDOFires after the root was changed in setCurrentRoot.
mxEvent.SCALE_AND_TRANSLATEFires after the scale and translate have been changed in scaleAndTranslate.
mxEvent.SCALEFires after the scale was changed in setScale.
mxEvent.TRANSLATEFires after the translate was changed in setTranslate.
mxEvent.DOWN and mxEvent.UPFire if the current root is changed by executing an mxCurrentRootChange.
Functions
mxGraphViewConstructs a new view for the given mxGraph.
Variables
doneResourceSpecifies the resource key for the status message after a long operation.
Functions
updatingDocumentResourceSpecifies the resource key for the status message while the document is being updated.
Variables
allowEvalSpecifies if string values in cell styles should be evaluated using mxUtils.eval.
captureDocumentGestureSpecifies if a gesture should be captured when it goes outside of the graph container.
optimizeVmlReflowsSpecifies if the <canvas> should be hidden while rendering in IE8 standards mode and quirks mode.
renderingSpecifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.
graphReference to the enclosing mxGraph.
currentRootmxCell that acts as the root of the displayed cell hierarchy.
graphBoundsmxRectangle that caches the scales, translated bounds of the current view.
scaleSpecifies the scale.
translatemxPoint that specifies the current translation.
statesmxDictionary that maps from cell IDs to mxCellStates.
updateStyleSpecifies if the style should be updated in each validation step.
lastNodeDuring validation, this contains the last DOM node that was processed.
lastHtmlNodeDuring validation, this contains the last HTML DOM node that was processed.
lastForegroundNodeDuring validation, this contains the last edge’s DOM node that was processed.
lastForegroundHtmlNodeDuring validation, this contains the last edge HTML DOM node that was processed.
Functions
getGraphBoundsReturns graphBounds.
setGraphBoundsSets graphBounds.
getBoundsReturns the union of all mxCellStates for the given array of mxCells.
setCurrentRootSets and returns the current root and fires an <undo> event before calling mxGraph.sizeDidChange.
scaleAndTranslateSets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.
getScaleReturns the scale.
setScaleSets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.
getTranslateReturns the translate.
setTranslateSets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.
viewStateChangedInvoked after scale and/or translate has changed.
refreshClears the view if currentRoot is not null and revalidates.
revalidateRevalidates the complete view with all cell states.
clearRemoves the state of the given cell and all descendants if the given cell is not the current root.
invalidateInvalidates the state of the given cell, all its descendants and connected edges.
validateCalls validateCell and validateCellState and updates the graphBounds using getBoundingBox.
getEmptyBoundsReturns the bounds for an empty graph.
getBoundingBoxReturns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.
createBackgroundPageShapeCreates and returns the shape used as the background page.
validateBackgroundCalls validateBackgroundImage and validateBackgroundPage.
validateBackgroundImageValidates the background image.
validateBackgroundPageValidates the background page.
getBackgroundPageBoundsReturns the bounds for the background page.
redrawBackgroundImageUpdates the bounds and redraws the background image.
validateCellRecursively creates the cell state for the given cell if visible is true and the given cell is visible.
validateCellStateValidates and repaints the mxCellState for the given mxCell.
updateCellStateUpdates the given mxCellState.
isCellCollapsedReturns true if the children of the given cell should not be visible in the view.
updateVertexStateValidates the given cell state.
updateEdgeStateValidates the given cell state.
updateVertexLabelOffsetUpdates the absoluteOffset of the given vertex cell state.
resetValidationStateResets the current validation state.
stateValidatedInvoked when a state has been processed in <validatePoints>.
updateFixedTerminalPointsSets the initial absolute terminal points in the given state before the edge style is computed.
updateFixedTerminalPointSets the fixed source or target terminal point on the given edge.
getFixedTerminalPointReturns the fixed source or target terminal point for the given edge.
updateBoundsFromStencilUpdates 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.
updatePointsUpdates the absolute points in the given state using the specified array of mxPoints as the relative points.
transformControlPointTransforms the given control point to an absolute point.
isLoopStyleEnabledReturns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge.
getEdgeStyleReturns the edge style function to be used to render the given edge state.
updateFloatingTerminalPointsUpdates the terminal points in the given state after the edge style was computed for the edge.
updateFloatingTerminalPointUpdates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.
getFloatingTerminalPointReturns the floating terminal point for the given edge, start and end state, where start is the source if source is true.
getTerminalPortReturns an mxCellState that represents the source or target terminal or port for the given edge.
getPerimeterPointReturns 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.
getRoutingCenterXReturns the x-coordinate of the center point for automatic routing.
getRoutingCenterYReturns the y-coordinate of the center point for automatic routing.
getPerimeterBoundsReturns the perimeter bounds for the given terminal, edge pair as an mxRectangle.
getPerimeterFunctionReturns the perimeter function for the given state.
getNextPointReturns the nearest point in the list of absolute points or the center of the opposite terminal.
getVisibleTerminalReturns the nearest ancestor terminal that is visible.
updateEdgeBoundsUpdates the given state using the bounding box of t he absolute points.
getPointReturns the absolute point on the edge for the given relative mxGeometry as an mxPoint.
getRelativePointGets the relative point that describes the given, absolute label position for the given edge state.
updateEdgeLabelOffsetUpdates mxCellState.absoluteOffset for the given state.
getStateReturns the mxCellState for the given cell.
isRenderingReturns rendering.
setRenderingSets rendering.
isAllowEvalReturns allowEval.
setAllowEvalSets allowEval.
getStatesReturns states.
setStatesSets states.
getCellStatesReturns the mxCellStates for the given array of mxCells.
removeStateRemoves and returns the mxCellState for the given cell.
createStateCreates and returns an mxCellState for the given cell and initializes it using <mxCellRenderer.initialize>.
getCanvasReturns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.
getBackgroundPaneReturns the DOM node that represents the background layer.
getDrawPaneReturns the DOM node that represents the main drawing layer.
getOverlayPaneReturns the DOM node that represents the layer above the drawing layer.
getDecoratorPaneReturns the DOM node that represents the topmost drawing layer.
isContainerEventReturns true if the event origin is one of the drawing panes or containers of the view.
isScrollEventReturns true if the event origin is one of the scrollbars of the container in IE.
initInitializes the graph event dispatch loop for the specified container and invokes <create> to create the required DOM nodes for the display.
installListenersInstalls the required listeners in the container.
createHtmlCreates the DOM nodes for the HTML display.
updateHtmlCanvasSizeUpdates the size of the HTML canvas.
createHtmlPaneCreates and returns a drawing pane in HTML (DIV).
createVmlCreates the DOM nodes for the VML display.
createVmlPaneCreates a drawing pane in VML (group).
createSvgCreates and returns the DOM nodes for the SVG display.
updateContainerStyleUpdates the style of the container after installing the SVG DOM elements.
destroyDestroys the view and all its resources.
mxCurrentRootChangeAction to change the current root in a view.
Functions
mxCurrentRootChangeConstructs a change of the current root in the given view.
executeChanges the current root of the view.

Events

mxEvent.UNDO

Fires after the root was changed in setCurrentRoot.  The <code>edit</code> property contains the mxUndoableEdit which contains the mxCurrentRootChange.

mxEvent.SCALE_AND_TRANSLATE

Fires after the scale and translate have been changed in scaleAndTranslate.  The <code>scale</code>, <code>previousScale</code>, <code>translate</code> and <code>previousTranslate</code> properties contain the new and previous scale and translate, respectively.

mxEvent.SCALE

Fires after the scale was changed in setScale.  The <code>scale</code> and <code>previousScale</code> properties contain the new and previous scale.

mxEvent.TRANSLATE

Fires after the translate was changed in setTranslate.  The <code>translate</code> and <code>previousTranslate</code> properties contain the new and previous value for translate.

mxEvent.DOWN and mxEvent.UP

Fire if the current root is changed by executing an mxCurrentRootChange.  The event name depends on the location of the root in the cell hierarchy with respect to the current root.  The <code>root</code> and <code>previous</code> properties contain the new and previous root, respectively.

Functions

mxGraphView

function mxGraphView(graph)

Constructs a new view for the given mxGraph.

Parameters

graphReference to the enclosing mxGraph.

Variables

doneResource

mxGraphView.prototype.doneResource

Specifies the resource key for the status message after a long operation.  If the resource for this key does not exist then the value is used as the status message.  Default is ‘done’.

Functions

updatingDocumentResource

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’.

Variables

allowEval

mxGraphView.prototype.allowEval

Specifies if string values in cell styles should be evaluated using mxUtils.eval.  This will only be used if the string values can’t be mapped to objects using mxStyleRegistry.  Default is false.  NOTE: Enabling this switch carries a possible security risk.

captureDocumentGesture

mxGraphView.prototype.captureDocumentGesture

Specifies if a gesture should be captured when it goes outside of the graph container.  Default is true.

optimizeVmlReflows

mxGraphView.prototype.optimizeVmlReflows

Specifies if the <canvas> should be hidden while rendering in IE8 standards mode and quirks mode.  This will significantly improve rendering performance.  Default is true.

rendering

mxGraphView.prototype.rendering

Specifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.  Default is true.

graph

mxGraphView.prototype.graph

Reference to the enclosing mxGraph.

currentRoot

mxGraphView.prototype.currentRoot

mxCell that acts as the root of the displayed cell hierarchy.

graphBounds

mxGraphView.prototype.graphBounds

mxRectangle that caches the scales, translated bounds of the current view.

scale

mxGraphView.prototype.scale

Specifies the scale.  Default is 1 (100%).

translate

mxGraphView.prototype.translate

mxPoint that specifies the current translation.  Default is a new empty mxPoint.

states

mxGraphView.prototype.states

mxDictionary that maps from cell IDs to mxCellStates.

updateStyle

mxGraphView.prototype.updateStyle

Specifies if the style should be updated in each validation step.  If this is false then the style is only updated if the state is created or if the style of the cell was changed.  Default is false.

lastNode

mxGraphView.prototype.lastNode

During validation, this contains the last DOM node that was processed.

lastHtmlNode

mxGraphView.prototype.lastHtmlNode

During validation, this contains the last HTML DOM node that was processed.

lastForegroundNode

mxGraphView.prototype.lastForegroundNode

During validation, this contains the last edge’s DOM node that was processed.

lastForegroundHtmlNode

mxGraphView.prototype.lastForegroundHtmlNode

During validation, this contains the last edge HTML DOM node that was processed.

Functions

getGraphBounds

mxGraphView.prototype.getGraphBounds = function()

Returns graphBounds.

setGraphBounds

mxGraphView.prototype.setGraphBounds = function(value)

Sets graphBounds.

getBounds

mxGraphView.prototype.getBounds = function(cells)

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

Parameters

cellsArray of mxCells whose bounds should be returned.

setCurrentRoot

mxGraphView.prototype.setCurrentRoot = function(root)

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

Parameters

rootmxCell that specifies the root of the displayed cell hierarchy.

scaleAndTranslate

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

scaleDecimal value that specifies the new scale (1 is 100%).
dxX-coordinate of the translation.
dyY-coordinate of the translation.

getScale

mxGraphView.prototype.getScale = function()

Returns the scale.

setScale

mxGraphView.prototype.setScale = function(value)

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

Parameters

valueDecimal value that specifies the new scale (1 is 100%).

getTranslate

mxGraphView.prototype.getTranslate = function()

Returns the translate.

setTranslate

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

dxX-coordinate of the translation.
dyY-coordinate of the translation.

viewStateChanged

mxGraphView.prototype.viewStateChanged = function()

Invoked after scale and/or translate has changed.

refresh

mxGraphView.prototype.refresh = function()

Clears the view if currentRoot is not null and revalidates.

revalidate

mxGraphView.prototype.revalidate = function()

Revalidates the complete view with all cell states.

clear

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

cellOptional mxCell for which the state should be removed.  Default is the root of the model.
forceBoolean indicating if the current root should be ignored for recursion.

invalidate

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

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

Parameters

cellOptional mxCell to be invalidated.  Default is the root of the model.

validate

mxGraphView.prototype.validate = function(cell)

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

Parameters

cellOptional mxCell to be used as the root of the validation.  Default is currentRoot or the root of the model.

getEmptyBounds

mxGraphView.prototype.getEmptyBounds = function()

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

getBoundingBox

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

statemxCellState whose bounding box should be returned.
recurseOptional boolean indicating if the children should be included.  Default is true.

createBackgroundPageShape

mxGraphView.prototype.createBackgroundPageShape = function(bounds)

Creates and returns the shape used as the background page.

Parameters

boundsmxRectangle that represents the bounds of the shape.

validateBackground

mxGraphView.prototype.validateBackground = function()

Calls validateBackgroundImage and validateBackgroundPage.

validateBackgroundImage

mxGraphView.prototype.validateBackgroundImage = function()

Validates the background image.

validateBackgroundPage

mxGraphView.prototype.validateBackgroundPage = function()

Validates the background page.

getBackgroundPageBounds

mxGraphView.prototype.getBackgroundPageBounds = function()

Returns the bounds for the background page.

redrawBackgroundImage

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

backgroundImagemxImageShape that represents the background image.
bgmxImage that specifies the image and its dimensions.

validateCell

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

cellmxCell whose mxCellState should be created.
visibleOptional boolean indicating if the cell should be visible.  Default is true.

validateCellState

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

Validates and repaints the mxCellState for the given mxCell.

Parameters

cellmxCell whose mxCellState should be validated.
recurseOptional boolean indicating if the children of the cell should be validated.  Default is true.

updateCellState

mxGraphView.prototype.updateCellState = function(state)

Updates the given mxCellState.

Parameters

statemxCellState to be updated.

isCellCollapsed

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.

updateVertexState

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

Validates the given cell state.

updateEdgeState

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

Validates the given cell state.

updateVertexLabelOffset

mxGraphView.prototype.updateVertexLabelOffset = function(state)

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

Parameters

statemxCellState whose absolute offset should be updated.

resetValidationState

mxGraphView.prototype.resetValidationState = function()

Resets the current validation state.

stateValidated

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

statemxCellState that represents the cell state.

updateFixedTerminalPoints

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

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

Parameters

edgemxCellState whose initial terminal points should be updated.
sourcemxCellState which represents the source terminal.
targetmxCellState which represents the target terminal.

updateFixedTerminalPoint

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

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

Parameters

edgemxCellState whose terminal point should be updated.
terminalmxCellState which represents the actual terminal.
sourceBoolean that specifies if the terminal is the source.
constraintmxConnectionConstraint that specifies the connection.

getFixedTerminalPoint

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

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

Parameters

edgemxCellState whose terminal point should be returned.
terminalmxCellState which represents the actual terminal.
sourceBoolean that specifies if the terminal is the source.
constraintmxConnectionConstraint that specifies the connection.

updateBoundsFromStencil

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

edgemxCellState whose bounds should be updated.

updatePoints

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

edgemxCellState whose absolute points should be updated.
pointsArray of mxPoints that constitute the relative points.
sourcemxCellState that represents the source terminal.
targetmxCellState that represents the target terminal.

transformControlPoint

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

Transforms the given control point to an absolute point.

isLoopStyleEnabled

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 have connections constraints associated.

getEdgeStyle

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

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

updateFloatingTerminalPoints

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

statemxCellState whose terminal points should be updated.
sourcemxCellState that represents the source terminal.
targetmxCellState that represents the target terminal.

updateFloatingTerminalPoint

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

edgemxCellState whose terminal point should be updated.
startmxCellState for the terminal on “this” side of the edge.
endmxCellState for the terminal on the other side of the edge.
sourceBoolean indicating if start is the source terminal state.

getFloatingTerminalPoint

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

edgemxCellState whose terminal point should be returned.
startmxCellState for the terminal on “this” side of the edge.
endmxCellState for the terminal on the other side of the edge.
sourceBoolean indicating if start is the source terminal state.

getTerminalPort

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

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

Parameters

statemxCellState that represents the state of the edge.
terminalmxCellState that represents the terminal.
sourceBoolean indicating if the given terminal is the source terminal.

getPerimeterPoint

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

terminalmxCellState for the source or target terminal.
nextmxPoint that lies outside of the given terminal.
orthogonalBoolean that specifies if the orthogonal projection onto the perimeter should be returned.  If this is false then the intersection of the perimeter and the line between the next and the center point is returned.
borderOptional border between the perimeter and the shape.

getRoutingCenterX

mxGraphView.prototype.getRoutingCenterX = function (state)

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

getRoutingCenterY

mxGraphView.prototype.getRoutingCenterY = function (state)

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

getPerimeterBounds

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

terminalmxCellState that represents the terminal.
borderNumber that adds a border between the shape and the perimeter.

getPerimeterFunction

mxGraphView.prototype.getPerimeterFunction = function(state)

Returns the perimeter function for the given state.

getNextPoint

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

edgemxCellState that represents the edge.
oppositemxCellState that represents the opposite terminal.
sourceBoolean indicating if the next point for the source or target should be returned.

getVisibleTerminal

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

edgemxCell whose visible terminal should be returned.
sourceBoolean that specifies if the source or target terminal should be returned.

updateEdgeBounds

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

statemxCellState whose bounds should be updated.

getPoint

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

statemxCellState that represents the state of the parent edge.
geometrymxGeometry that represents the relative location.

getRelativePoint

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

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

Parameters

statemxCellState that represents the state of the parent edge.
xSpecifies the x-coordinate of the absolute label location.
ySpecifies the y-coordinate of the absolute label location.

updateEdgeLabelOffset

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

statemxCellState whose absolute offset should be updated.

getState

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

cellmxCell for which the mxCellState should be returned.
createOptional boolean indicating if a new state should be created if it does not yet exist.  Default is false.

isRendering

mxGraphView.prototype.isRendering = function()

Returns rendering.

setRendering

mxGraphView.prototype.setRendering = function(value)

Sets rendering.

isAllowEval

mxGraphView.prototype.isAllowEval = function()

Returns allowEval.

setAllowEval

mxGraphView.prototype.setAllowEval = function(value)

Sets allowEval.

getStates

mxGraphView.prototype.getStates = function()

Returns states.

setStates

mxGraphView.prototype.setStates = function(value)

Sets states.

getCellStates

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.

removeState

mxGraphView.prototype.removeState = function(cell)

Removes and returns the mxCellState for the given cell.

Parameters

cellmxCell for which the mxCellState should be removed.

createState

mxGraphView.prototype.createState = function(cell)

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

Parameters

cellmxCell for which a new mxCellState should be created.

getCanvas

mxGraphView.prototype.getCanvas = function()

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

getBackgroundPane

mxGraphView.prototype.getBackgroundPane = function()

Returns the DOM node that represents the background layer.

getDrawPane

mxGraphView.prototype.getDrawPane = function()

Returns the DOM node that represents the main drawing layer.

getOverlayPane

mxGraphView.prototype.getOverlayPane = function()

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

getDecoratorPane

mxGraphView.prototype.getDecoratorPane = function()

Returns the DOM node that represents the topmost drawing layer.

isContainerEvent

mxGraphView.prototype.isContainerEvent = function(evt)

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

isScrollEvent

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.

init

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.

installListeners

mxGraphView.prototype.installListeners = function()

Installs the required listeners in the container.

createHtml

mxGraphView.prototype.createHtml = function()

Creates the DOM nodes for the HTML display.

updateHtmlCanvasSize

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

Updates the size of the HTML canvas.

createHtmlPane

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

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

createVml

mxGraphView.prototype.createVml = function()

Creates the DOM nodes for the VML display.

createVmlPane

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

Creates a drawing pane in VML (group).

createSvg

mxGraphView.prototype.createSvg = function()

Creates and returns the DOM nodes for the SVG display.

updateContainerStyle

mxGraphView.prototype.updateContainerStyle = function(container)

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

destroy

mxGraphView.prototype.destroy = function()

Destroys the view and all its resources.

mxCurrentRootChange

Action to change the current root in a view.

Summary
Functions
mxCurrentRootChangeConstructs a change of the current root in the given view.
executeChanges the current root of the view.

Functions

mxCurrentRootChange

function mxCurrentRootChange(view,
root)

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

execute

mxCurrentRootChange.prototype.execute = function()

Changes the current root of the view.

Base class for objects that dispatch named events.
mxGraphView.prototype.setCurrentRoot = function(root)
Sets and returns the current root and fires an undo event before calling mxGraph.sizeDidChange.
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.
mxGraphView.prototype.setScale = function(value)
Sets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.
mxGraphView.prototype.setTranslate = function(dx,
dy)
Sets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.
Action to change the current root in a view.
function mxGraphView(graph)
Constructs a new view for the given mxGraph.
Extends mxEventSource to implement a graph component for the browser.
mxGraphView.prototype.doneResource
Specifies the resource key for the status message after a long operation.
mxGraphView.prototype.allowEval
Specifies if string values in cell styles should be evaluated using mxUtils.eval.
eval: function(expr)
Evaluates the given expression using eval and returns the JavaScript object that represents the expression result.
mxGraphView.prototype.captureDocumentGesture
Specifies if a gesture should be captured when it goes outside of the graph container.
mxGraphView.prototype.optimizeVmlReflows
Specifies if the canvas should be hidden while rendering in IE8 standards mode and quirks mode.
mxGraphView.prototype.rendering
Specifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.
Renders cells into a document object model.
mxGraphView.prototype.graph
Reference to the enclosing mxGraph.
mxGraphView.prototype.currentRoot
mxCell that acts as the root of the displayed cell hierarchy.
Cells are the elements of the graph model.
mxGraphView.prototype.graphBounds
mxRectangle that caches the scales, translated bounds of the current view.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxGraphView.prototype.scale
Specifies the scale.
mxGraphView.prototype.translate
mxPoint that specifies the current translation.
Implements a 2-dimensional vector with double precision coordinates.
mxGraphView.prototype.states
mxDictionary that maps from cell IDs to mxCellStates.
A wrapper class for an associative array with object keys.
Represents the current state of a cell in a given mxGraphView.
mxGraphView.prototype.updateStyle
Specifies if the style should be updated in each validation step.
mxGraphView.prototype.lastNode
During validation, this contains the last DOM node that was processed.
mxGraphView.prototype.lastHtmlNode
During validation, this contains the last HTML DOM node that was processed.
mxGraphView.prototype.lastForegroundNode
During validation, this contains the last edge’s DOM node that was processed.
mxGraphView.prototype.lastForegroundHtmlNode
During validation, this contains the last edge HTML DOM node that was processed.
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.
mxGraph.prototype.sizeDidChange = function()
Called when the size of the graph has changed.
mxGraphView.prototype.revalidate = function()
Revalidates the complete view with all cell states.
mxGraphView.prototype.getScale = function()
Returns the scale.
mxGraphView.prototype.getTranslate = function()
Returns the translate.
mxGraphView.prototype.viewStateChanged = function()
Invoked after scale and/or translate has changed.
mxGraphView.prototype.refresh = function()
Clears the view if currentRoot is not null and revalidates.
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.
mxGraphView.prototype.invalidate = function(cell,
recurse,
includeEdges)
Invalidates the state of the given cell, all its descendants and connected edges.
mxGraphView.prototype.validate = function(cell)
Calls validateCell and validateCellState and updates the graphBounds using getBoundingBox.
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.
mxGraphView.prototype.validateCellState = function(cell,
recurse)
Validates and repaints the mxCellState for the given mxCell.
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.
mxGraphView.prototype.getEmptyBounds = function()
Returns the bounds for an empty graph.
mxGraphView.prototype.createBackgroundPageShape = function(bounds)
Creates and returns the shape used as the background page.
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.
mxGraphView.prototype.updateCellState = function(state)
Updates the given mxCellState.
mxGraphView.prototype.isCellCollapsed = function(cell)
Returns true if the children of the given cell should not be visible in the view.
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.
mxGraphView.prototype.resetValidationState = function()
Resets the current validation state.
mxGraphView.prototype.stateValidated = function(state)
Invoked when a state has been processed in validatePoints.
mxGraphView.prototype.updateFixedTerminalPoints = function(edge,
source,
target)
Sets the initial absolute terminal points in the given state before the edge style is computed.
mxGraphView.prototype.updateFixedTerminalPoint = function(edge,
terminal,
source,
constraint)
Sets the fixed source or target terminal point on the given edge.
mxGraphView.prototype.getFixedTerminalPoint = function(edge,
terminal,
source,
constraint)
Returns the fixed source or target terminal point for the given edge.
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.
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.
mxGraphView.prototype.transformControlPoint = function(state,
pt,
ignoreScale)
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.
mxGraph.prototype.defaultLoopStyle
mxEdgeStyle to be used for loops.
STYLE_LOOP: 'loopStyle'
Defines the key for the loop style.
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.
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.
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.
mxGraphView.prototype.getTerminalPort = function(state,
terminal,
source)
Returns an mxCellState that represents the source or target terminal or port for the given edge.
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.
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.
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.
mxGraphView.prototype.getVisibleTerminal = function(edge,
source)
Returns the nearest ancestor terminal that is visible.
mxGraphView.prototype.updateEdgeBounds = function(state)
Updates the given state using the bounding box of t he absolute points.
mxGraphView.prototype.getPoint = function(state,
geometry)
Returns the absolute point on the edge for the given relative mxGeometry as an mxPoint.
Extends mxRectangle to represent the geometry of a cell.
mxGraphView.prototype.getRelativePoint = function(edgeState,
x,
y)
Gets the relative point that describes the given, absolute label position for the given edge state.
mxGraphView.prototype.updateEdgeLabelOffset = function(state)
Updates mxCellState.absoluteOffset for the given state.
mxCellState.prototype.absoluteOffset
mxPoint that holds the absolute offset.
mxGraphView.prototype.getState = function(cell,
create)
Returns the mxCellState for the given cell.
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.
mxGraphView.prototype.removeState = function(cell)
Removes and returns the mxCellState for the given cell.
mxGraphView.prototype.createState = function(cell)
Creates and returns an mxCellState for the given cell and initializes it using mxCellRenderer.initialize.
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.
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.
Implements a composite undoable edit.
Singleton class that acts as a global converter from string to object values in a style.
Extends mxShape to implement an image shape.
Encapsulates the URL, width and height of an image.
mxGraph.prototype.isCellVisible = function(cell)
Returns true if the given cell is visible in this graph.
Defines an object that contains the constraints about how to connect one side of an edge to its terminal.
mxCellState.prototype.getVisibleTerminalState = function(source)
Returns the visible source or target terminal state.
mxCellState.prototype.terminalDistance
Caches the distance between the end points for an edge.
mxCellState.prototype.length
Caches the length of an edge.
mxCellState.prototype.segments
Array of numbers that represent the cached length of each segment of the edge.
Close