@visactor/vchart 2.0.7-alpha.5 → 2.0.7-alpha.6

package/build/index.es.js

@@ -54258,11 +54258,13 @@ let Layout$1 = class Layout {
         };
     }
     layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
+        var _a, _b, _c;
         this._layoutInit(_chart, items, chartLayoutRect, chartViewBox);
         const recompute = {
             recomputeWidth: this.recomputeWidth,
             recomputeHeight: this.recomputeHeight
         };
+        const secondLayoutLeftRight = (_c = (_b = (_a = _chart === null || _chart === void 0 ? void 0 : _chart.getSpec()) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.secondLayoutLeftRight) !== null && _c !== void 0 ? _c : false;
         this._layoutNormalItems(items, recompute);
         const layoutTemp = {
             left: this.leftCurrent,
@@ -54271,8 +54273,8 @@ let Layout$1 = class Layout {
             bottom: this.bottomCurrent
         };
         const { regionItems, relativeItems, relativeOverlapItems, allRelatives, overlapItems } = this._groupItems(items);
-        this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute);
-        this._processAutoIndent(regionItems, relativeItems, relativeOverlapItems, overlapItems, allRelatives, layoutTemp, recompute);
+        this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute, secondLayoutLeftRight);
+        this._processAutoIndent(regionItems, relativeItems, relativeOverlapItems, overlapItems, allRelatives, layoutTemp, recompute, secondLayoutLeftRight);
         this.layoutAbsoluteItems(items.filter(x => x.layoutType === 'absolute'));
         items.forEach(item => {
             item.clearWillLayoutTag();
@@ -54284,7 +54286,7 @@ let Layout$1 = class Layout {
         top: { items: [], rect: { width: 0, height: 0 } },
         bottom: { items: [], rect: { width: 0, height: 0 } },
         z: { items: [], rect: { width: 0, height: 0 } }
-    }, allRelatives, layoutTemp, recompute) {
+    }, allRelatives, layoutTemp, recompute, secondLayoutLeftRight = false) {
         if (allRelatives.some(i => i.autoIndent)) {
             const { top, bottom, left, right } = this._checkAutoIndent(allRelatives, layoutTemp);
             if (top || bottom || left || right) {
@@ -54292,7 +54294,7 @@ let Layout$1 = class Layout {
                 this.bottomCurrent = layoutTemp.bottom - bottom;
                 this.leftCurrent = layoutTemp.left + left;
                 this.rightCurrent = layoutTemp.right - right;
-                this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute);
+                this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute, secondLayoutLeftRight);
             }
         }
     }
