Auto-Scaling Problem

GoJS
1

Hello,
I am experiencing issues with presenting an adornment as a tooltip.
I have a diagram which is capable of receiving ViewportBoundsChanged from another control (Zoom control).
And in that diagram I have nodes, to which I wish to have tooltips.
Below is a snippet of my code shell:

goMake(
	go.Panel,
	go.Panel.Auto,
	{
		// this is a typical node
	}
…
…
	{
		toolTip: getTooltip(),
	}
)

And inside this getTooltip

const partsMap = new go.Map<string, go.Panel>();
	…
// here I add parts to the tooltip
	partsMap.add('id', idPanel);
	partsMap.add('title', titlePanel);
	
	return goMake(
				go.Adornment,
				go.Panel.Spot,
				{
					…

The issue that ViewportBoundsChanged events trigger auto-scaling also for the tooltip.
And no matter what I do, all the sizes I specify for the tooltip are effective only BEFORE the scaling.

Whenever I “zoom” the tooltip increases its size together with the nodes, and the same for zoom out.
And even worse, the distance from the node to the tooltip also increases.

The expected behavior I’d want to achieve is just to keep the tooltip the same all the time, and adjacent to the node.
In other words, I’d want it to ignore the scaling, however still stay as close as it can be to the edge of the node.

Below are 2 extreme visual examples of how it behaves when zoomed in & zoomed out, each case with its own issues.
I just want the same normal size tooltip to be available in the same manner in all the cases, adjacent to the hovering point.
(BTW: I saw that a month ago a fix have been placed concerning ViewportBoundsChanged not fired. However, this is not my issue).

image
image

2

Yes, adornment tooltips and context menus are automatically scaled when they are shown by the ToolManager and ContextMenuTool, respectively. This is to ensure they are legible regardless of the Diagram.scale.

However, if while they are showing the user zooms in or out, the tooltip or context menu is not automatically re-scaled to maintain the appearance of constant size. But you could do that in a “ViewportBoundsChanged” DiagramEvent listener, if you like.

Does this match your understanding?

3

I wish that the default behavior was to maintain the appearance of constant size.
But as you might’ve seen in the screenshots I’ve sent, they aren’t.
My tooltips are re-scaled and their position is moved away from the hovering point.
Currently I haven’t added any non-default to any “ViewportBoundsChanged” listener.

Maybe you can share an example of how to keep the tooltip size and their relative position to the hovering point regardless of the current scale?
Or do you think I am experiencieng some kind of buggy behavior ?

4 
<!DOCTYPE html>
<html>
<head>
  <title>Constant sized tooltips while zooming</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      toolTip: $("ToolTip",
          $(go.TextBlock, "a tooltip\nfor the diagram")
        ),
      "toolManager.toolTipDuration": 15000,
      "ViewportBoundsChanged": e => {
        if (e.subject.scale !== e.diagram.scale) {
          const tt = e.diagram.toolManager.currentToolTip;
          if (tt instanceof go.Adornment) {
            tt.scale *= e.subject.scale / e.diagram.scale;
          }
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text")),
    {
      toolTip: $("ToolTip",
          $(go.TextBlock, "a tooltip\nfor a node")
        )
    }
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>
5

My tooltip is a tooltip originated from an internal panel, not a diagram.
So when I try to take the proposed approach:

goMake(
	go.Panel,	
	...
	...
	{
		toolTip: getDataTooltip(isUnit),
		"ViewportBoundsChanged": e => {
			if (e.subject.scale !== e.diagram.scale) {
				const tt = e.diagram.toolManager.currentToolTip;
				if (tt instanceof go.Adornment) {
					tt.scale *= e.subject.scale / e.diagram.scale;
				}
			}
		}
	}

I get the error:

Trying to set undefined property “ViewportBoundsChanged” on object: Panel(Auto)#981

Can you please demonstrate how can I get around it inside a panel defintion?
I am not really sure in that context to get a handle to diagram/node and to access that property (ViewportBoundsChanged)

6

That’s not a property of any GraphObject – it’s a DiagramEvent of the Diagram: GoJS Events -- Northwoods Software

As you can see in my code, I declared that listener while initializing the Diagram, not any Node or Panel or TextBlock or any other kind of GraphObject.