Adding checkboxes

src/tree-controller.ts

@@ -92,6 +92,13 @@ export class TreeController {
 
   public startRenaming(): void {
     this.tree.markAsBeingRenamed();
+ }
 
-  }
+ public check() : void {
+  this.component.onNodeChecked()
+}
+
+public uncheck() : void {
+  this.component.onNodeUnchecked()
+}
 }

src/tree-internal.component.ts

@@ -1,3 +1,4 @@
+
 import {
   Component,
   ElementRef,
@@ -6,19 +7,22 @@ import {
   OnDestroy,
   OnInit,
   SimpleChanges,
-  TemplateRef
+  TemplateRef,
+  ViewChild
 } from '@angular/core';
+
 import * as TreeTypes from './tree.types';
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
 import { NodeMenuService } from './menu/node-menu.service';
 import { NodeMenuItemAction, NodeMenuItemSelectedEvent } from './menu/menu.events';
 import { NodeEditableEvent, NodeEditableEventAction } from './editable/editable.events';
+import { NodeEvent, NodeRemovedEvent, NodeCheckedEvent, NodeIndeterminateEvent } from './tree.events'
 import { TreeService } from './tree.service';
 import * as EventUtils from './utils/event.utils';
 import { NodeDraggableEvent } from './draggable/draggable.events';
 import { Subscription } from 'rxjs/Subscription';
-import { get } from './utils/fn.utils';
+import { get, has } from './utils/fn.utils';
 
 @Component({
   selector: 'tree-internal',
@@ -33,6 +37,11 @@ import { get } from './utils/fn.utils';
         [tree]="tree">
 
         <div class="folding" (click)="onSwitchFoldingType()" [ngClass]="tree.foldingCssClass"></div>
+
+        <div class="node-checkbox" *ngIf="settings.showCheckboxes">	
+        <input checkbox  type="checkbox" [disabled]="isReadOnly" [checked]="isChecked" (change)="NodeCheckSatusChanged()" #checkbox />			
+         </div>
+
         <div class="node-value"
           *ngIf="!shouldShowInputForTreeValue()"
           [class.node-selected]="isSelected"
@@ -43,7 +52,7 @@ import { get } from './utils/fn.utils';
             <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: tree.node }"></ng-template>
         </div>
 
-        <input type="text" class="node-value"
+               <input type="text" class="node-value"
            *ngIf="shouldShowInputForTreeValue()"
            [nodeEditable]="tree.value"
            (valueChanged)="applyNewValue($event)"/>
@@ -64,7 +73,7 @@ import { get } from './utils/fn.utils';
            (menuItemSelected)="onMenuItemSelected($event)">
       </node-menu>
       <ng-template [ngIf]="tree.isNodeExpanded()">
-        <tree-internal *ngFor="let child of tree.childrenAsync | async" [tree]="child" [template]="template"></tree-internal>
+        <tree-internal *ngFor="let child of tree.childrenAsync | async" [tree]="child" [template]="template" [settings]="settings"></tree-internal>
       </ng-template>
     </li>
   </ul>
@@ -83,13 +92,20 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy {
   public isSelected = false;
   public isRightMenuVisible = false;
   public isLeftMenuVisible = false;
+  public isChecked = false;
+  public isReadOnly = false;
   public controller: TreeController;
 
+
+  @ViewChild('checkbox')
+  _checkboxElement: ElementRef;
+
   private subscriptions: Subscription[] = [];
 
+
   public constructor(private nodeMenuService: NodeMenuService,
-                     public treeService: TreeService,
-                     public element: ElementRef) {
+    public treeService: TreeService,
+    public element: ElementRef) {
   }
 
   public ngOnInit(): void {
@@ -98,7 +114,13 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy {
       this.treeService.setController(this.tree.node.id, this.controller);
     }
 
-    this.settings = this.settings || { rootIsVisible: true };
+
+    this.settings = this.settings || { rootIsVisible: true, showCheckboxes: false, enableCheckboxes: true };
+
+    this.isChecked = this.tree.isChecked;
+
+    this.isReadOnly = has(this.settings, 'enableCheckboxes') ? !this.settings.enableCheckboxes : false;
+
     this.subscriptions.push(this.nodeMenuService.hideMenuStream(this.element)
       .subscribe(() => {
         this.isRightMenuVisible = false;
@@ -118,6 +140,28 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy {
           this.moveNodeToParentTreeAndRemoveFromPreviousOne(e, this.tree);
         }
       }));
+
+    this.subscriptions.push(this.treeService.nodeChecked$
+      .filter((e: NodeCheckedEvent) => this.eventContainsId(e) && this.tree.children
+        && this.tree.children.some((child: Tree) => child.id === e.node.id))
+      .subscribe((e: NodeCheckedEvent) => {
+        this.updateIndeterminateState();
+      }));
+
+
+    this.subscriptions.push(this.treeService.nodeUnchecked$
+      .filter((e: NodeCheckedEvent) => this.eventContainsId(e) && this.tree.children
+        && this.tree.children.some((child: Tree) => child.id === e.node.id))
+      .subscribe((e: NodeCheckedEvent) => {
+        this.updateIndeterminateState();
+      }));
+
+
+    this.subscriptions.push(this.treeService.nodeIndeterminate$
+      .filter((e: NodeIndeterminateEvent) => this.eventContainsId(e) &&
+        this.tree.children && this.tree.children.some((child: Tree) => child.id === e.node.id))
+      .subscribe((e: NodeIndeterminateEvent) => {
+      }));
   }
 
   public ngOnChanges(changes: SimpleChanges): void {
@@ -256,4 +300,84 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy {
   public hasCustomMenu(): boolean {
     return this.tree.hasCustomMenu();
   }
+
+  public NodeCheckSatusChanged() {
+    if (!this.isChecked) {
+      this.onNodeChecked();
+    }
+    else {
+      this.onNodeUnchecked();
+    }
+
+  }
+
+  public onNodeChecked(): void {
+    this._checkboxElement.nativeElement.indeterminate = false;
+    this.treeService.fireNodeChecked(this.tree);
+    this.executeOnChildController(controller => controller.check());
+    this.isChecked = true;
+    this.tree.isChecked = true;
+  }
+
+  public onNodeUnchecked(): void {
+    this._checkboxElement.nativeElement.indeterminate = false;
+
+    this.treeService.fireNodeUnchecked(this.tree);
+
+    this.executeOnChildController(controller => controller.uncheck());
+    this.isChecked = false;
+    this.tree.isChecked = false;
+  }
+
+  private executeOnChildController(executor: (controller: TreeController) => void) {
+    if (this.tree.children) {
+      this.tree.children.forEach((child: Tree) => {
+        let controller = this.treeService.getController(child.id);
+        if (controller != null) {
+          executor(controller);
+        }
+      });
+    }
+  }
+
+  public updateIndeterminateState(): void {
+
+    setTimeout(() => { // Calling setTimeout so the value of isChecked will be updated and after that I'll check the children status.
+      this.updateIndeterminateStateInternal();
+    }, 1)
+  };
+
+
+  private updateIndeterminateStateInternal(): void {
+    const checkedChildren = this.tree.children.filter(child => child.isChecked).length;
+
+    if (checkedChildren === 0) {
+      this._checkboxElement.nativeElement.indeterminate = false;
+      this.isChecked = false;
+      this.tree.isChecked = false;
+      this.treeService.fireNodeUnchecked(this.tree)
+    }
+    else if (checkedChildren === this.tree.children.length) {
+      this._checkboxElement.nativeElement.indeterminate = false;
+      this.isChecked = true;
+      this.tree.isChecked = true;
+      this.treeService.fireNodeChecked(this.tree)
+    }
+    else {
+      this.setNodeInderminated();
+    }
+  }
+
+  private setNodeInderminated(): void {
+    this._checkboxElement.nativeElement.indeterminate = true;
+    this.treeService.fireNodeIndeterminate(this.tree);
+  }
+
+  private eventContainsId(event: NodeEvent): boolean {
+    if (!event.node.id) {
+      console.log('Checking feature requires a well known id for every node, lease prvide a unique id.')
+      return false;
+    }
+    return true;
+  }
 }

src/tree.component.ts

@@ -4,7 +4,9 @@ import {
 } from '@angular/core';
 import { TreeService } from './tree.service';
 import * as TreeTypes from './tree.types';
-import { NodeEvent, MenuItemSelectedEvent } from './tree.events';
+
+import { NodeEvent, NodeCheckedEvent, NodeUncheckedEvent,MenuItemSelectedEvent } from './tree.events';
+
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
 import { Subscription } from 'rxjs/Subscription';
@@ -15,7 +17,7 @@ import { Subscription } from 'rxjs/Subscription';
   providers: [TreeService]
 })
 export class TreeComponent implements OnInit, OnChanges, OnDestroy {
-  private static EMPTY_TREE: Tree = new Tree({value: ''});
+  private static EMPTY_TREE: Tree = new Tree({ value: '' });
 
   /* tslint:disable:no-input-rename */
   @Input('tree')
@@ -47,19 +49,25 @@ export class TreeComponent implements OnInit, OnChanges, OnDestroy {
   public nodeCollapsed: EventEmitter<any> = new EventEmitter();
 
   @Output()
-  public menuItemSelected: EventEmitter<any> = new EventEmitter();
 
-  @Output()
   public loadNextLevel: EventEmitter<any> = new EventEmitter();
 
+  @Output()
+  public nodeChecked: EventEmitter<NodeCheckedEvent> = new EventEmitter();
+
+  @Output()
+  public nodeUnchecked: EventEmitter<NodeUncheckedEvent> = new EventEmitter();
+
+  public menuItemSelected: EventEmitter<any> = new EventEmitter();
+
   public tree: Tree;
   @ViewChild('rootComponent') public rootComponent;
 
   @ContentChild(TemplateRef) public template;
 
   private subscriptions: Subscription[] = [];
 
-  public constructor(@Inject(TreeService) private treeService: TreeService) {
+  public constructor( @Inject(TreeService) private treeService: TreeService) {
   }
 
   public ngOnChanges(changes: SimpleChanges): void {
@@ -106,6 +114,11 @@ export class TreeComponent implements OnInit, OnChanges, OnDestroy {
     this.subscriptions.push(this.treeService.loadNextLevel$.subscribe((e: NodeEvent) => {
       this.loadNextLevel.emit(e);
     }));
+
+    this.subscriptions.push(this.treeService.nodeChecked$.subscribe((e: NodeCheckedEvent) => this.nodeChecked.emit(e)));
+
+    this.subscriptions.push(this.treeService.nodeUnchecked$.subscribe((e: NodeUncheckedEvent) => this.nodeChecked.emit(e)));
+
   }
 
   public getController(): TreeController {

src/tree.events.ts

@@ -66,3 +66,21 @@ export class LoadNextLevelEvent extends NodeEvent {
     super(node);
   }
 }
+
+export class NodeCheckedEvent extends NodeEvent {
+  public constructor(node: Tree) {
+    super(node);
+  }
+}
+
+export class NodeUncheckedEvent extends NodeEvent {
+  public constructor(node: Tree) {
+    super(node);
+  }
+}
+
+export class NodeIndeterminateEvent extends NodeEvent {
+  public constructor(node: Tree) {
+    super(node);
+  }
+}

src/tree.service.ts

@@ -6,9 +6,11 @@ import {
   NodeRemovedEvent,
   NodeRenamedEvent,
   NodeSelectedEvent,
+  LoadNextLevelEvent,
+  NodeCheckedEvent,
+  NodeUncheckedEvent,
   MenuItemSelectedEvent,
-  LoadNextLevelEvent
-} from './tree.events';
+NodeIndeterminateEvent} from './tree.events';
 import { RenamableNode } from './tree.types';
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
@@ -30,6 +32,9 @@ export class TreeService {
   public nodeCollapsed$: Subject<NodeCollapsedEvent> = new Subject<NodeCollapsedEvent>();
   public menuItemSelected$: Subject<MenuItemSelectedEvent> = new Subject<MenuItemSelectedEvent>();
   public loadNextLevel$: Subject<LoadNextLevelEvent> = new Subject<LoadNextLevelEvent>();
+  public nodeChecked$ : Subject<NodeCheckedEvent> = new Subject<NodeCheckedEvent>();
+  public nodeUnchecked$ : Subject<NodeUncheckedEvent> = new Subject<NodeUncheckedEvent>();
+  public nodeIndeterminate$ : Subject<NodeIndeterminateEvent> = new Subject<NodeIndeterminateEvent>();
 
   private controllers: Map<string | number, TreeController> = new Map();
 
@@ -88,6 +93,14 @@ export class TreeService {
     this.loadNextLevel$.next(new LoadNextLevelEvent(tree));
   }
 
+  public fireNodeChecked(tree: Tree) : void {
+    this.nodeChecked$.next(new NodeCheckedEvent(tree));
+  }
+
+  public fireNodeUnchecked(tree: Tree) : void {
+    this.nodeUnchecked$.next(new NodeUncheckedEvent(tree));
+  }
+
   public draggedStream(tree: Tree, element: ElementRef): Observable<NodeDraggableEvent> {
     return this.nodeDraggableService.draggableNodeEvents$
       .filter((e: NodeDraggableEvent) => e.target === element)
@@ -129,4 +142,8 @@ export class TreeService {
 
       return shouldLoadNextLevel;
   }
+
+  public fireNodeIndeterminate(tree: Tree) : void {
+    this.nodeIndeterminate$.next(new NodeIndeterminateEvent(tree));
+  }
 }

src/tree.ts

@@ -45,6 +45,7 @@ export class Tree {
 
   public node: TreeModel;
   public parent: Tree;
+  public isChecked: boolean;
 
   // STATIC METHODS ----------------------------------------------------------------------------------------------------
 

src/tree.types.ts

@@ -27,6 +27,7 @@ export interface TreeModel {
   _status?: TreeStatus;
   _foldingType?: FoldingType;
   [additionalData: string]: any;
+  checked?: boolean;
 }
 
 export interface CssClasses {
@@ -111,6 +112,8 @@ export interface Ng2TreeSettings {
    * @type boolean
    */
   rootIsVisible?: boolean;
+  showCheckboxes?: boolean;
+  enableCheckboxes?: boolean;
 }
 
 export enum TreeStatus {