Angular 8 #사각형 내 점 판별 알고리즘으로 클릭 이벤트 설정하기

영역 외 클릭일 경우 해당 div를 zIndex로 숨긴다. (경우에 따라 다른 방법 가능)

IE에선 zIndex를 숫자로 인식하는 현상이 있어 .toString()을 사용하였다.

============= html ============= 
<jqxButton #_buttonRectangle (click)="showButton">button</jqxButton>

============= ts =============
@ViewChild("_buttonRectangle", {static: false}) _buttonRectangle: jqxButtonComponent;

@HostListener("click", ["$event"])
  onClick(e) {
  var point = {x: e.clientX,  y: e.clientY};

  // 사각형 영역
  var rect = this._buttonRectangle.nativeElement.getBoundingClientRect();
  var rectArea = {
    x1: rect.left, x2: rect.left + rect.width,
    y1: rect.top , y2: rect.top  + rect.height
  };

  // 영역 외일 경우 사각형 닫기 
  if ( !this.pointRectangleIntersection(point, rectArea) ) {
    let showflag = this._buttonRectangle.nativeElement.style.zIndex
  
    if(showflag.toString() === "100"){
      this._buttonRectangle.nativeElement.style.zIndex = "-100";
    }
  }
}

pointRectangleIntersection(p, r): boolean {
  return p.x > r.x1 && p.x < r.x2 && p.y > r.y1 && p.y < r.y2;
}

showButton(): void{
  let showflag = this._buttonRectangle.nativeElement.style.zIndex

  if(showflag.toString() === "100"){
    this._buttonRectangle.nativeElement.style.zIndex = "-100";
  }else{
    this._buttonRectangle.nativeElement.style.zIndex = "100";
  }
}

참고 사이트 : https://stackoverflow.com/questions/802013/point-in-rectangle-testing/20357255