Shape label on link placement

GoJS
#1

Hello,

On the page devoted to labels https://gojs.net/latest/intro/linkLabels.html, it is only specified the placement of written labels on the link but not shape label on the link.

Like how would I place the label on this link to the from or to position please ? Thank you :

diagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" }),
      $(go.Panel, "Auto",  // this whole Panel is a link label
        $(go.Shape, "TenPointedStar", { fill: "yellow", stroke: "gray" }),
        $(go.TextBlock, { margin: 3 },
          new go.Binding("text", "text"))
      )
    );
#2

Any of the properties described on that page about controlling the position and orientation of a label on a Link should go on the label object, which in your case is a Panel.

#3

Thank you for your answer. When I create a label like this, the label is still on the middle:

 $(go.Panel, "from", // this whole Panel is a link label
          $(go.Shape, "Rectangle", { segmentIndex: 0, segmentFraction: 0.2, width: 20, height: 20, fill: "yellow", stroke: "gray" }),
          $(go.TextBlock, { margin: 3 },
            new go.Binding("text", "text"))
        )

image

#4

But you have set those properties on some object within the Panel, rather than on the Panel.

Think of how most Panels work, not just in GoJS, but all windowing systems, including HTML. The Panel has some elements in it, and the properties on each element specify how that individual element is controlled by the panel when the panel lays out all its elements. That is in addition to properties on the panel itself, of course.

In this case you have a Link Panel which has three elements:

  • the Link.path Shape, the special shape that gets an automatically computed Shape.geometry
  • a Shape that is a label on the link, acting as an arrowhead
  • a nested Panel that is a label on the link, holding a border shape around some text
#5

Thank you very much for you answer, I was just misled by the “from” and “to” in the examples.

I put { segmentIndex: 0, segmentFraction: 0.9 } and it worked.