/**
 * 計算每一個網(wǎng)格的寬高大小，注意并不是 gridCount 是多少就會有多少網(wǎng)格
 * 因為我們的坐標(biāo)刻度通常都是 10、5、1、0.5、0.1 這個樣子，大部分都是以 2、5、10 的倍數(shù)
 * @param len x 或 y 軸代表的長度
 * @param gridCount 網(wǎng)格個數(shù)
 */
calcGridSize(len: number, gridCount: number): number[] {
    let gridWidth = 1;
    // 應(yīng)該保留幾位小數(shù)，避免浮點數(shù)
    let fixedCount = 0;
    // 事實上，要是圖方便的話，你也可以直接用 unitX 來當(dāng)做網(wǎng)格大小，不過記得要取整
    let unitX = len / gridCount;
    // 而這里呢，我們需要找到離 unitX 最近的（稍微偏整數(shù)的）值
    // 首先要找到離 unitX 最近的 10 的整數(shù)倍，如 0.01、0.1、1、10、100
    while (gridWidth < unitX) {
        gridWidth *= 10
    }
    while (gridWidth / 10 > unitX) {
        gridWidth /= 10
        fixedCount++;
    }
    // 看看能不能再劃分一次，如（/5 得到 0.02、0.2、20）、（/2 得到 0.05、5、50）
    if (gridWidth / 5 > unitX) {
        gridWidth /= 5;
        fixedCount++;
    } else if (gridWidth / 2 > unitX) {
        gridWidth /= 2;
        fixedCount++;
    }
    // 因為 x 軸長度和 y 軸的長度是一樣的，所以可以這樣賦值
    return [gridWidth, gridWidth, fixedCount];
}

drawGrid() {
    const { width, height, leftX, rightX, leftY, rightY, xLen, yLen, gridCount, ctx2d } = this;
    ctx2d?.save();
    // 注意這里我們是將網(wǎng)格數(shù)作為配置項，而不是網(wǎng)格的寬高大小
    const [gridWidth, gridHeight, fixedCount] = this.calcGridSize(xLen, gridCount);
    // 由于計算會產(chǎn)生浮點數(shù)偏差，所以要控制下小數(shù)點后面的數(shù)字個數(shù)
    this.fixedCount = fixedCount;
    // 從左到右繪制豎線
    for (let i = Math.floor(leftX / gridWidth); i * gridWidth < rightX; i++) {
        // 繪制像素點 / 整個畫布寬度 = 實際 x 值 / 實際表示的 x 軸長度
        const x = (i * gridWidth - leftX) / xLen * width;
        // i = 0 就說明是 y 軸，顏色加深
        const color = i ? '#ddd' : '#000';
        this.drawLine(x, 0, x, height, color)
        this.fillText(String(this.formatNum(i * gridWidth, this.fixedCount)), x, height, this.fontSize, TextAlign.Center);
    }
    // 繪制橫線也是和上面一樣的方法，就是要注意畫布的 y 軸向下，需要用 height 減一下，或者用 scale(1, -1);
    for (let j = Math.floor(leftY / gridHeight); j * gridHeight < rightY; j++) {
        let y = (j * gridWidth - leftY) / yLen * height;
        y = height - y;
        const color = j ? '#ddd' : '#000';
        this.drawLine(0, y, width, y, color);
        this.fillText(String(this.formatNum(j * gridHeight, this.fixedCount)), 0, y, this.fontSize, TextAlign.Middle);
    }
    ctx2d?.restore();
}
// 保留 fixedCount 位小數(shù)，整數(shù)不補零
formatNum(num: number, fixedCount: number): number {
    return parseFloat(num.toFixed(fixedCount));
}

/** 繪制函數(shù)曲線，就是用一段段直線連起來 */
drawFn() {
    const { width, height, leftX, leftY, xLen, yLen, steps, ctx2d } = this;
    if (!ctx2d) return;
    ctx2d.save();
    this.fnList.forEach(fn => {
        ctx2d.strokeStyle = (fn as any).color;
        ctx2d.beginPath();
        for (let i = 0; i < width; i += steps) {
            // 小小的公式推導(dǎo)：像素點 / 畫布寬 = x / 實際表示的 x 軸長度
            const x = i / width * xLen + leftX;
            let y = fn(x);
            if (isNaN(y)) continue;
            // 換算到具體繪制點
            y = height - (y - leftY) / yLen * height;
            // 在畫布之外是不用繪制的所以用 moveTo 即可
            if (i === 0 || y > height || y < 0) {
                ctx2d.moveTo(i, y);
            } else {
                ctx2d.lineTo(i, y);
            }
        }
        ctx2d.stroke();
    });
    ctx2d.restore();
}

// 初始狀態(tài)
ctx2d.save();
// 在這里設(shè)置各種狀態(tài)1
    ctx2d.save();
    // 在這里設(shè)置各種狀態(tài)2
    ctx2d.restore();
// 這里是狀態(tài)1
ctx2d.restore();
// 這里是初始狀態(tài)

