@visactor/vrender-components 0.17.2-alpha.3 → 0.17.2

package/cjs/core/base.d.ts

@@ -1,5 +1,6 @@
 import type { IGroupGraphicAttribute } from '@visactor/vrender-core';
 import { Group } from '@visactor/vrender-core';
+import type { Dict } from '@visactor/vutils';
 import type { ComponentOptions } from '../interface';
 export declare abstract class AbstractComponent<T extends IGroupGraphicAttribute = IGroupGraphicAttribute> extends Group {
     attribute: Partial<T>;
@@ -12,4 +13,5 @@ export declare abstract class AbstractComponent<T extends IGroupGraphicAttribute
     protected bindEvents(): void;
     protected abstract render(): void;
     protected _getNodeId(id: string): string;
+    protected _dispatchEvent(eventName: string, details?: Dict<any>): void;
 }

package/cjs/core/base.js

@@ -43,6 +43,12 @@ class AbstractComponent extends vrender_core_1.Group {
     _getNodeId(id) {
         return `${this.id}-${this.name}-${id}`;
     }
+    _dispatchEvent(eventName, details) {
+        var _a;
+        const changeEvent = new vrender_core_1.CustomEvent(eventName, details);
+        changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, 
+        this.dispatchEvent(changeEvent);
+    }
 }
 
 exports.AbstractComponent = AbstractComponent;

