How to make SegmentOffset Dynamic?

GoJS
1

Hi there, here below we have one use case where we are creating one Link Shape Template and adding one link Label template as a child shape template of the Link Shape Template. Now we are creating one error icon shape template as a child of the link template. Now we want to show the error icon beside the label shape template at a certain distance for which we are using segmentOffset property value as (0,-42). Now our label template is dynamic , upon increasing the size of the text the label width also increased. Here we are encountering one problem that if the width is increasing, we are not getting anyway to dynamically bind the segmentOffset property, so the error icon is getting fixed at a position and it’s not at all relative.

Please find the below snap for better reference.

Screenshot 2023-02-16 at 5.20.11 PM
Screenshot 2023-02-16 at 5.20.11 PM585×594 39.7 KB

Screenshot 2023-02-16 at 5.19.48 PM
Screenshot 2023-02-16 at 5.19.48 PM666×583 45.8 KB

Screenshot 2023-02-16 at 5.19.26 PM
Screenshot 2023-02-16 at 5.19.26 PM606×556 40 KB

2

Is there a reason that you aren’t including the error icon as an element of the link label that is showing the text within a rounded rectangle? That way you can position it relative to the rest of the label. Its visibility or opacity would be controlled by whatever criteria you would use to show or hide it.

3

tried that way too, but segmentoffset is not working …means I’m getting the error icon inside the label at that time!

4

Was your label implemented as:

Link
    Shape  // path
    Shape  // arrowhead
    Panel, "Spot"
        Panel, "Auto"
            Shape  // border
            TextBlock
        Panel, "Spot"
            Shape  // Circle
            TextBlock  // !
5

yes correct!

6

Then the position of the error icon would be fixed relative to the right side of the text. Isn’t that what you want?

7

yes that’s what I want but not achieving, it’s overlapping the node label …not going to the right side of the label!

8 
myDiagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.Panel, "Spot",
      new go.Binding("segmentOffset", "error", e => e ? new go.Point(0, -14) : new go.Point(0, 0)),
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
        $(go.TextBlock, "Hello World",
          new go.Binding("text", "to", s => `Hello, ${s}!`))
      ),
      $(go.Panel, "Spot",
        { visible: false, alignment: new go.Spot(1, 0.5, 4, 0), alignmentFocus: go.Spot.Left },
        new go.Binding("visible", "error"),
        $(go.Shape, "Circle", { width: 24, height: 24, fill: "brown", strokeWidth: 0 }),
        $(go.TextBlock, "!", { stroke: "white", width: 4, font: "bold 10pt sans-serif" })
      )
    )
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
],
[
  { from: 1, to: 2 },
  { from: 2, to: 3, error: true },
]);

image