GraphEditor

A React component to create a Graph Editor easily, you can just pass data and render methods.

Examples#

function MyGraphEditor() {
  const [data, setData] = React.useState({
    nodes: [
      { id: "1", position: { x: 10, y: 10 } },
      { id: "2", position: { x: 300, y: 100 } },
    ],
    edges: [{ id: "edge:1", source: "1", target: "2" }],
  });
  return (
    <Graph
      style={{ width: "100%", height: 250 }}
      nodes={data.nodes}
      edges={data.edges}
    />
  );
}

Reference#

Props#

Name	Type	Description
`actionBar?`	`ActionBarConfig`	Config for ActionBar
`children?`	`ReactNode`	-
`config?`	`GraphEditorConfig`	GraphEditor config data for all operations.
`dataBar?`	`DataBarProps`	Config for DataBar
`drawLine?`	`DrawLine`	The function to draw line for edge connection vectors
`edges`	`EdgeData`[]	Edge data list to render
`eventHistory?`	`EventHistory`	Event history will be displayed on SettingsBar
`events?`	`RecordedEvent`[]	Recorded events will be displayed on SettingsBar
`extraData?`	`any`	To rerender the graph when the extra data changes
`graphConfig?`	`GraphConfig`	All graph config data for nodes and edges. It will supply the config data for the graph.
`isFocusMode?`	`boolean`	Focus mode for chunk stacked nodes
`isLoading?`	`boolean`	Display loading indicator
`label?`	`GraphLabelData`	Config for labels of nodes and edges
`modals?`	`Object`	Modal components for displaying modal dialogs
`modals.ElementSettings?`	`ModalComponentProps`	-
`mode?`	`EditorMode`	Editor mode for changing actions and mouse icon
`networkStatistics?`	`NetworkStatistics`	Calculated network statistics will be displayed on SettingsBar
`nodes`	`NodeData`[]	Node data list to render
`onBoxSelection?`	`OnBoxSelection`	Event handler for box selection event. It gives the selected nodes
`onEvent?`	`OnEvent`	Event handler for all events that are emitted by the graph editor.
`playlists?`	`Playlist`[]	Events playlist will be displayed on SettingsBar
`preferencesModal?`	`PreferencesModalProps`	Config for PreferencesModal
`previousDataList?`	`PreviousData`[]	Focus mode stack
`renderClusterNode?`	`RenderClusterNode`	It returns a PIXI.DisplayObject instance as React.Node for the cluster node
`renderEdge?`	`GraphEditorRenderEdge`<`RenderElementAdditionalInfo`>	It returns a PIXI.DisplayObject instance as React.Node for the edge
`renderNode?`	`GraphEditorRenderNode`<`RenderElementAdditionalInfo`>	It returns a PIXI.DisplayObject instance as React.Node for the node
`selectedElementIds?`	`string`[]	It gives the selected nodes. It is used for selected node highlighting and DataBar
`settingsBar?`	`SettingsBarProps`	Config for SettingsBar
`style?`	`ViewProps`[`"style"`]	Style for graph container view
`renderMoreAction?`	() => [`ReactElement`]<`any`, `string` \| `JSXElementConstructor`<`any`>>	-