Wrong initialisation

[albmat]

Describe the bug
When the component is initialised, it is not always displayed correctly. The image, the canvas, the map component and the areas are always there, but sometimes neither the div#img-mapper container nor the canvas has any height, so the areas are not displayed, it is as if they were not there. You have to refresh the page to make it work correctly.

Expected behavior
The component should initialise correctly from the beginning, without the need to refresh the page.

Screenshots

Additional context
As you can see in the image, the component is placed inside a container with a grey background, as the content has no height, the coloured container has no height either. Although the image is visible.

[NishargShah]

Can you provide me a problem example in codesandbox?

[albmat]

I'll try, but you can see that behaviour in the live Storybook example as well. https://img-mapper.github.io/react-docs/?path=/story/examples-simple--simple

[KeithHubert]

I'm also running into this issue. I assumed there was a problem using this in react-grid-layout / react-resizable wrappers and having ImageMapper completing before knowing parent dimensions, but it's interesting that it is happening in the Storybook link as well.

First render has 0 height and width. Subsequent renders work as expected.

[NishargShah]

In the first render, you will never get the actual height but after the first render, it will get that and present all the things to the screen.

[rafyzg]

I am experiencing the same issue.
Specifying the height in advance fixes this problem for me.

[NishargShah]

Hello

I am working on this issue but in the meantime please downgrade the package to v1.3.0, it's working fine.

https://www.npmjs.com/package/react-img-mapper/v/1.3.0

[majilan37]

i been strugling with the issue too, i fixed this by giving width and hieght props

[majilan37]

i did this and it works

<ImageMapper src={"/images/interactive.png"} width={7740} height={4330} map={{ name: "my-map", areas: mapDataOverview }} onClick={clicked} />

[NishargShah]

Hello @albmat @majilan37 @rafyzg @KeithHubert Resolved in V1.5.0

Please check and free feel to reopen if you found any bugs related to this issue.