zrender-nightly 5.7.0-dev.20250620 → 5.7.0-dev.20250622

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;
     }

package/src/Storage.ts

@@ -8,6 +8,7 @@ import timsort from './core/timsort';
 import Displayable from './graphic/Displayable';
 import Path from './graphic/Path';
 import { REDRAW_BIT } from './graphic/constants';
+import { NullUndefined } from './core/types';
 
 let invalidZErrorLogged = false;
 function logInvalidZError() {
@@ -83,7 +84,7 @@ export default class Storage {
 
     private _updateAndAddDisplayable(
         el: Element,
-        clipPaths: Path[],
+        parentClipPaths: Path[] | NullUndefined,
         includeIgnore?: boolean
     ) {
         if (el.ignore && !includeIgnore) {
@@ -95,18 +96,21 @@ export default class Storage {
         el.afterUpdate();
 
         const userSetClipPath = el.getClipPath();
-
-        if (el.ignoreClip) {
-            clipPaths = null;
-        }
-        else if (userSetClipPath) {
-
-            // FIXME 效率影响
-            if (clipPaths) {
-                clipPaths = clipPaths.slice();
+        const parentHasClipPaths = parentClipPaths && parentClipPaths.length;
+        let clipPathIdx = 0;
+        let thisClipPaths = el.__clipPaths;
+
+        if (!el.ignoreClip
+            && (parentHasClipPaths || userSetClipPath)
+        ) { // has clipPath in this pass
+            if (!thisClipPaths) {
+                thisClipPaths = el.__clipPaths = [];
             }
-            else {
-                clipPaths = [];
+            if (parentHasClipPaths) {
+                // PENDING: performance?
+                for (let idx = 0; idx < parentClipPaths.length; idx++) {
+                    thisClipPaths[clipPathIdx++] = parentClipPaths[idx];
+                }
             }
 
             let currentClipPath = userSetClipPath;
@@ -118,13 +122,17 @@ export default class Storage {
                 currentClipPath.parent = parentClipPath as Group;
                 currentClipPath.updateTransform();
 
-                clipPaths.push(currentClipPath);
+                thisClipPaths[clipPathIdx++] = currentClipPath;
 
                 parentClipPath = currentClipPath;
                 currentClipPath = currentClipPath.getClipPath();
             }
         }
 
+        if (thisClipPaths) { // Remove other old clipPath in array.
+            thisClipPaths.length = clipPathIdx;
+        }
+
         // ZRText and Group and combining morphing Path may use children
         if ((el as GroupLike).childrenRef) {
             const children = (el as GroupLike).childrenRef();
@@ -137,7 +145,7 @@ export default class Storage {
                     child.__dirty |= REDRAW_BIT;
                 }
 
-                this._updateAndAddDisplayable(child, clipPaths, includeIgnore);
+                this._updateAndAddDisplayable(child, thisClipPaths, includeIgnore);
             }
 
             // Mark group clean here
@@ -146,13 +154,6 @@ export default class Storage {
         }
         else {
             const disp = el as Displayable;
-            // Element is displayable
-            if (clipPaths && clipPaths.length) {
-                disp.__clipPaths = clipPaths;
-            }
-            else if (disp.__clipPaths && disp.__clipPaths.length > 0) {
-                disp.__clipPaths = [];
-            }
 
             // Avoid invalid z, z2, zlevel cause sorting error.
             if (isNaN(disp.z)) {
@@ -174,18 +175,18 @@ export default class Storage {
         // Add decal
         const decalEl = (el as Path).getDecalElement && (el as Path).getDecalElement();
         if (decalEl) {
-            this._updateAndAddDisplayable(decalEl, clipPaths, includeIgnore);
+            this._updateAndAddDisplayable(decalEl, thisClipPaths, includeIgnore);
         }
 
         // Add attached text element and guide line.
         const textGuide = el.getTextGuideLine();
         if (textGuide) {
-            this._updateAndAddDisplayable(textGuide, clipPaths, includeIgnore);
+            this._updateAndAddDisplayable(textGuide, thisClipPaths, includeIgnore);
         }
 
         const textEl = el.getTextContent();
         if (textEl) {
-            this._updateAndAddDisplayable(textEl, clipPaths, includeIgnore);
+            this._updateAndAddDisplayable(textEl, thisClipPaths, includeIgnore);
         }
     }
 

package/src/canvas/graphic.ts

@@ -152,7 +152,7 @@ function brushPath(ctx: CanvasRenderingContext2D, el: Path, style: PathStyleProp
             strokePattern = (dirtyFlag || !el.__canvasStrokePattern)
                 ? createCanvasPattern(ctx, stroke as ImagePatternObject, el)
                 : el.__canvasStrokePattern;
-            el.__canvasStrokePattern = fillPattern;
+            el.__canvasStrokePattern = strokePattern;
         }
         // Use the gradient or pattern
         if (hasFillGradient) {

package/src/canvas/helper.ts

@@ -82,8 +82,8 @@ export function getCanvasGradient(this: void, ctx: CanvasRenderingContext2D, obj
     return canvasGradient;
 }
 
+// [CAVEAT] Assume the clipPaths array is never modified during a batch of `isClipPathChanged` calling.
 export function isClipPathChanged(clipPaths: Path[], prevClipPaths: Path[]): boolean {
-    // displayable.__clipPaths can only be `null`/`undefined` or an non-empty array.
     if (clipPaths === prevClipPaths || (!clipPaths && !prevClipPaths)) {
         return false;
     }

package/src/contain/text.ts

@@ -1,25 +1,110 @@
 import BoundingRect, { RectLike } from '../core/BoundingRect';
-import { Dictionary, TextAlign, TextVerticalAlign, BuiltinTextPosition } from '../core/types';
+import { TextAlign, TextVerticalAlign, BuiltinTextPosition } from '../core/types';
 import LRU from '../core/LRU';
 import { DEFAULT_FONT, platformApi } from '../core/platform';
 
-let textWidthCache: Dictionary<LRU<number>> = {};
-
+/**
+ * @deprecated But keep for possible outside usage.
+ *  Use `ensureFontMeasureInfo` + `measureWidth` instead.
+ */
 export function getWidth(text: string, font: string): number {
+    return measureWidth(ensureFontMeasureInfo(font), text);
+}
+
+export interface FontMeasureInfo {
+    font: string;
+    strWidthCache: LRU<number>;
+    // Key: char code, index: 0~127 (include 127)
+    asciiWidthMap: number[] | null | undefined;
+    asciiWidthMapTried: boolean;
+    // Default width char width used both in non-ascii and line height.
+    stWideCharWidth: number;
+    // Default asc char width
+    asciiCharWidth: number;
+}
+
+export function ensureFontMeasureInfo(font: string): FontMeasureInfo {
+    if (!_fontMeasureInfoCache) {
+        _fontMeasureInfoCache = new LRU(100);
+    }
     font = font || DEFAULT_FONT;
-    let cacheOfFont = textWidthCache[font];
-    if (!cacheOfFont) {
-        cacheOfFont = textWidthCache[font] = new LRU(500);
+    let measureInfo = _fontMeasureInfoCache.get(font);
+    if (!measureInfo) {
+        measureInfo = {
+            font: font,
+            strWidthCache: new LRU(500),
+            asciiWidthMap: null, // Init lazily for performance.
+            asciiWidthMapTried: false,
+            // FIXME
+            // Other languages?
+            // FIXME
+            // Consider proportional font?
+            stWideCharWidth: platformApi.measureText('国', font).width,
+            asciiCharWidth: platformApi.measureText('a', font).width,
+        };
+        _fontMeasureInfoCache.put(font, measureInfo);
     }
-    let width = cacheOfFont.get(text);
-    if (width == null) {
-        width = platformApi.measureText(text, font).width;
-        cacheOfFont.put(text, width);
+    return measureInfo;
+}
+let _fontMeasureInfoCache: LRU<FontMeasureInfo>;
+
+/**
+ * For getting more precise result in truncate.
+ * non-monospace font vary in char width.
+ * But if it is time consuming in some platform, return null/undefined.
+ * @return Key: char code, index: 0~127 (include 127)
+ */
+function tryCreateASCIIWidthMap(font: string): FontMeasureInfo['asciiWidthMap'] {
+    // PENDING: is it necessary? Re-examine it if bad case reported.
+    if (_getASCIIWidthMapLongCount >= GET_ASCII_WIDTH_LONG_COUNT_MAX) {
+        return;
     }
+    font = font || DEFAULT_FONT;
+    const asciiWidthMap = [];
+    const start = +(new Date());
+    // 0~31 and 127 may also have width, and may vary in some fonts.
+    for (let code = 0; code <= 127; code++) {
+        asciiWidthMap[code] = platformApi.measureText(String.fromCharCode(code), font).width;
+    }
+    const cost = +(new Date()) - start;
+    if (cost > 16) {
+        _getASCIIWidthMapLongCount = GET_ASCII_WIDTH_LONG_COUNT_MAX;
+    }
+    else if (cost > 2) {
+        _getASCIIWidthMapLongCount++;
+    }
+    return asciiWidthMap;
+}
+let _getASCIIWidthMapLongCount: number = 0;
+const GET_ASCII_WIDTH_LONG_COUNT_MAX = 5;
 
+/**
+ * Hot path, performance sensitive.
+ */
+export function measureCharWidth(fontMeasureInfo: FontMeasureInfo, charCode: number): number {
+    if (!fontMeasureInfo.asciiWidthMapTried) {
+        fontMeasureInfo.asciiWidthMap = tryCreateASCIIWidthMap(fontMeasureInfo.font);
+        fontMeasureInfo.asciiWidthMapTried = true;
+    }
+    return (0 <= charCode && charCode <= 127)
+        ? (fontMeasureInfo.asciiWidthMap != null
+            ? fontMeasureInfo.asciiWidthMap[charCode]
+            : fontMeasureInfo.asciiCharWidth
+        )
+        : fontMeasureInfo.stWideCharWidth;
+}
+
+export function measureWidth(fontMeasureInfo: FontMeasureInfo, text: string): number {
+    const strWidthCache = fontMeasureInfo.strWidthCache;
+    let width = strWidthCache.get(text);
+    if (width == null) {
+        width = platformApi.measureText(text, fontMeasureInfo.font).width;
+        strWidthCache.put(text, width);
+    }
     return width;
 }
 
+
 /**
  *
  * Get bounding rect for inner usage(TSpan)
@@ -31,7 +116,7 @@ export function innerGetBoundingRect(
     textAlign?: TextAlign,
     textBaseline?: TextVerticalAlign
 ): BoundingRect {
-    const width = getWidth(text, font);
+    const width = measureWidth(ensureFontMeasureInfo(font), text);
     const height = getLineHeight(font);
 
     const x = adjustTextX(0, width, textAlign);
@@ -68,31 +153,30 @@ export function getBoundingRect(
     }
 }
 
-export function adjustTextX(x: number, width: number, textAlign: TextAlign): number {
+export function adjustTextX(x: number, width: number, textAlign: TextAlign, inverse?: boolean): number {
     // TODO Right to left language
     if (textAlign === 'right') {
-        x -= width;
+        !inverse ? (x -= width) : (x += width);
     }
     else if (textAlign === 'center') {
-        x -= width / 2;
+        !inverse ? (x -= width / 2) : (x += width / 2);
     }
     return x;
 }
 
-export function adjustTextY(y: number, height: number, verticalAlign: TextVerticalAlign): number {
+export function adjustTextY(y: number, height: number, verticalAlign: TextVerticalAlign, inverse?: boolean): number {
     if (verticalAlign === 'middle') {
-        y -= height / 2;
+        !inverse ? (y -= height / 2) : (y += height / 2);
     }
     else if (verticalAlign === 'bottom') {
-        y -= height;
+        !inverse ? (y -= height) : (y += height);
     }
     return y;
 }
 
-
 export function getLineHeight(font?: string): number {
     // FIXME A rough approach.
-    return getWidth('国', font);
+    return ensureFontMeasureInfo(font).stWideCharWidth;
 }
 
 export function measureText(text: string, font?: string): {