@visactor/vchart 1.2.1-alpha.2 → 1.2.1

package/build/index.js

@@ -37029,7 +37029,7 @@
 	      return {
 	        from: {
 	          x: computedX + computedWidth / 2,
-	          x1: computedX + computedWidth / 2,
+	          x1: isNil(x1) ? void 0 : computedX + computedWidth / 2,
 	          width: isNil(width) ? void 0 : 0
 	        },
 	        to: {
@@ -37042,7 +37042,7 @@
 	      return {
 	        from: {
 	          y: computedY + computedHeight / 2,
-	          y1: computedY + computedHeight / 2,
+	          y1: isNil(y1) ? void 0 : computedY + computedHeight / 2,
 	          height: isNil(height) ? void 0 : 0
 	        },
 	        to: {
@@ -37055,9 +37055,9 @@
 	      return {
 	        from: {
 	          x: computedX + computedWidth / 2,
-	          x1: computedX + computedWidth / 2,
 	          y: computedY + computedHeight / 2,
-	          y1: computedY + computedHeight / 2,
+	          x1: isNil(x1) ? void 0 : computedX + computedWidth / 2,
+	          y1: isNil(y1) ? void 0 : computedY + computedHeight / 2,
 	          width: isNil(width) ? void 0 : 0,
 	          height: isNil(height) ? void 0 : 0
 	        },
@@ -37073,7 +37073,9 @@
 	  }
 	};
 	const growCenterOut = (element, options, animationParameters) => {
-	  const width = element.getGraphicAttribute("width", !1),
+	  const x1 = element.getGraphicAttribute("x1", !1),
+	    y1 = element.getGraphicAttribute("y1", !1),
+	    width = element.getGraphicAttribute("width", !1),
 	    height = element.getGraphicAttribute("height", !1),
 	    computedX = element.getGraphicItem().attribute.x,
 	    computedWidth = element.getGraphicItem().attribute.width,
@@ -37084,16 +37086,15 @@
 	      return {
 	        to: {
 	          x: computedX + computedWidth / 2,
-	          x1: computedX + computedWidth / 2,
-	          width: isNil(width) ? void 0 : 0,
-	          height: height
+	          x1: isNil(x1) ? void 0 : computedX + computedWidth / 2,
+	          width: isNil(width) ? void 0 : 0
 	        }
 	      };
 	    case "y":
 	      return {
 	        to: {
 	          y: computedY + computedHeight / 2,
-	          y1: computedY + computedHeight / 2,
+	          y1: isNil(y1) ? void 0 : computedY + computedHeight / 2,
 	          height: isNil(height) ? void 0 : 0
 	        }
 	      };
@@ -37101,9 +37102,9 @@
 	      return {
 	        to: {
 	          x: computedX + computedWidth / 2,
-	          x1: computedX + computedWidth / 2,
 	          y: computedY + computedHeight / 2,
-	          y1: computedY + computedHeight / 2,
+	          x1: isNil(x1) ? void 0 : computedX + computedWidth / 2,
+	          y1: isNil(y1) ? void 0 : computedY + computedHeight / 2,
 	          width: isNil(width) ? void 0 : 0,
 	          height: isNil(height) ? void 0 : 0
 	        }
@@ -37119,7 +37120,7 @@
 	  return "negative" === (null == options ? void 0 : options.orient) ? {
 	    from: {
 	      x: computedX1,
-	      x1: computedX1,
+	      x1: isNil(x1) ? void 0 : computedX1,
 	      width: isNil(width) ? void 0 : 0
 	    },
 	    to: {
@@ -37130,7 +37131,7 @@
 	  } : {
 	    from: {
 	      x: computedX,
-	      x1: computedX,
+	      x1: isNil(x1) ? void 0 : computedX,
 	      width: isNil(width) ? void 0 : 0
 	    },
 	    to: {
@@ -37152,7 +37153,7 @@
 	  return {
 	    from: {
 	      x: overallValue,
-	      x1: overallValue,
+	      x1: isNil(x1) ? void 0 : overallValue,
 	      width: isNil(width) ? void 0 : 0
 	    },
 	    to: {
@@ -37167,25 +37168,27 @@
 	  return !1 !== (null !== (_a = null == options ? void 0 : options.overall) && void 0 !== _a && _a) ? growWidthInOverall(element, options, animationParameters) : growWidthInIndividual(element, options);
 	};
 	function growWidthOutIndividual(element, options, animationParameters) {
-	  const width = element.getGraphicAttribute("width", !1),
+	  const x1 = element.getGraphicAttribute("x1", !1),
+	    width = element.getGraphicAttribute("width", !1),
 	    computedX = element.getGraphicItem().attribute.x,
 	    computedX1 = computedX + element.getGraphicItem().attribute.width;
 	  return "negative" === (null == options ? void 0 : options.orient) ? {
 	    to: {
 	      x: computedX1,
-	      x1: computedX1,
+	      x1: isNil(x1) ? void 0 : computedX1,
 	      width: isNil(width) ? void 0 : 0
 	    }
 	  } : {
 	    to: {
 	      x: computedX,
-	      x1: computedX,
+	      x1: isNil(x1) ? void 0 : computedX,
 	      width: isNil(width) ? void 0 : 0
 	    }
 	  };
 	}
 	function growWidthOutOverall(element, options, animationParameters) {
-	  const width = element.getGraphicAttribute("width", !1);
+	  const x1 = element.getGraphicAttribute("x1", !1),
+	    width = element.getGraphicAttribute("width", !1);
 	  let overallValue;
 	  if ("negative" === (null == options ? void 0 : options.orient)) {
 	    const groupRight = animationParameters.group ? animationParameters.group.getBounds().width() : animationParameters.width;
@@ -37194,7 +37197,7 @@
 	  return {
 	    to: {
 	      x: overallValue,
-	      x1: overallValue,
+	      x1: isNil(x1) ? void 0 : overallValue,
 	      width: isNil(width) ? void 0 : 0
 	    }
 	  };
@@ -37212,7 +37215,7 @@
 	  return "negative" === (null == options ? void 0 : options.orient) ? {
 	    from: {
 	      y: computedY1,
-	      y1: computedY1,
+	      y1: isNil(y1) ? void 0 : computedY1,
 	      height: isNil(height) ? void 0 : 0
 	    },
 	    to: {
@@ -37223,7 +37226,7 @@
 	  } : {
 	    from: {
 	      y: computedY,
-	      y1: computedY,
+	      y1: isNil(y1) ? void 0 : computedY,
 	      height: isNil(height) ? void 0 : 0
 	    },
 	    to: {
@@ -37245,7 +37248,7 @@
 	  return {
 	    from: {
 	      y: overallValue,
-	      y1: overallValue,
+	      y1: isNil(y1) ? void 0 : overallValue,
 	      height: isNil(height) ? void 0 : 0
 	    },
 	    to: {
@@ -37260,25 +37263,27 @@
 	  return !1 !== (null !== (_a = null == options ? void 0 : options.overall) && void 0 !== _a && _a) ? growHeightInOverall(element, options, animationParameters) : growHeightInIndividual(element, options);
 	};
 	function growHeightOutIndividual(element, options, animationParameters) {
-	  const height = element.getGraphicAttribute("height", !1),
+	  const y1 = element.getGraphicAttribute("y1", !1),
+	    height = element.getGraphicAttribute("height", !1),
 	    computedY = element.getGraphicItem().attribute.y,
 	    computedY1 = computedY + element.getGraphicItem().attribute.height;
 	  return "negative" === (null == options ? void 0 : options.orient) ? {
 	    to: {
 	      y: computedY1,
-	      y1: computedY1,
+	      y1: isNil(y1) ? void 0 : computedY1,
 	      height: isNil(height) ? void 0 : 0
 	    }
 	  } : {
 	    to: {
 	      y: computedY,
-	      y1: computedY,
+	      y1: isNil(y1) ? void 0 : computedY,
 	      height: isNil(height) ? void 0 : 0
 	    }
 	  };
 	}
 	function growHeightOutOverall(element, options, animationParameters) {
-	  const height = element.getGraphicAttribute("height", !1);
+	  const y1 = element.getGraphicAttribute("y1", !1),
+	    height = element.getGraphicAttribute("height", !1);
 	  let overallValue;
 	  if ("negative" === (null == options ? void 0 : options.orient)) {
 	    const groupBottom = animationParameters.group ? animationParameters.group.getBounds().height() : animationParameters.height;
@@ -37287,7 +37292,7 @@
 	  return {
 	    to: {
 	      y: overallValue,
-	      y1: overallValue,
+	      y1: isNil(y1) ? void 0 : overallValue,
 	      height: isNil(height) ? void 0 : 0
 	    }
 	  };
@@ -39012,7 +39017,8 @@
 	    return isNil(stateAnimationCounts) || Object.values(stateAnimationCounts).every(count => 0 === count);
 	  }
 	  getAnimatorCount() {
-	    return this.animators.size;
+	    let count = 0;
+	    return this.animators.forEach(animators => count += animators.length), count;
 	  }
 	  getElementAnimators(element, animationState) {
 	    var _a;
@@ -39749,6 +39755,10 @@
 	      this.encodeState(state, spec.encode[state]);
 	    }), this.animation(spec.animation), this.animationState(spec.animationState), this.morph(spec.morph, spec.morphKey, spec.morphElementKey), this.layout(spec.layout), this.configure(spec), this.transform(spec.transform), this.parseAddition(spec), this.spec = spec, this.markType = spec.type, this.commit(), this;
 	  }
+	  parameters() {
+	    var _a;
+	    return null !== (_a = this._finalParameters) && void 0 !== _a ? _a : super.parameters();
+	  }
 	  parseAddition(spec) {
 	    return this;
 	  }
@@ -39863,7 +39873,7 @@
 	  getAllElements() {
 	    const elements = this.elements.slice();
 	    return this.elementMap.forEach(element => {
-	      element.diffState === DiffState.exit && elements.push(element);
+	      element.diffState !== DiffState.exit || elements.includes(element) || elements.push(element);
 	    }), this.spec.sort && elements.sort((elementA, elementB) => this.spec.sort(elementA.getDatum(), elementB.getDatum())), elements;
 	  }
 	  getScalesByChannel() {
@@ -40168,10 +40178,10 @@
 	    super.clear(), this.transforms = null, this.elementMap = null, this.elements = null, this.graphicItem = null, this.animate = null, null === (_a = this.group) || void 0 === _a || _a.removeChild(this), this.group = null;
 	  }
 	  prepareRelease() {
-	    this.animate.stop(), this.elementMap.forEach(element => element.diffState = DiffState.exit);
+	    this.animate.stop(), this.elementMap.forEach(element => element.diffState = DiffState.exit), this._finalParameters = this.parameters();
 	  }
 	  release() {
-	    this.releaseEvent(), this.elements.forEach(element => element.release()), this.elementMap.clear(), this.animate && this.animate.release(), this.graphicItem && removeGraphicItem(this.graphicItem), this.detachAll(), super.release();
+	    this.releaseEvent(), this.elements.forEach(element => element.release()), this.elementMap.clear(), this._finalParameters = null, this.animate && this.animate.release(), this.graphicItem && removeGraphicItem(this.graphicItem), this.detachAll(), super.release();
 	  }
 	}
 
@@ -49895,6 +49905,10 @@
 	  removeChild(mark) {
 	    return this.children = this.children.filter(child => child !== mark), this;
 	  }
+	  includesChild(mark) {
+	    let descendant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+	    return !!this.children.includes(mark) || !!descendant && this.children.some(child => child.markType === GrammarMarkType.group && child.includesChild(mark, !0));
+	  }
 	  updateLayoutChildren() {
 	    return this.children.length ? (this.layoutChildren || (this.layoutChildren = []), this.layoutChildren = this.children.filter(child => child.needLayout()), this) : this;
 	  }
@@ -50655,7 +50669,7 @@
 	    var _a, _b;
 	    const grammarType = grammar.grammarType,
 	      key = this._mapKey(grammar);
-	    this._grammarMap[grammarType] ? (this._grammars[grammarType].push(grammar), isNil(key) || (this._grammarMap[grammarType][key] ? null === (_a = this._warning) || void 0 === _a || _a.call(this, key, grammar) : this._grammarMap[grammarType][key] = grammar)) : (this._grammars.customized.push(grammar), isNil(key) || (this._grammarMap.customized[key] ? null === (_b = this._warning) || void 0 === _b || _b.call(this, key, grammar) : this._grammarMap.customized[key] = grammar)), this._size += 1;
+	    return this._grammarMap[grammarType] ? (this._grammars[grammarType].push(grammar), isNil(key) || (this._grammarMap[grammarType][key] ? null === (_a = this._warning) || void 0 === _a || _a.call(this, key, grammar) : this._grammarMap[grammarType][key] = grammar)) : (this._grammars.customized.push(grammar), isNil(key) || (this._grammarMap.customized[key] ? null === (_b = this._warning) || void 0 === _b || _b.call(this, key, grammar) : this._grammarMap.customized[key] = grammar)), this._size += 1, this;
 	  }
 	  unrecord(grammar) {
 	    const grammarType = grammar.grammarType,
@@ -50747,6 +50761,46 @@
 	    this._size = 0, this._grammars = null, this._grammarMap = null;
 	  }
 	}
+	class RecordedTreeGrammars extends RecordedGrammars {
+	  constructor() {
+	    super(...arguments), this._markNodes = [];
+	  }
+	  record(grammar) {
+	    if (super.record(grammar), "mark" === grammar.grammarType) {
+	      const mark = grammar,
+	        currentNode = {
+	          mark: mark,
+	          parent: null,
+	          children: []
+	        };
+	      this._markNodes.forEach(node => {
+	        const targetMark = node.mark;
+	        targetMark.markType === GrammarMarkType.group && targetMark.includesChild(mark, !1) ? (node.children.push(currentNode), currentNode.parent = node) : mark.markType === GrammarMarkType.group && mark.includesChild(targetMark, !1) && (currentNode.children.push(node), node.parent = currentNode);
+	      }), this._markNodes.push(currentNode);
+	    }
+	    return this;
+	  }
+	  unrecord(grammar) {
+	    if (super.unrecord(grammar), "mark" === grammar.grammarType) {
+	      const mark = grammar,
+	        currentNode = this._markNodes.find(node => node.mark === mark);
+	      this._markNodes.forEach(node => {
+	        const targetMark = node.mark;
+	        targetMark.markType === GrammarMarkType.group && targetMark.includesChild(mark, !1) ? (node.children = node.children.filter(n => n !== currentNode), currentNode.parent = null) : mark.markType === GrammarMarkType.group && mark.includesChild(targetMark, !1) && (currentNode.children = currentNode.children.filter(n => n !== node), node.parent = null);
+	      }), this._markNodes = this._markNodes.filter(n => n !== currentNode);
+	    }
+	    return this;
+	  }
+	  getAllMarkNodes() {
+	    return this._markNodes;
+	  }
+	  clear() {
+	    super.clear(), this._markNodes = [];
+	  }
+	  release() {
+	    super.release(), this._markNodes = null;
+	  }
+	}
 
 	class ViewAnimate {
 	  constructor(view) {
@@ -51118,7 +51172,7 @@
 	  }
 	  removeGrammar(grammar) {
 	    const recordedGrammar = isString(grammar) ? this.getGrammarById(grammar) : grammar;
-	    return recordedGrammar && this.grammars.find(storedGrammar => storedGrammar.uid === recordedGrammar.uid) ? (this._cachedGrammars.record(recordedGrammar), this._dataflow.remove(recordedGrammar), this.grammars.unrecord(recordedGrammar), this) : this;
+	    return recordedGrammar && this.grammars.find(storedGrammar => storedGrammar.uid === recordedGrammar.uid) ? ("mark" === recordedGrammar.grammarType && recordedGrammar.prepareRelease(), this._cachedGrammars.record(recordedGrammar), this._dataflow.remove(recordedGrammar), this.grammars.unrecord(recordedGrammar), this) : this;
 	  }
 	  removeAllGrammars() {
 	    return this.grammars.traverse(grammar => {
@@ -51357,12 +51411,23 @@
 	  }
 	  releaseCachedGrammars() {
 	    this._cachedGrammars.traverse(grammar => {
-	      if ("mark" === grammar.grammarType) {
-	        const mark = grammar;
-	        mark.prepareRelease(), mark.animate.animate(), 0 === mark.animate.getAnimatorCount() ? mark.release() : mark.addEventListener("animationEnd", event => {
-	          0 === mark.animate.getAnimatorCount() && mark.release();
-	        });
-	      } else grammar.release();
+	      "mark" !== grammar.grammarType && grammar.release();
+	    });
+	    const markNodes = this._cachedGrammars.getAllMarkNodes(),
+	      releaseUp = node => {
+	        if (node.mark.view && 0 === node.mark.animate.getAnimatorCount() && (!node.children || 0 === node.children.length)) {
+	          node.mark.release();
+	          const parent = node.parent;
+	          parent && (node.parent.children = node.parent.children.filter(n => n !== node), node.parent = null, releaseUp(parent));
+	        }
+	      };
+	    markNodes.forEach(node => {
+	      node.mark.animate.animate();
+	    }), markNodes.forEach(node => {
+	      const mark = node.mark;
+	      0 === mark.animate.getAnimatorCount() ? releaseUp(node) : mark.addEventListener("animationEnd", () => {
+	        0 === mark.animate.getAnimatorCount() && releaseUp(node);
+	      });
 	    }), this._cachedGrammars.clear();
 	  }
 	  runAfter(callback) {
@@ -51574,7 +51639,7 @@
 	  }
 	  initialize() {
 	    var _a;
-	    this.grammars = new RecordedGrammars(grammar => grammar.id(), (key, grammar) => this.logger.warn(`Grammar id '${key}' has been occupied`, grammar)), this._cachedGrammars = new RecordedGrammars(grammar => grammar.id()), this._options.logger && Logger.setInstance(this._options.logger), this.logger = Logger.getInstance(null !== (_a = this._options.logLevel) && void 0 !== _a ? _a : 0), this._dataflow = new Dataflow(), this.animate = new ViewAnimate(this), this._morph = new Morph(), this._options.hooks && (Object.keys(this._options.hooks).forEach(key => {
+	    this.grammars = new RecordedGrammars(grammar => grammar.id(), (key, grammar) => this.logger.warn(`Grammar id '${key}' has been occupied`, grammar)), this._cachedGrammars = new RecordedTreeGrammars(grammar => grammar.id()), this._options.logger && Logger.setInstance(this._options.logger), this.logger = Logger.getInstance(null !== (_a = this._options.logLevel) && void 0 !== _a ? _a : 0), this._dataflow = new Dataflow(), this.animate = new ViewAnimate(this), this._morph = new Morph(), this._options.hooks && (Object.keys(this._options.hooks).forEach(key => {
 	      this.on(key, this._options.hooks[key]);
 	    }), this.hooks = this._options.hooks), this.container = null, this.renderer = null, this._globalCursor = !1, this._eventListeners = [], this._eventConfig = initializeEventConfig(this._options.eventConfig), this.globalCursor(this._eventConfig.globalCursor), this._background = this._options.background, this.parseBuiltIn(), configureEnvironment(this._options), this.initializeRenderer(), this._eventConfig.disable || this.initEvent(), this.initializeBuiltEvents(), this._currentDataflow = null, this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before;
 	  }
@@ -51704,6 +51769,7 @@
 	    ChartEvent["drill"] = "drill";
 	    ChartEvent["layoutStart"] = "layoutStart";
 	    ChartEvent["layoutEnd"] = "layoutEnd";
+	    ChartEvent["layoutRectUpdate"] = "layoutRectUpdate";
 	    ChartEvent["playerPlay"] = "playerPlay";
 	    ChartEvent["playerPause"] = "playerPause";
 	    ChartEvent["playerEnd"] = "playerEnd";
@@ -54385,7 +54451,7 @@
 	            });
 	        }
 	        else if (Array.isArray(values)) {
-	            dataView.parse(values);
+	            dataView.parse(cloneDeep(values));
 	        }
 	        else if (isString(values) &&
 	            (!parser || parser.type === 'csv' || parser.type === 'dsv' || parser.type === 'tsv')) {
@@ -55886,6 +55952,9 @@
 	    layoutLevel = LayoutLevel.Region;
 	    layoutZIndex = 0;
 	    chartLayoutRect;
+	    getVisible() {
+	        return this._spec?.visible !== false;
+	    }
 	    _setLayoutAttributeFromSpec(spec, chartViewRect) {
 	        if (this._spec.visible !== false) {
 	            const padding = normalizeLayoutPaddingSpec(spec.padding);
@@ -57271,9 +57340,8 @@
 	        };
 	        const rightCurrent = this._chartViewBox.x2 - this._chartViewBox.x1 - this._rightCurrent;
 	        const bottomCurrent = this._chartViewBox.y2 - this._chartViewBox.y1 - this._bottomCurrent;
-	        items.filter;
 	        items.forEach(i => {
-	            if (!i.getAutoIndent()) {
+	            if (!i.getVisible() || !i.getAutoIndent()) {
 	                return;
 	            }
 	            const vOrH = i.layoutOrient === 'left' || i.layoutOrient === 'right';
@@ -58345,7 +58413,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.2.1-alpha.2";
+	const version = "1.2.1";
 	Logger.getInstance(LoggerLevel.Error);
 
 	var SeriesMarkNameEnum;
@@ -59580,6 +59648,7 @@
 	        this._layoutRect.height = viewRect.height - this.padding.top - this.padding.bottom;
 	        this._layoutRect.x = this.padding.left;
 	        this._layoutRect.y = this.padding.top;
+	        this._event.emit(ChartEvent.layoutRectUpdate, {});
 	    }
 	    getCurrentTheme() {
 	        return this._theme;
@@ -81080,6 +81149,7 @@
 	    _axisStyle;
 	    _latestBounds;
 	    _verticalLimitSize;
+	    _layoutCache = { width: 0, height: 0, _lastComputeOutBounds: { x1: 0, x2: 0, y1: 0, y2: 0 } };
 	    constructor(spec, options) {
 	        super(spec, {
 	            ...options
@@ -81434,7 +81504,7 @@
 	        }
 	        result.width = Math.ceil(result.width);
 	        result.height = Math.ceil(result.height);
-	        return this._setRectInSpec(result);
+	        return this._setRectInSpec(this._layoutCacheProcessing(result));
 	    }
 	    boundsInRect(rect) {
 	        let result = { x1: 0, y1: 0, x2: 0, y2: 0 };
@@ -81586,6 +81656,9 @@
 	        super.initEvent();
 	        if (this.visible) {
 	            this.event.on(ChartEvent.layoutEnd, this._fixAxisOnZero);
+	            this.event.on(ChartEvent.layoutRectUpdate, () => {
+	                this._clearLayoutCache();
+	            });
 	        }
 	    }
 	    _fixAxisOnZero = () => {
@@ -81637,6 +81710,33 @@
 	            }
 	        }
 	    };
+	    _layoutCacheProcessing(rect) {
+	        ['width', 'height'].forEach(key => {
+	            if (rect[key] < this._layoutCache[key]) {
+	                rect[key] = this._layoutCache[key];
+	            }
+	            else {
+	                this._layoutCache[key] = rect[key];
+	            }
+	        });
+	        ['x1', 'x2', 'y1', 'y2'].forEach(key => {
+	            if (this._lastComputeOutBounds[key] < this._layoutCache._lastComputeOutBounds[key]) {
+	                this._lastComputeOutBounds[key] = this._layoutCache._lastComputeOutBounds[key];
+	            }
+	            else {
+	                this._layoutCache._lastComputeOutBounds[key] = this._lastComputeOutBounds[key];
+	            }
+	        });
+	        return rect;
+	    }
+	    _clearLayoutCache() {
+	        this._layoutCache.width = 0;
+	        this._layoutCache.height = 0;
+	        this._layoutCache._lastComputeOutBounds = { x1: 0, x2: 0, y1: 0, y2: 0 };
+	    }
+	    onDataUpdate() {
+	        this._clearLayoutCache();
+	    }
 	}
 
 	const e10 = Math.sqrt(50);