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

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/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): {