Null Pointer Micromanagement

    @convergence/mxgraph-adapter
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    Convergence mxGraph Adapter

    example workflow

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

    Install

    npm i @convergence/mxgraph-adapter

    DownloadsWeekly Downloads

    21

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    435 kB

    Total Files

    58

    Last publish

    Collaborators

    • convergence