echarts 3.5.1 → 3.6.0

package/lib/component/helper/BrushController.js

@@ -8,7 +8,6 @@
 
     var Eventful = require('zrender/lib/mixin/Eventful');
     var zrUtil = require('zrender/lib/core/util');
-    var BoundingRect = require('zrender/lib/core/BoundingRect');
     var graphic = require('../../util/graphic');
     var interactionMutex = require('./interactionMutex');
     var DataDiffer = require('../../data/DataDiffer');
@@ -138,7 +137,7 @@
         this._creatingCover;
 
         /**
-         * true means global panel
+         * `true` means global panel
          * @private
          * @type {module:zrender/container/Group|boolean}
          */
@@ -193,6 +192,7 @@
          * @param {number} [brushOption.brushStyle.lineWidth]
          * @param {string} [brushOption.brushStyle.stroke]
          * @param {string} [brushOption.brushStyle.fill]
+         * @param {number} [brushOption.z]
          */
         enableBrush: function (brushOption) {
             if (__DEV__) {
@@ -209,52 +209,28 @@
          * @param {Array.<Object>} panelOpts If not pass, it is global brush.
          *        Each items: {
          *            panelId, // mandatory.
-         *            rect, // mandatory.
-         *            defaultBrushType // optional, only used when brushType is 'auto'.
+         *            clipPath, // mandatory. function.
+         *            isTargetByCursor, // mandatory. function.
+         *            defaultBrushType, // optional, only used when brushType is 'auto'.
+         *            getLinearBrushOtherExtent, // optional. function.
          *        }
          */
         setPanels: function (panelOpts) {
-            var oldPanels = this._panels || {};
-            var newPanels = this._panels = panelOpts && panelOpts.length && {};
-            var thisGroup = this.group;
-
-            newPanels && each(panelOpts, function (panelOpt) {
-                var panelId = panelOpt.panelId;
-                var panel = oldPanels[panelId];
-                if (!panel) {
-                    panel = new graphic.Rect({
-                        silent: true,
-                        invisible: true
-                    });
-                    thisGroup.add(panel);
-                }
-
-                var rect = panelOpt.rect;
-                // Using BoundingRect to normalize negative width/height.
-                if (!(rect instanceof BoundingRect)) {
-                    rect = BoundingRect.create(rect);
-                }
-
-                panel.attr('shape', rect.plain());
-                panel.__brushPanelId = panelId;
-                panel.__defaultBrushType = panelOpt.defaultBrushType;
-                newPanels[panelId] = panel;
-                oldPanels[panelId] = null;
-            });
-
-            each(oldPanels, function (panel) {
-                panel && thisGroup.remove(panel);
-            });
-
+            if (panelOpts && panelOpts.length) {
+                var panels = this._panels = {};
+                zrUtil.each(panelOpts, function (panelOpts) {
+                    panels[panelOpts.panelId] = zrUtil.clone(panelOpts);
+                });
+            }
+            else {
+                this._panels = null;
+            }
             return this;
         },
 
         /**
          * @param {Object} [opt]
          * @return {boolean} [opt.enableGlobalPan=false]
-         * @return {boolean} [opt.position=[0, 0]]
-         * @return {boolean} [opt.rotation=0]
-         * @return {boolean} [opt.scale=[1, 1]]
          */
         mount: function (opt) {
             opt = opt || {};
@@ -273,6 +249,7 @@
                 rotation: opt.rotation || 0,
                 scale: opt.scale || [1, 1]
             });
+            this._transform = thisGroup.getLocalTransform();
 
             return this;
         },
@@ -379,7 +356,6 @@
 
     zrUtil.mixin(BrushController, Eventful);
 
