@visactor/vrender-components 0.18.0-alpha.1 → 0.18.0-alpha.3

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

@@ -8,7 +8,7 @@ var __rest = this && this.__rest || function(s, e) {
     return t;
 };
 
-import { vglobal } from "@visactor/vrender-core";
+import { flatten_simplify, vglobal } from "@visactor/vrender-core";
 
 import { Bounds, array, clamp, debounce, isFunction, isValid, merge, throttle } from "@visactor/vutils";
 
@@ -67,11 +67,10 @@ export class DataZoom extends AbstractComponent {
             this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), 
             this._activeCache.lastPos = this.eventPosToStagePos(e), "browser" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
                 capture: !0
-            }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
-            this.addEventListener("pointermove", this._onHandlerPointerMove, {
+            }), 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;
@@ -79,13 +78,31 @@ export class DataZoom extends AbstractComponent {
             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), 
-            this._dispatchEvent("change", {
+            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.attribute.delayTime);
+            });
+        }, 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 === 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" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+                capture: !0
+            }), 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, 
         this.setPropsFromAttrs();
@@ -129,25 +146,6 @@ export class DataZoom extends AbstractComponent {
             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 === 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" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-        }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp.bind(this))), 
-        this.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-        });
-    }
     _onHandlerPointerEnter(e) {
         e.stopPropagation(), this._showText = !0, this.renderText();
     }
@@ -252,9 +250,9 @@ export class DataZoom extends AbstractComponent {
         } 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 = {
@@ -271,15 +269,17 @@ export class DataZoom extends 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, 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({
@@ -289,9 +289,9 @@ export class DataZoom extends AbstractComponent {
             height: height,
             cursor: brushSelect ? "crosshair" : "auto"
         }, backgroundStyle), {
-            pickable: !zoomLock
-        }), "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), 
+            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,
@@ -299,7 +299,7 @@ export class DataZoom extends AbstractComponent {
             height: height,
             cursor: brushSelect ? "crosshair" : "move"
         }, selectedBackgroundStyle), {
-            pickable: !zoomLock
+            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,
@@ -307,43 +307,43 @@ export class DataZoom extends AbstractComponent {
             height: (end - start) * height,
             cursor: brushSelect ? "crosshair" : "move"
         }, selectedBackgroundStyle), {
-            pickable: !zoomLock
-        }), "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), 
+            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;
+                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), {
-                    pickable: !zoomLock
+                }, 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"
+                    symbolType: null !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square"
                 }, middleHandlerStyle.icon), {
-                    pickable: !zoomLock
+                    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 !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
+                symbolType: null !== (_t = startHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
             }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
-                pickable: !zoomLock
+                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"
+                symbolType: null !== (_v = endHandlerStyle.symbolType) && void 0 !== _v ? _v : "square"
             }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
-                pickable: !zoomLock
+                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({
@@ -369,38 +369,38 @@ export class DataZoom extends AbstractComponent {
             }), "rect");
         } else {
             if (middleHandlerStyle.visible) {
-                const middleHandlerBackgroundSize = (null === (_o = middleHandlerStyle.background) || void 0 === _o ? void 0 : _o.size) || 10;
+                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), {
-                    pickable: !zoomLock
+                }, 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), {
-                    pickable: !zoomLock
+                    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 !== (_s = startHandlerStyle.symbolType) && void 0 !== _s ? _s : "square"
+                symbolType: null !== (_6 = startHandlerStyle.symbolType) && void 0 !== _6 ? _6 : "square"
             }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
-                pickable: !zoomLock
+                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"
+                symbolType: null !== (_8 = endHandlerStyle.symbolType) && void 0 !== _8 ? _8 : "square"
             }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
-                pickable: !zoomLock
+                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({
@@ -454,22 +454,24 @@ export class DataZoom extends 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 = 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 = flatten_simplify(previewPoints, this.attribute.tolerance, !1));
         const {basePointStart: basePointStart, basePointEnd: basePointEnd} = this.computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
     }