@visactor/vrender-components 0.17.0-alpha.8 → 0.17.1-alpha.1

package/cjs/crosshair/sector.d.ts

@@ -2,6 +2,7 @@ import type { IGroup } from '@visactor/vrender-core';
 import type { PointLocationCfg } from '../core/type';
 import { CrosshairBase } from './base';
 import type { SectorCrosshairAttrs } from './type';
+import type { ComponentOptions } from '../interface';
 export declare class SectorCrosshair extends CrosshairBase<SectorCrosshairAttrs> {
     static defaultAttributes: {
         sectorStyle: {
@@ -9,7 +10,7 @@ export declare class SectorCrosshair extends CrosshairBase<SectorCrosshairAttrs>
             opacity: number;
         };
     };
-    constructor(attributes: SectorCrosshairAttrs);
+    constructor(attributes: SectorCrosshairAttrs, options?: ComponentOptions);
     protected renderCrosshair(container: IGroup): import("@visactor/vrender-core").INode;
     setLocation(point: PointLocationCfg): void;
 }

package/cjs/crosshair/sector.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 const vutils_1 = require("@visactor/vutils"), constant_1 = require("../constant"), base_1 = require("./base");
 
 class SectorCrosshair extends base_1.CrosshairBase {
-    constructor(attributes) {
-        super((0, vutils_1.merge)({}, SectorCrosshair.defaultAttributes, attributes));
+    constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, SectorCrosshair.defaultAttributes, attributes));
     }
     renderCrosshair(container) {
         const {center: center, radius: radius, innerRadius: innerRadius = 0, sectorStyle: sectorStyle} = this.attribute, {startAngle: startAngle, endAngle: endAngle} = this.attribute;

package/cjs/crosshair/sector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/crosshair/sector.ts"],"names":[],"mappings":";;;AAIA,6CAA0E;AAE1E,0CAAiE;AACjE,iCAAuC;AAGvC,MAAa,eAAgB,SAAQ,oBAAmC;IAQtE,YAAY,UAAgC;QAC1C,KAAK,CAAC,IAAA,cAAK,EAAC,EAAE,EAAE,eAAe,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IAClE,CAAC;IAES,eAAe,CAAC,SAAiB;QACzC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,SAAiC,CAAC;QAChG,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAChD,MAAM,MAAM,GAAG,SAAS,CAAC,mBAAmB,CAC1C,kBAAkB,gDAEb,MAAM,KACT,WAAW,EAAE,MAAM,EACnB,WAAW;YACX,UAAU;YACV,QAAQ,KACL,WAAW,GAEhB,KAAK,CACN,CAAC;QACF,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,WAAW,CAAC,KAAuB;QACjC,MAAM,EACJ,MAAM,EACN,UAAU,GAAG,4BAAiB,EAC9B,QAAQ,GAAG,0BAAe,EAC3B,GAAG,IAAI,CAAC,SAAiC,CAAC;QAC3C,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;QAC1C,MAAM,UAAU,GAAG,IAAA,uBAAc,EAAC,IAAA,wBAAe,EAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,CAAC;YACjB,UAAU,EAAE,UAAU,GAAG,WAAW,GAAG,CAAC;YACxC,QAAQ,EAAE,UAAU,GAAG,WAAW,GAAG,CAAC;SACvC,CAAC,CAAC;IACL,CAAC;;AA1CH,0CA2CC;AA1CQ,iCAAiB,GAAG;IACzB,WAAW,EAAE;QACX,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,GAAG;KACb;CACF,CAAC","file":"sector.js","sourcesContent":["/**\n * @description sector 类型 crosshair，用于极坐标系下\n */\nimport type { IGroup } from '@visactor/vrender-core';\nimport { merge, getAngleByPoint, radianToDegree } from '@visactor/vutils';\nimport type { PointLocationCfg } from '../core/type';\nimport { POLAR_END_ANGLE, POLAR_START_ANGLE } from '../constant';\nimport { CrosshairBase } from './base';\nimport type { SectorCrosshairAttrs } from './type';\n\nexport class SectorCrosshair extends CrosshairBase<SectorCrosshairAttrs> {\n  static defaultAttributes = {\n    sectorStyle: {\n      fill: '#b2bacf',\n      opacity: 0.2\n    }\n  };\n\n  constructor(attributes: SectorCrosshairAttrs) {\n    super(merge({}, SectorCrosshair.defaultAttributes, attributes));\n  }\n\n  protected renderCrosshair(container: IGroup) {\n    const { center, radius, innerRadius = 0, sectorStyle } = this.attribute as SectorCrosshairAttrs;\n    const { startAngle, endAngle } = this.attribute;\n    const circle = container.createOrUpdateChild(\n      'crosshair-sector',\n      {\n        ...center,\n        outerRadius: radius,\n        innerRadius,\n        startAngle,\n        endAngle,\n        ...sectorStyle\n      },\n      'arc'\n    );\n    return circle;\n  }\n\n  setLocation(point: PointLocationCfg) {\n    const {\n      center,\n      startAngle = POLAR_START_ANGLE,\n      endAngle = POLAR_END_ANGLE\n    } = this.attribute as SectorCrosshairAttrs;\n    const sectorAngle = endAngle - startAngle;\n    const pointAngle = radianToDegree(getAngleByPoint(center, point));\n    this.setAttributes({\n      startAngle: pointAngle - sectorAngle / 2,\n      endAngle: pointAngle + sectorAngle / 2\n    });\n  }\n}\n"]}
+{"version":3,"sources":["../src/crosshair/sector.ts"],"names":[],"mappings":";;;AAIA,6CAA0E;AAE1E,0CAAiE;AACjE,iCAAuC;AAIvC,MAAa,eAAgB,SAAQ,oBAAmC;IAQtE,YAAY,UAAgC,EAAE,OAA0B;QACtE,KAAK,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAA,cAAK,EAAC,EAAE,EAAE,eAAe,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IACtG,CAAC;IAES,eAAe,CAAC,SAAiB;QACzC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,SAAiC,CAAC;QAChG,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAChD,MAAM,MAAM,GAAG,SAAS,CAAC,mBAAmB,CAC1C,kBAAkB,gDAEb,MAAM,KACT,WAAW,EAAE,MAAM,EACnB,WAAW;YACX,UAAU;YACV,QAAQ,KACL,WAAW,GAEhB,KAAK,CACN,CAAC;QACF,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,WAAW,CAAC,KAAuB;QACjC,MAAM,EACJ,MAAM,EACN,UAAU,GAAG,4BAAiB,EAC9B,QAAQ,GAAG,0BAAe,EAC3B,GAAG,IAAI,CAAC,SAAiC,CAAC;QAC3C,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;QAC1C,MAAM,UAAU,GAAG,IAAA,uBAAc,EAAC,IAAA,wBAAe,EAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,CAAC;YACjB,UAAU,EAAE,UAAU,GAAG,WAAW,GAAG,CAAC;YACxC,QAAQ,EAAE,UAAU,GAAG,WAAW,GAAG,CAAC;SACvC,CAAC,CAAC;IACL,CAAC;;AA1CH,0CA2CC;AA1CQ,iCAAiB,GAAG;IACzB,WAAW,EAAE;QACX,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,GAAG;KACb;CACF,CAAC","file":"sector.js","sourcesContent":["/**\n * @description sector 类型 crosshair，用于极坐标系下\n */\nimport type { IGroup } from '@visactor/vrender-core';\nimport { merge, getAngleByPoint, radianToDegree } from '@visactor/vutils';\nimport type { PointLocationCfg } from '../core/type';\nimport { POLAR_END_ANGLE, POLAR_START_ANGLE } from '../constant';\nimport { CrosshairBase } from './base';\nimport type { SectorCrosshairAttrs } from './type';\nimport type { ComponentOptions } from '../interface';\n\nexport class SectorCrosshair extends CrosshairBase<SectorCrosshairAttrs> {\n  static defaultAttributes = {\n    sectorStyle: {\n      fill: '#b2bacf',\n      opacity: 0.2\n    }\n  };\n\n  constructor(attributes: SectorCrosshairAttrs, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, SectorCrosshair.defaultAttributes, attributes));\n  }\n\n  protected renderCrosshair(container: IGroup) {\n    const { center, radius, innerRadius = 0, sectorStyle } = this.attribute as SectorCrosshairAttrs;\n    const { startAngle, endAngle } = this.attribute;\n    const circle = container.createOrUpdateChild(\n      'crosshair-sector',\n      {\n        ...center,\n        outerRadius: radius,\n        innerRadius,\n        startAngle,\n        endAngle,\n        ...sectorStyle\n      },\n      'arc'\n    );\n    return circle;\n  }\n\n  setLocation(point: PointLocationCfg) {\n    const {\n      center,\n      startAngle = POLAR_START_ANGLE,\n      endAngle = POLAR_END_ANGLE\n    } = this.attribute as SectorCrosshairAttrs;\n    const sectorAngle = endAngle - startAngle;\n    const pointAngle = radianToDegree(getAngleByPoint(center, point));\n    this.setAttributes({\n      startAngle: pointAngle - sectorAngle / 2,\n      endAngle: pointAngle + sectorAngle / 2\n    });\n  }\n}\n"]}

package/cjs/data-zoom/config.d.ts

@@ -1,13 +1,13 @@
-export declare enum DataZoomActiveTag {
-    startHandler = "startHandler",
-    endHandler = "endHandler",
-    middleHandler = "middleHandler",
-    background = "background"
-}
 export declare const DEFAULT_DATA_ZOOM_ATTRIBUTES: {
     orient: string;
     showDetail: string;
     brushSelect: boolean;
+    zoomLock: boolean;
+    minSpan: number;
+    maxSpan: number;
+    delayType: string;
+    delayTime: number;
+    realTime: boolean;
     backgroundStyle: {
         fill: string;
         stroke: string;

package/cjs/data-zoom/config.js

@@ -1,17 +1,17 @@
 "use strict";
 
-var DataZoomActiveTag;
-
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = exports.DataZoomActiveTag = void 0, function(DataZoomActiveTag) {
-    DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", 
-    DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
-}(DataZoomActiveTag = exports.DataZoomActiveTag || (exports.DataZoomActiveTag = {})), 
-exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = {
+}), exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = void 0, exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = {
     orient: "bottom",
     showDetail: "auto",
     brushSelect: !0,
+    zoomLock: !1,
+    minSpan: 0,
+    maxSpan: 1,
+    delayType: "throttle",
+    delayTime: 0,
+    realTime: !0,
     backgroundStyle: {
         fill: "white",
         stroke: "#D1DBEE",

package/cjs/data-zoom/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":";;;AAAA,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,kDAA6B,CAAA;IAC7B,8CAAyB,CAAA;IACzB,oDAA+B,CAAA;IAC/B,8CAAyB,CAAA;AAC3B,CAAC,EALW,iBAAiB,GAAjB,yBAAiB,KAAjB,yBAAiB,QAK5B;AACY,QAAA,4BAA4B,GAAG;IAC1C,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,IAAI;IACjB,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,uBAAuB,EAAE;QACvB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,4BAA4B,EAAE;QAC5B,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE;YACV,IAAI,EAAE,CAAC;YACP,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,SAAS;gBACjB,YAAY,EAAE,CAAC;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,SAAS;YACjB,UAAU,EAER,8PAA8P;YAChQ,SAAS,EAAE,GAAG;SACf;KACF;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,cAAc,EAAE;QACd,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC","file":"config.js","sourcesContent":["export enum DataZoomActiveTag {\n  startHandler = 'startHandler',\n  endHandler = 'endHandler',\n  middleHandler = 'middleHandler',\n  background = 'background'\n}\nexport const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  backgroundStyle: {\n    fill: 'white',\n    stroke: '#D1DBEE',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  dragMaskStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1,\n      fill: '#F6F8FC'\n    },\n    line: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#B0C8F9',\n      lineWidth: 1,\n      fill: '#fbb934'\n    },\n    line: {\n      visible: true,\n      stroke: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: true,\n    background: {\n      size: 8,\n      style: {\n        fill: 'white',\n        stroke: '#B0C8F9',\n        cornerRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: 'white',\n      stroke: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n"]}
+{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":";;;AAAa,QAAA,4BAA4B,GAAG;IAC1C,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,UAAU;IACrB,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,IAAI;IACd,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,uBAAuB,EAAE;QACvB,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,GAAG;KACjB;IACD,4BAA4B,EAAE;QAC5B,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,CAAC;SACb;KACF;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE;YACV,IAAI,EAAE,CAAC;YACP,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,SAAS;gBACjB,YAAY,EAAE,CAAC;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,SAAS;YACjB,UAAU,EAER,8PAA8P;YAChQ,SAAS,EAAE,GAAG;SACf;KACF;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,cAAc,EAAE;QACd,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC","file":"config.js","sourcesContent":["export const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  zoomLock: false,\n  minSpan: 0,\n  maxSpan: 1,\n  delayType: 'throttle',\n  delayTime: 0,\n  realTime: true,\n  backgroundStyle: {\n    fill: 'white',\n    stroke: '#D1DBEE',\n    lineWidth: 1,\n    cornerRadius: 2\n  },\n  dragMaskStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1,\n      fill: '#F6F8FC'\n    },\n    line: {\n      visible: true,\n      stroke: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      stroke: '#B0C8F9',\n      lineWidth: 1,\n      fill: '#fbb934'\n    },\n    line: {\n      visible: true,\n      stroke: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: true,\n    background: {\n      size: 8,\n      style: {\n        fill: 'white',\n        stroke: '#B0C8F9',\n        cornerRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: 'white',\n      stroke: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    visible: true,\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: 'white',\n    stroke: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n"]}

package/cjs/data-zoom/data-zoom.d.ts

@@ -3,13 +3,21 @@ import type { IPointLike } from '@visactor/vutils';
 import { AbstractComponent } from '../core/base';
 import type { TagAttributes } from '../tag';
 import { Tag } from '../tag';
+import { DataZoomActiveTag } from './type';
 import type { DataZoomAttributes } from './type';
+import type { ComponentOptions } from '../interface';
 export declare class DataZoom extends AbstractComponent<Required<DataZoomAttributes>> {
     name: string;
     static defaultAttributes: {
         orient: string;
         showDetail: string;
         brushSelect: boolean;
+        zoomLock: boolean;
+        minSpan: number;
+        maxSpan: number;
+        delayType: string;
+        delayTime: number;
+        realTime: boolean;
         backgroundStyle: {
             fill: string;
             stroke: string;
@@ -119,7 +127,7 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     private _selectedPreviewGroup;
     private _selectedPreviewLine;
     private _selectedPreviewArea;
-    protected _activeTag: string;
+    protected _activeTag: DataZoomActiveTag;
     protected _activeItem: any;
     protected _activeState: boolean;
     protected _activeCache: {
@@ -135,16 +143,18 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
         start: number;
         end: number;
     };
-    private _previewCallbackX;
-    private _previewCallbackY;
-    private _previewCallbackX1;
-    private _previewCallbackY1;
+    protected _spanCache: number;
+    private _previewPointsX;
+    private _previewPointsY;
+    private _previewPointsX1;
+    private _previewPointsY1;
     private _updateStateCallback;
     private _statePointToData;
     private _layoutAttrFromConfig;
-    constructor(attributes: DataZoomAttributes);
+    constructor(attributes: DataZoomAttributes, options?: ComponentOptions);
     protected bindEvents(): void;
     protected dragMaskSize(): number;
+    protected setStateAttr(start: number, end: number, shouldRender: boolean): void;
     protected eventPosToStagePos(e: FederatedPointerEvent): {
         x: number;
         y: number;
@@ -176,10 +186,10 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     getStartValue(): string | number;
     getEndTextValue(): string | number;
     getMiddleHandlerSize(): number;
-    setUpdateStateCallback(callback: (start: number, end: number) => void): void;
-    setPreviewCallbackX(callback: (d: any) => number): void;
-    setPreviewCallbackY(callback: (d: any) => number): void;
-    setPreviewCallbackX1(callback: (d: any) => number): void;
-    setPreviewCallbackY1(callback: (d: any) => number): void;
+    setUpdateStateCallback(callback: (start: number, end: number, trigger?: DataZoomActiveTag) => void): void;
+    setPreviewPointsX(callback: (d: any) => number): void;
+    setPreviewPointsY(callback: (d: any) => number): void;
+    setPreviewPointsX1(callback: (d: any) => number): void;
+    setPreviewPointsY1(callback: (d: any) => number): void;
     setStatePointToData(callback: (state: number) => any): void;
 }

package/cjs/data-zoom/data-zoom.js

@@ -14,12 +14,15 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.DataZoom = void 0;
 
-const vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), tag_1 = require("../tag"), config_1 = require("./config");
+const vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), tag_1 = require("../tag"), config_1 = require("./config"), type_1 = require("./type"), delayMap = {
+    debounce: vutils_1.debounce,
+    throttle: vutils_1.throttle
+};
 
 class DataZoom extends base_1.AbstractComponent {
-    constructor(attributes) {
-        super((0, vutils_1.merge)({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", 
-        this._previewData = [], this._activeState = !1, this._activeCache = {
+    constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, DataZoom.defaultAttributes, attributes)), 
+        this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
             startPos: {
                 x: 0,
                 y: 0
@@ -36,37 +39,40 @@ class DataZoom extends base_1.AbstractComponent {
             start: 0,
             end: 1
         }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
-            "start" === tag ? (this._activeTag = config_1.DataZoomActiveTag.startHandler, this._activeItem = this._startHandler) : "end" === tag ? (this._activeTag = config_1.DataZoomActiveTag.endHandler, 
-            this._activeItem = this._endHandler) : "middleRect" === tag ? (this._activeTag = config_1.DataZoomActiveTag.middleHandler, 
-            this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = config_1.DataZoomActiveTag.middleHandler, 
-            this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = config_1.DataZoomActiveTag.background, 
+            e.stopPropagation(), "start" === tag ? (this._activeTag = type_1.DataZoomActiveTag.startHandler, 
+            this._activeItem = this._startHandler) : "end" === tag ? (this._activeTag = type_1.DataZoomActiveTag.endHandler, 
+            this._activeItem = this._endHandler) : "middleRect" === tag ? (this._activeTag = type_1.DataZoomActiveTag.middleHandler, 
+            this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = type_1.DataZoomActiveTag.middleHandler, 
+            this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = type_1.DataZoomActiveTag.background, 
             this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), 
             this._activeCache.lastPos = this.eventPosToStagePos(e);
         }, this._onHandlerPointerMove = e => {
-            const {start: start, end: end, brushSelect: brushSelect} = this.attribute, pos = this.eventPosToStagePos(e), {attPos: attPos, max: max} = this._layoutCache, dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
-            this._activeState && (this._activeTag === config_1.DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === config_1.DataZoomActiveTag.startHandler ? this.state.start + dis > this.state.end ? (this.state.start = this.state.end, 
-            this.state.end = this.state.start + dis, this._activeTag = config_1.DataZoomActiveTag.endHandler) : this.state.start = this.state.start + dis : this._activeTag === config_1.DataZoomActiveTag.endHandler && (this.state.end + dis < this.state.start ? (this.state.end = this.state.start, 
-            this.state.start = this.state.end + dis, this._activeTag = config_1.DataZoomActiveTag.startHandler) : this.state.end = this.state.end + dis), 
-            this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), this.state.start = Math.min(Math.max(this.state.start, 0), 1), 
-            this.state.end = Math.min(Math.max(this.state.end, 0), 1), start === this.state.start && end === this.state.end || (this.setAttributes({
-                start: this.state.start,
-                end: this.state.end
-            }), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), 
-            this._dispatchChangeEvent(this.state.start, this.state.end));
+            var _a;
+            e.stopPropagation();
+            const {start: startAttr, end: endAttr, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute, pos = this.eventPosToStagePos(e), {attPos: attPos, max: max} = this._layoutCache, dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
+            let {start: start, end: end} = this.state;
+            this._activeState && (this._activeTag === type_1.DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === type_1.DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, 
+            end = start + dis, this._activeTag = type_1.DataZoomActiveTag.endHandler) : start += dis : this._activeTag === type_1.DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, 
+            start = end + dis, this._activeTag = type_1.DataZoomActiveTag.startHandler) : end += dis), 
+            this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), 
+            end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), 
+            realTime && (null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, start, end, this._activeTag)), 
+            this._dispatchChangeEvent(start, end));
         };
-        const {start: start, end: end, size: size, orient: orient, showDetail: showDetail, position: position, previewData: previewData, previewCallbackX: previewCallbackX, previewCallbackY: previewCallbackY, previewCallbackX1: previewCallbackX1, previewCallbackY1: previewCallbackY1, updateStateCallback: updateStateCallback} = this.attribute, {width: width, height: height} = size;
-        start && (this.state.start = start), end && (this.state.end = end), this._isHorizontal = "top" === orient || "bottom" === orient, 
-        this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", 
-        this._layoutCache.attSize = this._isHorizontal ? "width" : "height", this._activeCache.startPos = position, 
-        this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
-        previewData && (this._previewData = previewData), (0, vutils_1.isFunction)(previewCallbackX) && (this._previewCallbackX = previewCallbackX), 
-        (0, vutils_1.isFunction)(previewCallbackY) && (this._previewCallbackY = previewCallbackY), 
-        (0, vutils_1.isFunction)(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1), 
-        (0, vutils_1.isFunction)(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1), 
+        const {start: start, end: end, size: size, orient: orient, showDetail: showDetail, position: position, previewData: previewData, previewPointsX: previewPointsX, previewPointsY: previewPointsY, previewPointsX1: previewPointsX1, previewPointsY1: previewPointsY1, updateStateCallback: updateStateCallback} = this.attribute, {width: width, height: height} = size;
+        start && (this.state.start = start), end && (this.state.end = end), this._spanCache = this.state.end - this.state.start, 
+        this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, 
+        this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", 
+        this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
+        previewData && (this._previewData = previewData), (0, vutils_1.isFunction)(previewPointsX) && (this._previewPointsX = previewPointsX), 
+        (0, vutils_1.isFunction)(previewPointsY) && (this._previewPointsY = previewPointsY), 
+        (0, vutils_1.isFunction)(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), 
+        (0, vutils_1.isFunction)(previewPointsY1) && (this._previewPointsY1 = previewPointsY1), 
         (0, vutils_1.isFunction)(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
     }
     bindEvents() {
-        const {showDetail: showDetail, brushSelect: brushSelect} = this.attribute;
+        if (this.attribute.disableTriggerEvent) return;
+        const {showDetail: showDetail, brushSelect: brushSelect, delayType: delayType = "throttle", delayTime: delayTime = 0} = this.attribute;
         this._startHandler && this._startHandler.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "start"))), 
         this._endHandler && this._endHandler.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "end"))), 
         this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "middleSymbol"))), 
