Context Menu Example

This example demonstrates how to implement a context menu that adapts its options based on the context—showing node-specific actions when a node is right-clicked, and diagram-wide actions otherwise.

1
import '@angular/compiler';
2
import { Component } from '@angular/core';
3
import { NgDiagramModelService, provideNgDiagram } from 'ng-diagram';
4
import { DiagramComponent } from './diagram.component';
5
import { ContextMenuService } from './menu/menu.service';
6

7
@Component({
8
  imports: [DiagramComponent],
9
  template: `<context-menu-example></context-menu-example> `,
10
  styles: [
11
    `
12
      :host {
13
        display: flex;
14
        position: relative;
15
      }
16
    `,
17
  ],
18
  providers: [ContextMenuService, NgDiagramModelService, provideNgDiagram()],
19
})
20
export class DiagramWrapperComponent {}

1
import '@angular/compiler';
2
import { Component, inject } from '@angular/core';
3
import {
4
  initializeModel,
5
  NgDiagramBackgroundComponent,
6
  NgDiagramComponent,
7
  NgDiagramNodeTemplateMap,
8
  NgDiagramViewportService,
9
  type NgDiagramConfig,
10
} from 'ng-diagram';
11
import { MenuComponent } from './menu/menu.component';
12
import { ContextMenuService } from './menu/menu.service';
13
import { NodeComponent } from './node/node.component';
14

15
@Component({
16
  selector: 'context-menu-example',
17
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent, MenuComponent],
18
  template: `
19
    <div (contextmenu)="onDiagramRightClick($event)">
20
      <div class="not-content diagram">
21
        <ng-diagram
22
          [model]="model"
23
          [config]="config"
24
          [nodeTemplateMap]="nodeTemplateMap"
25
        >
26
          <ng-diagram-background />
27
        </ng-diagram>
28
      </div>
29
      <menu></menu>
30
    </div>
31
  `,
32
  styleUrl: './diagram.component.scss',
33
  providers: [ContextMenuService, NgDiagramViewportService],
34
})
35
export class DiagramComponent {
36
  private contextMenuService = inject(ContextMenuService);
37
  private readonly viewportService = inject(NgDiagramViewportService);
38

39
  nodeTemplateMap = new NgDiagramNodeTemplateMap([
40
    ['customNodeType', NodeComponent],
41
  ]);
42

43
  config = {
44
    zoom: {
45
      max: 3,
46
      zoomToFit: {
47
        onInit: true,
48
        padding: [200, 180],
49
      },
50
    },
51
  } satisfies NgDiagramConfig;
52

53
  model = initializeModel({
54
    nodes: [
55
      {
56
        id: '1',
57
        position: { x: 0, y: 0 },
58
        type: 'customNodeType',
59
        data: {
60
          name: 'Custom Node',
61
        },
62
      },
63
    ],
64
  });
65

66
  onDiagramRightClick(event: MouseEvent) {
67
    event.preventDefault();
68
    event.stopPropagation();
69

70
    const cursorPosition = this.viewportService.clientToFlowViewportPosition({
71
      x: event.clientX,
72
      y: event.clientY,
73
    });
74
    this.contextMenuService.showDiagramMenu(cursorPosition);
75
  }
76
}

1
import { Component, HostListener, inject } from '@angular/core';
2
import {
3
  NgDiagramClipboardService,
4
  NgDiagramModelService,
5
  NgDiagramSelectionService,
6
  NgDiagramViewportService,
7
} from 'ng-diagram';
8
import { ContextMenuService } from './menu.service';
9

10
@Component({
11
  selector: 'menu',
12
  templateUrl: './menu.component.html',
13
  styleUrls: ['./menu.component.scss'],
14
})
15
export class MenuComponent {
16
  private contextMenuService = inject(ContextMenuService);
17
  private readonly modelService = inject(NgDiagramModelService);
18
  private readonly clipboardService = inject(NgDiagramClipboardService);
19
  private readonly selectionService = inject(NgDiagramSelectionService);
20
  private readonly viewportService = inject(NgDiagramViewportService);
21

22
  showMenu = this.contextMenuService.visibility;
23
  menuPosition = this.contextMenuService.menuPosition;
24
  nodeContext = this.contextMenuService.nodeContext;
25

26
  @HostListener('document:click')
27
  closeMenu() {
28
    this.contextMenuService.hideMenu();
29
  }
30

31
  onCopy() {
32
    this.clipboardService.copy();
33
  }
34

35
  onPaste(event: MouseEvent) {
36
    const position = this.viewportService.clientToFlowPosition({
37
      x: event.clientX,
38
      y: event.clientY,
39
    });
40
    this.clipboardService.paste(position);
41
  }
42

43
  onDelete() {
44
    this.selectionService.deleteSelection();
45
  }
46

47
  onSelectAll() {
48
    const allNodesIds = this.modelService
49
      .getModel()
50
      .getNodes()
51
      .map((node) => node.id);
52
    this.selectionService.select(allNodesIds);
53
  }
54
}

1
import { Injectable, signal } from '@angular/core';
2
import type { Point } from 'ng-diagram';
3

