The company needs to use the drawing framework for its project. Another colleague used to be responsible for the drawing part, using the jsPlumb framework. Because of staff turnover, I took over this part later. As project drawing business requirements became more complex, jsPlumb was no longer enough for our project, so I looked at other drawing frameworks. This article focuses on the problems I encountered with jsPlumb and why I chose mxGraph.

jsPlumb

JsPlumb has a community version and a paid version. We are using the community version. The problems mentioned below may not exist in the paid version.

  1. unstable
  2. No built-in navigator (paid version has this feature)
  3. No smart layout features
  4. No layer management
  5. There is no integrated screenshot function
  6. Canvas does not have automatic border expansion

  • unstable

    Mainly reflected in two points

    1. Restore graphics occasionally reported some unknown seconds of error, restore failed
    2. Occasionally, line placement errors occur in connection lines

    This could be due to my poor use of jsPlumb, or it could be that there is a problem with the framework itself that ultimately fails to locate the problem. But I did see some students on the Internet who had similar unstable situations.

  • No built-in navigator

    The navigator has two functions: the first is to zoom in and out, and the second is a drag-and-drop minimap that changes the viewport. To zoom in and out, we use CSS Scale to scale the entire canvas. However, the disadvantage of this method is soon exposed. The node position changes after scaling; As for minimap implementation, it would have been like reinventing the wheel. The team had limited resources and this feature was shelved at the time.

  • Intelligent layout

    One of the requirements of the product is to display the data in the user’s Excel sheet in a graphical way, which requires the intelligent layout function, otherwise the program does not know where the nodes should be placed to be beautiful. Implementing this feature required complex algorithms, limited team resources, and the feature was shelved.

  • No layer management

    JsPlumb does not do layer management, resulting in some desired layer overlay effects cannot be achieved in the drawing process. If you want to do so, you have to use Z-Index to control it, which undoubtedly increases the maintenance cost of the project. And the target of jsPlumb is attached to the node by absolute positioning, so you need to manage not only the z-index of the node but also the z-index of the target.

  • There is no integrated screenshot function

    Any operation that changes the appearance of the graph during the user’s drawing process we need to take a screenshot of the current graph and synchronize it to the server as the cover of the graph. JsPlumb has no built-in screenshot function, we use HTML2Canvas to convert HTML to Canvas and PNG, and then send to the server. However, HTML2Canvas screenshots will lag for about a second, which reduces the user experience and is not what we want.

  • Canvas does not have automatic border expansion

    Since jsPlumb uses a mix of SVG and HTML, the nodes are HTML, and the boundaries of the canvas are naturally programmed div containers. If there are too many nodes or the user wants to drag them away, they need to expand the canvas boundary, which becomes a technical challenge. We had to slow things down to make the canvas 5000 by 5000.

Having said so much about jsPlumb, I didn’t mean to hack the framework. After all, jsPlumb currently has the highest number of starts and NPM downloads of any drawing framework, so it certainly has its advantages, but it just doesn’t fit our project. JsPlumb uses a mix of SVG and HTML, where all nodes are HTML and all lines are path elements wrapped by individual SVG nodes. This is very convenient for highly customizable node styles, and I find statically rendered graphics to be a good fit for jsPlumb.

mxGraph

For all the reasons mentioned above, I started technical research at the end of last year, hoping to find a suitable drawing framework for our project. The goal was very clear, and I was looking for a framework that would help me solve all of the above problems. After some screening by Google, I found that both mxGraph and GoJS could solve the problem of our project, because GoJS is a closed source fee. Finally, I chose mxGraph.

  • The stability of

    IO is a well-known open source drawing site developed using mxGraph. I use this drawing tool occasionally and have tried buggy situations. With draw. IO to back it up, I believe mxGraph’s stability is solid.

  • function

    MxGraph officially provides about 90 examples, and from those examples and draw. IO I can confirm that mxGraph can help me implement all the features I want. The navigator, intelligent layout, is just an API call to mxGraph. MxGraph’s canvas is based entirely on SVG, with custom node styles, and is done entirely in JS, which is a bit of a hassle. But it’s good for mxGraph to do layer management by itself, and for developers it’s just a matter of a few apis, not to mention z-Index. Since the canvas is based entirely on SVG, unlike jsPlumb which uses HTML + SVG to implement the canvas, mxGraph can export the structured document (XML) and no longer need to use HTML2Canvas to help capture images. It only needs to call several interfaces to export the current document and send it to the server. The server then converts the document to an image using the Java version (our project uses Java and the mxGraph server environment also provides PHP and C#), which solves the screenshot problem. We don’t have to worry about canvas boundaries, mxGraph has helped us do that. IO already uses mxGraph to implement complex graphics functions, and we believe that the framework will be able to withstand even more complex extensions in the future.

  • community

MxGraph had 250 or so related questions on StackOverflow, but most of them had few answers, which I was worried about at the time.

  • Compatibility issues

    The project is lax about browser compatibility. Browser compatibility issues are not considered. However, the interaction needs to be compatible with iPad. According to the official Demo of mxGraph, mxGraph is compatible with this aspect, so you can rest assured to use it.

  • disadvantages

    • The documentation is not friendly enough (I think it is far from the level of GoJS documentation), making it difficult to get started
    • There is no Chinese document, English is not good students to use a little difficult
    • In contrast, jsPlumb cannot use CSS to customize node styles. It is done entirely through JS, which is more troublesome

After four months of use, mxGraph certainly solved the problem. But there were some problems, and the mxGraph Example Tutorial will show you how to solve them.

reference

  • 12 Things you Need to Care about when Evaluating JS Libraries
  • Overview of front-end visual modeling techniques