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'
}
})
}
walter
February 15, 2022, 11:57am
2
How do you want the selection to shown?
walter
February 16, 2022, 1:05pm
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
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
walter
February 17, 2022, 12:20pm
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 .
Thanks walter!, working as expected.