@visactor/vstory 0.0.16 → 0.0.18

package/dist/index.js

@@ -7274,7 +7274,8 @@
     justifyContent: "flex-start",
     alignItems: "flex-start",
     alignContent: "flex-start",
-    baseOpacity: 1
+    baseOpacity: 1,
+    cornerType: "round"
   });
   var DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
     path: "",
@@ -7311,7 +7312,8 @@
     x1: 0,
     y1: 0,
     strokeBoundsBuffer: 0,
-    cornerRadius: 0
+    cornerRadius: 0,
+    cornerType: "round"
   });
   Object.assign(Object.assign({}, DefaultAttribute), {
     width: 0,
@@ -7319,7 +7321,8 @@
     x1: 0,
     y1: 0,
     cornerRadius: 0,
-    length: 0
+    length: 0,
+    cornerType: "round"
   });
   var DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
     symbolType: "circle",
@@ -7355,7 +7358,8 @@
     height: 0
   }, DefaultAttribute), {
     fill: !0,
-    cornerRadius: 0
+    cornerRadius: 0,
+    cornerType: "round"
   });
   var DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImageAttribute), {
     backgroundShowMode: "never",
@@ -10699,6 +10703,13 @@
       }
     }]);
   }();
+  function flicker$1(t, n) {
+    var step = 1 / n;
+    var flag = 1;
+    for (; t > step;) t -= step, flag *= -1;
+    var 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 = function (t) {
     return (t /= .5) < 1 ? .5 * Math.pow(t, 2) : -.5 * ((t -= 2) * t - 2);
   }, Easing.easeOutElastic = function (x) {
@@ -10708,6 +10719,22 @@
     var 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;
   };
+  var _loop = function _loop(i) {
+    Easing["flicker".concat(i)] = function (t) {
+      return flicker$1(t, i);
+    };
+  };
+  for (var i$1 = 0; i$1 < 10; i$1++) {
+    _loop(i$1);
+  }
+  var _loop2 = function _loop2(_i) {
+    Easing["aIn".concat(_i)] = function (t) {
+      return _i * t * t + (1 - _i) * t;
+    };
+  };
+  for (var _i = 2; _i < 10; _i++) {
+    _loop2(_i);
+  }
 
   var DefaultTimeline = /*#__PURE__*/function () {
     function DefaultTimeline() {
@@ -11465,6 +11492,54 @@
   !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$1 || (Direction$1 = {}));
+  var InputText = /*#__PURE__*/function (_ACustomAnimate3) {
+    function InputText() {
+      var _this2;
+      _classCallCheck(this, InputText);
+      _this2 = _callSuper(this, InputText, arguments), _this2.fromText = "", _this2.toText = "";
+      return _this2;
+    }
+    _inherits(InputText, _ACustomAnimate3);
+    return _createClass(InputText, [{
+      key: "getEndProps",
+      value: function getEndProps() {
+        return !1 === this.valid ? {} : {
+          text: this.to
+        };
+      }
+    }, {
+      key: "onBind",
+      value: function 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$3(this.toText) && 0 === this.toText.length) && (this.valid = !1), isArray$3(this.toText) && (this.toText = this.toText.map(function (item) {
+          return (item || "").toString();
+        }));
+      }
+    }, {
+      key: "onEnd",
+      value: function onEnd() {
+        this.target.detachShadow();
+      }
+    }, {
+      key: "onUpdate",
+      value: function onUpdate(end, ratio, out) {
+        if (!1 === this.valid) return;
+        var fromCount = this.fromText.length,
+          toTextIsArray = isArray$3(this.toText),
+          toCount = toTextIsArray ? this.toText.reduce(function (c, t) {
+            return c + (t || "").length;
+          }, 0) : this.toText.length,
+          count = Math.ceil(fromCount + (toCount - fromCount) * ratio);
+        if (toTextIsArray) {
+          out.text = [];
+          var len = 0;
+          this.toText.forEach(function (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);
+      }
+    }]);
+  }(ACustomAnimate);
   var TagPointsUpdate = /*#__PURE__*/function (_ACustomAnimate7) {
     function TagPointsUpdate(from, to, duration, easing, params) {
       var _this6;
@@ -12923,6 +12998,20 @@
             });
           return _color2 && (nextAttributes[key] = _color2), !0;
         }
+        if (Array.isArray(nextStepVal) && nextStepVal.length === lastStepVal.length) {
+          var nextList = [];
+          var valid = !0;
+          for (var i = 0; i < nextStepVal.length; i++) {
+            var 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;
       }
     }, {
@@ -19358,7 +19447,7 @@
   var defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
 
   var halfPi$1 = pi$1 / 2;
-  function createRectPath(path, x, y, width, height, rectCornerRadius, edgeCb) {
+  function createRectPath(path, x, y, width, height, rectCornerRadius, roundCorner, edgeCb) {
     var cornerRadius;
     if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$3(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs$1(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
       var cornerRadiusArr = rectCornerRadius;
@@ -19393,27 +19482,29 @@
       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]);
-      var centerX = rightTopPoint1[0],
-        centerY = rightTopPoint1[1] + _cornerRadius[1];
-      path.arc(centerX, centerY, _cornerRadius[1], -halfPi$1, 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)) {
-      var _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, !1);
-    }
-    if (edgeCb && edgeCb[2] ? edgeCb[2](rightBottomPoint1[0], rightBottomPoint1[1], leftBottomPoint1[0], leftBottomPoint1[1]) : path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]), !arrayEqual(leftBottomPoint1, leftBottomPoint2)) {
-      var _centerX2 = leftBottomPoint1[0],
-        _centerY2 = leftBottomPoint1[1] - _cornerRadius[3];
-      edgeCb && edgeCb[2] && path.moveTo(leftBottomPoint1[0], leftBottomPoint1[1]), path.arc(_centerX2, _centerY2, _cornerRadius[3], halfPi$1, pi$1, !1);
-    }
-    if (edgeCb && edgeCb[3] ? edgeCb[3](leftBottomPoint2[0], leftBottomPoint2[1], leftTopPoint2[0], leftTopPoint2[1]) : path.lineTo(leftTopPoint2[0], leftTopPoint2[1]), !arrayEqual(leftTopPoint1, leftTopPoint2)) {
-      var _centerX3 = leftTopPoint1[0],
-        _centerY3 = leftTopPoint1[1] + _cornerRadius[0];
-      edgeCb && edgeCb[3] && path.moveTo(leftTopPoint2[0], leftTopPoint2[1]), path.arc(_centerX3, _centerY3, _cornerRadius[0], pi$1, pi$1 + halfPi$1, !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]);
+        var centerX = rightTopPoint1[0],
+          centerY = rightTopPoint1[1] + _cornerRadius[1];
+        path.arc(centerX, centerY, _cornerRadius[1], -halfPi$1, 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)) {
+        var _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, !1);
+      }
+      if (edgeCb && edgeCb[2] ? edgeCb[2](rightBottomPoint1[0], rightBottomPoint1[1], leftBottomPoint1[0], leftBottomPoint1[1]) : path.lineTo(leftBottomPoint1[0], leftBottomPoint1[1]), !arrayEqual(leftBottomPoint1, leftBottomPoint2)) {
+        var _centerX2 = leftBottomPoint1[0],
+          _centerY2 = leftBottomPoint1[1] - _cornerRadius[3];
+        edgeCb && edgeCb[2] && path.moveTo(leftBottomPoint1[0], leftBottomPoint1[1]), path.arc(_centerX2, _centerY2, _cornerRadius[3], halfPi$1, pi$1, !1);
+      }
+      if (edgeCb && edgeCb[3] ? edgeCb[3](leftBottomPoint2[0], leftBottomPoint2[1], leftTopPoint2[0], leftTopPoint2[1]) : path.lineTo(leftTopPoint2[0], leftTopPoint2[1]), !arrayEqual(leftTopPoint1, leftTopPoint2)) {
+        var _centerX3 = leftTopPoint1[0],
+          _centerY3 = leftTopPoint1[1] + _cornerRadius[0];
+        edgeCb && edgeCb[3] && path.moveTo(leftTopPoint2[0], leftTopPoint2[1]), path.arc(_centerX3, _centerY3, _cornerRadius[0], pi$1, pi$1 + halfPi$1, !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;
   }
 
@@ -19441,6 +19532,8 @@
         var _rect$attribute2 = rect.attribute,
           _rect$attribute2$corn = _rect$attribute2.cornerRadius,
           cornerRadius = _rect$attribute2$corn === void 0 ? rectAttribute.cornerRadius : _rect$attribute2$corn,
+          _rect$attribute2$corn2 = _rect$attribute2.cornerType,
+          cornerType = _rect$attribute2$corn2 === void 0 ? rectAttribute.cornerType : _rect$attribute2$corn2,
           _rect$attribute2$opac = _rect$attribute2.opacity,
           opacity = _rect$attribute2$opac === void 0 ? rectAttribute.opacity : _rect$attribute2$opac,
           _rect$attribute2$x = _rect$attribute2.x,
@@ -19470,7 +19563,7 @@
             dw = 2 * d;
           if (0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(function (num) {
             return 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) {
+          }) ? (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) {
             var 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();
           }
@@ -19514,7 +19607,9 @@
           _rect$attribute4$stro = _rect$attribute4.stroke,
           stroke = _rect$attribute4$stro === void 0 ? groupAttribute.stroke : _rect$attribute4$stro,
           _rect$attribute4$corn = _rect$attribute4.cornerRadius,
-          cornerRadius = _rect$attribute4$corn === void 0 ? groupAttribute.cornerRadius : _rect$attribute4$corn;
+          cornerRadius = _rect$attribute4$corn === void 0 ? groupAttribute.cornerRadius : _rect$attribute4$corn,
+          _rect$attribute4$corn2 = _rect$attribute4.cornerType,
+          cornerType = _rect$attribute4$corn2 === void 0 ? groupAttribute.cornerType : _rect$attribute4$corn2;
         var _rect$attribute5 = rect.attribute,
           width = _rect$attribute5.width,
           height = _rect$attribute5.height;
@@ -19526,7 +19621,7 @@
           }))) {
             var lastStroke,
               lastStrokeI = 0;
-            return createRectPath(context, x, y, width, height, cornerRadius, new Array(4).fill(0).map(function (_, i) {
+            return createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType, new Array(4).fill(0).map(function (_, i) {
               return function (x1, y1, x2, y2) {
                 stroke[i] && (lastStrokeI === i - 1 && stroke[i] === lastStroke || (context.setStrokeStyle(rect, Object.assign(Object.assign({}, rect.attribute), {
                   stroke: stroke[i]
@@ -19597,7 +19692,7 @@
             _y = _getActualPosition.y,
             width = _getActualPosition.width,
             height = _getActualPosition.height;
-          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();
           var _b = graphic.AABBBounds;
@@ -20831,6 +20926,8 @@
           stroke = _rect$attribute$strok === void 0 ? rectAttribute.stroke : _rect$attribute$strok,
           _rect$attribute$corne = _rect$attribute.cornerRadius,
           cornerRadius = _rect$attribute$corne === void 0 ? rectAttribute.cornerRadius : _rect$attribute$corne,
+          _rect$attribute$corne2 = _rect$attribute.cornerType,
+          cornerType = _rect$attribute$corne2 === void 0 ? rectAttribute.cornerType : _rect$attribute$corne2,
           _rect$attribute$opaci = _rect$attribute.opacity,
           opacity = _rect$attribute$opaci === void 0 ? rectAttribute.opacity : _rect$attribute$opaci,
           _rect$attribute$fillO = _rect$attribute.fillOpacity,
@@ -20862,7 +20959,7 @@
         if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
         0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(function (num) {
           return 0 === num;
-        }) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius));
+        }) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius, "round" === cornerType));
         var doFillOrStroke = {
           doFill: doFill,
           doStroke: doStroke
@@ -21070,7 +21167,7 @@
           context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else {
           var backgroundCornerRadius = graphic.attribute.backgroundCornerRadius;
-          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();
       }
@@ -21421,6 +21518,8 @@
           visible = _group$attribute$visi === void 0 ? groupAttribute.visible : _group$attribute$visi,
           _group$attribute$fill3 = _group$attribute.fillStrokeOrder,
           fillStrokeOrder = _group$attribute$fill3 === void 0 ? groupAttribute.fillStrokeOrder : _group$attribute$fill3,
+          _group$attribute$corn2 = _group$attribute.cornerType,
+          cornerType = _group$attribute$corn2 === void 0 ? groupAttribute.cornerType : _group$attribute$corn2,
           _group$attribute$x = _group$attribute.x,
           originX = _group$attribute$x === void 0 ? groupAttribute.x : _group$attribute$x,
           _group$attribute$y = _group$attribute.y,
@@ -21443,7 +21542,7 @@
           }), context.disableFill = disableFill, context.disableStroke = disableStroke, context.disableBeginPath = disableBeginPath;
         } else 0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(function (num) {
           return 0 === num;
-        }) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius));
+        }) ? (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));
         var doFillOrStroke = {
           doFill: doFill,
@@ -21545,6 +21644,8 @@
           cornerRadius = _image$attribute$corn === void 0 ? imageAttribute.cornerRadius : _image$attribute$corn,
           _image$attribute$fill = _image$attribute.fillStrokeOrder,
           fillStrokeOrder = _image$attribute$fill === void 0 ? imageAttribute.fillStrokeOrder : _image$attribute$fill,
+          _image$attribute$corn2 = _image$attribute.cornerType,
+          cornerType = _image$attribute$corn2 === void 0 ? imageAttribute.cornerType : _image$attribute$corn2,
           url = _image$attribute.image,
           data = this.valid(image, imageAttribute, fillCb);
         if (!data) return;
@@ -21561,7 +21662,7 @@
               var needRestore = !1;
               0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(function (num) {
                 return 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);
+              }) || (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);
               var repeat = 0;
               if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
                 var pattern = context.createPattern(res.data, repeatStr[repeat]);
