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?