@@ -54445,7 +54447,9 @@ let Layout$1 = class Layout {
         top: { items: [], rect: { width: 0, height: 0 } },
         bottom: { items: [], rect: { width: 0, height: 0 } },
         z: { items: [], rect: { width: 0, height: 0 } }
-    }, recompute) {
+    }, recompute, secondLayoutLeftRight = false) {
+        const leftBeforeLayout = this.leftCurrent;
+        const rightBeforeLayout = this.rightCurrent;
         let regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
         let regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
         regionRelativeItems
@@ -54464,6 +54468,16 @@ let Layout$1 = class Layout {
         this._layoutRelativeOverlap('top', overlapItems.top, recompute);
         this._layoutRelativeOverlap('bottom', overlapItems.bottom, recompute);
         regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
+        if (secondLayoutLeftRight) {
+            this.leftCurrent = leftBeforeLayout;
+            this.rightCurrent = rightBeforeLayout;
+            regionRelativeItems
+                .filter(x => x.layoutOrient === 'left' || x.layoutOrient === 'right')
+                .forEach(item => {
+                this._layoutRelativeItem(item, recompute);
+            });
+            regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
+        }
         const { regionWidth, regionHeight } = this._layoutRegionItem(regionItems, regionRelativeTotalWidth, regionRelativeTotalHeight);
         regionRelativeItems.concat(regionRelativeOverlapItems).forEach(item => {
             if (['left', 'right'].includes(item.layoutOrient)) {
@@ -56777,6 +56791,11 @@ class ChartPluginService extends BasePluginService {
             plugin.onBeforeInitChart && plugin.onBeforeInitChart(this, chartSpec, actionSource);
         });
     }
+    onAfterInitChart(chartSpec, actionSource) {
+        this._plugins.forEach(plugin => {
+            plugin.onAfterInitChart && plugin.onAfterInitChart(this, chartSpec, actionSource);
+        });
+    }
     releaseAll() {
         super.releaseAll();
         this.globalInstance = null;
@@ -57864,6 +57883,7 @@ class VChart {
         if (!this._chart || !this._compiler) {
             return false;
         }
+        this._chartPluginApply('onAfterInitChart', this._spec, actionSource);
         (_f = (_e = this._option.performanceHook) === null || _e === void 0 ? void 0 : _e.beforeCompileToVGrammar) === null || _f === void 0 ? void 0 : _f.call(_e, this);
         this._compiler.compile({ chart: this._chart, vChart: this }, option);
         (_h = (_g = this._option.performanceHook) === null || _g === void 0 ? void 0 : _g.afterCompileToVGrammar) === null || _h === void 0 ? void 0 : _h.call(_g, this);
@@ -58846,7 +58866,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.7-alpha.5";
+const version = "2.0.7-alpha.6";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -90338,7 +90358,12 @@ function transformLegendTitleAttributes(title) {
 }
 
 function getLegendAttributes(spec, rect) {
-    const { title = {}, item = {}, pager = {}, background = {}, type, id, visible, orient, position, data, filter, regionId, regionIndex, seriesIndex, seriesId, padding } = spec, restSpec = __rest$e(spec, ["title", "item", "pager", "background", "type", "id", "visible", "orient", "position", "data", "filter", "regionId", "regionIndex", "seriesIndex", "seriesId", "padding"]);
+    const restSpec = __rest$e(spec, ["title", "item", "pager", "background", "type", "id", "visible", "orient", "position", "data", "filter", "regionId", "regionIndex", "seriesIndex", "seriesId", "padding"]);
+    let { title = {}, item = {}, pager = {}, background = {} } = spec;
+    title = cloneDeep(title);
+    item = cloneDeep(item);
+    pager = cloneDeep(pager);
+    background = cloneDeep(background);
     const attrs = restSpec;
     if (title.visible) {
         attrs.title = transformLegendTitleAttributes(title);
@@ -92338,7 +92363,7 @@ class BaseCrossHair extends BaseComponent {
                 return;
             }
             this.clearOutEvent();
-            this.hide();
+            this.hideCrosshair();
         };
         this._handleTooltipShow = (params) => {
             const tooltipData = params.tooltipData;
@@ -92360,7 +92385,7 @@ class BaseCrossHair extends BaseComponent {
         };
         this._handleTooltipHideOrRelease = () => {
             this.clearOutEvent();
-            this.hide();
+            this.hideCrosshair();
         };
         this.enable = true;
         this.showDefault = true;
@@ -92428,17 +92453,20 @@ class BaseCrossHair extends BaseComponent {
         return this._limitBounds;
     }
     _showDefaultCrosshairBySpec() {
+        let hasDefaultCrosshair = false;
         Object.keys(this._stateByField).forEach(field => {
             const fieldSpec = this._spec[field];
             if (fieldSpec && fieldSpec.visible && fieldSpec.defaultSelect) {
                 const { axisIndex = 0, datum } = fieldSpec.defaultSelect;
                 const axis = this._option.getComponentsByKey('axes').find(c => c.getSpecIndex() === axisIndex);
                 if (axis) {
+                    hasDefaultCrosshair = true;
                     this._stateByField[field].currentValue.clear();
                     this._stateByField[field].currentValue.set(axisIndex, { axis, datum });
                 }
             }
         });
+        return hasDefaultCrosshair;
     }
     _updateVisibleCrosshair() {
         let hasVisible = false;
@@ -92457,8 +92485,8 @@ class BaseCrossHair extends BaseComponent {
     }
     _showDefaultCrosshair() {
         if (this.showDefault) {
-            this._showDefaultCrosshairBySpec();
-            this.layoutByValue(false);
+            const hasDefault = this._showDefaultCrosshairBySpec();
+            hasDefault && this.layoutByValue(false);
         }
         else {
             this._updateVisibleCrosshair();
@@ -101992,6 +102020,79 @@ const registerMediaQuery = () => {
     registerChartPlugin(MediaQuery);
 };
 
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 10;
+class ChartResizeZoomPlugin extends BasePlugin {
+    constructor() {
+        super(ChartResizeZoomPlugin.type);
+        this.type = 'ChartResizeZoomPlugin';
+        this._zoom = 1;
+        this._onWheel = (e) => {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            const zoom = Math.pow(1.005, -e.deltaY * Math.pow(16, e.deltaMode) * 0.2 * this._rate);
+            const center = { x: e.offsetX, y: e.offsetY };
+            this.zoom(zoom, center);
+        };
+    }
+    onAfterInitChart(service, chartSpec) {
+        var _a, _b, _c, _d, _e;
+        const chart = service.globalInstance;
+        const spec = (_b = (_a = chart.getSpec()) === null || _a === void 0 ? void 0 : _a[ChartResizeZoomPlugin.specKey]) !== null && _b !== void 0 ? _b : { enabled: false };
+        if (spec.enabled !== true) {
+            return;
+        }
+        this._minZoom = (_c = spec.min) !== null && _c !== void 0 ? _c : MIN_ZOOM;
+        this._maxZoom = (_d = spec.max) !== null && _d !== void 0 ? _d : MAX_ZOOM;
+        this._rate = (_e = spec.rate) !== null && _e !== void 0 ? _e : 0.1;
+        this._container = chart.getContainer();
+        this._triggerEvent = getDefaultTriggerEventByMode(service.globalInstance.getChart().getOption().mode).zoom;
+        if (this._container && this._triggerEvent) {
+            this._container.addEventListener(this._triggerEvent, this._onWheel);
+        }
+    }
+    zoom(zoom, pointerPos) {
+        const vchart = this.service.globalInstance;
+        if (!vchart) {
+            return;
+        }
+        const oldZoom = this._zoom;
+        let tempZoom = this._zoom * zoom;
+        if ((tempZoom <= this._minZoom && zoom < 1) || (tempZoom >= this._maxZoom && zoom > 1)) {
+            if (tempZoom <= this._minZoom && this._zoom > this._minZoom) {
+                tempZoom = this._minZoom;
+            }
+            else if (tempZoom >= this._maxZoom && this._zoom < this._maxZoom) {
+                tempZoom = this._maxZoom;
+            }
+            else {
+                return;
+            }
+        }
+        if (tempZoom === oldZoom) {
+            return;
+        }
+        const actualZoomRatio = tempZoom / oldZoom;
+        this._zoom = tempZoom;
+        vchart.resize(vchart.getCurrentSize().width * this._zoom, vchart.getCurrentSize().height * this._zoom);
+        if (pointerPos && this._container) {
+            const { scrollLeft, scrollTop } = this._container;
+            this._container.scrollLeft = scrollLeft + pointerPos.x * (actualZoomRatio - 1);
+            this._container.scrollTop = scrollTop + pointerPos.y * (actualZoomRatio - 1);
+        }
+    }
+    release() {
+        if (this._container && this._triggerEvent) {
+            this._container.removeEventListener(this._triggerEvent, this._onWheel);
+        }
+    }
+}
+ChartResizeZoomPlugin.specKey = 'resizeZoom';
+ChartResizeZoomPlugin.type = 'ChartResizeZoomPlugin';
+const registerChartResizeZoomPlugin = () => {
+    registerChartPlugin(ChartResizeZoomPlugin);
+};
+
 function registerStateTransition() {
     const animationTransitionRegistry = AnimationTransitionRegistry.getInstance();
     animationTransitionRegistry.registerTransition('update', '*', () => ({
@@ -102377,4 +102478,4 @@ function registerSequentialAnimate() {
     mixin(BaseMark, SequentialAnimate);
 }
 
-export { ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, BandAxisMixin, BarChart, BarChartSpecTransformer, BarSeries, BarSeriesSpecTransformer, BaseArcMark, BaseChart, BaseChartSpecTransformer, BaseComponent, BaseComponentSpecTransformer, BaseHistogramChart, BaseMark, BasePieChart, BasePieChartSpecTransformer, BasePieSeries, BasePlugin, BasePolygonMark, BaseSeries, BaseSeriesSpecTransformer, BaseSeriesTooltipHelper, BaseWordCloudChart, BaseWordCloudChartSpecTransformer, BaseWordCloudSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, ChartEvent, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, CompilableData, ComponentMark, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_ANIMATION_CONFIG, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CLOSE_STROKE_JOIN, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_KEY, DEFAULT_LAYOUT_RECT_LEVEL, DEFAULT_LAYOUT_RECT_LEVEL_MIN, DEFAULT_LINEAR_INTERPOLATE, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DEFAULT_SMOOTH_INTERPOLATE, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, Direction, DiscreteLegend, DomTooltipHandler, DotSeries, ElementHighlight, ElementSelect, Event$1 as Event, Factory, FormatterPlugin, FunnelChart, FunnelChartSpecTransformer, FunnelSeries, FunnelSeriesSpecTransformer, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GeoSeries, GlyphMark, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, HistogramChart, HistogramChartSpecTransformer, ImageMark, Indicator, Label, Layout$1 as Layout, LayoutLevel, LayoutZIndex, LineChart, LineMark, LineSeries, LinearAxisMixin, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapSeries, MarkTypeEnum, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PieChart, PieSeries, PieSeriesSpecTransformer, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, PositionEnum, ProgressLikeSeries, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumnChart, RangeColumnSeries, RangeColumnSeriesSpecTransformer, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, STATE_VALUE_ENUM, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, Stack, StackChartMixin, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TransformLevel, TreemapChart, TreemapSeries, USER_LAYOUT_RECT_LEVEL, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloudChart, WordCloudSeries, alternatingWave, animationConfig, barGrowIn, barGrowOut, barPresetAnimation, baseSeriesMark, boundsInRect, builtinThemes, calcLayoutNumber, calcPadding, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, convertPoint, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createScale, createScaleWithSpec, createSymbol, createText, darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, findMarkGraphic, functionTransform, getActualColor, getActualNumValue, getCartesianCrosshairRect, getCartesianDimensionInfo, getColorSchemeBySeries, getCombinedSizeOfRegions, getDataScheme, getDatumOfGraphic, getDiffAttributesOfGraphic, getDimensionInfoByValue, getFieldAlias, getFunnelTheme, getGroupAnimationParams, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getSpecInfo, getTheme, hasThemeMerged, isCollectionMark, isColorKey, isPercent, isPercentOffset, isPolarAxisSeries, isProgressiveDataColorScheme, isSpecValueWithScale, isTokenKey, isValidOrient, isValueInScaleDomain, isXAxis, isYAxis, isZAxis, lightTheme, lookup, measureText, mergeFields, normalizeLayoutPaddingSpec, particleEffect, pieDisappear, pieEnter, pieExit, piePresetAnimation, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, registerAllEnv, registerAllMarks, registerAnimate, registerArcAnimation, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBarAnimation, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomAnimate, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDimensionEvents, registerDimensionHover, registerDimensionTooltipProcessor, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerElementActive, registerElementActiveByLegend, registerElementHighlight, registerElementHighlightByGroup, registerElementHighlightByKey, registerElementHighlightByLegend, registerElementHighlightByName, registerElementSelect, registerFormatPlugin, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGlyphMark, registerGridLayout, registerGroupMark, registerGroupTooltipProcessor, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapSeries, registerMarkArea, registerMarkFilterTransform, registerMarkLine, registerMarkMapTransform, registerMarkPoint, registerMarkTooltipProcessor, registerMediaQuery, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonAnimation, registerPolygonMark, registerPoptip, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRectAnimation, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScaleInOutAnimation, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSequentialAnimate, registerStateTransition, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerAnimate$1 as registerVRenderAnimate, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, setDefaultCrosshairForCartesianChart, shouldMarkDoMorph, snakeWave, sortDataInAxisHelper, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, transformToGraphic, userAnimationConfig, valueInScaleRange, version, vglobal, warn };
+export { ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, BandAxisMixin, BarChart, BarChartSpecTransformer, BarSeries, BarSeriesSpecTransformer, BaseArcMark, BaseChart, BaseChartSpecTransformer, BaseComponent, BaseComponentSpecTransformer, BaseHistogramChart, BaseMark, BasePieChart, BasePieChartSpecTransformer, BasePieSeries, BasePlugin, BasePolygonMark, BaseSeries, BaseSeriesSpecTransformer, BaseSeriesTooltipHelper, BaseWordCloudChart, BaseWordCloudChartSpecTransformer, BaseWordCloudSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, ChartEvent, ChartResizeZoomPlugin, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, CompilableData, ComponentMark, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_ANIMATION_CONFIG, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CLOSE_STROKE_JOIN, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_KEY, DEFAULT_LAYOUT_RECT_LEVEL, DEFAULT_LAYOUT_RECT_LEVEL_MIN, DEFAULT_LINEAR_INTERPOLATE, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DEFAULT_SMOOTH_INTERPOLATE, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, Direction, DiscreteLegend, DomTooltipHandler, DotSeries, ElementHighlight, ElementSelect, Event$1 as Event, Factory, FormatterPlugin, FunnelChart, FunnelChartSpecTransformer, FunnelSeries, FunnelSeriesSpecTransformer, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GeoSeries, GlyphMark, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, HistogramChart, HistogramChartSpecTransformer, ImageMark, Indicator, Label, Layout$1 as Layout, LayoutLevel, LayoutZIndex, LineChart, LineMark, LineSeries, LinearAxisMixin, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapSeries, MarkTypeEnum, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PieChart, PieSeries, PieSeriesSpecTransformer, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, PositionEnum, ProgressLikeSeries, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumnChart, RangeColumnSeries, RangeColumnSeriesSpecTransformer, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, STATE_VALUE_ENUM, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, Stack, StackChartMixin, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TransformLevel, TreemapChart, TreemapSeries, USER_LAYOUT_RECT_LEVEL, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloudChart, WordCloudSeries, alternatingWave, animationConfig, barGrowIn, barGrowOut, barPresetAnimation, baseSeriesMark, boundsInRect, builtinThemes, calcLayoutNumber, calcPadding, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, convertPoint, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createScale, createScaleWithSpec, createSymbol, createText, darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, findMarkGraphic, functionTransform, getActualColor, getActualNumValue, getCartesianCrosshairRect, getCartesianDimensionInfo, getColorSchemeBySeries, getCombinedSizeOfRegions, getDataScheme, getDatumOfGraphic, getDiffAttributesOfGraphic, getDimensionInfoByValue, getFieldAlias, getFunnelTheme, getGroupAnimationParams, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getSpecInfo, getTheme, hasThemeMerged, isCollectionMark, isColorKey, isPercent, isPercentOffset, isPolarAxisSeries, isProgressiveDataColorScheme, isSpecValueWithScale, isTokenKey, isValidOrient, isValueInScaleDomain, isXAxis, isYAxis, isZAxis, lightTheme, lookup, measureText, mergeFields, normalizeLayoutPaddingSpec, particleEffect, pieDisappear, pieEnter, pieExit, piePresetAnimation, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, registerAllEnv, registerAllMarks, registerAnimate, registerArcAnimation, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBarAnimation, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerChartResizeZoomPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomAnimate, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDimensionEvents, registerDimensionHover, registerDimensionTooltipProcessor, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerElementActive, registerElementActiveByLegend, registerElementHighlight, registerElementHighlightByGroup, registerElementHighlightByKey, registerElementHighlightByLegend, registerElementHighlightByName, registerElementSelect, registerFormatPlugin, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGlyphMark, registerGridLayout, registerGroupMark, registerGroupTooltipProcessor, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapSeries, registerMarkArea, registerMarkFilterTransform, registerMarkLine, registerMarkMapTransform, registerMarkPoint, registerMarkTooltipProcessor, registerMediaQuery, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonAnimation, registerPolygonMark, registerPoptip, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRectAnimation, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScaleInOutAnimation, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSequentialAnimate, registerStateTransition, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerAnimate$1 as registerVRenderAnimate, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, setDefaultCrosshairForCartesianChart, shouldMarkDoMorph, snakeWave, sortDataInAxisHelper, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, transformToGraphic, userAnimationConfig, valueInScaleRange, version, vglobal, warn };

package/build/index.js

@@ -54264,11 +54264,13 @@
             };
         }
         layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
+            var _a, _b, _c;
             this._layoutInit(_chart, items, chartLayoutRect, chartViewBox);
             const recompute = {
                 recomputeWidth: this.recomputeWidth,
                 recomputeHeight: this.recomputeHeight
             };
+            const secondLayoutLeftRight = (_c = (_b = (_a = _chart === null || _chart === void 0 ? void 0 : _chart.getSpec()) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.secondLayoutLeftRight) !== null && _c !== void 0 ? _c : false;
             this._layoutNormalItems(items, recompute);
             const layoutTemp = {
                 left: this.leftCurrent,
@@ -54277,8 +54279,8 @@
                 bottom: this.bottomCurrent
             };
             const { regionItems, relativeItems, relativeOverlapItems, allRelatives, overlapItems } = this._groupItems(items);
-            this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute);
-            this._processAutoIndent(regionItems, relativeItems, relativeOverlapItems, overlapItems, allRelatives, layoutTemp, recompute);
+            this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute, secondLayoutLeftRight);
+            this._processAutoIndent(regionItems, relativeItems, relativeOverlapItems, overlapItems, allRelatives, layoutTemp, recompute, secondLayoutLeftRight);
             this.layoutAbsoluteItems(items.filter(x => x.layoutType === 'absolute'));
             items.forEach(item => {
                 item.clearWillLayoutTag();
@@ -54290,7 +54292,7 @@
             top: { items: [], rect: { width: 0, height: 0 } },
             bottom: { items: [], rect: { width: 0, height: 0 } },
             z: { items: [], rect: { width: 0, height: 0 } }
-        }, allRelatives, layoutTemp, recompute) {
+        }, allRelatives, layoutTemp, recompute, secondLayoutLeftRight = false) {
             if (allRelatives.some(i => i.autoIndent)) {
                 const { top, bottom, left, right } = this._checkAutoIndent(allRelatives, layoutTemp);
                 if (top || bottom || left || right) {
@@ -54298,7 +54300,7 @@
                     this.bottomCurrent = layoutTemp.bottom - bottom;
                     this.leftCurrent = layoutTemp.left + left;
                     this.rightCurrent = layoutTemp.right - right;
-                    this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute);
+                    this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems, recompute, secondLayoutLeftRight);
                 }
             }
         }
@@ -54451,7 +54453,9 @@
             top: { items: [], rect: { width: 0, height: 0 } },
             bottom: { items: [], rect: { width: 0, height: 0 } },
             z: { items: [], rect: { width: 0, height: 0 } }
-        }, recompute) {
+        }, recompute, secondLayoutLeftRight = false) {
+            const leftBeforeLayout = this.leftCurrent;
+            const rightBeforeLayout = this.rightCurrent;
             let regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
             let regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
             regionRelativeItems
@@ -54470,6 +54474,16 @@
             this._layoutRelativeOverlap('top', overlapItems.top, recompute);
             this._layoutRelativeOverlap('bottom', overlapItems.bottom, recompute);
             regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
+            if (secondLayoutLeftRight) {
+                this.leftCurrent = leftBeforeLayout;
+                this.rightCurrent = rightBeforeLayout;
+                regionRelativeItems
+                    .filter(x => x.layoutOrient === 'left' || x.layoutOrient === 'right')
+                    .forEach(item => {
+                    this._layoutRelativeItem(item, recompute);
+                });
+                regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
+            }
             const { regionWidth, regionHeight } = this._layoutRegionItem(regionItems, regionRelativeTotalWidth, regionRelativeTotalHeight);
             regionRelativeItems.concat(regionRelativeOverlapItems).forEach(item => {
                 if (['left', 'right'].includes(item.layoutOrient)) {
@@ -56783,6 +56797,11 @@
                 plugin.onBeforeInitChart && plugin.onBeforeInitChart(this, chartSpec, actionSource);
             });
         }
+        onAfterInitChart(chartSpec, actionSource) {
+            this._plugins.forEach(plugin => {
+                plugin.onAfterInitChart && plugin.onAfterInitChart(this, chartSpec, actionSource);
+            });
+        }
         releaseAll() {
             super.releaseAll();
             this.globalInstance = null;
@@ -57870,6 +57889,7 @@
             if (!this._chart || !this._compiler) {
                 return false;
             }
+            this._chartPluginApply('onAfterInitChart', this._spec, actionSource);
             (_f = (_e = this._option.performanceHook) === null || _e === void 0 ? void 0 : _e.beforeCompileToVGrammar) === null || _f === void 0 ? void 0 : _f.call(_e, this);
             this._compiler.compile({ chart: this._chart, vChart: this }, option);
             (_h = (_g = this._option.performanceHook) === null || _g === void 0 ? void 0 : _g.afterCompileToVGrammar) === null || _h === void 0 ? void 0 : _h.call(_g, this);
@@ -58852,7 +58872,7 @@
         });
     };
 
-    const version = "2.0.7-alpha.5";
+    const version = "2.0.7-alpha.6";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -90344,7 +90364,12 @@
     }
 
     function getLegendAttributes(spec, rect) {
-        const { title = {}, item = {}, pager = {}, background = {}, type, id, visible, orient, position, data, filter, regionId, regionIndex, seriesIndex, seriesId, padding } = spec, restSpec = __rest$e(spec, ["title", "item", "pager", "background", "type", "id", "visible", "orient", "position", "data", "filter", "regionId", "regionIndex", "seriesIndex", "seriesId", "padding"]);
+        const restSpec = __rest$e(spec, ["title", "item", "pager", "background", "type", "id", "visible", "orient", "position", "data", "filter", "regionId", "regionIndex", "seriesIndex", "seriesId", "padding"]);
+        let { title = {}, item = {}, pager = {}, background = {} } = spec;
+        title = cloneDeep(title);
+        item = cloneDeep(item);
+        pager = cloneDeep(pager);
+        background = cloneDeep(background);
         const attrs = restSpec;
         if (title.visible) {
             attrs.title = transformLegendTitleAttributes(title);
@@ -92344,7 +92369,7 @@
                     return;
                 }
                 this.clearOutEvent();
-                this.hide();
+                this.hideCrosshair();
             };
             this._handleTooltipShow = (params) => {
                 const tooltipData = params.tooltipData;
@@ -92366,7 +92391,7 @@
             };
             this._handleTooltipHideOrRelease = () => {
                 this.clearOutEvent();
-                this.hide();
+                this.hideCrosshair();
             };
             this.enable = true;
             this.showDefault = true;
@@ -92434,17 +92459,20 @@
             return this._limitBounds;
         }
         _showDefaultCrosshairBySpec() {
+            let hasDefaultCrosshair = false;
             Object.keys(this._stateByField).forEach(field => {
                 const fieldSpec = this._spec[field];
                 if (fieldSpec && fieldSpec.visible && fieldSpec.defaultSelect) {
                     const { axisIndex = 0, datum } = fieldSpec.defaultSelect;
                     const axis = this._option.getComponentsByKey('axes').find(c => c.getSpecIndex() === axisIndex);
                     if (axis) {
+                        hasDefaultCrosshair = true;
                         this._stateByField[field].currentValue.clear();
                         this._stateByField[field].currentValue.set(axisIndex, { axis, datum });
                     }
                 }
             });
+            return hasDefaultCrosshair;
         }
         _updateVisibleCrosshair() {
             let hasVisible = false;
@@ -92463,8 +92491,8 @@
         }
         _showDefaultCrosshair() {
             if (this.showDefault) {
-                this._showDefaultCrosshairBySpec();
-                this.layoutByValue(false);
+                const hasDefault = this._showDefaultCrosshairBySpec();
+                hasDefault && this.layoutByValue(false);
             }
             else {
                 this._updateVisibleCrosshair();
@@ -101998,6 +102026,79 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
+    const MIN_ZOOM = 0.1;
+    const MAX_ZOOM = 10;
+    class ChartResizeZoomPlugin extends BasePlugin {
+        constructor() {
+            super(ChartResizeZoomPlugin.type);
+            this.type = 'ChartResizeZoomPlugin';
+            this._zoom = 1;
+            this._onWheel = (e) => {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                const zoom = Math.pow(1.005, -e.deltaY * Math.pow(16, e.deltaMode) * 0.2 * this._rate);
+                const center = { x: e.offsetX, y: e.offsetY };
+                this.zoom(zoom, center);
+            };
+        }
+        onAfterInitChart(service, chartSpec) {
+            var _a, _b, _c, _d, _e;
+            const chart = service.globalInstance;
+            const spec = (_b = (_a = chart.getSpec()) === null || _a === void 0 ? void 0 : _a[ChartResizeZoomPlugin.specKey]) !== null && _b !== void 0 ? _b : { enabled: false };
+            if (spec.enabled !== true) {
+                return;
+            }
+            this._minZoom = (_c = spec.min) !== null && _c !== void 0 ? _c : MIN_ZOOM;
+            this._maxZoom = (_d = spec.max) !== null && _d !== void 0 ? _d : MAX_ZOOM;
+            this._rate = (_e = spec.rate) !== null && _e !== void 0 ? _e : 0.1;
+            this._container = chart.getContainer();
+            this._triggerEvent = getDefaultTriggerEventByMode(service.globalInstance.getChart().getOption().mode).zoom;
+            if (this._container && this._triggerEvent) {
+                this._container.addEventListener(this._triggerEvent, this._onWheel);
+            }
+        }
+        zoom(zoom, pointerPos) {
+            const vchart = this.service.globalInstance;
+            if (!vchart) {
+                return;
+            }
+            const oldZoom = this._zoom;
+            let tempZoom = this._zoom * zoom;
+            if ((tempZoom <= this._minZoom && zoom < 1) || (tempZoom >= this._maxZoom && zoom > 1)) {
+                if (tempZoom <= this._minZoom && this._zoom > this._minZoom) {
+                    tempZoom = this._minZoom;
+                }
+                else if (tempZoom >= this._maxZoom && this._zoom < this._maxZoom) {
+                    tempZoom = this._maxZoom;
+                }
+                else {
+                    return;
+                }
+            }
+            if (tempZoom === oldZoom) {
+                return;
+            }
+            const actualZoomRatio = tempZoom / oldZoom;
+            this._zoom = tempZoom;
+            vchart.resize(vchart.getCurrentSize().width * this._zoom, vchart.getCurrentSize().height * this._zoom);
+            if (pointerPos && this._container) {
+                const { scrollLeft, scrollTop } = this._container;
+                this._container.scrollLeft = scrollLeft + pointerPos.x * (actualZoomRatio - 1);
+                this._container.scrollTop = scrollTop + pointerPos.y * (actualZoomRatio - 1);
+            }
+        }
+        release() {
+            if (this._container && this._triggerEvent) {
+                this._container.removeEventListener(this._triggerEvent, this._onWheel);
+            }
+        }
+    }
+    ChartResizeZoomPlugin.specKey = 'resizeZoom';
+    ChartResizeZoomPlugin.type = 'ChartResizeZoomPlugin';
+    const registerChartResizeZoomPlugin = () => {
+        registerChartPlugin(ChartResizeZoomPlugin);
+    };
+
     function registerStateTransition() {
         const animationTransitionRegistry = AnimationTransitionRegistry.getInstance();
         animationTransitionRegistry.registerTransition('update', '*', () => ({
@@ -102427,6 +102528,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.CartesianSeries = CartesianSeries;
     exports.CartesianSymlogAxis = CartesianSymlogAxis;
     exports.CartesianTimeAxis = CartesianTimeAxis;
+    exports.ChartResizeZoomPlugin = ChartResizeZoomPlugin;
     exports.CirclePackingChart = CirclePackingChart;
     exports.CirclePackingSeries = CirclePackingSeries;
     exports.CircularProgressChart = CircularProgressChart;
@@ -102678,6 +102780,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.registerCartesianSymlogAxis = registerCartesianSymlogAxis;
     exports.registerCartesianTimeAxis = registerCartesianTimeAxis;
     exports.registerChartPlugin = registerChartPlugin;
+    exports.registerChartResizeZoomPlugin = registerChartResizeZoomPlugin;
     exports.registerCirclePackingChart = registerCirclePackingChart;
     exports.registerCirclePackingSeries = registerCirclePackingSeries;
     exports.registerCircularProgressChart = registerCircularProgressChart;