@@ -24783,7 +24884,7 @@
         if (margin && (x += icon._marginArray[3], y += icon._marginArray[0]), icon._hovered) {
           var 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());
         }
         var 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));
@@ -26793,13 +26894,15 @@
             lineJoin = _attribute$lineJoin === void 0 ? defaultParams.lineJoin : _attribute$lineJoin,
             _attribute$lineDash = attribute.lineDash,
             lineDash = _attribute$lineDash === void 0 ? defaultParams.lineDash : _attribute$lineDash,
+            _attribute$lineDashOf = attribute.lineDashOffset,
+            lineDashOffset = _attribute$lineDashOf === void 0 ? defaultParams.lineDashOffset : _attribute$lineDashOf,
             _attribute$lineCap = attribute.lineCap,
             lineCap = _attribute$lineCap === void 0 ? defaultParams.lineCap : _attribute$lineCap,
             _attribute$miterLimit = attribute.miterLimit,
             miterLimit = _attribute$miterLimit === void 0 ? defaultParams.miterLimit : _attribute$miterLimit,
             _attribute$keepStroke = attribute.keepStrokeScale,
             keepStrokeScale = _attribute$keepStroke === void 0 ? defaultParams.keepStrokeScale : _attribute$keepStroke;
-          _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && (_context.setLineDash(lineDash), _context.lineDashOffset = lineDashOffset), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
     }, {
@@ -36894,6 +36997,20 @@
   };
   var _tBounds = new AABBBounds();
   loadPoptipComponent();
