Questions Tagged With curvehttp://forum.jgraph.com/tags/curve/?type=rssquestions tagged <span class="tag">curve</span>enThu, 01 Mar 2012 07:25:40 -0500Label controlling way pointhttp://forum.jgraph.com/questions/3476/label-controlling-way-point<p>I am trying to implement a curved edge and realize I am out of depth. In short, I don't understand how the label position relates to the bounds and way points of the edge geometry.</p>
<p>The way I want the edge to work is like a (normal) straight line, only that the edge curves through the label. When the label is moved, the curve is adjusted so that it still passes through the label.</p>
<p>After a couple of different attempts, I have ended up with the following solution:</p>
<p>I have created a subclass of mxEdgeHandler, which overrides moveLabelTo(). This method does what the original version does and also makes sure that the geometry of the edgeState contains a point where the label was dropped.</p>
<pre><code>@Override
protected void moveLabelTo(mxCellState edgeState, double x, double y)
{
mxGraph graph = graphComponent.getGraph();
mxIGraphModel model = graph.getModel();
mxGeometry geometry = model.getGeometry(state.getCell());
if (geometry != null)
{
geometry = (mxGeometry) geometry.clone();
// Resets the relative location stored inside the geometry
mxPoint pt = graph.getView().getRelativePoint(edgeState, x, y);
geometry.setX(pt.getX());
geometry.setY(pt.getY())
// Resets the offset inside the geometry to find the offset
// from the resulting point
double scale = graph.getView().getScale();
geometry.setOffset(new mxPoint(0, 0));
pt = graph.getView().getPoint(edgeState, geometry);
geometry.setOffset(new mxPoint(Math.round((x - pt.getX()) / scale),
Math.round((y - pt.getY()) / scale)));
/** This is my stuff */
mxPoint labelPoint = new mxPoint( x, y );
List<mxPoint> points = geometry.getPoints();
if( points == null )
{
points = new ArrayList<mxPoint>();
points.add( labelPoint );
geometry.setPoints(points);
}
else
{
points.set( 0, labelPoint );
}
model.setGeometry(edgeState.getCell(), geometry);
}
}
</code></pre>
<p>I have created a subclass of mxConnectorShape. The paintShape() method checks if the edge has more than two points, and then draws a curve through them. If only two points are available, the super class draws the shape.</p>
<p>Initially I have an edge, containing only two points:</p>
<p><img alt="alt text" src="http://forum.jgraph.com/upfiles/initial.png"></p>
<p>I have added code to draw all the way points of the edge to be sure everything is ok. Selecting and moving the label of the edge, I end up with this:</p>
<p><img alt="alt text" src="http://forum.jgraph.com/upfiles/one.png"></p>
<p>The new way point is where the label was dropped. The label positions itself a bit away from the way point.</p>
<p>Moving the way point again:</p>
<p><img alt="alt text" src="http://forum.jgraph.com/upfiles/two.png"></p>
<p>Moving one of the vertices</p>
<p><img alt="alt text" src="http://forum.jgraph.com/upfiles/move_vertex.png"></p>
<p>Moving the label:</p>
<p><img alt="alt text" src="http://forum.jgraph.com/upfiles/moving_label.png"></p>
<p>What dogs me is that the label positioning is so erratic. Also that when the label is moved and dropped, it does not end up where the mouse cursor is.</p>EarthumbThu, 01 Mar 2012 07:25:40 -0500http://forum.jgraph.com/questions/3476/label-controlling-way-pointpositionedgecurvebezierlabel