-
     function doEnableBrush(controller, brushOption) {
         var zr = controller._zr;
 
@@ -410,8 +386,8 @@
 
     function createCover(controller, brushOption) {
         var cover = coverRenderers[brushOption.brushType].createCover(controller, brushOption);
-        updateZ(cover);
         cover.__brushOption = brushOption;
+        updateZ(cover, brushOption);
         controller.group.add(cover);
         return cover;
     }
@@ -420,7 +396,7 @@
         var coverRenderer = getCoverRenderer(creatingCover);
         if (coverRenderer.endCreating) {
             coverRenderer.endCreating(controller, creatingCover);
-            updateZ(creatingCover);
+            updateZ(creatingCover, creatingCover.__brushOption);
         }
         return creatingCover;
     }
@@ -432,10 +408,12 @@
         );
     }
 
-    function updateZ(group) {
-        group.traverse(function (el) {
-            el.z = COVER_Z;
-            el.z2 = COVER_Z; // Consider in given container.
+    function updateZ(cover, brushOption) {
+        var z = brushOption.z;
+        z == null && (z = COVER_Z);
+        cover.traverse(function (el) {
+            el.z = z;
+            el.z2 = z; // Consider in given container.
         });
     }
 
@@ -448,18 +426,21 @@
         return coverRenderers[cover.__brushOption.brushType];
     }
 
-    function getPanelByPoint(controller, x, y) {
+    // return target panel or `true` (means global panel)
+    function getPanelByPoint(controller, e, localCursorPoint) {
         var panels = controller._panels;
         if (!panels) {
             return true; // Global panel
         }
         var panel;
+        var transform = controller._transform;
         each(panels, function (pn) {
-            pn.contain(x, y) && (panel = pn);
+            pn.isTargetByCursor(e, localCursorPoint, transform) && (panel = pn);
         });
         return panel;
     }
 
+    // Return a panel or true
     function getPanelByCover(controller, cover) {
         var panels = controller._panels;
         if (!panels) {
@@ -486,7 +467,6 @@
         var areas = map(controller._covers, function (cover) {
             var brushOption = cover.__brushOption;
             var range = zrUtil.clone(brushOption.range);
-
             return {
                 brushType: brushOption.brushType,
                 panelId: brushOption.panelId,
@@ -696,21 +676,10 @@
 
     function clipByPanel(controller, cover, data) {
         var panel = getPanelByCover(controller, cover);
-        if (panel === true) { // Global panel
-            return zrUtil.clone(data);
-        }
-
-        var panelRect = panel.getBoundingRect();
 
-        return zrUtil.map(data, function (point) {
-            var x = point[0];
-            x = mathMax(x, panelRect.x);
-            x = mathMin(x, panelRect.x + panelRect.width);
-            var y = point[1];
-            y = mathMax(y, panelRect.y);
-            y = mathMin(y, panelRect.y + panelRect.height);
-            return [x, y];
-        });
+        return (panel && panel !== true)
+            ? panel.clipPath(data, controller._transform)
+            : zrUtil.clone(data);
     }
 
     function pointsToRect(points) {
@@ -727,34 +696,33 @@
         };
     }
 
-    function resetCursor(controller, e) {
-        var x = e.offsetX;
-        var y = e.offsetY;
-        var zr = controller._zr;
+    function resetCursor(controller, e, localCursorPoint) {
+        // Check active
+        if (!controller._brushType) {
+            return;
+        }
 
-        if (controller._brushType) { // If active
-            var panels = controller._panels;
-            var covers = controller._covers;
-            var inCover;
+        var zr = controller._zr;
+        var covers = controller._covers;
+        var currPanel = getPanelByPoint(controller, e, localCursorPoint);
 
+        // Check whether in covers.
+        if (!controller._dragging) {
             for (var i = 0; i < covers.length; i++) {
-                if (coverRenderers[covers[i].__brushOption.brushType].contain(covers[i], x, y)) {
-                    inCover = true;
-                    break;
-                }
-            }
-
-            if (!inCover) {
-                if (panels) { // Brush on panels
-                    each(panels, function (panel) {
-                        panel.contain(x, y) && zr.setCursorStyle('crosshair');
-                    });
-                }
-                else { // Global brush
-                    zr.setCursorStyle('crosshair');
+                var brushOption = covers[i].__brushOption;
+                if (currPanel
+                    && (currPanel === true || brushOption.panelId === currPanel.panelId)
+                    && coverRenderers[brushOption.brushType].contain(
+                        covers[i], localCursorPoint[0], localCursorPoint[1]
+                    )
+                ) {
+                    // Use cursor style set on cover.
+                    return;
                 }
             }
         }
+
+        currPanel && zr.setCursorStyle('crosshair');
     }
 
     function preventDefault(e) {
@@ -766,15 +734,13 @@
         return cover.childOfName('main').contain(x, y);
     }
 
-    function updateCoverByMouse(controller, e, isEnd) {
-        var x = e.offsetX;
-        var y = e.offsetY;
+    function updateCoverByMouse(controller, e, localCursorPoint, isEnd) {
         var creatingCover = controller._creatingCover;
         var panel = controller._creatingPanel;
         var thisBrushOption = controller._brushOption;
         var eventParams;
 
-        controller._track.push(controller.group.transformCoordToLocal(x, y));
+        controller._track.push(localCursorPoint.slice());
 
         if (shouldShowCover(controller) || creatingCover) {
 
@@ -782,7 +748,7 @@
                 thisBrushOption.brushMode === 'single' && clearCovers(controller);
                 var brushOption = zrUtil.clone(thisBrushOption);
                 brushOption.brushType = determineBrushType(brushOption.brushType, panel);
-                brushOption.panelId = panel === true ? null : panel.__brushPanelId;
+                brushOption.panelId = panel === true ? null : panel.panelId;
                 creatingCover = controller._creatingCover = createCover(controller, brushOption);
                 controller._covers.push(creatingCover);
             }
@@ -815,7 +781,7 @@
             // clicks (for example, click on other component and do not expect covers
             // disappear).
             // Only some cover removed, trigger action, but not every click trigger action.
-            if (getPanelByPoint(controller, x, y) && clearCovers(controller)) {
+            if (getPanelByPoint(controller, e, localCursorPoint) && clearCovers(controller)) {
                 eventParams = {isEnd: isEnd, removeOnClick: true};
             }
         }
@@ -827,11 +793,11 @@
         if (brushType === 'auto') {
             if (__DEV__) {
                 zrUtil.assert(
-                    panel && panel.__defaultBrushType,
+                    panel && panel.defaultBrushType,
                     'MUST have defaultBrushType when brushType is "atuo"'
                 );
             }
-            return panel.__defaultBrushType;
+            return panel.defaultBrushType;
         }
         return brushType;
     }
@@ -848,28 +814,28 @@
 
                 preventDefault(e);
 
-                var x = e.offsetX;
-                var y = e.offsetY;
+                var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
 
                 this._creatingCover = null;
-                var panel = this._creatingPanel = getPanelByPoint(this, x, y);
+                var panel = this._creatingPanel = getPanelByPoint(this, e, localCursorPoint);
 
                 if (panel) {
                     this._dragging = true;
-                    this._track = [this.group.transformCoordToLocal(x, y)];
+                    this._track = [localCursorPoint.slice()];
                 }
             }
         },
 
         mousemove: function (e) {
-            // set Cursor
-            resetCursor(this, e);
+            var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
+
+            resetCursor(this, e, localCursorPoint);
 
             if (this._dragging) {
 
                 preventDefault(e);
 
-                var eventParams = updateCoverByMouse(this, e, false);
+                var eventParams = updateCoverByMouse(this, e, localCursorPoint, false);
 
                 eventParams && trigger(this, eventParams);
             }
@@ -887,7 +853,8 @@
 
             preventDefault(e);
 
-            var eventParams = updateCoverByMouse(this, e, true);
+            var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
+            var eventParams = updateCoverByMouse(this, e, localCursorPoint, true);
 
             this._dragging = false;
             this._track = [];
@@ -1001,23 +968,17 @@
                 return [min, max];
             },
             updateCoverShape: function (controller, cover, localRange, brushOption) {
-                var brushWidth = brushOption.brushStyle.width;
                 var otherExtent;
                 // If brushWidth not specified, fit the panel.
-                if (brushWidth == null) {
-                    var panel = getPanelByCover(controller, cover);
-                    var base = 0;
-                    if (panel !== true) {
-                        var rect = panel.getBoundingRect();
-                        brushWidth = xyIndex ? rect.width : rect.height;
-                        base = xyIndex ? rect.x : rect.y;
-                    }
-                    // FIXME
-                    // do not support global panel yet.
-                    otherExtent = [base, base + (brushWidth || 0)];
+                var panel = getPanelByCover(controller, cover);
+                if (panel !== true && panel.getLinearBrushOtherExtent) {
+                    otherExtent = panel.getLinearBrushOtherExtent(
+                        xyIndex, controller._transform
+                    );
                 }
                 else {
-                    otherExtent = [-brushWidth / 2, brushWidth / 2];
+                    var zr = controller._zr;
+                    otherExtent = [0, [zr.getWidth(), zr.getHeight()][1 - xyIndex]];
                 }
                 var rectRange = [localRange, otherExtent];
                 xyIndex && rectRange.reverse();

package/lib/component/helper/BrushTargetManager.js

@@ -3,6 +3,7 @@
     var zrUtil = require('zrender/lib/core/util');
     var graphic = require('../../util/graphic');
     var modelUtil = require('../../util/model');
+    var brushHelper = require('./brushHelper');
 
     var each = zrUtil.each;
     var indexOf = zrUtil.indexOf;
@@ -168,12 +169,17 @@
         }, this);
     };
 
-    proto.makePanelOpts = function (getDefaultBrushType) {
+    proto.makePanelOpts = function (api, getDefaultBrushType) {
         return zrUtil.map(this._targetInfoList, function (targetInfo) {
+            var rect = targetInfo.getPanelRect();
             return {
                 panelId: targetInfo.panelId,
-                rect: targetInfo.getPanelRect(),
-                defaultBrushType: getDefaultBrushType && getDefaultBrushType(targetInfo)
+                defaultBrushType: getDefaultBrushType && getDefaultBrushType(targetInfo),
+                clipPath: brushHelper.makeRectPanelClipPath(rect),
+                isTargetByCursor: brushHelper.makeRectIsTargetByCursor(
+                    rect, api, targetInfo.coordSysModel
+                ),
+                getLinearBrushOtherExtent: brushHelper.makeLinearBrushOtherExtent(rect)
             };
         });
     };
@@ -238,7 +244,7 @@
             var yAxisModels = foundCpts.yAxisModels;
             var gridModels = foundCpts.gridModels;
             // Remove duplicated.
-            var gridModelMap = {};
+            var gridModelMap = zrUtil.createHashMap();
             var xAxesHas = {};
             var yAxesHas = {};
 
@@ -248,21 +254,21 @@
 
             each(xAxisModels, function (axisModel) {
                 var gridModel = axisModel.axis.grid.model;
-                gridModelMap[gridModel.id] = gridModel;
+                gridModelMap.set(gridModel.id, gridModel);
                 xAxesHas[gridModel.id] = true;
             });
             each(yAxisModels, function (axisModel) {
                 var gridModel = axisModel.axis.grid.model;
-                gridModelMap[gridModel.id] = gridModel;
+                gridModelMap.set(gridModel.id, gridModel);
                 yAxesHas[gridModel.id] = true;
             });
             each(gridModels, function (gridModel) {
-                gridModelMap[gridModel.id] = gridModel;
+                gridModelMap.set(gridModel.id, gridModel);
                 xAxesHas[gridModel.id] = true;
                 yAxesHas[gridModel.id] = true;
             });
 
-            each(gridModelMap, function (gridModel) {
+            gridModelMap.each(function (gridModel) {
                 var grid = gridModel.coordinateSystem;
                 var cartesians = [];
 
@@ -276,6 +282,7 @@
                 targetInfoList.push({
                     panelId: 'grid--' + gridModel.id,
                     gridModel: gridModel,
+                    coordSysModel: gridModel,
                     // Use the first one as the representitive coordSys.
                     coordSys: cartesians[0],
                     coordSyses: cartesians,
@@ -292,6 +299,7 @@
                 targetInfoList.push({
                     panelId: 'geo--' + geoModel.id,
                     geoModel: geoModel,
+                    coordSysModel: geoModel,
                     coordSys: coordSys,
                     coordSyses: [coordSys],
                     getPanelRect: panelRectBuilder.geo

package/lib/component/helper/MapDraw.js

@@ -4,6 +4,8 @@
 
 
     var RoamController = require('./RoamController');
+    var roamHelper = require('../../component/helper/roamHelper');
+    var cursorHelper = require('../../component/helper/cursorHelper');
     var graphic = require('../../util/graphic');
     var zrUtil = require('zrender/lib/core/util');
 
@@ -84,9 +86,13 @@
          * @type {module:echarts/component/helper/RoamController}
          * @private
          */
-        this._controller = new RoamController(
-            api.getZr(), updateGroup ? group : null, null
-        );
+        this._controller = new RoamController(api.getZr());
+
+        /**
+         * @type {Object} {target, zoom, zoomLimit}
+         * @private
+         */
+        this._controllerHost = {target: updateGroup ? group : null};
 
         /**
          * @type {module:zrender/container/Group}
@@ -150,7 +156,7 @@
             var hoverItemStyleAccessPath = ['itemStyle', 'emphasis'];
             var labelAccessPath = ['label', 'normal'];
             var hoverLabelAccessPath = ['label', 'emphasis'];
-            var nameMap = {};
+            var nameMap = zrUtil.createHashMap();
 
             zrUtil.each(geo.regions, function (region) {
 
@@ -159,8 +165,8 @@
                 // colonies). And it is not appropriate to merge them in geo, which
                 // will make them share the same label and bring trouble in label
                 // location calculation.
-                var regionGroup = nameMap[region.name]
-                    || (nameMap[region.name] = new graphic.Group());
+                var regionGroup = nameMap.get(region.name)
+                    || nameMap.set(region.name, new graphic.Group());
 
                 var compoundPath = new graphic.CompoundPath({
                     shape: {
@@ -295,14 +301,17 @@
         remove: function () {
             this.group.removeAll();
             this._controller.dispose();
+            this._controllerHost = {};
         },
 
         _updateController: function (mapOrGeoModel, ecModel, api) {
             var geo = mapOrGeoModel.coordinateSystem;
             var controller = this._controller;
-            controller.zoomLimit = mapOrGeoModel.get('scaleLimit');
-            // Update zoom from model
-            controller.zoom = geo.getZoom();
+            var controllerHost = this._controllerHost;
+
+            controllerHost.zoomLimit = mapOrGeoModel.get('scaleLimit');
+            controllerHost.zoom = geo.getZoom();
+
             // roamType is will be set default true if it is null
             controller.enable(mapOrGeoModel.get('roam') || false);
             var mainType = mapOrGeoModel.mainType;
@@ -319,6 +328,8 @@
             controller.off('pan').on('pan', function (dx, dy) {
                 this._mouseDownFlag = false;
 
+                roamHelper.updateViewOnPan(controllerHost, dx, dy);
+
                 api.dispatchAction(zrUtil.extend(makeActionBase(), {
                     dx: dx,
                     dy: dy
@@ -328,6 +339,8 @@
             controller.off('zoom').on('zoom', function (zoom, mouseX, mouseY) {
                 this._mouseDownFlag = false;
 
+                roamHelper.updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
+
                 api.dispatchAction(zrUtil.extend(makeActionBase(), {
                     zoom: zoom,
                     originX: mouseX,
@@ -345,8 +358,9 @@
                 }
             }, this);
 
-            controller.setContainsPoint(function (x, y) {
-                return geo.getViewRectAfterRoam().contain(x, y);
+            controller.setPointerChecker(function (e, x, y) {
+                return geo.getViewRectAfterRoam().contain(x, y)
+                    && !cursorHelper.onIrrelevantElement(e, api, mapOrGeoModel);
             });
         }
     };