@@ -76,16 +82,27 @@ class DataZoom extends base_1.AbstractComponent {
         brushSelect && this._background && this._background.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "background"))), 
         brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "background"))), 
         this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, selectedTag))), 
-        "browser" === vrender_core_1.vglobal.env && (vrender_core_1.vglobal.addEventListener("pointermove", this._onHandlerPointerMove.bind(this)), 
-        vrender_core_1.vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
-        this.addEventListener("pointermove", this._onHandlerPointerMove), this.addEventListener("pointerup", this._onHandlerPointerUp), 
-        this.addEventListener("pointerupoutside", this._onHandlerPointerUp), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), 
+        "browser" === vrender_core_1.vglobal.env && (vrender_core_1.vglobal.addEventListener("pointermove", delayMap[delayType](this._onHandlerPointerMove.bind(this), delayTime), {
+            capture: !0
+        }), vrender_core_1.vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
+        this.addEventListener("pointermove", delayMap[delayType](this._onHandlerPointerMove, delayTime), {
+            capture: !0
+        }), this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), 
+        "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), 
         this.addEventListener("pointerleave", this._onHandlerPointerLeave));
     }
     dragMaskSize() {
         const {position: position} = this.attribute, {attPos: attPos, max: max} = this._layoutCache;
         return this._activeCache.lastPos[attPos] - position[attPos] > max ? max + position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - position[attPos] < 0 ? position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
     }
