@visactor/vrender-components 0.21.2-vstory.1 → 0.21.2-vstory.3

package/dist/index.es.js

@@ -2311,7 +2311,8 @@ const DefaultGroupAttribute = Object.assign(Object.assign({}, DefaultAttribute),
   justifyContent: "flex-start",
   alignItems: "flex-start",
   alignContent: "flex-start",
-  baseOpacity: 1
+  baseOpacity: 1,
+  cornerType: "round"
 });
 const DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   path: "",
@@ -2348,7 +2349,8 @@ const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute),
   x1: 0,
   y1: 0,
   strokeBoundsBuffer: 0,
-  cornerRadius: 0
+  cornerRadius: 0,
+  cornerType: "round"
 });
 Object.assign(Object.assign({}, DefaultAttribute), {
   width: 0,
@@ -2356,7 +2358,8 @@ Object.assign(Object.assign({}, DefaultAttribute), {
   x1: 0,
   y1: 0,
   cornerRadius: 0,
-  length: 0
+  length: 0,
+  cornerType: "round"
 });
 const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   symbolType: "circle",
@@ -2392,7 +2395,8 @@ const DefaultImageAttribute = Object.assign(Object.assign({
   height: 0
 }, DefaultAttribute), {
   fill: !0,
-  cornerRadius: 0
+  cornerRadius: 0,
+  cornerType: "round"
 });
 const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImageAttribute), {
   backgroundShowMode: "never",
@@ -4241,6 +4245,13 @@ class Easing {
     Easing[name] = func;
   }
 }
+function flicker(t, n) {
+  const step = 1 / n;
+  let flag = 1;
+  for (; t > step;) t -= step, flag *= -1;
+  const v = flag * t / step;
+  return v > 0 ? v : 1 + v;
+}
 Easing.quadIn = Easing.getPowIn(2), Easing.quadOut = Easing.getPowOut(2), Easing.quadInOut = Easing.getPowInOut(2), Easing.cubicIn = Easing.getPowIn(3), Easing.cubicOut = Easing.getPowOut(3), Easing.cubicInOut = Easing.getPowInOut(3), Easing.quartIn = Easing.getPowIn(4), Easing.quartOut = Easing.getPowOut(4), Easing.quartInOut = Easing.getPowInOut(4), Easing.quintIn = Easing.getPowIn(5), Easing.quintOut = Easing.getPowOut(5), Easing.quintInOut = Easing.getPowInOut(5), Easing.backIn = Easing.getBackIn(1.7), Easing.backOut = Easing.getBackOut(1.7), Easing.backInOut = Easing.getBackInOut(1.7), Easing.elasticIn = Easing.getElasticIn(1, .3), Easing.elasticOut = Easing.getElasticOut(1, .3), Easing.elasticInOut = Easing.getElasticInOut(1, .3 * 1.5), Easing.easeInOutQuad = t => (t /= .5) < 1 ? .5 * Math.pow(t, 2) : -.5 * ((t -= 2) * t - 2), Easing.easeOutElastic = x => {
   const c4 = 2 * Math.PI / 3;
   return 0 === x ? 0 : 1 === x ? 1 : Math.pow(2, -10 * x) * Math.sin((10 * x - .75) * c4) + 1;
@@ -4248,6 +4259,8 @@ Easing.quadIn = Easing.getPowIn(2), Easing.quadOut = Easing.getPowOut(2), Easing
   const c5 = 2 * Math.PI / 4.5;
   return 0 === x ? 0 : 1 === x ? 1 : x < .5 ? -Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
 };
+for (let i = 0; i < 10; i++) Easing[`flicker${i}`] = t => flicker(t, i);
+for (let i = 2; i < 10; i++) Easing[`aIn${i}`] = t => i * t * t + (1 - i) * t;
 
 class DefaultTimeline {
   constructor() {
@@ -4781,6 +4794,37 @@ var Direction;
 !function (Direction) {
   Direction[Direction.LEFT_TO_RIGHT = 0] = "LEFT_TO_RIGHT", Direction[Direction.RIGHT_TO_LEFT = 1] = "RIGHT_TO_LEFT", Direction[Direction.TOP_TO_BOTTOM = 2] = "TOP_TO_BOTTOM", Direction[Direction.BOTTOM_TO_TOP = 3] = "BOTTOM_TO_TOP", Direction[Direction.STROKE = 4] = "STROKE";
 }(Direction || (Direction = {}));
+class InputText extends ACustomAnimate {
+  constructor() {
+    super(...arguments), this.fromText = "", this.toText = "";
+  }
+  getEndProps() {
+    return !1 === this.valid ? {} : {
+      text: this.to
+    };
+  }
+  onBind() {
+    var _a, _b, _c;
+    this.fromText = null !== (_b = null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) && void 0 !== _b ? _b : "", this.toText = (null === (_c = this.to) || void 0 === _c ? void 0 : _c.text) || "", (!this.toText || isArray(this.toText) && 0 === this.toText.length) && (this.valid = !1), isArray(this.toText) && (this.toText = this.toText.map(item => (item || "").toString()));
+  }
+  onEnd() {
+    this.target.detachShadow();
+  }
+  onUpdate(end, ratio, out) {
+    if (!1 === this.valid) return;
+    const fromCount = this.fromText.length,
+      toTextIsArray = isArray(this.toText),
+      toCount = toTextIsArray ? this.toText.reduce((c, t) => c + (t || "").length, 0) : this.toText.length,
+      count = Math.ceil(fromCount + (toCount - fromCount) * ratio);
+    if (toTextIsArray) {
+      out.text = [];
+      let len = 0;
+      this.toText.forEach(t => {
+        len + t.length > count ? (out.text.push(t.substr(0, count - len)), len = count) : (out.text.push(t), len += t.length);
+      });
+    } else out.text = this.toText.substr(0, count);
+  }
+}
 
 const normalizeRectAttributes = attribute => {
   if (!attribute) return {
@@ -5630,6 +5674,20 @@ class Graphic extends Node {
         });
       return color && (nextAttributes[key] = color), !0;
     }
+    if (Array.isArray(nextStepVal) && nextStepVal.length === lastStepVal.length) {
+      const nextList = [];
+      let valid = !0;
+      for (let i = 0; i < nextStepVal.length; i++) {
+        const v = lastStepVal[i],
+          val = v + (nextStepVal[i] - v) * ratio;
+        if (!Number.isFinite(val)) {
+          valid = !1;
+          break;
+        }
+        nextList.push(val);
+      }
+      valid && (nextAttributes[key] = nextList);
+    }
     return !1;
   }
   _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {}
@@ -10268,7 +10326,7 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
 const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
 
 const halfPi = pi / 2;
-function createRectPath(path, x, y, width, height, rectCornerRadius, edgeCb) {
+function createRectPath(path, x, y, width, height, rectCornerRadius, roundCorner, edgeCb) {
   let cornerRadius;
   if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
     const cornerRadiusArr = rectCornerRadius;
@@ -10300,27 +10358,29 @@ function createRectPath(path, x, y, width, height, rectCornerRadius, edgeCb) {
     rightBottomPoint2 = [rightBottom[0], rightBottom[1] - _cornerRadius[2]],
     leftBottomPoint1 = [leftBottom[0] + _cornerRadius[3], leftBottom[1]],
     leftBottomPoint2 = [leftBottom[0], leftBottom[1] - _cornerRadius[3]];
-  if (path.moveTo(leftTopPoint1[0], leftTopPoint1[1]), edgeCb && edgeCb[0] ? edgeCb[0](leftTopPoint1[0], leftTopPoint1[1], rightTopPoint1[0], rightTopPoint1[1]) : path.lineTo(rightTopPoint1[0], rightTopPoint1[1]), !arrayEqual(rightTopPoint1, rightTopPoint2)) {
-    edgeCb && edgeCb[0] && path.moveTo(rightTopPoint1[0], rightTopPoint1[1]);
-    const centerX = rightTopPoint1[0],
-      centerY = rightTopPoint1[1] + _cornerRadius[1];
-    path.arc(centerX, centerY, _cornerRadius[1], -halfPi, 0, !1);
-  }
-  if (edgeCb && edgeCb[1] ? edgeCb[1](rightTopPoint2[0], rightTopPoint2[1], rightBottomPoint2[0], rightBottomPoint2[1]) : path.lineTo(rightBottomPoint2[0], rightBottomPoint2[1]), !arrayEqual(rightBottomPoint1, rightBottomPoint2)) {
-    const centerX = rightBottomPoint2[0] - _cornerRadius[2],
-      centerY = rightBottomPoint2[1];
-    edgeCb && edgeCb[1] && path.moveTo(rightBottomPoint2[0], rightBottomPoint2[1]), path.arc(centerX, centerY, _cornerRadius[2], 0, halfPi, !1);
-  }
-  if (edgeCb && edgeCb[2] ? edgeCb[2](rightBottomPoint1[0], rightBottomPoint1[1], leftBottomPoint1[0], leftBottomPoint1[1]) : path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]), !arrayEqual(leftBottomPoint1, leftBottomPoint2)) {
-    const centerX = leftBottomPoint1[0],
-      centerY = leftBottomPoint1[1] - _cornerRadius[3];
-    edgeCb && edgeCb[2] && path.moveTo(leftBottomPoint1[0], leftBottomPoint1[1]), path.arc(centerX, centerY, _cornerRadius[3], halfPi, pi, !1);
-  }
-  if (edgeCb && edgeCb[3] ? edgeCb[3](leftBottomPoint2[0], leftBottomPoint2[1], leftTopPoint2[0], leftTopPoint2[1]) : path.lineTo(leftTopPoint2[0], leftTopPoint2[1]), !arrayEqual(leftTopPoint1, leftTopPoint2)) {
-    const centerX = leftTopPoint1[0],
-      centerY = leftTopPoint1[1] + _cornerRadius[0];
-    edgeCb && edgeCb[3] && path.moveTo(leftTopPoint2[0], leftTopPoint2[1]), path.arc(centerX, centerY, _cornerRadius[0], pi, pi + halfPi, !1);
-  }
+  if (path.moveTo(leftTopPoint1[0], leftTopPoint1[1]), roundCorner) {
+    if (edgeCb && edgeCb[0] ? edgeCb[0](leftTopPoint1[0], leftTopPoint1[1], rightTopPoint1[0], rightTopPoint1[1]) : path.lineTo(rightTopPoint1[0], rightTopPoint1[1]), !arrayEqual(rightTopPoint1, rightTopPoint2)) {
+      edgeCb && edgeCb[0] && path.moveTo(rightTopPoint1[0], rightTopPoint1[1]);
+      const centerX = rightTopPoint1[0],
+        centerY = rightTopPoint1[1] + _cornerRadius[1];
+      path.arc(centerX, centerY, _cornerRadius[1], -halfPi, 0, !1);
+    }
+    if (edgeCb && edgeCb[1] ? edgeCb[1](rightTopPoint2[0], rightTopPoint2[1], rightBottomPoint2[0], rightBottomPoint2[1]) : path.lineTo(rightBottomPoint2[0], rightBottomPoint2[1]), !arrayEqual(rightBottomPoint1, rightBottomPoint2)) {
+      const centerX = rightBottomPoint2[0] - _cornerRadius[2],
+        centerY = rightBottomPoint2[1];
+      edgeCb && edgeCb[1] && path.moveTo(rightBottomPoint2[0], rightBottomPoint2[1]), path.arc(centerX, centerY, _cornerRadius[2], 0, halfPi, !1);
+    }
+    if (edgeCb && edgeCb[2] ? edgeCb[2](rightBottomPoint1[0], rightBottomPoint1[1], leftBottomPoint1[0], leftBottomPoint1[1]) : path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]), !arrayEqual(leftBottomPoint1, leftBottomPoint2)) {
+      const centerX = leftBottomPoint1[0],
+        centerY = leftBottomPoint1[1] - _cornerRadius[3];
+      edgeCb && edgeCb[2] && path.moveTo(leftBottomPoint1[0], leftBottomPoint1[1]), path.arc(centerX, centerY, _cornerRadius[3], halfPi, pi, !1);
+    }
+    if (edgeCb && edgeCb[3] ? edgeCb[3](leftBottomPoint2[0], leftBottomPoint2[1], leftTopPoint2[0], leftTopPoint2[1]) : path.lineTo(leftTopPoint2[0], leftTopPoint2[1]), !arrayEqual(leftTopPoint1, leftTopPoint2)) {
+      const centerX = leftTopPoint1[0],
+        centerY = leftTopPoint1[1] + _cornerRadius[0];
+      edgeCb && edgeCb[3] && path.moveTo(leftTopPoint2[0], leftTopPoint2[1]), path.arc(centerX, centerY, _cornerRadius[0], pi, pi + halfPi, !1);
+    }
+  } else edgeCb && edgeCb[0] ? edgeCb[0](leftTopPoint1[0], leftTopPoint1[1], rightTopPoint1[0], rightTopPoint1[1]) : path.lineTo(rightTopPoint1[0], rightTopPoint1[1]), edgeCb && edgeCb[1] ? edgeCb[1](rightTopPoint1[0], rightTopPoint1[1], rightBottomPoint1[0], rightBottomPoint1[1]) : path.lineTo(rightBottomPoint1[0], rightBottomPoint1[1]), edgeCb && edgeCb[2] ? edgeCb[2](rightBottomPoint1[0], rightBottomPoint1[1], leftBottomPoint1[0], leftBottomPoint1[1]) : path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]), edgeCb && edgeCb[2] ? edgeCb[2](leftBottomPoint1[0], leftBottomPoint1[1], leftTopPoint1[0], leftTopPoint1[1]) : path.lineTo(leftTopPoint1[0], leftTopPoint1[1]);
   return !edgeCb && path.closePath(), path;
 }
 
