@visactor/vchart 2.0.16 → 2.0.18

package/build/index.js

@@ -9671,28 +9671,59 @@
       }
       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");
       }
@@ -14037,7 +14068,9 @@
         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];
@@ -16679,7 +16712,7 @@
         });
       }
       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;
@@ -24342,12 +24375,12 @@
         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) {
@@ -31672,7 +31705,7 @@
         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();
       }
@@ -33877,17 +33910,21 @@
         } = 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;
@@ -34916,6 +34953,8 @@
           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) {
@@ -34925,9 +34964,7 @@
         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);
@@ -35000,7 +35037,7 @@
       }
       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;
@@ -46121,7 +46158,7 @@
         });
       }
       clearVGlobalEvents() {
-        ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+        ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
           passive: !1
         });
       }
@@ -49825,7 +49862,7 @@
         };
       }
       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();
       }
@@ -50872,6 +50909,9 @@
           value: this._data[dataIndex]
         });
       }
+      release(all) {
+        this._sliderVisible || this._slider.release(all), super.release(all);
+      }
     }
     BasePlayer.defaultAttributes = {
       visible: !0,
@@ -53341,6 +53381,12 @@
         }
         return spec;
     }
+    function transformFunctionAttribute(att, ...args) {
+        if (isFunction$1(att)) {
+            return att(...args);
+        }
+        return att;
+    }
 
     const initTextMeasure = (textSpec, option, useNaiveCanvas) => {
         return initTextMeasure$1(textSpec, option, useNaiveCanvas, {
@@ -58997,7 +59043,7 @@
         _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 +59082,9 @@
                     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 +60617,7 @@
             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 +61270,7 @@
                 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 +61855,7 @@
         });
     };
 
-    const version = "2.0.16";
+    const version = "2.0.18";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -65921,6 +65970,7 @@
                 components.forEach(c => {
                     var _a;
                     if (c) {
+                        c.release(true);
                         (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(c);
                         c = null;
                     }
@@ -66486,7 +66536,7 @@
         _getGridAttributes() {
             const spec = this._spec;
             return {
-                alternateColor: spec.grid.alternateColor,
+                alternateColor: transformFunctionAttribute(spec.grid.alternateColor),
                 alignWithLabel: spec.grid.alignWithLabel,
                 style: isFunction$1(spec.grid.style)
                     ? (datum, index) => {
@@ -66500,7 +66550,7 @@
                     : {
                         type: 'line',
                         visible: spec.subGrid.visible,
-                        alternateColor: spec.subGrid.alternateColor,
+                        alternateColor: transformFunctionAttribute(spec.subGrid.alternateColor),
                         style: transformToGraphic(spec.subGrid.style)
                     }
             };
@@ -91256,6 +91306,11 @@
         },
         cellBackground: {
             visible: false
+        },
+        label: {
+            style: {
+                lineWidth: 2
+            }
         }
     };
 
@@ -91290,11 +91345,12 @@
             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 +98420,7 @@
             this._hasInitStateScale = false;
             this._shouldChange = true;
             this._stateField = 'x';
+            this._currentDataCollection = [];
             this._handleStateChange = (startValue, endValue, tag) => {
                 var _a, _b;
                 this._startValue = startValue;
@@ -98420,6 +98477,7 @@
             }, () => this._regions, (() => this._option).bind(this), () => this.event);
         }
         created() {
+            this._handleDataCollectionChangeBound = this._handleDataCollectionChange.bind(this);
             super.created();
             this._setAxisFromSpec();
             this._setRegionsFromSpec();
@@ -98574,7 +98632,7 @@
             }
             return;
         }
-        _initData() {
+        _collectDataInfo() {
             const dataCollection = [];
             const seriesCollection = [];
             const stateFields = [];
@@ -98650,6 +98708,10 @@
                     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 +98734,8 @@
             }, 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 +98777,39 @@
         }
         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 +102170,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 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(exports.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(exports.ChartEvent.rendered, this.autoPlayCallback);
+                this._option.globalInstance.on(exports.ChartEvent.rendered, this.autoPlayCallback);
                 this._playerComponent.addEventListener(PlayerEventEnum.end, () => {
                     var _a;
                     this.event.emit(exports.ChartEvent.playerEnd, { model: this });
@@ -102271,6 +102367,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             });
         }
+        release() {
+            this._option.globalInstance.off(exports.ChartEvent.rendered, this.autoPlayCallback);
+        }
     }
     Player.builtInTheme = {
         player
@@ -108048,6 +108147,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.transformBounds = transformBounds;
     exports.transformBoundsWithMatrix = transformBoundsWithMatrix;
     exports.transformColorSchemeToStandardStruct = transformColorSchemeToStandardStruct;
+    exports.transformFunctionAttribute = transformFunctionAttribute;
     exports.transformToGraphic = transformToGraphic;
     exports.treeTransform = transform$5;
     exports.treemapTransform = transform$4;