实现调整一个元素的位置，使得该元素不会超出浏览器窗口的可视区域

    const contextSizeX = 158
    const contextSizeY = 512
    let pageY = prop.pageY - window.scrollY
    let pageX = prop.pageX - window.scrollX
    if (pageY + contextSizeY >= window.innerHeight) {
      pageY = window.innerHeight - contextSizeY
    }
    if (prop.pageX + contextSizeX >= window.innerWidth) {
      pageX = window.innerWidth - contextSizeX
    }
    this.contextMenu.open(pageX, pageY)
    
    // -----------------------------------------------------
    /*
    这段代码是用来调整一个元素的位置，使得该元素不会超出浏览器窗口的可视区域。让我逐行解释一下：

1.  `const contextSizeX = 158` 和 `const contextSizeY = 512`：定义了要操作的元素的宽度和高度。
1.  `let pageY = prop.pageY - window.scrollY` 和 `let pageX = prop.pageX - window.scrollX`：计算了鼠标事件发生时的页面坐标相对于当前滚动位置的偏移量。
1.  `if (pageY + contextSizeY >= window.innerHeight) { pageY = window.innerHeight - contextSizeY }`：这个条件语句检查元素底部与浏览器窗口底部之间的空间是否足够放置该元素。如果不够，就将元素的垂直位置调整到窗口底部。
1.  `if (prop.pageX + contextSizeX >= window.innerWidth) { pageX = window.innerWidth - contextSizeX }`：这个条件语句检查元素右侧与浏览器窗口右侧之间的空间是否足够放置该元素。如果不够，就将元素的水平位置调整到窗口右侧。

总体来说，这段代码确保了元素在页面上的显示位置，使其不会超出浏览器窗口的可视区域。
    */
    
    ```
     public open(x: number, y: number) {
    // 右クリックイベントに捕まってしまうので微ディレイ
    setTimeout(() => {
      this.context.nativeElement.style.display = 'block'
      this.context.nativeElement.style.top = y + 'px'
      this.context.nativeElement.style.left = x + 'px'

      this.isOpen = true
    }, 1)
  }
    ```