@@ -10345,6 +10405,7 @@ class DefaultRectRenderContribution {
     if (!doOuterBorder && !doInnerBorder) return;
     const {
       cornerRadius = rectAttribute.cornerRadius,
+      cornerType = rectAttribute.cornerType,
       opacity = rectAttribute.opacity,
       x: originX = rectAttribute.x,
       y: originY = rectAttribute.y,
@@ -10369,7 +10430,7 @@ class DefaultRectRenderContribution {
         nextX = x + sign * d,
         nextY = y + sign * d,
         dw = 2 * d;
-      if (0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width - sign * dw, height - sign * dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - sign * dw, height - sign * dw, cornerRadius)), context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, borderStyle, rectAttribute[key]);else if (doStroke) {
+      if (0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(nextX, nextY, width - sign * dw, height - sign * dw)) : (context.beginPath(), createRectPath(context, nextX, nextY, width - sign * dw, height - sign * dw, cornerRadius, "round" === cornerType)), context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), strokeCb) strokeCb(context, borderStyle, rectAttribute[key]);else if (doStroke) {
         const lastOpacity = rectAttribute[key].opacity;
         rectAttribute[key].opacity = opacity, context.setStrokeStyle(rect, borderStyle, (originX - x) / scaleX, (originY - y) / scaleY, rectAttribute[key]), rectAttribute[key].opacity = lastOpacity, context.stroke();
       }
