search

GfSE / SpecIF-Viewer

A viewer and editor for SpecIF files.
Apache License 2.0
9 stars 3 forks source link

Implement Editor for FMC Block-Diagram #9

Open odungern opened 3 years ago

odungern commented 3 years ago

As a Business Analyst or System Designer I would like to create or update a FMC Block-Diagram and store it immediately in a semantic net using the SpecIF. Idea: Use diagram-js, an online diagramming library upon which bpmn-io (Demo) is built.

koppor commented 3 years ago

(Just a brainstorming to put into an ADR)

I checked my "favorite" tool - Eclipse Sprotty. Unfortunately, they still seem to render data only - without the ability to modify data.

Maybe, I should get to may days with jsplumb. I like it, because the styling is plain HTML, "only" the connections are done using SVG.

Someone told me that d3js could also be suitable for creating a modeler. See https://codepen.io/johnreynolds/pen/QjWKYj for a very basic example. (awesome-list)

Quick check on mxGraph (which is now Apache licensed): Doesn't support nesting. http://jgraph.github.io/mxgraph/

I checked AlloyUI's Diagram Builder - http://alloyui.com/examples/diagram-builder/ - doesn't seem to support nesting, too.

Regarding BPMN, I made a survery 7.5 years ago: https://stackoverflow.com/a/15117083/873282

Oh, and we even did minimal prototypes for some languages:

https://winery.github.io/javascript-graph-library-comparison/app/paperjs/src/index.html. One can check the source at https://github.com/winery/javascript-graph-library-comparison for a "feeling" regarding the libraries. The code is not quality assured though.

We even added some performance checking possibilities. For instance, hundreds of nodes could be generated to evaluate the performance: https://winery.github.io/javascript-graph-library-comparison/app/jointjs/src/performance.html

I remember that JointJS came out quite well. It even can do nested elemeents: https://resources.jointjs.com/tutorial/hierarchy

odungern commented 3 years ago

Thanks for the input; comparing eligible libraries is always good!

Here, we are talking about model-editing, which is more than placing graphical shapes on a canvas. We need to offer a palette with all allowed shapes of a notation (simple with the FMC Block Diagram since there are just two element types Actor and State), but also to check some Syntax rules: The FMC Block Diagram is a bipartite graph, allowing connections only between different shapes.

We suppose that the Camunda diagram.js library has some of these features in contrast to a mere graphical editor .. but there hasn't been a thorough analysis, yet.

@koppor: Can you imagine to contribute an editor for the FMC Block Diagram? Shouldn't be an enormous effort. We will find someone for the mapping to SpecIF.

koppor commented 3 years ago

Needs more thought. In Eclipse Winery, I could only manage it with the Signavio Core Components (which we did not use because auf GPL relicensing). We implemented it manually using jsPlumb back then...

odungern commented 3 years ago

The open-source Camunda software is MIT. The SpecIF Editor is Apache 2.0. Nothing else needed, to what we can see. We are looking for a library fmc.io similar to bpmn.io; this can be used independently by all those who just want a FMC online-editor. We would integrate it into the SpecIF Editor to get the semantic net.

odungern commented 3 years ago

Eclipse Winery is Java, I suppose ... in our case it is pure ts/js to run in the browser.

koppor commented 3 years ago

@odungern The graphical modeler is written using Angular: https://github.com/eclipse/winery/tree/master/org.eclipse.winery.frontends