feat(View): View center supports string (#16904)

* fix(graphe): graphe center don't support string * feat(roam): `View` center support string * test(roam): add test case * fix: use `extensionApi` to get container `height` and `width` * fix: add params * fix(roam): move `api` to `setCenter` * fix: `setCenter` params are required
apache · May 1, 2022 · bc64125 · bc64125
1 parent b4250f8
commit bc64125
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {
@@ -257,7 +257,7 @@ class TreeView extends ChartView {
 
         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
@@ -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
@@ -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<typeof geoSourceManager.registerMap>;
 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
@@ -29,6 +29,8 @@ 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';
+import type ExtensionAPI from '../core/ExtensionAPI';
 
 const v2ApplyTransform = vector.applyTransform;
 
@@ -82,7 +84,6 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
      */
     private _viewRect: BoundingRect;
 
-
     constructor(name?: string) {
         super();
         this.name = name;
@@ -127,12 +128,14 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
     /**
      * Set center of view
      */
-    setCenter(centerCoord?: number[]): void {
+    setCenter(centerCoord: (number | string)[], api: ExtensionAPI): void {
         if (!centerCoord) {
             return;
         }
-        this._center = centerCoord;
-
+        this._center = [
+            parsePercent(centerCoord[0], api.getWidth()),
+            parsePercent(centerCoord[1], api.getHeight())
+        ];
         this._updateCenterAndZoom();
     }
 

diff --git a/src/coord/geo/geoCreator.ts b/src/coord/geo/geoCreator.ts
@@ -151,7 +151,7 @@ function resizeGeo(this: Geo, geoModel: ComponentModel<GeoOption | MapSeriesOpti
 
     this.setViewRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
 
-    this.setCenter(geoModel.get('center'));
+    this.setCenter(geoModel.get('center'), api);
     this.setZoom(geoModel.get('zoom'));
 }
 

diff --git 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
      */

diff --git a/test/graph-simple.html b/test/graph-simple.html
diff --git a/test/tree-legend.html b/test/tree-legend.html