AF-303 Investigate and propose what events should be available in ng-diagram and implement those

apps/angular-demo/src/app/app.component.html

@@ -7,8 +7,14 @@
     (diagramInit)="onDiagramInit($event)"
     (selectionChanged)="onSelectionChanged($event)"
     (selectionMoved)="onSelectionMoved($event)"
+    (groupMembershipChanged)="onGroupMembershipChanged($event)"
+    (selectionRotated)="onSelectionRotated($event)"
     (viewportChanged)="onViewportChanged($event)"
     (edgeDrawn)="onEdgeDrawn($event)"
+    (clipboardPasted)="onClipboardPasted($event)"
+    (nodeResized)="onNodeResized($event)"
+    (paletteItemDropped)="onPaletteItemDropped($event)"
+    (selectionRemoved)="onSelectionRemoved($event)"
   >
     <ng-diagram-background></ng-diagram-background>
   </ng-diagram>

apps/angular-demo/src/app/app.component.ts

@@ -1,18 +1,28 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
+  ClipboardPastedEvent,
   DiagramInitEvent,
   EdgeDrawnEvent,
+  GroupMembershipChangedEvent,
   initializeModel,
   NgDiagramBackgroundComponent,
   NgDiagramComponent,
   NgDiagramConfig,
   NgDiagramEdgeTemplateMap,
   NgDiagramNodeTemplateMap,
   NgDiagramPaletteItem,
+  NodeResizedEvent,
+  PaletteItemDroppedEvent,
   provideNgDiagram,
   SelectionChangedEvent,
   SelectionMovedEvent,
+  SelectionRemovedEvent,
+  SelectionRotatedEvent,
   ViewportChangedEvent,
+  type Edge,
+  type EdgeLabel,
+  type Node,
+  type Port,
 } from 'ng-diagram';
 import { nodeTemplateMap } from './data/node-template';
 import { paletteModel } from './data/palette-model';
