@visactor/vchart 2.0.17 → 2.0.18

package/build/index.es.js

@@ -9665,28 +9665,59 @@ class EventListenerManager {
   }
   addEventListener(type, listener, options) {
     if (!listener) return;
+    const capture = this._resolveCapture(options),
+      once = this._resolveOnce(options),
+      listenerTypeMap = this._getOrCreateListenerTypeMap(type),
+      wrappedMap = this._getOrCreateWrappedMap(listenerTypeMap, listener);
+    if (wrappedMap.has(capture)) return;
     const wrappedListener = event => {
       const transformedEvent = this._eventListenerTransformer(event);
-      "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent);
+      "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent), once && this._deleteListenerRecord(type, listener, capture);
     };
-    this._listenerMap.has(type) || this._listenerMap.set(type, new Map()), this._listenerMap.get(type).set(listener, wrappedListener), this._nativeAddEventListener(type, wrappedListener, options);
+    wrappedMap.set(capture, {
+      wrappedListener: wrappedListener,
+      options: options
+    }), this._nativeAddEventListener(type, wrappedListener, options);
   }
   removeEventListener(type, listener, options) {
-    var _a;
+    var _a, _b;
     if (!listener) return;
-    const wrappedListener = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener);
-    wrappedListener && (this._nativeRemoveEventListener(type, wrappedListener, options), this._listenerMap.get(type).delete(listener), 0 === this._listenerMap.get(type).size && this._listenerMap.delete(type));
+    const capture = this._resolveCapture(options),
+      wrappedRecord = null === (_b = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener)) || void 0 === _b ? void 0 : _b.get(capture);
+    wrappedRecord && (this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture), this._deleteListenerRecord(type, listener, capture));
   }
   dispatchEvent(event) {
     return this._nativeDispatchEvent(event);
   }
   clearAllEventListeners() {
-    this._listenerMap.forEach((listenersMap, type) => {
-      listenersMap.forEach((wrappedListener, originalListener) => {
-        this._nativeRemoveEventListener(type, wrappedListener, void 0);
+    this._listenerMap.forEach((listenerMap, type) => {
+      listenerMap.forEach(wrappedMap => {
+        wrappedMap.forEach((wrappedRecord, capture) => {
+          this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture);
+        });
       });
     }), this._listenerMap.clear();
   }
+  _resolveCapture(options) {
+    return "boolean" == typeof options ? options : !!(null == options ? void 0 : options.capture);
+  }
+  _resolveOnce(options) {
+    return "object" == typeof options && !!(null == options ? void 0 : options.once);
+  }
+  _getOrCreateListenerTypeMap(type) {
+    let listenerTypeMap = this._listenerMap.get(type);
+    return listenerTypeMap || (listenerTypeMap = new Map(), this._listenerMap.set(type, listenerTypeMap)), listenerTypeMap;
+  }
+  _getOrCreateWrappedMap(listenerTypeMap, listener) {
+    let wrappedMap = listenerTypeMap.get(listener);
+    return wrappedMap || (wrappedMap = new Map(), listenerTypeMap.set(listener, wrappedMap)), wrappedMap;
+  }
+  _deleteListenerRecord(type, listener, capture) {
+    const listenerTypeMap = this._listenerMap.get(type);
+    if (!listenerTypeMap) return;
+    const wrappedMap = listenerTypeMap.get(listener);
+    wrappedMap && (wrappedMap.delete(capture), 0 === wrappedMap.size && listenerTypeMap.delete(listener), 0 === listenerTypeMap.size && this._listenerMap.delete(type));
+  }
   _nativeAddEventListener(type, listener, options) {
     throw new Error("_nativeAddEventListener must be implemented by derived classes");
   }
@@ -14031,7 +14062,9 @@ class EventManager {
     var _a;
     if (event.manager !== this) throw new Error("It is illegal to free an event not managed by this EventManager!");
     const constructor = event.constructor;
-    this.eventPool.has(constructor) || this.eventPool.set(constructor, []), null === (_a = this.eventPool.get(constructor)) || void 0 === _a || _a.push(event);
+    this.eventPool.has(constructor) || (this.eventPool.get(constructor).forEach(e => {
+      e.eventPhase = event.NONE, e.currentTarget = null, e.path = [], e.detailPath = [], e.target = null;
+    }), this.eventPool.set(constructor, [])), null === (_a = this.eventPool.get(constructor)) || void 0 === _a || _a.push(event);
   }
   notifyListeners(e, type) {
     const listeners = e.currentTarget._events[type];
@@ -16673,7 +16706,7 @@ class Graphic extends Node {
     });
   }
   release() {
-    this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this);
+    this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this), super.release();
   }
   _emitCustomEvent(type, context) {
     var _a, _b;
@@ -24336,12 +24369,12 @@ class Stage extends Group$1 {
     throw new Error("暂不支持");
   }
   release() {
-    var _a, _b;
+    var _a, _b, _d;
     super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(layer => {
       layer.release();
     }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
       item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-    }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.renderService.renderTreeRoots = [];
+    }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.params.ticker || null === (_d = this._ticker) || void 0 === _d || _d.release(), this.renderService.renderTreeRoots = [];
   }
   setStage(stage) {}
   dirty(b, matrix) {
@@ -31666,7 +31699,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
     this._sliderRenderBounds = null, this._sliderLimitRange = null;
   }
   release(all) {
-    super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+    super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
       passive: !1
     }), this._clearDragEvents();
   }
