Options
All
  • Public
  • Public/Protected
  • All
Menu

Class mxGraphView

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

EMPTY_POINT

EMPTY_POINT: mxPoint

allowEval

allowEval: boolean

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.

canvas

canvas: SVGSVGElement

captureDocumentGesture

captureDocumentGesture: boolean

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

currentRoot

currentRoot: mxCell

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

doneResource

doneResource: "" | "done"

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

eventListeners

eventListeners: any[]

Variable: eventListeners

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

eventSource

eventSource: any

Variable: eventSource

Optional source for events. Default is null.

eventsEnabled

eventsEnabled: boolean

Variable: eventsEnabled

Specifies if events can be fired. Default is true.

graph

graph: mxGraph

Reference to the enclosing mxGraph.

graphBounds

graphBounds: mxRectangle

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

lastForegroundHtmlNode

lastForegroundHtmlNode: HTMLElement

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

lastForegroundNode

lastForegroundNode: Element

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

lastHtmlNode

lastHtmlNode: HTMLElement

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

lastNode

lastNode: Element

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

optimizeVmlReflows

optimizeVmlReflows: boolean

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

rendering: boolean

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

scale

scale: number

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

states

states: mxDictionary<mxCellState>

mxDictionary that maps from cell IDs to {@link mxCellStates}.

translate

translate: mxPoint

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

updateStyle

updateStyle: boolean

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.

updatingDocumentResource

updatingDocumentResource: "" | "updatingDocument"

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

Methods

addListener

  • addListener(name: string, funct: (...args: any[]) => any): void

  • Function: addListener

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

    The parameters of the listener are the sender and an .

    Parameters

    • name: string
    • funct: (...args: any[]) => any
        • (...args: any[]): any

        • Parameters

          • Rest ...args: any[]

          Returns any

    Returns void

clear

  • clear(cell?: mxCell, force?: boolean, recurse?: boolean): void

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

    Parameters

    • Optional cell: mxCell

      Optional mxCell for which the state should be removed. Default is the root of the model.

    • Optional force: boolean

      Boolean indicating if the current root should be ignored for recursion.

    • Optional recurse: boolean

    Returns void

createBackgroundPageShape

createHtml

  • createHtml(): void

createHtmlPane

  • createHtmlPane(width: number, height: number): Element

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

    Parameters

    • width: number
    • height: number

    Returns Element

createState

createSvg

  • createSvg(): Element

createVml

  • createVml(): Element

createVmlPane

  • createVmlPane(width: number, height: number): Element

  • Creates a drawing pane in VML (group).

    Parameters

    • width: number
    • height: number

    Returns Element

destroy

  • destroy(): void

fireEvent

  • Function: fireEvent

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

    Example:

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

    Parameters:

    evt - that represents the event. sender - Optional sender to be passed to the listener. Default value is the return value of .

    Parameters

    Returns void

getBackgroundPageBounds

getBackgroundPane

  • getBackgroundPane(): Element

getBoundingBox

  • Returns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.

    Parameters

    • state: mxCellState

      mxCellState whose bounding box should be returned.

    • recurse: boolean

      Optional boolean indicating if the children should be included. Default is true.

    Returns mxRectangle

getBounds

getCanvas

  • getCanvas(): SVGElement

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

    Returns SVGElement

getCellStates

  • Returns the {@link mxCellStates} for the given array of mxCell. 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.

    Parameters

    Returns mxCellState[]

getDecoratorPane

  • getDecoratorPane(): Element

getDrawPane

  • getDrawPane(): Element

getEdgeStyle

getEmptyBounds

getEventSource

  • getEventSource(): any

getFixedTerminalPoint

getFloatingTerminalPoint

getGraphBounds

getNextPoint

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

    Parameters

    • edge: mxCellState

      mxCellState that represents the edge.

    • opposite: mxCellState

      mxCellState that represents the opposite terminal.

    • source: boolean

      Boolean indicating if the next point for the source or target should be returned.

    Returns mxPoint

getOverlayPane

  • getOverlayPane(): Element

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

    Returns Element

getPerimeterBounds

  • 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:

    example
    var oldGetPerimeterBounds = getPerimeterBounds;