@@ -58,18 +68,18 @@ export class AppComponent {
 
   onDiagramInit(event: DiagramInitEvent): void {
     console.log('INIT');
-    event.nodes.forEach((node) => {
+    event.nodes.forEach((node: Node) => {
       console.log(`${node.size?.width} ${node.size?.height}`);
       if (node.measuredPorts) {
-        node.measuredPorts.forEach((port) =>
+        node.measuredPorts.forEach((port: Port) =>
           console.log(`${port.size?.width} ${port.size?.height} ${port.position?.x} ${port.position?.y}`)
         );
       }
     });
 
-    event.edges.forEach((edge) => {
+    event.edges.forEach((edge: Edge) => {
       if (edge.measuredLabels) {
-        edge.measuredLabels.forEach((label) => {
+        edge.measuredLabels.forEach((label: EdgeLabel) => {
           console.log(`${label.size?.width} ${label.size?.height} ${label.position?.x} ${label.position?.y}`);
         });
       }
@@ -78,16 +88,16 @@ export class AppComponent {
 
   onSelectionChanged(event: SelectionChangedEvent): void {
     console.log('Selection Changed:', {
-      nodes: event.selectedNodes.map((n) => n.id),
-      edges: event.selectedEdges.map((e) => e.id),
-      previousNodes: event.previousNodes.map((n) => n.id),
-      previousEdges: event.previousEdges.map((e) => e.id),
+      nodes: event.selectedNodes.map((n: Node) => n.id),
+      edges: event.selectedEdges.map((e: Edge) => e.id),
+      previousNodes: event.previousNodes.map((n: Node) => n.id),
+      previousEdges: event.previousEdges.map((e: Edge) => e.id),
     });
   }
 
   onSelectionMoved(event: SelectionMovedEvent): void {
     console.log('Selection Moved:', {
-      nodes: event.nodes.map((n) => n.id),
+      nodes: event.nodes.map((n: Node) => n.id),
     });
   }
 
@@ -108,6 +118,62 @@ export class AppComponent {
     });
   }
 
+  onClipboardPasted(event: ClipboardPastedEvent): void {
+    console.log('Clipboard Pasted:', {
+      nodes: event.nodes.map((n: Node) => n.id),
+      edges: event.edges.map((e: Edge) => e.id),
+    });
+  }
+
+  onNodeResized(event: NodeResizedEvent): void {
+    console.log('Size Changed:', {
+      node: {
+        id: event.node.id,
+        size: event.node.size,
+        previousSize: event.previousSize,
+      },
+    });
+  }
+
+  onPaletteItemDropped(event: PaletteItemDroppedEvent): void {
+    console.log('Palette Item Dropped:', {
+      node: event.node.id,
+      dropPosition: event.dropPosition,
+    });
+  }
+
+  onSelectionRemoved(event: SelectionRemovedEvent): void {
+    console.log('Selection Removed:', {
+      nodes: event.deletedNodes.map((n: Node) => n.id),
+      edges: event.deletedEdges.map((e: Edge) => e.id),
+    });
+  }
+
+  onGroupMembershipChanged(event: GroupMembershipChangedEvent): void {
+    if (event.grouped.length > 0) {
+      event.grouped.forEach((operation) => {
+        console.log('Nodes Grouped:', {
+          groupedNodes: operation.nodes.map((n: Node) => n.id),
+          targetGroup: operation.targetGroup.id,
+        });
+      });
+    }
+
+    if (event.ungrouped.length > 0) {
+      console.log('Nodes Ungrouped:', {
+        ungroupedNodes: event.ungrouped.map((n: Node) => n.id),
+      });
+    }
+  }
+
+  onSelectionRotated(event: SelectionRotatedEvent): void {
+    console.log('Selection Rotated:', {
+      nodeId: event.node.id,
+      angle: event.angle,
+      previousAngle: event.previousAngle,
+    });
+  }
+
   model = initializeModel({
     nodes: [
       {

apps/docs/src/content/docs/api/Components/NgDiagramComponent.md

@@ -14,6 +14,17 @@ Diagram component
 
 ## Properties
 
+### clipboardPasted
+
+> **clipboardPasted**: `EventEmitter`\<[`ClipboardPastedEvent`](/docs/api/types/clipboardpastedevent/)\>
+
+Event emitted when clipboard content is pasted into the diagram.
+
+This event fires when nodes and edges are added via paste operations,
+either through keyboard shortcuts or programmatic paste commands.
+
+***
+
 ### config
 
 > **config**: `InputSignal`\<`undefined` \| `DeepPartial`\<[`FlowConfig`](/docs/api/types/flowconfig/)\>\>
@@ -26,15 +37,21 @@ Global configuration options for the diagram.
 
 > **diagramInit**: `EventEmitter`\<[`DiagramInitEvent`](/docs/api/types/diagraminitevent/)\>
 
-Event emitted when the diagram is initialized and all nodes and edges including their internal parts are measured
+Event emitted when the diagram initialization is complete.
+
+This event fires after all nodes and edges including their internal parts
+(ports, labels) have been measured and positioned.
 
 ***
 
 ### edgeDrawn
 
 > **edgeDrawn**: `EventEmitter`\<[`EdgeDrawnEvent`](/docs/api/types/edgedrawnevent/)\>
 
-Event emitted when a user manually draws an edge between two nodes
+Event emitted when a user manually draws an edge between two nodes.
+
+This event only fires for user-initiated edge creation through the UI,
+but not for programmatically added edges.
 
 ***
 
@@ -47,6 +64,17 @@ Optional - if not provided, default edge rendering will be used.
 
 ***
 
+### groupMembershipChanged
+
+> **groupMembershipChanged**: `EventEmitter`\<[`GroupMembershipChangedEvent`](/docs/api/types/groupmembershipchangedevent/)\>
+
+Event emitted when nodes are grouped or ungrouped.
+
+This event fires when the user moves nodes in or out of a group node,
+changing their group membership status.
+
+***
+
 ### middlewares
 
 > **middlewares**: `InputSignal`\<[`MiddlewareChain`](/docs/api/types/middlewarechain/)\>
@@ -68,6 +96,17 @@ The model to use in the diagram.
 
 ***
 
+### nodeResized
+
+> **nodeResized**: `EventEmitter`\<[`NodeResizedEvent`](/docs/api/types/noderesizedevent/)\>
+
+Event emitted when a node or group size changes.
+
+This event fires when a node is resized manually by dragging resize handles
+or programmatically using resize methods.
+
+***
+
 ### nodeTemplateMap
 
 > **nodeTemplateMap**: `InputSignal`\<[`NgDiagramNodeTemplateMap`](/docs/api/types/ngdiagramnodetemplatemap/)\>
@@ -76,27 +115,69 @@ The node template map to use for the diagram.
 
 ***
 
+### paletteItemDropped
+
+> **paletteItemDropped**: `EventEmitter`\<[`PaletteItemDroppedEvent`](/docs/api/types/paletteitemdroppedevent/)\>
+
+Event emitted when a palette item is dropped onto the diagram.
+
+This event fires when users drag items from the palette and drop them
+onto the canvas to create new nodes.
+
+***
+
 ### selectionChanged
 
 > **selectionChanged**: `EventEmitter`\<[`SelectionChangedEvent`](/docs/api/types/selectionchangedevent/)\>
 
-Event emitted when selection changes
+Event emitted when the selection state changes in the diagram.
+
+This event fires when the user selects or deselects nodes and edges through
+clicking or programmatically using the `NgDiagramSelectionService`.
 
 ***
 
 ### selectionMoved
 
 > **selectionMoved**: `EventEmitter`\<[`SelectionMovedEvent`](/docs/api/types/selectionmovedevent/)\>
 
-Event emitted when selected nodes are moved
+Event emitted when selected nodes are moved within the diagram.
+
+This event fires when the user moves nodes manually by dragging or
+programmatically using the `NgDiagramNodeService.moveNodesBy()` method.
+
+***
+
+### selectionRemoved
+
+> **selectionRemoved**: `EventEmitter`\<[`SelectionRemovedEvent`](/docs/api/types/selectionremovedevent/)\>
+
+Event emitted when selected elements are deleted from the diagram.
+
+This event fires when the user deletes nodes and edges using the delete key,
+or programmatically through the diagram service.
+
+***
+
+### selectionRotated
+
+> **selectionRotated**: `EventEmitter`\<[`SelectionRotatedEvent`](/docs/api/types/selectionrotatedevent/)\>
+
+Event emitted when a node is rotated in the diagram.
+
+This event fires when the user rotates a node manually using the rotation handle
+or programmatically using the `NgDiagramNodeService` rotation methods.
 
 ***
 
 ### viewportChanged
 
 > **viewportChanged**: `EventEmitter`\<[`ViewportChangedEvent`](/docs/api/types/viewportchangedevent/)\>
 
-Event emitted when viewport changes (pan/zoom)
+Event emitted when the viewport changes through panning or zooming.
+
+This event fires during pan and zoom operations, including mouse wheel zoom,
+and programmatic viewport changes.
 
 ## Methods
 

apps/docs/src/content/docs/api/Types/ClipboardPastedEvent.md

@@ -0,0 +1,27 @@
+---
+editUrl: false
+next: false
+prev: false
+title: "ClipboardPastedEvent"
+---
+
+Event payload emitted when clipboard content is pasted into the diagram.
+
+This event fires when nodes and edges are added via paste operations,
+either through keyboard shortcuts or programmatic paste commands.
+
+## Properties
+
+### edges
+
+> **edges**: [`Edge`](/docs/api/types/edge/)\<`object`\>[]
+
+Edges that were pasted into the diagram
+
+***
+
+### nodes
+
+> **nodes**: [`Node`](/docs/api/types/node/)[]
+
+Nodes that were pasted into the diagram