How to get hotspot click action in React?

[Mavia Ali]

Hello, I have integrated web rotate 360 in my React App having multiple hotspots and click actions on it. I can get click action on hotspots when working in simple custom HTML and JS project, but not have any idea of how to track hotspot click function in my react app.

That's my code in react:

componentDidMount() {
const viewer = WR360.ImageRotator.Create('webrotate360');
viewer.licenseCode = 'your-license-code';
viewer.settings.configFileURL = '/example/car.xml';
viewer.settings.graphicsPath = '/graphics';
viewer.settings.alt = 'Your alt image description';
viewer.settings.responsiveBaseWidth = 800;
viewer.settings.responsiveMinHeight = 300;
viewer.settings.apiReadyCallback = (api, isFullScreen) => {
this.viewerApi = api;
this.viewerApi.images.onDrag(event => {
console.log(`${event.action}; current image index = ${this.viewerApi.images.getCurrentImageIndex()}`);
});
}
viewer.runImageRotator();
}

Please, can any one guide how to tackle click action in react?

 

[ForumAdmin]

Hi Mavia, as per the code above, the key is the api obj that you receive in the apiReadyCallback. You can do lots of things with it, including responding to hotspot click actions in the same way you did without React, e.g:

viewer.settings.apiReadyCallback = (api, isFullScreen) => {
    this.viewerApi = api;
    this.viewerApi.hotspots.onAction(hotspotConfig => {
        console.log(JSON.stringify(hotspotConfig, null, 4));
        return false; // Returning false indicates that you don't want to override a default hotspot action.
    });
});

PS: you may be actually looking for this.viewerApi.hotspots.onActivate(hotspotData => {}) instead I guess which is a callback you get when a hotspot indicator is clicked or hovered over if configured to activate on hover. onAction is triggered when an action is assigned to a hotspot, e.g a label action or a hyperlink action, etc (see hotspot actions in the user guide under Hotspots).

For more things you can do with the API, see template_api.html in our integration templates.

 

[Mavia Ali]

Hello, thanks for your reply.
I have integrated this below code in useEffect
useEffect(() => {
const viewer = WR360.ImageRotator.Create("webrotate360");
viewer.settings.configFileURL = "/360car.xml";
viewer.settings.graphicsPath = "/graphics";
viewer.settings.alt = "Your alt image description";
viewer.settings.responsiveBaseWidth = 800;
viewer.settings.responsiveMinHeight = 300;
viewer.settings.apiReadyCallback = (api, isFullScreen) => {
const hotspotElements = document.querySelectorAll(".hotspot_indicator");
hotspotElements.forEach((element) => {
element.addEventListener("touchstart", () => {
document.getElementById(
"wr360DynamicSpot_left-side_webrotate360"
).style.backgroundImage = `url('${window.location.origin}/graphics/circ-cross-thin-green.svg')`;
});
});
};
viewer.runImageRotator();
}, []);

Its displaying empty white space when I change the component, but when I opens the inspect element it automatically displayed what can be a cause? Its strange to me.
Here is video for your reference: https://www.loom.com/share/368feca99aaa4eb2a9c9b4781c153e82

 

[ForumAdmin]

It's hard to say without debugging but most likely the webrotate360 container has zero width and/or height when useEffect is called. We also listen for browser resize events and if such event is triggered e.g. when inspector window is opened, the viewer will resize itself to fit into the parent container.

So, the first check would be to see why the webrotate360 container is not sized correctly upon the call to useEffect.