@visactor/vchart 2.0.13-alpha.1 → 2.0.13-alpha.10

package/build/index.es.js

@@ -51096,6 +51096,7 @@ loadBrushComponent();
 let Brush$1 = class Brush extends AbstractComponent {
   constructor(attributes, options) {
     super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeBrushState = !1, this._activeDrawState = !1, this._cacheDrawPoints = [], this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._firstUpdate = !0, this._onBrushStart = e => {
+      if (!1 === this.attribute.interactive) return;
       if (!1 === this._beforeBrushEvent(e)) return;
       const {
         updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
@@ -51104,11 +51105,11 @@ let Brush$1 = class Brush extends AbstractComponent {
       } = this.attribute;
       array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd)), e.stopPropagation(), this._firstUpdate = !0, this._activeMoveState = brushMoved && this._isPosInBrushMask(e), this._activeDrawState = !this._activeMoveState, this._startPos = this.eventPosToStagePos(e), this._cacheDrawPoints = [this._startPos];
     }, this._onBrushing = e => {
-      !1 !== this._beforeBrushEvent(e) && (this._outOfInteractiveRange(e) || (e.stopPropagation(), this._firstUpdate ? (this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e), this._firstUpdate = !1) : (this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e))));
+      !1 !== this.attribute.interactive && !1 !== this._beforeBrushEvent(e) && (this._outOfInteractiveRange(e) || (e.stopPropagation(), this._firstUpdate ? (this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e), this._firstUpdate = !1) : (this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e))));
     }, this._onBrushingWithDelay = 0 === this.attribute.delayTime ? this._onBrushing : delayMap$1[this.attribute.delayType](this._onBrushing, this.attribute.delayTime), this._onBrushEnd = e => {
-      this._releaseBrushUpdateEvents(), e.preventDefault(), this._activeDrawState && this._drawEnd(e), this._activeMoveState && this._moveEnd(e), this._activeDrawState = !1, this._activeMoveState = !1;
+      !1 !== this.attribute.interactive && (this._releaseBrushUpdateEvents(), e.preventDefault(), this._activeDrawState && this._drawEnd(e), this._activeMoveState && this._moveEnd(e), this._activeDrawState = !1, this._activeMoveState = !1);
     }, this._onBrushClear = e => {
-      !1 !== this._beforeBrushEvent(e) && (e.preventDefault(), this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)), this._activeDrawState = !1, this._activeMoveState = !1);
+      !1 !== this.attribute.interactive && !1 !== this._beforeBrushEvent(e) && (e.preventDefault(), this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)), this._activeDrawState = !1, this._activeMoveState = !1);
     };
   }
   _bindBrushEvents() {
@@ -51120,6 +51121,7 @@ let Brush$1 = class Brush extends AbstractComponent {
     array(trigger).forEach(t => this.stage.addEventListener(t, this._onBrushStart)), array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
   }
   _initDraw(e) {
+    if (!1 === this.attribute.interactive) return;
     const {
         brushMode: brushMode
       } = this.attribute,
@@ -51128,6 +51130,7 @@ let Brush$1 = class Brush extends AbstractComponent {
   }
   _initMove(e) {
     var _a, _b;
+    if (!1 === this.attribute.interactive) return;
     this._cacheMovePoint = this.eventPosToStagePos(e), this._operatingMaskMoveDx = null !== (_a = this._operatingMask.attribute.dx) && void 0 !== _a ? _a : 0, this._operatingMaskMoveDy = null !== (_b = this._operatingMask.attribute.dy) && void 0 !== _b ? _b : 0;
     const {
         interactiveRange: interactiveRange
@@ -51152,6 +51155,7 @@ let Brush$1 = class Brush extends AbstractComponent {
   }
   _drawing(e) {
     var _a;
+    if (!1 === this.attribute.interactive) return;
     const pos = this.eventPosToStagePos(e),
       {
         brushType: brushType,
@@ -51176,6 +51180,7 @@ let Brush$1 = class Brush extends AbstractComponent {
     (Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold) && (1 !== Object.keys(this._brushMaskAABBBoundsDict).length || this._activeBrushState ? this._dispatchBrushEvent(IOperateType.drawing, e) : (this._activeBrushState = !0, this._dispatchBrushEvent(IOperateType.brushActive, e)));
   }
   _moving(e) {
+    if (!1 === this.attribute.interactive) return;
     const startPos = this._cacheMovePoint,
       pos = this.eventPosToStagePos(e);
     if (pos.x === (null == startPos ? void 0 : startPos.x) && pos.y === (null == startPos ? void 0 : startPos.y)) return;
@@ -51189,6 +51194,7 @@ let Brush$1 = class Brush extends AbstractComponent {
     }), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchBrushEvent(IOperateType.moving, e);
   }
   _drawEnd(e) {
+    if (!1 === this.attribute.interactive) return;
     const {
       removeOnClick = !0,
       sizeThreshold = DEFAULT_SIZE_THRESHOLD
@@ -51206,7 +51212,7 @@ let Brush$1 = class Brush extends AbstractComponent {
     }
   }
   _moveEnd(e) {
-    this._operatingMask && this._operatingMask.setAttribute("pickable", !1), this._dispatchBrushEvent(IOperateType.moveEnd, e);
+    !1 !== this.attribute.interactive && (this._operatingMask && this._operatingMask.setAttribute("pickable", !1), this._dispatchBrushEvent(IOperateType.moveEnd, e));
   }
   render() {
     this._bindBrushEvents();
@@ -53862,7 +53868,7 @@ let Event$1 = class Event {
         if (ComposedEventCtor) {
             const composedEvent = new ComposedEventCtor(this._eventDispatcher, this._mode);
             composedEvent.register(eType, handler);
-            this._composedEventMap.set(callback, {
+            this._composedEventMap.set(handler.callback, {
                 eventType: eType,
                 event: composedEvent
             });
@@ -54899,6 +54905,9 @@ class Compiler {
     getRootGroup() {
         return this._rootGroup;
     }
+    getOption() {
+        return this._option;
+    }
     constructor(container, option) {
         this._count = 0;
         this._rootMarks = [];
@@ -60020,9 +60029,9 @@ class BaseTrigger {
             });
         }
     }
-    start(g) {
+    start(g, e) {
     }
-    reset(g) {
+    reset(g, e) {
     }
     dispatchEvent(type, params) {
         if (this.options.event) {
@@ -60053,17 +60062,17 @@ class ElementHighlight extends BaseTrigger {
     constructor(options) {
         super(options);
         this.type = "element-highlight";
-        this.resetAll = () => {
+        this.resetAll = (e) => {
             const { highlightState, blurState, interaction } = this.options;
             if (this._lastGraphic) {
                 interaction.clearAllStatesOfTrigger(this, highlightState, blurState);
-                this.dispatchEvent('reset', { graphics: [this._lastGraphic], options: this.options });
+                this.dispatchEvent('reset', Object.assign({ graphics: [this._lastGraphic], options: this.options }, e));
                 this._lastGraphic = null;
                 interaction.setStatedGraphics(this, []);
             }
         };
         this.handleStart = (e) => {
-            this.start(e.item);
+            this.start(e.item, e);
         };
         this.handleReset = (e) => {
             const { interaction } = this.options;
@@ -60074,10 +60083,10 @@ class ElementHighlight extends BaseTrigger {
             const markGraphic = e.item;
             const hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);
             if (this._resetType.includes('view') && !hasActiveElement) {
-                this.resetAll();
+                this.resetAll(e);
             }
             else if (this._resetType.includes('self') && hasActiveElement) {
-                this.resetAll();
+                this.resetAll(e);
             }
         };
         this.options = Object.assign({}, defaultOptions$6, options);
@@ -60109,7 +60118,7 @@ class ElementHighlight extends BaseTrigger {
         events.push({ type: eventName, handler: this.handleReset });
         return events;
     }
-    start(markGraphic) {
+    start(markGraphic, e) {
         if (markGraphic && this._markSet.getMarkInId(markGraphic.context.markId)) {
             const { highlightState, blurState, interaction } = this.options;
             if (this._lastGraphic === markGraphic) {
@@ -60118,20 +60127,20 @@ class ElementHighlight extends BaseTrigger {
             const newStatedGraphics = interaction.updateStates(this, [markGraphic], interaction.getStatedGraphics(this), highlightState, blurState);
             interaction.setStatedGraphics(this, newStatedGraphics);
             this._lastGraphic = markGraphic;
-            this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options });
+            this.dispatchEvent('start', Object.assign({ graphics: newStatedGraphics, options: this.options }, e));
         }
         else if (this._lastGraphic && this._resetType === 'view') {
-            this.resetAll();
+            this.resetAll(e);
         }
     }
-    reset(markGraphic) {
+    reset(markGraphic, e) {
         if (markGraphic) {
             if (this._markSet.getMarkInId(markGraphic.context.markId)) {
                 markGraphic.removeState([this.options.highlightState, this.options.blurState]);
             }
         }
         else {
-            this.resetAll();
+            this.resetAll(e);
         }
     }
 }
@@ -60150,17 +60159,17 @@ class ElementSelect extends BaseTrigger {
         super(options);
         this.type = "element-select";
         this._resetType = [];
-        this.resetAll = () => {
+        this.resetAll = (e) => {
             const { state, reverseState, interaction } = this.options;
             const statedGraphics = interaction.getStatedGraphics(this);
             if (statedGraphics && statedGraphics.length) {
                 interaction.clearAllStatesOfTrigger(this, state, reverseState);
-                this.dispatchEvent('reset', { graphics: statedGraphics, options: this.options });
+                this.dispatchEvent('reset', Object.assign({ graphics: statedGraphics, options: this.options }, e));
                 interaction.setStatedGraphics(this, []);
             }
         };
         this.handleStart = (e) => {
-            this.start(e.item);
+            this.start(e.item, e);
         };
         this.handleReset = (e) => {
             const { interaction } = this.options;
@@ -60171,10 +60180,10 @@ class ElementSelect extends BaseTrigger {
             const markGraphic = e.item;
             const hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);
             if (this._resetType.includes('view') && !hasActiveElement) {
-                this.resetAll();
+                this.resetAll(e);
             }
             else if (this._resetType.includes('self') && hasActiveElement) {
-                this.resetAll();
+                this.resetAll(e);
             }
         };
         this.options = Object.assign({}, defaultOptions$5, options);
@@ -60204,7 +60213,7 @@ class ElementSelect extends BaseTrigger {
         this._resetType = resetType;
         return events;
     }
-    start(markGraphic) {
+    start(markGraphic, e) {
         const { state, reverseState, isMultiple, interaction } = this.options;
         const statedGraphics = interaction.getStatedGraphics(this);
         if (markGraphic && this._markSet.getMarkInId(markGraphic.context.markId)) {
@@ -60215,7 +60224,7 @@ class ElementSelect extends BaseTrigger {
                         interaction.setStatedGraphics(this, interaction.updateStates(this, newStatedGraphics, statedGraphics, state, reverseState));
                     }
                     else {
-                        this.resetAll();
+                        this.resetAll(e);
                     }
                 }
             }
@@ -60226,26 +60235,26 @@ class ElementSelect extends BaseTrigger {
                 markGraphic.addState(state, true);
                 const newStatedGraphics = this.options.interaction.updateStates(this, isMultiple && statedGraphics ? [...statedGraphics, markGraphic] : [markGraphic], statedGraphics, state, reverseState);
                 interaction.setStatedGraphics(this, newStatedGraphics);
-                this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options });
+                this.dispatchEvent('start', Object.assign({ graphics: newStatedGraphics, options: this.options }, e));
                 if (this._resetType.includes('timeout')) {
                     this._timer = setTimeout(() => {
-                        this.resetAll();
+                        this.resetAll(e);
                     }, this.options.triggerOff);
                 }
             }
         }
         else if (this._resetType.includes('view') && statedGraphics && statedGraphics.length) {
-            this.resetAll();
+            this.resetAll(e);
         }
     }
-    reset(markGraphic) {
+    reset(markGraphic, e) {
         if (markGraphic) {
             if (this._markSet.getMarkInId(markGraphic.context.markId)) {
                 markGraphic.removeState([this.options.state, this.options.reverseState]);
             }
         }
         else {
-            this.resetAll();
+            this.resetAll(e);
         }
     }
 }
@@ -60375,6 +60384,7 @@ class VChart {
         this._observer = null;
         this._context = {};
         this._renderState = RenderStateEnum.render;
+        this._disableDimensionHoverEvent = false;
         this._doResize = () => {
             const { width, height } = this.getCurrentSize();
             if (this._currentSize.width !== width || this._currentSize.height !== height) {
@@ -60519,7 +60529,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();
@@ -61172,7 +61182,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;
         }
@@ -61413,6 +61423,22 @@ class VChart {
         var _a;
         return (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setDimensionIndex(value, opt);
     }
+    disableDimensionHoverEvent(value) {
+        if (value !== undefined) {
+            this._disableDimensionHoverEvent = value;
+        }
+        return this._disableDimensionHoverEvent;
+    }
+    disableCrossHair(value = true) {
+        this.getChart()
+            .getComponentsByKey('crosshair')
+            .forEach(crosshair => (crosshair.enable = !value));
+    }
+    disableTooltip(value = true) {
+        this.getChart()
+            .getComponentsByKey('tooltip')
+            .forEach(tooltip => (tooltip.enable = !value));
+    }
     showCrosshair(cb) {
         var _a;
         (_a = this._chart) === null || _a === void 0 ? void 0 : _a.showCrosshair(cb);
@@ -64433,7 +64459,8 @@ class DimensionHoverEvent extends DimensionEvent {
         super(...arguments);
         this._cacheDimensionInfo = null;
         this.onMouseMove = (params) => {
-            if (!params) {
+            var _a, _b, _c, _d;
+            if (!params || ((_d = (_c = (_b = (_a = params.chart) === null || _a === void 0 ? void 0 : _a.getOption()) === null || _b === void 0 ? void 0 : _b.globalInstance) === null || _c === void 0 ? void 0 : _c.disableDimensionHoverEvent) === null || _d === void 0 ? void 0 : _d.call(_c))) {
                 return;
             }
             const x = params.event.viewX;
@@ -64455,7 +64482,8 @@ class DimensionHoverEvent extends DimensionEvent {
             }
         };
         this.onMouseOut = (params) => {
-            if (!params) {
+            var _a, _b, _c, _d;
+            if (!params || ((_d = (_c = (_b = (_a = params.chart) === null || _a === void 0 ? void 0 : _a.getOption()) === null || _b === void 0 ? void 0 : _b.globalInstance) === null || _c === void 0 ? void 0 : _c.disableDimensionHoverEvent) === null || _d === void 0 ? void 0 : _d.call(_c))) {
                 return;
             }
             this._callback.call(null, Object.assign(Object.assign({}, params), { action: 'leave', dimensionInfo: this._cacheDimensionInfo ? this._cacheDimensionInfo.slice() : [] }));
@@ -71753,6 +71781,9 @@ class BaseTooltipProcessor {
     }
     shouldHandleTooltip(params, info) {
         var _a, _b;
+        if (!this.component.enable) {
+            return false;
+        }
         if (isNil$1(info)) {
             return false;
         }
@@ -95664,11 +95695,15 @@ function showTooltip(datum, options, component) {
         });
         return originDatum;
     };
+    const transform = region.getOption().globalInstance.getStage().window.getViewBoxTransform().getInverse();
     const getMockEvent = (originPos) => {
         var _a, _b;
         const pos = bound(originPos);
-        const canvasX = (_a = opt.x) !== null && _a !== void 0 ? _a : regionPos.x + pos.x;
-        const canvasY = (_b = opt.y) !== null && _b !== void 0 ? _b : regionPos.y + pos.y;
+        const tempX = (_a = opt.x) !== null && _a !== void 0 ? _a : regionPos.x + pos.x;
+        const tempY = (_b = opt.y) !== null && _b !== void 0 ? _b : regionPos.y + pos.y;
+        const canvasPoint = { x: 0, y: 0 };
+        transform.transformPoint({ x: tempX, y: tempY }, canvasPoint);
+        const { x: canvasX, y: canvasY } = canvasPoint;
         return {
             canvasX,
             canvasY,
@@ -96046,6 +96081,7 @@ class Tooltip extends BaseComponent {
         this.specKey = 'tooltip';
         this.layoutType = 'none';
         this._isReleased = false;
+        this.enable = true;
         this._alwaysShow = false;
         this._eventList = [];
         this._isTooltipShown = false;
@@ -103201,6 +103237,9 @@ class Brush extends BaseComponent {
         this._initMarkBrushState(componentIndex, '');
         brushComponent.children[0].removeAllChild();
     }
+    _shouldEnableInteractive() {
+        return this.getOption().getCompiler().getOption().interactive !== false;
+    }
     _createBrushComponent(region, componentIndex) {
         var _a, _b;
         const interactiveAttr = this._getBrushInteractiveAttr(region);
@@ -103214,10 +103253,16 @@ class Brush extends BaseComponent {
             this._emitEvent(ChartEvent.brushActive, region, e);
         });
         brush.addEventListener(IOperateType.drawStart, (e) => {
+            if (this._spec.disableDimensionHoverWhenBrushing) {
+                this._option.globalInstance.disableDimensionHoverEvent(true);
+            }
             this._setRegionMarkPickable(region, true);
             this._emitEvent(ChartEvent.brushStart, region, e);
         });
         brush.addEventListener(IOperateType.moveStart, (e) => {
+            if (this._spec.disableDimensionHoverWhenBrushing) {
+                this._option.globalInstance.disableDimensionHoverEvent(true);
+            }
             this._setRegionMarkPickable(region, true);
             this._emitEvent(ChartEvent.brushStart, region, e);
         });
@@ -103232,12 +103277,18 @@ class Brush extends BaseComponent {
             this._emitEvent(ChartEvent.brushChange, region, e);
         });
         brush.addEventListener(IOperateType.brushClear, (e) => {
+            if (this._spec.disableDimensionHoverWhenBrushing) {
+                this._option.globalInstance.disableDimensionHoverEvent(false);
+            }
             this._setRegionMarkPickable(region, true);
             this._initMarkBrushState(componentIndex, '');
             this._emitEvent(ChartEvent.brushClear, region, e);
         });
         brush.addEventListener(IOperateType.drawEnd, (e) => {
             var _a;
+            if (this._spec.disableDimensionHoverWhenBrushing) {
+                this._option.globalInstance.disableDimensionHoverEvent(false);
+            }
             this._setRegionMarkPickable(region, true);
             const { operateMask } = e.detail;
             const { updateElementsState = true } = this._spec;
@@ -103261,6 +103312,9 @@ class Brush extends BaseComponent {
             }
         });
         brush.addEventListener(IOperateType.moveEnd, (e) => {
+            if (this._spec.disableDimensionHoverWhenBrushing) {
+                this._option.globalInstance.disableDimensionHoverEvent(false);
+            }
             this._setRegionMarkPickable(region, true);
             const { operateMask } = e.detail;
             const { updateElementsState = true } = this._spec;
@@ -103286,7 +103340,8 @@ class Brush extends BaseComponent {
                 maxX: seriesRegionEndX
             },
             xRange: [seriesRegionStartX, seriesRegionEndX],
-            yRange: [seriesRegionStartY, seriesRegionEndY]
+            yRange: [seriesRegionStartY, seriesRegionEndY],
+            interactive: this._shouldEnableInteractive()
         };
     }
     _transformBrushedMarkAttr(brushedStyle) {
@@ -103307,6 +103362,7 @@ class Brush extends BaseComponent {
     }
     _handleBrushChange(region, e) {
         const { operateMask } = e.detail;
+        this._operateMask = operateMask;
         const { updateElementsState = true } = this._spec;
         if (updateElementsState) {
             this._reconfigItem(operateMask, region);
@@ -103604,6 +103660,12 @@ class Brush extends BaseComponent {
             this._brushComponents = null;
         }
     }
+    clearBrushStateAndMask() {
+        this._relativeRegions.forEach((region, componentIndex) => {
+            this._initMarkBrushState(componentIndex, '');
+            this._brushComponents[componentIndex].children[0].removeAllChild();
+        });
+    }
 }
 Brush.type = ComponentTypeEnum.brush;
 Brush.builtInTheme = {