I want to know how to use click event on hotspot

[shinu0720]

here is the code and i expected that i could have console.log('asd') but it does not work

import './App.css';
// import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';
import React from 'react';
import logo from './angra@3.jpg';
// import { Viewer } from "photo-sphere-viewer";

import { useEffect } from "react" 

import { ReactPhotoSphereViewer, CompassPlugin, MarkersPlugin } from 'react-photo-sphere-viewer';

function App() {
  const [markersManager, setMarkerManager] = React.useState();
  const photoSphereRef = React.useCallback((node) => {
    console.log(node)
    const markersPlugs = node?.getPlugin(MarkersPlugin);
    setMarkerManager(markersPlugs);
  }, []);

  const plugins = [
    [CompassPlugin, {
      hotspots: [
        { longitude: '0deg' },
        { longitude: '90deg' },
        { longitude: '180deg' },
        { longitude: '270deg' },
      ],
    }],
    [MarkersPlugin, {
      markers: [
        {
          id: 'pin',
          longitude: 0.11,
          latitude: 0.32,
          image: 'https://photo-sphere-viewer-data.netlify.app/assets/pictos/pin-blue.png',
          width: 32,
          height: 32,
          anchor: 'bottom center',
          data : { compass: '#304ACC' },
        },
        {
          id: 'polygon',
          polygonPx: [2941, 1413, 3042, 1402, 3222, 1419, 3433, 1463, 3480, 1505, 3438, 1538, 3241, 1543, 3041, 1555, 2854, 1559, 2739, 1516, 2775, 1469, 2941, 1413 ],
          svgStyle : {
            fill       : 'rgba(255,0,0,0.2)',
            stroke     : 'rgba(255, 0, 50, 0.8)',
            strokeWidth: '2px',
          },
          data: { compass: 'rgba(255, 0, 50, 0.8)' },
        },
        {
          id: 'polyline',
          polylinePx: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356],
          svgStyle: {
            stroke        : 'rgba(80, 150, 50, 0.8)',
            strokeLinecap : 'round',
            strokeLinejoin: 'round',
            strokeWidth   : '20px',
          },
          data: { compass: 'rgba(80, 150, 50, 0.8)' },
        },
      ],
    }],
  ]

  const handleClick = (data: ClickData) => {
    console.log(photoSphereRef.current)

  }

  React.useEffect(() => {
    if (markersManager) {
      console.log(markersManager);
      markersManager.on('select-marker', (e, marker, data) => {
        console.log('asd')
      });
      markersManager.on('over-marker', (e, marker) => {
        console.log(`Cursor is over marker ${marker.id}`);
      });
    }
  }, [markersManager]);
  return (
    <div className="App">
      <ReactPhotoSphereViewer ref={photoSphereRef} src={logo} plugins={plugins} height={'100vh'} width={"100%"} onClick={handleClick}></ReactPhotoSphereViewer>
    </div>
  );
}

export default App;

[Elius94]

Hello! unfortunally this is currently a bug. I need to find how to fix it. You should use some workaround. I'm working on it.

[Elius94]

Hello! Now it's fixed and it's working:

Here's your example.

import "./styles.css";
import {
  ReactPhotoSphereViewer,
  MarkersPlugin
} from "react-photo-sphere-viewer";
import React from "react";

function App() {
  const pSRef = React.createRef();

  const handleReady = (instance) => {
    const markersPlugs = instance.getPlugin(MarkersPlugin);
    if (!markersPlugs) return;
    console.log(markersPlugs);
    markersPlugs.addMarker({
      id: "imageLayer2",
      imageLayer: "drone.png",
      size: { width: 220, height: 220 },
      position: { yaw: "130.5deg", pitch: "-0.1deg" },
      tooltip: "Image embedded in the scene"
    });
    markersPlugs.addEventListener("select-marker", () => {
      console.log("asd");
    });
  };

  const plugins = [
    [
      MarkersPlugin,
      {
        // list of markers
        markers: [
          {
            // image marker that opens the panel when clicked
            id: "image",
            position: { yaw: "0.33deg", pitch: "0.1deg" },
            image: "pin-blue.png",
            anchor: "bottom center",
            size: { width: 32, height: 32 },
            tooltip: "Mountain peak. <b>Click me!</b>"
          },
          {
            // image marker rendered in the 3D scene
            id: "imageLayer",
            imageLayer: "drone.png",
            size: { width: 220, height: 220 },
            position: { yaw: "13.5deg", pitch: "-0.1deg" },
            tooltip: "Image embedded in the scene"
          }
        ]
      }
    ]
  ];

  const handleClick = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <ReactPhotoSphereViewer
        ref={pSRef}
        src="Test_Pano.jpg"
        height={"100vh"}
        width={"100%"}
        littlePlanet={false}
        onClick={handleClick}
        onReady={handleReady}
        plugins={plugins}
      ></ReactPhotoSphereViewer>
    </div>
  );
}

export default App;

Try it on CSB