Skip to content
An adapter between mxGraph and Convergence
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
example
src
webpack
.babelrc
.gitignore
.travis.yml
CHANGELOG.md
LICENSE.txt
README.md
bs-config.json
copyright-header.txt
gulpfile.babel.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

Convergence mxGraph Adapter

Build Status

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 build

Run the Example

  • npm install
  • npm run build
  • 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)
  });
You can’t perform that action at this time.