convergencelabs/mxgraph-adapter

An adapter between mxGraph and Convergence

Convergence mxGraph Adapter

The Convergence mxGraph Adapter makes it easy to provide a collaborative diagram editing experience using mxGraph and Convergence. 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.

This project also forms the basis of the mxGraph Graph Editor 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.

<div id="mxgraph" style="height: 400px; width: 600px"></div>

The following JavaScript code will initialze a collaborative graph.

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);
  });

mxgraph-adapter's Issues

Existing graph model

I am working on integrating convergence into a diagramming tool that I am building. Currently, I'm storing the data in the database for the graph as a base64 encoded string and on the FE, I am decoding / parsing so that I can use
editor.setGraphXml method from the EditorUI component. This works without convergence, but when I attempt it after connecting to convergence, I run into issues with the background colors and the different mxgraph events such as changing the styles.

I looked at the example here and saw that the DEFAULT_GRAPH was used instead of Serializing a new GraphModel. However, when I attempted to change my graph model data to reflect this structure, I ran into errors. Is there a good way to set this data so that I can use the existing templates I've built without causing errors?