Hello,
I want to highlight my ports when the user hovers on the name.
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.
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?
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)))) "