Added scrollContainer option to allow scrolling in external container

Author: adamkleingit

CHANGELOG.md

@@ -1,6 +1,7 @@
 <a name="7.2.0"></a>
 # 7.2.0 (2018-xx-xx)
 * Added nodeActivate and nodeDeactivate events for IE11 - issue #387
+* Added scrollContainer option to allow scrolling in external container - issue #92
 
 <a name="7.1.0"></a>
 # 7.1.0 (2018-24-03)

example/cli/src/app/app-routing.module.ts

@@ -15,6 +15,7 @@ import { DragComponent } from './drag/drag.component';
 import { VirtualscrollComponent } from './virtualscroll/virtualscroll.component';
 import { ApiComponent } from './api/api.component';
 import { ActionsComponent } from './actions/actions.component';
+import { ScrollContainerComponent } from './scrollcontainer/scrollcontainer.component';
 
 const routes: Routes = [
   {
@@ -72,6 +73,10 @@ const routes: Routes = [
   {
     path: 'actions',
     component: ActionsComponent
+  },
+  {
+    path: 'scroll-container',
+    component: ScrollContainerComponent
   }
 ];
 

example/cli/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { DragComponent } from './drag/drag.component';
 import { VirtualscrollComponent } from './virtualscroll/virtualscroll.component';
 import { ApiComponent } from './api/api.component';
 import { ActionsComponent } from './actions/actions.component';
+import { ScrollContainerComponent } from './scrollcontainer/scrollcontainer.component';
 
 @NgModule({
   declarations: [
@@ -37,7 +38,8 @@ import { ActionsComponent } from './actions/actions.component';
     DragComponent,
     VirtualscrollComponent,
     ApiComponent,
-    ActionsComponent
+    ActionsComponent,
+    ScrollContainerComponent
   ],
   imports: [
     BrowserModule,

example/cli/src/app/scrollcontainer/scrollcontainer.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';
+
+@Component({
+  selector: 'app-scrollcontainer',
+  styles: [
+  ],
+  template: `
+  <div style="height: 300px; width: 200px;border: 1px solid grey">Padding</div>
+  <div>
+    <tree-root
+      #tree
+      [nodes]="nodes"
+      [options]="options"
+      [focused]="true"
+    ></tree-root>
+  </div>
+  `
+})
+export class ScrollContainerComponent implements OnInit {
+  nodes: any[] = [];
+  options: ITreeOptions = {
+    scrollContainer: <HTMLElement>document.body.parentElement
+  };
+  constructor() {
+  }
+  ngOnInit() {
+    for (let i = 0; i < 200; i++) {
+      this.nodes.push({
+        name: `rootDynamic${i}`,
+        subTitle: `root created dynamically ${i}`
+      });
+    }
+  }
+
+}

example/cli/src/styles.css

@@ -1,5 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~angular-tree-component/dist/angular-tree-component.css';
+html, body {
+  height: 100%;
+}
 .reverse tree-node-expander {
   order: 0;
 }

lib/defs/api.ts

@@ -261,7 +261,11 @@ export interface ITreeOptions {
     /**
      * Whether to use master checkboxes mechanism if the useCheckbox is set to true
      */
-    useTriState?: boolean;
+    useTriState?: boolean
+    /**
+     * The HTML element that is the scroll container for the tree. The default behaviour is to wrap the tree with a container that has overflow: hidden, and then the scrolling container is the viewport inside the tree component
+     */
+    scrollContainer?: HTMLElement;
  }
 
 export interface ITreeNode {

lib/models/tree-options.model.ts

@@ -94,6 +94,7 @@ export class TreeOptions {
   get rootId(): any {return this.options.rootId; }
   get useCheckbox(): boolean { return this.options.useCheckbox; }
   get useTriState(): boolean { return this.options.useTriState === undefined ? true : this.options.useTriState; }
+  get scrollContainer(): HTMLElement { return this.options.scrollContainer; }
   actionMapping: IActionMapping;
 
   constructor(private options: ITreeOptions = {}) {

lib/models/tree-virtual-scroll.model.ts

@@ -92,15 +92,30 @@ export class TreeVirtualScroll {
   }
 
   @action scrollIntoView(node, force, scrollToMiddle = true) {
-    if (force || // force scroll to node
-      node.position < this.y || // node is above viewport
-      node.position + node.getSelfHeight() > this.y + this.viewportHeight) { // node is below viewport
-      if (this.viewport) {
-        this.viewport.scrollTop = scrollToMiddle ?
+    if (node.options.scrollContainer) {
+      const scrollContainer = node.options.scrollContainer;
+      const scrollContainerHeight = scrollContainer.getBoundingClientRect().height;
+      const scrollContainerTop = scrollContainer.getBoundingClientRect().top;
+      const nodeTop = this.viewport.getBoundingClientRect().top + node.position - scrollContainerTop;
+
+      if (force || // force scroll to node
+        nodeTop < scrollContainer.scrollTop || // node is above scroll container
+        nodeTop + node.getSelfHeight() > scrollContainer.scrollTop + scrollContainerHeight) { // node is below container
+        scrollContainer.scrollTop = scrollToMiddle ?
+          nodeTop - scrollContainerHeight / 2 : // scroll to middle
+          nodeTop; // scroll to start
+      }
+    } else {
+      if (force || // force scroll to node
+        node.position < this.y || // node is above viewport
+        node.position + node.getSelfHeight() > this.y + this.viewportHeight) { // node is below viewport
+        if (this.viewport) {
+          this.viewport.scrollTop = scrollToMiddle ?
           node.position - this.viewportHeight / 2 : // scroll to middle
           node.position; // scroll to start
 
-        this._setYBlocks(Math.floor(this.viewport.scrollTop / Y_EPSILON));
+          this._setYBlocks(Math.floor(this.viewport.scrollTop / Y_EPSILON));
+        }
       }
     }
   }