Add right click menu for multiple components

[AdRiley]

Pull Request Description

Closes #14587

• Adds right click menu for multiple components

• Adds submenus for alignment buttons

• Right click off components, de-selects and opens workflow menu

Important Notes

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

• The documentation has been updated, if necessary.
• Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
• All code follows the
  Scala,
  Java,
  TypeScript,
  and
  Rust
  style guides. In case you are using a language not listed above, follow the Rust style guide.
• Unit tests have been written where possible.
• If meaningful changes were made to logic or tests affecting Enso Cloud integration in the libraries,
  or the Snowflake database integration, a run of the Extra Tests has been scheduled.
  • If applicable, it is suggested to paste a link to a successful run of the Extra Tests.

[farmaazon]

Should be both menus opened by once anytime?

We usually handle such things using Interactions - an example in https://github.com/enso-org/enso/blob/develop/app/gui/src/project-view/components/DropdownMenu.vue#L28-36

[farmaazon]

It's not quite clear to me, when reading menuOpen may differ from reading menuOpenModel

[AdRiley]

I needed menuOpenModel for getting the hover v click functionality working properly. We can look if we can simplify this, but I struggled.

[kazcw]

I prefer to avoid this kind of logic in a computed's setter (conditionally setting, setting other values). It could be an independent function like trySetOpen, and then instead of v-model:open="menuOpenModel" the getter and setter can be provided separately like v-bind:open="menuOpen" @update:open="trySetOpen"

[kazcw]

Because this composable provides multiple properties to set on a component, and the relationship with the component will be the same everywhere the component is used, there's a pattern that might be applied here to simplify the API: The composable could expose an object containing all the properties that need to be connected to a dropdown menu, and then it could be used like <DropdownMenu v-bind="hoverMenuProps">. For example see

enso/app/gui/src/project-view/components/GraphEditor/GraphNode/nodeVisualization.ts

Line 104 in 76d99be

const visualization = computed((): ComponentProps<typeof GraphVisualization> => {

[kazcw]

DropdownMenu handles connecting a toggle button to a floating panel, and it seems like all of that same logic is needed here, is it possible to use that component to simplify this?

[farmaazon]

I guess this was something I complained about in #14640 (comment) :) for me it was too much of "generalizations" (especially :deep rules), and I prefered another component for "side menus". Of course they may share some logic.

[kazcw]

Oh I see! Yeah, if it's not applicable without substantial customization, it's not worth reusing it.