Context menu improvements (#11755)

Context menu improvements:

- Activate component context menu only for clicks on component widget area (fixes #11745).
- In a table-editor widget, if AG Grid opens a context menu, don't open the component menu.
- Enable the AG Grid context menu on OS X.

CHANGELOG.md

@@ -45,6 +45,8 @@
 - [Pasting tabular data now creates Table.input expressions][11695].
 - [No halo is displayed around components when hovering][11715].
 - [The hover area of the component output port extended twice its size][11715].
+- [In the table visualization and table widget, the table context menu can now
+  be opened on OS X][11755].
 - [Fix some UI elements drawing on top of visualization toolbar dropdown
   menus][11768].
 

app/gui/src/project-view/components/GraphEditor/GraphNode.vue

@@ -499,7 +499,6 @@ const showMenuAt = ref<{ x: number; y: number }>()
     @pointerenter="(nodeHovered = true), updateNodeHover($event)"
     @pointerleave="(nodeHovered = false), updateNodeHover(undefined)"
     @pointermove="updateNodeHover"
-    @contextmenu.stop.prevent="ensureSelected(), (showMenuAt = $event)"
   >
     <div class="binding" v-text="node.pattern?.code()" />
     <button
@@ -552,6 +551,7 @@ const showMenuAt = ref<{ x: number; y: number }>()
       :style="contentNodeStyle"
       v-on="dragPointer.events"
       @click="handleNodeClick"
+      @contextmenu.stop.prevent="ensureSelected(), (showMenuAt = $event)"
     >
       <NodeWidgetTree
         :ast="props.node.innerExpr"

app/gui/src/project-view/components/shared/AgGridTableView.vue

@@ -296,6 +296,11 @@ if (typeof import.meta.env.ENSO_IDE_AG_GRID_LICENSE_KEY !== 'string') {
   LicenseManager.setLicenseKey(agGridLicenseKey)
 }
 
+function stopIfPrevented(event: Event) {
+  // When AG Grid handles the context menu event it prevents-default, but it doesn't stop propagation.
+  if (event.defaultPrevented) event.stopPropagation()
+}
+
 const { AgGridVue } = await import('ag-grid-vue3')
 </script>
 
@@ -322,6 +327,7 @@ const { AgGridVue } = await import('ag-grid-vue3')
       :suppressDragLeaveHidesColumns="suppressDragLeaveHidesColumns"
       :suppressMoveWhenColumnDragging="suppressMoveWhenColumnDragging"
       :processDataFromClipboard="processDataFromClipboard"
+      :allowContextMenuWithControlKey="true"
       @gridReady="onGridReady"
       @firstDataRendered="updateColumnWidths"
       @rowDataUpdated="updateColumnWidths($event), emit('rowDataUpdated', $event)"
@@ -332,6 +338,7 @@ const { AgGridVue } = await import('ag-grid-vue3')
       @rowEditingStopped="emit('rowEditingStopped', $event)"
       @sortChanged="emit('sortOrFilterUpdated', $event)"
       @filterChanged="emit('sortOrFilterUpdated', $event)"
+      @contextmenu="stopIfPrevented"
     />
   </div>
 </template>