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.


alt text


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.


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


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

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?


answered 23 Dec '11, 10:29

Gaudenz's gravatar image

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:

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

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

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

answered 05 Jan '12, 22:16

Gaudenz's gravatar image

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



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



Asked: 21 Dec '11, 07:36

Seen: 3,111 times

Last updated: 07 Jan '12, 01:11