@visactor/vrender-components 0.0.38-brush.2-alpha.0

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

@@ -0,0 +1,193 @@
+import { FederatedPointerEvent, IGroup } from '@visactor/vrender';
+import { IPointLike } from '@visactor/vutils';
+import { AbstractComponent } from '../core/base';
+import { Tag, TagAttributes } from '../tag';
+import { DataZoomAttributes } from './type';
+export declare class DataZoom extends AbstractComponent<Required<DataZoomAttributes>> {
+    name: string;
+    static defaultAttributes: {
+        orient: string;
+        showDetail: string;
+        brushSelect: boolean;
+        backgroundStyle: {
+            fill: boolean;
+            fillColor: string;
+            strokeColor: string;
+            lineWidth: number;
+            borderRadius: number;
+        };
+        dragMaskStyle: {
+            fill: boolean;
+            fillColor: string;
+            fillOpacity: number;
+        };
+        backgroundChartStyle: {
+            area: {
+                visible: boolean;
+                strokeColor: string;
+                lineWidth: number;
+                fillColor: string;
+                fill: boolean;
+            };
+            line: {
+                visible: boolean;
+                strokeColor: string;
+                lineWidth: number;
+            };
+        };
+        selectedBackgroundStyle: {
+            fill: boolean;
+            fillColor: string;
+            fillOpacity: number;
+        };
+        selectedBackgroundChartStyle: {
+            area: {
+                visible: boolean;
+                strokeColor: string;
+                lineWidth: number;
+                fillColor: string;
+                fill: boolean;
+            };
+            line: {
+                visible: boolean;
+                strokeColor: string;
+                lineWidth: number;
+            };
+        };
+        middleHandlerStyle: {
+            visible: boolean;
+            background: {
+                size: number;
+                style: {
+                    fill: boolean;
+                    fillColor: string;
+                    strokeColor: string;
+                    borderRadius: number;
+                };
+            };
+            icon: {
+                size: number;
+                fill: boolean;
+                fillColor: string;
+                strokeColor: string;
+                symbolType: string;
+                lineWidth: number;
+            };
+        };
+        startHandlerStyle: {
+            symbolType: string;
+            fill: boolean;
+            fillColor: string;
+            strokeColor: string;
+            lineWidth: number;
+        };
+        endHandlerStyle: {
+            symbolType: string;
+            fill: boolean;
+            fillColor: string;
+            strokeColor: string;
+            lineWidth: number;
+        };
+        startTextStyle: {
+            padding: number;
+            textStyle: {
+                fontSize: number;
+                fill: string;
+            };
+        };
+        endTextStyle: {
+            padding: number;
+            textStyle: {
+                fontSize: number;
+                fill: string;
+            };
+        };
+    };
+    private _isHorizontal;
+    private _background;
+    private _container;
+    private _startHandler;
+    private _middleHandlerSymbol;
+    private _middleHandlerRect;
+    private _endHandler;
+    private _selectedBackground;
+    private _dragMask;
+    private _startText;
+    private _endText;
+    private _startValue;
+    private _endValue;
+    private _showText;
+    private _previewData;
+    private _previewGroup;
+    private _previewLine;
+    private _previewArea;
+    private _selectedPreviewGroupClip;
+    private _selectedPreviewGroup;
+    private _selectedPreviewLine;
+    private _selectedPreviewArea;
+    protected _activeTag: string;
+    protected _activeItem: any;
+    protected _activeState: boolean;
+    protected _activeCache: {
+        startPos: IPointLike;
+        lastPos: IPointLike;
+    };
+    protected _layoutCache: {
+        attPos: 'x' | 'y';
+        attSize: 'width' | 'height';
+        max: number;
+    };
+    readonly state: {
+        start: number;
+        end: number;
+    };
+    private _previewCallbackX;
+    private _previewCallbackY;
+    private _previewCallbackX1;
+    private _previewCallbackY1;
+    private _updateStateCallback;
+    private _statePointToData;
+    constructor(attributes: DataZoomAttributes);
+    protected bindEvents(): void;
+    protected dragMaskSize(): number;
+    protected eventPosToStagePos(e: FederatedPointerEvent): {
+        x: number;
+        y: number;
+    };
+    private _onHandlerPointerDown;
+    private _onHandlerPointerMove;
+    private _onHandlerPointerUp;
+    private _onHandlerPointerEnter;
+    private _onHandlerPointerLeave;
+    protected backgroundDragZoom(startPos: IPointLike, endPos: IPointLike): void;
+    protected moveZoomWithMiddle(middle: number): void;
+    protected renderDragMask(): void;
+    protected renderText(): void;
+    protected getLayoutAttrFromConfig(): {
+        position: IPointLike;
+        width: number;
+        height: number;
+    };
+    protected render(): void;
+    computeBasePoints(): {
+        basePointStart: any;
+        basePointEnd: any;
+    };
+    protected getPreviewLinePoints(): any;
+    protected getPreviewAreaPoints(): any;
+    protected setPreviewAttributes(type: 'line' | 'area', group: IGroup): void;
+    protected setSelectedPreviewAttributes(type: 'area' | 'line', group: IGroup): void;
+    protected maybeAddLabel(container: IGroup, attributes: TagAttributes, name: string): Tag;
+    setStartAndEnd(start?: number, end?: number): void;
+    setPreviewData(data: any[]): void;
+    setText(text: string, tag: 'start' | 'end'): void;
+    getStartValue(): string | number;
+    getEndTextValue(): string | number;
+    getMiddleHandlerSize(): number;
+    setUpdateStateCallback(callback: (start: number, end: number) => void): void;
+    setPreviewCallbackX(callback: (d: any) => number): void;
+    setPreviewCallbackY(callback: (d: any) => number): void;
+    setPreviewCallbackX1(callback: (d: any) => number): void;
+    setPreviewCallbackY1(callback: (d: any) => number): void;
+    setStatePointToData(callback: (state: number) => any): void;
+}

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