+  var tlStr = "M -0.5 -0.5, L -0.5 0.5, L 0.5 -0.5, Z",
+    blStr = "M -0.5 -0.5, L -0.5 0.5, L 0.5 0.5, Z",
+    trStr = "M -0.5 -0.5, L 0.5 -0.5, L 0.5 0.5, Z",
+    brStr = "M 0.5 -0.5, L 0.5 0.5, L -0.5 0.5, Z",
+    conciseSymbolMap = {
+      tl: tlStr,
+      tr: trStr,
+      bl: blStr,
+      br: brStr,
+      lt: tlStr,
+      lb: blStr,
+      rt: trStr,
+      rb: brStr
+    };
   var PopTip = /*#__PURE__*/function (_AbstractComponent) {
     function PopTip(attributes, options) {
       var _this;
@@ -36905,15 +37022,20 @@
     return _createClass(PopTip, [{
       key: "render",
       value: function render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var _this$attribute = this.attribute,
           _this$attribute$title = _this$attribute.titleStyle,
           titleStyle = _this$attribute$title === void 0 ? {} : _this$attribute$title,
           position = _this$attribute.position,
           _this$attribute$conte = _this$attribute.contentStyle,
           contentStyle = _this$attribute$conte === void 0 ? {} : _this$attribute$conte,
-          _this$attribute$panel = _this$attribute.panel,
-          panel = _this$attribute$panel === void 0 ? {} : _this$attribute$panel,
+          panel = _this$attribute.panel,
+          logoSymbol = _this$attribute.logoSymbol,
+          logoText = _this$attribute.logoText,
+          _this$attribute$logoT = _this$attribute.logoTextStyle,
+          logoTextStyle = _this$attribute$logoT === void 0 ? {} : _this$attribute$logoT,
+          _this$attribute$trian = _this$attribute.triangleMode,
+          triangleMode = _this$attribute$trian === void 0 ? "default" : _this$attribute$trian,
           _this$attribute$space = _this$attribute.space,
           space = _this$attribute$space === void 0 ? 4 : _this$attribute$space,
           _this$attribute$minWi = _this$attribute.minWidth,
@@ -36940,8 +37062,9 @@
             x: 0,
             y: 0,
             zIndex: 1
-          }, "group"),
-          maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3],
+          }, "group");
+        this.group = group;
+        var maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3],
           titleVisible = isValid$3(title) && !1 !== visible,
           titleAttrs = Object.assign(Object.assign({
             text: isArray$3(title) ? title : [title],
@@ -36978,13 +37101,24 @@
         var contentBounds = contentShape.AABBBounds,
           contentHeight = contentBounds.height(),
           contentWidth = contentBounds.width();
-        contentVisible && (height += contentHeight);
+        contentVisible && (height += contentHeight), this.titleShape = titleShape, this.contentShape = contentShape;
         var popTipWidth = max$1(titleWidth + parsedPadding[1] + parsedPadding[3], contentWidth + parsedPadding[1] + parsedPadding[3]);
         popTipWidth > maxWidth ? popTipWidth = maxWidth : popTipWidth < minWidth && (popTipWidth = minWidth);
         var poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
         var bgVisible = panel.visible,
-          backgroundStyle = __rest$v(panel, ["visible"]),
-          symbolSize = null !== (_a = backgroundStyle.size) && void 0 !== _a ? _a : 12,
+          square = panel.square,
+          backgroundStyle = __rest$v(panel, ["visible", "square"]);
+        if (square) {
+          var maxWH = max$1(popTipWidth, poptipHeight);
+          popTipWidth = maxWH;
+          var deltaH = maxWH - poptipHeight;
+          poptipHeight = maxWH, titleShape.setAttributes({
+            dy: deltaH / 2
+          }), contentShape.setAttributes({
+            dy: deltaH / 2
+          });
+        }
+        var symbolSize = null !== (_a = backgroundStyle.size) && void 0 !== _a ? _a : 12,
           spaceSize = isArray$3(symbolSize) ? [symbolSize[0] + (null !== (_b = backgroundStyle.space) && void 0 !== _b ? _b : 0), symbolSize[1] + (null !== (_c = backgroundStyle.space) && void 0 !== _c ? _c : 0)] : symbolSize + (null !== (_d = backgroundStyle.space) && void 0 !== _d ? _d : 0),
           lineWidth = null !== (_e = backgroundStyle.lineWidth) && void 0 !== _e ? _e : 1,
           range = this.stage ? [null !== (_f = this.stage.viewWidth) && void 0 !== _f ? _f : this.stage.width, null !== (_g = this.stage.viewHeight) && void 0 !== _g ? _g : this.stage.height] : void 0;
@@ -37004,42 +37138,76 @@
         var maxBBoxI,
           maxBBoxSize = -1 / 0;
         for (var i = 0; i < this.positionList.length + 1; i++) {
-          var p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position,
-            _this$getAngleAndOffs = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray$3(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth]),
+          var p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
+          var symbolType = "arrow2Left",
+            offsetX = (isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 4,
+            offsetY = 0;
+          "top" === p || "bottom" === p || "left" === p || "right" === p ? symbolType = "arrow2Left" : "concise" === triangleMode && (symbolType = conciseSymbolMap[p], offsetX = ["tl", "bl", "rt", "rb"].includes(position) ? (isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 2 : -(isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 2, offsetY = ["tl", "tr", "lb", "rb"].includes(position) ? -(isArray$3(symbolSize) ? symbolSize[1] : symbolSize) / 2 : (isArray$3(symbolSize) ? symbolSize[1] : symbolSize) / 2);
+          var _this$getAngleAndOffs = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray$3(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth], symbolType),
             angle = _this$getAngleAndOffs.angle,
             offset = _this$getAngleAndOffs.offset;
-            _this$getAngleAndOffs.rectOffset;
           if (isBoolean$3(bgVisible)) {
-            var offsetX = (isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 4,
-              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");
-            isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel);
-            var bgRect = group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
+            var 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: symbolType,
+              angle: angle,
+              dx: offset[0],
+              dy: offset[1] - (null !== (_j = backgroundStyle.space) && void 0 !== _j ? _j : 0),
+              size: symbolSize,
+              zIndex: 9
+            }), "symbol");
+            var bgRect = void 0;
+            isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel), bgRect = panel.panelSymbolType ? 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") : 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");
-            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+            }), "rect"), isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
           }
           if (group.setAttributes({
             x: -offset[0] + dx,
-            y: -offset[1] + dy
-          }), !layout || !range) break;
+            y: -offset[1] + dy,
+            anchor: [offsetX, offsetY]
+          }), logoSymbol) {
+            var _logoSymbol$size = logoSymbol.size,
+              size = _logoSymbol$size === void 0 ? 12 : _logoSymbol$size,
+              sizeArray = isArray$3(size) ? size : [size, size];
+            "auto" === sizeArray[1] && (sizeArray[1] = poptipHeight), "auto" === sizeArray[0] && (sizeArray[0] = poptipHeight);
+            var 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
+            }), 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) break;
           {
             _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
             var _b2 = _tBounds,
@@ -37047,91 +37215,125 @@
             if (rectInsideAnotherRect(_b2, stageBounds, !1)) break;
             {
               var bbox = getRectIntersect(_b2, stageBounds, !1),
-                size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
-              size > maxBBoxSize && (maxBBoxSize = size, maxBBoxI = i);
+                _size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+              _size > maxBBoxSize && (maxBBoxSize = _size, maxBBoxI = i);
             }
           }
         }
       }
     }, {
       key: "getAngleAndOffset",
-      value: function getAngleAndOffset(position, width, height, size) {
-        var sizeH = size[1] / 2;
+      value: function getAngleAndOffset(position, width, height, size, symbolType) {
+        var sizeH = "arrow2Left" === symbolType ? size[1] / 2 : size[1];
         switch (position) {
           case "tl":
             return {
-              angle: pi$1 / 2 * 3,
-              offset: [width / 4, height + sizeH],
-              rectOffset: [-width / 4, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 / 2 * 3 : 0,
+              offset: "arrow2Left" === symbolType ? [width / 4, height + sizeH] : [0, height + sizeH]
             };
           case "top":
             return {
               angle: pi$1 / 2 * 3,
-              offset: [width / 2, height + sizeH],
-              rectOffset: [0, -height - size[1]]
+              offset: [width / 2, height + sizeH]
             };
           case "tr":
             return {
-              angle: pi$1 / 2 * 3,
-              offset: [width / 4 * 3, height + sizeH],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 / 2 * 3 : 0,
+              offset: "arrow2Left" === symbolType ? [width / 4 * 3, height + sizeH] : [width, height + sizeH]
             };
           case "rt":
             return {
               angle: 0,
-              offset: [-sizeH, height / 5],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              offset: "arrow2Left" === symbolType ? [-sizeH, height / 5] : [-sizeH, 0]
             };
           case "right":
             return {
               angle: 0,
-              offset: [-sizeH, height / 2],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              offset: [-sizeH, height / 2]
             };
           case "rb":
             return {
               angle: 0,
-              offset: [-sizeH, height / 5 * 4],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              offset: "arrow2Left" === symbolType ? [-sizeH, height / 5 * 4] : [-sizeH, height]
             };
           case "bl":
             return {
-              angle: pi$1 / 2,
-              offset: [width / 4, -sizeH],
-              rectOffset: [-width / 4, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 / 2 : 0,
+              offset: "arrow2Left" === symbolType ? [width / 4, -sizeH] : [0, -sizeH]
             };
           case "bottom":
             return {
               angle: pi$1 / 2,
-              offset: [width / 2, -sizeH],
-              rectOffset: [0, -height - size[1]]
+              offset: [width / 2, -sizeH]
             };
           case "br":
             return {
-              angle: pi$1 / 2,
-              offset: [width / 4 * 3, -sizeH],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 / 2 : 0,
+              offset: "arrow2Left" === symbolType ? [width / 4 * 3, -sizeH] : [width, -sizeH]
             };
           case "lt":
             return {
-              angle: pi$1,
-              offset: [width + sizeH, height / 5],
-              rectOffset: [-width / 4, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 : 0,
+              offset: "arrow2Left" === symbolType ? [width + sizeH, height / 5] : [width + sizeH, 0]
             };
           case "left":
             return {
               angle: pi$1,
-              offset: [width + sizeH, height / 2],
-              rectOffset: [0, -height - size[1]]
+              offset: [width + sizeH, height / 2]
             };
           case "lb":
             return {
-              angle: pi$1,
-              offset: [width + sizeH, height / 5 * 4],
-              rectOffset: [width / 4 * 3, -height - size[1]]
+              angle: "arrow2Left" === symbolType ? pi$1 : 0,
+              offset: "arrow2Left" === symbolType ? [width + sizeH, height / 5 * 4] : [width + sizeH, height]
             };
         }
       }
+    }, {
+      key: "appearAnimate",
+      value: function appearAnimate(animateConfig) {
+        var _animateConfig$durati = animateConfig.duration,
+          duration = _animateConfig$durati === void 0 ? 1e3 : _animateConfig$durati,
+          _animateConfig$easing = animateConfig.easing,
+          easing = _animateConfig$easing === void 0 ? "quadOut" : _animateConfig$easing;
+        if (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)), animateConfig.wave) {
+          var dur = duration / 6;
+          this.group.animate().to({
+            angle: animateConfig.wave
+          }, dur, easing).to({
+            angle: -animateConfig.wave
+          }, 2 * dur, easing).to({
+            angle: animateConfig.wave
+          }, 2 * dur, easing).to({
+            angle: 0
+          }, dur, easing);
+        }
+      }
+    }, {
+      key: "disappearAnimate",
+      value: function disappearAnimate(animateConfig) {
+        var _animateConfig$durati2 = animateConfig.duration,
+          duration = _animateConfig$durati2 === void 0 ? 1e3 : _animateConfig$durati2,
+          _animateConfig$easing2 = animateConfig.easing,
+          easing = _animateConfig$easing2 === void 0 ? "quadOut" : _animateConfig$easing2;
+        this.animate().to({
+          scaleX: 0,
+          scaleY: 0
+        }, duration, easing);
+      }
     }]);
   }(AbstractComponent);
   PopTip.defaultAttributes = {
@@ -37151,6 +37353,7 @@
       textAlign: "left",
       textBaseline: "top"
     },
