Detecting the rectangle size/position of a TreeGrid node?

[slick07]

I am trying to detect the page rect for a node in a TreeGrid. The method getCellPageRect(row, height) is almost what I need except the fact that the returned rectangle contains the entire cell and is not limited to the start and the end of the actual node within the cell. What else could I use to get these margins? I read the com.smartgwt.client.docs.Positioning documentation but found nothing related to TreeGrid.

Maybe a method like getCellContentPageRect(row, height) would be a good idea to improve the API? It is just a suggestion if you find it useful...

Just as a clarification: we plan to use these values to display custom components as hints near (at the start, end, top, bottom) tree nodes. If the column of the tree is wide and the node is short and due to indent spacing appears in the middle of the column, neither the start nor the end of the cell is useful since the hint will appear too far from the actual node. I hope I made myself clear and a hint in the right direction is much appreciated. Thank you!

[Isomorphic]

By "the actual node within the cell" we're guessing you mean the icon for the folder. If so, just take the cell's left coordinate and add treeGrid.indentSize * tree.getLevel(node)

[slick07]

The solution works great for the left side margin. Thank you! What can I try to compute the right side margin? This one might be a little bit tricky since depending on the column width the end text of the node can be trimmed or not... This right side margin computation applies even for a ListGrid in case someone would want to display something (e.g. rollOverCanvas) at the end of the text in a cell instead of the end of the cell.

I would recommend to add those methods to the See also: section of the com.smartgwt.client.docs.Positioning class.

[Isomorphic]

Whether in a cell or elsewhere, you can measure content by sticking it into an offscreen Canvas as canvas.contents, then applying the same CSS style it has wherever it's visible, make sure it's drawn (or redrawn if you re-use the same Canvas for multiple measurements), then calling getScrollWidth() / getScrollHeight() to find out the size.

We'll consider adding helpers for this, but, it's never come up before. It's not really clear how your hints work, but you might want to consider doing them as normal content (if after a node), or just positioning them below the node, so you don't have to do all this measuring.

[slick07]

Thank you for the suggestion.

Just to describe what we are doing... The hints are some custom components like some pulsing bullets that appear in various places to draw the attention of new users regarding various parts of the application. They appear just once and are part of a step by step guide to help users get familiar with the functionality of the interface. When the bullet is pressed a small message appears explaining what that icon, tree node, button, text field etc. does and after it is dismissed the next bullet starts pulsing and so on until the guide finishes... Thus we need that bullet to appear relative to the margins of a component to suggest it is about that particular component.

[Blama]

slick07,

if you have some time to wait (don't know when 13.0 will be released), did you see this new sample?

Best regards
Blama

[slick07]

Blama Haha this was our first solution that we wanted to implement but we went with a less invasive tour solution. I was not aware of it. Thank you for the hint! Maybe we shall use it in the future... Right now it is not looking well on the Enterprise skin.

[Isomorphic]

Note that the Enterprise series skins were missing some styles for the Product Tour windows, and they were added yesterday - you should see things much improved when today's showcase update hits.

[Blama]

Hi Isomorphic,

this is still not correct in SNAPSHOT_v13.0d_2021-07-07, see here:

Best regards
Blama

[Isomorphic]

Ok, we'll fix that unexpected transparency for tomorrow's builds

[Blama]

Hi Isomorphic,

there is also this strange [ in the top left corner.

Best regards
Blama

[Isomorphic]

Yes - both are fixed for tomorrow's builds.

[Blama]

Hi Isomorphic,

I can see these are fixed in SNAPSHOT_v13.0d_2021-07-10 Enterprise.
The same thing happens in Tahoe/Stratus/Twilight, but much less visible (1-2px), on the lower and right border.

Best regards
Blama

[Isomorphic]

We're not seeing this - can you show a screenshot and perhaps mention density/browsers?

[Blama]

Hi Isomorphic,

please see the attached screenshot (this sample, increase values in link, FF89, Edge 91).

Interesting is that in Edge only this happens sometimes on one side, sometimes on the other (see video).
So it seems to perhaps be Zoom related (System Zoom active because of 4K display, no Browser Zoom).

Best regards
Blama