pivotick - v0.0.1
    Preparing search index...

    Interface GraphRendererOptions

    interface GraphRendererOptions {
        beforeRender: (graph: Pivotick) => void;
        defaultEdgeStyle: EdgeStyle;
        defaultLabelStyle: LabelStyle;
        defaultNodeStyle: NodeStyle;
        dragEnabled: boolean;
        enableFocusMode: boolean;
        enableNodeExpansion: boolean;
        interactionEnabled: boolean;
        markerStyleMap?: MarkerStyleMap;
        maxZoom: number;
        minZoom: number;
        nodeStyleMap?: Record<string, NodeStyle>;
        nodeTypeAccessor?: (node: Node) => string | undefined;
        renderCluster?: (cluster: Node) => string | void | HTMLElement;
        renderLabel?: (edge: Edge) => string | void | HTMLElement;
        renderNode?: (node: Node) => string | void | HTMLElement;
        selectionBox: SelectionBox;
        type: RendererType;
        zoomAnimation: boolean;
        zoomAnimationDuration: number;
        zoomEnabled: boolean;
    }
    Index

    Properties

    beforeRender defaultEdgeStyle defaultLabelStyle defaultNodeStyle dragEnabled enableFocusMode enableNodeExpansion interactionEnabled markerStyleMap? maxZoom minZoom nodeStyleMap? nodeTypeAccessor? renderCluster? renderLabel? renderNode? selectionBox type zoomAnimation zoomAnimationDuration zoomEnabled

    Properties

    beforeRender: (graph: Pivotick) => void

    Callback executed during the init phase, before the first rendering

    Type Declaration

    defaultEdgeStyle: EdgeStyle

    The default edge style to be applied on all nodes

    defaultEdgeStyleValue

    defaultLabelStyle: LabelStyle

    The default edge's label style to be applied on all nodes

    defaultLabelStyleValue

    defaultNodeStyle: NodeStyle

    The default node style to be applied on all nodes

    defaultNodeStyleValue

    dragEnabled: boolean
    true
    enableFocusMode: boolean

    Controls whether non-connected nodes and edges are grayed out when a node is selected

    true
    enableNodeExpansion: boolean

    Controls whether nodes can be expanded or collapsed to show their children

    true
    interactionEnabled: boolean
    true
    markerStyleMap?: MarkerStyleMap

    Defines custom styles for marker shapes used in the graph.

    Each key is a marker type (e.g., 'diamond', 'arrow') and maps to a MarkerStyle object.

    defaultMarkerStyleMap

    markerStyleMap: {
      'diamond': {
        fill: '#44c77f',
      },
    }
    maxZoom: number
    10
    minZoom: number
    0.05
    nodeStyleMap?: Record<string, NodeStyle>

    Maps node types to their styles.

    Each key is a node type (as returned by nodeTypeAccessor) and maps to a NodeStyle object.

    Used in conjuction with nodeTypeAccessor

    nodeStyleMap: {
      'hub': { shape: 'hexagon', color: '#aaa', size: 30 },
      'spoke': { shape: 'triangle', color: '#f00' },
    }
    nodeTypeAccessor?: (node: Node) => string | undefined

    Function to access the type of a node. Used in

    Used to style nodes based on their type.

    Used in conjuction with nodeStyleMap

    nodeTypeAccessor: (node) => node.getData()?.type
    renderCluster?: (cluster: Node) => string | void | HTMLElement

    Custom renderer for clusters.

    Allows full control over how a cluster is displayed The function can return either:

    • An HTMLElement to be used as the cluster, or
    • A string to render inside the cluster
    renderCluster: (cluster: Node): HTMLElement | string | void => {
      const size = 12;
      const style = [
        'display:block',
        `width:${size}px`,
        `height:${size}px`,
        'background-color:#907acc',
        'border: 2px solid #fff',
        'border-radius:50%',
        'opacity: 1',
      ].join(';');

      return `<span style="${style}"></span>`;
    }
    renderLabel?: (edge: Edge) => string | void | HTMLElement

    Custom renderer for edge labels.

    Allows full control over how edge labels are displayed. The function can return either:

    • An HTMLElement to be used as the edge's label, or
    • A string to render inside the label
    renderLabel: (edge: Edge): HTMLElement | string | void => {
      const style = [
        'display:inline-block',
        'background-color:#907acc',
        'border: 2px solid #fff',
        'border-radius:50%',
        'opacity: 1',
      ].join(';');

      const text = edge.getData().label;
      return `<span style="${style}">${text}</span>`;
    }
    renderNode?: (node: Node) => string | void | HTMLElement

    Custom renderer for nodes.

    Allows full control over how a node is displayed The function can return either:

    • An HTMLElement to be used as the node, or
    • A string to render inside the node
    renderNode: (node: Node): HTMLElement | string | void => {
      const size = 12;
      const style = [
        'display:block',
        `width:${size}px`,
        `height:${size}px`,
        'background-color:#907acc',
        'border: 2px solid #fff',
        'border-radius:50%',
        'opacity: 1',
      ].join(';');

      return `<span style="${style}"></span>`;
    }
    selectionBox: SelectionBox
    type: RendererType

    Defines the rendering method used by the graph.

    zoomAnimation: boolean
    true
    zoomAnimationDuration: number
    300
    zoomEnabled: boolean
    true

    Settings

    Member Visibility

    On This Page

    Properties