feat(tree): add ability to hide root node (refs #25)

In some cases root node should not be shown - now it is accomplished via special options TreeViewOptions, that affect tree visual representation - in contrast for every TreeModel exists special class - TreeModelOptions

Author: rychkog

demo/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NodeEvent, TreeModel, RenamableNode } from '../index';
+import { NodeEvent, TreeModel, RenamableNode, TreeViewOptions } from '../index';
 
 require('../src/styles.css');
 
@@ -12,7 +12,7 @@ declare const alertify: any;
       <div class="tree-container">
         <p>Fonts tree</p>
         <tree
-          [tree]="fonts" 
+          [tree]="fonts"
           (nodeRemoved)="onNodeRemoved($event)"
           (nodeRenamed)="onNodeRenamed($event)"
           (nodeSelected)="onNodeSelected($event)"
@@ -24,6 +24,7 @@ declare const alertify: any;
         <p>Programming languages tree</p>
         <tree 
           [tree]="pls" 
+          [viewOptions]="treeViewOptions"
           (nodeRemoved)="onNodeRemoved($event)"
           (nodeRenamed)="onNodeRenamed($event)"
           (nodeSelected)="onNodeSelected($event)"
@@ -52,6 +53,10 @@ declare const alertify: any;
   `]
 })
 export class AppComponent {
+  public treeViewOptions: TreeViewOptions = {
+    rootIsVisible: false
+  };
+
   public fonts: TreeModel = {
     value: 'Fonts',
     children: [

index.ts

@@ -1,5 +1,7 @@
 import {
   TreeModel,
+  TreeModelOptions,
+  TreeViewOptions,
   RenamableNode,
   NodeEvent,
   NodeCreatedEvent,
@@ -15,6 +17,8 @@ import { TreeModule } from './src/tree.module';
 
 export {
   TreeModel,
+  TreeModelOptions,
+  TreeViewOptions,
   RenamableNode,
   NodeEvent,
   NodeCreatedEvent,

src/styles.css

@@ -142,4 +142,12 @@ tree-internal .tree .folding.node-leaf {
 tree-internal .tree .folding.node-leaf:before {
   content: '\25CF';
   color: #757575;
+}
+
+tree-internal ul.rootless {
+  padding: 0;
+}
+
+tree-internal div.rootless {
+  display: none !important;
 }

src/tree.component.ts

@@ -1,5 +1,5 @@
 import { Input, Component, OnInit, EventEmitter, Output, ElementRef, Inject } from '@angular/core';
-import { TreeStatus, TreeModel, TreeModelOptions, FoldingType, NodeEvent, RenamableNode, NodeSelectedEvent } from './tree.types';
+import { TreeStatus, TreeModel, TreeModelOptions, TreeViewOptions, FoldingType, NodeEvent, RenamableNode, NodeSelectedEvent } from './tree.types';
 import { NodeDraggableService } from './draggable/node-draggable.service';
 import { NodeMenuService } from './menu/node-menu.service';
 import { NodeDraggableEventAction, NodeDraggableEvent } from './draggable/draggable.types';
@@ -13,9 +13,9 @@ import { applyNewValueToRenamable, isRenamable, isValueEmpty } from './utils/typ
 @Component({
   selector: 'tree-internal',
   template: `
-  <ul class="tree" *ngIf="tree">
+  <ul class="tree" *ngIf="tree" [ngClass]="{rootless: !viewOptions.rootIsVisible}">
     <li>
-      <div (contextmenu)="showMenu($event)" [nodeDraggable]="element" [tree]="tree">
+      <div [ngClass]="{rootless: !viewOptions.rootIsVisible}" (contextmenu)="showMenu($event)" [nodeDraggable]="element" [tree]="tree">
         <div class="folding" (click)="switchFoldingType($event, tree)" [ngClass]="getFoldingTypeCssClass(tree)"></div>
         <div href="#" class="node-value" *ngIf="!isEditInProgress()" [class.node-selected]="isSelected" (click)="onNodeSelected($event)">{{tree.value}}</div>
 
@@ -41,6 +41,9 @@ export class TreeInternalComponent implements OnInit {
   @Input()
   public tree: TreeModel;
 
+  @Input()
+  public viewOptions: TreeViewOptions;
+
   @Input()
   public parentTree: TreeModel;
 
@@ -65,7 +68,9 @@ export class TreeInternalComponent implements OnInit {
     this.tree._indexInParent = this.indexInParent;
 
     this.isLeaf = !Array.isArray(this.tree.children);
+
     this.tree.options = TreeModelOptions.merge(this.tree, this.parentTree);
+    this.viewOptions = this.viewOptions || new TreeViewOptions();
 
     this.setUpNodeSelectedEventHandler();
     this.setUpMenuEventHandler();
@@ -320,13 +325,16 @@ export class TreeInternalComponent implements OnInit {
 
 @Component({
   selector: 'tree',
-  template: `<tree-internal [tree]="tree"></tree-internal>`,
+  template: `<tree-internal [tree]="tree" [viewOptions]="viewOptions"></tree-internal>`,
   providers: [TreeService]
 })
 export class TreeComponent implements OnInit {
   @Input()
   public tree: TreeModel;
 
+  @Input()
+  public viewOptions: TreeViewOptions;
+
   @Output()
   public nodeCreated: EventEmitter<any> = new EventEmitter();
 

src/tree.types.ts

@@ -23,13 +23,17 @@ export interface TreeModel {
 }
 
 export class TreeModelOptions {
-  static: boolean = false;
+  public static: boolean = false;
 
   static merge(sourceA: TreeModel, sourceB: TreeModel): TreeModelOptions {
     return _.defaults({}, _.get(sourceA, 'options'), _.get(sourceB, 'options'), {static: false});
   }
 }
 
+export class TreeViewOptions {
+  public rootIsVisible: boolean = true;
+}
+
 export enum TreeStatus {
   New,
   Modified,