@@ -10400,7 +10461,8 @@ let SplitRectAfterRenderContribution = class {
       x: originX = groupAttribute.x,
       y: originY = groupAttribute.y,
       stroke = groupAttribute.stroke,
-      cornerRadius = groupAttribute.cornerRadius
+      cornerRadius = groupAttribute.cornerRadius,
+      cornerType = groupAttribute.cornerType
     } = rect.attribute;
     let {
       width: width,
@@ -10410,7 +10472,7 @@ let SplitRectAfterRenderContribution = class {
       if (context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute), !(0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num))) {
         let lastStroke,
           lastStrokeI = 0;
-        return createRectPath(context, x, y, width, height, cornerRadius, new Array(4).fill(0).map((_, i) => (x1, y1, x2, y2) => {
+        return createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType, new Array(4).fill(0).map((_, i) => (x1, y1, x2, y2) => {
           stroke[i] && (lastStrokeI === i - 1 && stroke[i] === lastStroke || (context.setStrokeStyle(rect, Object.assign(Object.assign({}, rect.attribute), {
             stroke: stroke[i]
           }), x, y, groupAttribute), context.beginPath(), context.moveTo(x1, y1), lastStroke = stroke[i]), lastStrokeI = i, context.lineTo(x2, y2), context.stroke(), 3 === i && context.beginPath());
@@ -10469,7 +10531,7 @@ class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgroundRend
         width: width,
         height: height
       } = getActualPosition(graphic);
-      cornerRadius ? createRectPath(context, x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY, cornerRadius) : context.rect(x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
+      cornerRadius ? createRectPath(context, x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY, cornerRadius, !0) : context.rect(x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
     } else {
       context.beginPath();
       const b = graphic.AABBBounds;
@@ -11574,6 +11636,7 @@ let DefaultCanvasRectRender = class extends BaseRender {
         background: background,
         stroke = rectAttribute.stroke,
         cornerRadius = rectAttribute.cornerRadius,
+        cornerType = rectAttribute.cornerType,
         opacity = rectAttribute.opacity,
         fillOpacity = rectAttribute.fillOpacity,
         lineWidth = rectAttribute.lineWidth,
@@ -11597,7 +11660,7 @@ let DefaultCanvasRectRender = class extends BaseRender {
     if (!rect.valid || !visible) return;
     if (!doFill && !doStroke) return;
     if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
-    0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius));
+    0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType));
     const doFillOrStroke = {
       doFill: doFill,
       doStroke: doStroke
@@ -11775,7 +11838,7 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
       const {
         backgroundCornerRadius: backgroundCornerRadius
       } = graphic.attribute;
-      context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+      context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
     }
     shouldReCalBounds && boundsAllocate.free(b), restore();
   }
@@ -12076,6 +12139,7 @@ let DefaultCanvasGroupRender = class {
         lineWidth = groupAttribute.lineWidth,
         visible = groupAttribute.visible,
         fillStrokeOrder = groupAttribute.fillStrokeOrder,
+        cornerType = groupAttribute.cornerType,
         x: originX = groupAttribute.x,
         y: originY = groupAttribute.y
       } = group.attribute,
@@ -12095,7 +12159,7 @@ let DefaultCanvasGroupRender = class {
       context.disableFill = !0, context.disableStroke = !0, context.disableBeginPath = !0, path.forEach(g => {
         drawContext.drawContribution.getRenderContribution(g).draw(g, drawContext.renderService, drawContext, params);
       }), context.disableFill = disableFill, context.disableStroke = disableStroke, context.disableBeginPath = disableBeginPath;
-    } else 0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius));
+    } else 0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType));
     this._groupRenderContribitions || (this._groupRenderContribitions = this.groupRenderContribitions.getContributions() || [], this._groupRenderContribitions.push(defaultGroupBackgroundRenderContribution));
     const doFillOrStroke = {
       doFill: doFill,
@@ -12177,6 +12241,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
         y: originY = imageAttribute.y,
         cornerRadius = imageAttribute.cornerRadius,
         fillStrokeOrder = imageAttribute.fillStrokeOrder,
+        cornerType = imageAttribute.cornerType,
         image: url
       } = image.attribute,
       data = this.valid(image, imageAttribute, fillCb);
