Added context menu example

Author: adamkleingit

example/cli/dist/main.js

@@ -16,6 +16,7 @@ import { VirtualscrollComponent } from './virtualscroll/virtualscroll.component'
 import { ApiComponent } from './api/api.component';
 import { ActionsComponent } from './actions/actions.component';
 import { ScrollContainerComponent } from './scrollcontainer/scrollcontainer.component';
+import { ContextmenuComponent } from './contextmenu/contextmenu.component';
 
 const routes: Routes = [
   {
@@ -77,6 +78,10 @@ const routes: Routes = [
   {
     path: 'scroll-container',
     component: ScrollContainerComponent
+  },
+  {
+    path: 'context-menu',
+    component: ContextmenuComponent
   }
 ];
 

example/cli/dist/main.js.map

@@ -21,6 +21,7 @@ import { VirtualscrollComponent } from './virtualscroll/virtualscroll.component'
 import { ApiComponent } from './api/api.component';
 import { ActionsComponent } from './actions/actions.component';
 import { ScrollContainerComponent } from './scrollcontainer/scrollcontainer.component';
+import { ContextmenuComponent } from './contextmenu/contextmenu.component';
 
 @NgModule({
   declarations: [
@@ -39,7 +40,8 @@ import { ScrollContainerComponent } from './scrollcontainer/scrollcontainer.comp
     VirtualscrollComponent,
     ApiComponent,
     ActionsComponent,
-    ScrollContainerComponent
+    ScrollContainerComponent,
+    ContextmenuComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,3 @@
+<p>
+  contextmenu works!
+</p>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContextmenuComponent } from './contextmenu.component';
+
+describe('ContextmenuComponent', () => {
+  let component: ContextmenuComponent;
+  let fixture: ComponentFixture<ContextmenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContextmenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContextmenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

example/cli/src/app/contextmenu/contextmenu.component.css

@@ -0,0 +1,93 @@
+import { Component, HostListener } from '@angular/core';
+import { ITreeOptions, TREE_ACTIONS } from 'angular-tree-component';
+
+@Component({
+  selector: 'app-contextmenu',
+  template: `
+    <tree-root [focused]="true" [options]="options" [nodes]="nodes"></tree-root>
+    <div class="menu" *ngIf="contextMenu" [style.left.px]="contextMenu.x" [style.top.px]="contextMenu.y">
+      <div>Menu for {{ contextMenu.node.data.name }}</div>
+      <hr>
+      <ul>
+        <li><a (click)="closeMenu()">Copy</a></li>
+        <li><a (click)="closeMenu()">Paste</a></li>
+        <li><a (click)="closeMenu()">Cut</a></li>
+      </ul>
+    </div>
+    <br>
+    <p>Keys:</p>
+    down | up | left | right | space | enter
+  `,
+  styles: [
+    `.menu {
+      position: absolute;
+      background: rgba(255, 255, 255, 0.9);
+      padding: 7px;
+      border-radius: 5px;
+      box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
+    }`,
+    `ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }`,
+    `li {
+      padding: 7px;
+      border-radius: 3px;
+      cursor: pointer;
+    }`,
+    `li:hover {
+      background-color: aliceblue;
+    }`,
+  ]
+})
+export class ContextmenuComponent {
+  contextMenu = null;
+  nodes = [
+    {
+      name: 'root1',
+      children: [
+        { name: 'child1' },
+        { name: 'child2' }
+      ]
+    },
+    {
+      name: 'root2',
+      children: [
+        { name: 'child2.1', children: [] },
+        { name: 'child2.2', children: [
+          {name: 'grandchild2.2.1'}
+        ] }
+      ]
+    },
+    { name: 'root3' },
+    { name: 'root4', children: [] },
+    { name: 'root5', children: null }
+  ];
+
+  options: ITreeOptions = {
+    actionMapping: {
+      mouse: {
+        contextMenu: (treeModel, treeNode, e) => {
+          e.preventDefault();
+          if (this.contextMenu && treeNode === this.contextMenu.node) {
+            return this.closeMenu();
+          }
+          this.contextMenu = {
+            node: treeNode,
+            x: e.pageX,
+            y: e.pageY
+          };
+        },
+        click: (treeModel, treeNode, e) => {
+          this.closeMenu();
+          TREE_ACTIONS.TOGGLE_ACTIVE(treeModel, treeNode, e);
+        }
+      }
+    }
+  };
+
+  closeMenu = () => {
+    this.contextMenu = null;
+  }
+}