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)"
+    (selectionGrouped)="onSelectionGrouped($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,5 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
+  ClipboardPastedEvent,
   DiagramInitEvent,
   EdgeDrawnEvent,
   initializeModel,
@@ -9,10 +10,19 @@ import {
   NgDiagramEdgeTemplateMap,
   NgDiagramNodeTemplateMap,
   NgDiagramPaletteItem,
+  NodeResizedEvent,
+  PaletteItemDroppedEvent,
   provideNgDiagram,
   SelectionChangedEvent,
+  SelectionGroupedEvent,
   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,52 @@ 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),
+    });
+  }
+
+  onSelectionGrouped(event: SelectionGroupedEvent): void {
+    console.log('Selection Grouped:', {
+      groupedNodes: event.groupedNodes.map((n: Node) => n.id),
+      targetGroup: event.targetGroup.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,14 @@ Diagram component
 
 ## Properties
 
+### clipboardPasted
+
+> **clipboardPasted**: `EventEmitter`\<[`ClipboardPastedEvent`](/docs/api/types/clipboardpastedevent/)\>
+
+Event emitted when clipboard content is pasted
+
+***
+
 ### config
 
 > **config**: `InputSignal`\<`undefined` \| `DeepPartial`\<[`FlowConfig`](/docs/api/types/flowconfig/)\>\>
@@ -68,6 +76,14 @@ The model to use in the diagram.
 
 ***
 
+### nodeResized
+
+> **nodeResized**: `EventEmitter`\<[`NodeResizedEvent`](/docs/api/types/noderesizedevent/)\>
+
+Event emitted when node or group size changes
+
+***
+
 ### nodeTemplateMap
 
 > **nodeTemplateMap**: `InputSignal`\<[`NgDiagramNodeTemplateMap`](/docs/api/types/ngdiagramnodetemplatemap/)\>
@@ -76,6 +92,14 @@ 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 into the diagram
+
+***
+
 ### selectionChanged
 
 > **selectionChanged**: `EventEmitter`\<[`SelectionChangedEvent`](/docs/api/types/selectionchangedevent/)\>
@@ -84,6 +108,14 @@ Event emitted when selection changes
 
 ***
 
+### selectionGrouped
+
+> **selectionGrouped**: `EventEmitter`\<[`SelectionGroupedEvent`](/docs/api/types/selectiongroupedevent/)\>
+
+Event emitted when nodes are grouped into a group
+
+***
+
 ### selectionMoved
 
 > **selectionMoved**: `EventEmitter`\<[`SelectionMovedEvent`](/docs/api/types/selectionmovedevent/)\>
@@ -92,6 +124,22 @@ Event emitted when selected nodes are moved
 
 ***
 
+### selectionRemoved
+
+> **selectionRemoved**: `EventEmitter`\<[`SelectionRemovedEvent`](/docs/api/types/selectionremovedevent/)\>
+
+Event emitted when selected elements are deleted from the diagram
+
+***
+
+### selectionRotated
+
+> **selectionRotated**: `EventEmitter`\<[`SelectionRotatedEvent`](/docs/api/types/selectionrotatedevent/)\>
+
+Event emitted when a node is rotated
+
+***
+
 ### viewportChanged
 
 > **viewportChanged**: `EventEmitter`\<[`ViewportChangedEvent`](/docs/api/types/viewportchangedevent/)\>

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

@@ -0,0 +1,25 @@
+---
+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
+
+## 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

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

@@ -9,6 +9,14 @@ Map of all available diagram events and their payload types
 
 ## Properties
 
+### clipboardPasted
+
+> **clipboardPasted**: [`ClipboardPastedEvent`](/docs/api/types/clipboardpastedevent/)
+
+Event emitted when clipboard content is pasted
+
+***
+
 ### diagramInit
 
 > **diagramInit**: [`DiagramInitEvent`](/docs/api/types/diagraminitevent/)
@@ -25,6 +33,22 @@ Event emitted when an edge is drawn
 
 ***
 
+### nodeResized
+
+> **nodeResized**: [`NodeResizedEvent`](/docs/api/types/noderesizedevent/)
+
+Event emitted when node or group size changes
+
+***
+
+### paletteItemDropped
+
+> **paletteItemDropped**: [`PaletteItemDroppedEvent`](/docs/api/types/paletteitemdroppedevent/)
+
+Event emitted when a palette item is dropped
+
+***
+
 ### selectionChanged
 
 > **selectionChanged**: [`SelectionChangedEvent`](/docs/api/types/selectionchangedevent/)
@@ -33,6 +57,14 @@ Event emitted when the selection changes
 
 ***
 
+### selectionGrouped
+
+> **selectionGrouped**: [`SelectionGroupedEvent`](/docs/api/types/selectiongroupedevent/)
+
+Event emitted when nodes are grouped into a group
+
+***
+
 ### selectionMoved
 
 > **selectionMoved**: [`SelectionMovedEvent`](/docs/api/types/selectionmovedevent/)
@@ -41,6 +73,22 @@ Event emitted when the selection is moved
 
 ***
 
+### selectionRemoved
+
+> **selectionRemoved**: [`SelectionRemovedEvent`](/docs/api/types/selectionremovedevent/)
+
+Event emitted when selected elements are deleted from the diagram
+
+***
+
+### selectionRotated
+
+> **selectionRotated**: [`SelectionRotatedEvent`](/docs/api/types/selectionrotatedevent/)
+
+Event emitted when a node is rotated
+
+***
+
 ### viewportChanged
 
 > **viewportChanged**: [`ViewportChangedEvent`](/docs/api/types/viewportchangedevent/)

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

@@ -0,0 +1,26 @@
+---
+editUrl: false
+next: false
+prev: false
+title: "NodeResizedEvent"
+---
+
+Event payload emitted when node or group size changes.
+This event fires when node was resized manually by dragging resize handles
+or programmatically using resize methods.
+
+## Properties
+
+### node
+
+> **node**: [`Node`](/docs/api/types/node/)
+
+Node that was resized with their updated sizes
+
+***
+
+### previousSize
+
+> **previousSize**: [`Size`](/docs/api/types/size/)
+
+Previous size of the node before the change

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

@@ -0,0 +1,25 @@
+---
+editUrl: false
+next: false
+prev: false
+title: "PaletteItemDroppedEvent"
+---
+
+Event payload emitted when a palette item is dropped onto the diagram.
+This event fires when users drag items from the palette and drop them to create new nodes.
+
+## Properties
+
+### dropPosition
+
+> **dropPosition**: [`Point`](/docs/api/types/point/)
+
+The position where the item was dropped
+
+***
+
+### node
+
+> **node**: [`Node`](/docs/api/types/node/)
+
+The node that was created from the dropped palette item