@visactor/vrender-components 0.18.0-alpha.0 → 0.18.0-alpha.2

package/cjs/core/type.d.ts

@@ -28,16 +28,18 @@ export type Padding = number | number[] | {
     right?: number;
 };
 type CommonTextContent = {
-    type?: 'text';
-    text?: string | string[] | number | number[];
+    text?: string | string[] | number | number[] | {
+        type?: 'text';
+        text: string | string[] | number | number[];
+    };
 };
 type RichTextContent = {
-    type?: 'rich';
-    text?: IRichTextCharacter[];
+    text?: {
+        type: 'rich';
+        text: IRichTextCharacter[];
+    };
 };
-type HtmlTextContent = {
-    type?: 'html';
-    text?: string | HTMLElement;
+export type TextContent = (CommonTextContent | RichTextContent) & {
+    type?: 'text' | 'rich';
 };
-export type TextContent = CommonTextContent | RichTextContent | HtmlTextContent;
 export {};

package/cjs/core/type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { IRichTextCharacter } from '@visactor/vrender-core';\n\nexport type Point = {\n  x: number;\n  y: number;\n};\n\nexport interface LocationCfg {\n  [key: string]: any;\n}\n\nexport interface PointLocationCfg extends LocationCfg {\n  /**\n   * 位置 x\n   * @type {number}\n   */\n  x: number;\n  /**\n   * 位置 y\n   * @type {number}\n   */\n  y: number;\n}\n\nexport interface RegionLocationCfg extends LocationCfg {\n  /**\n   * 起始点\n   */\n  start: Point;\n  /**\n   * 结束点\n   */\n  end: Point;\n}\n\nexport type State<T> = {\n  [key: string]: T;\n};\n\nexport type BaseGraphicAttributes<T> = {\n  /**\n   * 基础样式设置\n   */\n  style?: T;\n  /**\n   * 状态样式设置\n   */\n  state?: State<T>;\n};\n\nexport type Padding =\n  | number\n  | number[]\n  | {\n      top?: number;\n      bottom?: number;\n      left?: number;\n      right?: number;\n    };\n\ntype CommonTextContent = {\n  type?: 'text';\n  text?: string | string[] | number | number[];\n};\n\ntype RichTextContent = {\n  type?: 'rich';\n  text?: IRichTextCharacter[];\n};\n\ntype HtmlTextContent = {\n  type?: 'html';\n  text?: string | HTMLElement;\n};\n\nexport type TextContent = CommonTextContent | RichTextContent | HtmlTextContent;\n"]}
+{"version":3,"sources":["../src/core/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { IRichTextCharacter } from '@visactor/vrender-core';\n\nexport type Point = {\n  x: number;\n  y: number;\n};\n\nexport interface LocationCfg {\n  [key: string]: any;\n}\n\nexport interface PointLocationCfg extends LocationCfg {\n  /**\n   * 位置 x\n   * @type {number}\n   */\n  x: number;\n  /**\n   * 位置 y\n   * @type {number}\n   */\n  y: number;\n}\n\nexport interface RegionLocationCfg extends LocationCfg {\n  /**\n   * 起始点\n   */\n  start: Point;\n  /**\n   * 结束点\n   */\n  end: Point;\n}\n\nexport type State<T> = {\n  [key: string]: T;\n};\n\nexport type BaseGraphicAttributes<T> = {\n  /**\n   * 基础样式设置\n   */\n  style?: T;\n  /**\n   * 状态样式设置\n   */\n  state?: State<T>;\n};\n\nexport type Padding =\n  | number\n  | number[]\n  | {\n      top?: number;\n      bottom?: number;\n      left?: number;\n      right?: number;\n    };\n\ntype CommonTextContent = {\n  text?:\n    | string\n    | string[]\n    | number\n    | number[]\n    | {\n        type?: 'text';\n        text: string | string[] | number | number[];\n      };\n};\n\ntype RichTextContent = {\n  text?: {\n    type: 'rich';\n    text: IRichTextCharacter[];\n  };\n};\n\nexport type TextContent = (CommonTextContent | RichTextContent) & {\n  /** @deprecated */\n  type?: 'text' | 'rich';\n};\n"]}

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

@@ -1,5 +1,5 @@
 import type { FederatedPointerEvent, IGroup } from '@visactor/vrender-core';
-import type { IPointLike } from '@visactor/vutils';
+import type { IBoundsLike, IPointLike } from '@visactor/vutils';
 import { AbstractComponent } from '../core/base';
 import type { TagAttributes } from '../tag';
 import { Tag } from '../tag';
@@ -154,7 +154,9 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     private _previewPointsY1;
     private _statePointToData;
     private _layoutAttrFromConfig;
+    setPropsFromAttrs(): void;
     constructor(attributes: DataZoomAttributes, options?: ComponentOptions);
+    setAttributes(params: Partial<Required<DataZoomAttributes>>, forceUpdateTag?: boolean): void;
     protected bindEvents(): void;
     protected dragMaskSize(): number;
     protected setStateAttr(start: number, end: number, shouldRender: boolean): void;
@@ -163,6 +165,7 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
         y: number;
     };
     private _onHandlerPointerDown;
