How to use mouseEventsToCoords?

[sharaizk]

Hi, I need help regarding the usage of "mouseEventsToCoords". I want to get the pitch and yaw, where I have clicked the mouse.

[akramtouabet]

<Pannellum
  ref={panImage}
  width="100%"
  height="500px"
  image={myImage}
  pitch={10}
  yaw={180}
  hfov={110}
  autoLoad
  showZoomCtrl={false}
  onMouseup={(event) => {

    setPitch(
      panImage.current.getViewer().mouseEventToCoords(event)[0]
    );
    setYaw(panImage.current.getViewer().mouseEventToCoords(event)[1]);
  }}
/>

[masdimya]

hi @akramtouabet , have you try onMouseUp event before ? i tried but still cannot get the event and what is "panImage" ? is it an image url ?

[akramtouabet]

Hello @masdimya ,

panImage is the image url

I got it from this : https://codesandbox.io/s/1pco8

If you dont understand anything, i'll try to answer you faster this time :)

[masdimya]

Thanks @akramtouabet, but code in https://codesandbox.io/s/1pco8 use another pannellum wrapper (it used https://github.com/farminf/pannellum-react)

i have customize hoaiduyit/react-pannellum code with adding new props. https://github.com/masdimya/react-pannellum/blob/1deddc2b1d0eefbd076f85398224f6468b5f28da/src/components/ReactPannellum.jsx#L82-L85

Then i modified my package.json dependencies, so i can use without create PR

{
   "react-pannellum": "https://github.com/masdimya/react-pannellum#v0.2.14",
}

[hoaiduyit]

Hi @masdimya so I'll mark this as done, but you can create a PR to help others people facing this issue.

[masdimya]

@hoaiduyit here is #93