@@ -0,0 +1,444 @@
+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 { global } from "@visactor/vrender";
+
+import { array, isFunction, isValid, merge } from "@visactor/vutils";
+
+import { AbstractComponent } from "../core/base";
+
+import { Tag } from "../tag";
+
+import { DataZoomActiveTag, DEFAULT_DATA_ZOOM_ATTRIBUTES } from "./config";
+
+export class DataZoom extends AbstractComponent {
+    constructor(attributes) {
+        super(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 = {
+            start: 0,
+            end: 1
+        }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
+            "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._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 => {
+            const {start: start, end: end, brushSelect: brushSelect} = this.attribute, pos = this.eventPosToStagePos(e), {attPos: attPos, max: max} = this._layoutCache, dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
+            this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? this.state.start + dis > this.state.end ? (this.state.start = this.state.end, 
+            this.state.end = this.state.start + dis, this._activeTag = DataZoomActiveTag.endHandler) : this.state.start = this.state.start + dis : this._activeTag === DataZoomActiveTag.endHandler && (this.state.end + dis < this.state.start ? (this.state.end = this.state.start, 
+            this.state.start = this.state.end + dis, this._activeTag = DataZoomActiveTag.startHandler) : this.state.end = this.state.end + dis), 
+            this._activeCache.lastPos = pos), this.state.start = Math.min(Math.max(this.state.start, 0), 1), 
+            this.state.end = Math.min(Math.max(this.state.end, 0), 1), brushSelect && this.renderDragMask(), 
+            start === this.state.start && end === this.state.end || (this.setAttributes({
+                start: this.state.start,
+                end: this.state.end
+            }), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end));
+        };
+        const {start: start, end: end, size: size, orient: orient, showDetail: showDetail, position: position, previewData: previewData, previewCallbackX: previewCallbackX, previewCallbackY: previewCallbackY, previewCallbackX1: previewCallbackX1, previewCallbackY1: previewCallbackY1} = this.attribute, {width: width, height: height} = size;
+        start && (this.state.start = start), end && (this.state.end = end), this._isHorizontal = "top" === orient || "bottom" === orient, 
+        this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", 
+        this._layoutCache.attSize = this._isHorizontal ? "width" : "height", this._activeCache.startPos = position, 
+        this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, 
+        previewData && (this._previewData = previewData), isFunction(previewCallbackX) && (this._previewCallbackX = previewCallbackX), 
+        isFunction(previewCallbackY) && (this._previewCallbackY = previewCallbackY), isFunction(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1), 
+        isFunction(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1);
+    }
+    bindEvents() {
+        const {showDetail: showDetail, brushSelect: brushSelect} = this.attribute;
+        this._startHandler && this._startHandler.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "start"))), 
+        this._endHandler && this._endHandler.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "end"))), 
+        this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", (e => this._onHandlerPointerDown(e, "middleSymbol"))), 
+        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))), 
+        "browser" === global.env && (global.addEventListener("pointermove", this._onHandlerPointerMove.bind(this)), 
+        global.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), this.addEventListener("pointermove", this._onHandlerPointerMove), 
+        this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerside", this._onHandlerPointerUp), 
+        "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), 
+        this.addEventListener("pointerleave", this._onHandlerPointerLeave));
+    }
+    dragMaskSize() {
+        const {position: position} = this.attribute, {attPos: attPos, max: max} = this._layoutCache;
+        return this._activeCache.lastPos[attPos] - position[attPos] > max ? max + position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - position[attPos] < 0 ? position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
+    }
+    eventPosToStagePos(e) {
+        var _a, _b, _c;
+        const stagePosition = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.window.getBoundingClientRect();
+        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)
+        };
+    }
+    _onHandlerPointerUp(e) {
+        const {start: start, end: end, brushSelect: brushSelect} = 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(), start === this.state.start && end === this.state.end || (this.setAttributes({
+            start: this.state.start,
+            end: this.state.end
+        }), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end));
+    }
+    _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.state.start = start, 
+        this.state.end = end);
+    }
+    moveZoomWithMiddle(middle) {
+        let offset = middle - (this.state.start + this.state.end) / 2;
+        0 !== offset && (offset > 0 ? this.state.end + offset > 1 && (offset = 1 - this.state.end) : offset < 0 && this.state.start + offset < 0 && (offset = -this.state.start), 
+        this.state.start = this.state.start + offset, this.state.end = this.state.end + offset);
+    }
+    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: this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x,
+            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: this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y,
+            width: width,
+            height: this._activeState && this._activeTag === 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;
+        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, merge({}, restStartStyle, {
+            text: startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+            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, merge({}, restEndTextStyle, {
+            text: endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+            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, merge({}, restStartStyle, {
+            text: startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+            x: position.x + width / 2,
+            y: position.y + start * height,
+            visible: this._showText,
+            pickable: !1,
+            childrenPickable: !1,
+            textStyle: {
+                textAlign: "center",
+                textBaseline: "bottom"
+            }
+        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge({}, restEndTextStyle, {
+            text: endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+            x: position.x + width / 2,
+            y: position.y + end * height,
+            visible: this._showText,
+            pickable: !1,
+            childrenPickable: !1,
+            textStyle: {
+                textAlign: "center",
+                textBaseline: "top"
+            }
+        }), `data-zoom-end-text-${position}`));
+    }
+    getLayoutAttrFromConfig() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const {position: positionConfig, size: size, orient: orient, middleHandlerStyle: middleHandlerStyle} = this.attribute, {width: widthConfig, height: heightConfig} = size;
+        let width, height, position;
+        return (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) ? this._isHorizontal ? (width = widthConfig, 
+        height = heightConfig - (null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10), 
+        position = {
+            x: positionConfig.x,
+            y: positionConfig.y + (null !== (_d = null === (_c = middleHandlerStyle.background) || void 0 === _c ? void 0 : _c.size) && void 0 !== _d ? _d : 10)
+        }) : (width = widthConfig - (null !== (_f = null === (_e = middleHandlerStyle.background) || void 0 === _e ? void 0 : _e.size) && void 0 !== _f ? _f : 10), 
+        height = heightConfig, position = {
+            x: positionConfig.x + ("left" === orient ? null !== (_h = null === (_g = middleHandlerStyle.background) || void 0 === _g ? void 0 : _g.size) && void 0 !== _h ? _h : 10 : 0),
+            y: positionConfig.y
+        }) : (width = widthConfig, height = heightConfig, position = positionConfig), {
+            position: position,
+            width: width,
+            height: height
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        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({
+            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), 
+        brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", 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({
+            x: position.x,
+            y: position.y + start * height,
+            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.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"));
+    }
+    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
+        };
+    }
+    getPreviewLinePoints() {
+        const previewPoints = this._previewData.map((d => ({
+            x: this._previewCallbackX && this._previewCallbackX(d),
+            y: this._previewCallbackY && this._previewCallbackY(d)
+        })));
+        if (0 === previewPoints.length) return previewPoints;
+        const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
+        return basePointStart.concat(previewPoints).concat(basePointEnd);
+    }
+    getPreviewAreaPoints() {
+        const previewPoints = this._previewData.map((d => ({
+            x: this._previewCallbackX && this._previewCallbackX(d),
+            y: this._previewCallbackY && this._previewCallbackY(d),
+            x1: this._previewCallbackX1 && this._previewCallbackX1(d),
+            y1: this._previewCallbackY1 && this._previewCallbackY1(d)
+        })));
+        if (0 === previewPoints.length) return previewPoints;
+        const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
+        return basePointStart.concat(previewPoints).concat(basePointEnd);
+    }
+    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
+        }, null == backgroundChartStyle ? void 0 : backgroundChartStyle.line)), "area" === type && this._previewArea.setAttributes(Object.assign({
+            points: this.getPreviewAreaPoints(),
+            curveType: "basis",
+            pickable: !1
+        }, null == backgroundChartStyle ? void 0 : backgroundChartStyle.area));
+    }
+    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 {position: position, size: size, selectedBackgroundChartStyle: selectedBackgroundChartStyle} = this.attribute, {width: width, height: height} = size, {start: start, end: end} = this.state, {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
+        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
+        }, null == selectedBackgroundChartStyle ? void 0 : selectedBackgroundChartStyle.line)), 
+        "area" === type && this._selectedPreviewArea.setAttributes(Object.assign({
+            points: this.getPreviewAreaPoints(),
+            curveType: "basis",
+            pickable: !1
+        }, null == selectedBackgroundChartStyle ? void 0 : selectedBackgroundChartStyle.area));
+    }
+    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;
+    }
+    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.setAttributes({
+            start: start,
+            end: end
+        }));
+    }
+    setPreviewData(data) {
+        this._previewData = data;
+    }
+    setText(text, tag) {
+        "start" === tag ? this._startText.setAttribute("text", text) : this._endText.setAttribute("text", text);
+    }
+    getStartValue() {
+        return this._startValue;
+    }
+    getEndTextValue() {
+        return this._endValue;
+    }
+    getMiddleHandlerSize() {
+        var _a, _b, _c, _d;
+        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);
+    }
+    setPreviewCallbackX(callback) {
+        isFunction(callback) && (this._previewCallbackX = callback);
+    }
+    setPreviewCallbackY(callback) {
+        isFunction(callback) && (this._previewCallbackY = callback);
+    }
+    setPreviewCallbackX1(callback) {
+        isFunction(callback) && (this._previewCallbackX1 = callback);
+    }
+    setPreviewCallbackY1(callback) {
+        isFunction(callback) && (this._previewCallbackY1 = callback);
+    }
+    setStatePointToData(callback) {
+        isFunction(callback) && (this._statePointToData = callback);
+    }
+}
+
+DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
+//# sourceMappingURL=data-zoom.js.map