drawSubLine(canvasPos: Point) {
    const ctx2d: CanvasRenderingContext2D | null = this.ctx2d;
    if (!ctx2d) return;
    const { width, height } = this;
    const { x, y } = canvasPos;
    // 先重新繪制網(wǎng)格和函數(shù)曲線
    this.draw();
    // 繪制輔助線
    ctx2d.save();
    this.drawLine(x, 0, x, height, '#999',true);
    this.drawLine(0, y, width, y, '#999', true);
    ctx2d.restore();
    // 繪制鼠標(biāo)點
    const centerRectLen: number = 8;
    this.strokeRect(x - centerRectLen / 2, y - centerRectLen / 2, centerRectLen, centerRectLen);
    const actualPos = this.canvasPosToFnVal(canvasPos);
    // 繪制曲線和輔助線的交點坐標(biāo)
    this.handleCrosspoint(actualPos.x);
}
handleCrosspoint(x: number) {
    const pointList: Point[] = this.checkCrosspoint(x);
    pointList.forEach(point => {
        const { x, y } = this.fnValToCanvasPos(point);
        this.fillCircle(x, y, 4, 'red');
        this.fillText(`[${this.formatNum(point.x, this.fixedCount + 1)}, ${this.formatNum(point.y, this.fixedCount + 1)}]`, x, y, this.fontSize);
    });
}

this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this), false);
// 也可以把 mouseup 和 mousemove 這兩個監(jiān)聽寫在 mousedown 的回調(diào)中
document.addEventListener('mouseup', this.handleMouseUp.bind(this), false);
document.addEventListener('mousemove', this.handleMouseMove.bind(this), false);

// 返回距離畫布左上角的點
viewportToCanvasPosition(e: MouseEvent): Point {
    const { clientX, clientY } = e;
    const { top, left } = this.canvas.getBoundingClientRect();
    const x = clientX - top;
    const y = clientY - left;
    return new Point(x, y);
}
// 記錄鼠標(biāo)按下的點
handleMouseDown(e: MouseEvent) {
    const canvasPos: Point = this.viewportToCanvasPosition(e);
    this.state.startPos = canvasPos;
}
// 計算平移距離，更新 leftX 和 rightX 的值，然后重新繪制
handleMouseMove(e: MouseEvent) {
    const canvasPos: Point = this.viewportToCanvasPosition(e);
    if (!this.state.startPos) return;
    document.body.style.cursor = 'move';
    this.state.endPos = canvasPos;
    const { width, height, xLen, yLen, state: { startPos, endPos } } = this;
    // 算出平移距離
    const dx = (endPos.x - startPos.x) / width * xLen;
    const dy = (endPos.y - startPos.y) / height * yLen;
    // 更新邊界值
    this.leftX -= dx;
    this.rightX -= dx;
    this.leftY += dy;
    this.rightY += dy;
    this.xLen = this.rightX - this.leftX;
    this.yLen = this.rightY - this.leftY;
    this.draw();
    this.state.startPos = canvasPos;
}
// 還原拖拽前的狀態(tài)
handleMouseUp(e: MouseEvent) {
    this.state.startPos = null;
    this.state.endPos = null;
    document.body.style.cursor = 'auto';
}

this.canvas.addEventListener('mousewheel', this.handleMouseWheel.bind(this), false);

handleMouseWheel(e: Event) {
    e.preventDefault();
    const event: WheelEvent = e as WheelEvent;
    const canvasPos: Point = this.viewportToCanvasPosition(event);
    const { deltaY } = event;
    const { leftX, rightX, leftY, rightY } = this;
    const scale: number = deltaY > 0 ? 1.1 : 0.9;
    if (this.isInvalidVal(scale)) return;
    const { x, y } = this.canvasPosToFnVal(canvasPos);
    // 注意縮放和平移不一樣，軸的左右兩邊一邊是加一邊是減
    this.leftX = x - (x - leftX) * scale;
    this.rightX = x + (rightX - x) * scale;
    this.leftY = y - (y - leftY) * scale;
    this.rightY = y + (rightY - y) * scale;
    this.xLen = this.rightX - this.leftX;
    this.yLen = this.rightY - this.leftY;
    this.draw();
}
/** 縮放過大過小都沒啥意義，所以設(shè)置下邊界值 */
isInvalidVal(ratio: number): boolean {
    const { xLen, yLen, MIN_DELTA, MAX_DELTA } = this;
    if (ratio > 1 && (xLen > MAX_DELTA || yLen > MAX_DELTA)) return true;
    if (ratio < 1 && (xLen < MIN_DELTA || yLen < MIN_DELTA)) return true;
    // 上面的判斷為什么不直接 （xLen > MAX_DELTA || yLen > MAX_DELTA || xLen < MIN_DELTA || yLen < MIN_DELTA）這樣判斷呢？
    // 因為如果這樣判斷你會發(fā)現(xiàn)縮放到最大和最小的時候，再繼續(xù)操作都是無效的。
    return false;
}
canvasPosToFnVal(canvasPos: Point): Point {
    const { width, height, leftX, leftY, xLen, yLen } = this;
    const x = leftX + canvasPos.x / width * xLen;
    const y = leftY + canvasPos.y / height * yLen;
    return new Point(x, y);
}