Move link label along the link line

GoJS
1

I am following this State Chart with Draggable Link Labels to enable draggable label. It works great.

I would like to do more – make label only move along the link line. If the label is moved to a horizontal segment, it can only move horizontally. Similar to vertical segment. While passing the segment points, it should switch from horizontal to vertical or vice versa. Is that something doable?

this.$(go.Panel, "Auto",
                    {
                        name: "LINK_LABEL",
                        cursor: "move"  // visual hint that the user can do something with this link label
                    },
                    new go.Binding("visible", "fromNode", (node) => { return node.data.category === NodeCategories.DECISION }).ofObject(),
                    this.$(go.Shape, "RoundedRectangle",  // the link shape
                        {
                            fill: "white",
                            parameter1: 8, // radius
                            stroke: "#444444",
                            strokeWidth: 1,
                            maxSize: new go.Size(80, NaN),
                            minSize: new go.Size(40, 17)
                        }),
                    this.$(go.TextBlock,
                        {
                            font: "normal 9pt \"Segoe UI\", Arial, sans-serif",
                            textAlign: "center",
                            editable: true,
                            maxSize: new go.Size(70, NaN),
                            minSize: new go.Size(30, 17)
                        },
                        new go.Binding("text", "_text").makeTwoWay()
                    ),
                    new go.Binding("segmentOffset", "segmentOffset", go.Point.parse).makeTwoWay(go.Point.stringify)
                )

Regards,
Chuan

2

Of course that is something that could be implemented. What problems have you encountered so far?

3
  1. when to stop move: how to stop the movement when the position is closed to end points?
  2. when is passing a segment point. Actually, the label is only belong to one segment, right?
4

Are you calling Link.findClosestSegment?

If I get some time later today I’ll see if I can create a new DraggingTool for you demonstrating this behavior.

5

That is a good hint. However, given a segment index, how would I get that segment and its direction like Horizontal or Vertical? It would be really good if you can provide some sample usage. Thanks!

6

Here you go:

The custom tool is at:
http://gojs.net/latest/extensions/LinkLabelOnPathDraggingTool.js

7

Thanks Walter. This is exactly what I want. I need to download the lasted licensed version in order to use firstPickIndex though. I will let you know if running into any issue again.