fix(tree): does not collapse root node when it is hidden (closes #209)

rychkog · Georgii Rychko · commit 9aaa0651956b · 2018-02-11T18:57:36.000+02:00
diff --git a/src/demo/app/app.component.ts b/src/demo/app/app.component.ts
diff --git a/src/demo/app/app.module.ts b/src/demo/app/app.module.ts
@@ -1,9 +1,9 @@
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { BrowserModule } from '@angular/platform-browser';
-import { TreeModule } from '../../../index';
-import { ButtonDirective } from './button';
-import { CommonModule } from '@angular/common';
+import {NgModule} from '@angular/core';
+import {AppComponent} from './app.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {TreeModule} from '../../../index';
+import {ButtonDirective} from './button';
+import {CommonModule} from '@angular/common';
 
 @NgModule({
   declarations: [AppComponent, ButtonDirective],
diff --git a/src/demo/app/button.ts b/src/demo/app/button.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef } from '@angular/core';
+import {Directive, ElementRef} from '@angular/core';
 
 @Directive({
   selector: '[button]'
diff --git a/src/demo/main.ts b/src/demo/main.ts
@@ -1,8 +1,8 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import {AppModule} from './app/app.module';
+import {environment} from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
diff --git a/src/demo/polyfills.ts b/src/demo/polyfills.ts
@@ -29,6 +29,13 @@ import 'core-js/es6/object';
 import 'core-js/es6/string';
 // import 'core-js/es6/date';
 import 'core-js/es6/array';
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
 // import 'core-js/es6/regexp';
 // import 'core-js/es6/map';
 // import 'core-js/es6/set';
@@ -40,23 +47,11 @@ import 'core-js/es6/array';
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
-/** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-
-
 /** ALL Firefox browsers require the following to support `@angular/animation`. **/
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
 
-/***************************************************************************************************
- * Zone JS is required by Angular itself.
- */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
diff --git a/src/draggable/captured-node.ts b/src/draggable/captured-node.ts
@@ -1,5 +1,5 @@
-import { Tree } from '../tree';
-import { ElementRef } from '@angular/core';
+import {Tree} from '../tree';
+import {ElementRef} from '@angular/core';
 
 export class CapturedNode {
   public constructor(private anElement: ElementRef,
diff --git a/src/draggable/draggable.events.ts b/src/draggable/draggable.events.ts
@@ -1,5 +1,5 @@
-import { ElementRef } from '@angular/core';
-import { CapturedNode } from './captured-node';
+import {ElementRef} from '@angular/core';
+import {CapturedNode} from './captured-node';
 
 export class NodeDraggableEvent {
   public constructor(public captured: CapturedNode, public target: ElementRef) {
diff --git a/src/draggable/node-draggable.directive.ts b/src/draggable/node-draggable.directive.ts
@@ -1,7 +1,7 @@
-import { Directive, ElementRef, Input, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
-import { NodeDraggableService } from './node-draggable.service';
-import { CapturedNode } from './captured-node';
-import { Tree } from '../tree';
+import {Directive, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {NodeDraggableService} from './node-draggable.service';
+import {CapturedNode} from './captured-node';
+import {Tree} from '../tree';
 
 @Directive({
   selector: '[nodeDraggable]'
diff --git a/src/draggable/node-draggable.service.ts b/src/draggable/node-draggable.service.ts
@@ -1,7 +1,7 @@
-import { Injectable, ElementRef } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-import { CapturedNode } from './captured-node';
-import { NodeDraggableEvent } from './draggable.events';
+import {ElementRef, Injectable} from '@angular/core';
+import {Subject} from 'rxjs/Subject';
+import {CapturedNode} from './captured-node';
+import {NodeDraggableEvent} from './draggable.events';
 
 @Injectable()
 export class NodeDraggableService {
diff --git a/src/editable/node-editable.directive.ts b/src/editable/node-editable.directive.ts
@@ -1,15 +1,15 @@
 import {
   Directive,
   ElementRef,
-  Input,
-  OnInit,
-  Output,
   EventEmitter,
   HostListener,
   Inject,
+  Input,
+  OnInit,
+  Output,
   Renderer2
 } from '@angular/core';
-import { NodeEditableEvent, NodeEditableEventAction } from './editable.events';
+import {NodeEditableEvent, NodeEditableEventAction} from './editable.events';
 
 @Directive({
   selector: '[nodeEditable]'
diff --git a/src/menu/node-menu.component.ts b/src/menu/node-menu.component.ts
@@ -1,9 +1,7 @@
-import {
-  Component, EventEmitter, Output, Input, Inject, OnDestroy, OnInit, ViewChild, Renderer2
-} from '@angular/core';
-import { NodeMenuService } from './node-menu.service';
-import { NodeMenuItemSelectedEvent, NodeMenuItemAction, NodeMenuAction } from './menu.events';
-import { isLeftButtonClicked, isEscapePressed } from '../utils/event.utils';
+import {Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, Renderer2, ViewChild} from '@angular/core';
+import {NodeMenuService} from './node-menu.service';
+import {NodeMenuAction, NodeMenuItemAction, NodeMenuItemSelectedEvent} from './menu.events';
+import {isEscapePressed, isLeftButtonClicked} from '../utils/event.utils';
 
 @Component({
   selector: 'node-menu',
diff --git a/src/menu/node-menu.service.ts b/src/menu/node-menu.service.ts
@@ -1,7 +1,7 @@
-import { Injectable, ElementRef } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-import { Observable } from 'rxjs/Observable';
-import { NodeMenuEvent, NodeMenuAction } from './menu.events';
+import {ElementRef, Injectable} from '@angular/core';
+import {Subject} from 'rxjs/Subject';
+import {Observable} from 'rxjs/Observable';
+import {NodeMenuAction, NodeMenuEvent} from './menu.events';
 
 @Injectable()
 export class NodeMenuService {
diff --git a/src/tree-controller.ts b/src/tree-controller.ts
@@ -1,10 +1,10 @@
-import { TreeService } from './tree.service';
-import { Tree } from './tree';
-import { TreeModel } from './tree.types';
-import { NodeMenuItemAction } from './menu/menu.events';
-import { TreeInternalComponent } from './tree-internal.component';
-import { MouseButtons } from './utils/event.utils';
-import { get } from './utils/fn.utils';
+import {TreeService} from './tree.service';
+import {Tree} from './tree';
+import {TreeModel} from './tree.types';
+import {NodeMenuItemAction} from './menu/menu.events';
+import {TreeInternalComponent} from './tree-internal.component';
+import {MouseButtons} from './utils/event.utils';
+import {get} from './utils/fn.utils';
 
 export class TreeController {
   private tree: Tree;
diff --git a/src/tree-internal.component.ts b/src/tree-internal.component.ts
@@ -1,4 +1,5 @@
 import {
+  AfterContentChecked,
   Component,
   ElementRef,
   Input,
@@ -7,24 +8,22 @@ import {
   OnInit,
   SimpleChanges,
   TemplateRef,
-  ViewChild,
-  AfterViewInit,
-  AfterContentChecked
+  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, NodeIndeterminedEvent } from './tree.events';
-import { TreeService } from './tree.service';
+import {Ng2TreeSettings} 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 {NodeCheckedEvent, NodeEvent} 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, has, size, isNil } from './utils/fn.utils';
-import { Ng2TreeSettings } from './tree.types';
+import {NodeDraggableEvent} from './draggable/draggable.events';
+import {Subscription} from 'rxjs/Subscription';
+import {get, isNil} from './utils/fn.utils';
 
 @Component({
   selector: 'tree-internal',
@@ -126,6 +125,10 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy, Afte
     this.settings = this.settings || new Ng2TreeSettings();
     this.isReadOnly = !get(this.settings, 'enableCheckboxes', true);
 
+    if (this.tree.isRoot() && this.settings.rootIsVisible === false) {
+      this.tree.disableCollapseOnInit();
+    }
+
     this.subscriptions.push(this.nodeMenuService.hideMenuStream(this.nodeElementRef)
       .subscribe(() => {
         this.isRightMenuVisible = false;
diff --git a/src/tree.component.ts b/src/tree.component.ts
@@ -1,15 +1,25 @@
 import {
-  Input, Component, OnInit, EventEmitter, Output, Inject, OnChanges, SimpleChanges, ViewChild,
-  OnDestroy, TemplateRef, ContentChild
+  Component,
+  ContentChild,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild
 } from '@angular/core';
-import { TreeService } from './tree.service';
+import {TreeService} from './tree.service';
 import * as TreeTypes from './tree.types';
 
-import { NodeEvent, NodeCheckedEvent, NodeUncheckedEvent, MenuItemSelectedEvent } from './tree.events';
+import {MenuItemSelectedEvent, NodeCheckedEvent, NodeEvent, NodeUncheckedEvent} from './tree.events';
 
-import { Tree } from './tree';
-import { TreeController } from './tree-controller';
-import { Subscription } from 'rxjs/Subscription';
+import {Tree} from './tree';
+import {TreeController} from './tree-controller';
+import {Subscription} from 'rxjs/Subscription';
 
 @Component({
   selector: 'tree',
@@ -49,7 +59,6 @@ export class TreeComponent implements OnInit, OnChanges, OnDestroy {
   public nodeCollapsed: EventEmitter<any> = new EventEmitter();
 
   @Output()
-
   public loadNextLevel: EventEmitter<any> = new EventEmitter();
 
   @Output()
@@ -58,16 +67,20 @@ export class TreeComponent implements OnInit, OnChanges, OnDestroy {
   @Output()
   public nodeUnchecked: EventEmitter<NodeUncheckedEvent> = new EventEmitter();
 
+  @Output()
   public menuItemSelected: EventEmitter<any> = new EventEmitter();
 
   public tree: Tree;
-  @ViewChild('rootComponent') public rootComponent;
 
-  @ContentChild(TemplateRef) public template;
+  @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 {
diff --git a/src/tree.events.ts b/src/tree.events.ts
@@ -1,6 +1,5 @@
-import { Tree } from './tree';
-import { TreeController } from './tree-controller';
-import { RenamableNode } from './tree.types';
+import {Tree} from './tree';
+import {RenamableNode} from './tree.types';
 
 export class NodeEvent {
   public constructor(public node: Tree) {
diff --git a/src/tree.module.ts b/src/tree.module.ts
@@ -1,16 +1,16 @@
 import './rxjs-imports';
 
-import { NgModule } from '@angular/core';
-import { TreeComponent } from './tree.component';
-import { TreeInternalComponent } from './tree-internal.component';
-import { CommonModule } from '@angular/common';
-import { NodeDraggableDirective } from './draggable/node-draggable.directive';
-import { NodeDraggableService } from './draggable/node-draggable.service';
-import { NodeEditableDirective } from './editable/node-editable.directive';
-import { NodeMenuComponent } from './menu/node-menu.component';
-import { NodeMenuService } from './menu/node-menu.service';
-import { TreeService } from './tree.service';
-import { SafeHtmlPipe } from './utils/safe-html.pipe';
+import {NgModule} from '@angular/core';
+import {TreeComponent} from './tree.component';
+import {TreeInternalComponent} from './tree-internal.component';
+import {CommonModule} from '@angular/common';
+import {NodeDraggableDirective} from './draggable/node-draggable.directive';
+import {NodeDraggableService} from './draggable/node-draggable.service';
+import {NodeEditableDirective} from './editable/node-editable.directive';
+import {NodeMenuComponent} from './menu/node-menu.component';
+import {NodeMenuService} from './menu/node-menu.service';
+import {TreeService} from './tree.service';
+import {SafeHtmlPipe} from './utils/safe-html.pipe';
 
 @NgModule({
   imports: [CommonModule],
diff --git a/src/tree.service.ts b/src/tree.service.ts
@@ -1,26 +1,26 @@
 import {
+  LoadNextLevelEvent,
+  MenuItemSelectedEvent,
+  NodeCheckedEvent,
   NodeCollapsedEvent,
   NodeCreatedEvent,
   NodeExpandedEvent,
+  NodeIndeterminedEvent,
   NodeMovedEvent,
   NodeRemovedEvent,
   NodeRenamedEvent,
   NodeSelectedEvent,
-  LoadNextLevelEvent,
-  NodeCheckedEvent,
-  NodeUncheckedEvent,
-  MenuItemSelectedEvent,
-  NodeIndeterminedEvent
+  NodeUncheckedEvent
 } from './tree.events';
-import { RenamableNode } from './tree.types';
-import { Tree } from './tree';
-import { TreeController } from './tree-controller';
-import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
-import { ElementRef, Inject, Injectable } from '@angular/core';
-import { NodeDraggableService } from './draggable/node-draggable.service';
-import { NodeDraggableEvent } from './draggable/draggable.events';
-import { isEmpty } from './utils/fn.utils';
+import {RenamableNode} from './tree.types';
+import {Tree} from './tree';
+import {TreeController} from './tree-controller';
+import {Observable} from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
+import {ElementRef, Inject, Injectable} from '@angular/core';
+import {NodeDraggableService} from './draggable/node-draggable.service';
+import {NodeDraggableEvent} from './draggable/draggable.events';
+import {isEmpty} from './utils/fn.utils';
 
 @Injectable()
 export class TreeService {
diff --git a/src/tree.ts b/src/tree.ts
diff --git a/src/tree.types.ts b/src/tree.types.ts
diff --git a/src/utils/safe-html.pipe.ts b/src/utils/safe-html.pipe.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Directive, ElementRef } from '@angular/core';`
	`1`	`+import {Directive, ElementRef} from '@angular/core';`
`2`	`2`
`3`	`3`	`@Directive({`
`4`	`4`	`selector: '[button]'`