https://github.com/convergencelabs/mxgraph-adapter

An adapter between mxGraph and Convergence
https://github.com/convergencelabs/mxgraph-adapter

convergence mxgraph realtime

Last synced: 5 months ago
JSON representation

An adapter between mxGraph and Convergence

• Host: GitHub
• URL: https://github.com/convergencelabs/mxgraph-adapter
• Owner: convergencelabs
• License: mit
• Created: 2019-03-25T02:08:04.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T03:27:54.000Z (over 3 years ago)
• Last Synced: 2025-11-05T16:10:52.476Z (8 months ago)
• Topics: convergence, mxgraph, realtime
• Language: TypeScript
• Homepage: https://convergence.io
• Size: 666 KB
• Stars: 6
• Watchers: 3
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          


# Convergence mxGraph Adapter

[![example workflow](https://github.com/convergencelabs/mxgraph-adapter/actions/workflows/build.yml/badge.svg)](https://github.com/convergencelabs/mxgraph-adapter/actions/workflows/build.yml)

The **Convergence mxGraph Adapter** makes it easy to provide a collaborative diagram editing experience using [mxGraph](https://github.com/jgraph/mxgraph) and [Convergence](https://convergence.io). This adapter provides shared editing of graph data along with shared pointers and selection.

A live example, as part of the Convergence Examples, can be found [here](https://examples.convergence.io/examples/mxgraph/).

This project also forms the basis of the [mxGraph Graph Editor Demo](https://github.com/convergencelabs/mxgraph-demo).

## Installation

Install package with NPM and add it to your development dependencies:

```npm install --save-dev @convergence/mxgraph-adapter```

## Building

* `npm install`

* `npm run dist`

## Run the Example

* `npm install`

* `npm run dist`

* Update the configuration as described in `examples/config.example.js`.

* `npm start`

* Browse to `http://localost:4100`

## Usage

The following HTML creates a container element for mxGraph. The full code can be seen in the [Example](./example).

```html



```


The following JavaScript code will initialze a collaborative graph.

```JavaScript

const {

  ActivityColorManager,

  MxGraphAdapter,

  PointerManager,

  SelectionManager,

  Deserializer

} = ConvergenceMxGraphAdapter;

Convergence

  .connectAnonymously(CONVERGENCE_URL, "test user")

  .then(domain => {

    const model = domain

      .models()

      .openAutoCreate({

        id: "mxgrph-example",

        collection: "mxgraph",

        ephemeral: true,

        data: () => {

          return DEFAULT_GRAPH;

        }

      });

    const activity = domain

      .activities()

      .join("mxgraph-example");

    return Promise.all([model, activity]);

  })

  .then(([model, activity]) => {

    const container = document.getElementById("mxgraph");

    const graphModel = Deserializer.deserializeMxGraphModel(model.root().value());

    const graph = new mxGraph(container, graphModel);

    setTimeout(() => {

      const colorManger = new ActivityColorManager(activity);

      const graphAdapter = new MxGraphAdapter(graph, model.root());

      const pointerManager = new PointerManager(graph, activity, colorManger);

      const selectionManager = new SelectionManager(graph, activity, colorManger, graphAdapter);

    }, 0);

  });

```