package/cjs/core/base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/base.ts"],"names":[],"mappings":"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","file":"base.js","sourcesContent":["/**\n * @description 组件基类\n */\nimport type { IGroupGraphicAttribute } from '@visactor/vrender-core';\nimport { Group } from '@visactor/vrender-core';\nimport { merge, isFunction, isPlainObject, isNil } from '@visactor/vutils';\nimport type { ComponentOptions } from '../interface';\n\nconst GROUP_ATTRIBUTES = [\n  'x',\n  'y',\n  'dx',\n  'dy',\n  'scaleX',\n  'scaleY',\n  'angle',\n  'anchor',\n  'postMatrix',\n  'visible',\n  'clip',\n  'pickable',\n  'childrenPickable',\n  'zIndex',\n  'cursor'\n];\n\nexport abstract class AbstractComponent<T extends IGroupGraphicAttribute = IGroupGraphicAttribute> extends Group {\n  declare attribute: Partial<T>;\n\n  protected mode?: '2d' | '3d';\n\n  protected skipDefault?: boolean;\n\n  constructor(attributes: T, options?: ComponentOptions) {\n    super(attributes);\n\n    if (options?.mode) {\n      this.mode = options.mode;\n\n      this.setMode(options.mode);\n    }\n\n    if (options?.skipDefault) {\n      this.skipDefault = true;\n    }\n    // 组件需要精准 bounds，所以将这个 strokeBoundsBuffer 设置为 0，否则会影响包围盒的获取\n    this.setTheme({\n      common: {\n        strokeBoundsBuffer: 0\n      }\n    });\n    this.attribute = attributes;\n    // 这里调用渲染和事件绑定逻辑\n    this.onSetStage(() => {\n      this.render();\n      this.bindEvents();\n    });\n  }\n\n  /**\n   * @override\n   * 更新单个属性值\n   * @param key\n   * @param value\n   * @param forceUpdateTag\n   */\n  // @ts-ignore\n  setAttribute(key: keyof T, value: any, forceUpdateTag?: boolean | undefined): void {\n    // overwrite when previous or next attribute is function\n    if (\n      isPlainObject(this.attribute[key]) &&\n      isPlainObject(value) &&\n      !isFunction(this.attribute[key]) &&\n      !isFunction(value)\n    ) {\n      merge(this.attribute[key], value);\n    } else {\n      this.attribute[key] = value;\n    }\n\n    // HACK: 待优化\n    if (!GROUP_ATTRIBUTES.includes(key as string)) {\n      this.render();\n    }\n\n    this.valid = this.isValid();\n    if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTag(key as string))) {\n      this.addUpdateShapeAndBoundsTag();\n    } else {\n      this.addUpdateBoundTag();\n    }\n    this.addUpdatePositionTag();\n    this.onAttributeUpdate();\n  }\n\n  // @ts-ignore\n  setAttributes(params: Partial<T>, forceUpdateTag?: boolean | undefined): void {\n    const keys = Object.keys(params) as (keyof T)[];\n    this._mergeAttributes(params, keys);\n\n    // HACK: 待优化\n    if (!keys.every(key => GROUP_ATTRIBUTES.includes(key as string))) {\n      this.render();\n    }\n\n    this.valid = this.isValid();\n    // 没有设置shape&bounds的tag\n    if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTags(keys as string[]))) {\n      this.addUpdateShapeAndBoundsTag();\n    } else {\n      this.addUpdateBoundTag();\n    }\n    this.addUpdatePositionTag();\n    this.onAttributeUpdate();\n  }\n\n  protected _mergeAttributes(params: Partial<T>, keys?: (keyof T)[]) {\n    if (isNil(keys)) {\n      keys = Object.keys(params) as (keyof T)[];\n    }\n    for (let i = 0; i < keys.length; i++) {\n      const key = keys[i] as keyof Partial<T>;\n      // overwrite when previous or next attribute is function\n      if (isPlainObject(this.attribute[key]) && !isFunction(this.attribute[key]) && !isFunction(params[key])) {\n        merge(this.attribute[key], params[key]);\n      } else {\n        this.attribute[key] = params[key];\n      }\n    }\n  }\n\n  protected bindEvents() {\n    // please override\n  }\n\n  protected abstract render(): void;\n\n  // 图形元素 id\n  protected _getNodeId(id: string) {\n    return `${this.id}-${this.name}-${id}`;\n  }\n}\n"]}
+{"version":3,"sources":["../src/core/base.ts"],"names":[],"mappings":"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","file":"base.js","sourcesContent":["/**\n * @description 组件基类\n */\nimport type { IGroupGraphicAttribute } from '@visactor/vrender-core';\nimport { Group, CustomEvent } from '@visactor/vrender-core';\nimport type { Dict } from '@visactor/vutils';\nimport { merge, isFunction, isPlainObject, isNil } from '@visactor/vutils';\nimport type { ComponentOptions } from '../interface';\n\nconst GROUP_ATTRIBUTES = [\n  'x',\n  'y',\n  'dx',\n  'dy',\n  'scaleX',\n  'scaleY',\n  'angle',\n  'anchor',\n  'postMatrix',\n  'visible',\n  'clip',\n  'pickable',\n  'childrenPickable',\n  'zIndex',\n  'cursor'\n];\n\nexport abstract class AbstractComponent<T extends IGroupGraphicAttribute = IGroupGraphicAttribute> extends Group {\n  declare attribute: Partial<T>;\n\n  protected mode?: '2d' | '3d';\n\n  protected skipDefault?: boolean;\n\n  constructor(attributes: T, options?: ComponentOptions) {\n    super(attributes);\n\n    if (options?.mode) {\n      this.mode = options.mode;\n\n      this.setMode(options.mode);\n    }\n\n    if (options?.skipDefault) {\n      this.skipDefault = true;\n    }\n    // 组件需要精准 bounds，所以将这个 strokeBoundsBuffer 设置为 0，否则会影响包围盒的获取\n    this.setTheme({\n      common: {\n        strokeBoundsBuffer: 0\n      }\n    });\n    this.attribute = attributes;\n    // 这里调用渲染和事件绑定逻辑\n    this.onSetStage(() => {\n      this.render();\n      this.bindEvents();\n    });\n  }\n\n  /**\n   * @override\n   * 更新单个属性值\n   * @param key\n   * @param value\n   * @param forceUpdateTag\n   */\n  // @ts-ignore\n  setAttribute(key: keyof T, value: any, forceUpdateTag?: boolean | undefined): void {\n    // overwrite when previous or next attribute is function\n    if (\n      isPlainObject(this.attribute[key]) &&\n      isPlainObject(value) &&\n      !isFunction(this.attribute[key]) &&\n      !isFunction(value)\n    ) {\n      merge(this.attribute[key], value);\n    } else {\n      this.attribute[key] = value;\n    }\n\n    // HACK: 待优化\n    if (!GROUP_ATTRIBUTES.includes(key as string)) {\n      this.render();\n    }\n\n    this.valid = this.isValid();\n    if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTag(key as string))) {\n      this.addUpdateShapeAndBoundsTag();\n    } else {\n      this.addUpdateBoundTag();\n    }\n    this.addUpdatePositionTag();\n    this.onAttributeUpdate();\n  }\n\n  // @ts-ignore\n  setAttributes(params: Partial<T>, forceUpdateTag?: boolean | undefined): void {\n    const keys = Object.keys(params) as (keyof T)[];\n    this._mergeAttributes(params, keys);\n\n    // HACK: 待优化\n    if (!keys.every(key => GROUP_ATTRIBUTES.includes(key as string))) {\n      this.render();\n    }\n\n    this.valid = this.isValid();\n    // 没有设置shape&bounds的tag\n    if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTags(keys as string[]))) {\n      this.addUpdateShapeAndBoundsTag();\n    } else {\n      this.addUpdateBoundTag();\n    }\n    this.addUpdatePositionTag();\n    this.onAttributeUpdate();\n  }\n\n  protected _mergeAttributes(params: Partial<T>, keys?: (keyof T)[]) {\n    if (isNil(keys)) {\n      keys = Object.keys(params) as (keyof T)[];\n    }\n    for (let i = 0; i < keys.length; i++) {\n      const key = keys[i] as keyof Partial<T>;\n      // overwrite when previous or next attribute is function\n      if (isPlainObject(this.attribute[key]) && !isFunction(this.attribute[key]) && !isFunction(params[key])) {\n        merge(this.attribute[key], params[key]);\n      } else {\n        this.attribute[key] = params[key];\n      }\n    }\n  }\n\n  protected bindEvents() {\n    // please override\n  }\n\n  protected abstract render(): void;\n\n  // 图形元素 id\n  protected _getNodeId(id: string) {\n    return `${this.id}-${this.name}-${id}`;\n  }\n\n  // 用于 emit 组件自己的事件\n  protected _dispatchEvent(eventName: string, details?: Dict<any>) {\n    // 封装事件\n    const changeEvent = new CustomEvent(eventName, details);\n    // FIXME: 需要在 vrender 的事件系统支持\n    // @ts-ignore\n    changeEvent.manager = this.stage?.eventSystem.manager;\n\n    this.dispatchEvent(changeEvent);\n  }\n}\n"]}

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

@@ -68,6 +68,7 @@ export declare const DEFAULT_DATA_ZOOM_ATTRIBUTES: {
     };
     startHandlerStyle: {
         visible: boolean;
+        triggerMinSize: number;
         symbolType: string;
         fill: string;
         stroke: string;
@@ -75,6 +76,7 @@ export declare const DEFAULT_DATA_ZOOM_ATTRIBUTES: {
     };
     endHandlerStyle: {
         visible: boolean;
+        triggerMinSize: number;
         symbolType: string;
         fill: string;
         stroke: string;
@@ -95,3 +97,19 @@ export declare const DEFAULT_DATA_ZOOM_ATTRIBUTES: {
         };
     };
 };
+export declare const DEFAULT_HANDLER_ATTR_MAP: {
+    horizontal: {
+        angle: number;
+        strokeBoundsBuffer: number;
+        boundsPadding: number;
+        pickMode: string;
+        cursor: string;
+    };
+    vertical: {
+        angle: number;
+        cursor: string;
+        boundsPadding: number;
+        pickMode: string;
+        strokeBoundsBuffer: number;
+    };
+};

package/cjs/data-zoom/config.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = void 0, exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = {
+}), exports.DEFAULT_HANDLER_ATTR_MAP = exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = void 0, 
+exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = {
     orient: "bottom",
     showDetail: "auto",
     brushSelect: !0,
@@ -72,6 +73,7 @@ Object.defineProperty(exports, "__esModule", {
     },
     startHandlerStyle: {
         visible: !0,
+        triggerMinSize: 40,
         symbolType: "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",
         fill: "white",
         stroke: "#B0C8F9",
@@ -79,6 +81,7 @@ Object.defineProperty(exports, "__esModule", {
     },
     endHandlerStyle: {
         visible: !0,
+        triggerMinSize: 40,
         symbolType: "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",
         fill: "white",
         stroke: "#B0C8F9",
@@ -98,4 +101,19 @@ Object.defineProperty(exports, "__esModule", {
             fill: "#6F6F6F"
         }
     }
+}, exports.DEFAULT_HANDLER_ATTR_MAP = {
+    horizontal: {
+        angle: 0,
+        strokeBoundsBuffer: 0,
+        boundsPadding: 2,
+        pickMode: "imprecise",
+        cursor: "ew-resize"
+    },
+    vertical: {
+        angle: Math.PI / 180 * 90,
+        cursor: "ns-resize",
+        boundsPadding: 2,
+        pickMode: "imprecise",
+        strokeBoundsBuffer: 0
+    }
 };

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

@@ -1 +1 @@
-{"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"]}
+{"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,cAAc,EAAE,EAAE;QAClB,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,GAAG;KACf;IACD,eAAe,EAAE;QACf,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,EAAE;QAClB,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;AAEW,QAAA,wBAAwB,GAAG;IACtC,UAAU,EAAE;QACV,KAAK,EAAE,CAAC;QACR,kBAAkB,EAAE,CAAC;QACrB,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,WAAW;KACpB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC;QAC3B,MAAM,EAAE,WAAW;QACnB,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,WAAW;QACrB,kBAAkB,EAAE,CAAC;KACtB;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    triggerMinSize: 40,\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    triggerMinSize: 40,\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\nexport const DEFAULT_HANDLER_ATTR_MAP = {\n  horizontal: {\n    angle: 0,\n    strokeBoundsBuffer: 0,\n    boundsPadding: 2,\n    pickMode: 'imprecise',\n    cursor: 'ew-resize'\n  },\n  vertical: {\n    angle: 90 * (Math.PI / 180),\n    cursor: 'ns-resize',\n    boundsPadding: 2,\n    pickMode: 'imprecise',\n    strokeBoundsBuffer: 0\n  }\n};\n"]}

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

@@ -78,6 +78,7 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
         };
         startHandlerStyle: {
             visible: boolean;
+            triggerMinSize: number;
             symbolType: string;
             fill: string;
             stroke: string;
@@ -85,6 +86,7 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
         };
         endHandlerStyle: {
             visible: boolean;
+            triggerMinSize: number;
             symbolType: string;
             fill: string;
             stroke: string;
@@ -108,9 +110,11 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     private _isHorizontal;
     private _background;
     private _container;
+    private _startHandlerMask;
     private _startHandler;
     private _middleHandlerSymbol;
     private _middleHandlerRect;
+    private _endHandlerMask;
     private _endHandler;
     private _selectedBackground;
     private _dragMask;
@@ -148,7 +152,6 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     private _previewPointsY;
     private _previewPointsX1;
     private _previewPointsY1;
-    private _updateStateCallback;
     private _statePointToData;
     private _layoutAttrFromConfig;
     constructor(attributes: DataZoomAttributes, options?: ComponentOptions);
@@ -179,14 +182,12 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     protected setPreviewAttributes(type: 'line' | 'area', group: IGroup): void;
     protected setSelectedPreviewAttributes(type: 'area' | 'line', group: IGroup): void;
     protected maybeAddLabel(container: IGroup, attributes: TagAttributes, name: string): Tag;
-    private _dispatchChangeEvent;
     setStartAndEnd(start?: number, end?: number): void;
     setPreviewData(data: any[]): void;
     setText(text: string, tag: 'start' | 'end'): void;
     getStartValue(): string | number;
     getEndTextValue(): string | number;
     getMiddleHandlerSize(): number;
-    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;

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

@@ -42,14 +42,18 @@ class DataZoom extends base_1.AbstractComponent {
             end: 1
         }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
             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._startHandlerMask) : "end" === tag ? (this._activeTag = type_1.DataZoomActiveTag.endHandler, 
+            this._activeItem = this._endHandlerMask) : "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 => {
-            var _a;
+            this._activeCache.lastPos = this.eventPosToStagePos(e), "browser" === vrender_core_1.vglobal.env && (vrender_core_1.vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            }), vrender_core_1.vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
+            this.addEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            });
+        }, this._onHandlerPointerMove = delayMap[this.attribute.delayType]((e => {
             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;
@@ -58,9 +62,12 @@ class DataZoom extends base_1.AbstractComponent {
             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));
-        };
+            this._dispatchEvent("change", {
+                start: start,
+                end: end,
+                tag: this._activeTag
+            }));
+        }), this.attribute.delayTime);
         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, 
