Callback for context menu #1122

vallsv · 2022-05-19T10:05:06Z

Hi,

I think it would be good to reserve the right mouse click to context menu.

There is a need of global action on the plot (for example managing an application specific pan/zoom history), or specific to plot objects, like ROIs.

Is there a way right now to bind the right mouse click, and provide a specific context menu (and getting ride of the default one provided by the browser) ; and own to do so?
Could it be possible to think about an high level API for such use case? I can redirect to PyQtGraph examples. But this could be easier, i can't tell.

It's not urgent feature (because we will always find other solutions), but such API could be really helpful for developers and users.

The text was updated successfully, but these errors were encountered:

axelboc · 2022-05-24T13:36:40Z

I'm not sure we can provide an API that is simpler than what the browser and R3F already provide, namely the onContextMenu event handler. For instance, to replace the browser's default context menu when right-clicking on a ROI implemented as an SVG rect element, you can already do the following:

<Html>
  <rect 
    // ...
    onContextMenu={(evt) => {
      /* Tell the browser not to show the default context menu.
       * (You may want to consider preventing the default action only when a modifier key is pressed, 
       * or the contrary: allowing the default action when a modifier key is pressed, like on YouTube.) */
      evt.preventDefault();
     
      /* Then set the position of the new context menu tooltip in a local state.
       * Below is an example with @visx/tooltip, but you could use another tooltip/context menu implementation. */
      showTooltip({ tooltipLeft: evt.offsetX, tooltipTop: evt.offsetY });
    }}
</Html>
/>

You can also pass the onContextMenu handler to an R3F mesh, to show a custom context menu on a specific part of the plot. For instance:

<HeatmapMesh
  // ...
  onContextMenu={...}
/>

For global actions on the canvas, you can use @react-hookz/web's useEventListener hook (or similar):

const { domElement } = useThree((state) => state.gl);
useEventListener(domElement, 'contextmenu', handleContextMenu);

All that being said, when it comes to UX, you should consider using the floating toolbar instead of context menus, as it would make your actions more discoverable: https://h5web-docs.panosc.eu/?path=/story/toolbar-floatingtoolbar--default. The floating toolbar can even be used for contextual actions: you can show/enable floating controls based on what the user is currently doing - e.g. show a "delete" button when the user selects a ROI.

vallsv · 2022-05-25T09:06:33Z

I am mostly talking about an high level API aggregations context menu options from different level of depth.

Example

The plot will provide an option to go back to previous zoom
A ROI will provide an option to delete/align/what event

If the mouse is over this 2 items at the same time, all this options will be exposed. That's what is provided by pyqtgraph.

If an onContextMenu callback is already provided by the plot, it's basic API, but i can do something with. If the ROIs do not provide the exact same API, it's not very nice. I have to handle that complexity, and it's not very nice.

I will not talk about user experience. The most import thing for me is to have flexibility, and to be able to provide features at low cost.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Callback for context menu #1122

Callback for context menu #1122

vallsv commented May 19, 2022

axelboc commented May 24, 2022 •

edited

vallsv commented May 25, 2022

Callback for context menu #1122

Callback for context menu #1122

Comments

vallsv commented May 19, 2022

axelboc commented May 24, 2022 • edited

vallsv commented May 25, 2022

axelboc commented May 24, 2022 •

edited