From 443ed72fa4e4c0f0d01a3b67ff1c16c2e2835518 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Mon, 18 Apr 2022 20:28:31 +0800 Subject: [PATCH 1/7] fix(graphe): graphe center don't support string --- src/action/roamHelper.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/action/roamHelper.ts b/src/action/roamHelper.ts index b5f64bd6d8..25293a59ab 100644 --- a/src/action/roamHelper.ts +++ b/src/action/roamHelper.ts @@ -45,7 +45,7 @@ export function updateCenterAndZoom( } ) { const previousZoom = view.getZoom(); - const center = view.getCenter(); + const center = view.getDefaultCenter(); let zoom = payload.zoom; const point = (view as Geo).projectedToPoint @@ -84,7 +84,7 @@ export function updateCenterAndZoom( } return { - center: view.getCenter(), + center: view.getDefaultCenter(), zoom: view.getZoom() }; } From f42ab9fdfccc896aed972168ce6ff9c1f8acb549 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Wed, 20 Apr 2022 21:33:09 +0800 Subject: [PATCH 2/7] feat(roam): `View` center support string --- src/action/roamHelper.ts | 4 ++-- src/coord/View.ts | 7 +++++-- src/util/types.ts | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/action/roamHelper.ts b/src/action/roamHelper.ts index 25293a59ab..b5f64bd6d8 100644 --- a/src/action/roamHelper.ts +++ b/src/action/roamHelper.ts @@ -45,7 +45,7 @@ export function updateCenterAndZoom( } ) { const previousZoom = view.getZoom(); - const center = view.getDefaultCenter(); + const center = view.getCenter(); let zoom = payload.zoom; const point = (view as Geo).projectedToPoint @@ -84,7 +84,7 @@ export function updateCenterAndZoom( } return { - center: view.getDefaultCenter(), + center: view.getCenter(), zoom: view.getZoom() }; } diff --git a/src/coord/View.ts b/src/coord/View.ts index 452fb0ef89..6c32693d4c 100644 --- a/src/coord/View.ts +++ b/src/coord/View.ts @@ -29,6 +29,7 @@ import Transformable from 'zrender/src/core/Transformable'; import { CoordinateSystemMaster, CoordinateSystem } from './CoordinateSystem'; import GlobalModel from '../model/Global'; import { ParsedModelFinder, ParsedModelFinderKnown } from '../util/model'; +import { parsePercent } from '../util/number'; const v2ApplyTransform = vector.applyTransform; @@ -127,11 +128,13 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy /** * Set center of view */ - setCenter(centerCoord?: number[]): void { + setCenter(centerCoord?: (number | string)[]): void { if (!centerCoord) { return; } - this._center = centerCoord; + const rect = this.getBoundingRect(); + + this._center = [parsePercent(centerCoord[0], rect.width), parsePercent(centerCoord[1], rect.height)]; this._updateCenterAndZoom(); } diff --git a/src/util/types.ts b/src/util/types.ts index dbaafc81b6..c503f48eec 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -873,7 +873,7 @@ export interface RoamOptionMixin { /** * Current center position. */ - center?: number[] + center?: (number | string)[] /** * Current zoom level. Default is 1 */ From 6114b70c5ac72c0135ec4fee8471973a74b9c33b Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Wed, 20 Apr 2022 21:43:48 +0800 Subject: [PATCH 3/7] test(roam): add test case --- test/graph-simple.html | 1 + test/tree-legend.html | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/test/graph-simple.html b/test/graph-simple.html index 25899700ea..092414d71e 100644 --- a/test/graph-simple.html +++ b/test/graph-simple.html @@ -55,6 +55,7 @@ show: true } }, + center: ['30%', '80%'], edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [4, 10], edgeLabel: { diff --git a/test/tree-legend.html b/test/tree-legend.html index 63dab9c2ab..fbc1357c63 100644 --- a/test/tree-legend.html +++ b/test/tree-legend.html @@ -265,7 +265,8 @@ left: '70%', bottom: '22%', right: '8%', - + center: ['80%', '10%'], + zoom: 1.2, symbolSize: 7, orient: 'RL', From cb06af9188834e8a9a3cb32897371d2c37b12646 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Thu, 21 Apr 2022 19:42:34 +0800 Subject: [PATCH 4/7] fix: use `extensionApi` to get container `height` and `width` --- src/chart/graph/createView.ts | 2 +- src/chart/tree/TreeView.ts | 2 +- src/coord/View.ts | 14 ++++++++------ src/coord/geo/Geo.ts | 6 ++++-- src/coord/geo/geoCreator.ts | 4 ++-- 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/chart/graph/createView.ts b/src/chart/graph/createView.ts index 11324eb8fb..42008524a4 100644 --- a/src/chart/graph/createView.ts +++ b/src/chart/graph/createView.ts @@ -77,7 +77,7 @@ export default function createViewCoordSys(ecModel: GlobalModel, api: ExtensionA const viewWidth = viewRect.width; const viewHeight = viewRect.height; - const viewCoordSys = seriesModel.coordinateSystem = new View(); + const viewCoordSys = seriesModel.coordinateSystem = new View(undefined, api); viewCoordSys.zoomLimit = seriesModel.get('scaleLimit'); viewCoordSys.setBoundingRect( diff --git a/src/chart/tree/TreeView.ts b/src/chart/tree/TreeView.ts index 1c240fde97..fc1dd6c73a 100644 --- a/src/chart/tree/TreeView.ts +++ b/src/chart/tree/TreeView.ts @@ -252,7 +252,7 @@ class TreeView extends ChartView { max[1] = oldMax ? oldMax[1] : max[1] + 1; } - const viewCoordSys = seriesModel.coordinateSystem = new View(); + const viewCoordSys = seriesModel.coordinateSystem = new View(undefined, api); viewCoordSys.zoomLimit = seriesModel.get('scaleLimit'); viewCoordSys.setBoundingRect(min[0], min[1], max[0] - min[0], max[1] - min[1]); diff --git a/src/coord/View.ts b/src/coord/View.ts index 6c32693d4c..88dcaff792 100644 --- a/src/coord/View.ts +++ b/src/coord/View.ts @@ -30,6 +30,7 @@ import { CoordinateSystemMaster, CoordinateSystem } from './CoordinateSystem'; import GlobalModel from '../model/Global'; import { ParsedModelFinder, ParsedModelFinderKnown } from '../util/model'; import { parsePercent } from '../util/number'; +import type ExtensionAPI from '../core/ExtensionAPI'; const v2ApplyTransform = vector.applyTransform; @@ -82,11 +83,12 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy * The unit of `View['_viewRect']` is pixel of the canvas. */ private _viewRect: BoundingRect; + private api: ExtensionAPI; - - constructor(name?: string) { + constructor(name?: string, api?: ExtensionAPI) { super(); this.name = name; + this.api = api; } setBoundingRect(x: number, y: number, width: number, height: number): BoundingRect { @@ -132,10 +134,10 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy if (!centerCoord) { return; } - const rect = this.getBoundingRect(); - - this._center = [parsePercent(centerCoord[0], rect.width), parsePercent(centerCoord[1], rect.height)]; - + this._center = [ + parsePercent(centerCoord[0], this.api.getWidth()), + parsePercent(centerCoord[1], this.api.getHeight()) + ]; this._updateCenterAndZoom(); } diff --git a/src/coord/geo/Geo.ts b/src/coord/geo/Geo.ts index 7bc50f2dc7..0b2f468f7b 100644 --- a/src/coord/geo/Geo.ts +++ b/src/coord/geo/Geo.ts @@ -28,6 +28,7 @@ import { ParsedModelFinder, ParsedModelFinderKnown, SINGLE_REFERRING } from '../ import GeoModel from './GeoModel'; import { resizeGeoType } from './geoCreator'; import { warn } from '../../util/log'; +import type ExtensionAPI from '../../core/ExtensionAPI'; const GEO_DEFAULT_PARAMS: { [type in GeoResource['type']]: { @@ -79,9 +80,10 @@ class Geo extends View { nameMap?: NameMap; nameProperty?: string; aspectScale?: number; - } + }, + api: ExtensionAPI ) { - super(name); + super(name, api); this.map = map; diff --git a/src/coord/geo/geoCreator.ts b/src/coord/geo/geoCreator.ts index c080e153ee..826e27e10f 100644 --- a/src/coord/geo/geoCreator.ts +++ b/src/coord/geo/geoCreator.ts @@ -185,7 +185,7 @@ class GeoCreator implements CoordinateSystemCreator { const geo = new Geo(mapName + idx, mapName, zrUtil.extend({ nameMap: geoModel.get('nameMap') - }, getCommonGeoProperties(geoModel))); + }, getCommonGeoProperties(geoModel)), api); geo.zoomLimit = geoModel.get('scaleLimit'); geoList.push(geo); @@ -229,7 +229,7 @@ class GeoCreator implements CoordinateSystemCreator { const geo = new Geo(mapType, mapType, zrUtil.extend({ nameMap: zrUtil.mergeAll(nameMapList) - }, getCommonGeoProperties(mapSeries[0]))); + }, getCommonGeoProperties(mapSeries[0])), api); geo.zoomLimit = zrUtil.retrieve.apply(null, zrUtil.map(mapSeries, function (singleMapSeries) { return singleMapSeries.get('scaleLimit'); From fd555f5d19019dd389679e2cff9f219532b2f4fa Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Thu, 21 Apr 2022 19:55:52 +0800 Subject: [PATCH 5/7] fix: add params --- src/chart/tree/TreeView.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/chart/tree/TreeView.ts b/src/chart/tree/TreeView.ts index fc1dd6c73a..5edce2ba5e 100644 --- a/src/chart/tree/TreeView.ts +++ b/src/chart/tree/TreeView.ts @@ -172,7 +172,7 @@ class TreeView extends ChartView { group.y = layoutInfo.y; } - this._updateViewCoordSys(seriesModel); + this._updateViewCoordSys(seriesModel, api); this._updateController(seriesModel, ecModel, api); const oldData = this._data; @@ -224,7 +224,7 @@ class TreeView extends ChartView { this._data = data; } - _updateViewCoordSys(seriesModel: TreeSeriesModel) { + _updateViewCoordSys(seriesModel: TreeSeriesModel, api: ExtensionAPI) { const data = seriesModel.getData(); const points: number[][] = []; data.each(function (idx) { From 5744c41cf7595094bad88fa51bbaee5cca569705 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Sun, 24 Apr 2022 17:02:05 +0800 Subject: [PATCH 6/7] fix(roam): move `api` to `setCenter` --- src/action/roamHelper.ts | 8 +++++--- src/chart/graph/createView.ts | 4 ++-- src/chart/graph/install.ts | 5 +++-- src/chart/tree/TreeView.ts | 4 ++-- src/chart/tree/treeAction.ts | 5 +++-- src/component/geo/install.ts | 5 +++-- src/coord/View.ts | 10 ++++------ src/coord/geo/Geo.ts | 5 ++--- src/coord/geo/geoCreator.ts | 6 +++--- 9 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/action/roamHelper.ts b/src/action/roamHelper.ts index b5f64bd6d8..d1721a93c3 100644 --- a/src/action/roamHelper.ts +++ b/src/action/roamHelper.ts @@ -19,6 +19,7 @@ import type Geo from '../coord/geo/Geo'; import type View from '../coord/View'; +import type ExtensionAPI from '../core/ExtensionAPI'; import type { Payload } from '../util/types'; export interface RoamPaylod extends Payload { @@ -42,7 +43,8 @@ export function updateCenterAndZoom( zoomLimit?: { min?: number, max?: number - } + }, + api?: ExtensionAPI ) { const previousZoom = view.getZoom(); const center = view.getCenter(); @@ -56,7 +58,7 @@ export function updateCenterAndZoom( point[0] -= payload.dx; point[1] -= payload.dy; - view.setCenter(getCenterCoord(view, point)); + view.setCenter(getCenterCoord(view, point), api); } if (zoom != null) { if (zoomLimit) { @@ -79,7 +81,7 @@ export function updateCenterAndZoom( view.updateTransform(); // Get the new center - view.setCenter(getCenterCoord(view, point)); + view.setCenter(getCenterCoord(view, point), api); view.setZoom(zoom * previousZoom); } diff --git a/src/chart/graph/createView.ts b/src/chart/graph/createView.ts index 42008524a4..238c4b6184 100644 --- a/src/chart/graph/createView.ts +++ b/src/chart/graph/createView.ts @@ -77,7 +77,7 @@ export default function createViewCoordSys(ecModel: GlobalModel, api: ExtensionA const viewWidth = viewRect.width; const viewHeight = viewRect.height; - const viewCoordSys = seriesModel.coordinateSystem = new View(undefined, api); + const viewCoordSys = seriesModel.coordinateSystem = new View(); viewCoordSys.zoomLimit = seriesModel.get('scaleLimit'); viewCoordSys.setBoundingRect( @@ -88,7 +88,7 @@ export default function createViewCoordSys(ecModel: GlobalModel, api: ExtensionA ); // Update roam info - viewCoordSys.setCenter(seriesModel.get('center')); + viewCoordSys.setCenter(seriesModel.get('center'), api); viewCoordSys.setZoom(seriesModel.get('zoom')); viewList.push(viewCoordSys); diff --git a/src/chart/graph/install.ts b/src/chart/graph/install.ts index 38b95c59d1..b917be00ef 100644 --- a/src/chart/graph/install.ts +++ b/src/chart/graph/install.ts @@ -32,6 +32,7 @@ import GraphSeriesModel from './GraphSeries'; import { RoamPaylod, updateCenterAndZoom } from '../../action/roamHelper'; import GlobalModel from '../../model/Global'; import { noop } from 'zrender/src/core/util'; +import type ExtensionAPI from '../../core/ExtensionAPI'; const actionInfo = { type: 'graphRoam', @@ -72,13 +73,13 @@ export function install(registers: EChartsExtensionInstallRegisters) { }, noop); // Register roam action. - registers.registerAction(actionInfo, function (payload: RoamPaylod, ecModel: GlobalModel) { + registers.registerAction(actionInfo, function (payload: RoamPaylod, ecModel: GlobalModel, api: ExtensionAPI) { ecModel.eachComponent({ mainType: 'series', query: payload }, function (seriesModel: GraphSeriesModel) { const coordSys = seriesModel.coordinateSystem as View; - const res = updateCenterAndZoom(coordSys, payload); + const res = updateCenterAndZoom(coordSys, payload, undefined, api); seriesModel.setCenter && seriesModel.setCenter(res.center); diff --git a/src/chart/tree/TreeView.ts b/src/chart/tree/TreeView.ts index 5edce2ba5e..dca6383dc9 100644 --- a/src/chart/tree/TreeView.ts +++ b/src/chart/tree/TreeView.ts @@ -252,12 +252,12 @@ class TreeView extends ChartView { max[1] = oldMax ? oldMax[1] : max[1] + 1; } - const viewCoordSys = seriesModel.coordinateSystem = new View(undefined, api); + const viewCoordSys = seriesModel.coordinateSystem = new View(); viewCoordSys.zoomLimit = seriesModel.get('scaleLimit'); viewCoordSys.setBoundingRect(min[0], min[1], max[0] - min[0], max[1] - min[1]); - viewCoordSys.setCenter(seriesModel.get('center')); + viewCoordSys.setCenter(seriesModel.get('center'), api); viewCoordSys.setZoom(seriesModel.get('zoom')); // Here we use viewCoordSys just for computing the 'position' and 'scale' of the group diff --git a/src/chart/tree/treeAction.ts b/src/chart/tree/treeAction.ts index 8543ef56e2..2589d3ef75 100644 --- a/src/chart/tree/treeAction.ts +++ b/src/chart/tree/treeAction.ts @@ -22,6 +22,7 @@ import { Payload } from '../../util/types'; import TreeSeriesModel from './TreeSeries'; import GlobalModel from '../../model/Global'; import { EChartsExtensionInstallRegisters } from '../../extension'; +import type ExtensionAPI from '../../core/ExtensionAPI'; export interface TreeExpandAndCollapsePayload extends Payload { dataIndex: number @@ -51,12 +52,12 @@ export function installTreeAction(registers: EChartsExtensionInstallRegisters) { // the layout. So don't need to go through the whole update process, such // as 'dataPrcocess', 'coordSystemUpdate', 'layout' and so on. update: 'none' - }, function (payload: RoamPaylod, ecModel: GlobalModel) { + }, function (payload: RoamPaylod, ecModel: GlobalModel, api: ExtensionAPI) { ecModel.eachComponent({ mainType: 'series', subType: 'tree', query: payload }, function (seriesModel: TreeSeriesModel) { const coordSys = seriesModel.coordinateSystem; - const res = updateCenterAndZoom(coordSys, payload); + const res = updateCenterAndZoom(coordSys, payload, undefined, api); seriesModel.setCenter && seriesModel.setCenter(res.center); diff --git a/src/component/geo/install.ts b/src/component/geo/install.ts index 37a86bd97f..d18aa18376 100644 --- a/src/component/geo/install.ts +++ b/src/component/geo/install.ts @@ -27,6 +27,7 @@ import { updateCenterAndZoom, RoamPaylod } from '../../action/roamHelper'; import MapSeries from '../../chart/map/MapSeries'; import GeoView from './GeoView'; import geoSourceManager from '../../coord/geo/geoSourceManager'; +import type ExtensionAPI from '../../core/ExtensionAPI'; type RegisterMapParams = Parameters; function registerMap( @@ -114,7 +115,7 @@ export function install(registers: EChartsExtensionInstallRegisters) { type: 'geoRoam', event: 'geoRoam', update: 'updateTransform' - }, function (payload: RoamPaylod, ecModel: GlobalModel) { + }, function (payload: RoamPaylod, ecModel: GlobalModel, api: ExtensionAPI) { const componentType = payload.componentType || 'series'; ecModel.eachComponent( @@ -126,7 +127,7 @@ export function install(registers: EChartsExtensionInstallRegisters) { } const res = updateCenterAndZoom( - geo, payload, (componentModel as GeoModel).get('scaleLimit') + geo, payload, (componentModel as GeoModel).get('scaleLimit'), api ); componentModel.setCenter diff --git a/src/coord/View.ts b/src/coord/View.ts index 88dcaff792..725b118176 100644 --- a/src/coord/View.ts +++ b/src/coord/View.ts @@ -83,12 +83,10 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy * The unit of `View['_viewRect']` is pixel of the canvas. */ private _viewRect: BoundingRect; - private api: ExtensionAPI; - constructor(name?: string, api?: ExtensionAPI) { + constructor(name?: string) { super(); this.name = name; - this.api = api; } setBoundingRect(x: number, y: number, width: number, height: number): BoundingRect { @@ -130,13 +128,13 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy /** * Set center of view */ - setCenter(centerCoord?: (number | string)[]): void { + setCenter(centerCoord?: (number | string)[], api?: ExtensionAPI): void { if (!centerCoord) { return; } this._center = [ - parsePercent(centerCoord[0], this.api.getWidth()), - parsePercent(centerCoord[1], this.api.getHeight()) + parsePercent(centerCoord[0], api.getWidth()), + parsePercent(centerCoord[1], api.getHeight()) ]; this._updateCenterAndZoom(); } diff --git a/src/coord/geo/Geo.ts b/src/coord/geo/Geo.ts index 0b2f468f7b..865e35c51a 100644 --- a/src/coord/geo/Geo.ts +++ b/src/coord/geo/Geo.ts @@ -80,10 +80,9 @@ class Geo extends View { nameMap?: NameMap; nameProperty?: string; aspectScale?: number; - }, - api: ExtensionAPI + } ) { - super(name, api); + super(name); this.map = map; diff --git a/src/coord/geo/geoCreator.ts b/src/coord/geo/geoCreator.ts index 826e27e10f..1d4bd3730e 100644 --- a/src/coord/geo/geoCreator.ts +++ b/src/coord/geo/geoCreator.ts @@ -151,7 +151,7 @@ function resizeGeo(this: Geo, geoModel: ComponentModel Date: Thu, 28 Apr 2022 22:06:19 +0800 Subject: [PATCH 7/7] fix: `setCenter` params are required --- src/coord/View.ts | 2 +- src/coord/geo/Geo.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/coord/View.ts b/src/coord/View.ts index 725b118176..bb4c1affb8 100644 --- a/src/coord/View.ts +++ b/src/coord/View.ts @@ -128,7 +128,7 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy /** * Set center of view */ - setCenter(centerCoord?: (number | string)[], api?: ExtensionAPI): void { + setCenter(centerCoord: (number | string)[], api: ExtensionAPI): void { if (!centerCoord) { return; } diff --git a/src/coord/geo/Geo.ts b/src/coord/geo/Geo.ts index 865e35c51a..7bc50f2dc7 100644 --- a/src/coord/geo/Geo.ts +++ b/src/coord/geo/Geo.ts @@ -28,7 +28,6 @@ import { ParsedModelFinder, ParsedModelFinderKnown, SINGLE_REFERRING } from '../ import GeoModel from './GeoModel'; import { resizeGeoType } from './geoCreator'; import { warn } from '../../util/log'; -import type ExtensionAPI from '../../core/ExtensionAPI'; const GEO_DEFAULT_PARAMS: { [type in GeoResource['type']]: {