+    setStateAttr(start, end, shouldRender) {
+        const {zoomLock: zoomLock = !1, minSpan: minSpan = 0, maxSpan: maxSpan = 1} = this.attribute, span = end - start;
+        span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span, 
+        this.state.start = start, this.state.end = end, shouldRender && this.setAttributes({
+            start: start,
+            end: end
+        }));
+    }
     eventPosToStagePos(e) {
         var _a, _b, _c;
         const stagePosition = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.window.getBoundingClientRect();
@@ -95,45 +112,44 @@ class DataZoom extends base_1.AbstractComponent {
         };
     }
     _onHandlerPointerUp(e) {
-        const {start: start, end: end, brushSelect: brushSelect} = this.attribute;
-        if (this._activeState && this._activeTag === config_1.DataZoomActiveTag.background) {
+        var _a;
+        e.preventDefault();
+        const {start: start, end: end, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute;
+        if (this._activeState && this._activeTag === type_1.DataZoomActiveTag.background) {
             const pos = this.eventPosToStagePos(e);
             this.backgroundDragZoom(this._activeCache.startPos, pos);
         }
-        this._activeState = !1, brushSelect && this.renderDragMask(), start === this.state.start && end === this.state.end || (this.setAttributes({
-            start: this.state.start,
-            end: this.state.end
-        }), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), 
+        this._activeState = !1, brushSelect && this.renderDragMask(), realTime && start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), 
+        null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, this.state.start, this.state.end, this._activeTag), 
         this._dispatchChangeEvent(this.state.start, this.state.end));
     }
     _onHandlerPointerEnter(e) {
-        this._showText = !0, this.renderText();
+        e.stopPropagation(), this._showText = !0, this.renderText();
     }
     _onHandlerPointerLeave(e) {
-        this._showText = !1, this.renderText();
+        e.stopPropagation(), this._showText = !1, this.renderText();
     }
     backgroundDragZoom(startPos, endPos) {
         const {attPos: attPos, max: max} = this._layoutCache, {position: position} = this.attribute, startPosInComponent = startPos[attPos] - position[attPos], endPosInComponent = endPos[attPos] - position[attPos], start = Math.min(Math.max(Math.min(startPosInComponent, endPosInComponent) / max, 0), 1), end = Math.min(Math.max(Math.max(startPosInComponent, endPosInComponent) / max, 0), 1);
-        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : (this.state.start = start, 
-        this.state.end = end);
+        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : this.setStateAttr(start, end, !1);
     }
     moveZoomWithMiddle(middle) {
         let offset = middle - (this.state.start + this.state.end) / 2;
         0 !== offset && (offset > 0 ? this.state.end + offset > 1 && (offset = 1 - this.state.end) : offset < 0 && this.state.start + offset < 0 && (offset = -this.state.start), 
-        this.state.start = this.state.start + offset, this.state.end = this.state.end + offset);
+        this.setStateAttr(this.state.start + offset, this.state.end + offset, !1));
     }
     renderDragMask() {
         const {dragMaskStyle: dragMaskStyle} = this.attribute, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig();
         this._isHorizontal ? this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
             x: (0, vutils_1.clamp)(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width),
             y: position.y,
-            width: this._activeState && this._activeTag === config_1.DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0,
+            width: this._activeState && this._activeTag === type_1.DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0,
             height: height
         }, dragMaskStyle), "rect") : this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
             x: position.x,
             y: (0, vutils_1.clamp)(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height),
             width: width,
