Skip to content
+91-7795206615
|
info@habilelabs.io

  • Home
  • About
  • Services
    • Custom Application Development
    • UI/UX Designing
    • Web Application Development
    • Offshore Product Services
    • Technical Outsourcing
    • ERP Services
  • Company
    • Careers
    • Case Studies
  • Specialization
    • Frontend Frameworks
      • Angular
      • ReactJS
      • VueJS
      • HTML / CSS
      • Javascript /Jquery
      • Bootstrap
      • Material design
    • Backend Frameworks
      • NodeJS
      • Meteor
      • GraphQL
      • Loopback
      • Salesforce
      • Spring Boot
      • Odoo
      • Laravel
    • Database / ORM
      • MySQL
      • PostgreSQL
      • Oracle
      • MongoDB
      • Google Firebase
      • Mongoose
      • Sequelize
      • Hibernate / JPA
    • Languages
      • Java Script
      • Dot Net
      • Java
      • Python
      • C / C++
      • PHP
      • AI / ML
      • Type Script
    • Mobile Frameworks
      • Ionic
      • Native Script
      • Native Android App
      • Native iOS App
      • Google Flutter
      • React Native
  • Blog
  • Hire Us

MX Graph – How to Use It with Angular 8

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • Uncategorized
  • VAPT
  • Visualforce
  • Web Development
  • Web Security

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • Uncategorized
  • VAPT
  • Visualforce
  • Web Development
  • Web Security
mxgraph how to use it with angular

MX-graph is a java-script based diagramming library which can be used to display interactive graphs or charts, having custom functionality. The benefit of using an MX-graph is that it is a vector-based graph, therefore, it runs natively in any browser.

The popular graph-based websites like draw.io use the MX-graph library in their sites.

After working on the MX-graph for a long time, I came to the conclusion that there’s not much content available about it and other related documents are not up to the mark. I’ve even seen some errors in the documentation.

Angular is a popular framework to work for web-application and its easy to implement MX-graph in it for a quick start of your project.

This blog post is a brief discussion about important features of MX-graph and how to use them with no sweat.

Integration of MX-Graph to Angular

These features will help you create a custom graph-based angular project in no time!!

First of all, we need to install MX-graph. Well, there is already an NPM package available for it, we just have to install it with this command-

npm install mxgraph - save

After the package is successfully installed, import the library to angular.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"build": {
          "options": {
            ...
            "assets": [
              { "glob": "**/*", "input": "src/assets/", "output": "/assets/" },
              { "glob": "favicon.ico", "input": "/src", "output": "/" },
              { "glob": "**/*", "input": "./node_modules/mxgraph/javascript/src", "output": "/assets/mxgraph" }
            ],
            ...
            "scripts": [
              "src/assets/js/mxgraph.conf.js",
              "node_modules/mxgraph/javascript/mxClient.js"
            ]
          }        
        }

Here, we change the assets and the scripts array, to the scripts we added two java-script files, mxgraph.conf.js that contains some MX-graph configuration and the mxClient.js that is MX-graph library.

But MX-graph has no typescript implementation, you need to create classes of it or even better, you can copy files and put to new directory types –

Features of MX-Graph

MX-graph provides lots of in-build functionalities. As I can not go through them all in this blog, I’ve tried to include some of the very important features you would require to build your application.

In this blog, I will discuss how to generate canvas in which you can add or remove vertex which is moveable and resize-able in that canvas. I have also discussed how to create edges or simply you can say arrows to show a link between two nodes.

Generating a New Graph:

After implementation, we can easily create a new graph in component as shown in the example-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export class AppComponent implements AfterViewInit {
 
  @ViewChild('graphContainer') graphContainer: ElementRef;
 
  ngAfterViewInit() {
    const newGraph = new mxGraph(this.graphContainer.nativeElement);
 
    try {
      const parent = newGraph.getDefaultParent();
      newGraph.getModel().beginUpdate();
 
      const vertex1 = newGraph.insertVertex(parent, '1', 'Vertex 1', 0, 0, 200, 80);
      const vertex2 = newGraph.insertVertex(parent, '2', 'Vertex 2', 0, 0, 200, 80);
 
      newGraph.insertEdge(parent, '', '', vertex1, vertex2);
    } finally {
      newGraph.getModel().endUpdate();
      new mxHierarchicalLayout(newGraph).execute(newGraph.getDefaultParent());
    }
  }
 
}