@@ -69,14 +76,13 @@ class DataZoom extends base_1.AbstractComponent {
         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);
+        (0, vutils_1.isFunction)(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
     }
     bindEvents() {
         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"))), 
+        const {showDetail: showDetail, brushSelect: brushSelect} = this.attribute;
+        this._startHandlerMask && this._startHandlerMask.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "start"))), 
+        this._endHandlerMask && this._endHandlerMask.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "end"))), 
         this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "middleSymbol"))), 
         this._middleHandlerRect && this._middleHandlerRect.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "middleRect")));
         const selectedTag = brushSelect ? "background" : "middleRect";
@@ -84,12 +90,7 @@ 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", 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), 
+        this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), 
         "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), 
         this.addEventListener("pointerleave", this._onHandlerPointerLeave));
     }
@@ -106,15 +107,14 @@ class DataZoom extends base_1.AbstractComponent {
         }));
     }
     eventPosToStagePos(e) {
-        var _a, _b, _c;
-        const stagePosition = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.window.getBoundingClientRect();
+        var _a, _b;
+        const {x: x, y: y} = vrender_core_1.vglobal.mapToCanvasPoint(e);
         return {
-            x: e.clientX - ((null == stagePosition ? void 0 : stagePosition.left) || 0) - ((null === (_b = this.stage) || void 0 === _b ? void 0 : _b.x) || 0),
-            y: e.clientY - ((null == stagePosition ? void 0 : stagePosition.top) || 0) - ((null === (_c = this.stage) || void 0 === _c ? void 0 : _c.y) || 0)
+            x: x - ((null === (_a = this.stage) || void 0 === _a ? void 0 : _a.x) || 0),
+            y: y - ((null === (_b = this.stage) || void 0 === _b ? void 0 : _b.y) || 0)
         };
     }
     _onHandlerPointerUp(e) {
-        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) {
@@ -122,8 +122,16 @@ class DataZoom extends base_1.AbstractComponent {
             this.backgroundDragZoom(this._activeCache.startPos, pos);
         }
         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));
