寻找矩形顶点

算法背景

项目中遇到一个需求，向给定的一个参考线布局的canvas内拖拽增加一个矩形，需要在鼠标拖动到一个格子内时，自动绘制矩形填满该格子，效果如下：

算法实现：

  /**
   * 计算矩形顶点
   * 
   * @param xList Y轴坐标
   * @param yList X轴坐标
   * @param point 鼠标所在点
   * @returns 
   */
  findSurroundingRectangle(xList: number[], yList: number[], point: Point): Rectangle {
    const { x, y } = point;
    
    // 找到左边和右边的x坐标
    const leftX: number | null = xList.filter((hx: number) => hx < x).pop() ?? null;
    const rightX: number | null = xList.find((hx: number) => hx > x) ?? null;

    // 找到上边和下边的y坐标（y轴向下）
    const upperY: number | null = yList.filter((vy: number) => vy < y).pop() ?? null;
    const lowerY: number | null = yList.find((vy: number) => vy > y) ?? null;

    if (leftX === null || rightX === null || upperY === null || lowerY === null) {
      return;
    }

    const width: number = rightX - leftX;
    const height: number = lowerY - upperY;
    
    return { x: leftX, y: upperY, width, height };
  }