Moxa Graph Library

👉 Documentation

• Install
• Basic Usage
• Graph Control
• Event Handling

Install

Use npm

npm i @moxa/graph

Use pnpm

pnpm add @moxa/graph

Basic Usage

Graph will be generated on the dom element with the specified id

Create a DOM

<div id="container"></div>

Initialize Graph

You need to provide a json config object to initialize graph instance The config include all graph settings, please refer to MxGraphConfig

import { MxGraph } from '@moxa/graph';

const graph = new MxGraph({
  renderer: 'svg',
  container: 'container',
  width: 500,
  height: 500,
  data: {
    nodes: [
      {
        id: 'node1',
        config: {
          type: 'circle-node',
          point: { x: 100, y: 50 },
        },
      },
      {
        id: 'node2',
        config: {
          type: 'circle-node',
          point: { x: 100, y: 250 },
        },
      },
      {
        id: 'node3',
        config: {
          type: 'circle-node',
          point: { x: 300, y: 50 },
        },
      },
      {
        id: 'node4',
        config: {
          type: 'circle-node',
          point: { x: 300, y: 250 },
        },
      },
      {
        id: 'node5',
        config: {
          type: 'circle-node',
          point: { x: 200, y: 150 },
        },
      },
    ],
    edges: [
      {
        id: 'edge1',
        source: 'node1',
        target: 'node2',
      },
      {
        id: 'edge2',
        source: 'node1',
        target: 'node5',
      },
      {
        id: 'edge3',
        source: 'node5',
        target: 'node3',
      },
      {
        id: 'edge4',
        source: 'node3',
        target: 'node4',
      },
    ],
  },
});

Graph Control

You can control the presentation and behavior of the graph by calling the MxGraph methods

// Update Graph Data
graph.updateNode({ ... });
graph.updateEdge({ ... });
graph.updateGroup({ ... });

// View Control
graph.zoom();
graph.fitView();
graph.focusItem();

// Change Behaviors
graph.changeBehavior([ ... ], true);

// Change layouts
graph.changeLayout();

// Change Theme
graph.changeTheme();

// Plugin Management
graph.addPlugin({ ... });
graph.updatePlugin({ ... });
graph.removePlugin({ ... });

Event Handling

// Listen Events
graph.events.nodeClick.once((e) => { ... });
graph.events.beginCreateEdge.on((e) => { ... });
graph.events.groupExpanded.off((e) => { ... });