zrender-nightly 5.6.2-dev.20250624 → 5.6.2-dev.20250625

package/lib/graphic/helper/parseText.js

@@ -1,6 +1,7 @@
 import * as imageHelper from '../helper/image.js';
-import { extend, retrieve2, retrieve3, reduce } from '../../core/util.js';
-import { getLineHeight, getWidth, parsePercent } from '../../contain/text.js';
+import { extend, retrieve2, retrieve3, reduce, } from '../../core/util.js';
+import { adjustTextX, adjustTextY, ensureFontMeasureInfo, getLineHeight, measureCharWidth, measureWidth, parsePercent, } from '../../contain/text.js';
+import BoundingRect from '../../core/BoundingRect.js';
 var STYLE_REG = /\{([a-zA-Z0-9_]+)\|([^}]*)\}/g;
 export function truncateText(text, containerWidth, font, ellipsis, options) {
     var out = {};
@@ -28,18 +29,17 @@ function truncateText2(out, text, containerWidth, font, ellipsis, options) {
 function prepareTruncateOptions(containerWidth, font, ellipsis, options) {
     options = options || {};
     var preparedOpts = extend({}, options);
-    preparedOpts.font = font;
     ellipsis = retrieve2(ellipsis, '...');
     preparedOpts.maxIterations = retrieve2(options.maxIterations, 2);
     var minChar = preparedOpts.minChar = retrieve2(options.minChar, 0);
-    preparedOpts.cnCharWidth = getWidth('国', font);
-    var ascCharWidth = preparedOpts.ascCharWidth = getWidth('a', font);
+    var fontMeasureInfo = preparedOpts.fontMeasureInfo = ensureFontMeasureInfo(font);
+    var ascCharWidth = fontMeasureInfo.asciiCharWidth;
     preparedOpts.placeholder = retrieve2(options.placeholder, '');
     var contentWidth = containerWidth = Math.max(0, containerWidth - 1);
     for (var i = 0; i < minChar && contentWidth >= ascCharWidth; i++) {
         contentWidth -= ascCharWidth;
     }
-    var ellipsisWidth = getWidth(ellipsis, font);
+    var ellipsisWidth = measureWidth(fontMeasureInfo, ellipsis);
     if (ellipsisWidth > contentWidth) {
         ellipsis = '';
         ellipsisWidth = 0;
@@ -53,14 +53,14 @@ function prepareTruncateOptions(containerWidth, font, ellipsis, options) {
 }
 function truncateSingleLine(out, textLine, options) {
     var containerWidth = options.containerWidth;
-    var font = options.font;
     var contentWidth = options.contentWidth;
+    var fontMeasureInfo = options.fontMeasureInfo;
     if (!containerWidth) {
         out.textLine = '';
         out.isTruncated = false;
         return;
     }
-    var lineWidth = getWidth(textLine, font);
+    var lineWidth = measureWidth(fontMeasureInfo, textLine);
     if (lineWidth <= containerWidth) {
         out.textLine = textLine;
         out.isTruncated = false;
@@ -72,12 +72,12 @@ function truncateSingleLine(out, textLine, options) {
             break;
         }
         var subLength = j === 0
-            ? estimateLength(textLine, contentWidth, options.ascCharWidth, options.cnCharWidth)
+            ? estimateLength(textLine, contentWidth, fontMeasureInfo)
             : lineWidth > 0
                 ? Math.floor(textLine.length * contentWidth / lineWidth)
                 : 0;
         textLine = textLine.substr(0, subLength);
-        lineWidth = getWidth(textLine, font);
+        lineWidth = measureWidth(fontMeasureInfo, textLine);
     }
     if (textLine === '') {
         textLine = options.placeholder;
@@ -85,27 +85,34 @@ function truncateSingleLine(out, textLine, options) {
     out.textLine = textLine;
     out.isTruncated = true;
 }
-function estimateLength(text, contentWidth, ascCharWidth, cnCharWidth) {
+function estimateLength(text, contentWidth, fontMeasureInfo) {
     var width = 0;
     var i = 0;
     for (var len = text.length; i < len && width < contentWidth; i++) {
-        var charCode = text.charCodeAt(i);
-        width += (0 <= charCode && charCode <= 127) ? ascCharWidth : cnCharWidth;
+        width += measureCharWidth(fontMeasureInfo, text.charCodeAt(i));
     }
     return i;
 }
-export function parsePlainText(text, style) {
+export function parsePlainText(text, style, defaultOuterWidth, defaultOuterHeight) {
     text != null && (text += '');
     var overflow = style.overflow;
     var padding = style.padding;
+    var paddingH = padding ? padding[1] + padding[3] : 0;
+    var paddingV = padding ? padding[0] + padding[2] : 0;
     var font = style.font;
     var truncate = overflow === 'truncate';
     var calculatedLineHeight = getLineHeight(font);
     var lineHeight = retrieve2(style.lineHeight, calculatedLineHeight);
-    var bgColorDrawn = !!(style.backgroundColor);
     var truncateLineOverflow = style.lineOverflow === 'truncate';
     var isTruncated = false;
     var width = style.width;
+    if (width == null && defaultOuterWidth != null) {
+        width = defaultOuterWidth - paddingH;
+    }
+    var height = style.height;
+    if (height == null && defaultOuterHeight != null) {
+        height = defaultOuterHeight - paddingV;
+    }
     var lines;
     if (width != null && (overflow === 'break' || overflow === 'breakAll')) {
         lines = text ? wrapText(text, style.font, width, overflow === 'breakAll', 0).lines : [];
@@ -114,11 +121,14 @@ export function parsePlainText(text, style) {
         lines = text ? text.split('\n') : [];
     }
     var contentHeight = lines.length * lineHeight;
-    var height = retrieve2(style.height, contentHeight);
+    if (height == null) {
+        height = contentHeight;
+    }
     if (contentHeight > height && truncateLineOverflow) {
         var lineCount = Math.floor(height / lineHeight);
         isTruncated = isTruncated || (lines.length > lineCount);
         lines = lines.slice(0, lineCount);
+        contentHeight = lines.length * lineHeight;
     }
     if (text && truncate && width != null) {
         var options = prepareTruncateOptions(width, font, style.ellipsis, {
@@ -134,21 +144,16 @@ export function parsePlainText(text, style) {
     }
     var outerHeight = height;
     var contentWidth = 0;
+    var fontMeasureInfo = ensureFontMeasureInfo(font);
     for (var i = 0; i < lines.length; i++) {
-        contentWidth = Math.max(getWidth(lines[i], font), contentWidth);
+        contentWidth = Math.max(measureWidth(fontMeasureInfo, lines[i]), contentWidth);
     }
     if (width == null) {
         width = contentWidth;
     }
-    var outerWidth = contentWidth;
-    if (padding) {
-        outerHeight += padding[0] + padding[2];
-        outerWidth += padding[1] + padding[3];
-        width += padding[1] + padding[3];
-    }
-    if (bgColorDrawn) {
-        outerWidth = width;
-    }
+    var outerWidth = width;
+    outerHeight += paddingV;
+    outerWidth += paddingH;
     return {
         lines: lines,
         height: height,
@@ -190,14 +195,23 @@ var RichTextContentBlock = (function () {
     return RichTextContentBlock;
 }());
 export { RichTextContentBlock };
-export function parseRichText(text, style) {
+export function parseRichText(text, style, defaultOuterWidth, defaultOuterHeight, topTextAlign) {
     var contentBlock = new RichTextContentBlock();
     text != null && (text += '');
     if (!text) {
         return contentBlock;
     }
+    var stlPadding = style.padding;
+    var stlPaddingH = stlPadding ? stlPadding[1] + stlPadding[3] : 0;
+    var stlPaddingV = stlPadding ? stlPadding[0] + stlPadding[2] : 0;
     var topWidth = style.width;
+    if (topWidth == null && defaultOuterWidth != null) {
+        topWidth = defaultOuterWidth - stlPaddingH;
+    }
     var topHeight = style.height;
+    if (topHeight == null && defaultOuterHeight != null) {
+        topHeight = defaultOuterHeight - stlPaddingV;
+    }
     var overflow = style.overflow;
     var wrapInfo = (overflow === 'break' || overflow === 'breakAll') && topWidth != null
         ? { width: topWidth, accumWidth: 0, breakAll: overflow === 'breakAll' }
@@ -218,7 +232,6 @@ export function parseRichText(text, style) {
     var pendingList = [];
     var calculatedHeight = 0;
     var calculatedWidth = 0;
-    var stlPadding = style.padding;
     var truncate = overflow === 'truncate';
     var truncateLine = style.lineOverflow === 'truncate';
     var tmpTruncateOut = {};
@@ -244,7 +257,7 @@ export function parseRichText(text, style) {
             textPadding && (tokenHeight += textPadding[0] + textPadding[2]);
             token.height = tokenHeight;
             token.lineHeight = retrieve3(tokenStyle.lineHeight, style.lineHeight, tokenHeight);
-            token.align = tokenStyle && tokenStyle.align || style.align;
+            token.align = tokenStyle && tokenStyle.align || topTextAlign;
             token.verticalAlign = tokenStyle && tokenStyle.verticalAlign || 'middle';
             if (truncateLine && topHeight != null && calculatedHeight + token.lineHeight > topHeight) {
                 var originalLength = contentBlock.lines.length;
@@ -264,7 +277,7 @@ export function parseRichText(text, style) {
             if (typeof styleTokenWidth === 'string' && styleTokenWidth.charAt(styleTokenWidth.length - 1) === '%') {
                 token.percentWidth = styleTokenWidth;
                 pendingList.push(token);
-                token.contentWidth = getWidth(token.text, font);
+                token.contentWidth = measureWidth(ensureFontMeasureInfo(font), token.text);
             }
             else {
                 if (tokenWidthNotSpecified) {
@@ -288,11 +301,11 @@ export function parseRichText(text, style) {
                         truncateText2(tmpTruncateOut, token.text, remainTruncWidth - paddingH, font, style.ellipsis, { minChar: style.truncateMinChar });
                         token.text = tmpTruncateOut.text;
                         contentBlock.isTruncated = contentBlock.isTruncated || tmpTruncateOut.isTruncated;
-                        token.width = token.contentWidth = getWidth(token.text, font);
+                        token.width = token.contentWidth = measureWidth(ensureFontMeasureInfo(font), token.text);
                     }
                 }
                 else {
-                    token.contentWidth = getWidth(token.text, font);
+                    token.contentWidth = measureWidth(ensureFontMeasureInfo(font), token.text);
                 }
             }
             token.width += paddingH;
@@ -305,10 +318,8 @@ export function parseRichText(text, style) {
     contentBlock.outerHeight = contentBlock.height = retrieve2(topHeight, calculatedHeight);
     contentBlock.contentHeight = calculatedHeight;
     contentBlock.contentWidth = calculatedWidth;
-    if (stlPadding) {
-        contentBlock.outerWidth += stlPadding[1] + stlPadding[3];
-        contentBlock.outerHeight += stlPadding[0] + stlPadding[2];
-    }
+    contentBlock.outerWidth += stlPaddingH;
+    contentBlock.outerHeight += stlPaddingV;
     for (var i = 0; i < pendingList.length; i++) {
         var token = pendingList[i];
         var percentWidth = token.percentWidth;
@@ -344,9 +355,10 @@ function pushTokens(block, str, style, wrapInfo, styleName) {
             strLines = res.lines;
         }
     }
-    else {
+    if (!strLines) {
         strLines = str.split('\n');
     }
+    var fontMeasureInfo = ensureFontMeasureInfo(font);
     for (var i = 0; i < strLines.length; i++) {
         var text = strLines[i];
         var token = new RichTextToken();
@@ -359,7 +371,7 @@ function pushTokens(block, str, style, wrapInfo, styleName) {
         else {
             token.width = linesWidths
                 ? linesWidths[i]
-                : getWidth(text, font);
+                : measureWidth(fontMeasureInfo, text);
         }
         if (!i && !newLine) {
             var tokens = (lines[lines.length - 1] || (lines[0] = new RichTextLine())).tokens;
@@ -400,6 +412,7 @@ function wrapText(text, font, lineWidth, isBreakAll, lastAccumWidth) {
     var currentWord = '';
     var currentWordWidth = 0;
     var accumWidth = 0;
+    var fontMeasureInfo = ensureFontMeasureInfo(font);
     for (var i = 0; i < text.length; i++) {
         var ch = text.charAt(i);
         if (ch === '\n') {
@@ -415,7 +428,7 @@ function wrapText(text, font, lineWidth, isBreakAll, lastAccumWidth) {
             accumWidth = 0;
             continue;
         }
-        var chWidth = getWidth(ch, font);
+        var chWidth = measureCharWidth(fontMeasureInfo, ch.charCodeAt(0));
         var inWord = isBreakAll ? false : !isWordBreakChar(ch);
         if (!lines.length
             ? lastAccumWidth + accumWidth + chWidth > lineWidth
@@ -475,11 +488,6 @@ function wrapText(text, font, lineWidth, isBreakAll, lastAccumWidth) {
             line += ch;
         }
     }
-    if (!lines.length && !line) {
-        line = text;
-        currentWord = '';
-        currentWordWidth = 0;
-    }
     if (currentWord) {
         line += currentWord;
     }
@@ -496,3 +504,22 @@ function wrapText(text, font, lineWidth, isBreakAll, lastAccumWidth) {
         linesWidths: linesWidths
     };
 }
+export function calcInnerTextOverflowArea(out, overflowRect, baseX, baseY, textAlign, textVerticalAlign) {
+    out.baseX = baseX;
+    out.baseY = baseY;
+    out.outerWidth = out.outerHeight = null;
+    if (!overflowRect) {
+        return;
+    }
+    var textWidth = overflowRect.width * 2;
+    var textHeight = overflowRect.height * 2;
+    BoundingRect.set(tmpCITCTextRect, adjustTextX(baseX, textWidth, textAlign), adjustTextY(baseY, textHeight, textVerticalAlign), textWidth, textHeight);
+    BoundingRect.intersect(overflowRect, tmpCITCTextRect, null, tmpCITCIntersectRectOpt);
+    var outIntersectRect = tmpCITCIntersectRectOpt.outIntersectRect;
+    out.outerWidth = outIntersectRect.width;
+    out.outerHeight = outIntersectRect.height;
+    out.baseX = adjustTextX(outIntersectRect.x, outIntersectRect.width, textAlign, true);
+    out.baseY = adjustTextY(outIntersectRect.y, outIntersectRect.height, textVerticalAlign, true);
+}
+var tmpCITCTextRect = new BoundingRect(0, 0, 0, 0);
+var tmpCITCIntersectRectOpt = { outIntersectRect: {}, clamp: true };

package/lib/svg-legacy/helper/ClippathManager.js

@@ -1,6 +1,5 @@
 import { __extends } from "tslib";
 import Definable from './Definable.js';
-import * as zrUtil from '../../core/util.js';
 import { path } from '../graphic.js';
 import { isClipPathChanged } from '../../canvas/helper.js';
 import { getClipPathsKey, getIdURL } from '../../svg/helper.js';
@@ -89,13 +88,14 @@ var ClippathManager = (function (_super) {
     };
     ;
     ClippathManager.prototype.markUsed = function (displayable) {
-        var _this = this;
-        if (displayable.__clipPaths) {
-            zrUtil.each(displayable.__clipPaths, function (clipPath) {
+        var clipPaths = displayable.__clipPaths;
+        if (clipPaths) {
+            for (var idx = 0; idx < clipPaths.length; idx++) {
+                var clipPath = clipPaths[idx];
                 if (clipPath._dom) {
-                    _super.prototype.markDomUsed.call(_this, clipPath._dom);
+                    _super.prototype.markDomUsed.call(this, clipPath._dom);
                 }
-            });
+            }
         }
     };
     ;

package/lib/tool/color.d.ts

@@ -15,7 +15,7 @@ declare type LerpFullOutput = {
 export declare function lerp(normalizedValue: number, colors: string[], fullOutput: boolean): LerpFullOutput;
 export declare function lerp(normalizedValue: number, colors: string[]): string;
 export declare const mapToColor: typeof lerp;
-export declare function modifyHSL(color: string, h?: number, s?: number, l?: number): string;
+export declare function modifyHSL(color: string, h?: number | ((h: number) => number), s?: number | string | ((s: number) => number), l?: number | string | ((l: number) => number)): string;
 export declare function modifyAlpha(color: string, alpha?: number): string;
 export declare function stringify(arrColor: number[], type: string): string;
 export declare function lum(color: string, backgroundLum: number): number;

package/lib/tool/color.js

@@ -1,5 +1,5 @@
 import LRU from '../core/LRU.js';
-import { extend, isGradientObject, isString, map } from '../core/util.js';
+import { extend, isFunction, isGradientObject, isString, map } from '../core/util.js';
 var kCSSColorTable = {
     'transparent': [0, 0, 0, 0], 'aliceblue': [240, 248, 255, 1],
     'antiquewhite': [250, 235, 215, 1], 'aqua': [0, 255, 255, 1],
@@ -370,9 +370,9 @@ export function modifyHSL(color, h, s, l) {
     var colorArr = parse(color);
     if (color) {
         colorArr = rgba2hsla(colorArr);
-        h != null && (colorArr[0] = clampCssAngle(h));
-        s != null && (colorArr[1] = parseCssFloat(s));
-        l != null && (colorArr[2] = parseCssFloat(l));
+        h != null && (colorArr[0] = clampCssAngle(isFunction(h) ? h(colorArr[0]) : h));
+        s != null && (colorArr[1] = parseCssFloat(isFunction(s) ? s(colorArr[1]) : s));
+        l != null && (colorArr[2] = parseCssFloat(isFunction(l) ? l(colorArr[2]) : l));
         return stringify(hsla2rgba(colorArr), 'rgba');
     }
 }

package/lib/tool/path.js

@@ -290,16 +290,19 @@ function createPathOptions(str, opts) {
     var pathProxy = createPathProxyFromString(str);
     var innerOpts = extend({}, opts);
     innerOpts.buildPath = function (path) {
-        if (isPathProxy(path)) {
-            path.setData(pathProxy.data);
+        var beProxy = isPathProxy(path);
+        if (beProxy && path.canSave()) {
+            path.appendPath(pathProxy);
             var ctx = path.getContext();
             if (ctx) {
                 path.rebuildPath(ctx, 1);
             }
         }
         else {
-            var ctx = path;
-            pathProxy.rebuildPath(ctx, 1);
+            var ctx = beProxy ? path.getContext() : path;
+            if (ctx) {
+                pathProxy.rebuildPath(ctx, 1);
+            }
         }
     };
     innerOpts.applyTransform = function (m) {

package/lib/zrender.d.ts

@@ -90,7 +90,7 @@ export declare type ElementSSRData = zrUtil.HashMap<unknown>;
 export declare type ElementSSRDataGetter<T> = (el: Element) => zrUtil.HashMap<T>;
 export declare function getElementSSRData(el: Element): ElementSSRData;
 export declare function registerSSRDataGetter<T>(getter: ElementSSRDataGetter<T>): void;
-export declare const version = "5.6.2-dev.20250624";
+export declare const version = "5.6.2-dev.20250625";
 export interface ZRenderType extends ZRender {
 }
 export {};

package/lib/zrender.js

@@ -324,5 +324,5 @@ export function getElementSSRData(el) {
 export function registerSSRDataGetter(getter) {
     ssrDataGetter = getter;
 }
-export var version = '5.6.2-dev.20250624';
+export var version = '5.6.2-dev.20250625';
 ;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zrender-nightly",
-  "version": "5.6.2-dev.20250624",
+  "version": "5.6.2-dev.20250625",
   "description": "A lightweight graphic library providing 2d draw for Apache ECharts",
   "keywords": [
     "canvas",
@@ -25,7 +25,8 @@
     "watch:bundle": "node build/build.js --watch",
     "watch:lib": "npx tsc-watch -m ES2015 --outDir lib --synchronousWatchDirectory --onSuccess \"node build/processLib.js\"",
     "test": "npx jest --config test/ut/jest.config.js",
-    "lint": "npx eslint src/**/*.ts"
+    "lint": "npx eslint src/**/*.ts",
+    "checktype": "tsc --noEmit"
   },
   "license": "BSD-3-Clause",
   "types": "index.d.ts",

package/src/Element.ts

@@ -31,6 +31,7 @@ import Point from './core/Point';
 import { LIGHT_LABEL_COLOR, DARK_LABEL_COLOR } from './config';
 import { parse, stringify } from './tool/color';
 import { REDRAW_BIT } from './graphic/constants';
+import { invert } from './core/matrix';
 
 export interface ElementAnimateConfig {
     duration?: number
@@ -81,7 +82,11 @@ export interface ElementTextConfig {
 
     /**
      * Rect that text will be positioned.
-     * Default to be the rect of element.
+     * Default to be the boundingRect of the host element.
+     * The coords of `layoutRect` is based on the target element, but not global.
+     *
+     * [NOTICE]: boundingRect includes `lineWidth`, which is inconsistent with
+     *  the general element placement principle, where `lineWidth` is not counted.
      */
     layoutRect?: RectLike
 
@@ -109,6 +114,10 @@ export interface ElementTextConfig {
 
     /**
      * If use local user space. Which will apply host's transform
+     *
+     * [NOTICE]: If the host element may rotate to non-parallel to screen x/y,
+     *  need to use `local:true`, otherwise the transformed layout rect may not be expected.
+     *
      * @default false
      */
     local?: boolean
@@ -166,6 +175,16 @@ export interface ElementTextConfig {
      * In case position is not using builtin `inside` hints.
      */
     inside?: boolean
+
+    /**
+     * Auto calculate overflow area by `textConfig.layoutRect` (if any) or `host.boundingRect`.
+     * It makes sense only if label is inside. It ensure the text does not overflow the host.
+     * Useful in `text.style.overflow` and `text.style.lineOverflow`.
+     *
+     * If `textConfig.rotation` or `text.rotation exists`, it works correctly only when the rotated text is parallel
+     * to its host (i.e. 0, PI/2, PI, PI*3/2, 2*PI, ...). Do not supported other cases until a real scenario arises.
+     */
+    autoOverflowArea?: boolean
 }
 export interface ElementTextGuideLineConfig {
     /**
@@ -238,6 +257,7 @@ export interface ElementProps extends Partial<ElementEventHandlerProps>, Partial
     draggable?: boolean | 'horizontal' | 'vertical'
 
     silent?: boolean
+    ignoreHostSilent?: boolean
 
     ignoreClip?: boolean
     globalScaleRatio?: number
@@ -277,8 +297,9 @@ export type ElementCalculateTextPosition = (
     rect: RectLike
 ) => TextPositionCalculationResult;
 
-let tmpTextPosCalcRes = {} as TextPositionCalculationResult;
-let tmpBoundingRect = new BoundingRect(0, 0, 0, 0);
+const tmpTextPosCalcRes = {} as TextPositionCalculationResult;
+const tmpBoundingRect = new BoundingRect(0, 0, 0, 0);
+const tmpInnerTextTrans: number[] = [];
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface Element<Props extends ElementProps = ElementProps> extends Transformable,
@@ -313,6 +334,14 @@ class Element<Props extends ElementProps = ElementProps> {
      */
     silent: boolean
 
+    /**
+     * When this element has `__hostTarget` (e.g., this is a `textContent`), whether
+     * its silent is controlled by that host silent. They may need separate silent
+     * settings. e.g., the host do not have `fill` but only `stroke`, or their mouse
+     * events serve for different features.
+     */
+    ignoreHostSilent: boolean
+
     /**
      * 是否是 Group
      */
@@ -368,6 +397,8 @@ class Element<Props extends ElementProps = ElementProps> {
      */
     __inHover: boolean
 
+    __clipPaths?: Path[]
+
     /**
      * path to clip the elements and its children, if it is a group.
      * @see http://www.w3.org/TR/2dcontext/#clipping-region
@@ -511,9 +542,12 @@ class Element<Props extends ElementProps = ElementProps> {
             // Reset x/y/rotation
             innerTransformable.copyTransform(textEl);
 
-            // Force set attached text's position if `position` is in config.
-            if (textConfig.position != null) {
-                let layoutRect = tmpBoundingRect;
+            const hasPosition = textConfig.position != null;
+            const autoOverflowArea = textConfig.autoOverflowArea;
+
+            let layoutRect: BoundingRect;
+            if (autoOverflowArea || hasPosition) {
+                layoutRect = tmpBoundingRect;
                 if (textConfig.layoutRect) {
                     layoutRect.copy(textConfig.layoutRect);
                 }
@@ -523,7 +557,10 @@ class Element<Props extends ElementProps = ElementProps> {
                 if (!isLocal) {
                     layoutRect.applyTransform(this.transform);
                 }
+            }
 
+            // Force set attached text's position if `position` is in config.
+            if (hasPosition) {
                 if (this.calculateTextPosition) {
                     this.calculateTextPosition(tmpTextPosCalcRes, textConfig, layoutRect);
                 }
@@ -578,11 +615,27 @@ class Element<Props extends ElementProps = ElementProps> {
                 }
             }
 
+            const innerTextDefaultStyle = this._innerTextDefaultStyle || (this._innerTextDefaultStyle = {});
+
+            if (autoOverflowArea) {
+                const overflowRect = innerTextDefaultStyle.overflowRect =
+                    innerTextDefaultStyle.overflowRect || new BoundingRect(0, 0, 0, 0);
+                innerTransformable.getLocalTransform(tmpInnerTextTrans);
+                invert(tmpInnerTextTrans, tmpInnerTextTrans);
+                BoundingRect.copy(overflowRect, layoutRect);
+                // If transform to a non-orthogonal state (e.g. rotate PI/3), the result of this "apply"
+                // is not expected. But we don't need to address it until a real scenario arises.
+                overflowRect.applyTransform(tmpInnerTextTrans);
+            }
+            else {
+                innerTextDefaultStyle.overflowRect = null;
+            }
+            // [CAUTION] Do not change `innerTransformable` below.
+
             // Calculate text color
             const isInside = textConfig.inside == null  // Force to be inside or not.
                 ? (typeof textConfig.position === 'string' && textConfig.position.indexOf('inside') >= 0)
                 : textConfig.inside;
-            const innerTextDefaultStyle = this._innerTextDefaultStyle || (this._innerTextDefaultStyle = {});
 
             let textFill;
             let textStroke;
@@ -1021,16 +1074,16 @@ class Element<Props extends ElementProps = ElementProps> {
      * Return if el.silent or any ancestor element has silent true.
      */
     isSilent() {
-        let isSilent = this.silent;
-        let ancestor = this.parent;
-        while (!isSilent && ancestor) {
-            if (ancestor.silent) {
-                isSilent = true;
-                break;
+        // Follow the logic of `Handler.ts`#`isHover`.
+        let el: Element = this;
+        while (el) {
+            if (el.silent) {
+                return true;
             }
-            ancestor = ancestor.parent;
+            const hostEl = el.__hostTarget;
+            el = hostEl ? (el.ignoreHostSilent ? null : hostEl) : el.parent;
         }
-        return isSilent;
+        return false;
     }
 
     /**
@@ -1637,6 +1690,7 @@ class Element<Props extends ElementProps = ElementProps> {
 
         elProto.ignore =
         elProto.silent =
+        elProto.ignoreHostSilent =
         elProto.isGroup =
         elProto.draggable =
         elProto.dragging =
@@ -2026,5 +2080,4 @@ function animateToShallow<T>(
     }
 }
 
-
 export default Element;

package/src/Handler.ts

@@ -504,7 +504,7 @@ function isHover(displayable: Displayable, x: number, y: number) {
             // Consider when el is textContent, also need to be silent
             // if any of its host el and its ancestors is silent.
             const hostEl = el.__hostTarget;
-            el = hostEl ? hostEl : el.parent;
+            el = hostEl ? (el.ignoreHostSilent ? null : hostEl) : el.parent;
         }
         return isSilent ? SILENT : true;
     }