test/graph-layout-roam.html - master - githubmirror/echarts

test/graph-layout-roam.html
514 строк21 KB
100pah
feat(thumbnail): (1) Refactor thumbnail to a component for further extension, and add test cases. (2) Fix RoamController cursor style.
19 июн 2025, 17:22
19 июн 2025, 17:2274af455

<!--
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">
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/draggable.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>

        <div id="main0"></div>

        <script>

            require([
                'echarts',
            ], function (echarts) {

                const _ctx = {
                    center: null,
                    layoutParams: {
                        left: 'center',
                        top: 'center',
                    },
                };

                const _graphDataset = {
                    fourNodes: {
                        data: [{
                            name: 'node_1',
                            x: 300,
                            y: 300,
                        }, {
                            name: 'node_2',
                            x: 800,
                            y: 300
                        }, {
                            name: 'node_3',
                            x: 550,
                            y: 100
                        }, {
                            name: 'node_4',
                            x: 550,
                            y: 500
                        }],
                        links: [{
                            source: 0,
                            target: 1,
                            symbolSize: [5, 20],
                            lineStyle: {
                                width: 5,
                                opacity: 1,
                                curveness: 0.2
                            },
                            emphasis: {
                                lineStyle: {
                                    color: 'blue',
                                    width: 20,
                                    opacity: 0.1
                                },
                                label: {
                                    fontSize: 40,
                                    color: 'red'
                                }
                            }
                        }, {
                            source: 'node_2',
                            target: 'node_1',
                            lineStyle: {
                                curveness: 0.2
                            }
                        }, {
                            source: 'node_1',
                            target: 'node_3',
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        }, {
                            source: 'node_2',
                            target: 'node_3'
                        }, {
                            source: 'node_2',
                            target: 'node_4'
                        }, {
                            source: 'node_1',
                            target: 'node_4'
                        }]
                    },
                    heightZero: {
                        data: [{
                            name: 'node_1',
                            x: 300,
                            y: 300,
                        }, {
                            name: 'node_2',
                            x: 800,
                            y: 300
                        }],
                        links: [{
                            source: 0,
                            target: 1,
                            symbolSize: [5, 20],
                        }]
                    }
                };

                var option = {
                    backgroundColor: '#f4f4f9',
                    tooltip: {},
                    thumbnail: {},
                    series: [
                        {
                            type: 'graph',
                            id: 'graph0',
                            symbolSize: 20,
                            roam: true,
                            itemStyle: {
                                color: 'rgba(100,100,0,0.5)',
                            },
                            label: {
                                show: true,
                                fontSize: 18,
                                formatter: function (param) {
                                    return `series.data[i].x: ${param.data.x}\nseries.data[i].y: ${param.data.y}`
                                }
                            },
                            ..._ctx.layoutParams,
                            center: _ctx.center,
                            edgeSymbol: ['circle', 'arrow'],
                            edgeSymbolSize: [4, 10],
                            edgeLabel: {
                                textStyle: {
                                    color: 'green',
                                    fontSize: 30
                                },
                                emphasis: {
                                    textStyle: {
                                        color: '#987654'
                                    }
                                }
                            },
                            // focusNodeAdjacency: focusNodeAdjacency,
                            lineStyle: {
                                width: 3,
                                color: '#184029',
                                curveness: 0
                            },
                            ..._graphDataset.fourNodes,
                        }
                    ]
                };


                function makeRectIndicators(option) {
                    var graphicOption = option.graphic = option.graphic || {};
                    graphicElsOption = graphicOption.elements = graphicOption.elements || [];
                    graphicElsOption.push({
                        id: 'view_rect_indicator',
                        type: 'rect',
                        silent: true,
                        z: -9,
                        style: {
                            // fill: '#e0e0e0',
                            fill: 'none',
                            stroke: '#999',
                            lineWidth: 1,
                            lineDash: 'dashed',
                        },
                        textContent: {
                            type: 'text',
                            style: {
                                text: 'view rect',
                                fill: '#555',
                                fontSize: 11,
                            },
                        },
                        textConfig: {
                            position: 'insideTopRight'
                        }
                    }, {
                        id: 'content_rect_indicator',
                        type: 'rect',
                        silent: true,
                        z: -10,
                        style: {
                            // fill: 'rgba(150,100,50,0.3)',
                            fill: 'none',
                            stroke: '#999',
                            lineWidth: 1,
                            lineDash: 'dashed',
                        },
                        textContent: {
                            type: 'text',
                            style: {
                                text: 'content bounding rect',
                                fill: '#555',
                                fontSize: 11,
                            },
                        },
                        textConfig: {
                            position: 'insideTopRight'
                        }
                    });

                    var gridOptions = option.grid = option.grid || [];
                    if (!Array.isArray(gridOptions)) {
                        gridOptions = option.grid = [option.grid];
                    }
                    gridOptions.push({
                        id: 'viewport_indicator',
                        show: true,
                        // Using `grid` as a indicator is a tricky way - should no bounding rect,
                        // otherwise it affect the trigger of geo roam due to `onIrrelevantElement`.
                        backgroundColor: '#ccd',
                        silent: false,
                        ..._ctx.layoutParams,
                        borderColor: '#aaa',
                        borderType: 'dashed',
                        z: -100,
                    });
                }
                makeRectIndicators(option);

                var chart = testHelper.create(echarts, 'main0', {
                    title: [
                        'graph layout center',
                        'expect the layout is consistent with the viewRect when resize',
                        '(when legacyViewCoordSysCenterBase: true, it is inconsistent)'
                    ],
                    option: option,
                    draggable: true,
                    onResize() {
                        renderIndicatorRect();
                    },
                    height: 300,
                    inputsStyle: 'compact',
                    inputs: [
                        {
                            type: 'select',
                            text: 'graph data:',
                            values: Object.keys(_graphDataset),
                            onchange() {
                                const dataKey = this.value;
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        ..._graphDataset[dataKey],
                                    }
                                });
                            }
                        },
                        {
                            type: 'select',
                            text: 'geo box:',
                            values: [
                                'do_nothing',
                                {left: 120, top: 100, right: '30%', bottom: 80},
                                {left: null, top: null, right: null, bottom: null},
                            ],
                            onchange: function () {
                                var layoutParams = this.value;
                                if (layoutParams == null) {
                                    return;
                                }
                                _ctx.layoutParams = layoutParams;
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        ..._ctx.layoutParams,
                                        // zoom: 1,
                                        // center: [0, 0],
                                    },
                                });

                                renderIndicatorRect();
                            }
                        },
                        {
                            type: 'br',
                        },
                        {
                            text: 'graph layout:',
                            type: 'select',
                            values: [undefined, 'force', 'circular', 'none'],
                            onchange() {
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        layout: this.value,
                                    },
                                });
                            },
                        },
                        {
                            text: 'legacyViewCoordSysCenterBase:',
                            type: 'select',
                            values: [false, true],
                            onchange() {
                                chart.setOption({
                                    legacyViewCoordSysCenterBase: this.value,
                                });
                            }
                        },
                        {
                            type: 'select',
                            text: 'roamTrigger:',
                            values: [undefined, 'global'],
                            onchange() {
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        roamTrigger: this.value,
                                    }
                                });
                                renderIndicatorRect();
                            }
                        },
                        {
                            text: 'zoom:',
                            type: 'select',
                            values: [undefined, 0.5, 1, 5],
                            onchange() {
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        zoom: this.value,
                                    }
                                });
                                renderIndicatorRect();
                            }
                        },
                        {
                            type: 'select',
                            text: 'specify center:',
                            values: [false, true],
                            onchange() {
                                chart.__testHelper.switchGroup(
                                    this.value ? 'group_use_center' : 'group_no_center'
                                )
                                if (this.value) {
                                    _ctx.center = _ctx.center || ['50%', '50%'];
                                }
                                else {
                                    _ctx.center = null;
                                }
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        center: _ctx.center
                                    }
                                });
                                renderIndicatorRect();
                            }
                        },
                        {
                            type: 'br',
                        },
                        {
                            type: 'groupset',
                            inputsHeight: 40,
                            groups: [{
                                id: 'group_no_center',
                                text: 'no center',
                            }, {
                                id: 'group_use_center',
                                text: 'specify center',
                                inputs: [
                                    ...[0, 1].map(centerIdx => ({
                                        type: 'select',
                                        text: `center[${centerIdx}]:`,
                                        options: [
                                            {
                                                id: 'percent',
                                                text: 'percent',
                                                input: {type: 'range', min: -50, max: 150, value: 50, suffix: '%'}
                                            },
                                            {
                                                id: 'absolute',
                                                text: 'absolute',
                                                input: {type: 'range', min: -100, max: 800, value: 100}
                                            },
                                        ],
                                        onchange() {
                                            if (this.optionId === 'absolute') {
                                                _ctx.center[centerIdx] = this.value;
                                            }
                                            else if (this.optionId === 'percent') {
                                                _ctx.center[centerIdx] = this.value + '%';
                                            }
                                            chart.setOption({
                                                series: {
                                                    id: 'graph0',
                                                    center: _ctx.center
                                                }
                                            });

                                            renderIndicatorRect();
                                        }
                                    }))
                                ]
                            }]
                        }, // End of groupset
                        {
                            type: 'select',
                            text: 'preserveAspect:',
                            values: [undefined, 'contain', 'cover'],
                            onchange() {
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        preserveAspect: this.value
                                    }
                                });
                                renderIndicatorRect();
                            }
                        },
                        {
                            type: 'select',
                            text: 'preserveAspectAlign:',
                            values: [undefined, 'left', 'right', 'center'],
                            onchange() {
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        preserveAspectAlign: this.value
                                    }
                                });
                                renderIndicatorRect();
                            }
                        },
                        {
                            type: 'select',
                            text: 'preserveAspectVerticalAlign:',
                            values: [undefined, 'top', 'bottom', 'middle'],
                            onchange() {
                                chart.setOption({
                                    series: {
                                        id: 'graph0',
                                        preserveAspectVerticalAlign: this.value
                                    }
                                });
                                renderIndicatorRect();
                            }
                        }
                    ] // End of inputs
                });

                renderIndicatorRect();

                if (chart) {
                    chart.on('graphroam', function () {
                        renderIndicatorRect();
                    });
                }

                function renderIndicatorRect() {
                    if (!chart) {
                        return;
                    }
                    // [CAVEAT] Internal data structure, probably change, do not use it outside.
                    const viewCoordSys = chart.getModel().getComponent('series', 0).coordinateSystem;
                    const viewRect = viewCoordSys.getViewRect();
                    const contentBoundingRect = viewCoordSys.getBoundingRect().clone();
                    const trans = viewCoordSys.getComputedTransform();
                    if (trans) {
                        contentBoundingRect.applyTransform(trans);
                    }
                    chart.setOption({
                        grid: {
                            id: 'viewport_indicator',
                            ..._ctx.layoutParams,
                        },
                        graphic: {
                            elements: [{
                                id: 'view_rect_indicator',
                                shape: viewRect,
                            }, {
                                id: 'content_rect_indicator',
                                shape: contentBoundingRect,
                            }]
                        },
                    });
                }

            });



        </script>
    </body>
</html>