I'm having a very hard time figuring out\nhow to connect vertices and show the edge\nlabels the way I need to show them.

\n

alt text

\n

I know that I can do this if I use child \nvertices (straight lines) as ports, but I've\nbeen trying to do it with a custom edge and\nconnection constraints on the vertices.

\n

I can use geometry offset to get the label positioned\nwhere I want it, but if one of the vertices moves,\nthe label moves.

\n

What can I do? I suppose I can recalculate the\noffset on a move event, but is there a better\nway?

asked 21 Dec '11, 07:36

lwe's gravatar image

lwe
1615
accept rate: 33%


Do you mean you want the label to stay at the exact same absolute position? If not, can you show a picture of where the label would be after moving a terminal?

link

answered 23 Dec '11, 10:29

Gaudenz's gravatar image

Gaudenz
80.1k1310
accept rate: 39%

Yes, I want the label to stay where it is, just to the right of the source terminal and above the edge, no matter which node is moved. The first segment of the edge is stationary (as it is in the entity relation style).

(03 Jan '12, 08:38) lwe

You can override mxGraphView.updateEdgeLabelOffset as follows:

\n
mxGraphView.prototype.updateEdgeLabelOffset = function(state)\n{\n  var geometry = this.graph.getCellGeometry(state.cell);\n\n  if (geometry.relative)\n  {\n    var offset = this.getPoint(state, geometry);\n\n    if (offset != null)\n    {\n      state.absoluteOffset = offset;\n    }\n  }\n  else\n  {\n    state.absoluteOffset.x = this.scale * (this.translate.x + geometry.x);\n    state.absoluteOffset.y = this.scale * (this.translate.y + geometry.y);\n  }\n};\n
\n

With this, you can use geometry.x and y to define the absolute position of the label as follows:

\n
geometry.relative = false;\ngeometry.x = 100;\ngeometry.y = 100;\n
link

answered 05 Jan '12, 22:16

Gaudenz's gravatar image

Gaudenz
80.1k1310
accept rate: 39%

edited 07 Jan '12, 01:09

Thanks, that helped me a lot. My label stays in the desired position when I move the destination around. I'm having trouble maintaining the position when I zoom in or out, but I think I can figure that out.

(06 Jan '12, 15:36) lwe

Fixed sample code for translate and zoom.

(07 Jan '12, 01:11) Gaudenz
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×228
×100
×29
×8

Asked: 21 Dec '11, 07:36

Seen: 3,111 times

Last updated: 07 Jan '12, 01:11