-            height: this._activeState && this._activeTag === config_1.DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
+            height: this._activeState && this._activeTag === type_1.DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
         }, dragMaskStyle), "rect");
     }
     renderText() {
@@ -243,7 +259,7 @@ class DataZoom extends base_1.AbstractComponent {
             cursor: brushSelect ? "crosshair" : "move"
         }, selectedBackgroundStyle), "rect"), (null === (_c = null == selectedBackgroundChartStyle ? void 0 : selectedBackgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this.setSelectedPreviewAttributes("line", group), 
         (null === (_d = null == selectedBackgroundChartStyle ? void 0 : selectedBackgroundChartStyle.area) || void 0 === _d ? void 0 : _d.visible) && this.setSelectedPreviewAttributes("area", group), 
-        this.renderText(), this._isHorizontal ? (this._startHandler = group.createOrUpdateChild("startHandler", Object.assign({
+        this._showText && this.renderText(), this._isHorizontal ? (this._startHandler = group.createOrUpdateChild("startHandler", Object.assign({
             x: position.x + start * width,
             y: position.y + height / 2,
             size: height,
@@ -337,8 +353,8 @@ class DataZoom extends base_1.AbstractComponent {
     }
     getPreviewLinePoints() {
         const previewPoints = this._previewData.map((d => ({
-            x: this._previewCallbackX && this._previewCallbackX(d),
-            y: this._previewCallbackY && this._previewCallbackY(d)
+            x: this._previewPointsX && this._previewPointsX(d),
+            y: this._previewPointsY && this._previewPointsY(d)
         })));
         if (0 === previewPoints.length) return previewPoints;
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
@@ -346,10 +362,10 @@ class DataZoom extends base_1.AbstractComponent {
     }
     getPreviewAreaPoints() {
         const previewPoints = this._previewData.map((d => ({
-            x: this._previewCallbackX && this._previewCallbackX(d),
-            y: this._previewCallbackY && this._previewCallbackY(d),
-            x1: this._previewCallbackX1 && this._previewCallbackX1(d),
-            y1: this._previewCallbackY1 && this._previewCallbackY1(d)
+            x: this._previewPointsX && this._previewPointsX(d),
+            y: this._previewPointsY && this._previewPointsY(d),
+            x1: this._previewPointsX1 && this._previewPointsX1(d),
+            y1: this._previewPointsY1 && this._previewPointsY1(d)
         })));
         if (0 === previewPoints.length) return previewPoints;
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
@@ -419,12 +435,12 @@ class DataZoom extends base_1.AbstractComponent {
         this.dispatchEvent(changeEvent);
     }
     setStartAndEnd(start, end) {
+        var _a;
         const {start: startAttr, end: endAttr} = this.attribute;
         (0, vutils_1.isValid)(start) && (0, vutils_1.isValid)(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, 
-        this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setAttributes({
-            start: start,
-            end: end
-        }), this._updateStateCallback && this._updateStateCallback(start, end), this._dispatchChangeEvent(start, end)));
+        this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setStateAttr(start, end, !0), 
+        null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, start, end, this._activeTag), 
+        this._dispatchChangeEvent(start, end)));
     }
     setPreviewData(data) {
         this._previewData = data;
@@ -446,17 +462,17 @@ class DataZoom extends base_1.AbstractComponent {
     setUpdateStateCallback(callback) {
         (0, vutils_1.isFunction)(callback) && (this._updateStateCallback = callback);
     }
-    setPreviewCallbackX(callback) {
-        (0, vutils_1.isFunction)(callback) && (this._previewCallbackX = callback);
+    setPreviewPointsX(callback) {
+        (0, vutils_1.isFunction)(callback) && (this._previewPointsX = callback);
     }
-    setPreviewCallbackY(callback) {
-        (0, vutils_1.isFunction)(callback) && (this._previewCallbackY = callback);
+    setPreviewPointsY(callback) {
+        (0, vutils_1.isFunction)(callback) && (this._previewPointsY = callback);
     }
-    setPreviewCallbackX1(callback) {
-        (0, vutils_1.isFunction)(callback) && (this._previewCallbackX1 = callback);
+    setPreviewPointsX1(callback) {
+        (0, vutils_1.isFunction)(callback) && (this._previewPointsX1 = callback);
     }
-    setPreviewCallbackY1(callback) {
-        (0, vutils_1.isFunction)(callback) && (this._previewCallbackY1 = callback);
+    setPreviewPointsY1(callback) {
+        (0, vutils_1.isFunction)(callback) && (this._previewPointsY1 = callback);
     }
     setStatePointToData(callback) {
         (0, vutils_1.isFunction)(callback) && (this._statePointToData = callback);