Merge pull request #88 from easyops-cn/steve/fix-context-menu

fix(): stop context menu event propagation from cell

Author: gdutzhendong

bricks/diagram/src/draw-canvas/CellComponent.tsx

@@ -266,6 +266,7 @@ export function CellComponent({
         return;
       }
       event.preventDefault();
+      event.stopPropagation();
       onSwitchActiveTarget(cellToTarget(cell));
       onCellContextMenu({
         cell,

bricks/diagram/src/draw-canvas/index.spec.tsx

@@ -876,7 +876,28 @@ describe("eo-draw-canvas", () => {
       locked: false,
     });
 
-    expect(onCanvasContextMenu).toHaveBeenCalled();
+    // Context-menu event propagation is stopped.
+    expect(onCanvasContextMenu).not.toHaveBeenCalled();
+
+    act(() => {
+      fireEvent.contextMenu(element.shadowRoot!.querySelector("svg")!, {
+        clientX: 100,
+        clientY: 200,
+      });
+    });
+
+    expect(onCanvasContextMenu).toBeCalledWith({
+      clientX: 100,
+      clientY: 200,
+      view: {
+        x: 100,
+        y: 200,
+      },
+    });
+
+    // Active target is reset to null when right-click the canvas space area.
+    await act(() => new Promise((resolve) => setTimeout(resolve, 1)));
+    expect(onActiveTargetChange).toHaveBeenCalledWith(null);
 
     act(() => {
       document.body.removeChild(element);

bricks/diagram/src/draw-canvas/index.tsx

@@ -1384,8 +1384,9 @@ function LegacyEoDrawCanvasComponent(
     (event: React.MouseEvent<SVGElement>) => {
       event.preventDefault();
       onCanvasContextMenu([event.clientX, event.clientY]);
+      onSwitchActiveTarget?.(null);
     },
-    [onCanvasContextMenu]
+    [onCanvasContextMenu, onSwitchActiveTarget]
   );
   useEffect(() => {
     const root = rootRef.current;