Remove the connecting pointers/dots for every node in "ReadOnly" mode

image

Is there any way to remove the connecting dots in “ReadOnly” mode?

The dots are getting removed while hovering on the node. But I want the dots to be removed in read-only mode and need to show once the read-only is set to false.

Hi All, @walter, @simon kindly share the solution.

How are you making them disappear upon mouse-enter or -hover? If you are setting their opacity, you could set their visible property when you toggle the Diagram.isReadOnly property. Or vice-versa.

@walter I just set the property as diagram.isReadOnly = true; I haven’t written any logic to disappear it while hovering. The node by itself removes the connecting dots while hover out.

This contradicts what you said earlier:

The dots are getting removed while hovering on the node.
And your screenshot shows those ports on all nodes.

If you don’t want to show those ports normally, in the template set their opacity to zero or set their visible to false. The mouse event handlers can change those properties. But you can change those event handlers to check Diagram.isReadOnly to decide what to do. Get the Diagram either from InputEvent.diagram or GraphObject.diagram.

Yes @walter, actually the dots are showing when the read-only is set to true. Once the mouse hover event is completed (that means while doing hover out), the dots are removed. Not sure how…

Also I tried setting the below visible property as false, it works.

const makePort = function (id: string, spot: go.Spot, output, input) {
return $(go.Shape, “Circle”,
{
opacity: .5,
visible: false,
fill: ‘gray’,
strokeWidth: 0,
desiredSize: new go.Size(8, 8),
portId: id,
alignment: spot,
fromLinkable: output, toLinkable: input,
});
}

How do I dynamically make visible the port if the read-only mode is false.

So, it’s actually GoJS, not GoDiagram.

myDiagram.commit(d => {
  d.nodes.each(n => {
    n.ports.each(p => p.visible = true);
  });
});

Thanks a lot, @walter, it works!!!