@visactor/vchart 1.4.1 → 1.4.2-alpha.0

package/build/index.js

@@ -47471,13 +47471,25 @@
 	    const leftArcs = Array.from(this._arcLeft.values()),
 	      rightArcs = Array.from(this._arcRight.values()),
 	      arcs = [];
-	    return "inside" === position ? (arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks)), arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks))) : (arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks)), arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks))), arcs;
+	    switch (position) {
+	      case "inside":
+	      case "inside-inner":
+	      case "inside-outer":
+	        arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks)), arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks));
+	        break;
+	      default:
+	        arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks)), arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks));
+	    }
+	    return arcs;
 	  }
 	  _layoutInsideLabels(arcs, attribute, currentMarks) {
+	    var _a, _b;
 	    const labelConfig = attribute,
-	      spaceWidth = labelConfig.spaceWidth;
+	      spaceWidth = labelConfig.spaceWidth,
+	      position = null !== (_a = null == labelConfig ? void 0 : labelConfig.position) && void 0 !== _a ? _a : "inside",
+	      offsetRadius = null !== (_b = null == labelConfig ? void 0 : labelConfig.offsetRadius) && void 0 !== _b ? _b : -spaceWidth;
 	    return arcs.forEach(arc => {
-	      var _a, _b;
+	      var _a, _b, _c;
 	      const {
 	          labelSize: labelSize,
 	          radian: radian
@@ -47493,9 +47505,12 @@
 	      const text = this._getFormatLabelText(arc.refDatum, limit);
 	      arc.labelText = text;
 	      const labelWidth = Math.min(limit, arc.labelSize.width),
-	        align = this._computeAlign(arc, attribute),
-	        labelRadius = outerRadius - spaceWidth - ("left" === align ? labelWidth : "right" === align ? 0 : labelWidth / 2);
-	      arc.labelPosition = circlePoint(arc.circleCenter.x, arc.circleCenter.y, labelRadius, arc.middleAngle), arc.labelLimit = labelWidth, isGreater(labelWidth, 0) || (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = null == attribute ? void 0 : attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : arc.middleAngle;
+	        align = this._computeAlign(arc, attribute);
+	      let labelRadius,
+	        alignOffset = 0;
+	      "inside" === position && (alignOffset = "left" === align ? labelWidth : "right" === align ? 0 : labelWidth / 2), labelRadius = "inside-inner" === position ? innerRadius - offsetRadius + alignOffset : outerRadius + offsetRadius - alignOffset, arc.labelPosition = circlePoint(arc.circleCenter.x, arc.circleCenter.y, labelRadius, arc.middleAngle), arc.labelLimit = labelWidth, isGreater(labelWidth, 0) || (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = null == attribute ? void 0 : attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : arc.middleAngle;
+	      let offsetAngle = null !== (_c = null == labelConfig ? void 0 : labelConfig.offsetAngle) && void 0 !== _c ? _c : 0;
+	      ["inside-inner", "inside-outer"].includes(position) && (offsetAngle += Math.PI / 2), arc.angle += offsetAngle;
 	    }), arcs;
 	  }
 	  _layoutOutsideLabels(arcs, attribute, currentMarks) {
@@ -47549,7 +47564,7 @@
 	    const width = 2 * center_x;
 	    return arcs.forEach(arc => {
 	      var _a, _b;
-	      arc.labelVisible && (isLess(arc.pointB.x, line2MinLength + spaceWidth) || isGreater(arc.pointB.x, width - line2MinLength - spaceWidth)) && (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = null == attribute ? void 0 : attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : 0, arc.labelLine = Object.assign({}, null == attribute ? void 0 : attribute.line);
+	      arc.labelVisible && (isLess(arc.pointB.x, line2MinLength + spaceWidth) || isGreater(arc.pointB.x, width - line2MinLength - spaceWidth)) && (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = null == attribute ? void 0 : attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : 0, (null == attribute ? void 0 : attribute.offsetAngle) && (arc.angle += attribute.offsetAngle), arc.labelLine = Object.assign({}, null == attribute ? void 0 : attribute.line);
 	    }), arcs;
 	  }
 	  _computeX(arc, attribute, currentMarks) {
@@ -55276,6 +55291,8 @@
 	    ChartEvent["tooltipShow"] = "tooltipShow";
 	    ChartEvent["tooltipHide"] = "tooltipHide";
 	    ChartEvent["tooltipRelease"] = "tooltipRelease";
+	    ChartEvent["afterResize"] = "afterResize";
+	    ChartEvent["afterRender"] = "afterRender";
 	})(ChartEvent || (ChartEvent = {}));
 	var Event_Source_Type;
 	(function (Event_Source_Type) {
@@ -57251,6 +57268,9 @@
 	        fontSize: THEME_CONSTANTS.defaultFontSize
 	    });
 	};
+	const measureText = (text, textSpec, option, useNaiveCanvas) => {
+	    return initTextMeasure(textSpec, option, useNaiveCanvas).measure(text);
+	};
 
 	function mergeFields(targetFields, mergeFields) {
 	    for (let i = 0; i < mergeFields.length; i++) {
@@ -58925,7 +58945,8 @@
 	        const logger = new Logger((_a = this._option.logLevel) !== null && _a !== void 0 ? _a : LoggerLevel.Error);
 	        if ((_b = this._option) === null || _b === void 0 ? void 0 : _b.onError) {
 	            logger.addErrorHandler((...args) => {
-	                this._option.onError(...args);
+	                var _a, _b;
+	                (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);
 	            });
 	        }
 	        this._view = new View(Object.assign(Object.assign({ width: this._width, height: this._height, hover: false, select: false, container: (_c = this._container.dom) !== null && _c !== void 0 ? _c : null, renderCanvas: (_d = this._container.canvas) !== null && _d !== void 0 ? _d : null, hooks: this._option.performanceHook, cursor: false }, this._option), { mode: toRenderMode(this._option.mode), autoFit: false, eventConfig: {
@@ -58936,6 +58957,10 @@
 	                (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.onLayout(this._view);
 	            }, logger: logger, logLevel: logger.level() }));
 	        this._setCanvasStyle();
+	        this.getStage().hooks.afterRender.tap('chart-event', () => {
+	            var _a, _b;
+	            (_b = (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.getEvent()) === null || _b === void 0 ? void 0 : _b.emit(ChartEvent.afterRender, { chart: this._compileChart });
+	        });
 	        const interactive = this._option.interactive;
 	        if (interactive !== false) {
 	            this._viewListeners.forEach(listener => {
@@ -59307,6 +59332,10 @@
 	    return resultA;
 	}
 
+	const VCHART_UTILS = {
+	    measureText
+	};
+
 	class VChart {
 	    static useChart(charts) {
 	        charts.forEach(c => Factory.registerChart(c.type, c));
@@ -59361,8 +59390,8 @@
 	        this._onResize = debounce((...args) => {
 	            const { width, height } = this._getCurSize();
 	            if (this._curSize.width !== width || this._curSize.height !== height) {
-	                this.resize(width, height);
 	                this._curSize = { width, height };
+	                this.resize(width, height);
 	            }
 	        }, 100);
 	        this._option = merge$1(this._option, options);
@@ -59886,6 +59915,7 @@
 	            this._chart.onResize(width, height);
 	            (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterResizeWithUpdate) === null || _d === void 0 ? void 0 : _d.call(_c);
 	            yield ((_f = (_e = this._compiler).resize) === null || _f === void 0 ? void 0 : _f.call(_e, width, height));
+	            this._event.emit(ChartEvent.afterResize, { chart: this._chart });
 	            return this;
 	        });
 	    }
@@ -59905,7 +59935,11 @@
 	    }
 	    on(eType, query, handler) {
 	        var _a;
-	        this._userEvents.push({ eType, query, handler });
+	        this._userEvents.push({
+	            eType,
+	            query: typeof query === 'function' ? null : query,
+	            handler: typeof query === 'function' ? query : handler
+	        });
 	        (_a = this._event) === null || _a === void 0 ? void 0 : _a.on(eType, query, handler);
 	    }
 	    off(eType, handler) {
@@ -60291,6 +60325,7 @@
 	VChart.globalConfig = {
 	    uniqueTooltip: true
 	};
+	VChart.Utils = VCHART_UTILS;
 
 	var STATE_VALUE_ENUM;
 	(function (STATE_VALUE_ENUM) {
@@ -62753,6 +62788,9 @@
 	    getLabelSpec() {
 	        return this._label;
 	    }
+	    setLabelSpec(label) {
+	        this._label = array(label);
+	    }
 	    addLabelSpec(label) {
 	        if (!this._label) {
 	            this._label = [];
@@ -63432,7 +63470,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.4.1";
+	const version = "1.4.2-alpha.0";
 	Logger.getInstance(LoggerLevel.Error);
 
 	const WordCloud3dAnimation = (params) => {
@@ -68393,6 +68431,11 @@
 	        (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterComponentCompile) === null || _d === void 0 ? void 0 : _d.call(_c);
 	    }
 	    release() {
+	        this.getComponents().forEach(component => {
+	            if (component.type === ComponentTypeEnum.tooltip) {
+	                component.triggerReleaseEvent();
+	            }
+	        });
 	        super.release();
 	        this.clear();
 	        [...this._components, ...this._regions, ...this._series].forEach(m => {
@@ -71933,9 +71976,8 @@
 	    _buildMarkAttributeContext() {
 	        super._buildMarkAttributeContext();
 	        this._markAttributeContext.valueToPosition = this.valueToPosition.bind(this);
-	        this._markAttributeContext.getCenter = () => {
-	            return this.angleAxisHelper.center();
-	        };
+	        this._markAttributeContext.getCenter = () => this.angleAxisHelper.center();
+	        this._markAttributeContext.getLayoutRadius = () => this._computeLayoutRadius();
 	    }
 	    valueToPosition(angleValue, radiusValue) {
 	        if (isNil$1(angleValue) || isNil$1(radiusValue) || !this.angleAxisHelper || !this.radiusAxisHelper) {
@@ -72552,7 +72594,8 @@
 	        });
 	        this._segmentMark = this._createMark(GaugeSeries.mark.segment, {
 	            parent: this._arcGroupMark,
-	            isSeriesMark: true
+	            isSeriesMark: true,
+	            label: this._preprocessLabelSpec()
 	        });
 	    }
 	    initMarkStyle() {
@@ -72578,6 +72621,7 @@
 	                zIndex: 200,
 	                forceShowCap: true
 	            });
+	            segmentMark.setLabelSpec(this._preprocessLabelSpec());
 	            this._trigger.registerMark(segmentMark);
 	            (_b = this._tooltipHelper) === null || _b === void 0 ? void 0 : _b.activeTriggerSet.mark.add(segmentMark);
 	        }
@@ -72608,6 +72652,10 @@
 	        const angle = this.angleAxisHelper.dataToPosition([datum[SEGMENT_FIELD_END]]);
 	        return angle - ((_a = this._spec.padAngle) !== null && _a !== void 0 ? _a : 0) / 2;
 	    }
+	    _preprocessLabelSpec() {
+	        const labelSpec = mergeSpec({ animation: this._spec.animation }, this._spec.label);
+	        return labelSpec;
+	    }
 	    initAnimation() {
 	        var _a, _b;
 	        const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
@@ -77468,19 +77516,31 @@
 	        this._tooltipHelper = new SankeySeriesTooltipHelper(this);
 	    }
 	    getNodeOrdinalColorScale(item) {
-	        var _a, _b, _c, _d, _e, _f, _g, _h;
-	        const colorDomain = !isNil$1((_b = (_a = this._option.globalScale.getScale('color')) === null || _a === void 0 ? void 0 : _a.domain()) === null || _b === void 0 ? void 0 : _b[0])
+	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+	        if (!isNil$1((_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalScale) === null || _b === void 0 ? void 0 : _b.getScale('color')) === null || _c === void 0 ? void 0 : _c._specified)) {
+	            const specified = this._option.globalScale.getScale('color')._specified;
+	            const colorDomain = [];
+	            const colorRange = [];
+	            for (const key in specified) {
+	                colorDomain.push(key);
+	                colorRange.push(specified[key]);
+	            }
+	            const ordinalScale = new ColorOrdinalScale();
+	            (_e = (_d = ordinalScale.domain(colorDomain)).range) === null || _e === void 0 ? void 0 : _e.call(_d, colorRange);
+	            return ordinalScale.scale(item);
+	        }
+	        const colorDomain = !isNil$1((_g = (_f = this._option.globalScale.getScale('color')) === null || _f === void 0 ? void 0 : _f.domain()) === null || _g === void 0 ? void 0 : _g[0])
 	            ? this._option.globalScale.getScale('color').domain()
 	            : this.getNodeList();
-	        let colorRange = (_d = (_c = this._option.globalScale.getScale('color')) === null || _c === void 0 ? void 0 : _c.range()) !== null && _d !== void 0 ? _d : getDataScheme(this._option.getTheme().colorScheme, this.type);
-	        if (((_e = this._option.globalScale.getScale('color')) === null || _e === void 0 ? void 0 : _e.domain().length) === 0 ||
+	        let colorRange = (_j = (_h = this._option.globalScale.getScale('color')) === null || _h === void 0 ? void 0 : _h.range()) !== null && _j !== void 0 ? _j : getDataScheme(this._option.getTheme().colorScheme, this.type);
+	        if (((_k = this._option.globalScale.getScale('color')) === null || _k === void 0 ? void 0 : _k.domain().length) === 0 ||
 	            isNil$1(this._option.globalScale.getScale('color').domain()[0])) {
 	            if (colorDomain.length > 10) {
-	                colorRange = (_f = getDataScheme(this._option.getTheme().colorScheme, this.type)[1]) === null || _f === void 0 ? void 0 : _f.scheme;
+	                colorRange = (_l = getDataScheme(this._option.getTheme().colorScheme, this.type)[1]) === null || _l === void 0 ? void 0 : _l.scheme;
 	            }
 	        }
 	        const ordinalScale = new ColorOrdinalScale();
-	        (_h = (_g = ordinalScale.domain(colorDomain)).range) === null || _h === void 0 ? void 0 : _h.call(_g, colorRange);
+	        (_o = (_m = ordinalScale.domain(colorDomain)).range) === null || _o === void 0 ? void 0 : _o.call(_m, colorRange);
 	        return ordinalScale.scale(item);
 	    }
 	    getNodeList() {
@@ -85964,7 +86024,7 @@
 	        component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
 	    }
 	    _getAxisAttributes() {
-	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 	        const spec = this._spec;
 	        let titleAngle = spec.title.angle;
 	        let titleTextStyle;
@@ -86041,12 +86101,14 @@
 	                    text: transformStateStyle(spec.title.state),
 	                    shape: transformStateStyle((_g = spec.title.shape) === null || _g === void 0 ? void 0 : _g.state),
 	                    background: transformStateStyle((_h = spec.title.background) === null || _h === void 0 ? void 0 : _h.state)
-	                }
+	                },
+	                pickable: ((_j = spec.title.style) === null || _j === void 0 ? void 0 : _j.pickable) !== false,
+	                childrenPickable: ((_k = spec.title.style) === null || _k === void 0 ? void 0 : _k.pickable) !== false
 	            },
 	            panel: {
-	                visible: (_j = spec.background) === null || _j === void 0 ? void 0 : _j.visible,
-	                style: transformToGraphic((_k = spec.background) === null || _k === void 0 ? void 0 : _k.style),
-	                state: transformStateStyle((_l = spec.background) === null || _l === void 0 ? void 0 : _l.state)
+	                visible: (_l = spec.background) === null || _l === void 0 ? void 0 : _l.visible,
+	                style: transformToGraphic((_m = spec.background) === null || _m === void 0 ? void 0 : _m.style),
+	                state: transformStateStyle((_o = spec.background) === null || _o === void 0 ? void 0 : _o.state)
 	            }
 	        };
 	    }
@@ -93856,12 +93918,6 @@
 	    }
 	    release() {
 	        var _a, _b;
-	        this.event.emit(ChartEvent.tooltipHide, {
-	            tooltip: this
-	        });
-	        this.event.emit(ChartEvent.tooltipRelease, {
-	            tooltip: this
-	        });
 	        super.release();
 	        this._eventList.forEach(({ eventType, handler }) => {
 	            this.event.off(eventType, handler);
@@ -93870,6 +93926,14 @@
 	        (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.release) === null || _b === void 0 ? void 0 : _b.call(_a);
 	        this._isTooltipShown = false;
 	    }
+	    triggerReleaseEvent() {
+	        this.event.emit(ChartEvent.tooltipHide, {
+	            tooltip: this
+	        });
+	        this.event.emit(ChartEvent.tooltipRelease, {
+	            tooltip: this
+	        });
+	    }
 	    _initHandler() {
 	        var _a, _b, _c;
 	        const renderMode = (_a = this._spec.renderMode) !== null && _a !== void 0 ? _a : 'html';