+    panel: {},
     maxWidthPercent: .8,
     space: 8,
     padding: 10
@@ -50925,6 +51128,312 @@
     clipRange: 0
   };
 
+  var StoryLabelItem = /*#__PURE__*/function (_AbstractComponent) {
+    function StoryLabelItem(attributes, options) {
+      _classCallCheck(this, StoryLabelItem);
+      return _callSuper(this, StoryLabelItem, [(null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, StoryLabelItem.defaultAttributes, attributes)]);
+    }
+    _inherits(StoryLabelItem, _AbstractComponent);
+    return _createClass(StoryLabelItem, [{
+      key: "render",
+      value: function render() {
+        var _this$attribute = this.attribute,
+          contentOffsetX = _this$attribute.contentOffsetX,
+          contentOffsetY = _this$attribute.contentOffsetY,
+          lineStyle = _this$attribute.lineStyle,
+          symbolStartStyle = _this$attribute.symbolStartStyle,
+          symbolEndStyle = _this$attribute.symbolEndStyle,
+          symbolStartOuterStyle = _this$attribute.symbolStartOuterStyle,
+          titleTopText = _this$attribute.titleTop,
+          titleBottomText = _this$attribute.titleBottom,
+          titleTopStyle = _this$attribute.titleTopStyle,
+          titleBottomStyle = _this$attribute.titleBottomStyle,
+          titleSpace = _this$attribute.titleSpace,
+          titleTopPanelStyle = _this$attribute.titleTopPanelStyle,
+          titleBottomPanelStyle = _this$attribute.titleBottomPanelStyle,
+          theme = _this$attribute.theme,
+          group = this.createOrUpdateChild("label-item-container", {
+            x: 0,
+            y: 0,
+            zIndex: 1
+          }, "group"),
+          symbolStart = group.createOrUpdateChild("label-item-symbol-start", Object.assign({
+            x: 0,
+            y: 0
+          }, symbolStartStyle), "symbol"),
+          symbolEnd = group.createOrUpdateChild("label-item-symbol-end", Object.assign({
+            x: contentOffsetX,
+            y: contentOffsetY
+          }, symbolEndStyle), "symbol"),
+          symbolStartOut = group.createOrUpdateChild("label-item-symbol-start-out", Object.assign({
+            x: 0,
+            y: 0
+          }, symbolStartOuterStyle), "symbol"),
+          spaceW = titleSpace[0],
+          spaceH = titleSpace[1],
+          titleTopGroup = group.createOrUpdateChild("label-item-title-top-group", {
+            x: contentOffsetX,
+            y: contentOffsetY,
+            clip: !0
+          }, "group"),
+          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"),
+          titleTopBounds = titleTop.AABBBounds;
+        contentOffsetX > 0 && titleTopGroup.setAttributes({
+          x: contentOffsetX - titleTopBounds.width() - 2 * spaceW
+        }), titleTopGroup.setAttributes({
+          width: titleTopBounds.width() + 2 * spaceW,
+          height: -titleTopBounds.height() - 2 * spaceH
+        });
+        var 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;
+        var titleBottomGroup = group.createOrUpdateChild("label-item-title-bottom-group", {
+            x: contentOffsetX,
+            y: contentOffsetY,
+            clip: !0
+          }, "group"),
+          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"),
+          titleBottomBounds = titleBottom.AABBBounds;
+        contentOffsetX > 0 && titleBottomGroup.setAttributes({
+          x: contentOffsetX - titleBottomBounds.width() - 2 * spaceW
+        }), titleBottomGroup.setAttributes({
+          width: titleBottomBounds.width() + 2 * spaceW,
+          height: titleTopBounds.height() + 2 * spaceH
+        });
+        var 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;
+        var maxTextWidth = Math.max(titleTop.AABBBounds.width(), titleBottom.AABBBounds.width()) + 2 * spaceW,
+          points = [{
+            x: 0,
+            y: 0
+          }, contentOffsetX > 0 ? {
+            x: contentOffsetX - maxTextWidth,
+            y: contentOffsetY
+          } : {
+            x: contentOffsetX + maxTextWidth,
+            y: contentOffsetY
+          }, {
+            x: contentOffsetX,
+            y: contentOffsetY
+          }];
+        if ("simple" === theme) {
+          points.pop();
+          var p = points[1];
+          symbolEnd.setAttributes(p);
+        }
+        var line = group.createOrUpdateChild("label-item-line", Object.assign(Object.assign({
+          x: 0,
+          y: 0
+        }, lineStyle), {
+          points: points
+        }), "line");
+        this._symbolEnd = symbolEnd, this._symbolStart = symbolStart, this._symbolStartOuter = symbolStartOut, this._titleTop = titleTop, this._titleBottom = titleBottom, this._line = line;
+      }
+    }, {
+      key: "appearAnimate",
+      value: function appearAnimate(animateConfig) {
+        var _animateConfig$durati = animateConfig.duration,
+          duration = _animateConfig$durati === void 0 ? 1e3 : _animateConfig$durati,
+          _animateConfig$easing = animateConfig.easing,
+          easing = _animateConfig$easing === void 0 ? "quadOut" : _animateConfig$easing,
+          _animateConfig$symbol = animateConfig.symbolStartOuterType,
+          symbolStartOuterType = _animateConfig$symbol === void 0 ? "scale" : _animateConfig$symbol,
+          _animateConfig$titleT = animateConfig.titleType,
+          titleType = _animateConfig$titleT === void 0 ? "typewriter" : _animateConfig$titleT,
+          _animateConfig$titleP = animateConfig.titlePanelType,
+          titlePanelType = _animateConfig$titleP === void 0 ? "scale" : _animateConfig$titleP,
+          symbolTime = duration / 10;
+        var symbolStartOuterFrom, symbolStartOuterTo;
+        if (this._symbolStart.setAttributes({
+          scaleX: 0,
+          scaleY: 0
+        }), this._symbolStart.animate().to({
+          scaleX: 1,
+          scaleY: 1
+        }, 5 * symbolTime, easing), "scale" === symbolStartOuterType ? (symbolStartOuterFrom = {
+          scaleX: 0,
+          scaleY: 0
+        }, symbolStartOuterTo = {
+          scaleX: 1,
+          scaleY: 1
+        }) : (symbolStartOuterFrom = {
+          clipRange: 0
+        }, symbolStartOuterTo = {
+          clipRange: 1
+        }), this._symbolStartOuter.setAttributes(symbolStartOuterFrom), this._symbolStartOuter.animate().to(symbolStartOuterTo, 5 * symbolTime, easing), this._symbolEnd.setAttributes({
+          scaleX: 0,
+          scaleY: 0
+        }), this._symbolEnd.animate().wait(8 * symbolTime).to({
+          scaleX: 1,
+          scaleY: 1
+        }, 2 * symbolTime, easing), this._line.setAttributes({
+          clipRange: 0
+        }), this._line.animate().to({
+          clipRange: 1
+        }, 9 * symbolTime, easing), "typewriter" === titleType) {
+          var titleTopText = this._titleTop.attribute.text;
+          this._titleTop.setAttributes({
+            text: ""
+          }), this._titleTop.animate().wait(5 * symbolTime).play(new InputText({
+            text: ""
+          }, {
+            text: titleTopText
+          }, 4 * symbolTime, "linear"));
+          var titleBottomText = this._titleBottom.attribute.text;
+          this._titleBottom.setAttributes({
+            text: ""
+          }), this._titleBottom.animate().wait(5 * symbolTime).play(new InputText({
+            text: ""
+          }, {
+            text: titleBottomText
+          }, 4 * symbolTime, "linear"));
+        } else this._titleTop.setAttributes({
+          dy: this._titleTop.AABBBounds.height() + 10
+        }), this._titleTop.animate().wait(5 * symbolTime).to({
+          dy: 0
+        }, 4 * symbolTime, "linear"), this._titleBottom.setAttributes({
+          dy: -(10 + this._titleBottom.AABBBounds.height())
+        }), this._titleBottom.animate().wait(5 * symbolTime).to({
+          dy: 0
+        }, 4 * symbolTime, "linear");
+        "scale" === titlePanelType ? [this._titleTopPanel, this._titleBottomPanel].forEach(function (panel) {
+          var scaleX = panel.attribute.scaleX;
+          panel.setAttributes({
+            scaleX: 0
+          }), panel.animate().to({
+            scaleX: scaleX
+          }, duration, "circInOut");
+        }) : "stroke" === titlePanelType && [this._titleTopPanel, this._titleBottomPanel].forEach(function (panel) {
+          var b = panel.AABBBounds,
+            totalLen = 2 * (b.width() + b.height());
+          panel.setAttributes({
+            lineDash: [0, 10 * totalLen]
+          }), panel.animate().to({
+            lineDash: [totalLen, 10 * totalLen]
+          }, duration, "quadOut");
+        });
+      }
+    }, {
+      key: "disappearAnimate",
+      value: function disappearAnimate(animateConfig) {
+        if ("scale" === animateConfig.mode) {
+          var _animateConfig$durati2 = animateConfig.duration,
+            duration = _animateConfig$durati2 === void 0 ? 1e3 : _animateConfig$durati2,
+            _animateConfig$easing2 = animateConfig.easing,
+            easing = _animateConfig$easing2 === void 0 ? "quadOut" : _animateConfig$easing2;
+          this.animate().to({
+            scaleX: 0,
+            scaleY: 0
+          }, duration, easing);
+        } else {
+          var _animateConfig$durati3 = animateConfig.duration,
+            _duration = _animateConfig$durati3 === void 0 ? 1e3 : _animateConfig$durati3,
+            _animateConfig$easing3 = animateConfig.easing,
+            _easing = _animateConfig$easing3 === void 0 ? "quadOut" : _animateConfig$easing3;
+          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");
+        }
+      }
+    }]);
+  }(AbstractComponent);
+  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: !1,
+      padding: {
+        left: 0,
+        right: 0,
+        bottom: 2,
+        top: 2
+      },
+      cornerRadius: 3
+    },
+    titleBottomPanelStyle: {
+      visible: !1,
+      padding: {
+        left: 0,
+        right: 0,
+        bottom: 2,
+        top: 2
+      },
+      cornerRadius: 3
+    },
+    theme: "default"
+  };
+
   var isClose = isNumberClose;
   function normalizeStartEndAngle(start, end) {
     var startAngle = 0,
@@ -112503,7 +113012,9 @@
           componentStyle = Object.assign({}, panelStyle);
         ["x", "y", "dx", "dy", "scaleX", "scaleY", "width", "height"].forEach(function (key) {
           key in graphicStyle && (componentStyle[key] = graphicStyle[key], delete graphicStyle[key]);
-        }), component && (component.styleAnimate ? component.styleAnimate(componentStyle, animation) : component.animate().to(componentStyle, duration, easing)), graphic && graphicStyle && (graphic.styleAnimate ? graphic.styleAnimate(graphicStyle, animation) : graphic.animate().to(graphicStyle, duration, easing)), text && textStyle && text.animate().to(textStyle, duration, easing);
+        }), component && (component.styleAnimate ? component.styleAnimate(componentStyle, animation) : component.animate().to(componentStyle, duration, easing)), graphic && graphicStyle && (graphic.styleAnimate ? graphic.styleAnimate(graphicStyle, animation) : graphic.animate().to(graphicStyle, duration, easing)), text && textStyle && (textStyle.text && text.attribute.textConfig && (textStyle.textConfig = [Object.assign(Object.assign({}, (text.attribute.textConfig || [])[0]), {
+          text: textStyle.text
+        })]), text.animate().to(textStyle, duration, easing));
       }
     }]);
   }(ActionProcessorItem);
