How to access panel dimensions from the panel editor?

Hello there.

We are building a panel plugin where we would like to have access to the dimensions of the panel in the Panel Editor. More specifically, on a CustomEditor.

What we tried:

plugin.panel?.defaultProps?.height

The above code is in the module.tsx (Panel Editor file)

No other good idea came up so far. Any idea where we could find these values?

It’s not specifically the size of the panel editor, but if you want to know the size of a component to for example resize it properly, you can use AutoSizer:

Here’s an example:

Thank you Marcus for your reply.

However I may have not expressed my question properly or I’m not knowledgeable enough to understand. Please allow me to ask again:

I would like to access the Panel Plugin width and height inside the panel editor. I do not plan to write or change the sizes so any “hack” would do (i think). The true purpose is that I want to get the content of the plugin (image that fills whole plugin) so that i can draw a polygon.

Where do you want to draw the polygon?

  1. Panel
  2. Panel editor
  3. Query editor

For the panel editor, you need to use something like the AutoSizer I mentioned. Since you mentioned “custom editor” this is what I assumed you meant.

To get the dimensions of the panel, you can access them directly from the props, like this:

Regarding where I want to draw the polygon, that will be a Modal only available in the Panel Editor. The modal is supposed to have the same dimensions as the Panel (outside of the editor, in the true dashboard).

As you have shown, getting the width and height of the panel is done through the Props and it’s quite forward. But what we are trying to accomplish is to have a Modal (only available in the editor) which will draw a canvas of the same size of the panel (and this size is the one “outside” of editing).

I understand that its super specific and again, it seems my question had flaws or was not understandable what our aim was.

To sum it up: is there a way to get the panel width and height (the dimension in the dashboard) through panel editor?

Thank you in advance for your time and patience :slight_smile:

Oh, I see! You want to open a modal from the panel editor, with the same dimensions as the panel. That would indeed be tricky to do using the API.

If you really want to do it, there’s nothing stopping you from accessing any HTML element through window.

window.document.body.querySelector("div.panel-content").getBoundingClientRect().width

You can use div.panel-container if you want to include the header as well.

Out of curiosity though, why is it important that it has the same dimensions?

Maybe our approach is not “best practice” but the reason why the width and height should be the same is to map the polygon edges 1 for 1. I guess all will break apart as soon as we resize the panel later so i might need to save the original width and height that was used on the modal and then do math to translate the new edges.

Regardless on how things go, I appreciate your help. :slight_smile:

Thank you and best regards

1 Like

Thank you @marcusolsson for the help. We opted out for “simplicity” and regardless on the panel dimensions, we are going to calculate polygon coordinates. We didn’t get to try your solution but I am guessing it works fine. I’ll accept your answer as solution for next person to look for answers to see it and we can close this topic. Thank you once again for the help.

1 Like