| [Zest] How to change color and labeltext of an edge(connection)? [message #1728564] |
Tue, 05 April 2016 13:18  |
 Christoph Broeter
Messages: 30
Registered: July 2015 |
Member |
|
|
Hey there, another day another question.
I am stumbling around on the topic of modifying edge visualizations.
Since adaptation of node visualization in zest is quite easy by implementing your oun GraphStyleProvider extending LabelProvider and implementing several interface classes. But I had no success on the adaptation of edge visualizations in exception to decorators (implementing IEdgeDecorationProvider). Therefore my question today is: "Is it possible to change the appearance of edges like coloring and edge labels in some manner?
Thank you. I appreciate your help you are doing a nice job!
[Updated on: Tue, 05 April 2016 13:18] Report message to a moderator |
|
|
| Re: [Zest] How to change color and labeltext of an edge(connection)? [message #1728823 is a reply to message #1728564] |
Thu, 07 April 2016 16:12  |
|
Hi Christoph,
yes you can change the appearance of edges via JavaFX CSS. In the context of Zest, the CSS can be provided via ZestProperties (ELEMENT_LABEL_CSS_STYLE, ELEMENT_CSS_ID, ELEMENT_CSS_CLASS, EDGE_CURVE_CSS_STYLE) as well as the label (ELEMENT_LABEL, ELEMENT_EXTERNAL_LABEL, EDGE_SOURCE_LABEL, EDGE_TARGET_LABEL). However, we changed the Zest JFace API so the GraphStyleProvider is no longer available and some of the label properties may not be available to you. Nonetheless, there should be a label provider available that can provide attributes for edges (but I do not know the class name off the top of my head) and at least the CSS properties and the ELEMENT_LABEL property should be available.
The new API consists solely of an IGraphContentProvider and an IGraphAttributesProvider. The latter is queried for edge attributes (and graph and node attributes).
Best regards,
Matthias
|
|
|
|
| Re: [Zest] How to change color and labeltext of an edge(connection)? [message #1729448 is a reply to message #1729336] |
Thu, 14 April 2016 09:07 |
|
Take, for example, the JFaceEdgeDecorationExample, which can be found within o.e.g4.zest.examples.jface, and change the MyLabelProvider#getEdgeAtttributes(...) method as follows to draw the edges in red instead of green:
@Override
public Map<String, Object> getEdgeAttributes(Object sourceNode,
Object targetNode) {
Map<String, Object> edgeAttributes = new HashMap<>();
edgeAttributes.put(ZestProperties.EDGE_SOURCE_DECORATION,
new CircleHead());
edgeAttributes.put(ZestProperties.EDGE_TARGET_DECORATION,
new DiamondHead());
edgeAttributes.put(ZestProperties.EDGE_CURVE_CSS_STYLE,
"-fx-stroke: red;");
return edgeAttributes;
}
I can also create another example to demonstrate how to add a stylesheet, so that only CSS ids or classes would need to be set within the attributes provider if you want.
Regards,
Matthias
[Updated on: Thu, 14 April 2016 09:08] Report message to a moderator |
|
|
| Re: [Zest] How to change color and labeltext of an edge(connection)? [message #1730525 is a reply to message #1729448] |
Tue, 26 April 2016 13:40 |
Christoph Broeter
Messages: 30
Registered: July 2015 |
Member |
|
|
Thanks Matthias, that worked, but the visualization of edges shall vary interactively (The user is able to select a node and all outgoing edges to a certain leave should change their color). In my current implementation the color change will only be visible after calling refresh() on the ZestContentViewer, but this will also call the layout to be reapplied which result in different drawings and therefore will not maintain the users mental map. Is there a way to force only a refresh of the Edges?
By the way. I am using:
Bundle-Name: GEF4 Zest.FX
Bundle-Version: 0.2.0.201509140217
[Updated on: Tue, 26 April 2016 13:50] Report message to a moderator |
|
|
| Re: [Zest] How to change color and labeltext of an edge(connection)? [message #1731800 is a reply to message #1730525] |
Tue, 10 May 2016 09:12 |
|
Hi Christoph,
you can call refreshVisuals() on the EdgePart, which would update the visualization based on the attribute values. To obtain an EdgePart for the given Edge model element, you can use the getContentPartMap() of the FXViewer that is contained by the ZestContentViewer. As edges are implicitly created, you will have to search the ContentModel (adapter on the FXViewer) for the Edge model element that you want to refresh.
Regards,
Alexander
|
|
|
| Re: [Zest] How to change color and labeltext of an edge(connection)? [message #1731856 is a reply to message #1731800] |
Tue, 10 May 2016 13:58 |
Christoph Broeter
Messages: 30
Registered: July 2015 |
Member |
|
|
Alexander Nyßen wrote on Tue, 10 May 2016 09:12Hi Christoph,
you can call refreshVisuals() on the EdgePart, which would update the visualization based on the attribute values. To obtain an EdgePart for the given Edge model element, you can use the getContentPartMap() of the FXViewer that is contained by the ZestContentViewer. As edges are implicitly created, you will have to search the ContentModel (adapter on the FXViewer) for the Edge model element that you want to refresh.
Regards,
Alexander
Thank you so much. It kinda works but matching the correct components is quite annoying.
I am also facing an interesting NullPointerException:
java.lang.NullPointerException
at org.eclipse.gef4.zest.fx.parts.EdgeContentPart.getGraphLayoutContext(EdgeContentPart.java:284)
at org.eclipse.gef4.zest.fx.parts.EdgeContentPart.doRefreshVisual(EdgeContentPart.java:183)
at org.eclipse.gef4.zest.fx.parts.EdgeContentPart.doRefreshVisual(EdgeContentPart.java:1)
at org.eclipse.gef4.mvc.parts.AbstractVisualPart.refreshVisual(AbstractVisualPart.java:479)
at com.myproject.zest.controller.styleprovider.layout.listener.NodeSelectionListener.handleLayout(NodeSelectionListener.java:80)
My code looks like:
Map contentPartMap = zestContentViewer.getFXViewer().getContentPartMap();
for (Object part : contentPartMap.values()) {
if (part instanceof EdgeContentPart) {
try {
Map<String, Object> a = ((EdgeContentPart) part).getContent().getAttrs();
a.put(ZestProperties.EDGE_CURVE_CSS_STYLE, "-fx-stroke: lightgray;");
((EdgeContentPart) part).refreshVisual();
} catch (NullPointerException e) {
e.printStackTrace();
}
}
}
The idea behind this implementation is to change the coloring of all edges on the fly
[Updated on: Tue, 10 May 2016 14:00] Report message to a moderator |
|
|
|
Powered by
FUDForum. Page generated in 0.01996 seconds
Search
Help
Register
Login
Home
