@visactor/vrender 0.20.3 → 0.20.5

package/cjs/index.d.ts

@@ -1,4 +1,4 @@
 import '@visactor/vrender-core';
-export declare const version = "0.20.3";
+export declare const version = "0.20.5";
 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.20.3", (0, vrender_core_1.preLoadAllModule)(), (0, vrender_core_1.isBrowserEnv)() ? (0, 
+exports.version = "0.20.5", (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)(), 

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,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.3\";\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.5\";\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

@@ -2549,7 +2549,7 @@ class BoundsContext {
     this.bounds.add(cx + xmin, cy + ymin), this.bounds.add(cx + xmax, cy + ymax);
   }
   arcTo(x1, y1, x2, y2, radius) {
-    throw new Error("不支持arcTo");
+    this.bounds.add(x1, y1);
   }
   bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
     this.bounds.add(cp1x, cp1y), this.bounds.add(cp2x, cp2y), this.bounds.add(x, y);
@@ -2758,19 +2758,25 @@ function drawArc(context, x, y, coords) {
 }
 const addArcToBezierPath$1 = (bezierPath, startAngle, endAngle, cx, cy, rx, ry) => {
   const delta = Math.abs(endAngle - startAngle),
-    len = 4 * Math.tan(delta / 4) / 3,
-    dir = endAngle < startAngle ? -1 : 1,
-    c1 = Math.cos(startAngle),
-    s1 = Math.sin(startAngle),
-    c2 = Math.cos(endAngle),
-    s2 = Math.sin(endAngle),
-    x1 = c1 * rx + cx,
-    y1 = s1 * ry + cy,
-    x4 = c2 * rx + cx,
-    y4 = s2 * ry + cy,
-    hx = rx * len * dir,
-    hy = ry * len * dir;
-  bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+    count = delta > .5 * Math.PI ? Math.ceil(2 * delta / Math.PI) : 1,
+    stepAngle = (endAngle - startAngle) / count;
+  for (let i = 0; i < count; i++) {
+    const sa = startAngle + stepAngle * i,
+      ea = startAngle + stepAngle * (i + 1),
+      len = 4 * Math.tan(Math.abs(stepAngle) / 4) / 3,
+      dir = ea < sa ? -1 : 1,
+      c1 = Math.cos(sa),
+      s1 = Math.sin(sa),
+      c2 = Math.cos(ea),
+      s2 = Math.sin(ea),
+      x1 = c1 * rx + cx,
+      y1 = s1 * ry + cy,
+      x4 = c2 * rx + cx,
+      y4 = s2 * ry + cy,
+      hx = rx * len * dir,
+      hy = ry * len * dir;
+    bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+  }
 };
 
 const commandFuncs = [(command, context, x, y, sx, sy, z) => context.arc(command[1] * sx + x, command[2] * sy + y, command[3] * (sx + sy) / 2, command[4], command[5], command[6], z), (command, context, x, y, sx, sy, z) => context.arcTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * (sx + sy) / 2, z), (command, context, x, y, sx, sy, z) => context.bezierCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * sx + x, command[6] * sy + y, z), (command, context, x, y) => context.closePath(), (command, context, x, y, sx, sy) => context.ellipse(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, command[5], command[6], command[7], command[8]), (command, context, x, y, sx, sy, z) => context.lineTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.moveTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.quadraticCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, z), (command, context, x, y, sx, sy, z) => context.rect(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, z)];
