PortLevel Highlights

Hello,
I want to highlight my ports when the user hovers on the name.
▶ 3PC - FINAL VERSION - 3PC Final - Google Chrome 2023-07-06 15-59-16

Does the port already have an unseen TextBlock showing its name, that you merely need to show? Or does the text have to be added to the Diagram, probably as an Adornment?

Do you only need to show the name of one port on a single node, or on all nodes that have such a named port?

What have you tried so far?

Text has been presented in ToolTip…
The real Problem over is to blink the ports (round shaped).

Is your question how to programmatically show a tooltip for a GraphObject? Or are you asking for something else? It’s hard for me to guess what you really want.

My Question is the blink (round shape, yellow color)which we see in GIF. I need to achieve that functionality when i hover on the palette (Mapped Parameter)

This isn’t what you are asking for, but you might be interested in this sample: Different Ways to Focus Attention on a Node

Or this one: Selection Animation

Here’s one possibility. I modified the Logic Circuit sample: Logic Circuit

First, I added a toolTip to each port in the portStyle function:

          cursor: "pointer",
          toolTip:
            $("ToolTip",
              $(go.TextBlock, new go.Binding("text", "adornedObject", port => port.portId).ofObject())
            )

Next I added some code to toggle the Shape.figure, Shape.fill and TextBlock.font values. (Originally I was going to use an Animation, but this blinking behavior is more of a toggling between two values for each of the properties rather than a continuous change of property values.)

    var _timer = undefined;
      
    function animateToolTip(show) {
      if (show) {
        if (_timer === undefined) {
          _timer = setTimeout(toggleToolTip, 300);
        }
      } else {
        if (_timer !== undefined) {
          clearTimeout(_timer);
          _timer = undefined;
        }
      }
    }
    
    function toggleToolTip() {
      const tip = myDiagram.toolManager.currentToolTip;
      if (!tip) return;
      const shape = tip.elt(0);
      if (shape instanceof go.Shape) {
        shape.figure = shape.figure === "RoundedRectangle" ? "Rectangle" : "RoundedRectangle";
        shape.fill = shape.fill === "yellow" ? "lightyellow" : "yellow";
        shape.parameter1 = 10;
      }
      const text = tip.elt(1);
      if (text instanceof go.TextBlock) {
        const bold = text.font.startsWith("bold");
        text.font = bold ? text.font.substring(5) : "bold " + text.font;
      }
      _timer = setTimeout(toggleToolTip, 300);
    }

Then I added some code to stop the timer when the tooltip is hidden, by overriding ToolManager.hideToolTip:

        new go.Diagram("myDiagramDiv",  // create a new Diagram in the HTML DIV element "myDiagramDiv"
          {
            "toolManager.hideToolTip": function() {
              animateToolTip(false);
              go.ToolManager.prototype.hideToolTip.call(this);
            },
            . . .

Finally I implemented an HTML button to call a function that shows a random port’s tooltip on a random node:

    function showRandomToolTip() {  // show a random port's tooltip on the selected node, or on a random node
      let node = myDiagram.selection.first();
      if (!(node instanceof go.Node)) {
        const arr = myDiagram.model.nodeDataArray;
        node = myDiagram.findNodeForData(arr[Math.floor(Math.random() * arr.length)]);
      }
      if (!node) return;
      const ports = new go.List(node.ports);
      const port = ports.elt(Math.floor(Math.random() * ports.count));
      if (!port) return;
      myDiagram.lastInput.documentPoint = port.getDocumentPoint(go.Spot.Center);
      const tip = port.toolTip;
      myDiagram.toolManager.showToolTip(tip, port);
      animateToolTip(true);
    }

Of course in your app you will have to figure out which port you want to show on which node.

for this above line. Im not able use elt() to find the ports as the data im getting in string whereas elt need an number. is there any other function to find graphobject of the port.

You probably want to call Node.findPort, Node | GoJS API

437b7889-3322-4d44-aedf-3cf30560b357

Thank you. With your help i was able to highlight the port’s tooltip. Is it possible to highlight the ports as well ?

Yes, I would do that by adding a Shape to the tooltip at the same location as the port, using a Placeholder, and then highlighting that Shape by toggling its appearance just as for the other objects in the tooltip.

When I have more time…

1 Like

Something like:

            toolTip:
              $(go.Adornment, "Spot",
                $(go.Placeholder),
                $(go.Panel, "Auto",
                  { name: "INFO", alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.TopLeft },
                  $(go.Shape, "RoundedRectangle", { fill: "lightyellow", stroke: "gray" }),
                  $(go.TextBlock, "some info")
                )
              )

You’ll need to change the toggleToolTip function so that it operates on the visible elements, since the structure has changed.

function toggleToolTip() {
  let tip = myDiagram.toolManager.currentToolTip;
  if (tip) tip = tip.findObject("INFO");
  if (!tip) return;
  . . .

When i use this format i dont see any changes… any other possible way

What code are you using to switch the properties? Did you update the code that I gave you to adapt to the new structure for the Adornment?

i did updated it

That’s the tooltip. What about the code to highlight it?

And I still haven’t seen how animateToolTip is implemented…

Does the tooltip look correct when it is shown?
When you step through the toggleToolTip code, does everything have the expected value, so it does what the code appears to do?
If not, you’ll need to debug this to see why it isn’t being called.

But I do notice that I didn’t add a Shape to represent the “highlighted” port.
Maybe something like:

$(go.Adornment, "Spot",
  $(go.Placeholder),
  $(go.Shape, { name: "PORT", width: ..., height: ..., fill: ..., stroke: ..., strokeWidth: ... }),
  $(go.Panel, "Auto", 
    { name: "INFO", ... },
    . . .
  )
)

and then in your code you can find the GraphObject named “PORT” and highlight it the way that you want. Maybe that could be as easy as toggling its visible property, as long as in its initial state visible is false and it has all of the properties that you want to show when it is highlighted.

no… it worked when i used these below code for tooltip.

“const tip = $(‘ToolTip’,
{ ‘Border.fill’: ‘pink’, ‘Border.stroke’: ‘red’, ‘Border.strokeWidth’: 2 },
$(go.TextBlock, displayName))”

but if i use these code. it doesnt work or change anything

" const tip = $(‘ToolTip’,
$(go.Adornment, ‘Spot’,
$(go.Placeholder),
$(go.Panel, ‘Auto’,
{ name: ‘INFO’, alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.TopLeft },
$(go.Shape, ‘RoundedRectangle’, { fill: ‘lightyellow’, stroke: ‘gray’ }),
$(go.TextBlock, displayName)))) "