+    private _pointerMove;
     private _onHandlerPointerMove;
     private _onHandlerPointerUp;
     private _onHandlerPointerEnter;
@@ -170,6 +173,8 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
     protected backgroundDragZoom(startPos: IPointLike, endPos: IPointLike): void;
     protected moveZoomWithMiddle(middle: number): void;
     protected renderDragMask(): void;
+    protected isTextOverflow(componentBoundsLike: IBoundsLike, textBounds: IBoundsLike | null, layout: 'start' | 'end'): boolean;
+    protected setTextAttr(startTextBounds: IBoundsLike, endTextBounds: IBoundsLike): void;
     protected renderText(): void;
     protected getLayoutAttrFromConfig(): any;
     protected render(): void;

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

@@ -22,6 +22,18 @@ const vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@v
 (0, register_1.loadDataZoomComponent)();
 
 class DataZoom extends base_1.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), 
+        (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);
+    }
     constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, DataZoom.defaultAttributes, attributes)), 
         this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
@@ -49,11 +61,11 @@ class DataZoom extends base_1.AbstractComponent {
             this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), 
             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))), 
+            }), vrender_core_1.vglobal.addEventListener("pointerup", this._onHandlerPointerUp)), 
             this.addEventListener("pointermove", this._onHandlerPointerMove, {
                 capture: !0
             });
-        }, this._onHandlerPointerMove = delayMap[this.attribute.delayType]((e => {
+        }, this._pointerMove = 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;
@@ -62,21 +74,37 @@ 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), 
-            this._dispatchEvent("change", {
+            realTime && 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, 
-        this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", 
+        }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), 
+        this._onHandlerPointerUp = e => {
+            e.preventDefault();
+            const {start: start, end: end, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute;
+            if (this._activeState && this._activeTag === type_1.DataZoomActiveTag.background) {
+                const pos = this.eventPosToStagePos(e);
+                this.backgroundDragZoom(this._activeCache.startPos, pos);
+            }
+            this._activeState = !1, brushSelect && this.renderDragMask(), start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), 
+            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)), 
+            this.removeEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            }), this.removeEventListener("pointerup", this._onHandlerPointerUp);
+        };
+        const {position: position, showDetail: showDetail} = attributes;
         this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
-        previewData && (this._previewData = previewData), (0, vutils_1.isFunction)(previewPointsX) && (this._previewPointsX = previewPointsX), 
-        (0, vutils_1.isFunction)(previewPointsY) && (this._previewPointsY = previewPointsY), 
-        (0, vutils_1.isFunction)(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), 
-        (0, vutils_1.isFunction)(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+        this.setPropsFromAttrs();
+    }
+    setAttributes(params, forceUpdateTag) {
+        super.setAttributes(params, forceUpdateTag), this.setPropsFromAttrs();
     }
     bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -108,31 +136,12 @@ class DataZoom extends base_1.AbstractComponent {
     }
     eventPosToStagePos(e) {
         var _a, _b;
-        const {x: x, y: y} = vrender_core_1.vglobal.mapToCanvasPoint(e);
+        const {x: x, y: y} = vrender_core_1.vglobal.mapToCanvasPoint(e, this.stage.window.getContext().canvas.nativeCanvas);
         return {
             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) {
-        e.preventDefault();
-        const {start: start, end: end, brushSelect: brushSelect, realTime: realTime = !0} = this.attribute;
-        if (this._activeState && this._activeTag === type_1.DataZoomActiveTag.background) {
-            const pos = this.eventPosToStagePos(e);
-            this.backgroundDragZoom(this._activeCache.startPos, pos);
-        }
-        this._activeState = !1, brushSelect && this.renderDragMask(), realTime && start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), 
-        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();
     }