getPerimeterBounds(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

    • terminal: mxCellState

      mxCellState that represents the terminal.

    • Optional border: number

      Number that adds a border between the shape and the perimeter.

    Returns mxRectangle

getPerimeterFunction

getPerimeterPoint

  • 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

    • terminal: mxCellState

      mxCellState for the source or target terminal.

    • next: mxPoint

      mxPoint that lies outside of the given terminal.

    • orthogonal: boolean

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

    • border: number

      Optional border between the perimeter and the shape.

    Returns mxPoint

getPoint

getRelativePoint

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

    Parameters

    • edgeState: mxCellState
    • x: number

      Specifies the x-coordinate of the absolute label location.

    • y: number

      Specifies the y-coordinate of the absolute label location.

    Returns mxPoint

getRoutingCenterX

getRoutingCenterY

getScale

  • getScale(): number

getState

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

    Parameters

    • cell: mxCell

      mxCell for which the mxCellState should be returned.

    • Optional create: boolean

      Optional boolean indicating if a new state should be created if it does not yet exist. Default is false.

    Returns mxCellState

getStates

getTerminalPort

getTranslate

getVisibleTerminal

  • 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

    • edge: mxCell

      mxCell whose visible terminal should be returned.

    • source: boolean

      Boolean that specifies if the source or target terminal should be returned.

    Returns mxCell

init

  • init(): void

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

    Returns void

installListeners

  • installListeners(): void

invalidate

  • invalidate(cell: mxCell, recurse: boolean, includeEdges: boolean): void

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

    Parameters

    • cell: mxCell

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

    • recurse: boolean
    • includeEdges: boolean

    Returns void

isAllowEval

  • isAllowEval(): boolean

isCellCollapsed

  • isCellCollapsed(cell: mxCell): boolean

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

    Parameters

    Returns boolean

isContainerEvent

  • isContainerEvent(evt: Event): boolean

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

    Parameters

    • evt: Event

    Returns boolean

isEventsEnabled

  • isEventsEnabled(): boolean

isLoopStyleEnabled

isRendering

  • isRendering(): boolean

isScrollEvent

  • isScrollEvent(evt: Event): boolean

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

    Parameters

    • evt: Event

    Returns boolean

redrawBackgroundImage

  • Updates the bounds and redraws the background image.

    Example:

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

    example
    redrawBackground(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

    Returns void

refresh

  • refresh(): void

removeListener

  • removeListener(funct: (...args: any[]) => any): void

  • Function: removeListener

    Removes all occurrences of the given listener from .

    Parameters

    • funct: (...args: any[]) => any
        • (...args: any[]): any

        • Parameters

          • Rest ...args: any[]

          Returns any

    Returns void

removeState

resetValidationState

  • resetValidationState(): void

revalidate

  • revalidate(): void

scaleAndTranslate

  • scaleAndTranslate(scale: number, dx: number, dy: number): void

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

    Parameters

    • scale: number

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

    • dx: number

      X-coordinate of the translation.

    • dy: number

      Y-coordinate of the translation.

    Returns void

setAllowEval

  • setAllowEval(value: boolean): void

setCurrentRoot

setEventSource

  • setEventSource(value: any): void

setEventsEnabled

  • setEventsEnabled(value: boolean): void

setGraphBounds

setRendering

  • setRendering(value: boolean): void

setScale

  • setScale(value: number): void

setStates

setTranslate

  • setTranslate(dx: number, dy: number): void

stateValidated

  • Invoked when a state has been processed in {@link validatePoints}. This is used to update the order of the DOM nodes of the shape.

    Parameters

    Returns void

transformControlPoint

updateBoundsFromStencil

  • 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

    Returns mxRectangle

updateCellState

updateContainerStyle

  • updateContainerStyle(container: Element): void

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

    Parameters

    • container: Element

    Returns void

updateEdgeBounds

updateEdgeLabelOffset

  • 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

    Returns void

updateEdgeState

updateFixedTerminalPoint

updateFixedTerminalPoints

updateFloatingTerminalPoint

  • 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

    Returns void

updateFloatingTerminalPoints

updateHtmlCanvasSize

  • updateHtmlCanvasSize(width: number, height: number): void

  • Updates the size of the HTML canvas.

    Parameters

    • width: number
    • height: number

    Returns void

updatePoints

updateVertexLabelOffset

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

    Parameters

    Returns void

updateVertexState

validate

  • validate(cell?: mxCell): void

validateBackground

  • validateBackground(): void

validateBackgroundImage

  • validateBackgroundImage(): void

validateBackgroundPage

  • validateBackgroundPage(): void

validateCell

  • validateCell(cell: mxCell, visible?: boolean): void

  • 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

    • cell: mxCell

      mxCell whose mxCellState should be created.

    • Optional visible: boolean

      Optional boolean indicating if the cell should be visible. Default is true.

    Returns void

validateCellState

  • validateCellState(cell: mxCell, recurse?: boolean): void

viewStateChanged

  • viewStateChanged(): void

Generated using TypeDoc