feat: show context menu for connections

core/rendered_connection.ts

@@ -18,18 +18,22 @@ import {config} from './config.js';
 import {Connection} from './connection.js';
 import type {ConnectionDB} from './connection_db.js';
 import {ConnectionType} from './connection_type.js';
+import * as ContextMenu from './contextmenu.js';
+import {ContextMenuRegistry} from './contextmenu_registry.js';
 import * as eventUtils from './events/utils.js';
+import {IContextMenu} from './interfaces/i_contextmenu.js';
 import {hasBubble} from './interfaces/i_has_bubble.js';
 import * as internalConstants from './internal_constants.js';
 import {Coordinate} from './utils/coordinate.js';
+import * as svgMath from './utils/svg_math.js';
 
 /** Maximum randomness in workspace units for bumping a block. */
 const BUMP_RANDOMNESS = 10;
 
 /**
  * Class for a connection between blocks that may be rendered on screen.
  */
-export class RenderedConnection extends Connection {
+export class RenderedConnection extends Connection implements IContextMenu {
   // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
   sourceBlock_!: BlockSvg;
   private readonly db: ConnectionDB;
@@ -588,6 +592,40 @@ export class RenderedConnection extends Connection {
     this.sourceBlock_.queueRender();
     return this;
   }
+
+  /**
+   * Handles showing the context menu when it is opened on a connection.
+   * Note that typically the context menu can't be opened with the mouse
+   * on a connection, because you can't select a connection. But keyboard
+   * users may open the context menu with a keyboard shortcut.
+   *
+   * @param e Event that triggered the opening of the context menu.
+   */
+  showContextMenu(e: Event): void {
+    const menuOptions = ContextMenuRegistry.registry.getContextMenuOptions(
+      {focusedNode: this},
+      e,
+    );
+
+    if (!menuOptions.length) return;
+
+    const block = this.getSourceBlock();
+    const workspace = block.workspace;
+
+    let location;
+    if (e instanceof PointerEvent) {
+      location = new Coordinate(e.clientX, e.clientY);
+    } else {
+      const connectionWSCoords = new Coordinate(this.x, this.y);
+      const connectionScreenCoords = svgMath.wsToScreenCoordinates(
+        workspace,
+        connectionWSCoords,
+      );
+      location = connectionScreenCoords.translate(block.RTL ? -5 : 5, 5);
+    }
+
+    ContextMenu.show(e, menuOptions, block.RTL, workspace, location);
+  }
 }
 
 export namespace RenderedConnection {