mxgraph | mxGraph is a fully client side JavaScript diagramming | Animation library

We are trying to build an application (to draw Network diagram) like Draw.io. I am looking for icons that they (draw.io) have in the left panel.

I knew draw.io has been built using mxGraph as a base and mxGraph is now a archived repo.

Is there anyway to get the icons list alone from mxGraph?

I am fine with paid icon as well, But where i didn't get the whole list like in the Draw.io.

Any direction on this greatly appreciated. Thanks.

I have multiple vertex cells in the graph. I am using JavaScript library mxGraph. When i drag the cell from the boundary of canvas, the canvas extends. I want to disallow the cell drag. Is there some function available to limit the drag within the canvas boundaries?

There is function called: graph.setCellsMovable(false); but this one lock overall, i need to set cell movement false only if user drag it outside the boundary.

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.

I am new to mxgraph and want to create a drag and drop for the entire graph. The behaviour I am looking for is described below:

How can I do this?

Update 1:

mxGraph.d.ts full code:

I integrated mxGraph(mxgraph npm package) in my react app, so when I trying to load graph using xml, I am getting an error in console

How to drag (some draggable in toolbar) on edge and then insert a new vertex between source and target, I find some examples like this, but I am not using mxEditor, thanks you.

• https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html

I am working on Angular 4 and I want to integrate mxGraph in my project. I have googled for it but I am not getting the full working example.

I have tried following way, but it also not working for me.

Steps I have followed:

1. Installed mxgraph: npm install mxgraph --save

   npm package for mxgraph: https://www.npmjs.com/package/mxgraph

2. Installed mxgraph-typings: npm install lgleim/mxgraph-typings --save

   Github Repo of mxgraph-typings - https://github.com/lgleim/mxgraph-typings

3. Now I have imported it in my component: import {mxgraph} from 'mxgraph';

4. Added the following line in .angular-cli.json assets array to make the mxGraph assets available.

   ...

Update #1:

Here are some new clues, looks invert just exchanges source and target of the edge, but does not change the direction of the tree.

The effect of swapping root and v1 is the same as set invert to true