@visactor/vrender-components 1.0.19-alpha.0 → 1.0.20

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

@@ -1,573 +1,141 @@
-var __rest = this && this.__rest || function(s, e) {
-    var t = {};
-    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
-    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
-        var i = 0;
-        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
-    }
-    return t;
-};
-
-import { flatten_simplify, vglobal } from "@visactor/vrender-core";
-
-import { Bounds, array, clamp, debounce, isFunction, isValid, merge, throttle } from "@visactor/vutils";
+import { array, isFunction, isValid, merge } from "@visactor/vutils";
 
 import { AbstractComponent } from "../core/base";
 
-import { Tag } from "../tag";
+import { IDataZoomEvent, IDataZoomInteractiveEvent } from "./type";
 
-import { DEFAULT_DATA_ZOOM_ATTRIBUTES, DEFAULT_HANDLER_ATTR_MAP } from "./config";
+import { DataZoomRenderer } from "./renderer";
 
-import { DataZoomActiveTag } from "./type";
+import { DataZoomInteraction } from "./interaction";
 
 import { loadDataZoomComponent } from "./register";
 
-import { getEndTriggersOfDrag } from "../util/event";
-
-const delayMap = {
-    debounce: debounce,
-    throttle: throttle
-};
+import { DEFAULT_DATA_ZOOM_ATTRIBUTES } from "./config";
 
 loadDataZoomComponent();
 
 export class DataZoom extends AbstractComponent {
-    setPropsFromAttrs() {
-        const {start: start, end: end, orient: orient, previewData: previewData, previewPointsX: previewPointsX, previewPointsY: previewPointsY, previewPointsX1: previewPointsX1, previewPointsY1: previewPointsY1} = this.attribute;
-        start && (this.state.start = start), end && (this.state.end = end);
-        const {width: width, height: height} = this.getLayoutAttrFromConfig();
-        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", previewData && (this._previewData = previewData), 
-        isFunction(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction(previewPointsY) && (this._previewPointsY = previewPointsY), 
-        isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
-    }
     constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, DataZoom.defaultAttributes, attributes)), 
-        this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
-            startPos: {
-                x: 0,
-                y: 0
-            },
-            lastPos: {
-                x: 0,
-                y: 0
-            }
-        }, this._layoutCache = {
-            attPos: "x",
-            attSize: "width",
-            max: 0
-        }, this.state = {
+        this.name = "dataZoom", this._state = {
             start: 0,
             end: 1
-        }, this._statePointToData = state => state, this._handleTouchMove = e => {
-            this._activeState && e.preventDefault();
-        }, this._onHandlerPointerDown = (e, tag) => {
-            this._clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, 
-            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);
-            const evtTarget = "browser" === vglobal.env ? vglobal : this.stage, triggers = getEndTriggersOfDrag();
-            evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
-                capture: !0
-            }), this.addEventListener("pointermove", this._onHandlerPointerMove, {
-                capture: !0
-            }), triggers.forEach((trigger => {
-                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
-            }));
-        }, this._pointerMove = e => {
-            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 === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, 
-            end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, 
-            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 && this._dispatchEvent("change", {
-                start: start,
-                end: end,
-                tag: this._activeTag
-            }));
-        }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), 
-        this._onHandlerPointerUp = e => {
-            const {start: start, end: end, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute;
-            if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
-                const pos = this.eventPosToStagePos(e);
-                this.backgroundDragZoom(this._activeCache.startPos, pos);
-            }
-            this._activeState = !1, brushSelect && this.renderDragMask(), this._dispatchEvent("change", {
-                start: this.state.start,
-                end: this.state.end,
-                tag: this._activeTag
-            }), this._clearDragEvents();
+        }, this.getLayoutAttrFromConfig = () => {
+            var _a, _b, _c, _d, _e, _f;
+            if (this._layoutCacheFromConfig) return this._layoutCacheFromConfig;
+            const {position: positionConfig, size: size, orient: orient, middleHandlerStyle: middleHandlerStyle = {}, startHandlerStyle: startHandlerStyle = {}, endHandlerStyle: endHandlerStyle = {}, backgroundStyle: backgroundStyle = {}} = this.attribute, {width: widthConfig, height: heightConfig} = size, middleHandlerSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
+            let width, height, position;
+            middleHandlerStyle.visible ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, 
+            position = {
+                x: positionConfig.x,
+                y: positionConfig.y + middleHandlerSize
+            }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
+                x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
+                y: positionConfig.y
+            }) : (width = widthConfig, height = heightConfig, position = positionConfig);
+            const startHandlerSize = null !== (_c = startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width, endHandlerSize = null !== (_d = endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
+            return startHandlerStyle.visible && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2, 
+            position = {
+                x: position.x + startHandlerSize / 2,
+                y: position.y
+            }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
+                x: position.x,
+                y: position.y + startHandlerSize / 2
+            })), height += (null !== (_e = backgroundStyle.lineWidth) && void 0 !== _e ? _e : 2) / 2, 
+            width += (null !== (_f = backgroundStyle.lineWidth) && void 0 !== _f ? _f : 2) / 2, 
+            this._layoutCacheFromConfig = {
+                position: position,
+                width: width,
+                height: height
+            }, this._layoutCacheFromConfig;
         };
