@visactor/vrender 0.20.3-alpha.0 → 0.20.4

package/cjs/index.d.ts

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

package/cjs/index.js

@@ -21,17 +21,16 @@ 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.20.3-alpha.0", (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)(), 
-(0, vrender_kits_2.registerCircle)(), (0, vrender_kits_2.registerGlyph)(), (0, vrender_kits_2.registerGroup)(), 
-(0, vrender_kits_2.registerImage)(), (0, vrender_kits_2.registerLine)(), (0, vrender_kits_2.registerPath)(), 
-(0, vrender_kits_2.registerPolygon)(), (0, vrender_kits_2.registerPyramid3d)(), 
-(0, vrender_kits_2.registerRect)(), (0, vrender_kits_2.registerRect3d)(), (0, vrender_kits_2.registerRichtext)(), 
-(0, vrender_kits_2.registerShadowRoot)(), (0, vrender_kits_2.registerSymbol)(), 
-(0, vrender_kits_2.registerText)(), (0, vrender_kits_2.registerWrapText)(), (0, 
-vrender_core_1.registerFlexLayoutPlugin)(), (0, vrender_core_1.registerViewTransform3dPlugin)(), 
+exports.version = "0.20.4", (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)(), (0, vrender_kits_2.registerCircle)(), 
+(0, vrender_kits_2.registerGlyph)(), (0, vrender_kits_2.registerGroup)(), (0, vrender_kits_2.registerImage)(), 
+(0, vrender_kits_2.registerLine)(), (0, vrender_kits_2.registerPath)(), (0, vrender_kits_2.registerPolygon)(), 
+(0, vrender_kits_2.registerPyramid3d)(), (0, vrender_kits_2.registerRect)(), (0, 
+vrender_kits_2.registerRect3d)(), (0, vrender_kits_2.registerRichtext)(), (0, vrender_kits_2.registerShadowRoot)(), 
+(0, vrender_kits_2.registerSymbol)(), (0, vrender_kits_2.registerText)(), (0, vrender_kits_2.registerWrapText)(), 
+(0, vrender_core_1.registerFlexLayoutPlugin)(), (0, vrender_core_1.registerViewTransform3dPlugin)(), 
 (0, vrender_core_1.registerHtmlAttributePlugin)(), (0, vrender_core_1.registerReactAttributePlugin)(), 
 (0, vrender_core_1.registerDirectionalLight)(), (0, vrender_core_1.registerOrthoCamera)(), 
 __exportStar(require("@visactor/vrender-core"), exports), __exportStar(require("@visactor/vrender-kits"), exports);

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAExC,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;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} 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.20.3-alpha.0\";\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();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kCAAgC;AAChC,yDAWgC;AAChC,yDAAqE;AACrE,yDAmBgC;AAEnB,QAAA,OAAO,GAAG,QAAQ,CAAC;AAEhC,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;AAEnB,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,4CAA6B,GAAE,CAAC;AAChC,IAAA,0CAA2B,GAAE,CAAC;AAC9B,IAAA,2CAA4B,GAAE,CAAC;AAC/B,IAAA,uCAAwB,GAAE,CAAC;AAC3B,IAAA,kCAAmB,GAAE,CAAC;AACtB,yDAAuC;AACvC,yDAAuC","file":"index.js","sourcesContent":["import '@visactor/vrender-core';\nimport {\n  container,\n  isBrowserEnv,\n  isNodeEnv,\n  preLoadAllModule,\n  registerFlexLayoutPlugin,\n  registerViewTransform3dPlugin,\n  registerHtmlAttributePlugin,\n  registerReactAttributePlugin,\n  registerDirectionalLight,\n  registerOrthoCamera\n} 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.20.4\";\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();\n\nregisterFlexLayoutPlugin();\nregisterViewTransform3dPlugin();\nregisterHtmlAttributePlugin();\nregisterReactAttributePlugin();\nregisterDirectionalLight();\nregisterOrthoCamera();\nexport * from '@visactor/vrender-core';\nexport * from '@visactor/vrender-kits';\n"]}