4
@Injectable()
5
export class ContextMenuService {
6
  readonly visibility = signal(false);
7
  readonly menuPosition = signal({ x: 0, y: 0 });
8
  readonly nodeContext = signal(false);
9

10
  showMenu({ x, y }: Point): void {
11
    this.nodeContext.set(true);
12
    this.menuPosition.set({ x, y });
13
    this.visibility.set(true);
14
  }
15

16
  showDiagramMenu({ x, y }: Point): void {
17
    this.nodeContext.set(false);
18
    this.menuPosition.set({ x, y });
19
    this.visibility.set(true);
20
  }
21

22
  hideMenu(): void {
23
    this.visibility.set(false);
24
  }
25
}

1
import { Component, inject, input, model } from '@angular/core';
2
import {
3
  NgDiagramNodeSelectedDirective,
4
  NgDiagramPortComponent,
5
  NgDiagramSelectionService,
6
  NgDiagramViewportService,
7
  type NgDiagramNodeTemplate,
8
  type Node,
9
} from 'ng-diagram';
10
import { ContextMenuService } from '../menu/menu.service';
11

12
@Component({
13
  imports: [NgDiagramPortComponent],
14
  templateUrl: './node.component.html',
15
  styleUrls: ['./node.component.scss'],
16
  hostDirectives: [
17
    { directive: NgDiagramNodeSelectedDirective, inputs: ['node'] },
18
  ],
19
})
20
export class NodeComponent implements NgDiagramNodeTemplate<{ name: string }> {
21
  private readonly contextMenuService = inject(ContextMenuService);
22
  private readonly viewportService = inject(NgDiagramViewportService);
23
  private readonly selectionService = inject(NgDiagramSelectionService);
24

25
  text = model<string>('');
26
  node = input.required<Node<{ name: string }>>();
27

28
  onRightClick(event: MouseEvent) {
29
    event.preventDefault();
30
    event.stopPropagation();
31

32
    if (this.node()) {
33
      // Additionally selects the node on right click
34
      const selectedNodes = this.selectionService.selection().nodes;
35
      if (!selectedNodes.some((n) => n.id === this.node().id)) {
36
        this.selectionService.select([this.node().id]);
37
      }
38

39
      const cursorPosition = this.viewportService.clientToFlowViewportPosition({
40
        x: event.clientX,
41
        y: event.clientY,
42
      });
43
      this.contextMenuService.showMenu(cursorPosition);
44
    }
45
  }
46
}

1
<div
2
  #menu
3
  class="menu"
4
  [style.top.px]="menuPosition().y"
5
  [style.left.px]="menuPosition().x"
6
  [class.show]="showMenu()"
7
>
8
  <ul>
9
    @if (nodeContext()) {
10
      <li (click)="onCopy()">Copy</li>
11
      <li (click)="onDelete()">Delete</li>
12
    } @else {
13
      <li (click)="onSelectAll()">Select All</li>
14
      <li (click)="onPaste($event)">Paste</li>
15
    }
16
  </ul>
17
</div>

1
<div class="node" (contextmenu)="onRightClick($event)">
2
  <div class="node-header">
3
    <span>{{ node().data.name }}</span>
4
  </div>
5
  <div class="node-body">
6
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
7
  </div>
8
</div>

1
:host {
2
  width: 100%;
3
  height: 100%;
4
}
5

6
.diagram {
7
  display: flex;
8
  height: var(--ng-diagram-height);
9
  border: var(--ng-diagram-border);
10
}

1
.menu {
2
  position: absolute;
3
  display: none;
4
  background-color: var(--ngd-node-bg-primary-default);
5
  border: 1px solid var(--ngd-node-stroke-primary-default);
6
  z-index: 1000;
7
  min-width: 120px;
8
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
9
}
10
.menu.show {
11
  display: block;
12
}
13
.menu ul {
14
  list-style: none;
15
  margin: 0;
16
  padding: 0;
17
}
18
.menu li {
19
  padding: 8px 16px;
20
  cursor: pointer;
21
}
22
.menu li:hover {
23
  background-color: var(--ngd-node-stroke-primary-hover);
24
}
25
.menu li.disabled {
26
  color: #aaa;
27
  pointer-events: none;
28
}
29
.content {
30
  padding: 40px;
31
  border: 1px solid var(--ngd-node-stroke-secondary-default);
32
  margin: 20px;
33
  user-select: text;
34
}

1
:host {
2
  display: flex;
3
  width: 100%;
4
  height: 100%;
5
  background-color: white;
6
  border-radius: 4px;
7
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
8

9
  .node {
10
    display: flex;
11
    flex-direction: column;
12
    padding: 4px 8px;
13
    border: 1px solid var(--ngd-node-stroke-primary-default);
14
    border-radius: 4px;
15
    background-color: var(--ngd-node-bg-primary-default);
16

17
    &-body {
18
      font-size: 12px;
19
    }
20
  }
21
}

Additional Explanation

Context Awareness: Menu options change depending on whether a node or the diagram background is right-clicked.
Positioning: The menu appears at the exact cursor location using viewport coordinates.
Integration: Uses Angular signals and services for reactive state management.

Key Concepts

Node Right-Click Handling:
Nodes handle right-click events to show the context menu and select the node.
Diagram Right-Click Handling:
Right-clicking the diagram background shows the diagram-wide menu.
Menu Positioning:
The menu position is calculated using viewport coordinates.
Context Menu Service:
The service manages the menu’s visibility, position, and context (node or diagram).
Menu Component:
The menu component displays options based on the context and stores information about menu positioning.

Actions

Copy: Copies the selected node(s) to the clipboard.
Paste: Pastes copied nodes at the cursor position.
Delete: Removes the selected node(s).
Select All: Selects all nodes in the diagram.