Add hovered edge as optput

PiperOrigin-RevId: 770103247

Author: Googler

src/app/directed_acyclic_graph.ng.html

@@ -71,6 +71,7 @@
       [class.animate-movement]="animateMove && !graphPanning"
       [resolveReference]="resolveReference"
       (edgeLabelClick)="edgeLabelClick.emit($event)"
+      (hoveredEdgeChange)="hoveredEdgeChange.emit($event)"
     />
   </section>
 </figure>

src/app/directed_acyclic_graph.ts

@@ -255,6 +255,7 @@ export class DirectedAcyclicGraph implements OnInit, OnDestroy {
   @Output() groupIterationChanged = new EventEmitter<GroupIterationRecord>();
   @Output() onGroupExpandToggled = new EventEmitter<GroupToggleEvent>();
   @Output() edgeLabelClick = new EventEmitter<DagEdge>();
+  @Output() hoveredEdgeChange = new EventEmitter<DagEdge|undefined>();
 
   @Input() hoveredEdge?: DagEdge;
 

src/app/directed_acyclic_graph_raw.ts

@@ -407,6 +407,7 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
   }
   @Output() selectedNodeChange = new EventEmitter<SelectedNode|null>();
   @Output() edgeLabelClick = new EventEmitter<DagEdge>();
+  @Output() hoveredEdgeChange = new EventEmitter<DagEdge|undefined>();
 
   @Input() features = createDAGFeatures();
   @Input('collapsed')
@@ -993,8 +994,10 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
   setEdgeHover(edge: DagEdge, state: boolean) {
     if (this.hoveredEdge === edge && !state) {
       this.hoveredEdge = undefined;
+      this.hoveredEdgeChange.emit(undefined);
     } else {
       this.hoveredEdge = edge;
+      this.hoveredEdgeChange.emit(edge);
     }
     this.cdr.detectChanges();
   }