pipeline-builder-demo/src/app/shared/context-menu/context-menu.component.ts

Pipeline Builder

import { Component, OnInit, Input, ElementRef, Renderer, HostListener } from '@angular/core';

@Component({
  selector: 'pb-context-menu',
  templateUrl: 'context-menu.component.html',
  styleUrls: ['./context-menu.component.scss'],
  host: {
    '[class.context-menu-container]': 'true',
    '[class.show]': 'isDisplay'
  }
})
export class ContextMenuComponent implements OnInit {
  @Input('show') isShow?: boolean = true;
  isDisplay: boolean = false;

  constructor(private element: ElementRef, private renderer: Renderer) { }

  ngOnInit() {

  }

  @HostListener('document:click', []) onClick(): void {
    this.hide();
  }

  @HostListener('document:scroll', []) onScroll(): void {
    this.hide();
  };

  show(x: number, y: number) {
    this.renderer.setElementStyle(this.element.nativeElement, 'left', `${x}px`);
    this.renderer.setElementStyle(this.element.nativeElement, 'top', `${y}px`);
    this.isDisplay = true;
  }

  hide() {
    this.isDisplay = false;
  }

}