ng2-tree-hackaday/src/menu/node-menu.service.ts

angular2 component for visualizing data that can be naturally represented as a tree

import { Injectable, ElementRef } from '@angular/core';
import { Subject, Observable } from 'rxjs/Rx';
import { NodeMenuEvent, NodeMenuAction } from './menu.events';

@Injectable()
export class NodeMenuService {
  public nodeMenuEvents$: Subject<NodeMenuEvent> = new Subject<NodeMenuEvent>();

  public fireMenuEvent(sender: HTMLElement, action: NodeMenuAction): void {
    const nodeMenuEvent: NodeMenuEvent = { sender, action };
    this.nodeMenuEvents$.next(nodeMenuEvent);
  }

  public hideMenuStream(treeElementRef: ElementRef): Observable<any> {
    return this.nodeMenuEvents$
      .filter((e: NodeMenuEvent) => treeElementRef.nativeElement !== e.sender)
      .filter((e: NodeMenuEvent) => e.action === NodeMenuAction.Close);
  }

  public hideMenuForAllNodesExcept(treeElementRef: ElementRef): void {
    this.nodeMenuEvents$.next({
      sender: treeElementRef.nativeElement,
      action: NodeMenuAction.Close
    });
  }
}