function Grid({node, unit, row, col, matrix = []}) {
    // 存儲頂點(diǎn)
    this.vertexes = [];
    // 存儲邊
    this.lines = [];
    
    // 根據(jù)起點(diǎn)坐標(biāo)以及單位邊長計(jì)算
    for (let i = 0; i <= row; i++) {
        for (let j = 0; j <= col; j++) {
            const newVertex = makeRect(node.x + i * unit, node.y + j * unit);
            this.vertexes.push(newVertex);
        }
    }
    
    // 添加頂點(diǎn)對象的事件監(jiān)聽器
    this.addListener();
}

// ...省略了

// 構(gòu)造矩陣
this.matrix = [];
let index = -1;
for (let i = 0; i < this.vertexes.length; i++) {
    if (i % (col + 1) === 0) {
        index++;
        this.matrix[index] = [];
    }
    this.matrix[index].push(this.vertexes[i]);
}

// 根據(jù)矩陣添加邊
let idx = 0;
for (let i = 0; i < this.matrix.length; i++) {
    for (let j = 0; j < this.matrix[i].length; j++) {
        // 交叉渲染邊，這樣能夠在可視區(qū)內(nèi)優(yōu)先展示
        this.matrix[i][j+1] && this.makeLine(this.matrix[i][j], this.matrix[i][j+1]);
        this.vertexes[idx + col + 1] &&
            this.makeLine(this.vertexes[idx], this.vertexes[idx + col + 1]);
        idx++;
    }
}

for (let i = 0; i < this.vertexes.length; i++) {
  const vertex = this.vertexes[i];
  // 根據(jù)頂點(diǎn)的坐標(biāo)是否是邊的兩端的開始或結(jié)束坐標(biāo)來判斷頂點(diǎn)是否與這條邊關(guān)聯(lián)
  const associateLines = this.lines.filter(item => {
    return (item.x1 === vertex.left && item.y1 === vertex.top) ||
      (item.x2 === vertext.left && item.y2 === vertex.top);
  });
  vertex.lines = associateLines;
}

function Grid({node, unit, row, col, matrix = []}) {
    this.vertexes = [];
    this.lines = [];
    this.edges = new Map();

    this.addEdges = addEdges;
    this.addVertexes = addVertexes;
}

function Grid({node, unit, row, col, matrix = []}) {
    // ...省略

    // 根據(jù)矩陣添加邊
    let idx = 0;
    for (let i = 0; i < this.matrix.length; i++) {
        for (let j = 0; j < this.matrix[i].length; j++) {
            // 交叉渲染邊，這樣能夠在可視區(qū)內(nèi)優(yōu)先展示
            this.matrix[i][j+1] && this.addEdges(this.matrix[i][j], this.matrix[i][j+1]);
            this.vertexes[idx + col + 1] &&
                this.addEdges(this.vertexes[idx], this.vertexes[idx + col + 1]);
            idx++;
        }
    }

    // 將邊關(guān)聯(lián)到頂點(diǎn)
    this.edges.forEach((value, key) => {
        key.lines = value;
    });
}

function addEdges(v, w) {
    const line = makeLine({point1: v, point2: w});
    // 頂點(diǎn)v關(guān)聯(lián)了邊line
    this.edges.get(v).push(line);
    // 頂點(diǎn)w也同時(shí)關(guān)聯(lián)了邊line
    this.edges.get(w).push(line);
    this.lines.push(line);
}

function addVertexes(v) {
    this.vertexes.push(v);
    // 給每個(gè)頂點(diǎn)設(shè)置一個(gè)Map結(jié)構(gòu)
    this.edges.set(v, []);
}

// fabric的API，添加fabric對象到畫布中
canvas.add(...this.vertexes);
canvas.add(...this.lines);

function renderIdleCallback(canvas) {
    // 任務(wù)切片
    const points = this.points.slice();
    const lines = this.lines.slice();
    const task = () => {
        // 清理canvas的時(shí)候，中斷后面的渲染
        if (this.interrupt) return;
        if (!points.length && !lines.length) return;
        let slicePoint = [], sliceLine = [];
        for (let i = 0; i < 10; i++) {
            if (points.length) {
                const top = points.shift();
                slicePoint.push(top);
            }
            if (lines.length) {
                const top = lines.shift();
                sliceLine.push(top);
            }
        }
        canvas.add(...slicePoint);
        canvas.add(...sliceLine);
        window.requestAnimationFrame(task);
    }
    task();
}