@visactor/vrender 0.17.23-alpha.1 → 0.17.24-alpha.2

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.17.23-alpha.1";
+export declare const version = "0.17.24-alpha.2";
 export * from '@visactor/vrender-core';
 export * from '@visactor/vrender-kits';

package/cjs/index.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 
 const vrender_core_1 = require("@visactor/vrender-core"), vrender_kits_1 = require("@visactor/vrender-kits"), vrender_kits_2 = require("@visactor/vrender-kits");
 
-exports.version = "0.17.23-alpha.1", (0, vrender_core_1.preLoadAllModule)(), (0, 
+exports.version = "0.17.24-alpha.2", (0, vrender_core_1.preLoadAllModule)(), (0, 
 vrender_core_1.isBrowserEnv)() ? (0, vrender_kits_1.loadBrowserEnv)(vrender_core_1.container) : (0, 
 vrender_core_1.isNodeEnv)() && (0, vrender_kits_1.loadNodeEnv)(vrender_core_1.container), 
 (0, vrender_kits_2.registerArc)(), (0, vrender_kits_2.registerArc3d)(), (0, vrender_kits_2.registerArea)(), 

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAA8F;AAC9F,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,iBAAiB,CAAC;AAEzC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AACnB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport { container, isBrowserEnv, isNodeEnv, preLoadAllModule } from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.17.23-alpha.1\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAA8F;AAC9F,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,iBAAiB,CAAC;AAEzC,IAAA,+BAAgB,GAAE,CAAC;AAEnB,IAAI,IAAA,2BAAY,GAAE,EAAE;IAClB,IAAA,6BAAc,EAAC,wBAAS,CAAC,CAAC;CAC3B;KAAM,IAAI,IAAA,wBAAS,GAAE,EAAE;IACtB,IAAA,0BAAW,EAAC,wBAAS,CAAC,CAAC;CACxB;AACD,IAAA,0BAAW,GAAE,CAAC;AACd,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,4BAAa,GAAE,CAAC;AAChB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,8BAAe,GAAE,CAAC;AAClB,IAAA,gCAAiB,GAAE,CAAC;AACpB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,+BAAgB,GAAE,CAAC;AACnB,IAAA,iCAAkB,GAAE,CAAC;AACrB,IAAA,6BAAc,GAAE,CAAC;AACjB,IAAA,2BAAY,GAAE,CAAC;AACf,IAAA,+BAAgB,GAAE,CAAC;AACnB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport { container, isBrowserEnv, isNodeEnv, preLoadAllModule } from '@visactor/vrender-core';\nimport { loadBrowserEnv, loadNodeEnv } from '@visactor/vrender-kits';\nimport {\n  registerArc,\n  registerArc3d,\n  registerArea,\n  registerCircle,\n  registerGlyph,\n  registerGroup,\n  registerImage,\n  registerLine,\n  registerPath,\n  registerPolygon,\n  registerPyramid3d,\n  registerRect,\n  registerRect3d,\n  registerRichtext,\n  registerShadowRoot,\n  registerSymbol,\n  registerText,\n  registerWrapText\n} from '@visactor/vrender-kits';\n// 导出版本号\nexport const version = \"0.17.24-alpha.2\";\n\npreLoadAllModule();\n\nif (isBrowserEnv()) {\n  loadBrowserEnv(container);\n} else if (isNodeEnv()) {\n  loadNodeEnv(container);\n}\nregisterArc();\nregisterArc3d();\nregisterArea();\nregisterCircle();\nregisterGlyph();\nregisterGroup();\nregisterImage();\nregisterLine();\nregisterPath();\nregisterPolygon();\nregisterPyramid3d();\nregisterRect();\nregisterRect3d();\nregisterRichtext();\nregisterShadowRoot();\nregisterSymbol();\nregisterText();\nregisterWrapText();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}

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;
@@ -5188,6 +5195,7 @@
     zIndex: 0,
     layout: null,
     boundsPadding: 0,
+    renderStyle: "default",
     pickMode: "accurate",
     customPickShape: null,
     boundsMode: "accurate",
@@ -5210,6 +5218,8 @@
     endAngle: pi2,
     innerRadius: 0,
     outerRadius: 1,
+    innerPadding: 0,
+    outerPadding: 0,
     cornerRadius: 0,
     padRadius: 0,
     padAngle: 0,
@@ -6707,7 +6717,7 @@
   }();
   var globalTheme = new Theme();
   function getTheme(graphic, theme) {
-    return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || globalTheme.getTheme();
+    return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || graphic.attachedThemeGraphic && getTheme(graphic.attachedThemeGraphic) || globalTheme.getTheme();
   }
   function getThemeFromGroup(graphic) {
     var g;
@@ -6971,12 +6981,12 @@
       }
     }, {
       key: "removeAllChild",
-      value: function removeAllChild() {
+      value: function removeAllChild(deep) {
         if (!this._idMap) return;
         var child = this._firstChild;
         for (; child;) {
           var next = child._next;
-          child.parent = null, child._prev = null, child._next = null, child = next;
+          child.parent = null, child._prev = null, child._next = null, child = child._next, child = next;
         }
         this._firstChild = null, this._lastChild = null, this._idMap.clear(), this._structEdit = !0, this.setCount(1 - this._count);
       }
@@ -11587,7 +11597,8 @@
     }, {
       key: "tryUpdateGlobalAABBBounds",
       value: function tryUpdateGlobalAABBBounds() {
-        return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this.AABBBounds.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
+        var b = this.AABBBounds;
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
     }, {
       key: "tryUpdateGlobalTransMatrix",
@@ -12893,8 +12904,9 @@
     }, {
       key: "removeAllChild",
       value: function removeAllChild() {
+        var deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
         this.forEachChildren(function (child) {
-          application.graphicService.onRemove(child);
+          application.graphicService.onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
         }), _get(_getPrototypeOf(Group.prototype), "removeAllChild", this).call(this), this.addUpdateBoundTag();
       }
     }, {
@@ -16908,11 +16920,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);
       }
@@ -16920,11 +16937,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,
@@ -16933,12 +16950,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,
@@ -16956,14 +16979,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,
@@ -17034,8 +17063,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) {
@@ -18080,11 +18109,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",
@@ -18093,7 +18126,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;
         }
