mistic100 / Photo-Sphere-Viewer

A JavaScript library to display 360° sphere panoramas.
https://photo-sphere-viewer.js.org
MIT License
1.8k stars 645 forks source link

Assign toolbar button functionality to custom buttons that appear outside the toolbar #1318

Closed tomviolin closed 2 weeks ago

tomviolin commented 1 month ago

Describe your problem

I would like to have two large arrow-like icons (that I have already placed on top of the panorama viewer via absolute positioning and z-index) to behave exactly like the left and right arrow icons in the toolbar. See attached screenshot for example. The user base feedback I have received vastly prefers the very obvious large icons to having to notice the relatively small toolbar and arrow icons within. The way that the existing arrows in the toolbar behave is exactly how I want these large arrows to behave. I tried poking around the DOM to try and accomplish this but it is far from obvious if this is even something that can be done easily.

FYI: All the panoramas I am working with for this project only will be scrolled left and right; they are not full spheres, so similar up and down arrow overlay icons will not be needed in the short term.

Screenshot from 2024-05-28 10-17-43

Online demo URL

No response

Photo Sphere Viewer version

5.7.4

Plugins loaded

visible-range, markers, autorotate

Additional context

No response

mistic100 commented 1 month ago

This is the source code of the move buttons https://github.com/mistic100/Photo-Sphere-Viewer/blob/main/packages/core/src/buttons/AbstractMoveButton.ts

you can replicate the behaviour in your app, every API is public, even the PressHandler helper is exposed in utils (it is missing in the doc but it is there)

github-actions[bot] commented 3 weeks ago

This issue has been automatically marked as stale because not enough information was provided. It will be closed if no further activity occurs.