@visactor/vchart 1.13.9-alpha.4 → 1.13.9-alpha.6

package/build/index.es.js

@@ -31425,10 +31425,6 @@ const SCROLLBAR_START_EVENT = "scrollDown";
 const SCROLLBAR_EVENT$1 = "scrollDrag";
 const SCROLLBAR_END_EVENT$1 = "scrollUp";
 
-function getEndTriggersOfDrag() {
-  return "browser" === vglobal.env ? ["pointerup", "pointerleave", "pointercancel"] : ["pointerup", "pointerleave", "pointerupoutside"];
-}
-
 const delayMap$3 = {
   debounce: debounce,
   throttle: throttle
@@ -31461,7 +31457,6 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       }
       this.setScrollRange([currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2], !1), this.stage && !this.stage.autoRender && this.stage.renderNextFrame();
     }, this._onSliderPointerDown = e => {
-      this._clearDragEvents();
       const {
         stopSliderDownPropagation = !0
       } = this.attribute;
@@ -31476,14 +31471,11 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       this._prePos = "horizontal" === direction ? x : y, this._dispatchEvent(SCROLLBAR_START_EVENT, {
         pos: this._prePos,
         event: e
-      });
-      const triggers = getEndTriggersOfDrag(),
-        obj = "browser" === vglobal.env ? vglobal : this.stage;
-      obj.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+      }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
         capture: !0
-      }), triggers.forEach(trigger => {
-        obj.addEventListener(trigger, this._onSliderPointerUp);
-      });
+      }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+        capture: !0
+      }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
     }, this._computeScrollValue = e => {
       const {
           direction: direction
@@ -31520,7 +31512,11 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
         pre: preRange,
         value: clampRange$1(range, limitRange[0], limitRange[1])
-      }), this._clearDragEvents();
+      }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+        capture: !0
+      }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+        capture: !0
+      }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
     };
   }
   setScrollRange(range) {
@@ -31669,15 +31665,6 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       sliderSize = this._sliderSize;
     return "horizontal" === direction ? clampRange$1([x1 + min * width, x1 + max * width], x1, width - sliderSize) : clampRange$1([y1 + min * height, y1 + max * height], y1, height - sliderSize);
   }
-  _clearDragEvents() {
-    const triggers = getEndTriggersOfDrag(),
-      obj = "browser" === vglobal.env ? vglobal : this.stage;
-    obj.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-      capture: !0
-    }), triggers.forEach(trigger => {
-      obj.removeEventListener(trigger, this._onSliderPointerUp);
-    });
-  }
   _reset() {
     this._sliderRenderBounds = null, this._sliderLimitRange = null;
   }
@@ -39027,13 +39014,10 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
       start: 0,
       end: 1
     }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
-      this._clearDragEvents(), e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e);
-      const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
-        triggers = getEndTriggersOfDrag();
-      evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
+      e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e), "browser" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
+        capture: !0
+      }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)), this.addEventListener("pointermove", this._onHandlerPointerMove, {
         capture: !0
-      }), triggers.forEach(trigger => {
-        evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
       });
     }, this._pointerMove = e => {
       e.stopPropagation();
@@ -39074,7 +39058,11 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         start: this.state.start,
         end: this.state.end,
         tag: this._activeTag
-      }), this._clearDragEvents();
+      }), "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,
@@ -39093,7 +39081,7 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
     } = this.attribute;
     this._startHandlerMask && this._startHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "start")), this._endHandlerMask && this._endHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "end")), this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleSymbol")), this._middleHandlerRect && this._middleHandlerRect.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
     const selectedTag = brushSelect ? "background" : "middleRect";
-    this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && this._background && this._background.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave));
+    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)), this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave));
   }
   dragMaskSize() {
     const {
@@ -39124,15 +39112,6 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
       y: 0
     };
   }
-  _clearDragEvents() {
-    const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
-      triggers = getEndTriggersOfDrag();
-    evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
-      capture: !0
-    }), triggers.forEach(trigger => {
-      evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
-    });
-  }
   _onHandlerPointerEnter(e) {
     e.stopPropagation(), this._showText = !0, this.renderText();
   }
