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

package/es/data-zoom/data-zoom.js

@@ -8,7 +8,7 @@ var __rest = this && this.__rest || function(s, e) {
     return t;
 };
 
-import { vglobal, CustomEvent } from "@visactor/vrender-core";
+import { vglobal } from "@visactor/vrender-core";
 
 import { array, clamp, debounce, isFunction, isValid, merge, throttle } from "@visactor/vutils";
 
@@ -16,7 +16,7 @@ import { AbstractComponent } from "../core/base";
 
 import { Tag } from "../tag";
 
-import { DEFAULT_DATA_ZOOM_ATTRIBUTES } from "./config";
+import { DEFAULT_DATA_ZOOM_ATTRIBUTES, DEFAULT_HANDLER_ATTR_MAP } from "./config";
 
 import { DataZoomActiveTag } from "./type";
 
@@ -50,14 +50,18 @@ export class DataZoom extends AbstractComponent {
             end: 1
         }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
             e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, 
-            this._activeItem = this._startHandler) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, 
-            this._activeItem = this._endHandler) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, 
+            this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, 
+            this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, 
             this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, 
             this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = 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" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            }), 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;
@@ -66,9 +70,12 @@ export class DataZoom extends AbstractComponent {
             start = end + dis, this._activeTag = 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, 
@@ -76,13 +83,13 @@ export class DataZoom extends AbstractComponent {
         this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
         previewData && (this._previewData = previewData), isFunction(previewPointsX) && (this._previewPointsX = previewPointsX), 
         isFunction(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), 
-        isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1), isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
+        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";
@@ -90,12 +97,7 @@ export class DataZoom extends 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" === vglobal.env && (vglobal.addEventListener("pointermove", delayMap[delayType](this._onHandlerPointerMove.bind(this), delayTime), {
-            capture: !0
-        }), 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));
     }
@@ -112,15 +114,14 @@ export class DataZoom extends 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} = 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 === DataZoomActiveTag.background) {
@@ -128,8 +129,16 @@ export class DataZoom extends 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" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+        }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
+        this.removeEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+        });
     }
     _onHandlerPointerEnter(e) {
         e.stopPropagation(), this._showText = !0, this.renderText();
@@ -238,17 +247,17 @@ export class DataZoom extends 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,
@@ -261,73 +270,91 @@ export class DataZoom extends 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"
+            }, 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"
+            }, 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
+            }, 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
+            }, 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"
+            }, 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"
+            }, 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
+            }, 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
+            }, 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();
@@ -429,22 +456,15 @@ export class DataZoom extends AbstractComponent {
         return labelShape ? labelShape.setAttributes(attributes) : (labelShape = new Tag(attributes), 
         labelShape.name = name), container.add(labelShape), labelShape;
     }
-    _dispatchChangeEvent(start, end) {
-        var _a;
-        const changeEvent = new 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;
         isValid(start) && 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;
@@ -463,9 +483,6 @@ export class DataZoom extends 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, ...array(middleHandlerSymbolSize));
     }
-    setUpdateStateCallback(callback) {
-        isFunction(callback) && (this._updateStateCallback = callback);
-    }
     setPreviewPointsX(callback) {
         isFunction(callback) && (this._previewPointsX = callback);
     }