How to change styles of Selected Port?

GoJS
1

I want to change styles of Selected Port, I mean theese pink rectangles.

image.png1071×395 12.8 KB

I found this example GoJS Tools -- Northwoods Software but it show how to highlight temporaryPort of connected Link.

But I want to hightlight available port where I can connect the Link

2

Do you want to change the styling of temporary ports, or do you mean to highlight all ports that a link could be connected to on a given node?

3

I want to highlight hovered port that a link could be connected to on a given node. When you move cursor to Node and near Node appears a Port where you can connect this Link. By deafult this port is pink rectangle and I need to change styles of it.

image.png1648×733 152 KB

Also I don’t mean temporary Node at end of Link

image.png1146×509 66.6 KB

4

You can change the style of the temporary node/ports using the properties on the LinkingTool/RelinkingTool, eg LinkingBaseTool | GoJS API.

We do something like this in the Flow Builder sample:

function commonLinkingToolInit(tool) {
  // change the standard proposed ports feedback from blue rectangles to transparent circles
  tool.temporaryFromPort.figure = "Circle";
  tool.temporaryFromPort.stroke = 'lime';
  tool.temporaryFromPort.strokeWidth = 2;
  tool.temporaryToPort.figure = "Circle";
  tool.temporaryToPort.stroke = 'lime';
  tool.temporaryToPort.strokeWidth = 2;
}

commonLinkingToolInit(myDiagram.toolManager.linkingTool);
commonLinkingToolInit(myDiagram.toolManager.relinkingTool);
5

yeah, that is what I need. Thank you!!!

6

Thought this might help someone. In addition to colouring the ports (like above), you can colour the line and arrowhead like this

tool.temporaryLink.elements.each((o: go.Shape) => {
    if (o.toArrow) {
        o.stroke = "red"; // this is for the line
        o.strokeWidth = 1,
        o.fill = "red"; // this is for the line's arrow
    }
});