@@ -11237,6 +11243,7 @@ let DefaultGraphicService = class {
   validCheck(attribute, theme, aabbBounds, graphic) {
     if (!graphic) return !0;
     if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
+    if (graphic.shadowRoot) return !0;
     if (!graphic.valid) return aabbBounds.clear(), !1;
     const {
       visible = theme.visible
@@ -14383,13 +14390,23 @@ class Text extends Graphic {
     if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
   }
   get cliped() {
+    var _a, _b;
     const textTheme = this.getGraphicTheme(),
-      attribute = this.attribute;
-    if (this.isMultiLine) return;
-    const {
-      maxLineWidth = textTheme.maxLineWidth
-    } = attribute;
-    return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString());
+      attribute = this.attribute,
+      {
+        maxLineWidth = textTheme.maxLineWidth,
+        text: text,
+        whiteSpace = textTheme.whiteSpace
+      } = attribute;
+    if (!Number.isFinite(maxLineWidth)) return !1;
+    if (this.tryUpdateAABBBounds(), null === (_b = null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData) || void 0 === _b ? void 0 : _b.lines) {
+      let mergedText = "";
+      this.cache.layoutData.lines.forEach(item => {
+        mergedText += item.str;
+      });
+      return (Array.isArray(text) ? text.join("") : text) !== mergedText;
+    }
+    return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
   }
   get multilineLayout() {
     if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
@@ -16290,10 +16307,22 @@ class Line {
   }
   draw(ctx, lastLine, x, y, drawEllipsis, drawIcon) {
     if (drawEllipsis && (lastLine || this.paragraphs.some(p => p.overflow))) {
-      let otherParagraphWidth = 0;
+      let emptyOverflow = !0,
+        skipEllipsis = !1;
       for (let i = this.paragraphs.length - 1; i >= 0; i--) {
         const paragraph = this.paragraphs[i];
-        if (paragraph.overflow) continue;
+        if (paragraph.overflow) emptyOverflow = emptyOverflow && "" === paragraph.text;else if (emptyOverflow) {
+          skipEllipsis = !0;
+          break;
+        }
+      }
+      let otherParagraphWidth = 0;
+      if (!skipEllipsis) for (let i = this.paragraphs.length - 1; i >= 0; i--) {
+        const paragraph = this.paragraphs[i];
+        if (paragraph.overflow) {
+          if ("" === paragraph.text) break;
+          continue;
+        }
         if (paragraph instanceof RichTextIcon) break;
         if ("vertical" === this.direction && "vertical" !== paragraph.direction) {
           paragraph.verticalEllipsis = !0;
@@ -16387,7 +16416,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;
@@ -16512,6 +16547,21 @@ class RichText extends Graphic {
   getFrameCache() {
     return this.shouldUpdateShape() && (this.doUpdateFrameCache(), this.clearUpdateShapeTag()), this._frameCache;
   }
+  get cliped() {
+    const frameCache = this.getFrameCache();
+    if (frameCache.actualHeight > frameCache.height) return !0;
+    const {
+      disableAutoWrapLine: disableAutoWrapLine
+    } = this.attribute;
+    if (disableAutoWrapLine) for (let i = 0; i < frameCache.lines.length; i++) {
+      const l = frameCache.lines[i];
+      for (let j = 0; j < l.paragraphs.length; j++) {
+        const p = l.paragraphs[j];
+        if (p.overflow && "" !== p.text) return !0;
+      }
+    }
+    return !1;
+  }
   combinedStyleToCharacter(config) {
     const {
       fill: fill,
@@ -16558,8 +16608,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 = () => {
@@ -16609,14 +16660,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(),
       {
@@ -16624,7 +16677,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({
@@ -18278,7 +18331,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;
@@ -18585,8 +18639,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;
@@ -18671,6 +18724,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) {
@@ -28273,7 +28329,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.20.3";
+const version = "0.20.5";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);

package/dist/index.js

@@ -2555,7 +2555,7 @@
         this.bounds.add(cx + xmin, cy + ymin), this.bounds.add(cx + xmax, cy + ymax);
       }
       arcTo(x1, y1, x2, y2, radius) {
-        throw new Error("不支持arcTo");
+        this.bounds.add(x1, y1);
       }
       bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
         this.bounds.add(cp1x, cp1y), this.bounds.add(cp2x, cp2y), this.bounds.add(x, y);
@@ -2764,19 +2764,25 @@
     }
     const addArcToBezierPath$1 = (bezierPath, startAngle, endAngle, cx, cy, rx, ry) => {
       const delta = Math.abs(endAngle - startAngle),
-        len = 4 * Math.tan(delta / 4) / 3,
-        dir = endAngle < startAngle ? -1 : 1,
-        c1 = Math.cos(startAngle),
-        s1 = Math.sin(startAngle),
-        c2 = Math.cos(endAngle),
-        s2 = Math.sin(endAngle),
-        x1 = c1 * rx + cx,
-        y1 = s1 * ry + cy,
-        x4 = c2 * rx + cx,
-        y4 = s2 * ry + cy,
-        hx = rx * len * dir,
-        hy = ry * len * dir;
-      bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+        count = delta > .5 * Math.PI ? Math.ceil(2 * delta / Math.PI) : 1,
+        stepAngle = (endAngle - startAngle) / count;
+      for (let i = 0; i < count; i++) {
+        const sa = startAngle + stepAngle * i,
+          ea = startAngle + stepAngle * (i + 1),
+          len = 4 * Math.tan(Math.abs(stepAngle) / 4) / 3,
+          dir = ea < sa ? -1 : 1,
+          c1 = Math.cos(sa),
+          s1 = Math.sin(sa),
+          c2 = Math.cos(ea),
+          s2 = Math.sin(ea),
+          x1 = c1 * rx + cx,
+          y1 = s1 * ry + cy,
+          x4 = c2 * rx + cx,
+          y4 = s2 * ry + cy,
+          hx = rx * len * dir,
+          hy = ry * len * dir;
+        bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+      }
     };
 
     const commandFuncs = [(command, context, x, y, sx, sy, z) => context.arc(command[1] * sx + x, command[2] * sy + y, command[3] * (sx + sy) / 2, command[4], command[5], command[6], z), (command, context, x, y, sx, sy, z) => context.arcTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * (sx + sy) / 2, z), (command, context, x, y, sx, sy, z) => context.bezierCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * sx + x, command[6] * sy + y, z), (command, context, x, y) => context.closePath(), (command, context, x, y, sx, sy) => context.ellipse(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, command[5], command[6], command[7], command[8]), (command, context, x, y, sx, sy, z) => context.lineTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.moveTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.quadraticCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, z), (command, context, x, y, sx, sy, z) => context.rect(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, z)];
@@ -11243,6 +11249,7 @@
       validCheck(attribute, theme, aabbBounds, graphic) {
         if (!graphic) return !0;
         if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
+        if (graphic.shadowRoot) return !0;
         if (!graphic.valid) return aabbBounds.clear(), !1;
         const {
           visible = theme.visible
@@ -14389,13 +14396,23 @@
         if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
       }
       get cliped() {
+        var _a, _b;
         const textTheme = this.getGraphicTheme(),
-          attribute = this.attribute;
-        if (this.isMultiLine) return;
-        const {
-          maxLineWidth = textTheme.maxLineWidth
-        } = attribute;
-        return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString());
+          attribute = this.attribute,
+          {
+            maxLineWidth = textTheme.maxLineWidth,
+            text: text,
+            whiteSpace = textTheme.whiteSpace
+          } = attribute;
+        if (!Number.isFinite(maxLineWidth)) return !1;
+        if (this.tryUpdateAABBBounds(), null === (_b = null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData) || void 0 === _b ? void 0 : _b.lines) {
+          let mergedText = "";
+          this.cache.layoutData.lines.forEach(item => {
+            mergedText += item.str;
+          });
+          return (Array.isArray(text) ? text.join("") : text) !== mergedText;
+        }
+        return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
       }
       get multilineLayout() {
         if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
@@ -16296,10 +16313,22 @@
       }
       draw(ctx, lastLine, x, y, drawEllipsis, drawIcon) {
         if (drawEllipsis && (lastLine || this.paragraphs.some(p => p.overflow))) {
-          let otherParagraphWidth = 0;
+          let emptyOverflow = !0,
+            skipEllipsis = !1;
           for (let i = this.paragraphs.length - 1; i >= 0; i--) {
             const paragraph = this.paragraphs[i];
-            if (paragraph.overflow) continue;
+            if (paragraph.overflow) emptyOverflow = emptyOverflow && "" === paragraph.text;else if (emptyOverflow) {
+              skipEllipsis = !0;
+              break;
+            }
+          }
+          let otherParagraphWidth = 0;
+          if (!skipEllipsis) for (let i = this.paragraphs.length - 1; i >= 0; i--) {
+            const paragraph = this.paragraphs[i];
+            if (paragraph.overflow) {
+              if ("" === paragraph.text) break;
+              continue;
+            }
             if (paragraph instanceof RichTextIcon) break;
             if ("vertical" === this.direction && "vertical" !== paragraph.direction) {
               paragraph.verticalEllipsis = !0;
@@ -16393,7 +16422,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;
@@ -16518,6 +16553,21 @@
       getFrameCache() {
         return this.shouldUpdateShape() && (this.doUpdateFrameCache(), this.clearUpdateShapeTag()), this._frameCache;
       }
+      get cliped() {
+        const frameCache = this.getFrameCache();
+        if (frameCache.actualHeight > frameCache.height) return !0;
+        const {
+          disableAutoWrapLine: disableAutoWrapLine
+        } = this.attribute;
+        if (disableAutoWrapLine) for (let i = 0; i < frameCache.lines.length; i++) {
+          const l = frameCache.lines[i];
+          for (let j = 0; j < l.paragraphs.length; j++) {
+            const p = l.paragraphs[j];
+            if (p.overflow && "" !== p.text) return !0;
+          }
+        }
+        return !1;
+      }
       combinedStyleToCharacter(config) {
         const {
           fill: fill,
@@ -16564,8 +16614,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 = () => {
@@ -16615,14 +16666,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(),
           {
@@ -16630,7 +16683,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({
@@ -18284,7 +18337,8 @@
         });
       }
       pauseRender() {
-        this._skipRender = -1;
+        let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+        this._skipRender = sr;
       }
       resumeRender() {
         this._skipRender = 0;
@@ -18591,8 +18645,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;
@@ -18677,6 +18730,9 @@
       resumeTriggerEvent() {
         this._eventSystem && this._eventSystem.resumeTriggerEvent();
       }
+      getPickerService() {
+        return this.pickerService || (this.pickerService = container.get(PickerService)), this.pickerService;
+      }
     }
 
     function createStage(params) {
@@ -28279,7 +28335,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.20.3";
+    const version = "0.20.5";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);