MAP areas only activate after browser refresh

[edwardkeay]

Describe the bug
I have created a react webpart utilising the react-img-mapper,

I collect the MAP data from some PropertyFieldCollectionData fields then build the MAP const based the fields values

During gulp serve testing, this works perfectly, however when I deploy to a site collection and configure the webpart part, on the first visit to the page the image displays but the MAP areas do not work.

After a refresh (F5) of the browser the MAP areas work, however if I do a hard refresh of the browser (CTRL+ F5) or close the browser and go back to the page the MAP areas are inactive again.

I know the MAP const has been created due to the console.log displayed in the render area.

This is the code I am using in the .tsx file

Webpart .tsx code

`

export interface IReactImageMapState {
mapArray: string;
}

export default class ReactImageMap extends React.Component<IReactImageMapProps, IReactImageMapState > {

constructor(props) {
    super(props);

    this.state = {
        mapArray: "",
    };

    this.getMapInfo();        
} 

private getMapInfo(): void {
    if (this.props.collectionData) {
        let mapInfoData = this.props.collectionData.map((mapinfo, i) => {
            if (mapinfo.href == null || mapinfo.href == "") {
                return `{"shape":"${mapinfo.Shape}","coords":[${mapinfo.Coords}],"fillColor":"${mapinfo.fillColor}${mapinfo.fillTransparency}","strokeColor":"rgba(0,0,0,0)"}`;
            } else {
                return `{"shape":"${mapinfo.Shape}","coords":[${mapinfo.Coords}],"fillColor":"${mapinfo.fillColor}${mapinfo.fillTransparency}","href":"${mapinfo.href}","strokeColor":"rgba(0,0,0,0)"}`;
            }
        });

        this.setState({
            mapArray: JSON.parse(`{"name":"my-map","areas":[` + String(mapInfoData) + `]}`)
        });
    }
}

public componentDidUpdate(prevProps, prevState): void {
    if (prevProps.collectionData !== this.props.collectionData) {
        this.getMapInfo();
    }   
}

public componentDidMount(): void {
    this.getMapInfo();        
}

public render(): React.ReactElement<IReactImageMapProps> {
    const URL = encodeURI(this.props.imageUrl);
    const MAP = this.state.mapArray;        
    
    console.log("URL: " + URL);
    console.log("MAP: " + MAP);
    
    if (URL == "undefined") {
        return (
            <div className={styles.reactImageMap} >
                <div className={styles.container} >                         
                    <div className={styles.row}>
                        <div className={styles.column}>
                            <span className={styles.title}>React Image Map Webpart</span>
                            <p>Open the property pane to configure this webpart</p>
                        </div>
                    </div>                        
                </div>
            </div>
        );

    } else {

        if (URL && MAP) {
            return (
                <div className={styles.reactImageMap} >
                    <div className={styles.container} >
                        <span>URL & MAP</span>
                        <div>
                            <ImageMapper
                                src={URL}
                                map={MAP}
                                responsive={true}
                                parentWidth={this.props.webPartWidth}
                            />
                        </div>
                     </div>
                </div>
            );

        } else {
            return (
                <div className={styles.reactImageMap} >
                    <div className={styles.container} >
                        <span>URL</span>
                        <div>
                            <ImageMapper
                                src={URL}
                                responsive={true}
                                parentWidth={this.props.webPartWidth}
                            />
                        </div>
                     </div>
                </div>
            );
        }
    }        
}    

}
`

Expected behavior
Expected behaviour is that on the first visit to the page the MAP areas work

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: [e.g. 22]

Additional context
Add any other context about the problem here.

[NishargShah]

Hello @edwardkeay, can you please provide a demo of it?

[edwardkeay]

Hi,

Not sure if this is what you meant but please see attached a demo,

20210830_react-img-mapper_bug_video.mp4

[edwardkeay]

hi,

I have put the code in CodeSandbox

I have never used it before and don't know how to get it to work, but the code is there

https://codesandbox.io/s/ek-react-image-map-tl9or?file=/src/App.tsx

[NishargShah]

Please try to run this code in code sandbox, I tried to fork it and run it but the code has many problems, so please try to run this code.

As per your question, I thought the problem is it not working after deployment on the server but perfectly running on the development environment.

My solution is to console the area array, it's getting into the ImageMapper for the first time or not? If not then only render that portion if areas.length >=1.

[edwardkeay]

HI, after some testing and trial and error, I have found it is an issue with the 'responsive' function

I had the responsive set to true and set the parent width, this was causing the issue

I have rectified it by calculating the ratio between the webpart width (i've set the webpart to be 100% width of the section) and the original image width., then using the ratio to calculate the new coordinates.

This works perfectly, and does not have the issue regarding refreshing the page

`const imgRatio = (this.props.webPartWidth / this.state.imageOriginalWidth);
console.log("ReactMapper - imgRatio: " + imgRatio);

this.setState({scaleRatio: imgRatio}, () => {console.log("ReactImageMap - getMapInfo - setState scaleRatio: " + this.state.scaleRatio)});

var MapInfoCoords = mapinfo.Coords;
const splitCoords = MapInfoCoords.split(",");
console.log("ReactMapper - splitCoords: " + splitCoords);

let newCoords = splitCoords.map((origCoords, j) => {return (origCoords * imgRatio)});

var arr = new Array(newCoords);
var finalCoords = String(arr.join(", "));
console.log("ReactMapper - finalCoords: " + finalCoords);`

[NishargShah]

I am glad that you solved your problem on your own.

[salmanedhi]

Hi @NishargShah , this is a standard problem occurring in react. I am facing the same problem when using the responsive=true property.
Can you please help on a fix for this

[NishargShah]

Can you please share the demo with me?

[salmanedhi]

here you go. The first time you view it when you hover over an area it won't highlight. On line 51 change parent width and either increase it by 1 or decrease, save it. and then it will start to hover on areas.

https://codesandbox.io/s/agitated-cache-yuor3?file=/src/RadioboxContainer.jsx

[NishargShah]

Thanks for the working example, I will look into that issue and get back to you

[NishargShah]

Please upgrade your version to v1.3.0, it will solve your issue.

Codesandbox: https://codesandbox.io/s/small-sun-u804r

Thanks

[salmanedhi]

The issue is solved. Thank you

[majilan37]

I have a problem, i use react-img-mapper,
on the initial load the image does not take it's orginal height and width, they are 0 , until i hit refresh then the image shows,
how can i fix this ?

[luisfalconmx]

@majilan37 try to enable the natural and stayHighlighted props:

const URL = 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.jpg';
const MAP = {
    name: 'my-map',
    // GET JSON FROM BELOW URL AS AN EXAMPLE
    areas: 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.json',
  };

<ImageMapper src={URL} map={MAP} natural stayHighlighted />