In this topic we will see how to build a custom node figure.

We will redefine the file node figure of the filesystem tutorial to get something like this :

This tutorial is based on the third tutorial.

The tutorial 3 model files can be downloaded from this location.

Full code is availabale through :

• SVN : https://gmfsamples.svn.sourceforge.net/svnroot/gmfsamples/Filesystem/tags/tuto4-final-diagram/
• direct download : https://sourceforge.net/projects/gmfsamples/files/20091121/tuto4-final-diagram.zip/download

This tutorial has been built with :

• Eclipse 3.5.1
• Graphical Modeling Framework SDK 2.2.1
• Eclipse Modeling Framework 2.5.0

In order to build our custom figure, we will use a Scalable polygon built like this (the edges give the polygon path) :

Our path is equivalent to A1→A2→A3→A6→A4→A3→A4→A5→A1.

These are the steps to follow :

• Open the filesystem.gmfgraph file
• Delete the Rectangle FileFigure
• Under the Figure Descriptor FileFigure node, add a Scalable Polygon node
• Set its name to FileFigure in the property view
• Under the Scalable Polygon FileFigure node, add a Label node and set its name to FileNameFigure and it Text to <..> in the property view
• Select the Child Access which is under the Figure Descriptor FileFigure node
• In the propertye view, select the Label FileNameFigure for the Figure attribute
• Under the Scalable Polygon FileFigure node, add a Template Point child node and set its properties to x=0, y=0.
• Add seven other Template Point nodes with this values :
  • x=40, y=0
  • x=40, y=30
  • x=30, y=30
  • x=30, y=40
  • x=40, y=30
  • x=30, y=40
  • x=0, y=40
• Click on the Transform label of the dashboard
• Regenerate the diagram editor

You should get this result :

This situation is not perfect because if we reorganize our diagram, and if an edge anchor comes near the right bottom of a file node figure, the edge does not touch it as you can see here :

It is because GMF believes by default that every figure is a rectangle.

To allow GMF to connect correctly the edges to our figure, we have to describe the external polygon on which anchors should be attached.

To do that, we have to modify the Java class /Filesystem.diagram/src/jfb/examples/gmf/filesystem/diagram/edit/parts/FileEditPart.java, and more precisely the method createNodePlate().

By default this method only create a default node figure :

	/**
	 * @generated
	 */
	protected NodeFigure createNodePlate() {
		DefaultSizeNodeFigure result = new DefaultSizeNodeFigure(40, 40);
		return result;
	}

We will override the getPolygonPoints() of the DefaultSizeNodeFigure like this (you may recognize the external representation of our figure, in other words, the path A1→A2→A3→A4→A5→A1) :

	/**
	 * @generated NOT
	 */
	protected NodeFigure createNodePlate() {
		DefaultSizeNodeFigure result = new DefaultSizeNodeFigure(40, 40) {
			public PointList getPolygonPoints() {
				PointList points = new PointList(6);
				Rectangle anchRect = getHandleBounds();
				points.addPoint(anchRect.x,                          anchRect.y);                         // A1
				points.addPoint(anchRect.x + anchRect.width,         anchRect.y);                         // A2
				points.addPoint(anchRect.x + anchRect.width,         anchRect.y + anchRect.height*30/40); // A3
				points.addPoint(anchRect.x + anchRect.width * 30/40, anchRect.y + anchRect.height);       // A4
				points.addPoint(anchRect.x,                          anchRect.y + anchRect.height);       // A5
				points.addPoint(anchRect.x,                          anchRect.y);                         // A1
				return points;
			}
		};
		return result;
	}

If you run your editor you should now get this :

I hope that this material will be helpful for you. If you want to support it, your help is welcome :