| <!-- | |
| 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> |