mxgraphjgraphdraw.io

Import Shapes of Custom Library from Draw.io in mxGraph

I'm currently working with the mxGraph library in javascript and I'm trying to create my own shapes in draw.io, to export them, then to reuse them as much as I want in my own program using the mxGraph library.

So far, I have tried to create a custom library, which contains all my shapes. I have exported it in XML which gives me a half-encoded XML file. Then, I'd like to import that mxLibrary in my own app so I can reuse these shapes for creating my own diagrams. I have no idea how to deal with that XML file.

I have also tried taking the XML from Extras -> Edit Diagram and reimport it with the codec, then with mxGraph#addCells but the shapes aren't grouped anymore, and I can't seem to find how to clone them.

My goal would literally to have my list of shapes/cells somewhere, which I can reuse whenever I want.

If this is not possible, how may I do that instead? I have also looked up how to create my own shapes (with redrawPath and the style thing), but it looks really long and boring.

Here's an example of what the XML looks like. The shape is a simple double square.

<mxlibrary>[{"xml":"xVNBbsIwEHyN78EugjOhcOqpLzDJgi05XstZSPJ7trFbiAqCqpV6sLQ7O2N7xrJQZdNvow7mDWtwQr0KVUZESlXTl+CckIWthVoLKQteQm7uTGfjtAg6gqdnBDIJTtodISEJaGlwGThEPIZMg0jQT46q0HuoSO8+6cX3K4zUfP4WsAGKA1M6W5NJjGVWGbAHQ1NMt/keX8qLHy6ypdv21GN7nbEE70FXH33HDyHUylDDO65nXOo2sD1u9rYH3nV1N4lrx/LfHL/8veO9da5Eh5Exjx5+GUIWzJNgmHRXAS1uBLT4eUDcXn7TOJt8tjM=","w":80,"h":80,"aspect":"fixed","title":"custom_shape_1"}]</mxlibrary>

Thank you in advance!

Solution

  • There are 2 ways I know, to do it, depending on your needs.

    1. Embed draw.IO as an iframe in your app, and create a plugin that adds your own palette of icon on the side bar. you can watch the p1 plugin code, and replicate it plugin list in draw.io, look for the p1 plugin . code example of how to integrate draw.io in your app hint: if pulgins are not loaded, check the plugin folder link.

    2. If you add the vertices on you own app, create your own style, and reuse it when creating.

      updateStyles()

      {

      var style = new Object();

style[(<any>window).mxConstants.STYLE_SHAPE] = 
(<any>window).mxConstants.SHAPE_IMAGE;

style[(<any>window).mxConstants.STYLE_PERIMETER] = 
(<any>window).mxPerimeter.RectanglePerimeter;

style[(<any>window).mxConstants.STYLE_IMAGE] = 
'../assets/transformer.png';

style[(<any>window).mxConstants.STYLE_FONTCOLOR] = '#000000';

style[(<any>window).mxConstants.STYLE_WHITE_SPACE] = 'wrap';

style[(<any>window).mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';

this.graph.getStylesheet().putCellStyle('transformer', style);

      }

      reuse this style whenever creating a vertex using insertVertex function.

       try {
  const parent = this.graph.getDefaultParent();

  this.graph.getModel().beginUpdate();

  const vertex = this.graph.insertVertex(parent, uuid.v4(), node, 40, 40, 80, 40, 'transformer');

} finally {

  this.graph.getModel().endUpdate();

}