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

package/dist/index.js

@@ -4201,7 +4201,8 @@
       justifyContent: "flex-start",
       alignItems: "flex-start",
       alignContent: "flex-start",
-      baseOpacity: 1
+      baseOpacity: 1,
+      cornerType: "round"
     });
     const DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: "",
@@ -4238,7 +4239,8 @@
       x1: 0,
       y1: 0,
       strokeBoundsBuffer: 0,
-      cornerRadius: 0
+      cornerRadius: 0,
+      cornerType: "round"
     });
     const DefaultRect3dAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
@@ -4246,7 +4248,8 @@
       x1: 0,
       y1: 0,
       cornerRadius: 0,
-      length: 0
+      length: 0,
+      cornerType: "round"
     });
     const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       symbolType: "circle",
@@ -4282,7 +4285,8 @@
       height: 0
     }, DefaultAttribute), {
       fill: !0,
-      cornerRadius: 0
+      cornerRadius: 0,
+      cornerType: "round"
     });
     const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImageAttribute), {
       backgroundShowMode: "never",
@@ -7241,6 +7245,13 @@
         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;
@@ -7248,6 +7259,8 @@
       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() {
@@ -7929,39 +7942,25 @@
         };
       }
       onBind() {
-        var _a, _b, _c, _d;
-        if (this.fromText = null !== (_b = null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) && void 0 !== _b ? _b : "", this.toText = null !== (_d = null === (_c = this.to) || void 0 === _c ? void 0 : _c.text) && void 0 !== _d ? _d : "", !this.toText || isArray$1(this.toText)) this.valid = !1;else {
-          this.toText = this.toText.toString();
-          const root = this.target.attachShadow(),
-            line = application.graphicService.creator.line({
-              x: 0,
-              y: 0,
-              points: [{
-                x: 0,
-                y: 0
-              }, {
-                x: 0,
-                y: this.target.getComputedAttribute("fontSize")
-              }],
-              stroke: "black",
-              lineWidth: 1
-            });
-          root.add(line);
-        }
+        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$1(this.toText) && 0 === this.toText.length) && (this.valid = !1), isArray$1(this.toText) && (this.toText = this.toText.map(item => (item || "").toString()));
       }
       onEnd() {
         this.target.detachShadow();
       }
       onUpdate(end, ratio, out) {
-        var _a;
         if (!1 === this.valid) return;
         const fromCount = this.fromText.length,
-          toCount = this.toText.length,
+          toTextIsArray = isArray$1(this.toText),
+          toCount = toTextIsArray ? this.toText.reduce((c, t) => c + (t || "").length, 0) : this.toText.length,
           count = Math.ceil(fromCount + (toCount - fromCount) * ratio);
-        out.text = this.toText.substr(0, count);
-        const line = null === (_a = this.target.shadowRoot) || void 0 === _a ? void 0 : _a.at(0),
-          endX = this.target.clipedWidth + 2;
-        line.setAttribute("x", endX);
+        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);
       }
     }
     class StreamLight extends ACustomAnimate {
@@ -10348,6 +10347,20 @@
             });
           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) {}
@@ -15607,7 +15620,7 @@
     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$1(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
         const cornerRadiusArr = rectCornerRadius;
@@ -15639,27 +15652,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]);
-        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;
     }
 
