The XB annotations and labels should not change size when zooming

Some background on this:

When zooming happens, we zoom a <div> outputted by the <Canvas> component by adding transform: scale(...) in an inline style attribute. (Note that we also set the same attribute on the same element elsewhere, just search for style.transform in the codebase.)

The same <div> also outputs <Preview> > <Viewport> where we have the iframe and <Outline> laid out as adjacent elements. <Outline> is where all the annotations and labels live. They all get zoomed, because we scale the <div> which is their ancestor.

I had a chance to discuss this with @jessebaker, and his idea is the following:

1. Move the <style> attribute with the transform: scale(...) further down the component tree to only zoom the contents of the iframe;
2. Move <Outline> out of the <Viewport> component and lay it on top of the iframe with absolute positioning — this will require calculating its position.
3. The <Outline> component needs to be aware of the current zoom level and calculate the dimensions and positioning of the borders it draws around components accordingly.

balintbrews → credited jessebaker → .

Unassigned it for now as per the priority of the issue @soaratul you can pick this.

Assigning it to Atul.

So I'll explain the current state of the MR.

1)

Move the attribute with the transform: scale(...) further down the component tree to only zoom the contents of the iframe;

• Use a state variable in the parent state and pass it as a prop to the child which then does all the magic
• I also tried using forwardRef but was not completely able to get that working.

Using forwardRef sounds like a good approach. Here is the example from the React docs on how to expose a DOM node to the parent component: https://react.dev/reference/react/forwardRef#exposing-a-dom-node-to-the-.... Is this how you tried making it work? Perhaps you could give it another try and show your code if it's still not working?

While continuing the work on this issue, let's keep an eye on 🐛 Remove flickering when preview is being updated Needs review , which will soon land with changes that will affect how we need to solve this issue. Until then, I think it's worth doing the exercise of making forwardRef work, so you clear that complexity first.

I'll create a separate MR for using the forwardRef approach.

I'll try to add the code that i tried for forwardRef.Before that the problem that i faced with the implementation of forwardRef was that we only want the irfameRef from the viewPort so that it can be passed to <Outline> component which is moved out from the ViewPort component, do we really need forwardRef for that?
Isn't there a better/Easy way to approach this?