From 139896bbf471cb3b83c53dd257c3453215987ff2 Mon Sep 17 00:00:00 2001 From: lang Date: Thu, 5 May 2016 12:47:30 +0800 Subject: [PATCH] Fix graph transform when has all node same y or same x, Graph node not scale on init(before roam), Optimize roam rect --- src/chart/graph/GraphSeries.js | 3 -- src/chart/graph/GraphView.js | 39 +++++++++++------------- src/chart/graph/createView.js | 16 +++++++--- src/chart/helper/Line.js | 6 ++-- src/chart/helper/Symbol.js | 1 - src/chart/treemap/TreemapView.js | 5 ++- src/component/dataZoom/InsideZoomView.js | 2 +- src/component/dataZoom/roams.js | 5 ++- src/component/helper/MapDraw.js | 4 ++- src/component/helper/RoamController.js | 14 ++++----- src/coord/View.js | 4 ++- 11 files changed, 54 insertions(+), 45 deletions(-) diff --git a/src/chart/graph/GraphSeries.js b/src/chart/graph/GraphSeries.js index d356d0999..39094e4db 100644 --- a/src/chart/graph/GraphSeries.js +++ b/src/chart/graph/GraphSeries.js @@ -147,9 +147,6 @@ define(function (require) { // Symbol size scale ratio in roam nodeScaleRatio: 0.6, - // Line width scale ratio in roam - // edgeScaleRatio: 0.1, - // categories: [], // data: [] diff --git a/src/chart/graph/GraphView.js b/src/chart/graph/GraphView.js index 563998050..adcfb55fb 100644 --- a/src/chart/graph/GraphView.js +++ b/src/chart/graph/GraphView.js @@ -83,11 +83,10 @@ define(function (require) { } this._nodeScaleRatio = seriesModel.get('nodeScaleRatio'); - // this._edgeScaleRatio = seriesModel.get('edgeScaleRatio'); this._updateNodeAndLinkScale(); - this._updateController(seriesModel, coordSys, api); + this._updateController(seriesModel, api); clearTimeout(this._layoutTimeout); var forceLayout = seriesModel.forceLayout; @@ -137,13 +136,18 @@ define(function (require) { })(); }, - _updateController: function (seriesModel, coordSys, api) { + _updateController: function (seriesModel, api) { var controller = this._controller; - controller.rect = coordSys.getViewRect(); + var group = this.group; + controller.rectProvider = function () { + var rect = group.getBoundingRect(); + rect.applyTransform(group.transform); + return rect; + }; controller.enable(seriesModel.get('roam')); controller.zoomLimit = seriesModel.get('scaleLimit'); // Update zoom from model - controller.zoom = coordSys.getZoom(); + controller.zoom = seriesModel.coordinateSystem.getZoom(); controller .off('pan') @@ -171,32 +175,25 @@ define(function (require) { _updateNodeAndLinkScale: function () { var seriesModel = this._model; var data = seriesModel.getData(); + var coordSys = seriesModel.coordinateSystem; - var group = this.group; var nodeScaleRatio = this._nodeScaleRatio; - // var edgeScaleRatio = this._edgeScaleRatio; - // Assume scale aspect is 1 - var groupScale = group.scale[0]; + var groupScale = this.group.scale; + var groupZoom = (groupScale && groupScale[0]) || 1; + // Scale node when zoom changes + var roamZoom = coordSys.getZoom(); - var nodeScale = (groupScale - 1) * nodeScaleRatio + 1; - // var edgeScale = (groupScale - 1) * edgeScaleRatio + 1; + var nodeScale = (roamZoom - 1) * nodeScaleRatio + 1; var invScale = [ - nodeScale / groupScale, - nodeScale / groupScale + // nodeScale / roamZoom / (groupZoom / roamZoom) + nodeScale / groupZoom, + nodeScale / groupZoom ]; data.eachItemGraphicEl(function (el, idx) { el.attr('scale', invScale); }); - // data.graph.eachEdge(function (edge) { - // var lineGroup = edge.getGraphicEl(); - // // FIXME - // lineGroup.childOfName('line').setStyle( - // 'lineWidth', - // edge.__lineWidth * edgeScale / groupScale - // ); - // }); }, updateLayout: function (seriesModel, ecModel) { diff --git a/src/chart/graph/createView.js b/src/chart/graph/createView.js index 30ff7ea90..5bbdba6fe 100644 --- a/src/chart/graph/createView.js +++ b/src/chart/graph/createView.js @@ -32,12 +32,20 @@ define(function (require) { bbox.fromPoints(positions, min, max); + // If width or height is 0 + if (max[0] - min[0] === 0) { + max[0] += 1; + min[0] -= 1; + } + if (max[1] - min[1] === 0) { + max[1] += 1; + min[1] -= 1; + } + var aspect = (max[0] - min[0]) / (max[1] - min[1]); // FIXME If get view rect after data processed? - var viewRect = getViewRect( - seriesModel, api, (max[0] - min[0]) / (max[1] - min[1]) || 1 - ); + var viewRect = getViewRect(seriesModel, api, aspect); // Position may be NaN, use view rect instead - if (isNaN(min[0]) || isNaN(min[1])) { + if (isNaN(aspect)) { min = [viewRect.x, viewRect.y]; max = [viewRect.x + viewRect.width, viewRect.y + viewRect.height]; } diff --git a/src/chart/helper/Line.js b/src/chart/helper/Line.js index df9a8c0be..c4b90443a 100644 --- a/src/chart/helper/Line.js +++ b/src/chart/helper/Line.js @@ -36,10 +36,7 @@ define(function (require) { function createLine(points) { var line = new LinePath({ - name: 'line', - style: { - strokeNoScale: true - } + name: 'line' }); setLinePoints(line.shape, points); return line; @@ -236,6 +233,7 @@ define(function (require) { } line.useStyle(zrUtil.extend( { + strokeNoScale: true, fill: 'none', stroke: lineData.getItemVisual(idx, 'color') }, diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js index 44fe6c4fe..ba672a552 100644 --- a/src/chart/helper/Symbol.js +++ b/src/chart/helper/Symbol.js @@ -75,7 +75,6 @@ define(function (require) { /** * Get scale(aka, current symbol size). * Including the change caused by animation - * @param {Array.} toLastFrame */ symbolProto.getScale = function () { return this.childAt(0).scale; diff --git a/src/chart/treemap/TreemapView.js b/src/chart/treemap/TreemapView.js index 5a81b53a8..0e97a374f 100644 --- a/src/chart/treemap/TreemapView.js +++ b/src/chart/treemap/TreemapView.js @@ -555,7 +555,10 @@ controller.on('zoom', bind(this._onZoom, this)); } - controller.rect = new BoundingRect(0, 0, api.getWidth(), api.getHeight()); + var rect = new BoundingRect(0, 0, api.getWidth(), api.getHeight()); + controller.rectProvider = function () { + return rect; + }; }, /** diff --git a/src/component/dataZoom/InsideZoomView.js b/src/component/dataZoom/InsideZoomView.js index c011752de..e1960c7b2 100644 --- a/src/component/dataZoom/InsideZoomView.js +++ b/src/component/dataZoom/InsideZoomView.js @@ -158,7 +158,7 @@ define(function (require) { function getDirectionInfo(xy, axisModel, controller) { var axis = axisModel.axis; - var rect = controller.rect; + var rect = controller.rectProvider(); var ret = {}; if (axis.dim === 'x') { diff --git a/src/component/dataZoom/roams.js b/src/component/dataZoom/roams.js index 5a33179a8..3be54c52d 100644 --- a/src/component/dataZoom/roams.js +++ b/src/component/dataZoom/roams.js @@ -62,7 +62,10 @@ define(function(require) { } // Consider resize, area should be always updated. - record.controller.rect = dataZoomInfo.coordinateSystem.getRect().clone(); + var rect = dataZoomInfo.coordinateSystem.getRect().clone(); + record.controller.rectProvider = function () { + return rect; + }; // Update throttle. throttle.createOrUpdate( diff --git a/src/component/helper/MapDraw.js b/src/component/helper/MapDraw.js index 44dce3c9e..a7f15e070 100644 --- a/src/component/helper/MapDraw.js +++ b/src/component/helper/MapDraw.js @@ -280,7 +280,9 @@ define(function (require) { } }, this); - controller.rect = geo.getViewRect(); + controller.rectProvider = function () { + return geo.getViewRectAfterRoam(); + }; } }; diff --git a/src/component/helper/RoamController.js b/src/component/helper/RoamController.js index 8f40c2edc..3a7562702 100644 --- a/src/component/helper/RoamController.js +++ b/src/component/helper/RoamController.js @@ -16,7 +16,7 @@ define(function (require) { var x = e.offsetX; var y = e.offsetY; - var rect = this.rect; + var rect = this.rectProvider && this.rectProvider(); if (rect && rect.contain(x, y)) { this._x = x; this._y = y; @@ -82,10 +82,10 @@ define(function (require) { } function zoom(e, zoomDelta, zoomX, zoomY) { - var rect = this.rect; + var rect = this.rectProvider && this.rectProvider(); if (rect && rect.contain(zoomX, zoomY)) { - // When mouse is out of roamController.rect, + // When mouse is out of roamController rect, // default befavoius should be be disabled, otherwise // page sliding is disabled, contrary to expectation. eventTool.stop(e.event); @@ -129,9 +129,9 @@ define(function (require) { * * @param {module:zrender/zrender~ZRender} zr * @param {module:zrender/Element} target - * @param {module:zrender/core/BoundingRect} rect + * @param {Function} rectProvider */ - function RoamController(zr, target, rect) { + function RoamController(zr, target, rectProvider) { /** * @type {module:zrender/Element} @@ -139,9 +139,9 @@ define(function (require) { this.target = target; /** - * @type {module:zrender/core/BoundingRect} + * @type {Function} */ - this.rect = rect; + this.rectProvider = rectProvider; /** * { min: 1, max: 2 } diff --git a/src/coord/View.js b/src/coord/View.js index d78bc47d7..454292d7a 100644 --- a/src/coord/View.js +++ b/src/coord/View.js @@ -82,6 +82,8 @@ define(function (require) { * @param {number} height */ setViewRect: function (x, y, width, height) { + width = width; + height = height; this.transformTo(x, y, width, height); this._viewRect = new BoundingRect(x, y, width, height); }, @@ -224,7 +226,7 @@ define(function (require) { * @return {module:zrender/core/BoundingRect} */ getViewRectAfterRoam: function () { - var rect = this._viewRect.clone(); + var rect = this.getBoundingRect().clone(); rect.applyTransform(this.transform); return rect; }, -- GitLab