+        this._dispatchEvent("change", {
+            start: this.state.start,
+            end: this.state.end,
+            tag: this._activeTag
+        })), "browser" === vrender_core_1.vglobal.env && (vrender_core_1.vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+        }), vrender_core_1.vglobal.removeEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
+        this.removeEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+        });
     }
     _onHandlerPointerEnter(e) {
         e.stopPropagation(), this._showText = !0, this.renderText();
@@ -236,17 +244,17 @@ class DataZoom extends base_1.AbstractComponent {
         }, this._layoutAttrFromConfig;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         this._layoutAttrFromConfig = null;
-        const {orient: orient, backgroundStyle: backgroundStyle, backgroundChartStyle: backgroundChartStyle, selectedBackgroundStyle: selectedBackgroundStyle, selectedBackgroundChartStyle: selectedBackgroundChartStyle, middleHandlerStyle: middleHandlerStyle, startHandlerStyle: startHandlerStyle, endHandlerStyle: endHandlerStyle, brushSelect: brushSelect} = this.attribute, {start: start, end: end} = this.state, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig(), group = this.createOrUpdateChild("dataZoom-container", {}, "group");
-        this._container = group, this._background = group.createOrUpdateChild("background", Object.assign({
+        const {orient: orient, backgroundStyle: backgroundStyle, backgroundChartStyle: backgroundChartStyle, selectedBackgroundStyle: selectedBackgroundStyle, selectedBackgroundChartStyle: selectedBackgroundChartStyle, middleHandlerStyle: middleHandlerStyle, startHandlerStyle: startHandlerStyle, endHandlerStyle: endHandlerStyle, brushSelect: brushSelect} = this.attribute, {start: start, end: end} = this.state, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig(), startHandlerMinSize = null !== (_a = startHandlerStyle.triggerMinSize) && void 0 !== _a ? _a : 40, endHandlerMinSize = null !== (_b = endHandlerStyle.triggerMinSize) && void 0 !== _b ? _b : 40, group = this.createOrUpdateChild("dataZoom-container", {}, "group");
+        if (this._container = group, this._background = group.createOrUpdateChild("background", Object.assign({
             x: position.x,
             y: position.y,
             width: width,
             height: height,
             cursor: brushSelect ? "crosshair" : "auto"
-        }, backgroundStyle), "rect"), (null === (_a = null == backgroundChartStyle ? void 0 : backgroundChartStyle.line) || void 0 === _a ? void 0 : _a.visible) && this.setPreviewAttributes("line", group), 
-        (null === (_b = null == backgroundChartStyle ? void 0 : backgroundChartStyle.area) || void 0 === _b ? void 0 : _b.visible) && this.setPreviewAttributes("area", group), 
+        }, backgroundStyle), "rect"), (null === (_c = null == backgroundChartStyle ? void 0 : backgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this.setPreviewAttributes("line", group), 
+        (null === (_d = null == backgroundChartStyle ? void 0 : backgroundChartStyle.area) || void 0 === _d ? void 0 : _d.visible) && this.setPreviewAttributes("area", group), 
         brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign({
             x: position.x + start * width,
             y: position.y,
@@ -259,73 +267,92 @@ class DataZoom extends base_1.AbstractComponent {
             width: width,
             height: (end - start) * height,
             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._showText && this.renderText(), this._isHorizontal ? (this._startHandler = group.createOrUpdateChild("startHandler", Object.assign({
-            x: position.x + start * width,
-            y: position.y + height / 2,
-            size: height,
-            angle: 0,
-            symbolType: null !== (_e = null == startHandlerStyle ? void 0 : startHandlerStyle.symbolType) && void 0 !== _e ? _e : "square",
-            cursor: "ew-resize",
-            strokeBoundsBuffer: 0,
-            boundsPadding: 2,
-            pickMode: "imprecise"
-        }, startHandlerStyle), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign({
-            x: position.x + end * width,
-            y: position.y + height / 2,
-            size: height,
-            angle: 0,
-            symbolType: null !== (_f = null == endHandlerStyle ? void 0 : endHandlerStyle.symbolType) && void 0 !== _f ? _f : "square",
-            cursor: "ew-resize",
-            strokeBoundsBuffer: 0,
-            boundsPadding: 2,
-            pickMode: "imprecise"
-        }, endHandlerStyle), "symbol"), (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) && (this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign({
-            x: position.x + start * width,
-            y: position.y - ((null === (_g = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _g ? void 0 : _g.size) || 10),
-            width: (end - start) * width,
-            height: (null === (_h = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _h ? void 0 : _h.size) || 10
-        }, null === (_j = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _j ? void 0 : _j.style), "rect"), 
-        this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign({
-            x: position.x + (start + end) / 2 * width,
-            y: position.y - ((null === (_k = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _k ? void 0 : _k.size) || 10) / 2,
-            strokeBoundsBuffer: 0,
-            angle: 0,
-            symbolType: null !== (_m = null === (_l = null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon) || void 0 === _l ? void 0 : _l.symbolType) && void 0 !== _m ? _m : "square"
-        }, null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon), "symbol"))) : (this._startHandler = group.createOrUpdateChild("startHandler", Object.assign({
-            x: position.x + width / 2,
-            y: position.y + start * height,
-            size: width,
-            angle: Math.PI / 180 * 90,
-            symbolType: null !== (_o = null == startHandlerStyle ? void 0 : startHandlerStyle.symbolType) && void 0 !== _o ? _o : "square",
-            cursor: "ns-resize",
-            boundsPadding: 2,
-            pickMode: "imprecise",
-            strokeBoundsBuffer: 0
-        }, startHandlerStyle), "symbol"), (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) && (this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign({
-            x: "left" === orient ? position.x - ((null === (_p = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _p ? void 0 : _p.size) || 10) : position.x + width,
-            y: position.y + start * height,
-            width: (null === (_q = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _q ? void 0 : _q.size) || 10,
-            height: (end - start) * height
-        }, null === (_r = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _r ? void 0 : _r.style), "rect"), 
-        this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign({
-            x: "left" === orient ? position.x - ((null === (_s = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _s ? void 0 : _s.size) || 10) / 2 : position.x + width + ((null === (_t = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _t ? void 0 : _t.size) || 10) / 2,
-            y: position.y + (start + end) / 2 * height,
-            angle: Math.PI / 180 * 90,
-            symbolType: null !== (_v = null === (_u = null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon) || void 0 === _u ? void 0 : _u.symbolType) && void 0 !== _v ? _v : "square",
-            strokeBoundsBuffer: 0
-        }, null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon), "symbol")), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign({
-            x: position.x + width / 2,
-            y: position.y + end * height,
-            size: width,
-            angle: Math.PI / 180 * 90,
-            symbolType: null !== (_w = null == endHandlerStyle ? void 0 : endHandlerStyle.symbolType) && void 0 !== _w ? _w : "square",
-            cursor: "ns-resize",
-            boundsPadding: 2,
-            pickMode: "imprecise",
-            strokeBoundsBuffer: 0
-        }, endHandlerStyle), "symbol"));
+        }, selectedBackgroundStyle), "rect"), (null === (_e = null == selectedBackgroundChartStyle ? void 0 : selectedBackgroundChartStyle.line) || void 0 === _e ? void 0 : _e.visible) && this.setSelectedPreviewAttributes("line", group), 
+        (null === (_f = null == selectedBackgroundChartStyle ? void 0 : selectedBackgroundChartStyle.area) || void 0 === _f ? void 0 : _f.visible) && this.setSelectedPreviewAttributes("area", group), 
+        this._showText && this.renderText(), this._isHorizontal) {
+            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign({
+                x: position.x + start * width,
+                y: position.y + height / 2,
+                size: height,
+                symbolType: null !== (_g = null == startHandlerStyle ? void 0 : startHandlerStyle.symbolType) && void 0 !== _g ? _g : "square"
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), "symbol"), 
+            this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign({
+                x: position.x + end * width,
+                y: position.y + height / 2,
+                size: height,
+                symbolType: null !== (_h = null == endHandlerStyle ? void 0 : endHandlerStyle.symbolType) && void 0 !== _h ? _h : "square"
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), "symbol");
+            const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize), startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize), endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize), endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
+            this._startHandlerMask = group.createOrUpdateChild("startHandlerMask", Object.assign({
+                x: position.x + start * width - startHandlerWidth / 2,
+                y: position.y + height / 2 - startHandlerHeight / 2,
+                width: startHandlerWidth,
+                height: startHandlerHeight,
+                fill: "white",
+                fillOpacity: 0
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign({
+                x: position.x + end * width - endHandlerWidth / 2,
+                y: position.y + height / 2 - endHandlerHeight / 2,
+                width: endHandlerWidth,
+                height: endHandlerHeight,
+                fill: "white",
+                fillOpacity: 0
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), "rect"), (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) && (this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign({
+                x: position.x + start * width,
+                y: position.y - ((null === (_j = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _j ? void 0 : _j.size) || 10),
+                width: (end - start) * width,
+                height: (null === (_k = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _k ? void 0 : _k.size) || 10
+            }, null === (_l = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _l ? void 0 : _l.style), "rect"), 
+            this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign({
+                x: position.x + (start + end) / 2 * width,
+                y: position.y - ((null === (_m = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _m ? void 0 : _m.size) || 10) / 2,
+                strokeBoundsBuffer: 0,
+                angle: 0,
+                symbolType: null !== (_p = null === (_o = null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon) || void 0 === _o ? void 0 : _o.symbolType) && void 0 !== _p ? _p : "square"
+            }, null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon), "symbol"));
+        } else {
+            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign({
+                x: position.x + width / 2,
+                y: position.y + start * height,
+                size: width,
+                symbolType: null !== (_q = null == startHandlerStyle ? void 0 : startHandlerStyle.symbolType) && void 0 !== _q ? _q : "square"
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign({
+                x: position.x + width / 2,
+                y: position.y + end * height,
+                size: width,
+                symbolType: null !== (_r = null == endHandlerStyle ? void 0 : endHandlerStyle.symbolType) && void 0 !== _r ? _r : "square"
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), "symbol");
+            const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize), startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize), endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize), endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
+            this._startHandlerMask = group.createOrUpdateChild("startHandlerMask", Object.assign({
+                x: position.x + width / 2 - startHandlerWidth / 2,
+                y: position.y + start * height - startHandlerHeight / 2,
+                width: startHandlerWidth,
+                height: startHandlerHeight,
+                symbolType: "rect",
+                fill: "white",
+                fillOpacity: 0
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.vertical), "symbol"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign({
+                x: position.x + width / 2 - endHandlerWidth / 2,
+                y: position.y + end * height - endHandlerHeight / 2,
+                width: endHandlerWidth,
+                height: endHandlerHeight,
+                symbolType: "rect",
+                fill: "white",
+                fillOpacity: 0
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.vertical), "symbol"), (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) && (this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign({
+                x: "left" === orient ? position.x - ((null === (_s = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _s ? void 0 : _s.size) || 10) : position.x + width,
+                y: position.y + start * height,
+                width: (null === (_t = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _t ? void 0 : _t.size) || 10,
+                height: (end - start) * height
+            }, null === (_u = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _u ? void 0 : _u.style), "rect"), 
+            this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign({
+                x: "left" === orient ? position.x - ((null === (_v = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _v ? void 0 : _v.size) || 10) / 2 : position.x + width + ((null === (_w = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _w ? void 0 : _w.size) || 10) / 2,
+                y: position.y + (start + end) / 2 * height,
+                angle: Math.PI / 180 * 90,
+                symbolType: null !== (_y = null === (_x = null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon) || void 0 === _x ? void 0 : _x.symbolType) && void 0 !== _y ? _y : "square",
+                strokeBoundsBuffer: 0
+            }, null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon), "symbol"));
+        }
     }
     computeBasePoints() {
         const {orient: orient} = this.attribute, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig();
@@ -427,22 +454,15 @@ class DataZoom extends base_1.AbstractComponent {
         return labelShape ? labelShape.setAttributes(attributes) : (labelShape = new tag_1.Tag(attributes), 
         labelShape.name = name), container.add(labelShape), labelShape;
     }
-    _dispatchChangeEvent(start, end) {
-        var _a;
-        const changeEvent = new vrender_core_1.CustomEvent("change", {
-            start: start,
-            end: end
-        });
-        changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, 
-        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.setStateAttr(start, end, !0), 
-        null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, start, end, this._activeTag), 
-        this._dispatchChangeEvent(start, end)));
+        this._dispatchEvent("change", {
+            start: start,
+            end: end,
+            tag: this._activeTag
+        })));
     }
     setPreviewData(data) {
         this._previewData = data;
@@ -461,9 +481,6 @@ class DataZoom extends base_1.AbstractComponent {
         const {middleHandlerStyle: middleHandlerStyle} = this.attribute, middleHandlerRectSize = null !== (_b = null === (_a = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10, middleHandlerSymbolSize = null !== (_d = null === (_c = null == middleHandlerStyle ? void 0 : middleHandlerStyle.icon) || void 0 === _c ? void 0 : _c.size) && void 0 !== _d ? _d : 10;
         return Math.max(middleHandlerRectSize, ...(0, vutils_1.array)(middleHandlerSymbolSize));
     }
-    setUpdateStateCallback(callback) {
-        (0, vutils_1.isFunction)(callback) && (this._updateStateCallback = callback);
-    }
     setPreviewPointsX(callback) {
         (0, vutils_1.isFunction)(callback) && (this._previewPointsX = callback);
     }