@@ -42617,19 +42596,16 @@ class Slider extends AbstractComponent {
       } = this.attribute;
       tooltip && tooltip.alwaysShow || (this._tooltipState = null, this._tooltipShape && this._tooltipShape.setAttribute("visible", !1), this._tooltipText && this._tooltipText.setAttribute("visible", !1), this._dispatchTooltipEvent("sliderTooltipHide"));
     }, this._onHandlerPointerdown = e => {
-      e.stopPropagation(), this._clearAllDragEvents(), this._isChanging = !0;
+      e.stopPropagation(), this._isChanging = !0;
       const {
         x: x,
         y: y
       } = this.stage.eventPointTransform(e);
-      this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y;
-      const triggers = getEndTriggersOfDrag(),
-        obj = "browser" === vglobal.env ? vglobal : this.stage;
-      obj.addEventListener("pointermove", this._onHandlerPointerMove, {
+      this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
         capture: !0
-      }), triggers.forEach(trigger => {
-        obj.addEventListener(trigger, this._onHandlerPointerUp);
-      });
+      }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.addEventListener("pointermove", this._onHandlerPointerMove, {
+        capture: !0
+      }), this.stage.addEventListener("pointerup", this._onHandlerPointerUp), this.stage.addEventListener("pointerupoutside", this._onHandlerPointerUp));
     }, this._onHandlerPointerMove = e => {
       var _a, _b;
       e.stopPropagation(), this._isChanging = !0;
@@ -42653,21 +42629,22 @@ class Slider extends AbstractComponent {
         currentValue = this.calculateValueByPos(newPos);
       "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
     }, this._onHandlerPointerUp = e => {
-      e.preventDefault(), this._isChanging = !1, this._currentHandler = null, this._clearAllDragEvents();
+      e.preventDefault(), this._isChanging = !1, this._currentHandler = null, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+        capture: !0
+      }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.removeEventListener("pointermove", this._onHandlerPointerMove, {
+        capture: !0
+      }), this.stage.removeEventListener("pointerup", this._onHandlerPointerUp), this.stage.removeEventListener("pointerupoutside", this._onHandlerPointerUp));
     }, this._onTrackPointerdown = e => {
-      e.stopPropagation(), this._clearAllDragEvents(), this._isChanging = !0;
+      e.stopPropagation(), this._isChanging = !0;
       const {
         x: x,
         y: y
       } = this.stage.eventPointTransform(e);
-      this._prePos = this._isHorizontal ? x : y;
-      const triggers = getEndTriggersOfDrag(),
-        obj = "browser" === vglobal.env ? vglobal : this.stage;
-      obj.addEventListener("pointermove", this._onTrackPointerMove, {
+      this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove, {
         capture: !0
-      }), triggers.forEach(trigger => {
-        obj.addEventListener(trigger, this._onTrackPointerUp);
-      });
+      }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.addEventListener("pointermove", this._onTrackPointerMove, {
+        capture: !0
+      }), this.stage.addEventListener("pointerup", this._onTrackPointerUp), this.stage.addEventListener("pointerupoutside", this._onTrackPointerUp));
     }, this._onTrackPointerMove = e => {
       e.stopPropagation(), this._isChanging = !0;
       const {
@@ -42710,9 +42687,13 @@ class Slider extends AbstractComponent {
       }
       this._prePos = currentPos, this._dispatchChangeEvent();
     }, this._onTrackPointerUp = e => {
-      e.preventDefault(), this._isChanging = !1, this._clearAllDragEvents();
+      e.preventDefault(), this._isChanging = !1, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove, {
+        capture: !0
+      }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.removeEventListener("pointermove", this._onTrackPointerMove, {
+        capture: !0
+      }), this.stage.removeEventListener("pointerup", this._onTrackPointerUp), this.stage.removeEventListener("pointerupoutside", this._onTrackPointerUp));
     }, this._onRailPointerDown = e => {
-      e.stopPropagation(), this._clearAllDragEvents(), this._isChanging = !0;
+      e.stopPropagation(), this._isChanging = !0;
       const {
         railWidth: railWidth,
         railHeight: railHeight,
@@ -43038,19 +43019,6 @@ class Slider extends AbstractComponent {
   _bindTooltipEvents() {
     this.attribute.disableTriggerEvent || (this._mainContainer.addEventListener("pointerenter", this._onTooltipShow), this._mainContainer.addEventListener("pointermove", this._onTooltipUpdate), this._mainContainer.addEventListener("pointerleave", this._onTooltipHide));
   }
-  _clearAllDragEvents() {
-    const triggers = getEndTriggersOfDrag(),
-      obj = "browser" === vglobal.env ? vglobal : this.stage;
-    obj.removeEventListener("pointermove", this._onHandlerPointerMove, {
-      capture: !0
-    }), triggers.forEach(trigger => {
-      obj.removeEventListener(trigger, this._onHandlerPointerUp);
-    }), obj.removeEventListener("pointermove", this._onTrackPointerMove, {
-      capture: !0
-    }), triggers.forEach(trigger => {
-      obj.removeEventListener(trigger, this._onTrackPointerUp);
-    });
-  }
   _updateTrack() {
     const {
         inverse: inverse,
@@ -63688,7 +63656,7 @@ const registerVChartCore = () => {
 };
 registerVChartCore();
 
-const version = "1.13.9-alpha.4";
+const version = "1.13.9-alpha.6";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -71100,58 +71068,83 @@ class BaseChart extends CompilableBase {
             }
         });
     }
-    _setStateInDatum(stateKey, checkReverse, datum, filter, region) {
+    filterGraphicsByDatum(datum, opt = {}) {
+        var _a;
         datum = datum ? array(datum) : null;
         const keys = !datum ? null : Object.keys(datum[0]);
-        this.getRegionsInQuerier(region).forEach(r => {
-            if (!datum) {
-                r.interaction.clearEventElement(stateKey, true);
-                return;
-            }
-            r.getSeries().forEach(s => {
-                s.getMarks().forEach(m => {
-                    if (!m.getProduct()) {
-                        return;
-                    }
-                    if (!filter || (isFunction$1(filter) && filter(s, m))) {
-                        const isCollect = m.getProduct().isCollectionMark();
-                        const elements = m.getProduct().elements;
-                        let pickElements = [];
-                        if (isCollect) {
-                            pickElements = elements.filter(e => {
-                                const elDatum = e.getDatum();
-                                datum.every((d, index) => keys.every(k => d[k] == elDatum[index][k]));
-                            });
+        const allElements = [];
+        const getDatumOfElement = (_a = opt.getDatum) !== null && _a !== void 0 ? _a : ((el) => el.getDatum());
+        this.getRegionsInQuerier(opt.region).forEach(r => {
+            const pickElements = [];
+            datum &&
+                r.getSeries().forEach(s => {
+                    s.getMarks().forEach(m => {
+                        if (!m.getProduct()) {
+                            return;
                         }
-                        else {
-                            if (datum.length > 1) {
-                                const datumTemp = datum.slice();
-                                pickElements = elements.filter(e => {
-                                    if (datumTemp.length === 0) {
-                                        return false;
-                                    }
-                                    const elDatum = e.getDatum();
-                                    const index = datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k]));
-                                    if (index >= 0) {
-                                        datumTemp.splice(index, 1);
-                                        return true;
+                        if (!opt.filter || (isFunction$1(opt.filter) && opt.filter(s, m))) {
+                            const isCollect = m.getProduct().isCollectionMark();
+                            const elements = m.getProduct().elements;
+                            if (isCollect) {
+                                elements.filter(e => {
+                                    const elDatum = getDatumOfElement(e, m, s, r);
+                                    const isPick = elDatum && datum.every((d, index) => keys.every(k => d[k] == elDatum[index][k]));
+                                    if (isPick) {
+                                        pickElements.push(e);
+                                        allElements.push(e);
+                                        opt.callback && opt.callback(e, m, s, r);
                                     }
-                                    return false;
                                 });
                             }
                             else {
-                                const el = elements.find(e => keys.every(k => datum[0][k] == e.getDatum()[k]));
-                                el && (pickElements = [el]);
+                                if (datum.length > 1) {
+                                    const datumTemp = datum.slice();
+                                    elements.forEach(e => {
+                                        const elDatum = getDatumOfElement(e, m, s, r);
+                                        const index = elDatum && datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k]));
+                                        if (index >= 0) {
+                                            datumTemp.splice(index, 1);
+                                            pickElements.push(e);
+                                            allElements.push(e);
+                                            opt.callback && opt.callback(e, m, s, r);
+                                        }
+                                    });
+                                }
+                                else {
+                                    const el = elements.find(e => {
+                                        const elDatum = getDatumOfElement(e, m, s, r);
+                                        return elDatum && keys.every(k => datum[0][k] == elDatum[k]);
+                                    });
+                                    if (el) {
+                                        pickElements.push(el);
+                                        allElements.push(el);
+                                        opt.callback && opt.callback(el, m, s, r);
+                                    }
+                                }
                             }
                         }
-                        pickElements.forEach(element => {
-                            r.interaction.startInteraction(stateKey, element);
-                        });
-                    }
+                    });
                 });
-            });
-            if (checkReverse) {
-                r.interaction.reverseEventElement(stateKey);
+            opt.regionCallback && opt.regionCallback(pickElements, r);
+        });
+        return allElements;
+    }
+    _setStateInDatum(stateKey, checkReverse, datum, filter, region) {
+        this.filterGraphicsByDatum(datum, {
+            filter,
+            region,
+            regionCallback: (elements, r) => {
+                if (!datum) {
+                    r.interaction.clearEventElement(stateKey, true);
+                }
+                else if (elements.length) {
+                    elements.forEach(e => {
+                        r.interaction.startInteraction(stateKey, e);
+                    });
+                    if (checkReverse) {
+                        r.interaction.reverseEventElement(stateKey);
+                    }
+                }
             }
         });
     }
@@ -92010,49 +92003,40 @@ class SankeyChart extends BaseChart {
     }
     _setStateInDatum(stateKey, checkReverse, datum, filter, region) {
         const activeDatum = isArray$1(datum) ? datum[0] : datum;
-        const keys = !activeDatum ? null : Object.keys(activeDatum);
-        this.getRegionsInQuerier(region).forEach(r => {
-            if (!activeDatum) {
-                r.interaction.clearEventElement(stateKey, true);
-                return;
-            }
-            let hasPick = false;
-            r.getSeries().forEach(s => {
-                var _a, _b;
-                let activeNodeOrLink = null;
-                s.getMarksWithoutRoot().forEach(m => {
-                    if (m.type === 'text') {
-                        return;
-                    }
-                    let pickElement = null;
-                    const mark = m.getProduct();
-                    if (!mark) {
-                        return;
-                    }
-                    if (!filter || (isFunction$1(filter) && filter(s, m))) {
-                        pickElement = mark.elements.find((e) => keys.every(k => {
-                            var _a;
-                            let datum = (_a = e.getDatum()) === null || _a === void 0 ? void 0 : _a.datum;
-                            if (isArray$1(datum)) {
-                                datum = datum[0];
-                            }
-                            return activeDatum[k] == (datum === null || datum === void 0 ? void 0 : datum[k]);
-                        }));
-                    }
-                    if (pickElement) {
-                        hasPick = true;
-                        r.interaction.startInteraction(stateKey, pickElement);
-                        if (mark.id().includes('node') || mark.id().includes('link')) {
-                            activeNodeOrLink = pickElement;
-                        }
+        const markFilter = (series, mark) => {
+            return mark.type !== 'text' && mark.getProduct() && (!filter || filter(series, mark));
+        };
+        this.filterGraphicsByDatum(activeDatum, {
+            filter: markFilter,
+            region,
+            getDatum: e => {
+                var _a;
+                let d = (_a = e.getDatum()) === null || _a === void 0 ? void 0 : _a.datum;
+                if (isArray$1(d)) {
+                    d = d[0];
+                }
+                return d;
+            },
+            callback: (element, mark, s, r) => {
+                var _a, _b, _c;
+                const id = (_a = mark.getProduct()) === null || _a === void 0 ? void 0 : _a.id();
+                if (id && (id.includes('node') || id.includes('link'))) {
+                    (_c = (_b = s)._handleEmphasisElement) === null || _c === void 0 ? void 0 : _c.call(_b, { item: element });
+                }
+            },
+            regionCallback: (elements, r) => {
+                if (!activeDatum) {
+                    r.interaction.clearEventElement(stateKey, true);
+                    return;
+                }
+                else if (elements.length) {
+                    elements.forEach(e => {
+                        r.interaction.startInteraction(stateKey, e);
+                    });
+                    if (checkReverse) {
+                        r.interaction.reverseEventElement(stateKey);
                     }
-                });
-                if (activeNodeOrLink) {
-                    (_b = (_a = s)._handleEmphasisElement) === null || _b === void 0 ? void 0 : _b.call(_a, { item: activeNodeOrLink });
                 }
-            });
-            if (checkReverse && hasPick) {
-                r.interaction.reverseEventElement(stateKey);
             }
         });
     }