@@ -113510,7 +114021,7 @@
     registerTextVisibilityAction();
   }
 
-  var DefaultVisibility$2 = /*#__PURE__*/function (_BaseVisibility) {
+  var DefaultVisibility$4 = /*#__PURE__*/function (_BaseVisibility) {
     function DefaultVisibility() {
       _classCallCheck(this, DefaultVisibility);
       return _callSuper(this, DefaultVisibility, arguments);
@@ -113534,7 +114045,7 @@
       }
     }]);
   }(BaseVisibility);
-  var defaultInstance$2 = new DefaultVisibility$2();
+  var defaultInstance$4 = new DefaultVisibility$4();
   var TimelineVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
     function TimelineVisibilityActionProcessor() {
       var _this;
@@ -113548,7 +114059,7 @@
       value: function getEffectInstance() {
         var effect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "default";
         var appear = arguments.length > 1 ? arguments[1] : undefined;
-        return "default" === effect ? defaultInstance$2 : _superPropGet(TimelineVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+        return "default" === effect ? defaultInstance$4 : _superPropGet(TimelineVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
       }
     }]);
   }(CommonVisibilityActionProcessor);
@@ -113613,7 +114124,7 @@
     registerTimelineVisibilityAction();
   }
 
-  var DefaultVisibility$1 = /*#__PURE__*/function (_BaseVisibility) {
+  var DefaultVisibility$3 = /*#__PURE__*/function (_BaseVisibility) {
     function DefaultVisibility() {
       _classCallCheck(this, DefaultVisibility);
       return _callSuper(this, DefaultVisibility, arguments);
@@ -113640,7 +114151,7 @@
       }
     }]);
   }(BaseVisibility);