@@ -33871,17 +33904,21 @@ class AxisBase extends AnimateComponent {
     } = this.attribute.label;
     textStyle = isFunction$1(textStyle) ? merge$1({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle;
     const labelAlign = this.getLabelAlign(vector, inside, textStyle.angle);
-    return textStyle = merge$1(labelAlign, textStyle), isFunction$1(textStyle.text) && (textStyle.text = textStyle.text({
+    textStyle = merge$1(labelAlign, textStyle), isFunction$1(textStyle.text) && (textStyle.text = textStyle.text({
       label: tickDatum.label,
       value: tickDatum.rawValue,
       index: tickDatum.index,
       layer: layer
-    })), Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), {
+    }));
+    let reactStyle = textStyle.react;
+    return isFunction$1(reactStyle) && (reactStyle = reactStyle(tickDatum, index, tickData, layer)), Object.assign(Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), {
       text: null != text ? text : textContent,
       _originText: tickDatum.label,
       lineHeight: null == textStyle ? void 0 : textStyle.fontSize,
       type: type
-    }), textStyle);
+    }), textStyle), {
+      react: reactStyle
+    });
   }
   getLabelPosition(point, vector, text, style) {
     return point;
@@ -34910,6 +34947,8 @@ class DefaultTicker extends EventEmitter {
       this.status === STATUS$1.RUNNING && (this.tickCounts++, this.timelines.forEach(timeline => {
         timeline.tick(delta);
       }), this.emit("tick", delta));
+    }, this._handleGraphTick = () => {
+      this.initHandler(!1);
     }, this.init(), this.lastFrameTime = -1, this.tickCounts = 0, this.stage = stage, this.autoStop = !0, this.interval = 16, this.computeTimeOffsetAndJitter();
   }
   bindStage(stage) {
@@ -34919,9 +34958,7 @@ class DefaultTicker extends EventEmitter {
     this.timeOffset = Math.floor(Math.random() * this.interval), this._jitter = Math.min(Math.max(.2 * this.interval, 6), .7 * this.interval);
   }
   init() {
-    this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
-      this.initHandler(!1);
-    }), application.global.env && this.initHandler(!1);
+    this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", this._handleGraphTick), application.global.env && this.initHandler(!1);
   }
   addTimeline(timeline) {
     this.timelines.push(timeline);
@@ -34994,7 +35031,7 @@ class DefaultTicker extends EventEmitter {
   }
   release() {
     var _a;
-    this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
+    this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1, application.global.hooks.onSetEnv.unTap("graph-ticker", this._handleGraphTick);
   }
   checkSkip(delta) {
     var _a, _b, _c;
@@ -46115,7 +46152,7 @@ class DataZoomInteraction extends EventEmitter {
     });
   }
   clearVGlobalEvents() {
-    ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+    ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
       passive: !1
     });
   }
@@ -49819,7 +49856,7 @@ class Slider extends AbstractComponent {
     };
   }
   release(all) {
-    super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+    super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
       passive: !1
     }), this._clearAllDragEvents();
   }
@@ -50866,6 +50903,9 @@ class BasePlayer extends AbstractComponent {
       value: this._data[dataIndex]
     });
   }
