1

I need to create a graphical editor for our data model that works in an HTML5 compliant browser. I am looking for a proper library/framework to build on. The model is stored as xml, but that should be largely irrelevant for the front-end technology.

To be more concrete, I am looking to build a kind of diagram editor to create boxes and lines. Each box will have a set of editable properties and a set of relationships to other boxes represented as lines of various kinds (think UML class diagram, but a bit more complex). It must be possible to edit each box's properties through the editor. I require a kind of toolbar from which users can select new boxes to create. Lastly, I would like an automated layout engine, but the user should be able to override through drag and drop.

Eclipse GEF is a good example of the kind of framework that I am looking for. It provides a tool palette, layout managers, drag and drop support, and an MVC architecture. However, I need this to work in a browser, not as a Java-based RCP app.

There are plenty of excellent JS libraries out there for displaying data (like d3 and jqplot). And I have started prototyping in d3. It is a powerful and flexible library, but also low-level. It seems to me that I would need to implement my own toolbar and drag-and-drop capabilities for example. This is something that Eclipse GEF provides out of the box.

Do I need to implement all this functionality myself or does there exist a library or framework that is more appropriate for my goal?

|improve this question

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • Questions asking us to recommend a tool, library or favorite off-site resource are off-topic for Programmers as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. – gnat Jul 22 '13 at 22:18
  • OK. Will reword the question. – Andrew Eisenberg Jul 22 '13 at 22:47
  • 1
    Reworded as suggested above. – Andrew Eisenberg Jul 22 '13 at 23:04
  • 1
    @AndrewEisenberg 1) your question is in the reopen review queue. You may also flag your question and request a moderator to review and potentially immediately reopen. 2) Resource requests ("any library") do not fare well on P.SE and tend to be ephemeral. They don't bring lasting value to the site. – user53019 Jul 23 '13 at 19:34
  • 3
    jsplumbtoolkit.com/jquery/demo.html – Reactgular Jul 23 '13 at 19:58
1

In a commercial context, yFiles for HTML should be pretty much exactly what you are looking for:

It's a client side Javascript library that uses HTML5 browser technologies like SVG,CSS3 and Canvas, as well as modern Ecmascript features for displaying and editing graph-like structures. It does not depend on any active server components.

It comes with built-in editing capabilities that can be customized to a very high-degree. E.g. if you aren't happy with the default gestures for creating, connecting, or moving elements, if you need a different gesture for zooming or panning the viewport, all of this can be customized. Also it comes with specific support for touch devices and touch gestures.

You can attach any number and kind of data to the elements and optionally display that data in the visualization. The visualization of the diagram elements (nodes, edges, labels, ports, but also the graphical adorners like resize handles, marquee rectangles, etc.) can be fully customized. Adding new elements is easy because at its core, plain SVG is used, so you can leverage existing graphics and third party designer tools to create interactive CSS styled and animated SVG items.

Regarding the storage: Of course the model can be modified and accessed via a Javascript API and at its core the model is Javascript objects. But there are convenience classes and samples on how to populate the graph from XML, JSON data, or angular-observed collections.

Regarding automatic layout capabilities: At the time of writing to my best knowledge the automatic layout algorithms of the library are by far the most elaborate and complete implementations available as native Javascript implementations. This live online demo shows some of the algorithms and some of the configuration options in action. The algorithms support advanced concepts like port-constraints, edge grouping, hierarchical node grouping, integrated labeling, positioning constraints, and many more. The developer's guide gives and introduction to the various available layout algorithms and concepts.

There are demos available that show how to customize the drag and drop gesture and integrate the widget with other Javascript UI frameworks. The library does not come with a toolbar implementation or implementations of other widgets. Instead you can and should consider using a widget toolkit like Dojo, ExtJS, jquery-UI, etc. in order to add widgets like toolbars, context menus, property panels, etc.

In a non-commercial context, finding a library that will do all of this for you, is a lot more difficult. D3 is strong in displaying data quickly and easily, but does not offer out-of-the box strong interaction or layout capabilities. The JsPlumb Toolkit provides nice editing capabilities, but also does not offer layout capabilities. Acceptable layout capabilities are offered by the open-source GraphViz engine. Although it's a C library, there are ways to port that library to make it run as a black-box in Javascript using Javascript source code cross-compilation. This will give you a command-line like interface inside the browser for the algorithms, which is not very convenient, but depending on your requirements may be enough.

Disclaimer: I work for the company that creates the yFiles library, however on SE I do not represent my employer. My posts, thoughts, and comments are my own.

|improve this answer
  • Thanks for the link to yFiles. It does look like a great product. However, because it is a commercial project, we cannot use it. We need an open source solution since our product will itself be open source. – Andrew Eisenberg Dec 6 '13 at 17:55
  • I would like to note that unless your project uses a viral license, you could still make use of commercial products or non-open source licenses. Your project will not be completely open-source anymore, but this can still be feasible. – Sebastian Apr 14 '15 at 14:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.