-        const {position: position, showDetail: showDetail} = attributes;
-        this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
-        this.setPropsFromAttrs();
-    }
-    setAttributes(params, forceUpdateTag) {
-        super.setAttributes(params, forceUpdateTag), this.setPropsFromAttrs();
-    }
-    bindEvents() {
-        if (this.attribute.disableTriggerEvent) return void this.setAttribute("childrenPickable", !1);
-        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";
-        this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, selectedTag))), 
-        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))), 
-        "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), 
-        this.addEventListener("pointerleave", this._onHandlerPointerLeave)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
-            passive: !1
-        });
-    }
-    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
-        }));
-    }
-    _clearDragEvents() {
-        const evtTarget = "browser" === vglobal.env ? vglobal : this.stage, triggers = getEndTriggersOfDrag();
-        evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-        }), triggers.forEach((trigger => {
-            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
-        })), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-        });
-    }
-    _onHandlerPointerEnter(e) {
-        this._showText = !0, this.renderText();
-    }
-    _onHandlerPointerLeave(e) {
-        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.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.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: 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 === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0,
-            height: height
-        }, dragMaskStyle), "rect") : this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
-            x: position.x,
-            y: clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height),
-            width: width,
-            height: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
-        }, dragMaskStyle), "rect");
-    }
-    isTextOverflow(componentBoundsLike, textBounds, layout) {
-        if (!textBounds) return !1;
-        if (this._isHorizontal) {
-            if ("start" === layout) {
-                if (textBounds.x1 < componentBoundsLike.x1) return !0;
-            } else if (textBounds.x2 > componentBoundsLike.x2) return !0;
-        } else if ("start" === layout) {
-            if (textBounds.y1 < componentBoundsLike.y1) return !0;
-        } else if (textBounds.y2 > componentBoundsLike.y2) return !0;
-        return !1;
-    }
-    setTextAttr(startTextBounds, endTextBounds) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const {startTextStyle: startTextStyle, endTextStyle: endTextStyle} = this.attribute, {formatMethod: startTextFormat} = startTextStyle, restStartTextStyle = __rest(startTextStyle, [ "formatMethod" ]), {formatMethod: endTextFormat} = endTextStyle, restEndTextStyle = __rest(endTextStyle, [ "formatMethod" ]), {start: start, end: end} = this.state;
-        this._startValue = this._statePointToData(start), this._endValue = this._statePointToData(end);
-        const {position: position, width: width, height: height} = this.getLayoutAttrFromConfig(), startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue, endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue, componentBoundsLike = {
-            x1: position.x,
-            y1: position.y,
-            x2: position.x + width,
-            y2: position.y + height
+        const {start: start, end: end, orient: orient} = this.attribute;
+        this._isHorizontal = "top" === orient || "bottom" === orient, start && (this._state.start = start), 
+        end && (this._state.end = end), this._renderer = new DataZoomRenderer(this._getRendererAttrs()), 
+        this._interaction = new DataZoomInteraction(this._getInteractionAttrs());
+    }
+    _getRendererAttrs() {
+        return {
+            attribute: this.attribute,
+            getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
+            setState: state => {
+                this._state = state;
+            },
+            getState: () => this._state,
+            getContainer: () => this._container
         };
-        let startTextPosition, endTextPosition, startTextAlignStyle, endTextAlignStyle;
-        this._isHorizontal ? (startTextPosition = {
-            x: position.x + start * width,
-            y: position.y + height / 2
-        }, endTextPosition = {
-            x: position.x + end * width,
-            y: position.y + height / 2
-        }, startTextAlignStyle = {
-            textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "left" : "right",
-            textBaseline: null !== (_b = null === (_a = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _a ? void 0 : _a.textBaseline) && void 0 !== _b ? _b : "middle"
-        }, endTextAlignStyle = {
-            textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "right" : "left",
-            textBaseline: null !== (_d = null === (_c = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _c ? void 0 : _c.textBaseline) && void 0 !== _d ? _d : "middle"
-        }) : (startTextPosition = {
-            x: position.x + width / 2,
-            y: position.y + start * height
-        }, endTextPosition = {
-            x: position.x + width / 2,
-            y: position.y + end * height
-        }, startTextAlignStyle = {
-            textAlign: null !== (_f = null === (_e = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _e ? void 0 : _e.textAlign) && void 0 !== _f ? _f : "center",
-            textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "top" : "bottom"
-        }, endTextAlignStyle = {
-            textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
-            textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
-        }), this._startText = this.maybeAddLabel(this._container, merge({}, restStartTextStyle, {
-            text: startTextValue,
-            x: startTextPosition.x,
-            y: startTextPosition.y,
-            visible: this._showText,
-            pickable: !1,
-            childrenPickable: !1,
-            textStyle: startTextAlignStyle
-        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge({}, restEndTextStyle, {
-            text: endTextValue,
-            x: endTextPosition.x,
-            y: endTextPosition.y,
-            visible: this._showText,
-            pickable: !1,
-            childrenPickable: !1,
-            textStyle: endTextAlignStyle
-        }), `data-zoom-end-text-${position}`);
     }
-    renderText() {
-        let startTextBounds = null, endTextBounds = null;
-        this.setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, 
-        endTextBounds = this._endText.AABBBounds, this.setTextAttr(startTextBounds, endTextBounds), 
-        startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds;
-        const {x1: x1, x2: x2, y1: y1, y2: y2} = startTextBounds, {dx: startTextDx = 0, dy: startTextDy = 0} = this.attribute.startTextStyle;
-        if ((new Bounds).set(x1, y1, x2, y2).intersects(endTextBounds)) {
-            const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
-            if (this._isHorizontal) {
-                const boundsYDiff = Math.abs(endTextBounds.y1 - endTextBounds.y2);
-                this._startText.setAttribute("dy", startTextDy + direction * (Number.isFinite(boundsYDiff) ? boundsYDiff : 0));
-            } else {
-                const boundsXDiff = Math.abs(endTextBounds.x1 - endTextBounds.x2);
-                this._startText.setAttribute("dx", startTextDx + direction * (Number.isFinite(boundsXDiff) ? boundsXDiff : 0));
-            }
-        } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
-    }
-    getLayoutAttrFromConfig() {
-        var _a, _b, _c, _d, _e, _f;
-        if (this._layoutAttrFromConfig) return this._layoutAttrFromConfig;
-        const {position: positionConfig, size: size, orient: orient, middleHandlerStyle: middleHandlerStyle = {}, startHandlerStyle: startHandlerStyle = {}, endHandlerStyle: endHandlerStyle = {}, backgroundStyle: backgroundStyle = {}} = this.attribute, {width: widthConfig, height: heightConfig} = size, middleHandlerSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
-        let width, height, position;
-        middleHandlerStyle.visible ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, 
-        position = {
-            x: positionConfig.x,
-            y: positionConfig.y + middleHandlerSize
-        }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
-            x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
-            y: positionConfig.y
-        }) : (width = widthConfig, height = heightConfig, position = positionConfig);
-        const startHandlerSize = null !== (_c = startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width, endHandlerSize = null !== (_d = endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
-        return startHandlerStyle.visible && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2, 
-        position = {
-            x: position.x + startHandlerSize / 2,
-            y: position.y
-        }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
-            x: position.x,
-            y: position.y + startHandlerSize / 2
-        })), height += null !== (_e = backgroundStyle.lineWidth / 2) && void 0 !== _e ? _e : 1, 
-        width += null !== (_f = backgroundStyle.lineWidth / 2) && void 0 !== _f ? _f : 1, 
-        this._layoutAttrFromConfig = {
-            position: position,
-            width: width,
-            height: height
-        }, 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, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
-        this._layoutAttrFromConfig = null;
-        const {orient: orient, backgroundStyle: backgroundStyle, backgroundChartStyle: backgroundChartStyle = {}, selectedBackgroundStyle: selectedBackgroundStyle = {}, selectedBackgroundChartStyle: selectedBackgroundChartStyle = {}, middleHandlerStyle: middleHandlerStyle = {}, startHandlerStyle: startHandlerStyle = {}, endHandlerStyle: endHandlerStyle = {}, brushSelect: brushSelect, zoomLock: zoomLock} = 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(Object.assign({
-            x: position.x,
-            y: position.y,
-            width: width,
-            height: height,
-            cursor: brushSelect ? "crosshair" : "auto"
-        }, backgroundStyle), {
-            pickable: !zoomLock && (null === (_c = backgroundStyle.pickable) || void 0 === _c || _c)
-        }), "rect"), (null === (_d = backgroundChartStyle.line) || void 0 === _d ? void 0 : _d.visible) && this.setPreviewAttributes("line", group), 
-        (null === (_e = backgroundChartStyle.area) || void 0 === _e ? void 0 : _e.visible) && this.setPreviewAttributes("area", group), 
-        brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
-            x: position.x + start * width,
-            y: position.y,
-            width: (end - start) * width,
-            height: height,
-            cursor: brushSelect ? "crosshair" : "move"
-        }, selectedBackgroundStyle), {
-            pickable: !zoomLock && (null === (_f = selectedBackgroundChartStyle.pickable) || void 0 === _f || _f)
-        }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
-            x: position.x,
-            y: position.y + start * height,
-            width: width,
-            height: (end - start) * height,
-            cursor: brushSelect ? "crosshair" : "move"
-        }, selectedBackgroundStyle), {
-            pickable: !zoomLock && (null === (_g = selectedBackgroundStyle.pickable) || void 0 === _g || _g)
-        }), "rect"), (null === (_h = selectedBackgroundChartStyle.line) || void 0 === _h ? void 0 : _h.visible) && this.setSelectedPreviewAttributes("line", group), 
-        (null === (_j = selectedBackgroundChartStyle.area) || void 0 === _j ? void 0 : _j.visible) && this.setSelectedPreviewAttributes("area", group), 
-        this._isHorizontal) {
-            if (middleHandlerStyle.visible) {
-                const middleHandlerBackgroundSize = (null === (_k = middleHandlerStyle.background) || void 0 === _k ? void 0 : _k.size) || 10;
-                this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
-                    x: position.x + start * width,
-                    y: position.y - middleHandlerBackgroundSize,
-                    width: (end - start) * width,
-                    height: middleHandlerBackgroundSize
-                }, null === (_l = middleHandlerStyle.background) || void 0 === _l ? void 0 : _l.style), {
-                    pickable: !zoomLock && (null === (_p = null === (_o = null === (_m = middleHandlerStyle.background) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.pickable) || void 0 === _p || _p)
-                }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
-                    x: position.x + (start + end) / 2 * width,
-                    y: position.y - middleHandlerBackgroundSize / 2,
-                    strokeBoundsBuffer: 0,
-                    angle: 0,
-                    symbolType: null !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square"
-                }, middleHandlerStyle.icon), {
-                    pickable: !zoomLock && (null === (_s = middleHandlerStyle.icon.pickable) || void 0 === _s || _s)
-                }), "symbol");
-            }
-            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
-                x: position.x + start * width,
-                y: position.y + height / 2,
-                size: height,
-                symbolType: null !== (_t = startHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
-                pickable: !zoomLock && (null === (_u = startHandlerStyle.pickable) || void 0 === _u || _u)
-            }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
-                x: position.x + end * width,
-                y: position.y + height / 2,
-                size: height,
-                symbolType: null !== (_v = endHandlerStyle.symbolType) && void 0 !== _v ? _v : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
-                pickable: !zoomLock && (null === (_w = endHandlerStyle.pickable) || void 0 === _w || _w)
-            }), "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(Object.assign({
-                x: position.x + start * width - startHandlerWidth / 2,
-                y: position.y + height / 2 - startHandlerHeight / 2,
-                width: startHandlerWidth,
-                height: startHandlerHeight,
-                fill: "white",
-                fillOpacity: 0,
-                zIndex: 999
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
-                pickable: !zoomLock
-            }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
-                x: position.x + end * width - endHandlerWidth / 2,
-                y: position.y + height / 2 - endHandlerHeight / 2,
-                width: endHandlerWidth,
-                height: endHandlerHeight,
-                fill: "white",
-                fillOpacity: 0,
-                zIndex: 999
-            }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
-                pickable: !zoomLock
-            }), "rect");
-        } else {
-            if (middleHandlerStyle.visible) {
-                const middleHandlerBackgroundSize = (null === (_x = middleHandlerStyle.background) || void 0 === _x ? void 0 : _x.size) || 10;
-                this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
-                    x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
-                    y: position.y + start * height,
-                    width: middleHandlerBackgroundSize,
-                    height: (end - start) * height
-                }, null === (_y = middleHandlerStyle.background) || void 0 === _y ? void 0 : _y.style), {
-                    pickable: !zoomLock && (null === (_1 = null === (_0 = null === (_z = middleHandlerStyle.background) || void 0 === _z ? void 0 : _z.style) || void 0 === _0 ? void 0 : _0.pickable) || void 0 === _1 || _1)
-                }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
-                    x: "left" === orient ? position.x - middleHandlerBackgroundSize / 2 : position.x + width + middleHandlerBackgroundSize / 2,
-                    y: position.y + (start + end) / 2 * height,
-                    angle: Math.PI / 180 * 90,
-                    symbolType: null !== (_3 = null === (_2 = middleHandlerStyle.icon) || void 0 === _2 ? void 0 : _2.symbolType) && void 0 !== _3 ? _3 : "square",
-                    strokeBoundsBuffer: 0
-                }, middleHandlerStyle.icon), {
-                    pickable: !zoomLock && (null === (_5 = null === (_4 = middleHandlerStyle.icon) || void 0 === _4 ? void 0 : _4.pickable) || void 0 === _5 || _5)
-                }), "symbol");
-            }
-            this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
-                x: position.x + width / 2,
-                y: position.y + start * height,
-                size: width,
-                symbolType: null !== (_6 = startHandlerStyle.symbolType) && void 0 !== _6 ? _6 : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
-                pickable: !zoomLock && (null === (_7 = startHandlerStyle.pickable) || void 0 === _7 || _7)
-            }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
-                x: position.x + width / 2,
-                y: position.y + end * height,
-                size: width,
-                symbolType: null !== (_8 = endHandlerStyle.symbolType) && void 0 !== _8 ? _8 : "square"
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
-                pickable: !zoomLock && (null === (_9 = endHandlerStyle.pickable) || void 0 === _9 || _9)
-            }), "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(Object.assign({
-                x: position.x + width / 2 + startHandlerWidth / 2,
-                y: position.y + start * height - startHandlerHeight / 2,
-                width: endHandlerHeight,
-                height: endHandlerWidth,
-                fill: "white",
-                fillOpacity: 0,
-                zIndex: 999
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
-                pickable: !zoomLock
-            }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
-                x: position.x + width / 2 + endHandlerWidth / 2,
-                y: position.y + end * height - endHandlerHeight / 2,
-                width: endHandlerHeight,
-                height: endHandlerWidth,
-                fill: "white",
-                fillOpacity: 0,
-                zIndex: 999
-            }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
-                pickable: !zoomLock
-            }), "rect");
-        }
-        this._showText && this.renderText();
-    }
-    computeBasePoints() {
-        const {orient: orient} = this.attribute, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig();
-        let basePointStart, basePointEnd;
-        return this._isHorizontal ? (basePointStart = [ {
-            x: position.x,
-            y: position.y + height
-        } ], basePointEnd = [ {
-            x: position.x + width,
-            y: position.y + height
-        } ]) : "left" === orient ? (basePointStart = [ {
-            x: position.x + width,
-            y: position.y
-        } ], basePointEnd = [ {
-            x: position.x + width,
-            y: position.y + height
-        } ]) : (basePointStart = [ {
-            x: position.x,
-            y: position.y + height
-        } ], basePointEnd = [ {
-            x: position.x,
-            y: position.y
-        } ]), {
-            basePointStart: basePointStart,
-            basePointEnd: basePointEnd
+    _getInteractionAttrs() {
+        return {
+            stage: this.stage,
+            attribute: this.attribute,
+            startHandlerMask: this._renderer.startHandlerMask,
+            endHandlerMask: this._renderer.endHandlerMask,
+            middleHandlerSymbol: this._renderer.middleHandlerSymbol,
+            middleHandlerRect: this._renderer.middleHandlerRect,
+            selectedBackground: this._renderer.selectedBackground,
+            background: this._renderer.background,
+            previewGroup: this._renderer.previewGroup,
+            selectedPreviewGroup: this._renderer.selectedPreviewGroup,
+            getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
+            setState: state => {
+                this._state = state;
+            },
+            getState: () => this._state,
+            getGlobalTransMatrix: () => this.globalTransMatrix
         };
     }
-    simplifyPoints(points) {
-        var _a;
-        if (points.length > 1e4) {
-            const tolerance = null !== (_a = this.attribute.tolerance) && void 0 !== _a ? _a : this._previewData.length / 1e4;
-            return flatten_simplify(points, tolerance, !1);
-        }
-        return points;
-    }
-    getPreviewLinePoints() {
-        let previewPoints = this._previewData.map((d => ({
-            x: this._previewPointsX && this._previewPointsX(d),
-            y: this._previewPointsY && this._previewPointsY(d)
-        })));
-        if (0 === previewPoints.length) return previewPoints;
-        previewPoints = this.simplifyPoints(previewPoints);
-        const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
-        return basePointStart.concat(previewPoints).concat(basePointEnd);
-    }
-    getPreviewAreaPoints() {
-        let previewPoints = this._previewData.map((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;
-        previewPoints = this.simplifyPoints(previewPoints);
-        const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
-        return basePointStart.concat(previewPoints).concat(basePointEnd);
+    bindEvents() {
+        this.attribute.disableTriggerEvent ? this.setAttribute("childrenPickable", !1) : (this._interaction.bindEvents(), 
+        this._interaction.on(IDataZoomInteractiveEvent.stateUpdate, (({shouldRender: shouldRender}) => {
+            shouldRender && this._renderer.renderDataZoom(!0);
+        })), this._interaction.on(IDataZoomInteractiveEvent.dataZoomUpdate, (({start: start, end: end, tag: tag}) => {
+            this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
+                start: start,
+                end: end,
+                tag: tag
+            });
+        })), this._interaction.on(IDataZoomInteractiveEvent.maskUpdate, (() => {
+            this._renderer.renderDragMask();
+        })), "auto" === this.attribute.showDetail && (this._container.addEventListener("pointerenter", (() => {
+            this._renderer.showText = !0, this._renderer.renderText();
+        })), this._container.addEventListener("pointerleave", (() => {
+            this._renderer.showText = !1, this._renderer.renderText();
+        }))));
     }
-    setPreviewAttributes(type, group) {
-        this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
-            pickable: !1
-        }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
-            curveType: "basis"
-        }, "area");
-        const {backgroundChartStyle: backgroundChartStyle = {}} = this.attribute;
-        "line" === type && this._previewLine.setAttributes(Object.assign({
-            points: this.getPreviewLinePoints(),
-            curveType: "basis",
-            pickable: !1
-        }, backgroundChartStyle.line)), "area" === type && this._previewArea.setAttributes(Object.assign({
-            points: this.getPreviewAreaPoints(),
-            curveType: "basis",
-            pickable: !1
-        }, backgroundChartStyle.area));
+    setAttributes(params, forceUpdateTag) {
+        const {start: start, end: end} = this.attribute;
+        start && (this._state.start = start), end && (this._state.end = end), this._renderer.setAttributes(this._getRendererAttrs()), 
+        this._interaction.setAttributes(this._getInteractionAttrs()), super.setAttributes(params, forceUpdateTag);
     }
-    setSelectedPreviewAttributes(type, group) {
-        this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-            pickable: !1
-        }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group")), 
-        "line" === type ? this._selectedPreviewLine = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewLine", {}, "line") : this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewArea", {
-            curveType: "basis"
-        }, "area");
-        const {selectedBackgroundChartStyle: selectedBackgroundChartStyle = {}} = this.attribute, {start: start, end: end} = this.state, {position: position, width: width, height: height} = this.getLayoutAttrFromConfig();
-        this._selectedPreviewGroupClip.setAttributes({
-            x: this._isHorizontal ? position.x + start * width : position.x,
-            y: this._isHorizontal ? position.y : position.y + start * height,
-            width: this._isHorizontal ? (end - start) * width : width,
-            height: this._isHorizontal ? height : (end - start) * height,
-            clip: !0,
-            pickable: !1
-        }), this._selectedPreviewGroup.setAttributes({
-            x: -(this._isHorizontal ? position.x + start * width : position.x),
-            y: -(this._isHorizontal ? position.y : position.y + start * height),
-            width: this._isHorizontal ? (end - start) * width : width,
-            height: this._isHorizontal ? height : (end - start) * height,
-            pickable: !1
-        }), "line" === type && this._selectedPreviewLine.setAttributes(Object.assign({
-            points: this.getPreviewLinePoints(),
-            curveType: "basis",
-            pickable: !1
-        }, selectedBackgroundChartStyle.line)), "area" === type && this._selectedPreviewArea.setAttributes(Object.assign({
-            points: this.getPreviewAreaPoints(),
-            curveType: "basis",
-            pickable: !1
-        }, selectedBackgroundChartStyle.area));
+    render() {
+        this._layoutCacheFromConfig = null, this._container = this.createOrUpdateChild("datazoom-container", {}, "group"), 
+        this._renderer.renderDataZoom(), this._interaction.setAttributes(this._getInteractionAttrs());
     }
