githubmirror/echarts

test/matrix2.html
1 220 строк51 KB
100pah
test(matrix): (1) Migrate (split) test case from `matrix2.html` to `matrix4.html`, as the previous is too long to visual test regression. (2) Fix test case for coordClamp.
16 июл 2025, 11:21
16 июл 2025, 11:211550ca2
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/draggable.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>


        <div id="main_layout"></div>
        <div id="main_edge_cases"></div>
        <div id="main_self_layout"></div>
        <div id="main_dim_data_edge_cases"></div>


        <script>
            require([
                'echarts',
            ], function (echarts) {

                const MatrixClampOption = {
                    none: 0,
                    all: 1,
                    body: 2,
                    corner: 3,
                };

                var LEVEL_SIZE_1 = 15;
                var LEVEL_SIZE_2 = 20;
                var LEVEL_SIZE_3 = '10%';
                var LEVEL_SIZE_4 = '0%';
                var CELL_SIZE_1 = 30;
                var CELL_SIZE_2 = 0;
                var BODY_COMMON_COLOR = 'rgba(200, 150, 20, 0.1)';
                var BODY_R2_A2_COLOR = 'rgba(200, 155, 0)';
                var BODY_R1_B2_COLOR = 'rgba(200, 115, 200, 0.3)';
                var X_COMMON_COLOR = 'rgba(22, 188, 212, 0.1)';
                var X_T1_COLOR = 'rgba(12,122,250,0.8)';

                var bodyData = [
                    {
                        coord: ['R2', 'A3'],
                        mergeCells: true,
                    },
                    {
                        coord: [['R1', 'S'], 'A'],
                        itemStyle: {
                            color: 'rgb(220,240,130)',
                        }
                    },
                    {
                        coord: ['R1', ['B4', 'C']],
                        mergeCells: true,
                    },
                    {
                        coord: [['R1', 'R2'], ['B2', 'B3']],
                        itemStyle: {
                            borderWidth: 4,
                            borderColor: 'orange',
                            color: 'red',
                        },
                        mergeCells: true,
                    },
                    {
                        coord: ['R2', 'A2'],
                        itemStyle: {
                            borderWidth: 4,
                            borderColor: 'blue',
                            color: BODY_R2_A2_COLOR,
                        },
                        z2: 200,
                    },
                    {
                        coord: [['R2', 'T'], 'B2'], // Overlap span, should be ignored.
                        mergeCells: true,
                        itemStyle: {
                            borderWidth: 4,
                            borderColor: 'rgb(200, 152, 222)',
                            color: BODY_R1_B2_COLOR,
                        },
                        _desc: 'expand to cover all merged cells'
                    },
                    {
                        coord: ['T', ['A1', 'A31']], // Overlap span, should be ignored.
                        mergeCells: true,
                        itemStyle: {
                            borderColor: 'rgb(123,134,10)',
                            borderWidth: 3,
                            color: 'rgb(220,230,170)',
                        },
                        z2: 200,
                    },
                    {
                        coord: ['R2', 'E'],
                        value: 'very long long long text',
                        label: {
                            color: 'red',
                        }
                    },
                    {
                        coord: ['U', null],
                        coordClamp: true,
                        itemStyle: {
                            color: 'rgb(220,230,170)',
                        },
                    },
                    {
                        coord: [NaN, 'F'],
                        coordClamp: true,
                        mergeCells: true,
                    }
                ];

                var cornerData = [
                    {
                        coord: [null, -2],
                        coordClamp: true,
                        value: 'some',
                        mergeCells: true,
                    }
                ]

                const MATRIX_BACKGROUND_STYLE_MAP = {
                    do_nothing: {
                        backgroundStyle: {},
                        x: {
                            itemStyle: {},
                        },
                    },
                    style1: {
                        backgroundStyle: {
                            borderWidth: 5,
                        },
                        x: {
                            itemStyle: {
                                borderWidth: 2,
                                color: 'red',
                                borderColor: 'rgba(11,222,33)'
                            }
                        }
                    },
                    style2: {
                        backgroundStyle: {
                            borderWidth: 1,
                        },
                        x: {
                            itemStyle: {
                                borderWidth: 1,
                                color: 'none',
                                borderColor: 'blue'
                            }
                        }
                    },
                };

                // --- state ------
                let _xShowing = true;
                let _yShowing = true;
                let _convertFromPixelClampOpt = undefined;
                let _convertToPointCaseItem = null;
                let _matrixBgStyleIndex = 0;
                let _textOverflow = 'truncate'; // internal default value.
                // ----------------

                var option;
                option = {
                    backgroundColor: '#eee',
                    tooltip: {},
                    title: {
                        text: '',
                        right: 'center',
                    },
                    matrix: {
                        left: 120,
                        right: '29%',
                        tooltip: {
                            show: true,
                            formatter(params) {
                                return params.name;
                            }
                        },
                        x: {
                            label: {
                            },
                            itemStyle: {
                                color: X_COMMON_COLOR
                            },
                            levels: [null, {levelSize: LEVEL_SIZE_1}],
                            data: [
                                {
                                    value: 'R',
                                    children: ['R1', {value: 'R2', size: CELL_SIZE_1}]
                                },
                                {
                                    value: 'S'
                                },
                                {
                                    value: 'T',
                                    children: [
                                        {
                                            value: 'T1',
                                            itemStyle: {
                                                borderWidth: 3,
                                                borderColor: 'rgba(12,12,190)',
                                                color: X_T1_COLOR,
                                            },
                                            label: {
                                                fontSize: 22,
                                                color: '#fff',
                                                textBorderColor: '#333',
                                                textBorderWidth: 2,
                                            },
                                            children: ['T11']
                                        }
                                    ]
                                },
                                {
                                    value: 'long long header text 1',
                                    label: {
                                        color: 'rgb(211,111,0)',
                                    },
                                    children: [{
                                        value: 'long long header text 2',
                                        label: {
                                            color: 'rgb(211,81,0)',
                                        }
                                    }]
                                },
                                {
                                    value: 'U',
                                    size: 20,
                                },
                                {
                                    value: 'V',
                                    size: 20,
                                }
                            ]
                        },
                        y: {
                            levelSize: LEVEL_SIZE_2,
                            levels: [
                                null,
                                {levelSize: LEVEL_SIZE_4},
                                null,
                                null,
                                {levelSize: LEVEL_SIZE_3}
                            ],
                            data: [{
                                value: 'LLL',
                                children: [{
                                    value: 'LL',
                                    children: [
                                        {
                                            value: 'A',
                                            children: ['A1', 'A2', {
                                                value: 'A3',
                                                children: ['A31', 'A32']
                                            }]
                                        }, {
                                            value: 'B',
                                            children: ['B1', 'B2', 'B3', 'B4']
                                        }, {
                                            value: 'C',
                                        }, {
                                            value: 'D',
                                            size: CELL_SIZE_2,
                                        }
                                    ]
                                }, {
                                    value: 'E',
                                }, {
                                    value: 'F',
                                    itemStyle: {
                                        color: '#bbb'
                                    }
                                }]
                            }]
                        },
                        body: {
                            data: bodyData,
                            label: {
                            },
                            itemStyle: {
                                color: BODY_COMMON_COLOR
                            }
                        },
                        corner: {
                            itemStyle: {
                                borderWidth: 1,
                            },
                            data: cornerData,
                        }
                    },
                    graphic: {
                        elements: [{
                            right: 5,
                            y: 5,
                            id: 'info_bodyData',
                            type: 'text',
                            style: {
                                text: 'Check body cell merge and style:\n' + testHelper.printObject(bodyData, {lineBreakMaxColumn: 40}),
                                fontSize: 7,
                            }
                        }, {
                            left: 5,
                            y: 5,
                            id: 'info_cornerData',
                            type: 'text',
                            style: {
                                text: 'Check corner cell merge and style:\n' + testHelper.printObject(cornerData, {lineBreakMaxColumn: 40}),
                                fontSize: 7,
                            }
                        }, {
                            x: 120,
                            y: 5,
                            id: 'info2',
                            type: 'text',
                            style: {
                                text: [
                                    'Check background: ',
                                    ` BODY_COMMON_COLOR = ${BODY_COMMON_COLOR}`,
                                    ` BODY_R2_A2_COLOR = ${BODY_R2_A2_COLOR}`,
                                    ` BODY_R1_B2_COLOR = ${BODY_R1_B2_COLOR}`,
                                    ` X_COMMON_COLOR = ${X_COMMON_COLOR}`,
                                    ` X_T1_COLOR = ${X_T1_COLOR}`,
                                ].join('\n'),
                                fontSize: 7,
                            }
                        }]
                    },
                    grid: [{
                        id: 'aa',
                        coordinateSystem: 'matrix',
                        coord: ['R2', 'B3'],
                        top: 5,
                        left: 5,
                        right: 5,
                        bottom: 5,
                        containLabel: true,
                    }, {
                        id: 'bb',
                        coordinateSystem: 'matrix',
                        coord: ['R1', 'B4'],
                        top: 5,
                        left: 5,
                        right: 5,
                        bottom: 5,
                        containLabel: true,
                    }],
                    xAxis: [{
                        id: 'aa',
                        gridId: 'aa',
                        axisLabel: {fontSize: 9}
                    }, {
                        id: 'bb',
                        gridId: 'bb',
                        data: ['bb1', 'bb2', 'bb3'],
                        axisLabel: {fontSize: 9}
                    }],
                    yAxis: [{
                        id: 'aa',
                        gridId: 'aa',
                        interval: Infinity,
                        axisLabel: {fontSize: 9, showMinLabel: true, showMaxLabel: true,},
                    }, {
                        id: 'bb',
                        gridId: 'bb',
                        interval: Infinity,
                        axisLabel: {fontSize: 9, showMinLabel: true, showMaxLabel: true,},
                    }],
                    series: [{
                        type: 'scatter',
                        coordinateSystem: 'matrix',
                        symbolSize: 30,
                        data: [
                            ['R1', 'A1', 10], ['R2', 'A1', 20], ['R1', 'A2', 30]
                        ],
                        label: {
                            show: true,
                            formatter: params => {
                                return params.data[2];
                            }
                        }
                    }, {
                        // type: 'effectScatter',
                        type: 'scatter',
                        coordinateSystem: 'matrix',
                        symbolSize: function (val) {
                            return val[2] / 3;
                        },
                        data: [
                            ['R2', 'A2', 40], ['R1', 'A31', 50], ['R2', 'A3', 60]
                        ],
                    }, {
                        type: 'scatter',
                        name: 'right desc',
                        silent: true,
                        coordinateSystem: 'matrix',
                        symbolSize: 0,
                        symbolOffset: [0, 10],
                        label: {show: true, overflow: 'break', minMargin: 15},
                        labelLine: {show: true},
                        labelLayout: {
                            x: '73%',
                            moveOverlap: 'shiftY',
                            width: 70,
                        },
                        encode: {label: [0, 1, 2]},
                        data: [
                            ['T1', -2, `x.levels[3].levelSize: ${LEVEL_SIZE_1}`],
                            ['T11', -1, 'levelSize: average (not specified)'],
                            ['R2', -1, `size: ${CELL_SIZE_1}`],
                        ]
                    }, {
                        type: 'scatter',
                        name: 'left desc',
                        silent: true,
                        coordinateSystem: 'matrix',
                        symbolSize: 0,
                        symbolOffset: [0, 10],
                        label: {show: true, overflow: 'break', minMargin: 15},
                        labelLine: {show: true},
                        labelLayout: {x: '1%', width: 110, moveOverlap: 'shiftY'},
                        encode: {label: [0, 1, 2]},
                        data: [
                            [-3, 'A', `y.levelSize: ${LEVEL_SIZE_2}`],
                            [-2, 'A3', `y.levelSize: ${LEVEL_SIZE_2}`],
                            [-1, 'A31', `y.levels[4].levelSize: ${LEVEL_SIZE_3}`],
                            [-1, 'D', `size: ${CELL_SIZE_2}`],
                            [-4, 'E', `y.levels[2].levelSize: ${LEVEL_SIZE_4}`]
                        ]
                    },
                    {
                        type: 'line',
                        xAxisId: 'aa',
                        yAxisId: 'aa',
                        data: [[11, 22], [33, 44], [55, 66]],
                    }, {
                        type: 'bar',
                        xAxisId: 'bb',
                        yAxisId: 'bb',
                        data: [987, 583, 671],
                    }]
                };

                var chart = testHelper.create(echarts, 'main_layout', {
                    title: [
                        'Locator testing.',
                        'scatter, cartesian, with Matrix.',
                        'cell merging: should display **on the center** of the merged cell.',
                        'click on cell to call convertFromPixel - especially on span cell.',
                        'click on corner should correct.',
                        'tooltip can be displayed for text (consider overflow).',
                    ],
                    height: 500,
                    option: option,
                    inputsStyle: 'compact',
                    inputs: [
                        {
                            text: 'matrix.x show:',
                            type: 'select',
                            values: [true, false],
                            onchange() {
                                _xShowing = this.value;
                                chart.setOption({
                                    matrix: {
                                        x: {show: _xShowing},
                                    },
                                });
                                updateCaseView();
                            }
                        },
                        {
                            text: 'matrix.y show:',
                            type: 'select',
                            values: [true, false],
                            onchange() {
                                _yShowing = this.value;
                                chart.setOption({
                                    matrix: {
                                        y: {show: _yShowing},
                                    },
                                });
                                updateCaseView();
                            }
                        },
                        {
                            text: 'convertFromPixel clamp:',
                            type: 'select',
                            options: [
                                {value: undefined}
                            ].concat(Object.keys(MatrixClampOption).map(key => ({
                                text: key,
                                value: MatrixClampOption[key],
                            }))),
                            onchange() {
                                _convertFromPixelClampOpt = this.value;
                                updateCaseView();
                            },
                        },
                        {
                            type: 'select',
                            text: 'text overflow:',
                            values: ['truncate', 'break', 'none'],
                            onchange() {
                                _textOverflow = this.value;
                                chart.setOption({
                                    matrix: {
                                        x: {label: {overflow: _textOverflow}},
                                        y: {label: {overflow: _textOverflow}},
                                        body: {label: {overflow: _textOverflow}},
                                        corner: {label: {overflow: _textOverflow}},
                                    },
                                });
                                updateCaseView();
                            }
                        },
                        {
                            type: 'select',
                            text: 'switch style:',
                            values: Object.keys(MATRIX_BACKGROUND_STYLE_MAP),
                            onchange() {
                                const preset = MATRIX_BACKGROUND_STYLE_MAP[this.value];
                                chart.setOption({
                                    matrix: {
                                        backgroundStyle: preset.backgroundStyle,
                                        x: {
                                            itemStyle: preset.x.itemStyle,
                                        }
                                    }
                                });
                                updateCaseView();
                            }
                        },
                        {
                            type: 'select',
                            text: 'convertToPixel test cases:',
                            values: [
                                'do_nothing',
                                ['R2', 'A31'],
                                ['not_exists', 'A1'],
                                ['S', Infinity],
                                [1, 3],
                                ['R1', 'A'],
                                ['R1', 'A2'],
                                ['R1', 'B4'],
                                ['R1', 'B2'],
                                ['R1', 'C'],
                                ['R2', 'B3'],
                            ],
                            onchange() {
                                const caseItem = this.value;
                                if (caseItem === 'do_nothing') {
                                    return;
                                }
                                _convertToPointCaseItem = this.value;
                                updateCaseView();
                            }
                        },
                    ]
                });

                function updateCaseView() {
                    if (!_convertToPointCaseItem) {
                        return;
                    }
                    const result = chart.convertToPixel({matrixIndex: 0}, _convertToPointCaseItem);
                    updateConvertToPixelResult(result);
                }

                function updateConvertToPixelResult(result) {
                    console.log(result);
                    chart.setOption({
                        title: {
                            text: 'convertToPixel result: ' + testHelper.printObject(result)
                        },
                        graphic: {
                            elements: [{
                                id: 'result',
                                type: 'circle',
                                shape: {
                                    cx: result[0],
                                    cy: result[1],
                                    r: 20,
                                },
                                ignore: isNaN(result[0]) || isNaN(result[1]),
                                z: 1000,
                                style: {
                                    stroke: 'red',
                                    fill: null,
                                    lineWidth: 5,
                                    opacity: 0.8,
                                },
                                textContent: {
                                    style: {
                                        text: '⬅ convertToPixel result',
                                        fill: 'red',
                                    },
                                    z: 1000,
                                },
                                textConfig: {
                                    position: 'right'
                                },
                            }]
                        }
                    });
                }

                if (chart) {
                    chart.getZr().on('click', function (event) {
                        const point = [event.offsetX, event.offsetY];
                        let opt = null;
                        if (_convertFromPixelClampOpt != null) {
                            opt = {clamp: _convertFromPixelClampOpt};
                        }
                        const result = chart.convertFromPixel({matrixIndex: 0}, point, opt);
                        console.log('point', point, 'result', result);
                        chart.setOption({
                            title: {
                                text: 'convertFromPixel result: ' + testHelper.printObject(result)
                            }
                        });
                    });
                }

            });

        </script>







        <script>
            require([
                'echarts',
            ], function (echarts) {

                var LEVEL_SIZE_1 = 15;
                var LEVEL_SIZE_2 = 20;
                var LEVEL_SIZE_3 = '10%';
                var LEVEL_SIZE_4 = '0%';
                var CELL_SIZE_1 = 30;
                var CELL_SIZE_2 = 0;
                var BODY_COMMON_COLOR = 'rgba(200, 150, 20, 0.1)';
                var BODY_R2_A2_COLOR = 'rgba(200, 155, 0)';
                var BODY_R1_B2_COLOR = 'rgba(200, 115, 200, 0.3)';
                var X_COMMON_COLOR = 'rgba(22, 188, 212, 0.1)';
                var X_T1_COLOR = 'rgba(12,122,250,0.8)';

                var _bodyData = [
                    {
                        coord: ['R2', 'A3'],
                        mergeCells: true,
                        value: 'merged',
                    },
                    {
                        coord: ['R1', ['B4', 'C']],
                        mergeCells: true,
                        value: 'merged',
                    },
                    {
                        coord: [['R1', 'R2'], ['B2', 'B3']],
                        mergeCells: true,
                        value: 'merged',
                    },
                    {
                        coord: ['O', ['B2', 'not_exist']],
                        coordClamp: true,
                        mergeCells: true,
                        value: 'merged',
                        __expect: 'column O merged'
                    },
                    {
                        coord: ['T', ['A1', 'A31']],
                        mergeCells: true,
                        value: 'merged',
                    },
                    {
                        coord: ['S', null],
                        coordClamp: true,
                        mergeCells: true,
                        value: 'merged',
                        __expect: 'column S merged.'
                    },
                ];
                var _cornerData = [
                    {
                        coord: [[-1, -2], -1],
                        mergeCells: true,
                        value: 'merged',
                    }
                ];

                const _xData = [
                    {
                        value: 'R',
                        children: ['R1', {value: 'R2', size: CELL_SIZE_1}]
                    },
                    {
                        value: 'S'
                    },
                    {
                        value: 'T',
                        children: [
                            {
                                value: 'T1',
                                children: ['T11'],
                            }
                        ]
                    },
                    'O',
                    'P',
                ];
                const _yData = [
                    {
                        value: 'A',
                        children: ['A1', 'A2', {
                            value: 'A3',
                            children: ['A31', 'A32']
                        }]
                    }, {
                        value: 'B',
                        children: ['B1', 'B2', 'B3', 'B4']
                    }, {
                        value: 'C',
                    }, {
                        value: 'D',
                    }
                ];
                const MatrixClampOption = {
                    none: 0,
                    all: 1,
                    body: 2,
                    corner: 3,
                };

                // --- state ------
                let _xShowing = true;
                let _yShowing = true;
                let _convertToLayoutClampOpt = undefined;
                let _ignoreMergeCells = undefined;
                let _testCase = null;
                // ----------------

                function calcMeta() {
                    const xMeta = calcOneDim(_xData);
                    const yMeta = calcOneDim(_yData);
                    function calcOneDim(xyData) {
                        let levelCount = 0;
                        let leafCount = 0;
                        travel(xyData, 0, 0);
                        function travel(list, locatorStart, level) {
                            levelCount = Math.max(levelCount, level);
                            leafCount = Math.max(leafCount, locatorStart);
                            if (!list) {
                                return;
                            }
                            list.forEach((item, idx) => {
                                travel(item.children, locatorStart + idx, level + 1);
                            });
                        }
                        return {levelCount, leafCount};
                    }
                    const xUnitCount = xMeta.leafCount + (_yShowing ? yMeta.levelCount : 0);
                    const yUnitCount = yMeta.leafCount + (_xShowing ? xMeta.levelCount : 0);
                    return {xUnitCount, yUnitCount};
                }

                var option;
                option = {
                    backgroundColor: '#eee',
                    tooltip: {},
                    title: {
                        text: '',
                        right: 'center',
                    },
                    matrix: [{
                        // matrix 0
                        right: 10,
                        bottom: 10,
                        width: 180,
                        height: 80,
                        x: {
                            data: ['X1', 'X2', 'X3'],
                        },
                        y: {
                            data: ['Y1', 'Y2', 'Y3', 'Y4'],
                        },
                        body: {
                            data: [{
                                coord: [[0, 2], [1, 2]],
                                value: 'should be right-bottom',
                                mergeCells: true,
                            }]
                        },
                    }, {
                        // matrix 1
                        id: 'main_matrix',
                        right: 10,
                        left: 230,
                        top: 50,
                        bottom: 120,
                        tooltip: {
                            show: true,
                            formatter(params) {
                                return params.name;
                            }
                        },
                        x: {
                            label: {
                            },
                            itemStyle: {
                                color: X_COMMON_COLOR
                            },
                            levels: [null, {levelSize: LEVEL_SIZE_1}],
                            data: _xData
                        },
                        y: {
                            levelSize: 40,
                            data: _yData,
                        },
                        body: {
                            data: _bodyData,
                            label: {
                            },
                            itemStyle: {
                                color: BODY_COMMON_COLOR
                            }
                        },
                        corner: {
                            data: _cornerData,
                            itemStyle: {
                                borderWidth: 1,
                            },
                        }
                    }],
                    series: [{
                        type: 'scatter',
                        coordinateSystem: 'matrix',
                        matrixIndex: 1,
                        symbolSize: 30,
                        data: [
                            ['R1', 'A1', 10], ['R2', 'A1', 20], ['R1', 'A2', 30]
                        ],
                        label: {
                            show: true,
                            formatter: params => {
                                return params.data[2];
                            }
                        }
                    }],
                    graphic: {
                        elements: [{
                            left: 5,
                            y: 5,
                            id: 'info_bodyData',
                            type: 'text',
                            style: {
                                text: 'Check body cell merge and style:\n' + testHelper.printObject(_bodyData, {lineBreakMaxColumn: 40}),
                                fontSize: 7,
                            }
                        }, {
                            left: 140,
                            y: 5,
                            id: 'info_cornerData',
                            type: 'text',
                            style: {
                                text: 'Check corner cell merge and style:\n' + testHelper.printObject(_cornerData, {lineBreakMaxColumn: 40}),
                                fontSize: 7,
                            }
                        }, {
                            id: 'result_convertToLayout',
                            type: 'rect',
                            shape: {x: 0, y: 0, width: 0, height: 0},
                            ignore: true,
                            silent: true,
                            style: {
                                fill: 'rgba(210,20,100,0.3)',
                                stroke: 'rgba(210,20,100,0.8)',
                                lineWidth: 3,
                            }
                        }, {
                            id: 'result_assertionFailure',
                            type: 'text',
                            ignore: true,
                            silent: true,
                            left: 10,
                            bottom: 10,
                            style: {
                                text: 'Some Case Failed',
                                fill: 'red',
                                fontSize: 20,
                            }
                        }]
                    },
                };

                var chart = testHelper.create(echarts, 'main_edge_cases', {
                    title: [
                        'Edge cases.',
                        'Test both when **show/hide** matrix.x/y; different **clamp**; **ignoreCellMerge** or not.',
                        'drag to resize to test cell border alignment',
                        '(must not affect by subpixel optimize or rounding error)',
                    ],
                    height: 350,
                    option: option,
                    inputsStyle: 'compact',
                    draggable: true,
                    inputs: [
                        {
                            text: 'matrix.x show:',
                            type: 'select',
                            values: [true, false],
                            onchange() {
                                _xShowing = this.value;
                                chart.setOption({
                                    matrix: {
                                        id: 'main_matrix',
                                        x: {show: _xShowing},
                                    },
                                });
                                updateCaseView();
                            }
                        },
                        {
                            text: 'matrix.y show:',
                            type: 'select',
                            values: [true, false],
                            onchange() {
                                _yShowing = this.value;
                                chart.setOption({
                                    matrix: {
                                        id: 'main_matrix',
                                        y: {show: _yShowing},
                                    },
                                });
                                updateCaseView();
                            }
                        },
                        {
                            text: 'convertToLayout clamp:',
                            type: 'select',
                            options: [
                                {value: undefined}
                            ].concat(Object.keys(MatrixClampOption).map(key => ({
                                text: key,
                                value: MatrixClampOption[key],
                            }))),
                            onchange() {
                                _convertToLayoutClampOpt = this.value;
                                updateCaseView();
                            },
                        },
                        {
                            text: 'ignoreMergeCells:',
                            type: 'select',
                            values: [undefined, false, true],
                            onchange() {
                                _ignoreMergeCells = this.value;
                                updateCaseView();
                            },
                        },
                        {
                            type: 'br',
                        },
                        {
                            type: 'select',
                            text: 'convertToLayout test cases:',
                            options: [{value: 'do_nothing'}].concat([
                                {
                                    input: [],
                                    expectDefault: {
                                        rectNaN: {x: true, y: true, width: true, height: true},
                                        matrixXYLocatorRange: [[NaN, NaN], [NaN, NaN]]
                                    }
                                },
                                {
                                    input: ['R2', null],
                                    expectDefault: {
                                        rectNaN: {y: true, height: true},
                                        matrixXYLocatorRange: [[1, 1], [NaN, NaN]]
                                    }
                                },
                                {
                                    input: [['S', 'O'], NaN],
                                    expectDefault: {
                                        rectNaN: {y: true, height: true},
                                        matrixXYLocatorRange: [[2, 4], [NaN, NaN]]
                                    }
                                },
                                {
                                    input: [['R'], NaN],
                                    expectDefault: {
                                        rectNaN: {y: true, height: true},
                                        matrixXYLocatorRange: [[0, 1], [NaN, NaN]]
                                    }
                                },
                                {
                                    input: [NaN, 'A31'],
                                    expectDefault: {
                                        rectNaN: {x: true, width: true},
                                        matrixXYLocatorRange: [[NaN, NaN], [2, 2]]
                                    }
                                },
                                {
                                    input: [undefined, ['A32', 'B3']],
                                    expectDefault: {
                                        rectNaN: {x: true, width: true},
                                        matrixXYLocatorRange: [[NaN, NaN], [3, 6]]
                                    }
                                },
                                {
                                    input: [null, 'B'],
                                    expectDefault: {
                                        rectNaN: {x: true, width: true},
                                        matrixXYLocatorRange: [[NaN, NaN], [4, 7]]
                                    }
                                },
                                {
                                    input: ['S', 'A32'],
                                    expectDefault: {
                                        rectNaN: {},
                                        matrixXYLocatorRange: [[2, 2], [0, 9]]
                                    }
                                },
                                {
                                    input: ['T', 'B1'],
                                    expectDefault: {
                                        rectNaN: {},
                                        matrixXYLocatorRange: [[3, 3], [4, 4]]
                                    }
                                },
                                {
                                    input: [[-1, 1], [-1, 2]],
                                    expectDefault: {
                                        rectNaN: {},
                                        matrixXYLocatorRange: [[-2, 1], [-1, 3]]
                                    }
                                },
                                {
                                    input: ['R', -2],
                                    expectDefault: {
                                        rectNaN: {},
                                        matrixXYLocatorRange: [[0, 1], [-2, -2]]
                                    }
                                },
                            ].map(item => ({
                                text: testHelper.printObject(item.input),
                                value: item,
                            }))),
                            onchange() {
                                if (this.value === 'do_nothing') {
                                    return;
                                }
                                _testCase = this.value;
                                updateCaseView();
                            } // End of onchange
                        } // End of convertToLayout test cases
                    ]
                });

                function updateCaseView() {
                    performTest(function (assert) {
                        if (!_testCase) {
                            return;
                        }
                        const {input, expectDefault} = _testCase;
                        const shouldBeClampped = !(
                            _convertToLayoutClampOpt == null || _convertToLayoutClampOpt === MatrixClampOption.none
                        );
                        const isDefaultCase = !shouldBeClampped && !_ignoreMergeCells;

                        const meta = calcMeta();
                        let opt = undefined;
                        if (_convertToLayoutClampOpt != null) {
                            opt = opt || {};
                            opt.clamp = _convertToLayoutClampOpt;
                        }
                        if (_ignoreMergeCells != null) {
                            opt = opt || {};
                            opt.ignoreMergeCells = _ignoreMergeCells;
                        }

                        const result = chart.convertToLayout({matrixIndex: 1}, input, opt);
                        console.log('Call convertToLayout', 'input:', input, 'opt:', opt, 'result:', result);

                        assert(testHelper.getType(result) === 'object');
                        assert(testHelper.getType(result.rect) === 'object');
                        assert(testHelper.getType(result.rect.x) === 'number');
                        assert(testHelper.getType(result.rect.y) === 'number');
                        assert(testHelper.getType(result.rect.width) === 'number');
                        assert(testHelper.getType(result.rect.height) === 'number');
                        assert(testHelper.getType(result.matrixXYLocatorRange) === 'array');
                        assert(testHelper.getType(result.matrixXYLocatorRange[0]) === 'array');
                        assert(testHelper.getType(result.matrixXYLocatorRange[1]) === 'array');
                        assert(testHelper.getType(result.matrixXYLocatorRange[0][0]) === 'number');
                        assert(testHelper.getType(result.matrixXYLocatorRange[0][1]) === 'number');
                        assert(testHelper.getType(result.matrixXYLocatorRange[1][0]) === 'number');
                        assert(testHelper.getType(result.matrixXYLocatorRange[1][1]) === 'number');

                        ['x', 'y', 'width', 'height'].forEach(prop => {
                            if (isDefaultCase) {
                                if (expectDefault.rectNaN[prop]) {
                                    assert(eqNaN(result.rect[prop]));
                                }
                                else {
                                    assert(isFinite(result.rect[prop]));
                                }
                            }
                            else if (shouldBeClampped) {
                                assert(isFinite(result.rect[prop]));
                            }
                        });

                        if (isDefaultCase) {
                            assert(numEq(expectDefault.matrixXYLocatorRange[0][0], result.matrixXYLocatorRange[0][0]));
                            assert(numEq(expectDefault.matrixXYLocatorRange[0][1], result.matrixXYLocatorRange[0][1]));
                            assert(numEq(expectDefault.matrixXYLocatorRange[1][0], result.matrixXYLocatorRange[1][0]));
                            assert(numEq(expectDefault.matrixXYLocatorRange[1][1], result.matrixXYLocatorRange[1][1]));
                        }

                        return result;
                    });

                    function performTest(cb) {
                        let testFailed = false;
                        function assert(condition) {
                            if (!condition) {
                                testFailed = true;
                                console.error('assertion failed', new Error());
                            }
                        }

                        let result;
                        try {
                            result = cb(assert);
                        }
                        catch (err) {
                            testFailed = true;
                            console.error(err);
                        }

                        const COVER_SIZE = 10000; // Just a big enough number.
                        let indicatorShape = {x: 0, y: 0, width: 0, height: 0};
                        if (result) {
                            indicatorShape = {};
                            indicatorShape.x = eqNaN(result.rect.x) ? -COVER_SIZE / 2 : result.rect.x;
                            indicatorShape.y = eqNaN(result.rect.y) ? -COVER_SIZE / 2 : result.rect.y;
                            indicatorShape.width = eqNaN(result.rect.width) ? COVER_SIZE : result.rect.width;
                            indicatorShape.height = eqNaN(result.rect.height) ? COVER_SIZE : result.rect.height;;
                        }

                        chart.setOption({
                            graphic: {
                                elements: [{
                                    id: 'result_convertToLayout',
                                    shape: indicatorShape,
                                    ignore: testFailed,
                                }, {
                                    id: 'result_assertionFailure',
                                    ignore: !testFailed,
                                }]
                            },
                        });
                    }
                }

                function eqNaN(value) {
                    return value !== value;
                }

                function numEq(expect, actual) {
                    return eqNaN(expect)
                        ? eqNaN(actual)
                        : expect === actual;
                }

            });

        </script>





    </body>
</html>