import { ChangeDetectorRef , Component , EventEmitter , Input , Output , } from '@angular/core' ; import { Node } from '../../../tree/node' ; import { UserActions } from '../../actions/user-actions/user-actions' ; import { ExpandState , ComponentViewState , } from '../../state' ; export const defaultExpansionDepth = 3 ; @ Component ( { selector : 'bt-node-item' , templateUrl : './node-item.html' , styleUrls : [ './node-item.css' ] , } ) export class NodeItem { @ Input ( ) node ; @ Input ( ) level : number ; @ Output ( ) private selectNode = new EventEmitter < Node > ( ) ; @ Output ( ) private inspectElement = new EventEmitter < Node > ( ) ; @ Output ( ) private expandChildren = new EventEmitter < Node > ( ) ; @ Output ( ) private collapseChildren = new EventEmitter < Node > ( ) ; constructor ( private changeDetector , public viewState , private userActions ) { } get selected ( ) : boolean { return this . viewState . selectionState ( this . node ) ; } get expanded ( ) : boolean { const state = this . viewState . expandState ( this . node ) ; if ( state == null ) { return this . defaultExpanded ; } return state === ExpandState . Expanded ; } private get defaultExpanded ( ) : boolean { return this . level < defaultExpansionDepth ; } get hasChildren ( ) : boolean { return this . node . children . length > 0 ; } onDblClick ( event ) { this . inspectElement . emit ( this . node ) ; } onClick ( event ) { if ( event . ctrlKey || event . metaKey ) { this . expandChildren . emit ( this . node ) ; } else if ( event . altKey ) { this . collapseChildren . emit ( this . node ) ; } this . selectNode . emit ( this . node ) ; } onMouseOut ( event ) { this . userActions . clearHighlight ( ) ; } onMouseOver ( $event ) { this . userActions . highlight ( this . node ) ; } onToggleExpand ( $event ) { const defaultState = this . defaultExpanded ? ExpandState . Expanded : ExpandState . Collapsed ; this . userActions . toggle ( this . node , defaultState ) ; this . changeDetector . detectChanges ( ) ; } trackById = ( index , node ) => node . id ; }