@@ -19008,10 +19045,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,
@@ -19025,8 +19062,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,
@@ -19630,14 +19673,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) {
@@ -19663,11 +19712,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;
@@ -20248,9 +20297,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++) {
@@ -20427,6 +20477,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,
@@ -20435,7 +20486,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,
@@ -22266,7 +22316,7 @@
         var d = context.dpr % 1;
         (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds);
         var drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
-        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.clear(), this.backupDirtyBounds.clear()), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
+        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(function (group) {
@@ -22329,7 +22379,7 @@
         }, subLayers.set(group._uid, incrementalLayer));
         var incrementalContext = incrementalLayer.layer.getNativeHandler().getContext(),
           idc = incrementalLayer.drawContribution || container.get(IncrementalDrawContribution);
-        idc.dirtyBounds.clear(), idc.backupDirtyBounds.clear(), idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), {
+        idc.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), idc.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), {
           drawContribution: idc,
           clear: "transparent",
           layer: incrementalLayer.layer,
@@ -22359,7 +22409,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",
@@ -22398,8 +22448,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",
@@ -23207,6 +23262,8 @@
         var _this = this;
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, function (stage) {
           stage && stage === _this.pluginService.stage && _this.drawHTML(context.stage.renderService);
+        }), application.graphicService.hooks.onRemove.tap(this.key, function (graphic) {
+          _this.removeDom(graphic);
         }), application.graphicService.hooks.onRelease.tap(this.key, function (graphic) {
           _this.removeDom(graphic);
         });
@@ -23263,26 +23320,27 @@
           anchorType = _html$anchorType === void 0 ? "boundsLeftTop" : _html$anchorType;
         graphic.bindDom || (graphic.bindDom = new Map());
         var lastDom = graphic.bindDom.get(dom);
-        if (lastDom && (!container || container === lastDom.container)) return;
-        var nativeDom, nativeContainer;
-        graphic.bindDom.forEach(function (_ref) {
-          var wrapGroup = _ref.wrapGroup;
-          application.global.removeDom(wrapGroup);
-        }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
-        var _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
-        nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer();
-        var wrapGroup = application.global.createDom({
-          tagName: "div",
-          width: width,
-          height: height,
-          style: style,
-          parent: nativeContainer
-        });
-        wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
-          dom: nativeDom,
-          container: container,
-          wrapGroup: wrapGroup
-        })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        var wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+          var nativeDom;
+          graphic.bindDom.forEach(function (_ref) {
+            var wrapGroup = _ref.wrapGroup;
+            application.global.removeDom(wrapGroup);
+          }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
+          var _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
+          nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
+            tagName: "div",
+            width: width,
+            height: height,
+            style: style,
+            parent: nativeContainer
+          }), wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
+            dom: nativeDom,
+            container: container,
+            wrapGroup: wrapGroup
+          }));
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         var left = 0,
           top = 0;
         var b = graphic.globalAABBBounds;
@@ -26011,13 +26069,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,
@@ -35035,7 +35099,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.17.23-alpha.1";
+  const version = "0.17.24-alpha.2";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);