PopupUI

[Josh-Schifter]

I'm looking for advice on how to implement a popup UI to enable element editing. The popup will be launched when the user interacts with a manipulator, for example by right-click. As an analogy, consider the UI that appears in office apps when you right click on some text.

I'd like to start with a simple toolbar. Is one of these appropriate for my case? Can someone point me to some example code?

[GerardasB]

APIs like UiFramework.showToolbar or UiFramework.showCard use https://www.itwinjs.org/reference/appui-react/popup/popupmanager/#addorupdatepopup to show a custom component as a popup, i.e.:

appui/ui/appui-react/src/appui-react/popup/PopupManager.tsx

Line 342 in cad979a

PopupManager.addOrUpdatePopup(popupInfo);

To get a cursor position you could use: https://www.itwinjs.org/reference/appui-react/cursor/cursorinformation/cursorposition/

Here are a couple of related storybook stories:
https://itwin.github.io/appui/storybook/?path=/story/components-cardpopup--basic
https://itwin.github.io/appui/storybook/?path=/story/components-contextmenu--basic

Finally, to build your custom component you should use iTwinUI components https://itwinui.bentley.com/
Related issue in iTwinUI iTwin/iTwinUI#2157

[Josh-Schifter]

Please clarify your reply. Are you saying I should NOT use UiFramework.showToolbar and instead call PopupManager.addOrUpdatePopup directly? Or I should use cardpopup somehow?

Or are you saying I shouldn't use appUI at all, and instead use iTwinUI? I don't see anything like PopupManager in iTwinUI. The closest I can find is Popover, but that positions relative to an HTMLElement and I need mine to float on top of the canvas.

Some example code would be extremely helpful. The storybooks are nice but they don't explain how things fit together.

[GerardasB]

I propose using addOrUpdatePopup since the toolbar and card components are not what you are looking for. However, they can be positioned at a specific point on the screen, which is what you need.

Using an iTwinUI-only solution would be fine as well, but as you discovered, there is no good way to achieve the required positioning.

Therefore, you should use iTwinUI components to implement your menu component and render/position it on the screen via addOrUpdatePopup. I will provide some sample code at a later date.