Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » GEF » [Zest] How to change color and labeltext of an edge(connection)?
[Zest] How to change color and labeltext of an edge(connection)? [message #1728564] Tue, 05 April 2016 13:18 Go to next message
Christoph Broeter is currently offline Christoph BroeterFriend
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 Go to previous messageGo to next message
Matthias Wienand is currently offline Matthias WienandFriend
Messages: 163
Registered: March 2015
Senior Member
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 #1729336 is a reply to message #1728823] Wed, 13 April 2016 08:18 Go to previous messageGo to next message
Christoph Broeter is currently offline Christoph BroeterFriend
Messages: 30
Registered: July 2015
Member
Can you state an example on how to change the coloring of the edges?
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 Go to previous messageGo to next message
Matthias Wienand is currently offline Matthias WienandFriend
Messages: 163
Registered: March 2015
Senior Member
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 Go to previous messageGo to next message
Christoph Broeter is currently offline Christoph BroeterFriend
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 Go to previous messageGo to next message
Alexander Nyssen is currently offline Alexander NyssenFriend
Messages: 235
Registered: July 2009
Location: Lünen
Senior Member
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 Go to previous messageGo to next message
Christoph Broeter is currently offline Christoph BroeterFriend
Messages: 30
Registered: July 2015
Member
Alexander Nyßen wrote on 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


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

Re: [Zest] How to change color and labeltext of an edge(connection)? [message #1731879 is a reply to message #1731856] Tue, 10 May 2016 15:49 Go to previous message
Alexander Nyssen is currently offline Alexander NyssenFriend
Messages: 235
Registered: July 2009
Location: Lünen
Senior Member
I assume that NPE will not be reproducible with 1.0.0, where we have revised the doRefreshVisual() of EdgePart (we have renamed it as well) to not access the layout context any more.
Previous Topic:[Zest] How to add an DoubleClickListener to the ZestContentViewer?
Next Topic:FXHoverTool should only look at nodes contained within the IViewer
Goto Forum:
  


Current Time: Mon Sep 24 07:16:17 GMT 2018

Powered by FUDForum. Page generated in 0.01996 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top