Method render

src/component/matrix/MatrixView.ts:57–139

(matrixModel: MatrixModel, ecModel: GlobalModel)

    type = MatrixView.type;

    render(matrixModel: MatrixModel, ecModel: GlobalModel) {

        this.group.removeAll();

        const group = this.group;
        const coordSys = matrixModel.coordinateSystem;
        const rect = coordSys.getRect();
        const xDimModel = matrixModel.getDimensionModel('x');
        const yDimModel = matrixModel.getDimensionModel('y');
        const xDim = xDimModel.dim;
        const yDim = yDimModel.dim;

        // PENDING:
        //  reuse the existing text and rect elements for performance?

        renderDimensionCells(
            group,
            matrixModel,
            ecModel
        );

        createBodyAndCorner(
            group,
            matrixModel,
            xDim,
            yDim,
            ecModel
        );

        const borderZ2Option = matrixModel.getShallow('borderZ2', true);
        const outerBorderZ2 = retrieve2(borderZ2Option, Z2_OUTER_BORDER);
        const dividerLineZ2 = outerBorderZ2 - 1;

        // Outer border and overall background. Use separate elements because of z-order:
        // The overall background should appear below any other elements.
        // But in most cases, the outer border and the divider line should be above the normal cell borders -
        // especially when cell borders have different colors. But users may highlight some specific cells by
        // overstirking their border, in which case it should be above the outer border.
        const bgStyle = matrixModel.getModel('backgroundStyle').getItemStyle(
            ['borderWidth']
        );
        bgStyle.lineWidth = 0;
        const borderStyle = matrixModel.getModel('backgroundStyle').getItemStyle(
            ['color', 'decal', 'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY']
        );
        borderStyle.fill = 'none';
        const bgRect = createMatrixRect(rect.clone(), bgStyle, Z2_BACKGROUND);
        const borderRect = createMatrixRect(rect.clone(), borderStyle, outerBorderZ2);
        bgRect.silent = true;
        borderRect.silent = true;
        group.add(bgRect);
        group.add(borderRect);

        // Header split line.
        const xDimCell0 = xDim.getUnitLayoutInfo(0, 0);
        const yDimCell0 = yDim.getUnitLayoutInfo(1, 0);
        if (xDimCell0 && yDimCell0) {
            if (xDim.shouldShow()) {