Not able select link inside group node

GoJS
1

After applying fill:“transperent” property I am not able select link inside group node placeholder.

Note: I am not wanting to use fill: null property on group node shape.

Diagram:

image
image1343×660 53.3 KB

Code:

image
image1225×617 94.9 KB

Placeholder:
image
image1128×362 32.7 KB

2

Do you want the links in the foreground? Or the groups in the background? That would be the simplest fix.

in your group template:

layerName: 'Background'

or your Link template:

layerName: 'Foreground'
3

By the way, that is not a valid CSS color string.

go.Brush.isValidColor("transperent")   // false
go.Brush.isValidColor("transparent")   // true

(It’s OK in your code.)

4

Hi
Afte apply layerName: ‘Background’ property link selection issue get resolve.
but after that I am facing link overlapping issue on group node.

Note: By using layerName: ‘Foreground’ property link selection issue does not resolve.

Diagram:

image
image971×589 36 KB

5

Is your link template setting Link.routing to go.Link.AvoidsNodes? If so, do you want the route of that link pointed at by the upper red arrow to go around that yellow header area? Or do you want it avoid some other region?

Is the lower red arrow not a problem when the Group has layerName: ‘Background’?

Under the assumption that you just want links to avoid that yellow header area of a group, you could try overriding the group’s behavior of Node.getAvoidableRect. Something like:

    class CustomGroup extends go.Group {
      getAvoidableRect(result) {
        const header = this.findObject("HEADER");
        if (header) {
          header.getDocumentBounds(result);
        } else {
          result.set(this.actualBounds);
          result.width = 20;
          result.height = 40;
        }
        return result;
      }
    }

And then your Group template would be something like:

$(CustomGroup, "Auto", . . .,
    $(go.Shape, . . .),  // the border
    $(go.Panel, "Table",
        $(go.Panel, . . . { name: "HEADER", row: 0 },
            . . .),
        $(go.Placeholder, { row: 1 }, . . .)
    )
)