package/dist/index.es.js

@@ -8780,7 +8780,9 @@ const parseShadowChildAttrs = graphicAttrs => {
     if (children.length) shadowRoot.setTheme({
       [children[0].type]: childAttrs
     }), children.forEach(element => {
-      shadowRoot.appendChild(element);
+      element.setAttributes({
+        pickable: !1
+      }), shadowRoot.appendChild(element);
     });else {
       const box = graphic.AABBBounds,
         width = box.width(),
@@ -8792,7 +8794,8 @@ const parseShadowChildAttrs = graphicAttrs => {
           x: 0,
           y: 0,
           width: width,
-          height: height
+          height: height,
+          pickable: !1
         });
         shadowRoot.appendChild(child), children.push(child);
       });
@@ -9180,7 +9183,7 @@ class Graphic extends Node {
     return this._transMatrix || (this._transMatrix = new Matrix()), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
   }
   shouldUpdateAABBBounds() {
-    return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
+    return this.shadowRoot ? (!!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
   }
   shouldSelfChangeUpdateAABBBounds() {
     return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
@@ -14225,7 +14228,6 @@ class Circle extends Graphic {
     return getTheme(this).circle;
   }
   updateAABBBounds(attribute, circleTheme, aabbBounds, full) {
-    if (!application.graphicService.validCheck(attribute, circleTheme, aabbBounds, this)) return aabbBounds;
     this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds) : this.updateCircleAABBBoundsAccurate(attribute, circleTheme, aabbBounds));
     const {
       tb1: tb1,
@@ -14418,7 +14420,6 @@ class Text extends Graphic {
     return getTheme(this).text;
   }
   updateAABBBounds(attribute, textTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, textTheme, aabbBounds, this)) return aabbBounds;
     const {
       text = textTheme.text
     } = this.attribute;
@@ -15527,7 +15528,6 @@ let Symbol$1 = class Symbol extends Graphic {
     return getTheme(this).symbol;
   }
   updateAABBBounds(attribute, symbolTheme, aabbBounds, full) {
-    if (!application.graphicService.validCheck(attribute, symbolTheme, aabbBounds, this)) return aabbBounds;
     this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateSymbolAABBBoundsImprecise(attribute, symbolTheme, aabbBounds) : this.updateSymbolAABBBoundsAccurate(attribute, symbolTheme, aabbBounds));
     const {
       tb1: tb1,
@@ -15605,7 +15605,6 @@ let Line$1 = class Line extends Graphic {
     return getTheme(this).line;
   }
   updateAABBBounds(attribute, lineTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, lineTheme, aabbBounds, this)) return aabbBounds;
     this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
     const {
       lineJoin = lineTheme.lineJoin
@@ -15686,7 +15685,6 @@ class Rect extends Graphic {
     return getTheme(this).rect;
   }
   updateAABBBounds(attribute, rectTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, rectTheme, aabbBounds, this)) return aabbBounds;
     if (!this.updatePathProxyAABBBounds(aabbBounds)) {
       let {
         width: width,
@@ -15864,9 +15862,9 @@ class Glyph extends Graphic {
     return getTheme(this).glyph;
   }
   updateAABBBounds(attribute, theme, aabbBounds) {
-    return application.graphicService.validCheck(attribute, theme, aabbBounds, this) ? (this.getSubGraphic().forEach(node => {
+    return this.getSubGraphic().forEach(node => {
       aabbBounds.union(node.AABBBounds);
-    }), aabbBounds) : aabbBounds;
+    }), aabbBounds;
   }
   doUpdateAABBBounds() {
     this._AABBBounds.clear();
@@ -16190,7 +16188,6 @@ class Image extends Graphic {
     return getTheme(this).image;
   }
   updateAABBBounds(attribute, imageTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, imageTheme, aabbBounds, this)) return aabbBounds;
     if (!this.updatePathProxyAABBBounds(aabbBounds)) {
       const {
         width = imageTheme.width,
@@ -16390,7 +16387,13 @@ class Wrapper {
 const RICHTEXT_UPDATE_TAG_KEY = ["width", "height", "ellipsis", "wordBreak", "verticalDirection", "maxHeight", "maxWidth", "textAlign", "textBaseline", "textConfig", "layoutDirection", "fill", "stroke", "fontSize", ...GRAPHIC_UPDATE_TAG_KEY];
 class RichText extends Graphic {
   constructor(params) {
-    super(params), this.type = "richtext", this._currentHoverIcon = null, this.numberType = RICHTEXT_NUMBER_TYPE;
+    super(params), this.type = "richtext", this._currentHoverIcon = null, this.numberType = RICHTEXT_NUMBER_TYPE, this.onBeforeAttributeUpdate = (val, attributes, key) => {
+      for (const key in val) if ("hoverIconId" === key) {
+        if (val[key] === attributes[key]) continue;
+        const icon = this._frameCache.icons.get(val[key]);
+        this.updateHoverIconState(icon);
+      }
+    };
   }
   get width() {
     var _a;
@@ -16464,7 +16467,6 @@ class RichText extends Graphic {
     return getTheme(this).richtext;
   }
   updateAABBBounds(attribute, richtextTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, richtextTheme, aabbBounds, this)) return aabbBounds;
     const {
       width = richtextTheme.width,
       height = richtextTheme.height,
@@ -16562,8 +16564,9 @@ class RichText extends Graphic {
       paragraphs = [],
       textConfig = null != tc ? tc : _tc;
     for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
-      const config = this.combinedStyleToCharacter(textConfig[i]),
-        iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
+      const config = this.combinedStyleToCharacter(textConfig[i]);
+      config.lineWidth = void 0;
+      const iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
       if (iconCache) paragraphs.push(iconCache);else {
         const icon = new RichTextIcon(config);
         icon.successCallback = () => {
@@ -16613,14 +16616,16 @@ class RichText extends Graphic {
   }
   bindIconEvent() {
     this.addEventListener("pointermove", e => {
-      var _a, _b, _c, _d, _e;
       const pickedIcon = this.pickIcon(e.global);
-      pickedIcon && pickedIcon === this._currentHoverIcon || (pickedIcon ? (null === (_a = this._currentHoverIcon) || void 0 === _a || _a.setHoverState(!1), this._currentHoverIcon = pickedIcon, this._currentHoverIcon.setHoverState(!0), null === (_b = this.stage) || void 0 === _b || _b.setCursor(pickedIcon.attribute.cursor), null === (_c = this.stage) || void 0 === _c || _c.renderNextFrame()) : !pickedIcon && this._currentHoverIcon && (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_d = this.stage) || void 0 === _d || _d.setCursor(), null === (_e = this.stage) || void 0 === _e || _e.renderNextFrame()));
+      pickedIcon && pickedIcon === this._currentHoverIcon || (pickedIcon ? this.setAttribute("hoverIconId", pickedIcon.richtextId) : !pickedIcon && this._currentHoverIcon && this.setAttribute("hoverIconId", void 0));
     }), this.addEventListener("pointerleave", e => {
-      var _a, _b;
-      this._currentHoverIcon && (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_a = this.stage) || void 0 === _a || _a.setCursor(), null === (_b = this.stage) || void 0 === _b || _b.renderNextFrame());
+      this._currentHoverIcon && this.setAttribute("hoverIconId", void 0);
     });
   }
+  updateHoverIconState(pickedIcon) {
+    var _a, _b, _c, _d, _e;
+    pickedIcon ? (null === (_a = this._currentHoverIcon) || void 0 === _a || _a.setHoverState(!1), this._currentHoverIcon = pickedIcon, this._currentHoverIcon.setHoverState(!0), null === (_b = this.stage) || void 0 === _b || _b.setCursor(pickedIcon.attribute.cursor), null === (_c = this.stage) || void 0 === _c || _c.renderNextFrame()) : (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_d = this.stage) || void 0 === _d || _d.setCursor(), null === (_e = this.stage) || void 0 === _e || _e.renderNextFrame());
+  }
   pickIcon(point) {
     const frameCache = this.getFrameCache(),
       {
@@ -16628,7 +16633,7 @@ class RichText extends Graphic {
         f: y
       } = this.globalTransMatrix;
     let pickIcon;
-    return frameCache.icons.forEach(icon => {
+    return frameCache.icons.forEach((icon, key) => {
       var _a, _b;
       const bounds = icon.AABBBounds.clone();
       bounds.translate(icon._marginArray[3], icon._marginArray[0]), bounds.containsPoint({
@@ -16681,7 +16686,6 @@ class Path extends Graphic {
     return getTheme(this).path;
   }
   updateAABBBounds(attribute, pathTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, pathTheme, aabbBounds, this)) return aabbBounds;
     if (!this.updatePathProxyAABBBounds(aabbBounds)) {
       const pathShape = this.getParsedPathShape();
       aabbBounds.union(pathShape.getBounds());
@@ -16747,7 +16751,6 @@ class Area extends Graphic {
     return getTheme(this).area;
   }
   updateAABBBounds(attribute, areaTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, areaTheme, aabbBounds, this)) return aabbBounds;
     this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
     const {
       lineJoin = areaTheme.lineJoin
@@ -16948,7 +16951,6 @@ class Arc extends Graphic {
     return getTheme(this).arc;
   }
   updateAABBBounds(attribute, arcTheme, aabbBounds, full) {
-    if (!application.graphicService.validCheck(attribute, arcTheme, aabbBounds, this)) return aabbBounds;
     this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds) : this.updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds));
     const {
       tb1: tb1,
@@ -17081,7 +17083,6 @@ class Polygon extends Graphic {
     return getTheme(this).polygon;
   }
   updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, polygonTheme, aabbBounds, this)) return aabbBounds;
     this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
     const {
       lineJoin = polygonTheme.lineJoin
@@ -17222,6 +17223,9 @@ class ShadowRoot extends Group {
       y: 0
     }), this.type = "shadowroot", this.shadowHost = graphic;
   }
+  clearUpdateBoundTag() {
+    super.clearUpdateBoundTag(), this.shadowHost && this.shadowHost.clearUpdateBoundTag();
+  }
   addUpdateBoundTag() {
     super.addUpdateBoundTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
   }
@@ -18283,7 +18287,8 @@ class Stage extends Group {
     });
   }
   pauseRender() {
-    this._skipRender = -1;
+    let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    this._skipRender = sr;
   }
   resumeRender() {
     this._skipRender = 0;
@@ -18533,7 +18538,7 @@ class Stage extends Group {
       "virtual" === l.layerMode && (l = l.getNativeHandler().mainHandler.layer), list.includes(l) || list.push(l);
     }
     list.forEach(layer => {
-      layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer.render({
+      layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer === this.interactiveLayer && this.dirtyBounds && this.dirtyBounds.clear(), layer.render({
         renderService: this.renderService,
         background: layer === this.defaultLayer ? this.background : void 0,
         updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
@@ -18542,14 +18547,14 @@ class Stage extends Group {
       }, Object.assign({
         renderStyle: this.renderStyle
       }, params)));
-    }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
+    }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && (this.dirtyBounds && this.dirtyBounds.clear(), this.interactiveLayer.render({
       renderService: this.renderService,
       updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
       viewBox: this.window.getViewBox(),
       transMatrix: this.window.getViewBoxTransform()
     }, Object.assign({
       renderStyle: this.renderStyle
-    }, params));
+    }, params)));
   }
   resizeWindow(w, h) {
     let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -18590,8 +18595,7 @@ class Stage extends Group {
   }
   pick(x, y) {
     if ("released" === this.releaseStatus) return;
-    this.pickerService || (this.pickerService = container.get(PickerService));
-    const result = this.pickerService.pick(this.children, new Point(x, y), {
+    const result = this.getPickerService().pick(this.children, new Point(x, y), {
       bounds: this.AABBBounds
     });
     return !(!(null == result ? void 0 : result.graphic) && !(null == result ? void 0 : result.group)) && result;
@@ -18676,6 +18680,9 @@ class Stage extends Group {
   resumeTriggerEvent() {
     this._eventSystem && this._eventSystem.resumeTriggerEvent();
   }
+  getPickerService() {
+    return this.pickerService || (this.pickerService = container.get(PickerService)), this.pickerService;
+  }
 }
 
 function createStage(params) {
@@ -28278,7 +28285,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.20.3-alpha.0";
+const version = "0.20.4";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);

package/dist/index.js

@@ -8786,7 +8786,9 @@
         if (children.length) shadowRoot.setTheme({
           [children[0].type]: childAttrs
         }), children.forEach(element => {
-          shadowRoot.appendChild(element);
+          element.setAttributes({
+            pickable: !1
+          }), shadowRoot.appendChild(element);
         });else {
           const box = graphic.AABBBounds,
             width = box.width(),
@@ -8798,7 +8800,8 @@
               x: 0,
               y: 0,
               width: width,
-              height: height
+              height: height,
+              pickable: !1
             });
             shadowRoot.appendChild(child), children.push(child);
           });
@@ -9186,7 +9189,7 @@
         return this._transMatrix || (this._transMatrix = new Matrix()), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
       }
       shouldUpdateAABBBounds() {
-        return this.shadowRoot ? !!(this._updateTag & exports.UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & exports.UpdateTag.UPDATE_BOUNDS);
+        return this.shadowRoot ? (!!(this._updateTag & exports.UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & exports.UpdateTag.UPDATE_BOUNDS) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
       }
       shouldSelfChangeUpdateAABBBounds() {
         return this.shadowRoot ? !!(this._updateTag & exports.UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & exports.UpdateTag.UPDATE_BOUNDS);
@@ -14231,7 +14234,6 @@
         return getTheme(this).circle;
       }
       updateAABBBounds(attribute, circleTheme, aabbBounds, full) {
-        if (!application.graphicService.validCheck(attribute, circleTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds) : this.updateCircleAABBBoundsAccurate(attribute, circleTheme, aabbBounds));
         const {
           tb1: tb1,
@@ -14424,7 +14426,6 @@
         return getTheme(this).text;
       }
       updateAABBBounds(attribute, textTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, textTheme, aabbBounds, this)) return aabbBounds;
         const {
           text = textTheme.text
         } = this.attribute;
@@ -15533,7 +15534,6 @@
         return getTheme(this).symbol;
       }
       updateAABBBounds(attribute, symbolTheme, aabbBounds, full) {
-        if (!application.graphicService.validCheck(attribute, symbolTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateSymbolAABBBoundsImprecise(attribute, symbolTheme, aabbBounds) : this.updateSymbolAABBBoundsAccurate(attribute, symbolTheme, aabbBounds));
         const {
           tb1: tb1,
@@ -15611,7 +15611,6 @@
         return getTheme(this).line;
       }
       updateAABBBounds(attribute, lineTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, lineTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
         const {
           lineJoin = lineTheme.lineJoin
@@ -15692,7 +15691,6 @@
         return getTheme(this).rect;
       }
       updateAABBBounds(attribute, rectTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, rectTheme, aabbBounds, this)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds)) {
           let {
             width: width,
@@ -15870,9 +15868,9 @@
         return getTheme(this).glyph;
       }
       updateAABBBounds(attribute, theme, aabbBounds) {
-        return application.graphicService.validCheck(attribute, theme, aabbBounds, this) ? (this.getSubGraphic().forEach(node => {
+        return this.getSubGraphic().forEach(node => {
           aabbBounds.union(node.AABBBounds);
-        }), aabbBounds) : aabbBounds;
+        }), aabbBounds;
       }
       doUpdateAABBBounds() {
         this._AABBBounds.clear();
@@ -16196,7 +16194,6 @@
         return getTheme(this).image;
       }
       updateAABBBounds(attribute, imageTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, imageTheme, aabbBounds, this)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds)) {
           const {
             width = imageTheme.width,
@@ -16396,7 +16393,13 @@
     const RICHTEXT_UPDATE_TAG_KEY = ["width", "height", "ellipsis", "wordBreak", "verticalDirection", "maxHeight", "maxWidth", "textAlign", "textBaseline", "textConfig", "layoutDirection", "fill", "stroke", "fontSize", ...GRAPHIC_UPDATE_TAG_KEY];
     class RichText extends Graphic {
       constructor(params) {
-        super(params), this.type = "richtext", this._currentHoverIcon = null, this.numberType = RICHTEXT_NUMBER_TYPE;
+        super(params), this.type = "richtext", this._currentHoverIcon = null, this.numberType = RICHTEXT_NUMBER_TYPE, this.onBeforeAttributeUpdate = (val, attributes, key) => {
+          for (const key in val) if ("hoverIconId" === key) {
+            if (val[key] === attributes[key]) continue;
+            const icon = this._frameCache.icons.get(val[key]);
+            this.updateHoverIconState(icon);
+          }
+        };
       }
       get width() {
         var _a;
@@ -16470,7 +16473,6 @@
         return getTheme(this).richtext;
       }
       updateAABBBounds(attribute, richtextTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, richtextTheme, aabbBounds, this)) return aabbBounds;
         const {
           width = richtextTheme.width,
           height = richtextTheme.height,
@@ -16568,8 +16570,9 @@
           paragraphs = [],
           textConfig = null != tc ? tc : _tc;
         for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
-          const config = this.combinedStyleToCharacter(textConfig[i]),
-            iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
+          const config = this.combinedStyleToCharacter(textConfig[i]);
+          config.lineWidth = void 0;
+          const iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
           if (iconCache) paragraphs.push(iconCache);else {
             const icon = new RichTextIcon(config);
             icon.successCallback = () => {
@@ -16619,14 +16622,16 @@
       }
       bindIconEvent() {
         this.addEventListener("pointermove", e => {
-          var _a, _b, _c, _d, _e;
           const pickedIcon = this.pickIcon(e.global);
-          pickedIcon && pickedIcon === this._currentHoverIcon || (pickedIcon ? (null === (_a = this._currentHoverIcon) || void 0 === _a || _a.setHoverState(!1), this._currentHoverIcon = pickedIcon, this._currentHoverIcon.setHoverState(!0), null === (_b = this.stage) || void 0 === _b || _b.setCursor(pickedIcon.attribute.cursor), null === (_c = this.stage) || void 0 === _c || _c.renderNextFrame()) : !pickedIcon && this._currentHoverIcon && (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_d = this.stage) || void 0 === _d || _d.setCursor(), null === (_e = this.stage) || void 0 === _e || _e.renderNextFrame()));
+          pickedIcon && pickedIcon === this._currentHoverIcon || (pickedIcon ? this.setAttribute("hoverIconId", pickedIcon.richtextId) : !pickedIcon && this._currentHoverIcon && this.setAttribute("hoverIconId", void 0));
         }), this.addEventListener("pointerleave", e => {
-          var _a, _b;
-          this._currentHoverIcon && (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_a = this.stage) || void 0 === _a || _a.setCursor(), null === (_b = this.stage) || void 0 === _b || _b.renderNextFrame());
+          this._currentHoverIcon && this.setAttribute("hoverIconId", void 0);
         });
       }
+      updateHoverIconState(pickedIcon) {
+        var _a, _b, _c, _d, _e;
+        pickedIcon ? (null === (_a = this._currentHoverIcon) || void 0 === _a || _a.setHoverState(!1), this._currentHoverIcon = pickedIcon, this._currentHoverIcon.setHoverState(!0), null === (_b = this.stage) || void 0 === _b || _b.setCursor(pickedIcon.attribute.cursor), null === (_c = this.stage) || void 0 === _c || _c.renderNextFrame()) : (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_d = this.stage) || void 0 === _d || _d.setCursor(), null === (_e = this.stage) || void 0 === _e || _e.renderNextFrame());
+      }
       pickIcon(point) {
         const frameCache = this.getFrameCache(),
           {
@@ -16634,7 +16639,7 @@
             f: y
           } = this.globalTransMatrix;
         let pickIcon;
-        return frameCache.icons.forEach(icon => {
+        return frameCache.icons.forEach((icon, key) => {
           var _a, _b;
           const bounds = icon.AABBBounds.clone();
           bounds.translate(icon._marginArray[3], icon._marginArray[0]), bounds.containsPoint({
@@ -16687,7 +16692,6 @@
         return getTheme(this).path;
       }
       updateAABBBounds(attribute, pathTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, pathTheme, aabbBounds, this)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds)) {
           const pathShape = this.getParsedPathShape();
           aabbBounds.union(pathShape.getBounds());
@@ -16753,7 +16757,6 @@
         return getTheme(this).area;
       }
       updateAABBBounds(attribute, areaTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, areaTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
         const {
           lineJoin = areaTheme.lineJoin
@@ -16954,7 +16957,6 @@
         return getTheme(this).arc;
       }
       updateAABBBounds(attribute, arcTheme, aabbBounds, full) {
-        if (!application.graphicService.validCheck(attribute, arcTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds) : this.updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds));
         const {
           tb1: tb1,
@@ -17087,7 +17089,6 @@
         return getTheme(this).polygon;
       }
       updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, polygonTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
         const {
           lineJoin = polygonTheme.lineJoin
@@ -17228,6 +17229,9 @@
           y: 0
         }), this.type = "shadowroot", this.shadowHost = graphic;
       }
+      clearUpdateBoundTag() {
+        super.clearUpdateBoundTag(), this.shadowHost && this.shadowHost.clearUpdateBoundTag();
+      }
       addUpdateBoundTag() {
         super.addUpdateBoundTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
       }
@@ -18289,7 +18293,8 @@
         });
       }
       pauseRender() {
-        this._skipRender = -1;
+        let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+        this._skipRender = sr;
       }
       resumeRender() {
         this._skipRender = 0;
@@ -18539,7 +18544,7 @@
           "virtual" === l.layerMode && (l = l.getNativeHandler().mainHandler.layer), list.includes(l) || list.push(l);
         }
         list.forEach(layer => {
-          layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer.render({
+          layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer === this.interactiveLayer && this.dirtyBounds && this.dirtyBounds.clear(), layer.render({
             renderService: this.renderService,
             background: layer === this.defaultLayer ? this.background : void 0,
             updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
@@ -18548,14 +18553,14 @@
           }, Object.assign({
             renderStyle: this.renderStyle
           }, params)));
-        }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
+        }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && (this.dirtyBounds && this.dirtyBounds.clear(), this.interactiveLayer.render({
           renderService: this.renderService,
           updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
           viewBox: this.window.getViewBox(),
           transMatrix: this.window.getViewBoxTransform()
         }, Object.assign({
           renderStyle: this.renderStyle
-        }, params));
+        }, params)));
       }
       resizeWindow(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -18596,8 +18601,7 @@
       }
       pick(x, y) {
         if ("released" === this.releaseStatus) return;
-        this.pickerService || (this.pickerService = container.get(PickerService));
-        const result = this.pickerService.pick(this.children, new Point(x, y), {
+        const result = this.getPickerService().pick(this.children, new Point(x, y), {
           bounds: this.AABBBounds
         });
         return !(!(null == result ? void 0 : result.graphic) && !(null == result ? void 0 : result.group)) && result;
@@ -18682,6 +18686,9 @@
       resumeTriggerEvent() {
         this._eventSystem && this._eventSystem.resumeTriggerEvent();
       }
+      getPickerService() {
+        return this.pickerService || (this.pickerService = container.get(PickerService)), this.pickerService;
+      }
     }
 
     function createStage(params) {
@@ -28284,7 +28291,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.20.3-alpha.0";
+    const version = "0.20.4";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);