Now, you have an integrated MX-graph and also have created a graph component but how to have custom graph punctuality that you want?

In the successive sections of this article, you will see some useful MX-graph functions to create custom functionality in the graph-

Insert New Vertex:

const vertex = newGraph.insertVertex(newGraph, vertex-ID, content, x-coordinates, y-coordinates, width, height, style);

Here, newGraph is the name of the graph (whatever you give it!), if there is some id to the vertex be given, you can pass it here else it can be null. In the third parameter, we can pass a string that is to be displayed inside vertex.

The next two parameters are x and y coordinates of the graph where you want to place the vertex and the last two are the width and height of the vertex. There is also an optional style parameter in which you can pass the style of the vertex. More on this is later in the article.

Finding All Vertex in Graph:

const cells = this.mxGraph.getChildVertices(this.newGraph );

It will help you find all the vertices with their data currently present in your graph. Create an edge between two vertices:

this.mxGraph.insertEdge(Graph-Name, edge-ID,content,source,target,style)

If you don’t want to pass an id then you can pass null, it will work all fine. The source is the vertex id from which edge will start and the target is where your edge will end.

The last parameter style is an option, used only if you want to add style to the edge as the last parameter in quotes.

Link if I want edge with no arrow’s, in the end, I can add ‘endArrow=none;’ as the fourth parameter.

To check there is an edge to vertex-

const edgeData = this.mxGraph.getEdgeBetween(source, target, true);

If there is an edge between source and target then all its properties with value will come in the edgeData else it will be null.

Remove Vertex:

this.mxGraph.removeCells([vertex ID], true);

In removeCells, the third parameter is to remove all vertex edges in your graph. Also, if you don’t want to remove vertex edges you can make it false.

Event Listener Functionality:

Adding event listening functionality in your graph is one of the challenging tasks, MX-graph provides lots of event listeners like click, double click, hover, touch and many more which you can check in their official documents. Some of the important have been mentioned below-

For Single Click:

this.mxGraph.addListener(mxEvent.CLICK, (sender, evt) => {})

To detect whether vertex or graph was clicked, you can use MX-event property to get vertex id as well.

1
2
3
4
5
6
7
8
9
this.mxGraph.addListener(mxEvent.CLICK, (sender, evt) => {
const vertexID = evt.getProperty('cell');
if(vertexID ) {
console.log(`Vertex with id{$vertexID } was pressed`)
} else {
console.log(`Graph was clicked.`)
}
})
 

For Double Click:

It’s almost same as the single click event, just with a slight change.

this.mxGraph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {})

Styling the Vertex

You can use mxStylesheet for styling the vertex but it is quite time-consuming as we don’t know all the properties in it. We have to find the required property first and then implement it which makes this approach slower.

For Fast implementation of required styling, I’ve found a better way-

As I mentioned earlier that draw.io also use MX-graph- Go to the site, create required shape and color, and then click on Edit Style as shown in below image-

styling vertex

In Edit Style Box, you can see some styling properties of the vertex, you can copy it and can use directly while creating a new vertex, like this-

edit style box

Inserting Complex Shapes in Graph:

One of the major problems I’ve faced is to insert a custom shape in the graph. The only effective solution I came to know is to create an SVG of that shape and add that shape to your style.

shape=image;image=Image-URL

Text Wrapping of Vertex

You can do wrapping of the text from style parameter, and can find all properties in draw.io. But it’s not effective, especially for complex shapes. To overcome this problem, I have created a custom function with the help of the pre-build properties of the MX-graph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
wraptext(){
  this.mxGraph.getLabel = function(cell)
  {
    const label = (this.labelsVisible) ? this.convertValueToString(cell) : '';
    const geometry = this.model.getGeometry(cell);
 
    if (!this.model.isCollapsed(cell) && geometry != null && (geometry.offset == null ||
        (geometry.offset.x == 0 && geometry.offset.y == 0)) && this.model.isVertex(cell) &&
      geometry.width >= 2)
    {
      const style = this.getCellStyle(cell);
      const fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;
      const max = geometry.width / (fontSize * 0.625);
 
      if (max < label.length)
      {
        return label.substring(0, max*2) + '...';
      }
    }
 
    return label;
  };
}
 

Basically, the width of each vertex in the graph is being calculated in this function. Then the maximum amount of text that can be entered based on the font size of the vertex is calculated.

If the text present in the vertex is larger than max two line’s occupancy then the rest of all text will be not shown in the graph and in the end, “…” is placed to indicate that there is more text.