@@ -12194,7 +12259,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
           const res = image.resources.get(url);
           if ("success" !== res.state) return;
           let needRestore = !1;
-          0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+          0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
           let repeat = 0;
           if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
             const pattern = context.createPattern(res.data, repeatStr[repeat]);
@@ -12315,10 +12380,7 @@ class ShadowRootDrawItemInterceptorContribution {
     const {
       context: context
     } = drawContext;
-    context.highPerformanceSave();
-    const t1 = graphic.parent.globalTransMatrix,
-      t2 = graphic.stage.window.getViewBoxTransform().clone().multiply(t1.a, t1.b, t1.c, t1.d, t1.e, t1.f);
-    if (graphic.parent && context.setTransformFromMatrix(t2, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+    if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
       tempDirtyBounds.copy(drawContribution.dirtyBounds), tempBackupDirtyBounds.copy(drawContribution.backupDirtyBounds);
       const m = graphic.globalTransMatrix.getInverse();
       drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m), drawContribution.backupDirtyBounds.copy(drawContribution.dirtyBounds);
@@ -13472,7 +13534,7 @@ let DefaultCanvasRichTextRender = class extends BaseRender {
     if (margin && (x += icon._marginArray[3], y += icon._marginArray[0]), icon._hovered) {
       const expandX = (backgroundWidth - width) / 2,
         expandY = (backgroundHeight - height) / 2;
-      0 === backgroundRadius ? (context.beginPath(), context.rect(x - expandX, y - expandY, backgroundWidth, backgroundHeight)) : (context.beginPath(), createRectPath(context, x - expandX, y - expandY, backgroundWidth, backgroundHeight, backgroundRadius)), backgroundFill && (context.globalAlpha = backgroundFillOpacity, context.fillStyle = backgroundFill, context.fill()), backgroundStroke && (context.globalAlpha = backgroundStrokeOpacity, context.strokeStyle = backgroundStroke, context.stroke());
+      0 === backgroundRadius ? (context.beginPath(), context.rect(x - expandX, y - expandY, backgroundWidth, backgroundHeight)) : (context.beginPath(), createRectPath(context, x - expandX, y - expandY, backgroundWidth, backgroundHeight, backgroundRadius, !0)), backgroundFill && (context.globalAlpha = backgroundFillOpacity, context.fillStyle = backgroundFill, context.fill()), backgroundStroke && (context.globalAlpha = backgroundStrokeOpacity, context.strokeStyle = backgroundStroke, context.stroke());
     }
     const res = url && (null === (_a = null == icon ? void 0 : icon.resources) || void 0 === _a ? void 0 : _a.get(url));
     res && "success" === res.state && (context.globalAlpha = opacity, context.drawImage(res.data, x, y, width, height));
@@ -15854,6 +15916,20 @@ function setPoptipTheme(defaultPoptipTheme) {
 
 const _tBounds = new AABBBounds();
 loadPoptipComponent();
+const tlStr = 'M -0.5 -0.5, L -0.5 0.5, L 0.5 -0.5, Z';
+const blStr = 'M -0.5 -0.5, L -0.5 0.5, L 0.5 0.5, Z';
+const trStr = 'M -0.5 -0.5, L 0.5 -0.5, L 0.5 0.5, Z';
+const brStr = 'M 0.5 -0.5, L 0.5 0.5, L -0.5 0.5, Z';
+const conciseSymbolMap = {
+    tl: tlStr,
+    tr: trStr,
+    bl: blStr,
+    br: brStr,
+    lt: tlStr,
+    lb: blStr,
+    rt: trStr,
+    rb: brStr
+};
 class PopTip extends AbstractComponent {
     constructor(attributes, options) {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, PopTip.defaultAttributes, attributes));
@@ -15861,13 +15937,14 @@ class PopTip extends AbstractComponent {
         this.positionList = ['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'];
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const { titleStyle = {}, position, contentStyle = {}, panel = {}, space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0 } = this.attribute;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const { titleStyle = {}, position, contentStyle = {}, panel, logoSymbol, logoText, logoTextStyle = {}, triangleMode = 'default', space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0 } = this.attribute;
         let { title = '', content = '' } = this.attribute;
         title = this.attribute.titleFormatMethod ? this.attribute.titleFormatMethod(title) : title;
         content = this.attribute.contentFormatMethod ? this.attribute.contentFormatMethod(content) : content;
         const parsedPadding = normalizePadding(padding);
         const group = this.createOrUpdateChild('poptip-content', { x: 0, y: 0, zIndex: 1 }, 'group');
+        this.group = group;
         const maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3];
         const titleVisible = isValid(title) && visible !== false;
         const titleAttrs = Object.assign(Object.assign({ text: isArray(title) ? title : [title], visible: titleVisible, wrap: true }, titleStyle), { x: parsedPadding[3], y: parsedPadding[0], maxLineWidth, textAlign: 'left', textBaseline: 'top' });
@@ -15894,6 +15971,8 @@ class PopTip extends AbstractComponent {
         if (contentVisible) {
             height += contentHeight;
         }
+        this.titleShape = titleShape;
+        this.contentShape = contentShape;
         let popTipWidth = max(titleWidth + parsedPadding[1] + parsedPadding[3], contentWidth + parsedPadding[1] + parsedPadding[3]);
         if (popTipWidth > maxWidth) {
             popTipWidth = maxWidth;
@@ -15902,7 +15981,15 @@ class PopTip extends AbstractComponent {
             popTipWidth = minWidth;
         }
         let poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
-        const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
+        const { visible: bgVisible, square } = panel, backgroundStyle = __rest(panel, ["visible", "square"]);
+        if (square) {
+            const maxWH = max(popTipWidth, poptipHeight);
+            popTipWidth = maxWH;
+            const deltaH = maxWH - poptipHeight;
+            poptipHeight = maxWH;
+            titleShape.setAttributes({ dy: deltaH / 2 });
+            contentShape.setAttributes({ dy: deltaH / 2 });
+        }
         const symbolSize = (_a = backgroundStyle.size) !== null && _a !== void 0 ? _a : 12;
         const spaceSize = isArray(symbolSize)
             ? [symbolSize[0] + ((_b = backgroundStyle.space) !== null && _b !== void 0 ? _b : 0), symbolSize[1] + ((_c = backgroundStyle.space) !== null && _c !== void 0 ? _c : 0)]
@@ -15938,22 +16025,62 @@ class PopTip extends AbstractComponent {
         let maxBBoxSize = -Infinity;
         for (let i = 0; i < this.positionList.length + 1; i++) {
             const p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
-            const { angle, offset, rectOffset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth]);
+            let symbolType = 'arrow2Left';
+            let offsetX = (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
+            let offsetY = 0;
+            if (p === 'top' || p === 'bottom' || p === 'left' || p === 'right') {
+                symbolType = 'arrow2Left';
+            }
+            else if (triangleMode === 'concise') {
+                symbolType = conciseSymbolMap[p];
+                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(position)
+                    ? (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2
+                    : -(isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2;
+                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(position)
+                    ? -(isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2
+                    : (isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2;
+            }
+            const { angle, offset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth], symbolType);
             if (isBoolean(bgVisible)) {
-                const offsetX = (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
-                const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: 0, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType: 'arrow2Left', angle: angle, dx: offset[0], dy: offset[1], size: symbolSize, zIndex: -9 }), 'symbol');
+                const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: offsetY, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType, angle: angle, dx: offset[0], dy: offset[1] - ((_j = backgroundStyle.space) !== null && _j !== void 0 ? _j : 0), size: symbolSize, zIndex: 9 }), 'symbol');
                 if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
                     bgSymbol.states = state.panel;
                 }
-                const bgRect = group.createOrUpdateChild('poptip-rect-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: 0, y: 0, width: popTipWidth, height: poptipHeight, zIndex: -8 }), 'rect');
+                let bgRect;
+                if (panel.panelSymbolType) {
+                    bgRect = group.createOrUpdateChild('poptip-rect-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: 0, y: 0, symbolType: 'rect', size: [popTipWidth, poptipHeight], zIndex: -8 }), 'symbol');
+                }
+                else {
+                    bgRect = group.createOrUpdateChild('poptip-rect-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: 0, y: 0, width: popTipWidth, height: poptipHeight, zIndex: -8 }), 'rect');
+                }
                 if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
                     bgRect.states = state.panel;
                 }
             }
             group.setAttributes({
                 x: -offset[0] + dx,
-                y: -offset[1] + dy
+                y: -offset[1] + dy,
+                anchor: [offsetX, offsetY]
             });
+            if (logoSymbol) {
+                const { size = 12 } = logoSymbol;
+                const sizeArray = isArray(size) ? size : [size, size];
+                if (sizeArray[1] === 'auto') {
+                    sizeArray[1] = poptipHeight;
+                }
+                if (sizeArray[0] === 'auto') {
+                    sizeArray[0] = poptipHeight;
+                }
+                const sizeW = sizeArray[0];
+                group.createOrUpdateChild('poptip-logo', Object.assign(Object.assign({}, logoSymbol), { x: 0, y: poptipHeight / 2, visible: bgVisible && (contentVisible || titleVisible), zIndex: 10, size: sizeArray }), 'symbol');
+                group.setAttributes({
+                    x: -offset[0] + dx + sizeW / 2,
+                    y: -offset[1] + dy
+                });
+                if (logoText) {
+                    group.createOrUpdateChild('poptip-logo-text', Object.assign(Object.assign({}, logoTextStyle), { x: 0, y: poptipHeight / 2, visible: bgVisible && (contentVisible || titleVisible), text: logoText, textAlign: 'center', textBaseline: 'middle', zIndex: 10 }), 'text');
+                }
+            }
             if (layout && range) {
                 _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
                 const b = _tBounds;
@@ -15975,47 +16102,85 @@ class PopTip extends AbstractComponent {
             }
         }
     }
-    getAngleAndOffset(position, width, height, size) {
-        const sizeH = size[1] / 2;
+    getAngleAndOffset(position, width, height, size, symbolType) {
+        const sizeH = symbolType === 'arrow2Left' ? size[1] / 2 : size[1];
         switch (position) {
             case 'tl':
                 return {
-                    angle: (pi / 2) * 3,
-                    offset: [width / 4, height + sizeH],
-                    rectOffset: [-width / 4, -height - size[1]]
+                    angle: symbolType === 'arrow2Left' ? (pi / 2) * 3 : 0,
+                    offset: symbolType === 'arrow2Left' ? [width / 4, height + sizeH] : [0, height + sizeH]
                 };
             case 'top':
-                return { angle: (pi / 2) * 3, offset: [width / 2, height + sizeH], rectOffset: [0, -height - size[1]] };
+                return { angle: (pi / 2) * 3, offset: [width / 2, height + sizeH] };
             case 'tr':
                 return {
-                    angle: (pi / 2) * 3,
-                    offset: [(width / 4) * 3, height + sizeH],
-                    rectOffset: [(width / 4) * 3, -height - size[1]]
+                    angle: symbolType === 'arrow2Left' ? (pi / 2) * 3 : 0,
+                    offset: symbolType === 'arrow2Left' ? [(width / 4) * 3, height + sizeH] : [width, height + sizeH]
                 };
             case 'rt':
-                return { angle: 0, offset: [-sizeH, height / 5], rectOffset: [(width / 4) * 3, -height - size[1]] };
+                return {
+                    angle: 0,
+                    offset: symbolType === 'arrow2Left' ? [-sizeH, height / 5] : [-sizeH, 0]
+                };
             case 'right':
-                return { angle: 0, offset: [-sizeH, height / 2], rectOffset: [(width / 4) * 3, -height - size[1]] };
+                return { angle: 0, offset: [-sizeH, height / 2] };
             case 'rb':
-                return { angle: 0, offset: [-sizeH, (height / 5) * 4], rectOffset: [(width / 4) * 3, -height - size[1]] };
+                return {
+                    angle: 0,
+                    offset: symbolType === 'arrow2Left' ? [-sizeH, (height / 5) * 4] : [-sizeH, height]
+                };
             case 'bl':
-                return { angle: pi / 2, offset: [width / 4, -sizeH], rectOffset: [-width / 4, -height - size[1]] };
+                return {
+                    angle: symbolType === 'arrow2Left' ? pi / 2 : 0,
+                    offset: symbolType === 'arrow2Left' ? [width / 4, -sizeH] : [0, -sizeH]
+                };
             case 'bottom':
-                return { angle: pi / 2, offset: [width / 2, -sizeH], rectOffset: [0, -height - size[1]] };
+                return { angle: pi / 2, offset: [width / 2, -sizeH] };
             case 'br':
-                return { angle: pi / 2, offset: [(width / 4) * 3, -sizeH], rectOffset: [(width / 4) * 3, -height - size[1]] };
+                return {
+                    angle: symbolType === 'arrow2Left' ? pi / 2 : 0,
+                    offset: symbolType === 'arrow2Left' ? [(width / 4) * 3, -sizeH] : [width, -sizeH]
+                };
             case 'lt':
-                return { angle: pi, offset: [width + sizeH, height / 5], rectOffset: [-width / 4, -height - size[1]] };
+                return {
+                    angle: symbolType === 'arrow2Left' ? pi : 0,
+                    offset: symbolType === 'arrow2Left' ? [width + sizeH, height / 5] : [width + sizeH, 0]
+                };
             case 'left':
-                return { angle: pi, offset: [width + sizeH, height / 2], rectOffset: [0, -height - size[1]] };
+                return { angle: pi, offset: [width + sizeH, height / 2] };
             case 'lb':
                 return {
-                    angle: pi,
-                    offset: [width + sizeH, (height / 5) * 4],
-                    rectOffset: [(width / 4) * 3, -height - size[1]]
+                    angle: symbolType === 'arrow2Left' ? pi : 0,
+                    offset: symbolType === 'arrow2Left' ? [width + sizeH, (height / 5) * 4] : [width + sizeH, height]
                 };
         }
     }
+    appearAnimate(animateConfig) {
+        const { duration = 1000, easing = 'quadOut' } = animateConfig;
+        this.setAttributes({ scaleX: 0, scaleY: 0 });
+        this.animate().to({ scaleX: 1, scaleY: 1 }, (duration / 3) * 2, easing);
+        this.titleShape &&
+            this.titleShape
+                .animate()
+                .play(new InputText({ text: '' }, { text: this.titleShape.attribute.text }, duration, easing));
+        this.contentShape &&
+            this.contentShape
+                .animate()
+                .play(new InputText({ text: '' }, { text: this.contentShape.attribute.text }, duration, easing));
+        if (animateConfig.wave) {
+            const dur = duration / 6;
+            this.group
+                .animate()
+                .to({ angle: animateConfig.wave }, dur, easing)
+                .to({ angle: -animateConfig.wave }, dur * 2, easing)
+                .to({ angle: animateConfig.wave }, dur * 2, easing)
+                .to({ angle: 0 }, dur, easing);
+        }
+    }
+    disappearAnimate(animateConfig) {
+        const { duration = 1000, easing = 'quadOut' } = animateConfig;
+        this.animate().to({ scaleX: 0, scaleY: 0 }, duration, easing);
+    }
 }
 PopTip.defaultAttributes = {
     position: 'rt',
@@ -16034,6 +16199,7 @@ PopTip.defaultAttributes = {
         textAlign: 'left',
         textBaseline: 'top'
     },
+    panel: {},
     maxWidthPercent: 0.8,
     space: 8,
     padding: 10
@@ -17062,7 +17228,7 @@ function shiftY(texts, option) {
     if (globalShiftY.enable !== false) {
         const { maxIterations = 10, maxError = 0.1, padding = 1, maxAttempts = 1000, deltaYTolerance = Number.MAX_VALUE } = globalShiftY;
         for (let iter = 0; iter < maxIterations; iter++) {
-            texts.sort((a, b) => getY1(a) - getY1(b));
+            texts.sort((a, b) => getY1Initial(a) - getY1Initial(b));
             let error = 0;
             for (let i = 0; i < n - 1; i++) {
                 const curText = texts[i];
@@ -17618,7 +17784,7 @@ class LabelBase extends AbstractComponent {
         }
         return this.getRootNode().find(node => node.name === baseMarkGroupName, true);
     }
-    getGraphicBounds(graphic, point = {}) {
+    getGraphicBounds(graphic, point = {}, position) {
         if (graphic) {
             if (graphic.attribute.visible !== false) {
                 return graphic.AABBBounds;
@@ -17626,6 +17792,15 @@ class LabelBase extends AbstractComponent {
             const { x, y } = graphic.attribute;
             return { x1: x, x2: x, y1: y, y2: y };
         }
+        if (point && position && position === 'inside-middle') {
+            const { x, y, x1 = x, y1 = y } = point;
+            return {
+                x1: (x + x1) / 2,
+                x2: (x + x1) / 2,
+                y1: (y + y1) / 2,
+                y2: (y + y1) / 2
+            };
+        }
         const { x, y } = point;
         return { x1: x, x2: x, y1: y, y2: y };
     }
@@ -30519,6 +30694,204 @@ WeatherBox.defaultAttributes = {
     snowRainBottomPadding: 0
 };
 
-const version = "0.21.2-vstory.1";
+class StoryLabelItem extends AbstractComponent {
+    constructor(attributes, options) {
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, StoryLabelItem.defaultAttributes, attributes));
+    }
+    render() {
+        const { contentOffsetX, contentOffsetY, lineStyle, symbolStartStyle, symbolEndStyle, symbolStartOuterStyle, titleTop: titleTopText, titleBottom: titleBottomText, titleTopStyle, titleBottomStyle, titleSpace, titleTopPanelStyle, titleBottomPanelStyle, theme } = this.attribute;
+        const group = this.createOrUpdateChild('label-item-container', { x: 0, y: 0, zIndex: 1 }, 'group');
+        const symbolStart = group.createOrUpdateChild('label-item-symbol-start', Object.assign({ x: 0, y: 0 }, symbolStartStyle), 'symbol');
+        const symbolEnd = group.createOrUpdateChild('label-item-symbol-end', Object.assign({ x: contentOffsetX, y: contentOffsetY }, symbolEndStyle), 'symbol');
+        const symbolStartOut = group.createOrUpdateChild('label-item-symbol-start-out', Object.assign({ x: 0, y: 0 }, symbolStartOuterStyle), 'symbol');
+        const spaceW = titleSpace[0];
+        const spaceH = titleSpace[1];
+        const titleTopGroup = group.createOrUpdateChild('label-item-title-top-group', { x: contentOffsetX, y: contentOffsetY, clip: true }, 'group');
+        const titleTop = titleTopGroup.createOrUpdateChild('label-item-title-top', Object.assign(Object.assign({ x: spaceW, y: -spaceH, text: titleTopText }, titleTopStyle), { textBaseline: 'bottom', textAlign: 'left', zIndex: 10 }), 'text');
+        const titleTopBounds = titleTop.AABBBounds;
+        if (contentOffsetX > 0) {
+            titleTopGroup.setAttributes({ x: contentOffsetX - titleTopBounds.width() - spaceW * 2 });
+        }
+        titleTopGroup.setAttributes({
+            width: titleTopBounds.width() + spaceW * 2,
+            height: -titleTopBounds.height() - spaceH * 2
+        });
+        const titleTopPanel = titleTopGroup.createOrUpdateChild('label-item-title-top-panel', Object.assign(Object.assign({}, titleTopPanelStyle), { x: titleTopPanelStyle.padding.left, y: (titleTopGroup.attribute.height > 0 ? 0 : titleTopGroup.attribute.height) + titleTopPanelStyle.padding.top, width: titleTopGroup.attribute.width - titleTopPanelStyle.padding.left - titleTopPanelStyle.padding.right, height: (titleTopGroup.attribute.height > 0 ? 1 : -1) * titleTopGroup.attribute.height -
+                titleTopPanelStyle.padding.bottom -
+                titleTopPanelStyle.padding.top, scaleCenter: [titleTopGroup.attribute.width / 2, titleTopGroup.attribute.height / 2] }), 'rect');
+        this._titleTopPanel = titleTopPanel;
+        const titleBottomGroup = group.createOrUpdateChild('label-item-title-bottom-group', { x: contentOffsetX, y: contentOffsetY, clip: true }, 'group');
+        const titleBottom = titleBottomGroup.createOrUpdateChild('label-item-title-bottom', Object.assign(Object.assign({ x: spaceW, y: spaceH, text: titleBottomText }, titleBottomStyle), { textBaseline: 'top', textAlign: 'left', zIndex: 10 }), 'text');
+        const titleBottomBounds = titleBottom.AABBBounds;
+        if (contentOffsetX > 0) {
+            titleBottomGroup.setAttributes({ x: contentOffsetX - titleBottomBounds.width() - spaceW * 2 });
+        }
+        titleBottomGroup.setAttributes({
+            width: titleBottomBounds.width() + spaceW * 2,
+            height: titleTopBounds.height() + spaceH * 2
+        });
+        const titleBottomPanel = titleBottomGroup.createOrUpdateChild('label-item-title-bottom-panel', Object.assign(Object.assign({}, titleBottomPanelStyle), { x: titleBottomPanelStyle.padding.left, y: (titleBottomGroup.attribute.height > 0 ? 0 : titleBottomGroup.attribute.height) +
+                titleBottomPanelStyle.padding.top, width: titleBottomGroup.attribute.width - titleBottomPanelStyle.padding.left - titleBottomPanelStyle.padding.right, height: (titleBottomGroup.attribute.height > 0 ? 1 : -1) * titleBottomGroup.attribute.height -
+                titleBottomPanelStyle.padding.bottom -
+                titleBottomPanelStyle.padding.top, scaleCenter: [titleBottomGroup.attribute.width / 2, titleBottomGroup.attribute.height / 2] }), 'rect');
+        this._titleBottomPanel = titleBottomPanel;
+        const maxTextWidth = Math.max(titleTop.AABBBounds.width(), titleBottom.AABBBounds.width()) + spaceW * 2;
+        const points = [
+            { x: 0, y: 0 },
+            contentOffsetX > 0
+                ? { x: contentOffsetX - maxTextWidth, y: contentOffsetY }
+                : { x: contentOffsetX + maxTextWidth, y: contentOffsetY },
+            { x: contentOffsetX, y: contentOffsetY }
+        ];
+        if (theme === 'simple') {
+            points.pop();
+            const p = points[1];
+            symbolEnd.setAttributes(p);
+        }
+        const line = group.createOrUpdateChild('label-item-line', Object.assign(Object.assign({ x: 0, y: 0 }, lineStyle), { points }), 'line');
+        this._symbolEnd = symbolEnd;
+        this._symbolStart = symbolStart;
+        this._symbolStartOuter = symbolStartOut;
+        this._titleTop = titleTop;
+        this._titleBottom = titleBottom;
+        this._line = line;
+    }
+    appearAnimate(animateConfig) {
+        const { duration = 1000, easing = 'quadOut', symbolStartOuterType = 'scale', titleType = 'typewriter', titlePanelType = 'scale' } = animateConfig;
+        const symbolTime = duration / 10;
+        this._symbolStart.setAttributes({ scaleX: 0, scaleY: 0 });
+        this._symbolStart.animate().to({ scaleX: 1, scaleY: 1 }, symbolTime * 5, easing);
+        let symbolStartOuterFrom;
+        let symbolStartOuterTo;
+        if (symbolStartOuterType === 'scale') {
+            symbolStartOuterFrom = { scaleX: 0, scaleY: 0 };
+            symbolStartOuterTo = { scaleX: 1, scaleY: 1 };
+        }
+        else {
+            symbolStartOuterFrom = { clipRange: 0 };
+            symbolStartOuterTo = { clipRange: 1 };
+        }
+        this._symbolStartOuter.setAttributes(symbolStartOuterFrom);
+        this._symbolStartOuter.animate().to(symbolStartOuterTo, symbolTime * 5, easing);
+        this._symbolEnd.setAttributes({ scaleX: 0, scaleY: 0 });
+        this._symbolEnd
+            .animate()
+            .wait(symbolTime * 8)
+            .to({ scaleX: 1, scaleY: 1 }, symbolTime * 2, easing);
+        this._line.setAttributes({ clipRange: 0 });
+        this._line.animate().to({ clipRange: 1 }, symbolTime * 9, easing);
+        if (titleType === 'typewriter') {
+            const titleTopText = this._titleTop.attribute.text;
+            this._titleTop.setAttributes({ text: '' });
+            this._titleTop
+                .animate()
+                .wait(symbolTime * 5)
+                .play(new InputText({ text: '' }, { text: titleTopText }, symbolTime * 4, 'linear'));
+            const titleBottomText = this._titleBottom.attribute.text;
+            this._titleBottom.setAttributes({ text: '' });
+            this._titleBottom
+                .animate()
+                .wait(symbolTime * 5)
+                .play(new InputText({ text: '' }, { text: titleBottomText }, symbolTime * 4, 'linear'));
+        }
+        else {
+            this._titleTop.setAttributes({ dy: this._titleTop.AABBBounds.height() + 10 });
+            this._titleTop
+                .animate()
+                .wait(symbolTime * 5)
+                .to({ dy: 0 }, symbolTime * 4, 'linear');
+            this._titleBottom.setAttributes({ dy: -(10 + this._titleBottom.AABBBounds.height()) });
+            this._titleBottom
+                .animate()
+                .wait(symbolTime * 5)
+                .to({ dy: 0 }, symbolTime * 4, 'linear');
+        }
+        if (titlePanelType === 'scale') {
+            [this._titleTopPanel, this._titleBottomPanel].forEach(panel => {
+                const scaleX = panel.attribute.scaleX;
+                panel.setAttributes({ scaleX: 0 });
+                panel.animate().to({ scaleX }, duration, 'circInOut');
+            });
+        }
+        else if (titlePanelType === 'stroke') {
+            [this._titleTopPanel, this._titleBottomPanel].forEach(panel => {
+                const b = panel.AABBBounds;
+                const totalLen = (b.width() + b.height()) * 2;
+                panel.setAttributes({ lineDash: [0, totalLen * 10] });
+                panel.animate().to({ lineDash: [totalLen, totalLen * 10] }, duration, 'quadOut');
+            });
+        }
+    }
+    disappearAnimate(animateConfig) {
+        if (animateConfig.mode === 'scale') {
+            const { duration = 1000, easing = 'quadOut' } = animateConfig;
+            this.animate().to({ scaleX: 0, scaleY: 0 }, duration, easing);
+        }
+        else {
+            const { duration = 1000, easing = 'quadOut' } = animateConfig;
+            this._line.animate().to({ clipRange: 0 }, duration, easing);
+            this._symbolStart
+                .animate()
+                .wait(duration / 2)
+                .to({ scaleX: 0, scaleY: 0 }, duration / 2, easing);
+            this._symbolEnd.animate().to({ scaleX: 0, scaleY: 0 }, duration, easing);
+            this._titleTop.animate().to({ dy: this._titleTop.AABBBounds.height() + 10 }, duration / 2, easing);
+            this._titleBottom
+                .animate()
+                .to({ dy: -(10 + this._titleBottom.AABBBounds.height()) }, duration / 2, easing);
+            this._symbolStartOuter
+                .animate()
+                .wait(duration / 2)
+                .to({ clipRange: 0 }, duration / 2, easing);
+            this._titleTopPanel.animate().to({ scaleX: 0 }, duration, 'circInOut');
+            this._titleBottomPanel.animate().to({ scaleX: 0 }, duration, 'circInOut');
+        }
+    }
+}
+StoryLabelItem.defaultAttributes = {
+    contentOffsetX: 100,
+    contentOffsetY: -60,
+    titleTopStyle: {
+        fontSize: 12,
+        fill: 'white'
+    },
+    titleBottomStyle: {
+        fontSize: 12,
+        fill: 'white'
+    },
+    lineStyle: {
+        stroke: 'white',
+        lineWidth: 1
+    },
+    symbolStartStyle: {
+        symbolType: 'circle',
+        size: 3,
+        fill: 'white'
+    },
+    symbolEndStyle: {
+        symbolType: 'circle',
+        size: 3,
+        fill: 'white'
+    },
+    symbolStartOuterStyle: {
+        symbolType: 'M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0',
+        size: 8,
+        stroke: 'white'
+    },
+    titleSpace: [2, 2],
+    titleTopPanelStyle: {
+        visible: false,
+        padding: { left: 0, right: 0, bottom: 2, top: 2 },
+        cornerRadius: 3
+    },
+    titleBottomPanelStyle: {
+        visible: false,
+        padding: { left: 0, right: 0, bottom: 2, top: 2 },
+        cornerRadius: 3
+    },
+    theme: 'default'
+};
+
+const version = "0.21.2-vstory.3";
 
-export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };
+export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, StoryLabelItem, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };