寻找矩形顶点

算法背景

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

算法实现：

interface Point {
    x: number;
    y: number;
}

interface Rectangle {
    topLeft: Point;
    width: number;
    height: number;
}

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

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

    if (leftX === null || rightX === null || upperY === null || lowerY === null) {
        throw new Error("无法找到四个点包围给定的点");
    }

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