PCUI Graph API Reference - v5.2.4
    Preparing search index...

    Class Graph

    Represents a new Graph.

    Hierarchy

    Index

    Constructors

    • Creates a new Graph.

      Parameters

      • schema: any

        The graph schema.

      • options: GraphOptions = {}

        The graph configuration. Optional.

        • initialData

          The graph data to initialize the graph with.

        • dom

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

        • contextMenuItems

          The context menu items to add to the graph.

        • readOnly

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

        • passiveUIEvents

          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.

        • incrementNodeNames

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

        • restrictTranslate

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

        • edgeHoverEffect

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

        • defaultStyles

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

        • adjustVertices

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

      Returns Graph

    Accessors

    • get data(): any

      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 any

    • get selectedItem(): {
          edgeId: string
          | number;
          id: string | number;
          type: string;
      }

      The currently selected item in the graph, or null if nothing is selected.

      Returns { edgeId: string | number; id: string | number; type: string }

    Methods

    • Add an edge to the graph.

      Parameters

      • edge: any

        The edge to add.

      • edgeId: string | number

        The edge id for the new edge.

      • Optional_batching: boolean

        Internal flag, unused.

      Returns void

    • Add a node to the graph.

      Parameters

      • node: any

        The node to add.

      • Optional_nodeSchema: any

        Internal, unused.

      • Optional_batching: boolean

        Internal, unused.

      Returns void

    • Delete an edge from the graph.

      Parameters

      • edgeId: string

        The edge to delete.

      Returns void

    • Delete a node from the graph.

      Parameters

      • nodeId: string | number

        The node to delete.

      Returns void

    • Deselect the currently selected item in the graph.

      Returns void

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

      Returns void

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

      Returns { x: number; y: number }

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

    • Get the current scale of the graph.

      Returns number

      The current scale of the graph.

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

      Parameters

      • pos: { x: number; y: number }

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

        • x: number

          The x position.

        • y: number

          The y position.

      Returns { x: number; y: number }

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

    • Add an event listener to the graph.

      Parameters

      • eventName: string

        The name of the event to listen for.

      • callback: (detail: any) => void

        The callback to call when the event is triggered.

      Returns void

    • Select an edge in the current graph.

      Parameters

      • edge: any

        The edge to select

      • edgeId: string | number

        The edge id of the edge to select

      Returns void

    • Select a node in the current graph.

      Parameters

      • node: any

        The node to select

      Returns 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

    • Set the scale of the graph.

      Parameters

      • scale: number

        The new scale of the graph.

      Returns void

    • Set the error state of a node attribute.

      Parameters

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

    • Update the value of an attribute of a node.

      Parameters

      • nodeId: string | number

        The node to update.

      • attributeName: string

        The name of the attribute to update.

      • value: any

        The new value for the attribute.

      Returns void

    • Update the position of a node.

      Parameters

      • nodeId: string | number

        The node to add.

      • pos: { x: number; y: number }

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

        • x: number

          The x position.

        • y: number

          The y position.

      Returns void

    • Update the type of a node.

      Parameters

      • nodeId: string | number

        The node to update.

      • nodeType: string | number

        The new type for the node.

      Returns void