sun-card-design 1.1.16 → 1.1.18

package/dist/mobile/sun-card-design-mobile.es1943.js

@@ -1,719 +1,164 @@
-import { __extends } from "./sun-card-design-mobile.es1717.js";
-import { bind, each, indexOf, isFunction, isString } from "./sun-card-design-mobile.es922.js";
-import { stop } from "./sun-card-design-mobile.es1984.js";
-import { getTransform, transformDirection, applyTransform } from "./sun-card-design-mobile.es1756.js";
-import { createOrUpdate, clear } from "./sun-card-design-mobile.es1730.js";
-import DataZoomView from "./sun-card-design-mobile.es2140.js";
-import { linearMap, parsePercent, asc } from "./sun-card-design-mobile.es1962.js";
-import { getLayoutParams, getLayoutRect } from "./sun-card-design-mobile.es1758.js";
-import sliderMove from "./sun-card-design-mobile.es2119.js";
-import { getAxisMainType, collectReferCoordSysModelInfo } from "./sun-card-design-mobile.es2141.js";
-import { enableHoverEmphasis } from "./sun-card-design-mobile.es1728.js";
-import { symbolBuildProxies, createSymbol } from "./sun-card-design-mobile.es2030.js";
-import { deprecateLog } from "./sun-card-design-mobile.es1740.js";
-import { createTextStyle } from "./sun-card-design-mobile.es1915.js";
-import Group from "./sun-card-design-mobile.es1752.js";
-import Rect$1 from "./sun-card-design-mobile.es1748.js";
-import ZRText from "./sun-card-design-mobile.es1917.js";
-import Point from "./sun-card-design-mobile.es1980.js";
-import Polygon from "./sun-card-design-mobile.es1971.js";
-import Polyline from "./sun-card-design-mobile.es1972.js";
-var Rect = Rect$1;
-var DEFAULT_LOCATION_EDGE_GAP = 7;
-var DEFAULT_FRAME_BORDER_WIDTH = 1;
-var DEFAULT_FILLER_SIZE = 30;
-var DEFAULT_MOVE_HANDLE_SIZE = 7;
-var HORIZONTAL = "horizontal";
-var VERTICAL = "vertical";
-var LABEL_GAP = 5;
-var SHOW_DATA_SHADOW_SERIES_TYPE = ["line", "bar", "candlestick", "scatter"];
-var REALTIME_ANIMATION_CONFIG = {
-  easing: "cubicOut",
-  duration: 100,
-  delay: 0
-};
-var SliderZoomView = (
-  /** @class */
-  (function(_super) {
-    __extends(SliderZoomView2, _super);
-    function SliderZoomView2() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.type = SliderZoomView2.type;
-      _this._displayables = {};
-      return _this;
+import RoamController from "./sun-card-design-mobile.es2055.js";
+import { createOrUpdate } from "./sun-card-design-mobile.es1730.js";
+import { makeInner } from "./sun-card-design-mobile.es1729.js";
+import { createHashMap, each, curry } from "./sun-card-design-mobile.es922.js";
+import { collectReferCoordSysModelInfo } from "./sun-card-design-mobile.es2143.js";
+var inner = makeInner();
+function setViewInfoToCoordSysRecord(api, dataZoomModel, getRange) {
+  inner(api).coordSysRecordMap.each(function(coordSysRecord) {
+    var dzInfo = coordSysRecord.dataZoomInfoMap.get(dataZoomModel.uid);
+    if (dzInfo) {
+      dzInfo.getRange = getRange;
     }
-    SliderZoomView2.prototype.init = function(ecModel, api) {
-      this.api = api;
-      this._onBrush = bind(this._onBrush, this);
-      this._onBrushEnd = bind(this._onBrushEnd, this);
-    };
-    SliderZoomView2.prototype.render = function(dataZoomModel, ecModel, api, payload) {
-      _super.prototype.render.apply(this, arguments);
-      createOrUpdate(this, "_dispatchZoomAction", dataZoomModel.get("throttle"), "fixRate");
-      this._orient = dataZoomModel.getOrient();
-      if (dataZoomModel.get("show") === false) {
-        this.group.removeAll();
-        return;
-      }
-      if (dataZoomModel.noTarget()) {
-        this._clear();
-        this.group.removeAll();
-        return;
-      }
-      if (!payload || payload.type !== "dataZoom" || payload.from !== this.uid) {
-        this._buildView();
-      }
-      this._updateView();
-    };
-    SliderZoomView2.prototype.dispose = function() {
-      this._clear();
-      _super.prototype.dispose.apply(this, arguments);
-    };
-    SliderZoomView2.prototype._clear = function() {
-      clear(this, "_dispatchZoomAction");
-      var zr = this.api.getZr();
-      zr.off("mousemove", this._onBrush);
-      zr.off("mouseup", this._onBrushEnd);
-    };
-    SliderZoomView2.prototype._buildView = function() {
-      var thisGroup = this.group;
-      thisGroup.removeAll();
-      this._brushing = false;
-      this._displayables.brushRect = null;
-      this._resetLocation();
-      this._resetInterval();
-      var barGroup = this._displayables.sliderGroup = new Group();
-      this._renderBackground();
-      this._renderHandle();
-      this._renderDataShadow();
-      thisGroup.add(barGroup);
-      this._positionGroup();
-    };
-    SliderZoomView2.prototype._resetLocation = function() {
-      var dataZoomModel = this.dataZoomModel;
-      var api = this.api;
-      var showMoveHandle = dataZoomModel.get("brushSelect");
-      var moveHandleSize = showMoveHandle ? DEFAULT_MOVE_HANDLE_SIZE : 0;
-      var coordRect = this._findCoordRect();
-      var ecSize = {
-        width: api.getWidth(),
-        height: api.getHeight()
-      };
-      var positionInfo = this._orient === HORIZONTAL ? {
-        // Why using 'right', because right should be used in vertical,
-        // and it is better to be consistent for dealing with position param merge.
-        right: ecSize.width - coordRect.x - coordRect.width,
-        top: ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP - moveHandleSize,
-        width: coordRect.width,
-        height: DEFAULT_FILLER_SIZE
-      } : {
-        right: DEFAULT_LOCATION_EDGE_GAP,
-        top: coordRect.y,
-        width: DEFAULT_FILLER_SIZE,
-        height: coordRect.height
-      };
-      var layoutParams = getLayoutParams(dataZoomModel.option);
-      each(["right", "top", "width", "height"], function(name) {
-        if (layoutParams[name] === "ph") {
-          layoutParams[name] = positionInfo[name];
+  });
+}
+function disposeCoordSysRecordIfNeeded(api, dataZoomModel) {
+  var coordSysRecordMap = inner(api).coordSysRecordMap;
+  var coordSysKeyArr = coordSysRecordMap.keys();
+  for (var i = 0; i < coordSysKeyArr.length; i++) {
+    var coordSysKey = coordSysKeyArr[i];
+    var coordSysRecord = coordSysRecordMap.get(coordSysKey);
+    var dataZoomInfoMap = coordSysRecord.dataZoomInfoMap;
+    if (dataZoomInfoMap) {
+      var dzUid = dataZoomModel.uid;
+      var dzInfo = dataZoomInfoMap.get(dzUid);
+      if (dzInfo) {
+        dataZoomInfoMap.removeKey(dzUid);
+        if (!dataZoomInfoMap.keys().length) {
+          disposeCoordSysRecord(coordSysRecordMap, coordSysRecord);
         }
-      });
-      var layoutRect = getLayoutRect(layoutParams, ecSize);
-      this._location = {
-        x: layoutRect.x,
-        y: layoutRect.y
-      };
-      this._size = [layoutRect.width, layoutRect.height];
-      this._orient === VERTICAL && this._size.reverse();
-    };
-    SliderZoomView2.prototype._positionGroup = function() {
-      var thisGroup = this.group;
-      var location = this._location;
-      var orient = this._orient;
-      var targetAxisModel = this.dataZoomModel.getFirstTargetAxisModel();
-      var inverse = targetAxisModel && targetAxisModel.get("inverse");
-      var sliderGroup = this._displayables.sliderGroup;
-      var otherAxisInverse = (this._dataShadowInfo || {}).otherAxisInverse;
-      sliderGroup.attr(orient === HORIZONTAL && !inverse ? {
-        scaleY: otherAxisInverse ? 1 : -1,
-        scaleX: 1
-      } : orient === HORIZONTAL && inverse ? {
-        scaleY: otherAxisInverse ? 1 : -1,
-        scaleX: -1
-      } : orient === VERTICAL && !inverse ? {
-        scaleY: otherAxisInverse ? -1 : 1,
-        scaleX: 1,
-        rotation: Math.PI / 2
-      } : {
-        scaleY: otherAxisInverse ? -1 : 1,
-        scaleX: -1,
-        rotation: Math.PI / 2
-      });
-      var rect = thisGroup.getBoundingRect([sliderGroup]);
-      thisGroup.x = location.x - rect.x;
-      thisGroup.y = location.y - rect.y;
-      thisGroup.markRedraw();
-    };
-    SliderZoomView2.prototype._getViewExtent = function() {
-      return [0, this._size[0]];
-    };
-    SliderZoomView2.prototype._renderBackground = function() {
-      var dataZoomModel = this.dataZoomModel;
-      var size = this._size;
-      var barGroup = this._displayables.sliderGroup;
-      var brushSelect = dataZoomModel.get("brushSelect");
-      barGroup.add(new Rect({
-        silent: true,
-        shape: {
-          x: 0,
-          y: 0,
-          width: size[0],
-          height: size[1]
-        },
-        style: {
-          fill: dataZoomModel.get("backgroundColor")
-        },
-        z2: -40
-      }));
-      var clickPanel = new Rect({
-        shape: {
-          x: 0,
-          y: 0,
-          width: size[0],
-          height: size[1]
-        },
-        style: {
-          fill: "transparent"
-        },
-        z2: 0,
-        onclick: bind(this._onClickPanel, this)
-      });
-      var zr = this.api.getZr();
-      if (brushSelect) {
-        clickPanel.on("mousedown", this._onBrushStart, this);
-        clickPanel.cursor = "crosshair";
-        zr.on("mousemove", this._onBrush);
-        zr.on("mouseup", this._onBrushEnd);
-      } else {
-        zr.off("mousemove", this._onBrush);
-        zr.off("mouseup", this._onBrushEnd);
-      }
-      barGroup.add(clickPanel);
-    };
-    SliderZoomView2.prototype._renderDataShadow = function() {
-      var info = this._dataShadowInfo = this._prepareDataShadowInfo();
-      this._displayables.dataShadowSegs = [];
-      if (!info) {
-        return;
-      }
-      var size = this._size;
-      var oldSize = this._shadowSize || [];
-      var seriesModel = info.series;
-      var data = seriesModel.getRawData();
-      var candlestickDim = seriesModel.getShadowDim && seriesModel.getShadowDim();
-      var otherDim = candlestickDim && data.getDimensionInfo(candlestickDim) ? seriesModel.getShadowDim() : info.otherDim;
-      if (otherDim == null) {
-        return;
-      }
-      var polygonPts = this._shadowPolygonPts;
-      var polylinePts = this._shadowPolylinePts;
-      if (data !== this._shadowData || otherDim !== this._shadowDim || size[0] !== oldSize[0] || size[1] !== oldSize[1]) {
-        var otherDataExtent_1 = data.getDataExtent(otherDim);
-        var otherOffset = (otherDataExtent_1[1] - otherDataExtent_1[0]) * 0.3;
-        otherDataExtent_1 = [otherDataExtent_1[0] - otherOffset, otherDataExtent_1[1] + otherOffset];
-        var otherShadowExtent_1 = [0, size[1]];
-        var thisShadowExtent = [0, size[0]];
-        var areaPoints_1 = [[size[0], 0], [0, 0]];
-        var linePoints_1 = [];
-        var step_1 = thisShadowExtent[1] / (data.count() - 1);
-        var thisCoord_1 = 0;
-        var stride_1 = Math.round(data.count() / size[0]);
-        var lastIsEmpty_1;
-        data.each([otherDim], function(value, index) {
-          if (stride_1 > 0 && index % stride_1) {
-            thisCoord_1 += step_1;
-            return;
-          }
-          var isEmpty = value == null || isNaN(value) || value === "";
-          var otherCoord = isEmpty ? 0 : linearMap(value, otherDataExtent_1, otherShadowExtent_1, true);
-          if (isEmpty && !lastIsEmpty_1 && index) {
-            areaPoints_1.push([areaPoints_1[areaPoints_1.length - 1][0], 0]);
-            linePoints_1.push([linePoints_1[linePoints_1.length - 1][0], 0]);
-          } else if (!isEmpty && lastIsEmpty_1) {
-            areaPoints_1.push([thisCoord_1, 0]);
-            linePoints_1.push([thisCoord_1, 0]);
-          }
-          areaPoints_1.push([thisCoord_1, otherCoord]);
-          linePoints_1.push([thisCoord_1, otherCoord]);
-          thisCoord_1 += step_1;
-          lastIsEmpty_1 = isEmpty;
-        });
-        polygonPts = this._shadowPolygonPts = areaPoints_1;
-        polylinePts = this._shadowPolylinePts = linePoints_1;
       }
-      this._shadowData = data;
-      this._shadowDim = otherDim;
-      this._shadowSize = [size[0], size[1]];
-      var dataZoomModel = this.dataZoomModel;
-      function createDataShadowGroup(isSelectedArea) {
-        var model = dataZoomModel.getModel(isSelectedArea ? "selectedDataBackground" : "dataBackground");
-        var group2 = new Group();
-        var polygon = new Polygon({
-          shape: {
-            points: polygonPts
-          },
-          segmentIgnoreThreshold: 1,
-          style: model.getModel("areaStyle").getAreaStyle(),
-          silent: true,
-          z2: -20
-        });
-        var polyline = new Polyline({
-          shape: {
-            points: polylinePts
-          },
-          segmentIgnoreThreshold: 1,
-          style: model.getModel("lineStyle").getLineStyle(),
-          silent: true,
-          z2: -19
-        });
-        group2.add(polygon);
-        group2.add(polyline);
-        return group2;
-      }
-      for (var i = 0; i < 3; i++) {
-        var group = createDataShadowGroup(i === 1);
-        this._displayables.sliderGroup.add(group);
-        this._displayables.dataShadowSegs.push(group);
-      }
-    };
-    SliderZoomView2.prototype._prepareDataShadowInfo = function() {
-      var dataZoomModel = this.dataZoomModel;
-      var showDataShadow = dataZoomModel.get("showDataShadow");
-      if (showDataShadow === false) {
-        return;
-      }
-      var result;
-      var ecModel = this.ecModel;
-      dataZoomModel.eachTargetAxis(function(axisDim, axisIndex) {
-        var seriesModels = dataZoomModel.getAxisProxy(axisDim, axisIndex).getTargetSeriesModels();
-        each(seriesModels, function(seriesModel) {
-          if (result) {
-            return;
-          }
-          if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get("type")) < 0) {
-            return;
-          }
-          var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis;
-          var otherDim = getOtherDim(axisDim);
-          var otherAxisInverse;
-          var coordSys = seriesModel.coordinateSystem;
-          if (otherDim != null && coordSys.getOtherAxis) {
-            otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse;
-          }
-          otherDim = seriesModel.getData().mapDimension(otherDim);
-          result = {
-            thisAxis,
-            series: seriesModel,
-            thisDim: axisDim,
-            otherDim,
-            otherAxisInverse
-          };
-        }, this);
-      }, this);
-      return result;
-    };
-    SliderZoomView2.prototype._renderHandle = function() {
-      var thisGroup = this.group;
-      var displayables = this._displayables;
-      var handles = displayables.handles = [null, null];
-      var handleLabels = displayables.handleLabels = [null, null];
-      var sliderGroup = this._displayables.sliderGroup;
-      var size = this._size;
-      var dataZoomModel = this.dataZoomModel;
-      var api = this.api;
-      var borderRadius = dataZoomModel.get("borderRadius") || 0;
-      var brushSelect = dataZoomModel.get("brushSelect");
-      var filler = displayables.filler = new Rect({
-        silent: brushSelect,
-        style: {
-          fill: dataZoomModel.get("fillerColor")
-        },
-        textConfig: {
-          position: "inside"
-        }
-      });
-      sliderGroup.add(filler);
-      sliderGroup.add(new Rect({
-        silent: true,
-        subPixelOptimize: true,
-        shape: {
-          x: 0,
-          y: 0,
-          width: size[0],
-          height: size[1],
-          r: borderRadius
-        },
-        style: {
-          // deprecated option
-          stroke: dataZoomModel.get("dataBackgroundColor") || dataZoomModel.get("borderColor"),
-          lineWidth: DEFAULT_FRAME_BORDER_WIDTH,
-          fill: "rgba(0,0,0,0)"
-        }
-      }));
-      each([0, 1], function(handleIndex) {
-        var iconStr = dataZoomModel.get("handleIcon");
-        if (!symbolBuildProxies[iconStr] && iconStr.indexOf("path://") < 0 && iconStr.indexOf("image://") < 0) {
-          iconStr = "path://" + iconStr;
-          if (process.env.NODE_ENV !== "production") {
-            deprecateLog("handleIcon now needs 'path://' prefix when using a path string");
-          }
-        }
-        var path = createSymbol(iconStr, -1, 0, 2, 2, null, true);
-        path.attr({
-          cursor: getCursor(this._orient),
-          draggable: true,
-          drift: bind(this._onDragMove, this, handleIndex),
-          ondragend: bind(this._onDragEnd, this),
-          onmouseover: bind(this._showDataInfo, this, true),
-          onmouseout: bind(this._showDataInfo, this, false),
-          z2: 5
-        });
-        var bRect = path.getBoundingRect();
-        var handleSize = dataZoomModel.get("handleSize");
-        this._handleHeight = parsePercent(handleSize, this._size[1]);
-        this._handleWidth = bRect.width / bRect.height * this._handleHeight;
-        path.setStyle(dataZoomModel.getModel("handleStyle").getItemStyle());
-        path.style.strokeNoScale = true;
-        path.rectHover = true;
-        path.ensureState("emphasis").style = dataZoomModel.getModel(["emphasis", "handleStyle"]).getItemStyle();
-        enableHoverEmphasis(path);
-        var handleColor = dataZoomModel.get("handleColor");
-        if (handleColor != null) {
-          path.style.fill = handleColor;
+    }
+  }
+}
+function disposeCoordSysRecord(coordSysRecordMap, coordSysRecord) {
+  if (coordSysRecord) {
+    coordSysRecordMap.removeKey(coordSysRecord.model.uid);
+    var controller = coordSysRecord.controller;
+    controller && controller.dispose();
+  }
+}
+function createCoordSysRecord(api, coordSysModel) {
+  var coordSysRecord = {
+    model: coordSysModel,
+    containsPoint: curry(containsPoint, coordSysModel),
+    dispatchAction: curry(dispatchAction, api),
+    dataZoomInfoMap: null,
+    controller: null
+  };
+  var controller = coordSysRecord.controller = new RoamController(api.getZr());
+  each(["pan", "zoom", "scrollMove"], function(eventName) {
+    controller.on(eventName, function(event) {
+      var batch = [];
+      coordSysRecord.dataZoomInfoMap.each(function(dzInfo) {
+        if (!event.isAvailableBehavior(dzInfo.model.option)) {
+          return;
         }
-        sliderGroup.add(handles[handleIndex] = path);
-        var textStyleModel = dataZoomModel.getModel("textStyle");
-        var handleLabel = dataZoomModel.get("handleLabel") || {};
-        var handleLabelShow = handleLabel.show || false;
-        thisGroup.add(handleLabels[handleIndex] = new ZRText({
-          silent: true,
-          invisible: !handleLabelShow,
-          style: createTextStyle(textStyleModel, {
-            x: 0,
-            y: 0,
-            text: "",
-            verticalAlign: "middle",
-            align: "center",
-            fill: textStyleModel.getTextColor(),
-            font: textStyleModel.getFont()
-          }),
-          z2: 10
-        }));
-      }, this);
-      var actualMoveZone = filler;
-      if (brushSelect) {
-        var moveHandleHeight = parsePercent(dataZoomModel.get("moveHandleSize"), size[1]);
-        var moveHandle_1 = displayables.moveHandle = new Rect$1({
-          style: dataZoomModel.getModel("moveHandleStyle").getItemStyle(),
-          silent: true,
-          shape: {
-            r: [0, 0, 2, 2],
-            y: size[1] - 0.5,
-            height: moveHandleHeight
-          }
-        });
-        var iconSize = moveHandleHeight * 0.8;
-        var moveHandleIcon = displayables.moveHandleIcon = createSymbol(dataZoomModel.get("moveHandleIcon"), -iconSize / 2, -iconSize / 2, iconSize, iconSize, "#fff", true);
-        moveHandleIcon.silent = true;
-        moveHandleIcon.y = size[1] + moveHandleHeight / 2 - 0.5;
-        moveHandle_1.ensureState("emphasis").style = dataZoomModel.getModel(["emphasis", "moveHandleStyle"]).getItemStyle();
-        var moveZoneExpandSize = Math.min(size[1] / 2, Math.max(moveHandleHeight, 10));
-        actualMoveZone = displayables.moveZone = new Rect$1({
-          invisible: true,
-          shape: {
-            y: size[1] - moveZoneExpandSize,
-            height: moveHandleHeight + moveZoneExpandSize
-          }
+        var method = (dzInfo.getRange || {})[eventName];
+        var range = method && method(dzInfo.dzReferCoordSysInfo, coordSysRecord.model.mainType, coordSysRecord.controller, event);
+        !dzInfo.model.get("disabled", true) && range && batch.push({
+          dataZoomId: dzInfo.model.id,
+          start: range[0],
+          end: range[1]
         });
-        actualMoveZone.on("mouseover", function() {
-          api.enterEmphasis(moveHandle_1);
-        }).on("mouseout", function() {
-          api.leaveEmphasis(moveHandle_1);
-        });
-        sliderGroup.add(moveHandle_1);
-        sliderGroup.add(moveHandleIcon);
-        sliderGroup.add(actualMoveZone);
-      }
-      actualMoveZone.attr({
-        draggable: true,
-        cursor: getCursor(this._orient),
-        drift: bind(this._onDragMove, this, "all"),
-        ondragstart: bind(this._showDataInfo, this, true),
-        ondragend: bind(this._onDragEnd, this),
-        onmouseover: bind(this._showDataInfo, this, true),
-        onmouseout: bind(this._showDataInfo, this, false)
       });
-    };
-    SliderZoomView2.prototype._resetInterval = function() {
-      var range = this._range = this.dataZoomModel.getPercentRange();
-      var viewExtent = this._getViewExtent();
-      this._handleEnds = [linearMap(range[0], [0, 100], viewExtent, true), linearMap(range[1], [0, 100], viewExtent, true)];
-    };
-    SliderZoomView2.prototype._updateInterval = function(handleIndex, delta) {
-      var dataZoomModel = this.dataZoomModel;
-      var handleEnds = this._handleEnds;
-      var viewExtend = this._getViewExtent();
-      var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
-      var percentExtent = [0, 100];
-      sliderMove(delta, handleEnds, viewExtend, dataZoomModel.get("zoomLock") ? "all" : handleIndex, minMaxSpan.minSpan != null ? linearMap(minMaxSpan.minSpan, percentExtent, viewExtend, true) : null, minMaxSpan.maxSpan != null ? linearMap(minMaxSpan.maxSpan, percentExtent, viewExtend, true) : null);
-      var lastRange = this._range;
-      var range = this._range = asc([linearMap(handleEnds[0], viewExtend, percentExtent, true), linearMap(handleEnds[1], viewExtend, percentExtent, true)]);
-      return !lastRange || lastRange[0] !== range[0] || lastRange[1] !== range[1];
-    };
-    SliderZoomView2.prototype._updateView = function(nonRealtime) {
-      var displaybles = this._displayables;
-      var handleEnds = this._handleEnds;
-      var handleInterval = asc(handleEnds.slice());
-      var size = this._size;
-      each([0, 1], function(handleIndex) {
-        var handle = displaybles.handles[handleIndex];
-        var handleHeight = this._handleHeight;
-        handle.attr({
-          scaleX: handleHeight / 2,
-          scaleY: handleHeight / 2,
-          // This is a trick, by adding an extra tiny offset to let the default handle's end point align to the drag window.
-          // NOTE: It may affect some custom shapes a bit. But we prefer to have better result by default.
-          x: handleEnds[handleIndex] + (handleIndex ? -1 : 1),
-          y: size[1] / 2 - handleHeight / 2
+      batch.length && coordSysRecord.dispatchAction(batch);
+    });
+  });
+  return coordSysRecord;
+}
+function dispatchAction(api, batch) {
+  if (!api.isDisposed()) {
+    api.dispatchAction({
+      type: "dataZoom",
+      animation: {
+        easing: "cubicOut",
+        duration: 100
+      },
+      batch
+    });
+  }
+}
+function containsPoint(coordSysModel, e, x, y) {
+  return coordSysModel.coordinateSystem.containPoint([x, y]);
+}
+function mergeControllerParams(dataZoomInfoMap) {
+  var controlType;
+  var prefix = "type_";
+  var typePriority = {
+    "type_true": 2,
+    "type_move": 1,
+    "type_false": 0,
+    "type_undefined": -1
+  };
+  var preventDefaultMouseMove = true;
+  dataZoomInfoMap.each(function(dataZoomInfo) {
+    var dataZoomModel = dataZoomInfo.model;
+    var oneType = dataZoomModel.get("disabled", true) ? false : dataZoomModel.get("zoomLock", true) ? "move" : true;
+    if (typePriority[prefix + oneType] > typePriority[prefix + controlType]) {
+      controlType = oneType;
+    }
+    preventDefaultMouseMove = preventDefaultMouseMove && dataZoomModel.get("preventDefaultMouseMove", true);
+  });
+  return {
+    controlType,
+    opt: {
+      // RoamController will enable all of these functionalities,
+      // and the final behavior is determined by its event listener
+      // provided by each inside zoom.
+      zoomOnMouseWheel: true,
+      moveOnMouseMove: true,
+      moveOnMouseWheel: true,
+      preventDefaultMouseMove: !!preventDefaultMouseMove
+    }
+  };
+}
+function installDataZoomRoamProcessor(registers) {
+  registers.registerProcessor(registers.PRIORITY.PROCESSOR.FILTER, function(ecModel, api) {
+    var apiInner = inner(api);
+    var coordSysRecordMap = apiInner.coordSysRecordMap || (apiInner.coordSysRecordMap = createHashMap());
+    coordSysRecordMap.each(function(coordSysRecord) {
+      coordSysRecord.dataZoomInfoMap = null;
+    });
+    ecModel.eachComponent({
+      mainType: "dataZoom",
+      subType: "inside"
+    }, function(dataZoomModel) {
+      var dzReferCoordSysWrap = collectReferCoordSysModelInfo(dataZoomModel);
+      each(dzReferCoordSysWrap.infoList, function(dzCoordSysInfo) {
+        var coordSysUid = dzCoordSysInfo.model.uid;
+        var coordSysRecord = coordSysRecordMap.get(coordSysUid) || coordSysRecordMap.set(coordSysUid, createCoordSysRecord(api, dzCoordSysInfo.model));
+        var dataZoomInfoMap = coordSysRecord.dataZoomInfoMap || (coordSysRecord.dataZoomInfoMap = createHashMap());
+        dataZoomInfoMap.set(dataZoomModel.uid, {
+          dzReferCoordSysInfo: dzCoordSysInfo,
+          model: dataZoomModel,
+          getRange: null
         });
-      }, this);
-      displaybles.filler.setShape({
-        x: handleInterval[0],
-        y: 0,
-        width: handleInterval[1] - handleInterval[0],
-        height: size[1]
       });
-      var viewExtent = {
-        x: handleInterval[0],
-        width: handleInterval[1] - handleInterval[0]
-      };
-      if (displaybles.moveHandle) {
-        displaybles.moveHandle.setShape(viewExtent);
-        displaybles.moveZone.setShape(viewExtent);
-        displaybles.moveZone.getBoundingRect();
-        displaybles.moveHandleIcon && displaybles.moveHandleIcon.attr("x", viewExtent.x + viewExtent.width / 2);
-      }
-      var dataShadowSegs = displaybles.dataShadowSegs;
-      var segIntervals = [0, handleInterval[0], handleInterval[1], size[0]];
-      for (var i = 0; i < dataShadowSegs.length; i++) {
-        var segGroup = dataShadowSegs[i];
-        var clipPath = segGroup.getClipPath();
-        if (!clipPath) {
-          clipPath = new Rect$1();
-          segGroup.setClipPath(clipPath);
-        }
-        clipPath.setShape({
-          x: segIntervals[i],
-          y: 0,
-          width: segIntervals[i + 1] - segIntervals[i],
-          height: size[1]
-        });
-      }
-      this._updateDataInfo(nonRealtime);
-    };
-    SliderZoomView2.prototype._updateDataInfo = function(nonRealtime) {
-      var dataZoomModel = this.dataZoomModel;
-      var displaybles = this._displayables;
-      var handleLabels = displaybles.handleLabels;
-      var orient = this._orient;
-      var labelTexts = ["", ""];
-      if (dataZoomModel.get("showDetail")) {
-        var axisProxy = dataZoomModel.findRepresentativeAxisProxy();
-        if (axisProxy) {
-          var axis = axisProxy.getAxisModel().axis;
-          var range = this._range;
-          var dataInterval = nonRealtime ? axisProxy.calculateDataWindow({
-            start: range[0],
-            end: range[1]
-          }).valueWindow : axisProxy.getDataValueWindow();
-          labelTexts = [this._formatLabel(dataInterval[0], axis), this._formatLabel(dataInterval[1], axis)];
+    });
+    coordSysRecordMap.each(function(coordSysRecord) {
+      var controller = coordSysRecord.controller;
+      var firstDzInfo;
+      var dataZoomInfoMap = coordSysRecord.dataZoomInfoMap;
+      if (dataZoomInfoMap) {
+        var firstDzKey = dataZoomInfoMap.keys()[0];
+        if (firstDzKey != null) {
+          firstDzInfo = dataZoomInfoMap.get(firstDzKey);
         }
       }
-      var orderedHandleEnds = asc(this._handleEnds.slice());
-      setLabel.call(this, 0);
-      setLabel.call(this, 1);
-      function setLabel(handleIndex) {
-        var barTransform = getTransform(displaybles.handles[handleIndex].parent, this.group);
-        var direction = transformDirection(handleIndex === 0 ? "right" : "left", barTransform);
-        var offset = this._handleWidth / 2 + LABEL_GAP;
-        var textPoint = applyTransform([orderedHandleEnds[handleIndex] + (handleIndex === 0 ? -offset : offset), this._size[1] / 2], barTransform);
-        handleLabels[handleIndex].setStyle({
-          x: textPoint[0],
-          y: textPoint[1],
-          verticalAlign: orient === HORIZONTAL ? "middle" : direction,
-          align: orient === HORIZONTAL ? direction : "center",
-          text: labelTexts[handleIndex]
-        });
-      }
-    };
-    SliderZoomView2.prototype._formatLabel = function(value, axis) {
-      var dataZoomModel = this.dataZoomModel;
-      var labelFormatter = dataZoomModel.get("labelFormatter");
-      var labelPrecision = dataZoomModel.get("labelPrecision");
-      if (labelPrecision == null || labelPrecision === "auto") {
-        labelPrecision = axis.getPixelPrecision();
-      }
-      var valueStr = value == null || isNaN(value) ? "" : axis.type === "category" || axis.type === "time" ? axis.scale.getLabel({
-        value: Math.round(value)
-      }) : value.toFixed(Math.min(labelPrecision, 20));
-      return isFunction(labelFormatter) ? labelFormatter(value, valueStr) : isString(labelFormatter) ? labelFormatter.replace("{value}", valueStr) : valueStr;
-    };
-    SliderZoomView2.prototype._showDataInfo = function(isEmphasis) {
-      var handleLabel = this.dataZoomModel.get("handleLabel") || {};
-      var normalShow = handleLabel.show || false;
-      var emphasisHandleLabel = this.dataZoomModel.getModel(["emphasis", "handleLabel"]);
-      var emphasisShow = emphasisHandleLabel.get("show") || false;
-      var toShow = isEmphasis || this._dragging ? emphasisShow : normalShow;
-      var displayables = this._displayables;
-      var handleLabels = displayables.handleLabels;
-      handleLabels[0].attr("invisible", !toShow);
-      handleLabels[1].attr("invisible", !toShow);
-      displayables.moveHandle && this.api[toShow ? "enterEmphasis" : "leaveEmphasis"](displayables.moveHandle, 1);
-    };
-    SliderZoomView2.prototype._onDragMove = function(handleIndex, dx, dy, event) {
-      this._dragging = true;
-      stop(event.event);
-      var barTransform = this._displayables.sliderGroup.getLocalTransform();
-      var vertex = applyTransform([dx, dy], barTransform, true);
-      var changed = this._updateInterval(handleIndex, vertex[0]);
-      var realtime = this.dataZoomModel.get("realtime");
-      this._updateView(!realtime);
-      changed && realtime && this._dispatchZoomAction(true);
-    };
-    SliderZoomView2.prototype._onDragEnd = function() {
-      this._dragging = false;
-      this._showDataInfo(false);
-      var realtime = this.dataZoomModel.get("realtime");
-      !realtime && this._dispatchZoomAction(false);
-    };
-    SliderZoomView2.prototype._onClickPanel = function(e) {
-      var size = this._size;
-      var localPoint = this._displayables.sliderGroup.transformCoordToLocal(e.offsetX, e.offsetY);
-      if (localPoint[0] < 0 || localPoint[0] > size[0] || localPoint[1] < 0 || localPoint[1] > size[1]) {
-        return;
-      }
-      var handleEnds = this._handleEnds;
-      var center = (handleEnds[0] + handleEnds[1]) / 2;
-      var changed = this._updateInterval("all", localPoint[0] - center);
-      this._updateView();
-      changed && this._dispatchZoomAction(false);
-    };
-    SliderZoomView2.prototype._onBrushStart = function(e) {
-      var x = e.offsetX;
-      var y = e.offsetY;
-      this._brushStart = new Point(x, y);
-      this._brushing = true;
-      this._brushStartTime = +/* @__PURE__ */ new Date();
-    };
-    SliderZoomView2.prototype._onBrushEnd = function(e) {
-      if (!this._brushing) {
-        return;
-      }
-      var brushRect = this._displayables.brushRect;
-      this._brushing = false;
-      if (!brushRect) {
-        return;
-      }
-      brushRect.attr("ignore", true);
-      var brushShape = brushRect.shape;
-      var brushEndTime = +/* @__PURE__ */ new Date();
-      if (brushEndTime - this._brushStartTime < 200 && Math.abs(brushShape.width) < 5) {
+      if (!firstDzInfo) {
+        disposeCoordSysRecord(coordSysRecordMap, coordSysRecord);
         return;
       }
-      var viewExtend = this._getViewExtent();
-      var percentExtent = [0, 100];
-      this._range = asc([linearMap(brushShape.x, viewExtend, percentExtent, true), linearMap(brushShape.x + brushShape.width, viewExtend, percentExtent, true)]);
-      this._handleEnds = [brushShape.x, brushShape.x + brushShape.width];
-      this._updateView();
-      this._dispatchZoomAction(false);
-    };
-    SliderZoomView2.prototype._onBrush = function(e) {
-      if (this._brushing) {
-        stop(e.event);
-        this._updateBrushRect(e.offsetX, e.offsetY);
-      }
-    };
-    SliderZoomView2.prototype._updateBrushRect = function(mouseX, mouseY) {
-      var displayables = this._displayables;
-      var dataZoomModel = this.dataZoomModel;
-      var brushRect = displayables.brushRect;
-      if (!brushRect) {
-        brushRect = displayables.brushRect = new Rect({
-          silent: true,
-          style: dataZoomModel.getModel("brushStyle").getItemStyle()
-        });
-        displayables.sliderGroup.add(brushRect);
-      }
-      brushRect.attr("ignore", false);
-      var brushStart = this._brushStart;
-      var sliderGroup = this._displayables.sliderGroup;
-      var endPoint = sliderGroup.transformCoordToLocal(mouseX, mouseY);
-      var startPoint = sliderGroup.transformCoordToLocal(brushStart.x, brushStart.y);
-      var size = this._size;
-      endPoint[0] = Math.max(Math.min(size[0], endPoint[0]), 0);
-      brushRect.setShape({
-        x: startPoint[0],
-        y: 0,
-        width: endPoint[0] - startPoint[0],
-        height: size[1]
-      });
-    };
-    SliderZoomView2.prototype._dispatchZoomAction = function(realtime) {
-      var range = this._range;
-      this.api.dispatchAction({
-        type: "dataZoom",
-        from: this.uid,
-        dataZoomId: this.dataZoomModel.id,
-        animation: realtime ? REALTIME_ANIMATION_CONFIG : null,
-        start: range[0],
-        end: range[1]
-      });
-    };
-    SliderZoomView2.prototype._findCoordRect = function() {
-      var rect;
-      var coordSysInfoList = collectReferCoordSysModelInfo(this.dataZoomModel).infoList;
-      if (!rect && coordSysInfoList.length) {
-        var coordSys = coordSysInfoList[0].model.coordinateSystem;
-        rect = coordSys.getRect && coordSys.getRect();
-      }
-      if (!rect) {
-        var width = this.api.getWidth();
-        var height = this.api.getHeight();
-        rect = {
-          x: width * 0.2,
-          y: height * 0.2,
-          width: width * 0.6,
-          height: height * 0.6
-        };
-      }
-      return rect;
-    };
-    SliderZoomView2.type = "dataZoom.slider";
-    return SliderZoomView2;
-  })(DataZoomView)
-);
-function getOtherDim(thisDim) {
-  var map = {
-    x: "y",
-    y: "x",
-    radius: "angle",
-    angle: "radius"
-  };
-  return map[thisDim];
-}
-function getCursor(orient) {
-  return orient === "vertical" ? "ns-resize" : "ew-resize";
+      var controllerParams = mergeControllerParams(dataZoomInfoMap);
+      controller.enable(controllerParams.controlType, controllerParams.opt);
+      controller.setPointerChecker(coordSysRecord.containsPoint);
+      createOrUpdate(coordSysRecord, "dispatchAction", firstDzInfo.model.get("throttle", true), "fixRate");
+    });
+  });
 }
 export {
-  SliderZoomView as default
+  disposeCoordSysRecordIfNeeded,
+  installDataZoomRoamProcessor,
+  setViewInfoToCoordSysRecord
 };