@visactor/vrender 0.18.0-alpha.4 → 0.18.0-alpha.5

package/dist/index.js

@@ -4784,6 +4784,11 @@
       value: function clear() {
         this.transformCbList = null, this.commandList.length = 0, this.curves.length = 0;
       }
+    }, {
+      key: "beginPath",
+      value: function beginPath() {
+        this.clear();
+      }
     }, {
       key: "toString",
       value: function toString() {
@@ -4803,6 +4808,8 @@
             var path = "";
             for (var i = 0; i < bezierPathList.length; i += 6) path += "C".concat(bezierPathList[i], " ").concat(bezierPathList[i + 1], " ").concat(bezierPathList[i + 2], " ").concat(bezierPathList[i + 3], " ").concat(bezierPathList[i + 4], " ").concat(bezierPathList[i + 5]);
             return path;
+          }, _list[enumCommandMap.R] = function (cmd) {
+            return "M".concat(cmd[1], " ").concat(cmd[2], " h").concat(cmd[3], " v").concat(cmd[4], " H").concat(cmd[1], "Z");
           }, _list[enumCommandMap.Z] = function (cmd) {
             return "Z";
           }, this.toStringCbList = _list;
@@ -5150,6 +5157,8 @@
     heightLimit: 1 / 0,
     lineClamp: 1 / 0,
     suffixPosition: "end",
+    underlineDash: [],
+    underlineOffset: 0,
     disableAutoClipedPoptip: void 0
   };
   var DefaultPickStyle = {
@@ -5188,6 +5197,7 @@
     zIndex: 0,
     layout: null,
     boundsPadding: 0,
+    renderStyle: "default",
     pickMode: "accurate",
     customPickShape: null,
     boundsMode: "accurate",
@@ -5210,6 +5220,8 @@
     endAngle: pi2,
     innerRadius: 0,
     outerRadius: 1,
+    innerPadding: 0,
+    outerPadding: 0,
     cornerRadius: 0,
     padRadius: 0,
     padAngle: 0,
@@ -5293,7 +5305,7 @@
     strokeBoundsBuffer: 0,
     keepDirIn3d: !0
   });
-  var DefaultRichTextAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+  var DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
     width: 300,
     height: 300,
     ellipsis: !0,