-  var defaultInstance$1 = new DefaultVisibility$1();
+  var defaultInstance$3 = new DefaultVisibility$3();
   var UnitVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
     function UnitVisibilityActionProcessor() {
       var _this;
@@ -113654,7 +114165,7 @@
       value: function getEffectInstance() {
         var effect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "default";
         var appear = arguments.length > 1 ? arguments[1] : undefined;
-        return "default" === effect ? defaultInstance$1 : _superPropGet(UnitVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+        return "default" === effect ? defaultInstance$3 : _superPropGet(UnitVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
       }
     }]);
   }(CommonVisibilityActionProcessor);
@@ -113734,7 +114245,7 @@
     });
   }
 
-  var DEFAULT_SCENE_DURATION = 2e3;
+  var DEFAULT_SCENE_DURATION = 5e3;
   var DEFAULT_ANIMATION_DURATION = 1e3;
   var defaultConfig = {
     layout: {
@@ -116535,7 +117046,7 @@
     StoryFactory.registerCharacter(SinglePieCharacter.type, SinglePieCharacter);
   }
 
-  var DefaultVisibility = /*#__PURE__*/function (_BaseVisibility) {
+  var DefaultVisibility$2 = /*#__PURE__*/function (_BaseVisibility) {
     function DefaultVisibility() {
       _classCallCheck(this, DefaultVisibility);
       return _callSuper(this, DefaultVisibility, arguments);
@@ -116573,7 +117084,7 @@
       }
     }]);
   }(BaseVisibility);