@@ -15684,6 +15699,7 @@
         if (!doOuterBorder && !doInnerBorder) return;
         const {
           cornerRadius = rectAttribute.cornerRadius,
+          cornerType = rectAttribute.cornerType,
           opacity = rectAttribute.opacity,
           x: originX = rectAttribute.x,
           y: originY = rectAttribute.y,
@@ -15708,7 +15724,7 @@
             nextX = x + sign * d,
             nextY = y + sign * d,
             dw = 2 * d;
-          if (0 === cornerRadius || isArray$1(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$1(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();
           }
@@ -15739,7 +15755,8 @@
           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,
@@ -15749,7 +15766,7 @@
           if (context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute), !(0 === cornerRadius || isArray$1(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());
@@ -15808,7 +15825,7 @@
             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;
@@ -16912,6 +16929,7 @@
             background: background,
             stroke = rectAttribute.stroke,
             cornerRadius = rectAttribute.cornerRadius,
+            cornerType = rectAttribute.cornerType,
             opacity = rectAttribute.opacity,
             fillOpacity = rectAttribute.fillOpacity,
             lineWidth = rectAttribute.lineWidth,
@@ -16935,7 +16953,7 @@
         if (!rect.valid || !visible) return;
         if (!doFill && !doStroke) return;
         if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
-        0 === cornerRadius || isArray$1(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$1(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
@@ -17113,7 +17131,7 @@
           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();
       }
@@ -17424,6 +17442,7 @@
             lineWidth = groupAttribute.lineWidth,
             visible = groupAttribute.visible,
             fillStrokeOrder = groupAttribute.fillStrokeOrder,
+            cornerType = groupAttribute.cornerType,
             x: originX = groupAttribute.x,
             y: originY = groupAttribute.y
           } = group.attribute,
@@ -17443,7 +17462,7 @@
           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$1(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$1(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,
@@ -17525,6 +17544,7 @@
             y: originY = imageAttribute.y,
             cornerRadius = imageAttribute.cornerRadius,
             fillStrokeOrder = imageAttribute.fillStrokeOrder,
+            cornerType = imageAttribute.cornerType,
             image: url
           } = image.attribute,
           data = this.valid(image, imageAttribute, fillCb);
@@ -17542,7 +17562,7 @@
               const res = image.resources.get(url);
               if ("success" !== res.state) return;
               let needRestore = !1;
-              0 === cornerRadius || isArray$1(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$1(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]);
@@ -17668,10 +17688,7 @@
         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);
@@ -20934,7 +20951,7 @@
         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));
@@ -24944,11 +24961,12 @@
             stroke = defaultParams.stroke,
             lineJoin = defaultParams.lineJoin,
             lineDash = defaultParams.lineDash,
+            lineDashOffset = defaultParams.lineDashOffset,
             lineCap = defaultParams.lineCap,
             miterLimit = defaultParams.miterLimit,
             keepStrokeScale = defaultParams.keepStrokeScale
           } = attribute;
-          _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;
         }
       }
       setTextStyleWithoutAlignBaseline(params, defaultParams, z) {
@@ -26440,9 +26458,10 @@
             lineDash = defaultParams.lineDash,
             lineCap = defaultParams.lineCap,
             miterLimit = defaultParams.miterLimit,
-            keepStrokeScale = defaultParams.keepStrokeScale
+            keepStrokeScale = defaultParams.keepStrokeScale,
+            lineDashOffset = defaultParams.lineDashOffset
           } = attribute;
-          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || !lineDash || (_context.setLineDash(lineDash), _context.lineDashOffset = lineDashOffset), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
       measureText(text) {
@@ -27069,11 +27088,12 @@
             stroke = defaultParams.stroke,
             lineJoin = defaultParams.lineJoin,
             lineDash = defaultParams.lineDash,
+            lineDashOffset = defaultParams.lineDashOffset,
             lineCap = defaultParams.lineCap,
             miterLimit = defaultParams.miterLimit,
             keepStrokeScale = defaultParams.keepStrokeScale
           } = attribute;
-          _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), lineDash && _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
+          _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), lineDash && (_context.setLineDash(lineDash), _context.lineDashOffset = lineDashOffset), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
         }
       }
       setTextStyleWithoutAlignBaseline(params, defaultParams) {
@@ -28114,9 +28134,10 @@
             lineDash = defaultParams.lineDash,
             lineCap = defaultParams.lineCap,
             miterLimit = defaultParams.miterLimit,
-            keepStrokeScale = defaultParams.keepStrokeScale
+            keepStrokeScale = defaultParams.keepStrokeScale,
+            lineDashOffset = defaultParams.lineDashOffset
           } = attribute;
-          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || (lineDash && _context.setLineDash(lineDash), _context.lineDashOffset = lineDashOffset), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
       measureText(text) {
@@ -29890,7 +29911,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.21.2-vstory.1";
+    const version = "0.21.2-vstory.3";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);