Conclusion:

Now that we have a basic graph integration knowledge, the possibilities are limitless with MX-Graph. It can be used as the base for any custom graph-based application imaginable.

Lots of popular sites like draw.io uses the MX-graph in its core. It’s free unlike other libraries and is easy to use. Not only for Angular projects, this graph library can be used for other technologies also.

Hope you enjoyed the blog. You can visit on this to know more about Angular 8 Features | What’s New.

Thanks for reading!!

Posted byAnirudh SinghFebruary 19, 2020March 26, 2021Posted inAngular, Mobile development, Web DevelopmentTags: mxgraph, mxgraph angular, mxgraph library, mxgraph tutorial

Post navigation


:

Join the Conversation

5 Comments

  1. AffiliateLabz says:
    February 21, 2020 at 1:46 pm

    Great content! Super high-quality! Keep it up! 🙂

    Reply
  2. GeraldFrume says:
    March 3, 2020 at 6:38 am

    continue reading this https://royal-cazino.online

    Reply
  3. StephenUnpat says:
    March 3, 2020 at 12:25 pm

    Hello!
    The Online Writing Lab (OWL) at Purdue University houses writing resources and instructional material, and we provide these as a free service of the Writing Lab at Purdue.

    http://greatfallsracing.com/phpBB3/viewtopic.php?f=24&t=278123

    who can write my essay for me
    what is the best custom essay site

    Reply
  4. StephenUnpat says:
    March 14, 2020 at 6:40 pm

    Hello!
    Hire Our Remarkable Essay Editing Service. After finishing a lengthy essay, you might not have ample time to go through it and correct all mistakes. Moreover, even if you revise the paper, you are likely to miss some of the spelling, grammar and collocation mistakes you might have committed.

    http://www.overlord.it/forum/viewtopic.php?f=3&t=299506

    best writing paper
    cheap custom essay papers

    Reply
  5. pdftowordRandom[a..z]b says:
    March 16, 2020 at 8:49 pm

    Hello folks, I like your forum, just to share a few free tool websites which might help.
    Free online [url=https://fabpdf.com/en/pdf-to-word]word to pdf[/url] and [url=https://fabpdf.com/en/pdf-to-word]pdf to word[/url] converter.
    This online PDF converter software can transform PDF documents to editable documents in Microsoft Word Doc format, which can provide higher quality than many other converters. When you use from PDF to Word you will conquer all the difficulties, and, it’s Free.
    [url=https://2conv.ch/]Youtube to mp4[/url]
    [url=https://mp3-youtube.ch/]MP3 Youtube converter [/url]
    [url=https://keepvid.ch/]Video Downloader[/url]
    [url=https://ytmp3.ch/]Youtube to mp3 downloader[/url]
    [url=https://y2mate.ch/]Y2mate Youtube video Downloader[/url]
    [url=https://listentoyoutube.ch/en/youtube-to-mp3]Youtube to mp3[/url]
    [url=https://topten.ai/image-upscalers-review/]free image upscaler[/url] review.

    Reply
Leave a comment

Cancel reply

Your email address will not be published. Required fields are marked *

Leave a comment

Recent Posts

  • PyScript – Python for the Web Browser

    PyScript – Python for the Web Browser

  • Cross-Database with Association in Postgres with Sequelize

    Cross-Database with Association in Postgres with Sequelize

  • How can You Improve Your Communication Skills – Effective Tips

    How can You Improve Your Communication Skills – Effective Tips

  • 5 Reasons that Make CRM Software Beneficial for Every Business

    5 Reasons that Make CRM Software Beneficial for Every Business

  • Do Low-Code Solutions have a Future in Web Development?

    Do Low-Code Solutions have a Future in Web Development?

  • A Revenue Management Reset in Consumer Goods

    A Revenue Management Reset in Consumer Goods

Talk to our experts now

Have a project or looking for development team? Contact us.

Get a quote

About Us

Habilelabs Private Limited is the ISO 9001:2015 certified IT company, which has marked its flagship in 20+ countries with 100+ projects successfully

Company

  • About
  • Blog
  • Careers
  • Hire Us
  • Privacy Policy

Contact Us

  • +91-9828247415
  • +91-9887992695
  • info@habilelabs.io

Follow Us

Office

  • Habilelabs Private Limited
    4th Floor, I.G.M. School Campus,
    Sec-93 Agarwal Farm, Mansarovar,
    Jaipur, Rajasthan India
    Pin:302020