@visactor/vchart 1.1.1-beta.1 → 1.2.0-beta.1

package/build/index.js

@@ -7937,8 +7937,11 @@
 	    return Logger.getInstance().warn(`[VChart warn]: ${msg}`);
 	};
 	const error$1 = (msg, detail, err) => {
-	    const errIns = new Error(msg);
-	    return Logger.getInstance().error(`[VChart error]: ${errIns}`, detail);
+	    if (isFunction(config.errorHandler)) {
+	        config.errorHandler.call(null, msg, detail);
+	        return;
+	    }
+	    throw new Error(msg);
 	};
 	const config = {
 	    silent: false,
@@ -8341,7 +8344,8 @@
 	function min$2(data, field) {
 	    const initialData = field ? +data[0][field] : +data[0];
 	    if (!isValidNumber(initialData)) {
-	        throw new Error('invalid data');
+	        warn('invalid data');
+	        return 0;
 	    }
 	    const min = data.reduce((pre, _cur) => {
 	        const cur = field ? +_cur[field] : +_cur;
@@ -8355,7 +8359,8 @@
 	function max$2(data, field) {
 	    const initialData = field ? +data[0][field] : +data[0];
 	    if (!isValidNumber(initialData)) {
-	        throw new Error('invalid data');
+	        warn('invalid data');
+	        return 0;
 	    }
 	    const max = data.reduce((pre, _cur) => {
 	        const cur = field ? +_cur[field] : +_cur;
@@ -41365,24 +41370,6 @@
 	function defaultLabelPosition(type) {
 	  return "rect" === type ? DefaultRectPositions : DefaultPositions;
 	}
-	function clampText(text, width, height) {
-	  const {
-	      x1: x1,
-	      x2: x2,
-	      y1: y1,
-	      y2: y2
-	    } = text.AABBBounds,
-	    minX = Math.min(x1, x2),
-	    maxX = Math.max(x1, x2),
-	    minY = Math.min(y1, y2),
-	    maxY = Math.max(y1, y2);
-	  let dx = 0,
-	    dy = 0;
-	  return minX < 0 && maxX - minX <= width ? dx = -minX : maxX > width && minX - (maxX - width) >= 0 && (dx = width - maxX), minY < 0 && maxY - minY <= height ? dy = -minY : maxY > height && minY - (maxY - height) >= 0 && (dy = height - maxY), {
-	    dx: dx,
-	    dy: dy
-	  };
-	}
 
 	const fadeIn = function () {
 	    let textAttribute = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -41461,17 +41448,9 @@
 	    this._bmpTool = bmpTool;
 	  }
 	  render() {
-	    this._prepare();
-	    const {
-	      overlap: overlap,
-	      smartInvert: smartInvert,
-	      dataFilter: dataFilter,
-	      customLayoutFunc: customLayoutFunc,
-	      customOverlapFunc: customOverlapFunc
-	    } = this.attribute;
-	    let labels,
-	      data = this.attribute.data;
-	    isFunction(dataFilter) && (data = dataFilter(data)), isFunction(customLayoutFunc) ? labels = customLayoutFunc(data, d => this._idToGraphic.get(d.id)) : (labels = this.layout(data), isFunction(customOverlapFunc) ? labels = customOverlapFunc(labels, d => this._idToGraphic.get(d.id)) : !1 !== overlap && (labels = this._overlapping(labels))), !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels);
+	    const currentBaseMarks = this._checkMarks(),
+	      labels = this.layout(currentBaseMarks);
+	    this._smartInvert(labels), this._renderLabels(labels);
 	  }
 	  _bindEvent(target) {
 	    if (!target) return;
@@ -41490,53 +41469,52 @@
 	    const text = createText(attributes);
 	    return this._bindEvent(text), this._setStates(text), text;
 	  }
-	  _prepare() {
+	  _checkMarks() {
 	    var _a;
 	    const baseMarks = this.getBaseMarks(),
 	      currentBaseMarks = [];
-	    if (baseMarks.forEach(mark => {
+	    return baseMarks.forEach(mark => {
 	      "willRelease" !== mark.releaseStatus && currentBaseMarks.push(mark);
-	    }), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), this._baseMarks = currentBaseMarks, !currentBaseMarks || 0 === currentBaseMarks.length) return;
+	    }), this._prevRelationMap = new Map(this._relationMap), null === (_a = this._relationMap) || void 0 === _a || _a.clear(), currentBaseMarks;
+	  }
+	  layout(currentMarks) {
 	    const {
+	      textStyle: textStyle,
+	      position: position,
+	      offset: offset
+	    } = this.attribute;
+	    let {
 	      data: data
 	    } = this.attribute;
-	    if (data && 0 !== data.length) {
-	      this._idToGraphic || (this._idToGraphic = new Map());
-	      for (let i = 0; i < currentBaseMarks.length; i++) {
-	        const textData = data[i],
-	          baseMark = currentBaseMarks[i];
-	        textData && baseMark && (isValid(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToGraphic.set(textData.id, baseMark));
-	      }
-	    }
-	  }
-	  layout() {
-	    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-	    const {
-	        textStyle = {},
-	        position: position,
-	        offset: offset
-	      } = this.attribute,
-	      labels = [];
+	    if (isFunction(data) && (data = data({})), !data || 0 === data.length) return [];
+	    let labels = [];
+	    isFunction(this.attribute.sort) && currentMarks && currentMarks.length && (currentMarks = currentMarks.sort(this.attribute.sort)), this._relationMap || (this._relationMap = new Map());
 	    for (let i = 0; i < data.length; i++) {
 	      const textData = data[i],
-	        baseMark = this._idToGraphic.get(textData.id),
-	        labelAttribute = Object.assign(Object.assign({}, textStyle), textData),
-	        text = this._createLabelText(labelAttribute),
-	        textBounds = this.getGraphicBounds(text),
-	        graphicBounds = this.getGraphicBounds(baseMark, {
-	          x: textData.x,
-	          y: textData.y
-	        }),
-	        textLocation = this.labeling(textBounds, graphicBounds, isFunction(position) ? position(textData) : position, offset);
-	      textLocation && (labelAttribute.x = textLocation.x, labelAttribute.y = textLocation.y, text.setAttributes(textLocation), labels.push(text));
+	        baseMark = null == currentMarks ? void 0 : currentMarks[i],
+	        labelAttribute = Object.assign(Object.assign(Object.assign({}, textStyle), textData), {
+	          _relatedIndex: i
+	        });
+	      if (this._relationMap.set(i, baseMark), textData) {
+	        const text = createText(labelAttribute);
+	        text.update();
+	        const textBounds = this.getGraphicBounds(text),
+	          graphicBounds = this.getGraphicBounds(baseMark, {
+	            x: textData.x,
+	            y: textData.y
+	          }),
+	          textAttributes = this.labeling(textBounds, graphicBounds, isFunction(position) ? position(textData) : position, offset);
+	        if (!textAttributes) continue;
+	        labelAttribute.x = textAttributes.x, labelAttribute.y = textAttributes.y, labels.push(labelAttribute);
+	      }
 	    }
-	    return labels;
+	    return this._baseMarks = currentMarks, !1 !== this.attribute.overlap && (labels = this.overlapping(labels, this.attribute.overlap)), labels;
 	  }
-	  _overlapping(labels) {
-	    var _a, _b, _c, _d;
+	  overlapping(labels) {
+	    let option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	    var _a, _b, _c, _d, _e;
 	    if (0 === labels.length) return [];
-	    const option = this.attribute.overlap,
-	      result = [],
+	    const result = [],
 	      baseMarkGroup = this.getBaseMarkGroup(),
 	      size = null !== (_a = option.size) && void 0 !== _a ? _a : {
 	        width: null !== (_b = null == baseMarkGroup ? void 0 : baseMarkGroup.AABBBounds.width()) && void 0 !== _b ? _b : 0,
@@ -41557,45 +41535,27 @@
 	    }));
 	    for (let i = 0; i < labels.length; i++) {
 	      if (!1 === labels[i].visible) continue;
-	      const text = labels[i],
-	        baseMark = this._idToGraphic.get(text.attribute.id);
+	      const text = createText(labels[i]),
+	        baseMark = null === (_e = this._baseMarks) || void 0 === _e ? void 0 : _e[i];
 	      if (text.update(), canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
 	        if (!checkBounds) {
-	          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
+	          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(Object.assign({}, text.attribute));
 	          continue;
 	        }
 	        if (checkBounds && (null == baseMark ? void 0 : baseMark.AABBBounds) && canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)) {
-	          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
-	          continue;
-	        }
-	      }
-	      if (clampForce) {
-	        const {
-	          dx = 0,
-	          dy = 0
-	        } = clampText(text, bmpTool.width, bmpTool.height);
-	        if ((0 !== dx || 0 !== dy) && canPlace(bmpTool, bitmap, {
-	          x1: text.AABBBounds.x1 + dx,
-	          x2: text.AABBBounds.x2 + dx,
-	          y1: text.AABBBounds.y1 + dy,
-	          y2: text.AABBBounds.y2 + dy
-	        })) {
-	          text.setAttributes({
-	            x: text.attribute.x + dx,
-	            y: text.attribute.y + dy
-	          }), result.push(text);
+	          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(Object.assign({}, text.attribute));
 	          continue;
 	        }
 	      }
 	      let hasPlace = !1;
 	      for (let j = 0; j < strategy.length; j++) if (hasPlace = place$2(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling), !1 !== hasPlace) {
-	        text.setAttributes({
+	        result.push(Object.assign(Object.assign({}, text.attribute), {
 	          x: hasPlace.x,
 	          y: hasPlace.y
-	        }), result.push(text);
+	        }));
 	        break;
 	      }
-	      !hasPlace && !hideOnHit && result.push(text);
+	      !hasPlace && !hideOnHit && result.push(Object.assign({}, text.attribute));
 	    }
 	    return isFunction(this.onAfterLabelOverlap) && this.onAfterLabelOverlap(bitmap), result;
 	  }
@@ -41627,16 +41587,17 @@
 	      easing = null !== (_d = animationConfig.easing) && void 0 !== _d ? _d : DefaultLabelAnimation.easing,
 	      delay = null !== (_e = animationConfig.delay) && void 0 !== _e ? _e : 0,
 	      currentTextMap = new Map(),
-	      prevTextMap = this._graphicToText || new Map(),
+	      prevTextMap = this._textMap || new Map(),
 	      texts = [];
-	    labels.forEach((text, index) => {
-	      const relatedGraphic = this._idToGraphic.get(text.attribute.id),
+	    labels.forEach((label, index) => {
+	      const text = this._createLabelText(label),
+	        relatedGraphic = this._relationMap.get(label._relatedIndex),
 	        state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter";
 	      if ("enter" === state) if (texts.push(text), currentTextMap.set(relatedGraphic, text), !disableAnimation && relatedGraphic) {
 	        const {
 	          from: from,
 	          to: to
-	        } = getAnimationAttributes(text.attribute, "fadeIn");
+	        } = getAnimationAttributes(label, "fadeIn");
 	        this.add(text), relatedGraphic.onAnimateBind = () => {
 	          text.setAttributes(from);
 	          const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
@@ -41661,7 +41622,7 @@
 	      disableAnimation ? this.removeChild(label) : null == label || label.animate().to(getAnimationAttributes(label.attribute, "fadeOut").to, duration, easing).onEnd(() => {
 	        this.removeChild(label);
 	      });
-	    }), this._graphicToText = currentTextMap;
+	    }), this._textMap = currentTextMap;
 	  }
 	  _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, _ref) {
 	    let {
@@ -41704,32 +41665,21 @@
 	    return listener;
 	  }
 	  _smartInvert(labels) {
-	    const option = this.attribute.smartInvert || {},
-	      {
-	        textType: textType,
-	        contrastRatiosThreshold: contrastRatiosThreshold,
-	        alternativeColors: alternativeColors
-	      } = option;
-	    for (let i = 0; i < labels.length; i++) {
-	      const label = labels[i];
+	    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+	    if (!1 !== this.attribute.smartInvert) for (let i = 0; i < labels.length; i++) {
+	      const label = null == labels ? void 0 : labels[i];
 	      if (!label) continue;
-	      const baseMark = this._idToGraphic.get(label.attribute.id),
-	        isInside = canPlaceInside(label.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds);
-	      if (label.attribute.stroke && label.attribute.lineWidth > 0) label.setAttributes({
-	        fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
-	      });else if (isInside) {
-	        const backgroundColor = baseMark.attribute.fill,
-	          foregroundColor = label.attribute.fill;
-	        label.setAttributes({
-	          fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
-	        });
-	      } else if (label.attribute.lineWidth > 0) {
-	        const backgroundColor = label.attribute.stroke,
-	          foregroundColor = label.attribute.fill;
-	        label.setAttributes({
-	          stroke: baseMark.attribute.fill,
-	          fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
-	        });
+	      const isInside = canPlaceInside(createText(label).AABBBounds, null === (_a = this._relationMap.get(label._relatedIndex)) || void 0 === _a ? void 0 : _a.AABBBounds);
+	      if (label.stroke && label.lineWidth > 0) label.fill = labelSmartInvert(label.fill, label.stroke, null === (_b = this.attribute.smartInvert) || void 0 === _b ? void 0 : _b.textType, null === (_c = this.attribute.smartInvert) || void 0 === _c ? void 0 : _c.contrastRatiosThreshold, null === (_d = this.attribute.smartInvert) || void 0 === _d ? void 0 : _d.alternativeColors);else if (isInside) {
+	        const backgroundColor = this._relationMap.get(label._relatedIndex).attribute.fill,
+	          foregroundColor = label.fill;
+	        label.fill = labelSmartInvert(foregroundColor, backgroundColor, null === (_e = this.attribute.smartInvert) || void 0 === _e ? void 0 : _e.textType, null === (_f = this.attribute.smartInvert) || void 0 === _f ? void 0 : _f.contrastRatiosThreshold, null === (_g = this.attribute.smartInvert) || void 0 === _g ? void 0 : _g.alternativeColors);
+	      } else if (label.lineWidth > 0) {
+	        const baseMark = this._relationMap.get(label._relatedIndex);
+	        label.stroke = baseMark.attribute.fill;
+	        const backgroundColor = label.stroke,
+	          foregroundColor = label.fill;
+	        label.fill = labelSmartInvert(foregroundColor, backgroundColor, null === (_h = this.attribute.smartInvert) || void 0 === _h ? void 0 : _h.textType, null === (_j = this.attribute.smartInvert) || void 0 === _j ? void 0 : _j.contrastRatiosThreshold, null === (_k = this.attribute.smartInvert) || void 0 === _k ? void 0 : _k.alternativeColors);
 	      }
 	    }
 	  }
@@ -51569,6 +51519,8 @@
 	(function (ChartEvent) {
 	    ChartEvent["initialized"] = "initialized";
 	    ChartEvent["rendered"] = "rendered";
+	    ChartEvent["renderFinished"] = "renderFinished";
+	    ChartEvent["animationFinished"] = "animationFinished";
 	    ChartEvent["regionSeriesDataFilterOver"] = "regionSeriesDataFilterOver";
 	    ChartEvent["afterInitData"] = "afterInitData";
 	    ChartEvent["afterInitEvent"] = "afterInitEvent";
@@ -53516,10 +53468,10 @@
 	        this._chart = this._eventDispatcher.globalInstance.getChart?.();
 	    }
 	    register(eType, handler) {
-	        throw new Error('Method not implemented.');
+	        (this._chart?.getOption().onError ?? error$1)('Method not implemented.');
 	    }
 	    unregister() {
-	        throw new Error('Method not implemented.');
+	        (this._chart?.getOption().onError ?? error$1)('Method not implemented.');
 	    }
 	    getTargetDimensionInfo(x, y) {
 	        const cartesianInfo = getCartesianDimensionInfo(this._chart, { x, y }) ?? [];
@@ -54156,7 +54108,7 @@
 	    });
 	    return viewData;
 	}
-	function dataToDataView(data, dataSet, sourceDataViews = []) {
+	function dataToDataView(data, dataSet, sourceDataViews = [], ctx = {}) {
 	    if (data instanceof DataView) {
 	        return data;
 	    }
@@ -54175,7 +54127,8 @@
 	        if (typeof fromDataId === 'string') {
 	            const fromDataView = sourceDataViews.find(dv => dv.name === fromDataId);
 	            if (!fromDataView) {
-	                throw new Error(`no data matches fromDataId ${fromDataId}`);
+	                (ctx.onError ?? error$1)(`no data matches fromDataId ${fromDataId}`);
+	                return null;
 	            }
 	            dataView.parse([fromDataView], {
 	                type: 'dataview'
@@ -54187,7 +54140,8 @@
 	        else if (typeof fromDataIndex === 'number') {
 	            const fromDataView = sourceDataViews[fromDataIndex];
 	            if (!fromDataView) {
-	                throw new Error(`no data matches fromDataIndex ${fromDataIndex}`);
+	                (ctx.onError ?? error$1)(`no data matches fromDataIndex ${fromDataIndex}`);
+	                return null;
 	            }
 	            dataView.parse([fromDataView], {
 	                type: 'dataview'
@@ -54205,7 +54159,7 @@
 	        }
 	        else {
 	            dataView.parse([]);
-	            error$1('values should be array');
+	            warn('values should be array');
 	        }
 	        if (transforms && transforms.length) {
 	            transforms.forEach((transform) => {
@@ -54342,6 +54296,12 @@
 	        if (this._view) {
 	            return;
 	        }
+	        const logger = new Logger(this._option.logLevel ?? LoggerLevel.Error);
+	        if (this._option.onError) {
+	            logger.addErrorHandler((...args) => {
+	                this._option.onError(...args);
+	            });
+	        }
 	        this._view = new View({
 	            width: this._width,
 	            height: this._height,
@@ -54361,7 +54321,8 @@
 	            doLayout: () => {
 	                this._compileChart?.onLayout(this._view);
 	            },
-	            logLevel: Logger.getInstance().level()
+	            logger: logger,
+	            logLevel: logger.level()
 	        });
 	        this._setCanvasStyle();
 	        const interactive = this._option.interactive;
@@ -54615,7 +54576,7 @@
 	        });
 	    });
 	}
-	async function getCanvasDataURL(c) {
+	async function getCanvasDataURL(c, ctx) {
 	    if (!c) {
 	        return '';
 	    }
@@ -54624,8 +54585,8 @@
 	            return OffscreenCanvasToDataURL(c);
 	        }
 	    }
-	    catch (error) {
-	        console.error('getCanvasDataURL', error);
+	    catch (_error) {
+	        (ctx?.onError ?? error$1)(`getCanvasDataURL error : ${_error.toString()}`);
 	    }
 	    return c.toDataURL();
 	}
@@ -54686,15 +54647,20 @@
 	    _autoSize = true;
 	    _option = {
 	        mode: exports.RenderModeEnum['desktop-browser'],
-	        animation: true
+	        animation: true,
+	        onError: (msg) => {
+	            throw new Error(msg);
+	        }
 	    };
 	    _curSize = { width: 0, height: 0 };
 	    _observer = null;
 	    _currentThemeName;
 	    _currentTheme;
+	    _onError;
 	    _context = {};
 	    constructor(spec, options) {
 	        this._option = merge$2(this._option, options);
+	        this._onError = this._option.onError;
 	        const { dom, renderCanvas, mode, stage, poptip, ...restOptions } = this._option;
 	        if (dom) {
 	            this._container = isString(dom) ? document?.getElementById(dom) : dom;
@@ -54706,7 +54672,7 @@
 	            this._stage = stage;
 	        }
 	        if (mode !== 'node' && !this._container && !this._canvas && !this._stage) {
-	            error$1('please specify container or renderCanvas!');
+	            this._option.onError('please specify container or renderCanvas!');
 	            return;
 	        }
 	        this._viewBox = this._option.viewBox;
@@ -54721,7 +54687,8 @@
 	            stage,
 	            pluginList: poptip !== false ? ['poptipForText'] : [],
 	            ...restOptions,
-	            background: spec.background || this._currentTheme.background || this._option.background
+	            background: spec.background || this._currentTheme.background || this._option.background,
+	            onError: this._onError
 	        });
 	        this._eventDispatcher = new EventDispatcher(this, this._compiler);
 	        this._event = new Event$1(this._eventDispatcher, mode);
@@ -54736,6 +54703,7 @@
 	            height: spec.height || 0
 	        };
 	        this._bindResizeEvent();
+	        this._bindVGrammarViewEvent();
 	        this._event.emit(ChartEvent.initialized, {});
 	        InstanceManager.registerInstance(this);
 	    }
@@ -54754,13 +54722,15 @@
 	        const dataViewArr = [];
 	        for (let i = 0; i < specData.length; i++) {
 	            const curSpecData = specData[i];
-	            dataViewArr.push(dataToDataView(curSpecData, this._dataSet, dataViewArr));
+	            dataViewArr.push(dataToDataView(curSpecData, this._dataSet, dataViewArr, {
+	                onError: this._option.onError
+	            }));
 	        }
 	        this._spec.data = dataViewArr;
 	    }
 	    _initChart(spec) {
 	        if (!this._compiler) {
-	            error$1('compiler is not initialized');
+	            this._option.onError('compiler is not initialized');
 	            return;
 	        }
 	        this._initData();
@@ -54778,10 +54748,11 @@
 	            viewBox: this._viewBox,
 	            animation: this._option.animation,
 	            getTheme: () => this._currentTheme,
-	            layout: this._option.layout
+	            layout: this._option.layout,
+	            onError: this._onError
 	        });
 	        if (!chart) {
-	            error$1('init chart fail');
+	            this._option.onError('init chart fail');
 	            return;
 	        }
 	        this._chart = chart;
@@ -54794,6 +54765,17 @@
 	            this._dataSet = null;
 	        }
 	    }
+	    _bindVGrammarViewEvent() {
+	        if (!this._compiler || this._compiler.isReleased) {
+	            return;
+	        }
+	        this._compiler.getVGrammarView().addEventListener(HOOK_EVENT.ALL_ANIMATION_END, () => {
+	            this._event.emit(ChartEvent.animationFinished, {});
+	        });
+	        this._compiler.getVGrammarView().addEventListener(HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER, () => {
+	            this._event.emit(ChartEvent.renderFinished, {});
+	        });
+	    }
 	    _bindResizeEvent() {
 	        if (this._autoSize) {
 	            if (this._container) {
@@ -54845,7 +54827,21 @@
 	        if (!isValid(result)) {
 	            return this;
 	        }
-	        if (result.reMake) {
+	        this._reCompile(result);
+	        await this.renderAsync(morphConfig);
+	        return this;
+	    }
+	    updateCustomConfigAndRerenderSync(modifyConfig, morphConfig) {
+	        const result = modifyConfig();
+	        if (!isValid(result)) {
+	            return this;
+	        }
+	        this._reCompile(result);
+	        this.renderSync(morphConfig);
+	        return this;
+	    }
+	    _reCompile(updateResult) {
+	        if (updateResult.reMake) {
 	            this._releaseData();
 	            this._initDataSet();
 	            this._chart.release();
@@ -54853,13 +54849,11 @@
 	            this._compiler?.releaseGrammar();
 	        }
 	        else {
-	            if (result.reCompile) {
+	            if (updateResult.reCompile) {
 	                this.getComponents().forEach(c => c.clear());
 	                this._compiler?.compile({ chart: this._chart, vChart: this }, {});
 	            }
 	        }
-	        await this.renderAsync(morphConfig);
-	        return this;
 	    }
 	    renderSync(morphConfig) {
 	        if (!this._chart) {
@@ -55019,6 +55013,25 @@
 	        }, morphConfig);
 	        return this;
 	    }
+	    updateSpecSync(spec, forceMerge = false, morphConfig) {
+	        if (!spec) {
+	            return this;
+	        }
+	        if (isString(spec)) {
+	            spec = JSON.parse(spec);
+	        }
+	        if (forceMerge) {
+	            spec = merge$2({}, this._spec, spec);
+	        }
+	        this.updateCustomConfigAndRerenderSync(() => {
+	            spec = specTransform(spec);
+	            this._spec = spec;
+	            this._updateCurrentTheme();
+	            this._compiler?.getVGrammarView()?.updateLayoutTag();
+	            return this._chart.updateSpec(spec, morphConfig);
+	        }, morphConfig);
+	        return this;
+	    }
 	    async resize(width, height) {
 	        if (!this._chart || !this._compiler) {
 	            return this;
@@ -55096,6 +55109,18 @@
 	        });
 	        return this;
 	    }
+	    setCurrentThemeSync(name) {
+	        if (!ThemeManager.themeExist(name)) {
+	            return this;
+	        }
+	        this.updateCustomConfigAndRerenderSync(() => {
+	            this._currentThemeName = name;
+	            this._updateCurrentTheme();
+	            this._chart?.setCurrentTheme(this._currentTheme, true);
+	            return { change: true, reMake: false };
+	        });
+	        return this;
+	    }
 	    _getTooltipComponent() {
 	        const tooltip = this._chart?.getAllComponents().find(c => c.type === ComponentTypeEnum.tooltip);
 	        return tooltip;
@@ -55177,15 +55202,17 @@
 	        if (this._chart && stage) {
 	            stage.render();
 	            const canvas = this._chart.getCanvas();
-	            const url = await getCanvasDataURL(canvas);
+	            const url = await getCanvasDataURL(canvas, {
+	                onError: this._onError
+	            });
 	            return url;
 	        }
-	        console.error(new ReferenceError(`render is not defined`));
+	        this._option.onError(new ReferenceError(`render is not defined`));
 	        return null;
 	    }
 	    async exportImg(name) {
 	        if (!isTrueBrowser(this._option.mode)) {
-	            console.error(new TypeError(`non-browser environment can not export img`));
+	            this._option.onError(new TypeError(`non-browser environment can not export img`));
 	            return;
 	        }
 	        const dataURL = await this.getDataURL();
@@ -55193,12 +55220,12 @@
 	            URLToImage(name, dataURL);
 	        }
 	        else {
-	            console.error(new ReferenceError(`render is not defined`));
+	            this._option.onError(new ReferenceError(`render is not defined`));
 	        }
 	    }
 	    getImageBuffer() {
 	        if (this._option.mode !== 'node') {
-	            console.error(new TypeError('getImageBuffer() now only support node environment.'));
+	            this._option.onError(new TypeError('getImageBuffer() now only support node environment.'));
 	            return;
 	        }
 	        const stage = this.getStage();
@@ -55207,7 +55234,7 @@
 	            const buffer = stage.window.getImageBuffer();
 	            return buffer;
 	        }
-	        console.error(new ReferenceError(`render is not defined`));
+	        this._option.onError(new ReferenceError(`render is not defined`));
 	        return null;
 	    }
 	    setLayout(layout) {
@@ -56734,6 +56761,10 @@
 	    _bottomCurrent = 0;
 	    _chartLayoutRect;
 	    _chartViewBox;
+	    _onError;
+	    constructor(_spec, ctx) {
+	        this._onError = ctx?.onError;
+	    }
 	    layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
 	        this._chartLayoutRect = chartLayoutRect;
 	        this._chartViewBox = chartViewBox;
@@ -56994,7 +57025,7 @@
 	    filterRegionsWithID(regions, id) {
 	        const target = regions.find(x => x.id === id);
 	        if (!target) {
-	            throw Error('can not find target region item, invalid id');
+	            (this._onError ?? error$1)('can not find target region item, invalid id');
 	        }
 	        return target;
 	    }
@@ -58088,7 +58119,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.1.1-beta.1";
+	const version = "1.2.0-beta.1";
 	Logger.getInstance(LoggerLevel.Error);
 
 	var SeriesMarkNameEnum;
@@ -58577,6 +58608,9 @@
 	        this.transformSpec(s);
 	        this._spec = s;
 	    }
+	    getOption() {
+	        return this._option;
+	    }
 	    _theme;
 	    _regions = [];
 	    _series = [];
@@ -58644,7 +58678,8 @@
 	            getChartLayoutRect: () => this._layoutRect,
 	            getChartViewRect: () => this._viewRect,
 	            getChart: () => this,
-	            globalScale: this._globalScale
+	            globalScale: this._globalScale,
+	            onError: this._option.onError
 	        };
 	        this._stack = new Stack(this);
 	        this._spec = spec;
@@ -58713,7 +58748,9 @@
 	                spec.data = this.getSeriesData(spec.dataId, spec.dataIndex);
 	            }
 	            else {
-	                spec.data = dataToDataView(spec.data, this._dataSet, this._spec.data);
+	                spec.data = dataToDataView(spec.data, this._dataSet, this._spec.data, {
+	                    onError: this._option.onError
+	                });
 	            }
 	            if (this._option.animation === false) {
 	                spec.animation = false;
@@ -58832,7 +58869,9 @@
 	            if (this._spec.zField || (this._spec.series && this._spec.series.some((s) => s.zField))) {
 	                use3dLayout = true;
 	            }
-	            const layout = new (Factory.getLayout(this._spec.layout?.type ?? (use3dLayout ? 'layout3d' : 'base')))(this._spec.layout);
+	            const layout = new (Factory.getLayout(this._spec.layout?.type ?? (use3dLayout ? 'layout3d' : 'base')))(this._spec.layout, {
+	                onError: this._option.onError
+	            });
 	            this._layoutFunc = layout.layoutItems.bind(layout);
 	        }
 	    }
@@ -59050,7 +59089,8 @@
 	    }
 	    getSeriesData(id, index) {
 	        if (!this._spec.data) {
-	            throw new Error('no data in spec!');
+	            this._option.onError('no data in spec!');
+	            return null;
 	        }
 	        if (typeof id === 'string') {
 	            const metchData = this._spec.data.filter((data) => {
@@ -59059,13 +59099,15 @@
 	            if (metchData[0]) {
 	                return metchData[0];
 	            }
-	            throw new Error(`no data matches dataId ${id}!`);
+	            this._option.onError(`no data matches dataId ${id}!`);
+	            return null;
 	        }
 	        if (typeof index === 'number') {
 	            if (this._spec.data[index]) {
 	                return this._spec.data[index];
 	            }
-	            throw new Error(`no data matches dataIndex ${index}!`);
+	            this._option.onError(`no data matches dataIndex ${index}!`);
+	            return null;
 	        }
 	        return this._spec.data[0];
 	    }
@@ -61123,7 +61165,7 @@
 	        if (isFunction(dataKey)) {
 	            return dataKey(datum, index);
 	        }
-	        throw new Error(`invalid dataKey: ${dataKey}`);
+	        this._option.onError(`invalid dataKey: ${dataKey}`);
 	    }
 	    _addDataIndexAndKey() {
 	        if (this._rawData?.dataSet) {
@@ -65070,13 +65112,16 @@
 	    longitudeToData(lon) {
 	    }
 	    dataToPositionX(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    dataToPositionY(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    dataToPositionZ(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    release() {
 	        super.release();
@@ -65191,10 +65236,10 @@
 	        this._valueField = this._spec.valueField;
 	        this._spec.nameProperty && (this._nameProperty = this._spec.nameProperty);
 	        if (!this.map) {
-	            throw new Error(`map type '${this.map}' is not specified !`);
+	            this._option.onError(`map type '${this.map}' is not specified !`);
 	        }
 	        if (!geoSourceMap.get(this.map)) {
-	            throw new Error(`'${this.map}' data is not registered !`);
+	            this._option.onError(`'${this.map}' data is not registered !`);
 	        }
 	    }
 	    initData() {
@@ -65204,7 +65249,7 @@
 	        registerDataSetInstanceTransform(this._dataSet, 'lookup', lookup);
 	        const features = geoSourceMap.get(this.map);
 	        if (!features) {
-	            throw Error('no valid map data found!');
+	            this._option.onError('no valid map data found!');
 	        }
 	        const mapData = new DataView(this._dataSet);
 	        mapData
@@ -65410,10 +65455,12 @@
 	        return '';
 	    }
 	    dataToPositionX(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    dataToPositionY(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    viewDataUpdate(d) {
 	        super.viewDataUpdate(d);
@@ -66960,10 +67007,12 @@
 	        }
 	        if (isArray$3(spec)) {
 	            if (isNil(field)) {
-	                throw new Error(`${key}Field is required.`);
+	                this._option.onError(`${key}Field is required.`);
+	                return spec;
 	            }
 	            if (spec.length > 2) {
-	                throw new Error(`${key} length is invalid, specify up to 2 ${key}s.`);
+	                this._option.onError(`${key} length is invalid, specify up to 2 ${key}s.`);
+	                return spec;
 	            }
 	            const scaleName = `${PREFIX}_series_scatter_${this.id}_scale_${key}`;
 	            this._option.globalScale.registerModelScale({
@@ -66984,7 +67033,8 @@
 	        }
 	        if (isObject$f(spec)) {
 	            if (isNil(field)) {
-	                throw new Error(`${key}Field is required.`);
+	                this._option.onError(`${key}Field is required.`);
+	                return spec;
 	            }
 	            const scaleName = `${PREFIX}_series_scatter_${this.id}_scale_${key}`;
 	            const visualSpec = {
@@ -67005,7 +67055,8 @@
 	                field
 	            };
 	        }
-	        throw new Error(`${key} attribute is invalid.`);
+	        this._option.onError(`${key} attribute is invalid.`);
+	        return spec;
 	    }
 	    getSizeAttribute(field, sizeSpec) {
 	        if (isNil(sizeSpec)) {
@@ -77044,9 +77095,13 @@
 	                }
 	            }
 	            else {
-	                spec.data = dataToDataView(spec.data, this._dataSet, this._spec.data);
+	                spec.data = dataToDataView(spec.data, this._dataSet, this._spec.data, {
+	                    onError: this._option.onError
+	                });
 	                if (spec.type === SeriesTypeEnum.link) {
-	                    spec.dataDot = dataToDataView(this._spec.series[spec.dotSeriesIndex].data, this._dataSet, this._spec.data);
+	                    spec.dataDot = dataToDataView(this._spec.series[spec.dotSeriesIndex].data, this._dataSet, this._spec.data, {
+	                        onError: this._option.onError
+	                    });
 	                }
 	            }
 	            if (spec.type === SeriesTypeEnum.link) {
@@ -80517,7 +80572,8 @@
 	                inverse
 	            }, options);
 	        }
-	        throw `Component ${componentName} not found`;
+	        options.onError(`Component ${componentName} not found`);
+	        return null;
 	    }
 	    static createComponent(spec, options) {
 	        if (!this.type.startsWith(CartesianAxis.type)) {
@@ -81525,7 +81581,8 @@
 	        if (C) {
 	            return new C(spec, options);
 	        }
-	        throw `Component ${componentName} not found`;
+	        options.onError(`Component ${componentName} not found`);
+	        return null;
 	    }
 	    static createComponent(spec, options) {
 	        if (!this.type.startsWith(PolarAxis.type)) {
@@ -83021,9 +83078,6 @@
 	    projection;
 	    constructor(projectionSpec) {
 	        this.projection = projection(projectionSpec.type)();
-	        if (this.projection === null) {
-	            throw Error('unsupported projection type!');
-	        }
 	    }
 	    fit(start, size, features) {
 	        const fitData = { type: 'FeatureCollection', features };
@@ -83174,6 +83228,10 @@
 	    }
 	    initProjection() {
 	        this._projection = new Projection(this._projectionSpec);
+	        if (this._projection.projection === null) {
+	            this._option.onError('unsupported projection type!');
+	            return;
+	        }
 	    }
 	    coordinateHelper() {
 	        const helper = {
@@ -85241,7 +85299,8 @@
 	                }
 	            }
 	        }
-	        throw new Error('need at least one series');
+	        this._option.onError('need at least one series');
+	        return null;
 	    }
 	    clear() {
 	        if (this._markerComponent) {
@@ -88282,6 +88341,12 @@
 	            });
 	        });
 	    }
+	    updateSpec(spec) {
+	        const result = super.updateSpec(spec);
+	        result.reRender = true;
+	        result.reMake = true;
+	        return result;
+	    }
 	    onRender(ctx) {
 	    }
 	    changeRegions(regions) {
@@ -88308,7 +88373,8 @@
 	    _rowElements;
 	    _gridInfo;
 	    _elementMap = new Map();
-	    constructor(gridInfo) {
+	    _onError;
+	    constructor(gridInfo, ctx) {
 	        this.standardizationSpec(gridInfo);
 	        this._gridInfo = gridInfo;
 	        this._col = gridInfo.col;
@@ -88317,6 +88383,7 @@
 	        this._rowSize = new Array(this._row).fill(null);
 	        this._colElements = new Array(this._col).fill([]);
 	        this._rowElements = new Array(this._row).fill([]);
+	        this._onError = ctx?.onError;
 	        this.initUserSetting();
 	    }
 	    standardizationSpec(gridInfo) {