-    maybeAddLabel(container, attributes, name) {
-        let labelShape = this.find((node => node.name === name), !0);
-        return labelShape ? labelShape.setAttributes(attributes) : (labelShape = new Tag(attributes), 
-        labelShape.name = name), container.add(labelShape), labelShape;
+    release(all) {
+        super.release(all), this._interaction.clearDragEvents();
     }
     setStartAndEnd(start, end) {
-        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), 
-        this._dispatchEvent("change", {
+        const {start: startState, end: endState} = this._state;
+        isValid(start) && isValid(end) && (start !== startState || end !== endState) && (this._state = {
             start: start,
-            end: end,
-            tag: this._activeTag
-        })));
+            end: end
+        }, this._renderer.renderDataZoom(!0), this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
+            start: start,
+            end: end
+        }));
     }
     setPreviewData(data) {
-        this._previewData = data;
+        this._renderer.previewData = data;
     }
     setText(text, tag) {
-        "start" === tag ? this._startText.setAttribute("text", text) : this._endText.setAttribute("text", text);
+        "start" === tag ? this._renderer.startText.setAttribute("text", text) : this._renderer.endText.setAttribute("text", text);
     }
     getStartValue() {
-        return this._startValue;
+        return this._renderer.startValue;
     }
     getEndTextValue() {
-        return this._endValue;
+        return this._renderer.endValue;
     }
     getMiddleHandlerSize() {
         var _a, _b, _c, _d;
@@ -575,24 +143,19 @@ export class DataZoom extends AbstractComponent {
         return Math.max(middleHandlerRectSize, ...array(middleHandlerSymbolSize));
     }
     setPreviewPointsX(callback) {
-        isFunction(callback) && (this._previewPointsX = callback);
+        isFunction(callback) && (this._renderer.previewPointsX = callback);
     }
     setPreviewPointsY(callback) {
-        isFunction(callback) && (this._previewPointsY = callback);
+        isFunction(callback) && (this._renderer.previewPointsY = callback);
     }
     setPreviewPointsX1(callback) {
-        isFunction(callback) && (this._previewPointsX1 = callback);
+        isFunction(callback) && (this._renderer.previewPointsX1 = callback);
     }
     setPreviewPointsY1(callback) {
-        isFunction(callback) && (this._previewPointsY1 = callback);
+        isFunction(callback) && (this._renderer.previewPointsY1 = callback);
     }
     setStatePointToData(callback) {
-        isFunction(callback) && (this._statePointToData = callback);
-    }
-    release(all) {
-        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
-            passive: !1
-        }), this._clearDragEvents();
+        isFunction(callback) && (this._renderer.statePointToData = callback);
     }
 }