@@ -11370,9 +11382,7 @@
         var data = ResourceLoader.cache.get(svgStr);
         data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(function () {
           mark.imageLoadFail(svgStr);
-        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && application.global.getRequestAnimationFrame()(function () {
-          mark.imageLoadSuccess(svgStr, data.data);
-        }) : (data = {
+        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(svgStr, data.data) : (data = {
           type: "image",
           loadState: "init"
         }, ResourceLoader.cache.set(svgStr, data), data.dataPromise = application.global.loadSvg(svgStr), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(function (res) {
@@ -11478,6 +11488,7 @@
     zIndex: 1,
     layout: 1,
     keepDirIn3d: 1,
+    globalZIndex: 1,
     outerBorder: 1,
     innerBorder: 1,
     lineDash: 1,
@@ -11822,7 +11833,7 @@
       value: function animate(params) {
         var _this2 = this;
         this.animates || (this.animates = new Map());
-        var animate = new Animate(null == params ? void 0 : params.id).bind(this);
+        var animate = new Animate(null == params ? void 0 : params.id, this.stage && this.stage.getTimeline()).bind(this);
         if (params) {
           var onStart = params.onStart,
             onFrame = params.onFrame,
@@ -14031,17 +14042,25 @@
       key: "updateSingallineAABBBounds",
       value: function updateSingallineAABBBounds(text) {
         var textTheme = getTheme(this).text,
-          _this$attribute$direc = this.attribute.direction,
-          direction = _this$attribute$direc === void 0 ? textTheme.direction : _this$attribute$direc;
-        return "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
+          _this$attribute2 = this.attribute,
+          _this$attribute2$dire = _this$attribute2.direction,
+          direction = _this$attribute2$dire === void 0 ? textTheme.direction : _this$attribute2$dire,
+          _this$attribute2$unde = _this$attribute2.underlineOffset,
+          underlineOffset = _this$attribute2$unde === void 0 ? textTheme.underlineOffset : _this$attribute2$unde,
+          b = "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
+        return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
       }
     }, {
       key: "updateMultilineAABBBounds",
       value: function updateMultilineAABBBounds(text) {
         var textTheme = getTheme(this).text,
-          _this$attribute$direc2 = this.attribute.direction,
-          direction = _this$attribute$direc2 === void 0 ? textTheme.direction : _this$attribute$direc2;
-        return "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+          _this$attribute3 = this.attribute,
+          _this$attribute3$dire = _this$attribute3.direction,
+          direction = _this$attribute3$dire === void 0 ? textTheme.direction : _this$attribute3$dire,
+          _this$attribute3$unde = _this$attribute3.underlineOffset,
+          underlineOffset = _this$attribute3$unde === void 0 ? textTheme.underlineOffset : _this$attribute3$unde,
+          b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+        return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
       }
     }, {
       key: "updateHorizontalSinglelineAABBBounds",
@@ -14758,7 +14777,7 @@
     function StarSymbol() {
       var _this;
       _classCallCheck(this, StarSymbol);
-      _this = _super.apply(this, arguments), _this.type = "star", _this.pathStr = "M4.51351666838205,0A4.51351666838205,4.51351666838205,0,1,1,-4.51351666838205,0A4.51351666838205,4.51351666838205,0,1,1,4.51351666838205,0";
+      _this = _super.apply(this, arguments), _this.type = "star", _this.pathStr = "M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z";
       return _this;
     }
     _createClass(StarSymbol, [{
@@ -14881,7 +14900,7 @@
     function WyeSymbol() {
       var _this;
       _classCallCheck(this, WyeSymbol);
-      _this = _super.apply(this, arguments), _this.type = "wye", _this.pathStr = "M4.51351666838205,0A4.51351666838205,4.51351666838205,0,1,1,-4.51351666838205,0A4.51351666838205,4.51351666838205,0,1,1,4.51351666838205,0";
+      _this = _super.apply(this, arguments), _this.type = "wye", _this.pathStr = "M0.25 0.14433756729740646L0.25 0.6443375672974064L-0.25 0.6443375672974064L-0.25 0.14433756729740643L-0.6830127018922193 -0.10566243270259357L-0.4330127018922193 -0.5386751345948129L0 -0.28867513459481287L0.4330127018922193 -0.5386751345948129L0.6830127018922193 -0.10566243270259357Z";
       return _this;
     }
     _createClass(WyeSymbol, [{
@@ -16555,28 +16574,47 @@
       value: function getFrameCache() {
         return this.shouldUpdateShape() && (this.doUpdateFrameCache(), this.clearUpdateShapeTag()), this._frameCache;
       }
+    }, {
+      key: "combinedStyleToCharacter",
+      value: function combinedStyleToCharacter(config) {
+        var _this$attribute = this.attribute,
+          fill = _this$attribute.fill,
+          stroke = _this$attribute.stroke,
+          fontSize = _this$attribute.fontSize,
+          fontFamily = _this$attribute.fontFamily,
+          fontStyle = _this$attribute.fontStyle,
+          fontWeight = _this$attribute.fontWeight;
+        return Object.assign({
+          fill: fill,
+          stroke: stroke,
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          fontStyle: fontStyle,
+          fontWeight: fontWeight
+        }, config);
+      }
     }, {
       key: "doUpdateFrameCache",
       value: function doUpdateFrameCache() {
         var _this2 = this;
         var _a;
-        var _this$attribute = this.attribute,
-          _this$attribute$textC = _this$attribute.textConfig,
-          textConfig = _this$attribute$textC === void 0 ? [] : _this$attribute$textC,
-          maxWidth = _this$attribute.maxWidth,
-          maxHeight = _this$attribute.maxHeight,
-          width = _this$attribute.width,
-          height = _this$attribute.height,
-          ellipsis = _this$attribute.ellipsis,
-          wordBreak = _this$attribute.wordBreak,
-          verticalDirection = _this$attribute.verticalDirection,
-          textAlign = _this$attribute.textAlign,
-          textBaseline = _this$attribute.textBaseline,
-          layoutDirection = _this$attribute.layoutDirection,
-          singleLine = _this$attribute.singleLine,
+        var _this$attribute2 = this.attribute,
+          _this$attribute2$text = _this$attribute2.textConfig,
+          textConfig = _this$attribute2$text === void 0 ? [] : _this$attribute2$text,
+          maxWidth = _this$attribute2.maxWidth,
+          maxHeight = _this$attribute2.maxHeight,
+          width = _this$attribute2.width,
+          height = _this$attribute2.height,
+          ellipsis = _this$attribute2.ellipsis,
+          wordBreak = _this$attribute2.wordBreak,
+          verticalDirection = _this$attribute2.verticalDirection,
+          textAlign = _this$attribute2.textAlign,
+          textBaseline = _this$attribute2.textBaseline,
+          layoutDirection = _this$attribute2.layoutDirection,
+          singleLine = _this$attribute2.singleLine,
           paragraphs = [];
         for (var i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
-          var config = textConfig[i],
+          var config = this.combinedStyleToCharacter(textConfig[i]),
             iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
           if (iconCache) paragraphs.push(iconCache);else {
             var icon = new RichTextIcon(config);
@@ -16586,7 +16624,7 @@
             }, icon.richtextId = config.id, paragraphs.push(icon);
           }
         } else {
-          var richTextConfig = textConfig[i];
+          var richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
           if (isNumber$1(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text && richTextConfig.text.includes("\n")) {
             var textParts = richTextConfig.text.split("\n");
             for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig));
@@ -16910,11 +16948,16 @@
           _this$attribute2 = this.attribute,
           _this$attribute2$corn = _this$attribute2.cornerRadius,
           cornerRadius = _this$attribute2$corn === void 0 ? arcTheme.cornerRadius : _this$attribute2$corn,
-          _this$attribute2$oute = _this$attribute2.outerRadius,
-          outerRadius = _this$attribute2$oute === void 0 ? arcTheme.outerRadius : _this$attribute2$oute,
-          _this$attribute2$inne = _this$attribute2.innerRadius,
-          innerRadius = _this$attribute2$inne === void 0 ? arcTheme.innerRadius : _this$attribute2$inne;
-        if (0 === cornerRadius || "0%" === cornerRadius) return 0;
+          _this$attribute2$inne = _this$attribute2.innerPadding,
+          innerPadding = _this$attribute2$inne === void 0 ? arcTheme.innerPadding : _this$attribute2$inne,
+          _this$attribute2$oute = _this$attribute2.outerPadding,
+          outerPadding = _this$attribute2$oute === void 0 ? arcTheme.outerPadding : _this$attribute2$oute;
+        var _this$attribute3 = this.attribute,
+          _this$attribute3$oute = _this$attribute3.outerRadius,
+          outerRadius = _this$attribute3$oute === void 0 ? arcTheme.outerRadius : _this$attribute3$oute,
+          _this$attribute3$inne = _this$attribute3.innerRadius,
+          innerRadius = _this$attribute3$inne === void 0 ? arcTheme.innerRadius : _this$attribute3$inne;
+        if (outerRadius += outerPadding, innerRadius -= innerPadding, 0 === cornerRadius || "0%" === cornerRadius) return 0;
         var deltaRadius = Math.abs(outerRadius - innerRadius);
         return Math.min(isNumber$1(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
       }
@@ -16922,11 +16965,11 @@
       key: "getParsedAngle",
       value: function getParsedAngle() {
         var arcTheme = getTheme(this).arc;
-        var _this$attribute3 = this.attribute,
-          _this$attribute3$star = _this$attribute3.startAngle,
-          startAngle = _this$attribute3$star === void 0 ? arcTheme.startAngle : _this$attribute3$star,
-          _this$attribute3$endA = _this$attribute3.endAngle,
-          endAngle = _this$attribute3$endA === void 0 ? arcTheme.endAngle : _this$attribute3$endA;
+        var _this$attribute4 = this.attribute,
+          _this$attribute4$star = _this$attribute4.startAngle,
+          startAngle = _this$attribute4$star === void 0 ? arcTheme.startAngle : _this$attribute4$star,
+          _this$attribute4$endA = _this$attribute4.endAngle,
+          endAngle = _this$attribute4$endA === void 0 ? arcTheme.endAngle : _this$attribute4$endA;
         var _this$attribute$cap = this.attribute.cap,
           cap = _this$attribute$cap === void 0 ? arcTheme.cap : _this$attribute$cap,
           sign = endAngle - startAngle >= 0 ? 1 : -1,
@@ -16935,12 +16978,18 @@
           var startCap = 1,
             endCap = 1;
           cap.length && (startCap = Number(cap[0]), endCap = Number(cap[1]));
-          var _this$attribute4 = this.attribute,
-            _this$attribute4$oute = _this$attribute4.outerRadius,
-            outerRadius = _this$attribute4$oute === void 0 ? arcTheme.outerRadius : _this$attribute4$oute,
-            _this$attribute4$inne = _this$attribute4.innerRadius,
-            innerRadius = _this$attribute4$inne === void 0 ? arcTheme.innerRadius : _this$attribute4$inne,
-            capWidth = Math.abs(outerRadius - innerRadius) / 2,
+          var _this$attribute5 = this.attribute,
+            _this$attribute5$oute = _this$attribute5.outerRadius,
+            outerRadius = _this$attribute5$oute === void 0 ? arcTheme.outerRadius : _this$attribute5$oute,
+            _this$attribute5$inne = _this$attribute5.innerRadius,
+            innerRadius = _this$attribute5$inne === void 0 ? arcTheme.innerRadius : _this$attribute5$inne;
+          var _this$attribute6 = this.attribute,
+            _this$attribute6$oute = _this$attribute6.outerPadding,
+            outerPadding = _this$attribute6$oute === void 0 ? arcTheme.outerPadding : _this$attribute6$oute,
+            _this$attribute6$inne = _this$attribute6.innerPadding,
+            innerPadding = _this$attribute6$inne === void 0 ? arcTheme.innerPadding : _this$attribute6$inne;
+          outerRadius += outerPadding, innerRadius -= innerPadding;
+          var capWidth = Math.abs(outerRadius - innerRadius) / 2,
             capAngle = capWidth / outerRadius;
           if (capWidth > epsilon && outerRadius > epsilon) return {
             startAngle: startAngle - sign * capAngle * startCap,
@@ -16958,14 +17007,20 @@
       key: "getParsePadAngle",
       value: function getParsePadAngle(startAngle, endAngle) {
         var arcTheme = getTheme(this).arc,
-          _this$attribute5 = this.attribute,
-          _this$attribute5$oute = _this$attribute5.outerRadius,
-          outerRadius = _this$attribute5$oute === void 0 ? arcTheme.outerRadius : _this$attribute5$oute,
-          _this$attribute5$inne = _this$attribute5.innerRadius,
-          innerRadius = _this$attribute5$inne === void 0 ? arcTheme.innerRadius : _this$attribute5$inne,
-          _this$attribute5$padA = _this$attribute5.padAngle,
-          padAngle = _this$attribute5$padA === void 0 ? arcTheme.padAngle : _this$attribute5$padA,
-          _this$attribute$padRa = this.attribute.padRadius,
+          _this$attribute7 = this.attribute,
+          _this$attribute7$inne = _this$attribute7.innerPadding,
+          innerPadding = _this$attribute7$inne === void 0 ? arcTheme.innerPadding : _this$attribute7$inne,
+          _this$attribute7$oute = _this$attribute7.outerPadding,
+          outerPadding = _this$attribute7$oute === void 0 ? arcTheme.outerPadding : _this$attribute7$oute,
+          _this$attribute7$padA = _this$attribute7.padAngle,
+          padAngle = _this$attribute7$padA === void 0 ? arcTheme.padAngle : _this$attribute7$padA;
+        var _this$attribute8 = this.attribute,
+          _this$attribute8$oute = _this$attribute8.outerRadius,
+          outerRadius = _this$attribute8$oute === void 0 ? arcTheme.outerRadius : _this$attribute8$oute,
+          _this$attribute8$inne = _this$attribute8.innerRadius,
+          innerRadius = _this$attribute8$inne === void 0 ? arcTheme.innerRadius : _this$attribute8$inne;
+        outerRadius += outerPadding, innerRadius -= innerPadding;
+        var _this$attribute$padRa = this.attribute.padRadius,
           padRadius = _this$attribute$padRa === void 0 ? sqrt(outerRadius * outerRadius + innerRadius * innerRadius) : _this$attribute$padRa,
           deltaAngle = abs(endAngle - startAngle);
         var outerStartAngle = startAngle,
@@ -17036,8 +17091,8 @@
           _this$getParsedAngle = this.getParsedAngle(),
           startAngle = _this$getParsedAngle.startAngle,
           endAngle = _this$getParsedAngle.endAngle;
-        var innerRadius = attribute.innerRadius,
-          outerRadius = attribute.outerRadius;
+        var innerRadius = attribute.innerRadius - (attribute.innerPadding || 0),
+          outerRadius = attribute.outerRadius - (attribute.outerPadding || 0);
         var deltaAngle = abs(endAngle - startAngle),
           clockwise = endAngle > startAngle;
         if (outerRadius < innerRadius) {
@@ -18082,11 +18137,15 @@
     }, {
       key: "updateArcAABBBoundsImprecise",
       value: function updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds, graphic) {
-        var _attribute$innerRadiu = attribute.innerRadius,
-          innerRadius = _attribute$innerRadiu === void 0 ? arcTheme.innerRadius : _attribute$innerRadiu;
         var _attribute$outerRadiu2 = attribute.outerRadius,
-          outerRadius = _attribute$outerRadiu2 === void 0 ? arcTheme.outerRadius : _attribute$outerRadiu2;
-        return outerRadius < innerRadius && (outerRadius = innerRadius), aabbBounds.set(-outerRadius, -outerRadius, outerRadius, outerRadius), aabbBounds;
+          outerRadius = _attribute$outerRadiu2 === void 0 ? arcTheme.outerRadius : _attribute$outerRadiu2,
+          _attribute$innerRadiu = attribute.innerRadius,
+          innerRadius = _attribute$innerRadiu === void 0 ? arcTheme.innerRadius : _attribute$innerRadiu;
+        var _attribute$outerPaddi = attribute.outerPadding,
+          outerPadding = _attribute$outerPaddi === void 0 ? arcTheme.outerPadding : _attribute$outerPaddi,
+          _attribute$innerPaddi = attribute.innerPadding,
+          innerPadding = _attribute$innerPaddi === void 0 ? arcTheme.innerPadding : _attribute$innerPaddi;
+        return outerRadius += outerPadding, innerRadius -= innerPadding, outerRadius < innerRadius && (outerRadius = innerRadius), aabbBounds.set(-outerRadius, -outerRadius, outerRadius, outerRadius), aabbBounds;
       }
     }, {
       key: "updateArcAABBBoundsAccurate",
@@ -18095,7 +18154,11 @@
           outerRadius = _attribute$outerRadiu3 === void 0 ? arcTheme.outerRadius : _attribute$outerRadiu3,
           _attribute$innerRadiu2 = attribute.innerRadius,
           innerRadius = _attribute$innerRadiu2 === void 0 ? arcTheme.innerRadius : _attribute$innerRadiu2;
-        if (outerRadius < innerRadius) {
+        var _attribute$outerPaddi2 = attribute.outerPadding,
+          outerPadding = _attribute$outerPaddi2 === void 0 ? arcTheme.outerPadding : _attribute$outerPaddi2,
+          _attribute$innerPaddi2 = attribute.innerPadding,
+          innerPadding = _attribute$innerPaddi2 === void 0 ? arcTheme.innerPadding : _attribute$innerPaddi2;
+        if (outerRadius += outerPadding, innerRadius -= innerPadding, outerRadius < innerRadius) {
           var temp = outerRadius;
           outerRadius = innerRadius, innerRadius = temp;
         }
@@ -18564,12 +18627,12 @@
     _createClass(GradientParser, null, [{
       key: "IsGradient",
       value: function IsGradient(c) {
-        return !("string" == typeof c && c.length < 10);
+        return !("string" == typeof c && !c.includes("gradient"));
       }
     }, {
       key: "IsGradientStr",
       value: function IsGradientStr(c) {
-        return "string" == typeof c && c.length > 10;
+        return "string" == typeof c && c.includes("gradient");
       }
     }, {
       key: "Parse",
@@ -19010,10 +19073,10 @@
           doInnerBorder = innerBorder && !1 !== innerBorder.visible;
         if (!doOuterBorder && !doInnerBorder) return;
         var _arc$attribute2 = arc.attribute,
-          _arc$attribute2$inner = _arc$attribute2.innerRadius,
-          innerRadius = _arc$attribute2$inner === void 0 ? arcAttribute.innerRadius : _arc$attribute2$inner,
-          _arc$attribute2$outer = _arc$attribute2.outerRadius,
-          outerRadius = _arc$attribute2$outer === void 0 ? arcAttribute.outerRadius : _arc$attribute2$outer,
+          _arc$attribute2$inner = _arc$attribute2.innerPadding,
+          innerPadding = _arc$attribute2$inner === void 0 ? arcAttribute.innerPadding : _arc$attribute2$inner,
+          _arc$attribute2$outer = _arc$attribute2.outerPadding,
+          outerPadding = _arc$attribute2$outer === void 0 ? arcAttribute.outerPadding : _arc$attribute2$outer,
           _arc$attribute2$start = _arc$attribute2.startAngle,
           startAngle = _arc$attribute2$start === void 0 ? arcAttribute.startAngle : _arc$attribute2$start,
           _arc$attribute2$endAn = _arc$attribute2.endAngle,
@@ -19027,8 +19090,14 @@
           _arc$attribute2$scale = _arc$attribute2.scaleX,
           scaleX = _arc$attribute2$scale === void 0 ? arcAttribute.scaleX : _arc$attribute2$scale,
           _arc$attribute2$scale2 = _arc$attribute2.scaleY,
-          scaleY = _arc$attribute2$scale2 === void 0 ? arcAttribute.scaleY : _arc$attribute2$scale2,
-          doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+          scaleY = _arc$attribute2$scale2 === void 0 ? arcAttribute.scaleY : _arc$attribute2$scale2;
+        var _arc$attribute3 = arc.attribute,
+          _arc$attribute3$inner = _arc$attribute3.innerRadius,
+          innerRadius = _arc$attribute3$inner === void 0 ? arcAttribute.innerRadius : _arc$attribute3$inner,
+          _arc$attribute3$outer = _arc$attribute3.outerRadius,
+          outerRadius = _arc$attribute3$outer === void 0 ? arcAttribute.outerRadius : _arc$attribute3$outer;
+        outerRadius += outerPadding, innerRadius -= innerPadding;
+        var doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
           doStrokeInner = !(!innerBorder || !innerBorder.stroke);
         if (doOuterBorder) {
           var _outerBorder$distance = outerBorder.distance,
@@ -19632,14 +19701,20 @@
           doFill = data.doFill,
           doStroke = data.doStroke,
           _arc$attribute2 = arc.attribute,
-          _arc$attribute2$outer = _arc$attribute2.outerRadius,
-          outerRadius = _arc$attribute2$outer === void 0 ? arcAttribute.outerRadius : _arc$attribute2$outer,
-          _arc$attribute2$inner = _arc$attribute2.innerRadius,
-          innerRadius = _arc$attribute2$inner === void 0 ? arcAttribute.innerRadius : _arc$attribute2$inner,
+          _arc$attribute2$outer = _arc$attribute2.outerPadding,
+          outerPadding = _arc$attribute2$outer === void 0 ? arcAttribute.outerPadding : _arc$attribute2$outer,
+          _arc$attribute2$inner = _arc$attribute2.innerPadding,
+          innerPadding = _arc$attribute2$inner === void 0 ? arcAttribute.innerPadding : _arc$attribute2$inner,
           _arc$attribute2$cap = _arc$attribute2.cap,
           cap = _arc$attribute2$cap === void 0 ? arcAttribute.cap : _arc$attribute2$cap,
           _arc$attribute2$force = _arc$attribute2.forceShowCap,
           forceShowCap = _arc$attribute2$force === void 0 ? arcAttribute.forceShowCap : _arc$attribute2$force;
+        var _arc$attribute3 = arc.attribute,
+          _arc$attribute3$outer = _arc$attribute3.outerRadius,
+          outerRadius = _arc$attribute3$outer === void 0 ? arcAttribute.outerRadius : _arc$attribute3$outer,
+          _arc$attribute3$inner = _arc$attribute3.innerRadius,
+          innerRadius = _arc$attribute3$inner === void 0 ? arcAttribute.innerRadius : _arc$attribute3$inner;
+        outerRadius += outerPadding, innerRadius -= innerPadding;
         var conicalOffset = 0;
         var tempChangeConicalColor = (isBoolean$1(cap) && cap || cap[0]) && "conical" === fill.gradient;
         if (tempChangeConicalColor) {
@@ -19665,11 +19740,11 @@
           if (abs(ea - sa) >= pi2 - epsilon) {
             context.beginPath();
             var capAngle = Math.abs(outerRadius - innerRadius) / 2 / outerRadius,
-              _arc$attribute3 = arc.attribute,
-              _arc$attribute3$endAn = _arc$attribute3.endAngle,
-              _endAngle = _arc$attribute3$endAn === void 0 ? arcAttribute.endAngle : _arc$attribute3$endAn,
-              _arc$attribute3$fill = _arc$attribute3.fill,
-              _fill = _arc$attribute3$fill === void 0 ? arcAttribute.fill : _arc$attribute3$fill,
+              _arc$attribute4 = arc.attribute,
+              _arc$attribute4$endAn = _arc$attribute4.endAngle,
+              _endAngle = _arc$attribute4$endAn === void 0 ? arcAttribute.endAngle : _arc$attribute4$endAn,
+              _arc$attribute4$fill = _arc$attribute4.fill,
+              _fill = _arc$attribute4$fill === void 0 ? arcAttribute.fill : _arc$attribute4$fill,
               _startAngle = _endAngle;
             if (this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, _startAngle, _startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill) {
               var color = _fill;
@@ -20250,9 +20325,10 @@
       key: "drawLinearAreaHighPerformance",
       value: function drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e;
+        var points = area.attribute.points;
+        if (points.length < 2) return;
         context.beginPath();
         var z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-          points = area.attribute.points,
           startP = points[0];
         context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (var i = 1; i < points.length; i++) {
@@ -20429,6 +20505,7 @@
       key: "_drawSegmentItem",
       value: function _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
         var _a, _b, _c, _d;
+        if (!(cache && cache.top && cache.bottom && cache.top.curves && cache.top.curves.length && cache.bottom.curves && cache.bottom.curves.length)) return;
         var connectedType = attribute.connectedType,
           connectedX = attribute.connectedX,
           connectedY = attribute.connectedY,
@@ -20437,7 +20514,6 @@
         if (connect && (isArray$1(defaultAttribute) ? (connectedType = null !== (_a = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _a ? _a : defaultAttribute[1].connectedType, connectedX = null !== (_b = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _b ? _b : defaultAttribute[1].connectedX, connectedY = null !== (_c = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _c ? _c : defaultAttribute[1].connectedY, connectedStyle = null !== (_d = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _d ? _d : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), isArray$1(defaultAttribute) ? defaultAttribute.forEach(function (i) {
           return da.push(i);
         }) : da.push(defaultAttribute), da.push(attribute)), connect && "none" === connectedType) return !1;
-        if (!cache) return;
         context.beginPath();
         var _area$attribute4 = area.attribute,
           points = _area$attribute4.points,
@@ -20789,7 +20865,15 @@
               _h2 = b.height();
             b.set((null !== (_h = background.x) && void 0 !== _h ? _h : 0) + (null !== (_j = background.dx) && void 0 !== _j ? _j : 0), (null !== (_k = background.y) && void 0 !== _k ? _k : 0) + (null !== (_l = background.dy) && void 0 !== _l ? _l : 0), _w, _h2);
           }
-        } else b = graphic.AABBBounds, onlyTranslate || b.set(0, 0, b.width(), b.height());
+        } else b = graphic.AABBBounds, onlyTranslate || (b = getTextBounds(Object.assign(Object.assign({}, graphic.attribute), {
+          angle: 0,
+          scaleX: 1,
+          scaleY: 1,
+          x: 0,
+          y: 0,
+          dx: 0,
+          dy: 0
+        })).clone());
         if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
@@ -20894,7 +20978,7 @@
             doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(function (line) {
               context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
             }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(function (line) {
-              context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), _this2.drawMultiUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + x, (line.topOffset || 0) + yOffset + y, z, line.width, textAttribute, context);
+              context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), _this2.drawMultiUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, line.width, textAttribute, context);
             })));
           } else {
             text.tryUpdateAABBBounds();
@@ -20975,6 +21059,10 @@
           fill = _text$attribute3$fill === void 0 ? textAttribute.fill : _text$attribute3$fill,
           _text$attribute3$opac = _text$attribute3.opacity,
           opacity = _text$attribute3$opac === void 0 ? textAttribute.opacity : _text$attribute3$opac,
+          _text$attribute3$unde = _text$attribute3.underlineOffset,
+          underlineOffset = _text$attribute3$unde === void 0 ? textAttribute.underlineOffset : _text$attribute3$unde,
+          _text$attribute3$unde2 = _text$attribute3.underlineDash,
+          underlineDash = _text$attribute3$unde2 === void 0 ? textAttribute.underlineDash : _text$attribute3$unde2,
           _text$attribute3$fill2 = _text$attribute3.fillOpacity,
           fillOpacity = _text$attribute3$fill2 === void 0 ? textAttribute.fillOpacity : _text$attribute3$fill2,
           w = text.clipedWidth,
@@ -20987,8 +21075,8 @@
             strokeOpacity: fillOpacity
           };
         if (underline) {
-          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.beginPath();
-          var dy = y + offsetY + fontSize;
+          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.setLineDash(underlineDash), context.beginPath();
+          var dy = y + offsetY + fontSize + underlineOffset;
           context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
         }
         if (lineThrough) {
@@ -21010,6 +21098,10 @@
           fill = _text$attribute4$fill === void 0 ? textAttribute.fill : _text$attribute4$fill,
           _text$attribute4$opac = _text$attribute4.opacity,
           opacity = _text$attribute4$opac === void 0 ? textAttribute.opacity : _text$attribute4$opac,
+          _text$attribute4$unde = _text$attribute4.underlineOffset,
+          underlineOffset = _text$attribute4$unde === void 0 ? textAttribute.underlineOffset : _text$attribute4$unde,
+          _text$attribute4$unde2 = _text$attribute4.underlineDash,
+          underlineDash = _text$attribute4$unde2 === void 0 ? textAttribute.underlineDash : _text$attribute4$unde2,
           _text$attribute4$fill2 = _text$attribute4.fillOpacity,
           fillOpacity = _text$attribute4$fill2 === void 0 ? textAttribute.fillOpacity : _text$attribute4$fill2,
           offsetX = textDrawOffsetX(textAlign, w),
@@ -21022,8 +21114,8 @@
           };
         var deltaY = -3;
         if (underline) {
-          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.beginPath();
-          var dy = y + offsetY + fontSize + deltaY;
+          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.setLineDash(underlineDash), context.beginPath();
+          var dy = y + offsetY + fontSize + deltaY + underlineOffset;
           context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
         }
         if (deltaY = -1, lineThrough) {
@@ -22361,7 +22453,7 @@
       key: "getRenderContribution",
       value: function getRenderContribution(graphic) {
         var renderer;
-        return renderer || (renderer = this.selectRenderByNumberType(graphic.numberType)), renderer || (renderer = this.selectRenderByType(graphic.type)), renderer;
+        return renderer || (renderer = this.selectRenderByNumberType(graphic.numberType, graphic)), renderer || (renderer = this.selectRenderByType(graphic.type)), renderer;
       }
     }, {
       key: "renderItem",
@@ -22400,8 +22492,13 @@
       }
     }, {
       key: "selectRenderByNumberType",
-      value: function selectRenderByNumberType(type) {
-        return this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
+      value: function selectRenderByNumberType(type, graphic) {
+        var data;
+        if (graphic.attribute.renderStyle) {
+          var currentRenderMap = this.styleRenderMap.get(graphic.attribute.renderStyle);
+          data = currentRenderMap && currentRenderMap.get(type);
+        }
+        return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
     }, {
       key: "clearScreen",
@@ -26048,13 +26145,19 @@
           doStroke = data.doStroke,
           z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
           _arc$attribute = arc.attribute,
-          _arc$attribute$outerR = _arc$attribute.outerRadius,
-          outerRadius = _arc$attribute$outerR === void 0 ? arcAttribute.outerRadius : _arc$attribute$outerR,
-          _arc$attribute$innerR = _arc$attribute.innerRadius,
-          innerRadius = _arc$attribute$innerR === void 0 ? arcAttribute.innerRadius : _arc$attribute$innerR,
+          _arc$attribute$outerP = _arc$attribute.outerPadding,
+          outerPadding = _arc$attribute$outerP === void 0 ? arcAttribute.outerPadding : _arc$attribute$outerP,
+          _arc$attribute$innerP = _arc$attribute.innerPadding,
+          innerPadding = _arc$attribute$innerP === void 0 ? arcAttribute.innerPadding : _arc$attribute$innerP,
           _arc$attribute$height = _arc$attribute.height,
-          height = _arc$attribute$height === void 0 ? 10 : _arc$attribute$height,
-          rgbArray = ColorStore.Get(fill, exports.ColorType.Color255),
+          height = _arc$attribute$height === void 0 ? 10 : _arc$attribute$height;
+        var _arc$attribute2 = arc.attribute,
+          _arc$attribute2$outer = _arc$attribute2.outerRadius,
+          outerRadius = _arc$attribute2$outer === void 0 ? arcAttribute.outerRadius : _arc$attribute2$outer,
+          _arc$attribute2$inner = _arc$attribute2.innerRadius,
+          innerRadius = _arc$attribute2$inner === void 0 ? arcAttribute.innerRadius : _arc$attribute2$inner;
+        outerRadius += outerPadding, innerRadius -= innerPadding;
+        var rgbArray = ColorStore.Get(fill, exports.ColorType.Color255),
           _ref = drawContext.stage || {},
           light = _ref.light,
           face = drawContext.hack_pieFace,
@@ -29096,9 +29199,11 @@
   function jsx(type, config) {
     var _a = config || {};
       _a.key;
+      _a.name;
+      _a.id;
       var attribute = _a.attribute,
       stateProxy = _a.stateProxy,
-      props = __rest(_a, ["key", "attribute", "stateProxy"]);
+      props = __rest(_a, ["key", "name", "id", "attribute", "stateProxy"]);
     var c = type;
     isString$1(type) && (c = graphicCreator[type]);
     var childrenList = [];
@@ -29142,14 +29247,21 @@
       attribute = _dom$props.attribute,
       children = _dom$props.children,
       stateProxy = _dom$props.stateProxy,
+      id = _dom$props.id,
+      name = _dom$props.name,
       g = type({
         attribute: attribute
       }),
       out = parseToGraphic(g, dom.props, children);
-    return out || (stateProxy && (g.stateProxy = stateProxy), g.id = attribute.id, g.name = attribute.name, isArray$1(children) ? children.forEach(function (item) {
-      var c = decodeReactDom(item);
-      c && c.type && g.add(c);
-    }) : children && g.add(decodeReactDom(children)), g);
+    return out || (stateProxy && (g.stateProxy = stateProxy), g.id = id, g.name = name, parseChildren(children, g), g);
+  }
+  function parseChildren(children, g) {
+    isArray$1(children) ? children.forEach(function (item) {
+      if (isArray$1(item)) parseChildren(item, g);else {
+        var c = decodeReactDom(item);
+        c && c.type && g.add(c);
+      }
+    }) : children && g.add(decodeReactDom(children));
   }
   function parseToGraphic(g, props, childrenList) {
     var out,
@@ -31734,7 +31846,7 @@
     }, {
       key: "getTitle",
       value: function getTitle() {
-        return this.canvas.id.toString();
+        return this.canvas.id && this.canvas.id.toString();
       }
     }, {
       key: "getWH",
@@ -31898,11 +32010,11 @@
   try {
     ng = !!lynx.createCanvasNG;
   } catch (err) {}
-  function makeUpCanvas$2(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, pixelRatio) {
+  function makeUpCanvas$2(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, offscreen, pixelRatio) {
     var dpr = null != pixelRatio ? pixelRatio : SystemInfo.pixelRatio;
     canvasIdLists.forEach(function (id, i) {
-      var _canvas = ng ? lynx.createCanvasNG(id) : lynx.createCanvas(id);
-      _canvas.width = domref.width * dpr, _canvas.height = domref.height * dpr, ng && _canvas.attachToCanvasView(id);
+      var _canvas;
+      offscreen ? _canvas = lynx.createOffscreenCanvas() : (_canvas = ng ? lynx.createCanvasNG(id) : lynx.createCanvas(id), ng && _canvas.attachToCanvasView(id)), _canvas.width = domref.width * dpr, _canvas.height = domref.height * dpr;
       var ctx = _canvas.getContext("2d"),
         canvas = new CanvasWrapEnableWH(_canvas, ctx, dpr, domref.width, domref.height, id);
       canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
@@ -31938,7 +32050,7 @@
     _createClass(LynxEnvContribution, [{
       key: "configure",
       value: function configure(service, params) {
-        service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$2(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.pixelRatio));
+        service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$2(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, !!params.offscreen, params.pixelRatio));
       }
     }, {
       key: "getDynamicCanvasCount",
@@ -35072,7 +35184,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.18.0-alpha.4";
+  const version = "0.18.0-alpha.5";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);