diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index 9e4dc340aa..571475e714 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -232,6 +232,12 @@ class TreemapSeriesModel extends SeriesModel { private _idIndexMap: zrUtil.HashMap; private _idIndexMapCount: number; + zoom: number; + zoomLimit: { + max?: number; + min?: number; + }; + static defaultOption: TreemapSeriesOption = { // Disable progressive rendering progressive: 0, @@ -251,6 +257,8 @@ class TreemapSeriesModel extends SeriesModel { zoomToNodeRatio: 0.32 * 0.32, + scaleLimit: null, + roam: true, nodeClick: 'zoomToNode', animation: true, diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts index b4f159dc24..bc59c28544 100644 --- a/src/chart/treemap/TreemapView.ts +++ b/src/chart/treemap/TreemapView.ts @@ -30,7 +30,7 @@ import { import DataDiffer from '../../data/DataDiffer'; import * as helper from '../helper/treeHelper'; import Breadcrumb from './Breadcrumb'; -import RoamController, { RoamEventParams } from '../../component/helper/RoamController'; +import RoamController, { RoamEventParams, RoamControllerHost } from '../../component/helper/RoamController'; import BoundingRect, { RectLike } from 'zrender/src/core/BoundingRect'; import * as matrix from 'zrender/src/core/matrix'; import * as animationUtil from '../../util/animation'; @@ -153,6 +153,7 @@ class TreemapView extends ChartView { private _containerGroup: graphic.Group; private _breadcrumb: Breadcrumb; private _controller: RoamController; + private _controllerHost: RoamControllerHost; private _oldTree: Tree; @@ -273,6 +274,14 @@ class TreemapView extends ChartView { this._oldTree = thisTree; this._storage = thisStorage; + if (this._controllerHost) { + const _oldRootLayout = this.seriesModel.layoutInfo; + const rootLayout = thisTree.root.getLayout(); + if (rootLayout.width === _oldRootLayout.width && rootLayout.height === _oldRootLayout.height) { + this._controllerHost.zoom = 1; + } + } + return { lastsForAnimation, willDeleteEls, @@ -471,11 +480,21 @@ class TreemapView extends ChartView { private _resetController(api: ExtensionAPI) { let controller = this._controller; + let controllerHost = this._controllerHost; + + if (!controllerHost) { + this._controllerHost = { + target: this.group + } as RoamControllerHost; + controllerHost = this._controllerHost; + } // Init controller. if (!controller) { controller = this._controller = new RoamController(api.getZr()); controller.enable(this.seriesModel.get('roam')); + controllerHost.zoomLimit = this.seriesModel.get('scaleLimit'); + controllerHost.zoom = this.seriesModel.get('zoom'); controller.on('pan', bind(this._onPan, this)); controller.on('zoom', bind(this._onZoom, this)); } @@ -488,6 +507,7 @@ class TreemapView extends ChartView { private _clearController() { let controller = this._controller; + this._controllerHost = null; if (controller) { controller.dispose(); controller = null; @@ -526,6 +546,7 @@ class TreemapView extends ChartView { private _onZoom(e: RoamEventParams['zoom']) { let mouseX = e.originX; let mouseY = e.originY; + const zoomDelta = e.scale; if (this._state !== 'animating') { // These param must not be cached. @@ -544,6 +565,24 @@ class TreemapView extends ChartView { const rect = new BoundingRect( rootLayout.x, rootLayout.y, rootLayout.width, rootLayout.height ); + + // scaleLimit + let zoomLimit = null; + const _controllerHost = this._controllerHost; + zoomLimit = _controllerHost.zoomLimit; + + let newZoom = _controllerHost.zoom = _controllerHost.zoom || 1; + newZoom *= zoomDelta; + if (zoomLimit) { + const zoomMin = zoomLimit.min || 0; + const zoomMax = zoomLimit.max || Infinity; + newZoom = Math.max( + Math.min(zoomMax, newZoom), + zoomMin + ); + } + const zoomScale = newZoom / _controllerHost.zoom; + _controllerHost.zoom = newZoom; const layoutInfo = this.seriesModel.layoutInfo; // Transform mouse coord from global to containerGroup. @@ -553,7 +592,7 @@ class TreemapView extends ChartView { // Scale root bounding rect. const m = matrix.create(); matrix.translate(m, m, [-mouseX, -mouseY]); - matrix.scale(m, m, [e.scale, e.scale]); + matrix.scale(m, m, [zoomScale, zoomScale]); matrix.translate(m, m, [mouseX, mouseY]); rect.applyTransform(m); diff --git a/test/treemap-scaleLimit.html b/test/treemap-scaleLimit.html new file mode 100644 index 0000000000..e766cd02d6 --- /dev/null +++ b/test/treemap-scaleLimit.html @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + + + + + + +
scaleLimit: { max: 1, min: 0.5 }
+
+
+ + +