Node selected decorative lines coincide with node ports

GoJS
#1

How can I make the decorative lines not coincide with the ports?
Here is the relevant code snippet

const nodeSelectionAdornmentTemplate =
    $(go.Adornment, 'Auto',
      $(go.Shape, { fill: null, stroke: '#3699FF', strokeWidth: 1 }),
      $(go.Placeholder)
    )

function makePort(name, spot, output, input) {
    return $(go.Shape, 'Circle', {
      fill: null,
      stroke: null,
      desiredSize: new go.Size(7, 7),
      alignment: spot,
      portId: name,
      fromSpot: spot, toSpot: spot,
      fromLinkable: output, toLinkable: input,
      cursor: 'crosshair',
      mouseEnter: function(e, port) {
        port.desiredSize = new go.Size(14, 14)
        port.fill = '#D4E9FF'
      },
      mouseLeave: function(e, port) {
        port.desiredSize = new go.Size(7, 7)
        port.fill = '#fff'
      }
    })
  }

微信截图_20220215134851

#2

How do you want the selection to shown?

#3

hello, probably so
微信截图_20220216092358

#4

That is because the selection Adornment is in the “Adornment” Layer, which is in front of all of the predefined Layers that hold Nodes or Links.

Several choices:

  • move the “Adornment” Layer to be behind the Layer holding your Nodes; but this might adversely affect other Adornments
  • add a new Layer (behind the Layer holding your Nodes) just for a custom selection adornment
  • use a custom selection Adornment that has gaps exactly where the ports are
#5

I probably know it’s due to the hierarchy, but I’m not very familiar with gojs, so I don’t know how to implement it in code.
Can you show a code demo of any kind of implementation, thanks a lot

#6

Have you read GoJS Layers -- Northwoods Software ?

In your Diagram setup, add a new Layer behind the layer where your nodes are. I’ll assume that’s the default Layer:

myDiagram.addLayerBefore($(go.Layer, { name: "Selection" }),
                         myDiagram.findLayer(""));

And on your node template(s):

selectionAdornmentTemplate:
  $(go.Adornment, "Auto",
    { layerName: "Selection" },
    $(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 3 }),
    $(go.Placeholder, { margin: 1.5 })
  )

This is just copied from https://gojs.net/latest/extensions/templates.js with the addition of setting Part.layerName.

#7

Thanks walter!, working as expected.