+  release(all) {
+    this._sliderVisible || this._slider.release(all), super.release(all);
+  }
 }
 BasePlayer.defaultAttributes = {
   visible: !0,
@@ -58997,7 +59037,7 @@ class BaseMark extends GrammarItem {
     _runApplyGraphic(graphics) {
         const hasAnimation = this.hasAnimation();
         graphics.forEach((g, index) => {
-            var _a, _b;
+            var _a, _b, _c;
             const finalAttrs = g.context.finalAttrs;
             const hasStateAnimation = this.hasAnimationByState(g.context.animationState);
             if (!g.setAttributes) {
@@ -59036,6 +59076,9 @@ class BaseMark extends GrammarItem {
                 else if (!hasStateAnimation) {
                     hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs);
                 }
+                if (!((_c = this.renderContext) === null || _c === void 0 ? void 0 : _c.progressive) && this._product && g.parent !== this._product) {
+                    this._product.appendChild(g);
+                }
                 if (hasAnimation) {
                     g.setFinalAttributes(finalAttrs);
                 }
@@ -60568,7 +60611,7 @@ class VChart {
         this._compiler.updateLayoutTag();
         this._setFontFamilyTheme(this.getTheme('fontFamily'));
         this._initDataSet(this._option.dataSet);
-        this._autoSize = isTrueBrowseEnv ? ((_g = (_f = spec.autoFit) !== null && _f !== void 0 ? _f : this._option.autoFit) !== null && _g !== void 0 ? _g : true) : false;
+        this._autoSize = isTrueBrowseEnv ? (_g = (_f = spec.autoFit) !== null && _f !== void 0 ? _f : this._option.autoFit) !== null && _g !== void 0 ? _g : true : false;
         this._bindResizeEvent();
         this._bindViewEvent();
         this._initChartPlugin();
@@ -61221,7 +61264,7 @@ class VChart {
             resize = true;
         }
         const lasAutoSize = this._autoSize;
-        this._autoSize = isTrueBrowser(this._option.mode) ? ((_b = (_a = this._spec.autoFit) !== null && _a !== void 0 ? _a : this._option.autoFit) !== null && _b !== void 0 ? _b : true) : false;
+        this._autoSize = isTrueBrowser(this._option.mode) ? (_b = (_a = this._spec.autoFit) !== null && _a !== void 0 ? _a : this._option.autoFit) !== null && _b !== void 0 ? _b : true : false;
         if (this._autoSize !== lasAutoSize) {
             resize = true;
         }
@@ -61806,7 +61849,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.17";
+const version = "2.0.18";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -65921,6 +65964,7 @@ class BaseComponent extends LayoutModel {
             components.forEach(c => {
                 var _a;
                 if (c) {
+                    c.release(true);
                     (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(c);
                     c = null;
                 }
@@ -91256,6 +91300,11 @@ const heatmap = {
     },
     cellBackground: {
         visible: false
+    },
+    label: {
+        style: {
+            lineWidth: 2
+        }
     }
 };
 
@@ -91290,11 +91339,12 @@ class HeatmapSeries extends CartesianSeries {
         this.initCellBackgroundMarkStyle();
     }
     initLabelMarkStyle(textMark) {
+        var _a, _b, _c;
         if (!textMark) {
             return;
         }
         this.setMarkStyle(textMark, {
-            fill: this.getColorAttribute(),
+            fill: (_c = (_b = (_a = this._spec.cell) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getColorAttribute(),
             text: (datum) => {
                 return datum[this.getMeasureField()[0]];
             }
@@ -98364,6 +98414,7 @@ class DataFilterBaseComponent extends BaseComponent {
         this._hasInitStateScale = false;
         this._shouldChange = true;
         this._stateField = 'x';
+        this._currentDataCollection = [];
         this._handleStateChange = (startValue, endValue, tag) => {
             var _a, _b;
             this._startValue = startValue;
@@ -98420,6 +98471,7 @@ class DataFilterBaseComponent extends BaseComponent {
         }, () => this._regions, (() => this._option).bind(this), () => this.event);
     }
     created() {
+        this._handleDataCollectionChangeBound = this._handleDataCollectionChange.bind(this);
         super.created();
         this._setAxisFromSpec();
         this._setRegionsFromSpec();
@@ -98574,7 +98626,7 @@ class DataFilterBaseComponent extends BaseComponent {
         }
         return;
     }
-    _initData() {
+    _collectDataInfo() {
         const dataCollection = [];
         const seriesCollection = [];
         const stateFields = [];
@@ -98650,6 +98702,10 @@ class DataFilterBaseComponent extends BaseComponent {
                 specIndex: this._seriesIndex
             });
         }
+        return { dataCollection, seriesCollection, stateFields, valueFields, isCategoryState };
+    }
+    _initData() {
+        const { dataCollection, seriesCollection, stateFields, valueFields, isCategoryState } = this._collectDataInfo();
         const { dataSet } = this._option;
         registerDataSetInstanceParser(dataSet, 'dataview', dataViewParser);
         registerDataSetInstanceTransform(dataSet, 'dataFilterComputeDomain', dataFilterComputeDomain);
@@ -98672,7 +98728,8 @@ class DataFilterBaseComponent extends BaseComponent {
         }, false);
         this._data = new CompilableData(this._option, data);
         data.reRunAllTransform();
-        dataSet.multipleDataViewAddListener(dataCollection, 'change', this._handleDataCollectionChange.bind(this));
+        this._currentDataCollection = dataCollection;
+        dataSet.multipleDataViewAddListener(dataCollection, 'change', this._handleDataCollectionChangeBound);
     }
     _addTransformToSeries() {
         if (!this._relatedAxisComponent || this._filterMode !== 'axis') {
@@ -98714,8 +98771,39 @@ class DataFilterBaseComponent extends BaseComponent {
     }
     onDataUpdate() {
         var _a;
+        const { dataCollection, seriesCollection, stateFields, valueFields, isCategoryState } = this._collectDataInfo();
+        if (this._currentDataCollection.length !== dataCollection.length ||
+            this._currentDataCollection.some((dv, i) => dv !== dataCollection[i])) {
+            this._currentDataCollection.forEach(dv => {
+                var _a;
+                (_a = dv === null || dv === void 0 ? void 0 : dv.target) === null || _a === void 0 ? void 0 : _a.removeListener('change', this._handleDataCollectionChangeBound);
+            });
+            this._currentDataCollection = dataCollection;
+            const { dataSet } = this._option;
+            dataSet.multipleDataViewAddListener(this._currentDataCollection, 'change', this._handleDataCollectionChangeBound);
+        }
+        this._data.getDataView().transform({
+            type: 'dataFilterComputeDomain',
+            options: {
+                input: {
+                    dataCollection: dataCollection,
+                    seriesCollection,
+                    stateFields,
+                    valueFields,
+                    isCategoryState
+                },
+                output: {
+                    stateField: this._stateField,
+                    valueField: this._valueField
+                }
+            }
+        }, false);
+        this._data.getDataView().reRunAllTransform();
         const domain = this._computeDomainOfStateScale(isContinuous(this._stateScale.type));
         this._stateScale.domain(domain, false);
+        if (isValid$1(this._spec.start) || isValid$1(this._spec.end)) {
+            this._setStateFromSpec();
+        }
         this._handleChange(this._start, this._end, true);
         if (this._spec.auto && !isEqual(this._domainCache, domain)) {
             this._domainCache = domain;
@@ -102076,17 +102164,19 @@ class Player extends BaseComponent {
             }
             return 0;
         };
+        this.autoPlayCallback = () => {
+            var _a;
+            if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.auto) {
+                this._playerComponent.pause();
+                this._playerComponent.play();
+            }
+        };
         this._initEvent = () => {
             if (this._option.disableTriggerEvent) {
                 return;
             }
-            this._option.globalInstance.on(ChartEvent.rendered, () => {
-                var _a;
-                if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.auto) {
-                    this._playerComponent.pause();
-                    this._playerComponent.play();
-                }
-            });
+            this._option.globalInstance.off(ChartEvent.rendered, this.autoPlayCallback);
+            this._option.globalInstance.on(ChartEvent.rendered, this.autoPlayCallback);
             this._playerComponent.addEventListener(PlayerEventEnum.end, () => {
                 var _a;
                 this.event.emit(ChartEvent.playerEnd, { model: this });
@@ -102271,6 +102361,9 @@ class Player extends BaseComponent {
             }
         });
     }
+    release() {
+        this._option.globalInstance.off(ChartEvent.rendered, this.autoPlayCallback);
+    }
 }
 Player.builtInTheme = {
     player