Home » Eclipse Projects » GEF » Edit node and create new connections GEF/ZEST 5
| Edit node and create new connections GEF/ZEST 5 [message #1769123] |
Wed, 26 July 2017 16:25  |
Eclipse User |
|
|
|
I'm trying to port ZEST 1.4 code to the new ZEST 5, however it seems to be extremely difficult to manipulate the graph through user interaction.
I would like to a) right click a node and display an editor box for modifying the nodes information and b) pull new edges between nodes.
So in essence I need a handler that can detect clicks on specific nodes and edges. I could however find zero documentation on this quite straight forward use case (it was really easy in ZEST 1.4).
Could someone please point me to the correct documentation or give me some hints on what steps I have to follow?
Thank you very much for your help
Horst
|
|
|
| Re: Edit node and create new connections GEF/ZEST 5 [message #1769389 is a reply to message #1769123] |
Mon, 31 July 2017 05:49  |
| Eclipse User |
|
|
|
Hi Horst,
an implementation of both features can be found in the GEF examples and tutorials.
Make nodes editable:
- Reference implementation: GEF Mindmap Tutorial, Part III (code is @ https://github.com/itemis/gef-mindmap-tutorial)
- Create EditNodeOnRightClickHandler, extends AbstractHandler, implements IOnClickHandler.
- Create CustomModule, extends ZestFxModule.
- Override CustomModule#bindNodePartAdapters(MapBinder), call super(MapBinder), bind the EditNodeOnRightClickHandler via MapBinder.addBinding(AdapterKey.default()).to(EditNodeOnRightClickHandler.class);
- Within the EditNodeOnRightClickHandler, show a dialog to enter new node information if mouseEvent.isSecondaryButtonPressed().
- When the user submits the changes, construct a ChangeAttributeOperation to modify the node's content, and execute it on the domain, so that the changes are undoable.
Pull edges between nodes:
- Reference implementation: GEF Logo Example (code is @ https://github.com/eclipse/gef/tree/master/org.eclipse.gef.mvc.examples.logo/src/org/eclipse/gef/mvc/examples/logo), "+" hover handler at shapes, pressed and dragged to another shape to create a new connection.
- Reference implementation: GEF Mindmap Tutorial, Part III (code is @ https://github.com/itemis/gef-mindmap-tutorial), "new connection" button => subsequently/ source and target can be clicked to create a new connection.
- Create EdgeCreationHoverHandlePart that draws a "+" shape next to a hovered node.
- Subclass ZestFxHoverIntentHandlePartFactory and ensure your "+" hover handle part is created for nodes.
- Create CreateEdgeOnDragHandler (extends AbstractHandler, implements IOnDragHandler), bind it for the EdgeCreationHoverHandlePart (override CustomModule#configure, AdapterMaps.getAdapterMapBinder(binder(), EdgeCreationHoverHandlePart.class).addBinding(AdapterKey.default()).to(CreateEdgeOnDragHandler.class)).
- Draw an edge from the source node to the mouse location until the user releases the mouse button (CreateEdgeOnDragHandler#startDrag(), #drag()).
- When the mouse button is released, execute an operation on the domain to add the new edge to the graph if the mouse is released over a valid target node (CreateEdgeOnDragHandler#endDrag()).
However, if you do not want to use GEF concepts, you can just stick to JavaFX and implement corresponding event handlers. You can subclass GraphPart, NodePart, EdgePart, NodeLabelPart, EdgeLabelPart, etc. for being able to adjust the visualisations, i.e. adding event listeners, allowing the insertion of text input fields directly in a node, etc.
Basically, you can choose the extent of framework support that you want to use. However, if you do not use GEF concepts, you will not get free lunch (picking, undo/redo, etc.).
Best regards,
Matthias
|
|
|
Goto Forum:
Current Time: Thu Apr 24 23:44:19 EDT 2025
Powered by FUDForum. Page generated in 0.03371 seconds |
Home