Class Graph

Represents a new Graph.

Hierarchy

  • unknown
    • Graph

Constructors

constructor

Accessors

data

Methods

createEdge createNode deleteEdge deleteNode deselectItem destroy getGraphPosition getGraphScale getWindowToGraphPosition on selectEdge selectNode setGraphPosition setGraphScale setNodeAttributeErrorState updateNodeAttribute updateNodePosition updateNodeType

Constructors

constructor

  • new Graph(schema, options?): Graph

  • Creates a new Graph.

    Parameters

    • schema: object

      The graph schema.

    • Optional options: {
          adjustVertices: object;
          contextMenuItems: object[];
          defaultStyles: object;
          dom: HTMLElement;
          edgeHoverEffect: boolean;
          incrementNodeNames: boolean;
          initialData: object;
          passiveUIEvents: boolean;
          readOnly: boolean;
          restrictTranslate: boolean;
      } = {}

      The graph configuration. Optional.

      • adjustVertices: object

        If true, multiple edges connected between two nodes will be spaced apart.

      • contextMenuItems: object[]

        The context menu items to add to the graph.

      • defaultStyles: object

        Used to override the graph's default styling. Check ./constants.js for a full list of style properties.

      • dom: HTMLElement

        If supplied, the graph will be attached to this element.

      • edgeHoverEffect: boolean

        Whether the graph should show an edge highlight effect when the mouse is hovering over edges. Optional. Defaults to true.

      • incrementNodeNames: boolean

        Whether the graph should increment the node name when a node with the same name already exists. Optional. Defaults to false.

      • initialData: object

        The graph data to initialize the graph with.

      • passiveUIEvents: boolean

        If true, the graph will not update its data and view upon user interaction. Instead, these interactions can be handled explicitly by listening to fired events. Optional. Defaults to false.

      • readOnly: boolean

        Whether the graph is read only. Optional. Defaults to false.

      • restrictTranslate: boolean

        Whether the graph should restrict the translate graph operation to the graph area. Optional. Defaults to false.

    Returns Graph

Accessors

data

  • get data(): object

  • The current graph data. Contains an object with any nodes and edges present in the graph. This can be passed into the graph constructor to reload the current graph.

    Returns object

Methods

createEdge

  • createEdge(edge, edgeId): void

  • Add an edge to the graph.

    Parameters

    • edge: object

      The edge to add.

    • edgeId: number

      The edge id for the new edge.

    Returns void

createNode

  • createNode(node): void

  • Add a node to the graph.

    Parameters

    • node: object

      The node to add.

    Returns void

deleteEdge

  • deleteEdge(edgeId): void

  • Delete an edge from the graph.

    Parameters

    • edgeId: string

      The edge to delete.

    Returns void

deleteNode

  • deleteNode(nodeId): void

  • Delete a node from the graph.

    Parameters

    • nodeId: number

      The node to delete.

    Returns void

deselectItem

  • deselectItem(): void

  • Deselect the currently selected item in the graph.

    Returns void

destroy

  • destroy(): void

  • Destroy the graph. Clears the graph from the DOM and removes all event listeners associated with the graph.

    Returns void

getGraphPosition

  • getGraphPosition(): object

  • Get the current center position of the viewport in the graph.

    Returns object

    The current center position of the viewport in the graph as an object containing x and y.

getGraphScale

  • getGraphScale(): number

  • Get the current scale of the graph.

    Returns number

    The current scale of the graph.

getWindowToGraphPosition

  • getWindowToGraphPosition(pos): object

  • Convert a position in window space to a position in graph space.

    Parameters

    • pos: object

      A position in the window, as an object containing x and y.

    Returns object

    The position in the graph based on the given window position, as an object containing x and y.

on

  • on(eventName, callback): void

  • Add an event listener to the graph.

    Parameters

    • eventName: string

      The name of the event to listen for.

    • callback: Function

      The callback to call when the event is triggered.

    Returns void

selectEdge

  • selectEdge(edge, edgeId): void

  • Select an edge in the current graph.

    Parameters

    • edge: object

      The edge to select

    • edgeId: number

      The edge id of the edge to select

    Returns void

selectNode

  • selectNode(node): void

  • Select a node in the current graph.

    Parameters

    • node: object

      The node to select

    Returns void

setGraphPosition

  • setGraphPosition(posX, posY): void

  • Set the center of the viewport to the given position.

    Parameters

    • posX: number

      The x position to set the center of the viewport to.

    • posY: number

      The y position to set the center of the viewport to.

    Returns void

setGraphScale

  • setGraphScale(scale): void

  • Set the scale of the graph.

    Parameters

    • scale: number

      The new scale of the graph.

    Returns void

setNodeAttributeErrorState

  • setNodeAttributeErrorState(nodeId, attributeName, value): void

  • Set the error state of a node attribute.

    Parameters

    • nodeId: number

      The node to update.

    • attributeName: string

      The name of the attribute to update.

    • value: boolean

      Whether the attribute should be set in the error state.

    Returns void

updateNodeAttribute

  • updateNodeAttribute(nodeId, attributeName, value): void

  • Update the value of an attribute of a node.

    Parameters

    • nodeId: number

      The node to update.

    • attributeName: string

      The name of the attribute to update.

    • value: object

      The new value for the attribute.

    Returns void

updateNodePosition

  • updateNodePosition(nodeId, pos): void

  • Update the position of a node.

    Parameters

    • nodeId: number

      The node to add.

    • pos: object

      The new position, given as an object containing x and y properties.

    Returns void

updateNodeType

  • updateNodeType(nodeId, nodeType): void

  • Update the type of a node.

    Parameters

    • nodeId: number

      The node to update.

    • nodeType: string

      The new type for the node.

    Returns void

Settings

Member Visibility

Theme

On This Page

constructordatacreateEdgecreateNodedeleteEdgedeleteNodedeselectItemdestroygetGraphPositiongetGraphScalegetWindowToGraphPositiononselectEdgeselectNodesetGraphPositionsetGraphScalesetNodeAttributeErrorStateupdateNodeAttributeupdateNodePositionupdateNodeType