@@ -162,64 +171,85 @@ class DataZoom extends base_1.AbstractComponent {
             height: this._activeState && this._activeTag === type_1.DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
         }, dragMaskStyle), "rect");
     }
-    renderText() {
-        const {startTextStyle: startTextStyle, endTextStyle: endTextStyle} = this.attribute, {formatMethod: startTextFormat} = startTextStyle, restStartStyle = __rest(startTextStyle, [ "formatMethod" ]), {formatMethod: endTextFormat} = endTextStyle, restEndTextStyle = __rest(endTextStyle, [ "formatMethod" ]), {start: start, end: end} = this.state;
+    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) {
+        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();
-        this._isHorizontal ? (this._startText = this.maybeAddLabel(this._container, (0, 
-        vutils_1.merge)({}, restStartStyle, {
-            text: startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+        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
+        };
+        let startTextPosition, endTextPosition, startTextAlignStyle, endTextAlignStyle;
+        this._isHorizontal ? (startTextPosition = {
             x: position.x + start * width,
-            y: position.y + height / 2,
-            visible: this._showText,
-            pickable: !1,
-            childrenPickable: !1,
-            textStyle: {
-                textAlign: "right",
-                textBaseline: "middle"
-            }
-        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, (0, 
-        vutils_1.merge)({}, restEndTextStyle, {
-            text: endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+            y: position.y + height / 2
+        }, endTextPosition = {
             x: position.x + end * width,
-            y: position.y + height / 2,
-            visible: this._showText,
-            pickable: !1,
-            childrenPickable: !1,
-            textStyle: {
-                textAlign: "left",
-                textBaseline: "middle"
-            }
-        }), `data-zoom-end-text-${position}`)) : (this._startText = this.maybeAddLabel(this._container, (0, 
-        vutils_1.merge)({}, restStartStyle, {
-            text: startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+            y: position.y + height / 2
+        }, startTextAlignStyle = {
+            textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "left" : "right",
+            textBaseline: "middle"
+        }, endTextAlignStyle = {
+            textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "right" : "left",
+            textBaseline: "middle"
+        }) : (startTextPosition = {
             x: position.x + width / 2,
-            y: position.y + start * height,
+            y: position.y + start * height
+        }, endTextPosition = {
+            x: position.x + width / 2,
+            y: position.y + end * height
+        }, startTextAlignStyle = {
+            textAlign: "center",
+            textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "top" : "bottom"
+        }, endTextAlignStyle = {
+            textAlign: "center",
+            textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
+        }), this._startText = this.maybeAddLabel(this._container, (0, vutils_1.merge)({}, restStartTextStyle, {
+            text: startTextValue,
+            x: startTextPosition.x,
+            y: startTextPosition.y,
             visible: this._showText,
             pickable: !1,
             childrenPickable: !1,
-            textStyle: {
-                textAlign: "center",
-                textBaseline: "bottom"
-            }
+            textStyle: startTextAlignStyle
         }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, (0, 
         vutils_1.merge)({}, restEndTextStyle, {
-            text: endTextFormat ? endTextFormat(this._endValue) : this._endValue,
-            x: position.x + width / 2,
-            y: position.y + end * height,
+            text: endTextValue,
+            x: endTextPosition.x,
+            y: endTextPosition.y,
             visible: this._showText,
             pickable: !1,
             childrenPickable: !1,
-            textStyle: {
-                textAlign: "center",
-                textBaseline: "top"
-            }
-        }), `data-zoom-end-text-${position}`));
+            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 vutils_1.Bounds).set(x1, y1, x2, y2).intersects(endTextBounds)) {
+            const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
+            this._isHorizontal ? this._startText.setAttribute("dy", startTextDy + direction * Math.abs(endTextBounds.y1 - endTextBounds.y2)) : this._startText.setAttribute("dx", startTextDx + direction * Math.abs(endTextBounds.x1 - endTextBounds.x2));
+        } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
     }
     getLayoutAttrFromConfig() {
-        var _a, _b, _c, _d;
+        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 = {}} = 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;
+        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 = {
@@ -236,70 +266,84 @@ class DataZoom extends base_1.AbstractComponent {
             y: position.y
         }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
             x: position.x,
-            y: position.y + startHandlerSize
-        })), this._layoutAttrFromConfig = {
+            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;
+        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} = 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({
+        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), "rect"), (null === (_c = backgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this.setPreviewAttributes("line", group), 
-        (null === (_d = 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({
+        }, 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), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign({
+        }, 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), "rect"), (null === (_e = selectedBackgroundChartStyle.line) || void 0 === _e ? void 0 : _e.visible) && this.setSelectedPreviewAttributes("line", group), 
-        (null === (_f = selectedBackgroundChartStyle.area) || void 0 === _f ? void 0 : _f.visible) && this.setSelectedPreviewAttributes("area", group), 
-        this._showText && this.renderText(), this._isHorizontal) {
+        }, 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 === (_g = middleHandlerStyle.background) || void 0 === _g ? void 0 : _g.size) || 10;
-                this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign({
+                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 === (_h = middleHandlerStyle.background) || void 0 === _h ? void 0 : _h.style), "rect"), 
-                this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign({
+                }, 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 !== (_k = null === (_j = middleHandlerStyle.icon) || void 0 === _j ? void 0 : _j.symbolType) && void 0 !== _k ? _k : "square"
-                }, middleHandlerStyle.icon), "symbol");
+                    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({
+            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 !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), "symbol"), 
-            this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign({
+                symbolType: null !== (_t = startHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
+            }, config_1.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 !== (_m = endHandlerStyle.symbolType) && void 0 !== _m ? _m : "square"
-            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), "symbol");
+                symbolType: null !== (_v = endHandlerStyle.symbolType) && void 0 !== _v ? _v : "square"
+            }, config_1.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({
+            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,
@@ -307,7 +351,9 @@ class DataZoom extends base_1.AbstractComponent {
                 fill: "white",
                 fillOpacity: 0,
                 zIndex: 999
-            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign({
+            }, config_1.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,
@@ -315,37 +361,46 @@ class DataZoom extends base_1.AbstractComponent {
                 fill: "white",
                 fillOpacity: 0,
                 zIndex: 999
-            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), "rect");
+            }, config_1.DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+                pickable: !zoomLock
+            }), "rect");
         } else {
             if (middleHandlerStyle.visible) {
-                const middleHandlerBackgroundSize = (null === (_o = middleHandlerStyle.background) || void 0 === _o ? void 0 : _o.size) || 10;
-                this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign({
+                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 === (_p = middleHandlerStyle.background) || void 0 === _p ? void 0 : _p.style), "rect"), 
-                this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign({
+                }, 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 !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square",
+                    symbolType: null !== (_3 = null === (_2 = middleHandlerStyle.icon) || void 0 === _2 ? void 0 : _2.symbolType) && void 0 !== _3 ? _3 : "square",
                     strokeBoundsBuffer: 0
-                }, middleHandlerStyle.icon), "symbol");
+                }, 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({
+            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 !== (_s = startHandlerStyle.symbolType) && void 0 !== _s ? _s : "square"
-            }, config_1.DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign({
+                symbolType: null !== (_6 = startHandlerStyle.symbolType) && void 0 !== _6 ? _6 : "square"
+            }, config_1.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 !== (_t = endHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
-            }, config_1.DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), "symbol");
+                symbolType: null !== (_8 = endHandlerStyle.symbolType) && void 0 !== _8 ? _8 : "square"
+            }, config_1.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({
+            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,
@@ -353,7 +408,9 @@ class DataZoom extends base_1.AbstractComponent {
                 fill: "white",
                 fillOpacity: 0,
                 zIndex: 999
-            }, config_1.DEFAULT_HANDLER_ATTR_MAP.vertical), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign({
+            }, config_1.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,
@@ -361,8 +418,11 @@ class DataZoom extends base_1.AbstractComponent {
                 fill: "white",
                 fillOpacity: 0,
                 zIndex: 999
-            }, config_1.DEFAULT_HANDLER_ATTR_MAP.vertical), "rect");
+            }, config_1.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();
@@ -391,22 +451,24 @@ class DataZoom extends base_1.AbstractComponent {
         };
     }
     getPreviewLinePoints() {
-        const previewPoints = this._previewData.map((d => ({
+        let previewPoints = this._previewData.map((d => ({
             x: this._previewPointsX && this._previewPointsX(d),
             y: this._previewPointsY && this._previewPointsY(d)
         })));
         if (0 === previewPoints.length) return previewPoints;
+        this.attribute.tolerance && (previewPoints = (0, vrender_core_1.flatten_simplify)(previewPoints, this.attribute.tolerance, !1));
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
     }
     getPreviewAreaPoints() {
-        const previewPoints = this._previewData.map((d => ({
+        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;
+        this.attribute.tolerance && (previewPoints = (0, vrender_core_1.flatten_simplify)(previewPoints, this.attribute.tolerance, !1));
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
     }