-  var defaultInstance = new DefaultVisibility();
+  var defaultInstance$2 = new DefaultVisibility$2();
   var SinglePieVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
     function SinglePieVisibilityActionProcessor() {
       var _this;
@@ -116585,7 +117096,7 @@
     return _createClass(SinglePieVisibilityActionProcessor, [{
       key: "getEffectInstance",
       value: function getEffectInstance(effect, appear) {
-        return "angle" === effect ? defaultInstance : _superPropGet(SinglePieVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+        return "angle" === effect ? defaultInstance$2 : _superPropGet(SinglePieVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
       }
     }]);
   }(CommonVisibilityActionProcessor);
@@ -116703,6 +117214,311 @@
     registerDynamicLinePlayAction(), registerDynamicLineVisibilityAction();
   }
 
+  var PopTipComponent$1 = /*#__PURE__*/function (_BaseComponentWithTex) {
+    function PopTipComponent(attributes, options) {
+      _classCallCheck(this, PopTipComponent);
+      return _callSuper(this, PopTipComponent, [(null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, PopTipComponent.defaultAttributes, attributes)]);
+    }
+    _inherits(PopTipComponent, _BaseComponentWithTex);
+    return _createClass(PopTipComponent, [{
+      key: "render",
+      value: function render() {
+        _superPropGet(PopTipComponent, "render", this, 3)([]), this.renderPopTip();
+      }
+    }, {
+      key: "renderPopTip",
+      value: function renderPopTip() {
+        var _this$attribute = this.attribute,
+          graphic = _this$attribute.graphic,
+          padding = _this$attribute.padding,
+          width = _this$attribute.width,
+          height = _this$attribute.height,
+          attrs = Object.assign({}, graphic);
+        attrs.x || (attrs.x = padding.left), attrs.y || (attrs.y = padding.top), attrs.width || (attrs.width = width - padding.left - padding.right), attrs.height || (attrs.height = height - padding.top - padding.bottom);
+        var attribute = Object.assign(Object.assign({}, attrs), {
+          scaleX: 1,
+          scaleY: 1,
+          angle: 0,
+          postMatrix: null
+        });
+        if (this.vrComponent) this.vrComponent.setAttributes(attribute);else {
+          var poptip = new PopTip(attribute);
+          this.vrComponent = poptip, this.addChild(poptip);
+        }
+      }
+    }]);
+  }(BaseComponentWithText);
+  PopTipComponent$1.defaultAttributes = {
+    visible: !0,
+    textStyle: {},
+    width: 100,
+    height: 100,
+    padding: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    },
+    graphic: {
+      panel: {
+        visible: !0
+      }
+    }
+  };
+
+  var POPTIP = "PopTip";
+
+  var PopTipRuntime = /*#__PURE__*/function (_BaseRuntime) {
+    function PopTipRuntime() {
+      var _this;
+      _classCallCheck(this, PopTipRuntime);
+      _this = _callSuper(this, PopTipRuntime, arguments), _this.type = POPTIP;
+      return _this;
+    }
+    _inherits(PopTipRuntime, _BaseRuntime);
+    return _createClass(PopTipRuntime);
+  }(BaseRuntime);
+
+  var PopTipCharacter = /*#__PURE__*/function (_CharacterComponent) {
+    function PopTipCharacter() {
+      _classCallCheck(this, PopTipCharacter);
+      return _callSuper(this, PopTipCharacter, arguments);
+    }
+    _inherits(PopTipCharacter, _CharacterComponent);
+    return _createClass(PopTipCharacter, [{
+      key: "createAndAddGraphic",
+      value: function createAndAddGraphic(attribute) {
+        this._graphic = new PopTipComponent$1(attribute), this.canvas.addGraphic(this._graphic);
+      }
+    }, {
+      key: "_initRuntime",
+      value: function _initRuntime() {
+        var _this = this;
+        PopTipCharacter.RunTime.forEach(function (R) {
+          _this._runtime.push(new R(_this));
+        });
+      }
+    }, {
+      key: "getDefaultAttribute",
+      value: function getDefaultAttribute() {
+        return Object.assign(Object.assign({}, _superPropGet(PopTipCharacter, "getDefaultAttribute", this, 3)([])), {
+          width: 100,
+          height: 100
+        });
+      }
+    }, {
+      key: "_clearGraphic",
+      value: function _clearGraphic() {
+        _superPropGet(PopTipCharacter, "_clearGraphic", this, 3)([]);
+      }
+    }, {
+      key: "show",
+      value: function show() {
+        this._graphic.setAttribute("visibleAll", !0);
+      }
+    }, {
+      key: "hide",
+      value: function hide() {
+        this._graphic.setAttribute("visibleAll", !1);
+      }
+    }]);
+  }(CharacterComponent);
+  PopTipCharacter.type = POPTIP, PopTipCharacter.RunTime = [PopTipRuntime];
+
+  function registerPopTip() {
+    StoryFactory.registerCharacter(PopTipCharacter.type, PopTipCharacter);
+  }
+
+  var DefaultVisibility$1 = /*#__PURE__*/function (_BaseVisibility) {
+    function DefaultVisibility() {
+      _classCallCheck(this, DefaultVisibility);
+      return _callSuper(this, DefaultVisibility, arguments);
+    }
+    _inherits(DefaultVisibility, _BaseVisibility);
+    return _createClass(DefaultVisibility, [{
+      key: "_setInitAttributes",
+      value: function _setInitAttributes(graphic, params, appear) {}
+    }, {
+      key: "_run",
+      value: function _run(graphic, params, appear) {
+        return appear && graphic && graphic.appearAnimate ? graphic.appearAnimate(params) : !appear && graphic && graphic.disappearAnimate && graphic.disappearAnimate(params), !0;
+      }
+    }]);
+  }(BaseVisibility);
+  var defaultInstance$1 = new DefaultVisibility$1();
+  var PoptipVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
+    function PoptipVisibilityActionProcessor() {
+      var _this;
+      _classCallCheck(this, PoptipVisibilityActionProcessor);
+      _this = _callSuper(this, PoptipVisibilityActionProcessor), _this.name = "appearOrDisAppear";
+      return _this;
+    }
+    _inherits(PoptipVisibilityActionProcessor, _CommonVisibilityActi);
+    return _createClass(PoptipVisibilityActionProcessor, [{
+      key: "getEffectInstance",
+      value: function getEffectInstance(effect, appear) {
+        return "default" === effect ? defaultInstance$1 : _superPropGet(PoptipVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+      }
+    }]);
+  }(CommonVisibilityActionProcessor);
+  function registerPopTipVisibilityAction() {
+    globalProcessorRegistry.registerProcessor(POPTIP, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ACTION_TYPE.APPEAR, new PoptipVisibilityActionProcessor()), ACTION_TYPE.DISAPPEAR, new PoptipVisibilityActionProcessor()), ACTION_TYPE.STYLE, new CommonStyleActionProcessor()), ACTION_TYPE.MOVETO, new CommonMoveToActionProcessor()), ACTION_TYPE.SCALETO, new CommonScaleToActionProcessor()), ACTION_TYPE.BOUNCE, new CommonBounceActionProcessor()));
+  }
+
+  function registerPopTipAction() {
+    registerPopTipVisibilityAction();
+  }
+
+  var PopTipComponent = /*#__PURE__*/function (_BaseComponentWithTex) {
+    function PopTipComponent(attributes, options) {
+      _classCallCheck(this, PopTipComponent);
+      return _callSuper(this, PopTipComponent, [(null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, PopTipComponent.defaultAttributes, attributes)]);
+    }
+    _inherits(PopTipComponent, _BaseComponentWithTex);
+    return _createClass(PopTipComponent, [{
+      key: "render",
+      value: function render() {
+        _superPropGet(PopTipComponent, "render", this, 3)([]), this.renderPopTip();
+      }
+    }, {
+      key: "renderPopTip",
+      value: function renderPopTip() {
+        var _this$attribute = this.attribute,
+          graphic = _this$attribute.graphic,
+          padding = _this$attribute.padding,
+          width = _this$attribute.width,
+          height = _this$attribute.height,
+          attrs = Object.assign({}, graphic);
+        attrs.x || (attrs.x = padding.left), attrs.y || (attrs.y = padding.top), attrs.width || (attrs.width = width - padding.left - padding.right), attrs.height || (attrs.height = height - padding.top - padding.bottom);
+        var attribute = Object.assign(Object.assign({}, attrs), {
+          scaleX: 1,
+          scaleY: 1,
+          angle: 0,
+          postMatrix: null
+        });
+        if (this.vrComponent) this.vrComponent.setAttributes(attribute);else {
+          var labelItem = new StoryLabelItem(attribute);
+          this.vrComponent = labelItem, this.addChild(labelItem);
+        }
+      }
+    }]);
+  }(BaseComponentWithText);
+  PopTipComponent.defaultAttributes = {
+    visible: !0,
+    textStyle: {},
+    width: 100,
+    height: 100,
+    padding: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  };
+
+  var LABEL_ITEM = "LabelItem";
+
+  var LabelItemRuntime = /*#__PURE__*/function (_BaseRuntime) {
+    function LabelItemRuntime() {
+      var _this;
+      _classCallCheck(this, LabelItemRuntime);
+      _this = _callSuper(this, LabelItemRuntime, arguments), _this.type = LABEL_ITEM;
+      return _this;
+    }
+    _inherits(LabelItemRuntime, _BaseRuntime);
+    return _createClass(LabelItemRuntime);
+  }(BaseRuntime);
+
+  var LabelItemCharacter = /*#__PURE__*/function (_CharacterComponent) {
+    function LabelItemCharacter() {
+      _classCallCheck(this, LabelItemCharacter);
+      return _callSuper(this, LabelItemCharacter, arguments);
+    }
+    _inherits(LabelItemCharacter, _CharacterComponent);
+    return _createClass(LabelItemCharacter, [{
+      key: "createAndAddGraphic",
+      value: function createAndAddGraphic(attribute) {
+        this._graphic = new PopTipComponent(attribute), this.canvas.addGraphic(this._graphic);
+      }
+    }, {
+      key: "_initRuntime",
+      value: function _initRuntime() {
+        var _this = this;
+        LabelItemCharacter.RunTime.forEach(function (R) {
+          _this._runtime.push(new R(_this));
+        });
+      }
+    }, {
+      key: "getDefaultAttribute",
+      value: function getDefaultAttribute() {
+        return Object.assign(Object.assign({}, _superPropGet(LabelItemCharacter, "getDefaultAttribute", this, 3)([])), {
+          width: 100,
+          height: 100
+        });
+      }
+    }, {
+      key: "_clearGraphic",
+      value: function _clearGraphic() {
+        _superPropGet(LabelItemCharacter, "_clearGraphic", this, 3)([]);
+      }
+    }, {
+      key: "show",
+      value: function show() {
+        this._graphic.setAttribute("visibleAll", !0);
+      }
+    }, {
+      key: "hide",
+      value: function hide() {
+        this._graphic.setAttribute("visibleAll", !1);
+      }
+    }]);
+  }(CharacterComponent);
+  LabelItemCharacter.type = LABEL_ITEM, LabelItemCharacter.RunTime = [LabelItemRuntime];
+
+  function registerLabelItem() {
+    StoryFactory.registerCharacter(LabelItemCharacter.type, LabelItemCharacter);
+  }
+
+  var DefaultVisibility = /*#__PURE__*/function (_BaseVisibility) {
+    function DefaultVisibility() {
+      _classCallCheck(this, DefaultVisibility);
+      return _callSuper(this, DefaultVisibility, arguments);
+    }
+    _inherits(DefaultVisibility, _BaseVisibility);
+    return _createClass(DefaultVisibility, [{
+      key: "_setInitAttributes",
+      value: function _setInitAttributes(graphic, params, appear) {}
+    }, {
+      key: "_run",
+      value: function _run(graphic, params, appear) {
+        return appear && graphic && graphic.appearAnimate ? graphic.appearAnimate(params) : !appear && graphic && graphic.disappearAnimate && graphic.disappearAnimate(params), !0;
+      }
+    }]);
+  }(BaseVisibility);
+  var defaultInstance = new DefaultVisibility();
+  var LabelItemVisibilityActionProcessor = /*#__PURE__*/function (_CommonVisibilityActi) {
+    function LabelItemVisibilityActionProcessor() {
+      var _this;
+      _classCallCheck(this, LabelItemVisibilityActionProcessor);
+      _this = _callSuper(this, LabelItemVisibilityActionProcessor), _this.name = "appearOrDisAppear";
+      return _this;
+    }
+    _inherits(LabelItemVisibilityActionProcessor, _CommonVisibilityActi);
+    return _createClass(LabelItemVisibilityActionProcessor, [{
+      key: "getEffectInstance",
+      value: function getEffectInstance(effect, appear) {
+        return "default" === effect ? defaultInstance : _superPropGet(LabelItemVisibilityActionProcessor, "getEffectInstance", this, 3)([effect, appear]);
+      }
+    }]);
+  }(CommonVisibilityActionProcessor);
+  function registerLabelItemVisibilityAction() {
+    globalProcessorRegistry.registerProcessor(LABEL_ITEM, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ACTION_TYPE.APPEAR, new LabelItemVisibilityActionProcessor()), ACTION_TYPE.DISAPPEAR, new LabelItemVisibilityActionProcessor()), ACTION_TYPE.STYLE, new CommonStyleActionProcessor()), ACTION_TYPE.MOVETO, new CommonMoveToActionProcessor()), ACTION_TYPE.SCALETO, new CommonScaleToActionProcessor()), ACTION_TYPE.BOUNCE, new CommonBounceActionProcessor()));
+  }
+
+  function registerLabelItemAction() {
+    registerLabelItemVisibilityAction();
+  }
+
   function registerAll() {
       registerGraphics();
       registerCharacters();
@@ -116766,8 +117582,12 @@
   exports.registerDynamicLineAction = registerDynamicLineAction;
   exports.registerEasing = registerEasing;
   exports.registerGraphics = registerGraphics;
+  exports.registerLabelItem = registerLabelItem;
+  exports.registerLabelItemAction = registerLabelItemAction;
   exports.registerLottie = registerLottie;
   exports.registerLottieAction = registerLottieAction;
+  exports.registerPopTip = registerPopTip;
+  exports.registerPopTipAction = registerPopTipAction;
   exports.registerSinglePie = registerSinglePie;
   exports.registerSinglePieAction = registerSinglePieAction;
   exports.registerVChartAction = registerVChartAction;