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

package/lib/Element.d.ts

@@ -36,6 +36,7 @@ export interface ElementTextConfig {
     outsideFill?: string;
     outsideStroke?: string;
     inside?: boolean;
+    autoOverflowArea?: boolean;
 }
 export interface ElementTextGuideLineConfig {
     anchor?: Point;
@@ -85,6 +86,7 @@ export interface ElementProps extends Partial<ElementEventHandlerProps>, Partial
     isGroup?: boolean;
     draggable?: boolean | 'horizontal' | 'vertical';
     silent?: boolean;
+    ignoreHostSilent?: boolean;
     ignoreClip?: boolean;
     globalScaleRatio?: number;
     textConfig?: ElementTextConfig;
@@ -114,6 +116,7 @@ declare class Element<Props extends ElementProps = ElementProps> {
     name: string;
     ignore: boolean;
     silent: boolean;
+    ignoreHostSilent: boolean;
     isGroup: boolean;
     draggable: boolean | 'horizontal' | 'vertical';
     dragging: boolean;
@@ -125,6 +128,7 @@ declare class Element<Props extends ElementProps = ElementProps> {
     __dirty: number;
     __isRendered: boolean;
     __inHover: boolean;
+    __clipPaths?: Path[];
     private _clipPath?;
     private _textContent?;
     private _textGuide?;

package/lib/Element.js

@@ -7,6 +7,7 @@ import { guid, isObject, keys, extend, indexOf, logError, mixin, isArrayLike, is
 import { LIGHT_LABEL_COLOR, DARK_LABEL_COLOR } from './config.js';
 import { parse, stringify } from './tool/color.js';
 import { REDRAW_BIT } from './graphic/constants.js';
+import { invert } from './core/matrix.js';
 export var PRESERVED_NORMAL_STATE = '__zr_normal__';
 var PRIMARY_STATES_KEYS = TRANSFORMABLE_PROPS.concat(['ignore']);
 var DEFAULT_ANIMATABLE_MAP = reduce(TRANSFORMABLE_PROPS, function (obj, key) {
@@ -15,6 +16,7 @@ var DEFAULT_ANIMATABLE_MAP = reduce(TRANSFORMABLE_PROPS, function (obj, key) {
 }, { ignore: false });
 var tmpTextPosCalcRes = {};
 var tmpBoundingRect = new BoundingRect(0, 0, 0, 0);
+var tmpInnerTextTrans = [];
 var Element = (function () {
     function Element(props) {
         this.id = guid();
@@ -67,8 +69,11 @@ var Element = (function () {
             innerTransformable.parent = isLocal ? this : null;
             var innerOrigin = false;
             innerTransformable.copyTransform(textEl);
-            if (textConfig.position != null) {
-                var layoutRect = tmpBoundingRect;
+            var hasPosition = textConfig.position != null;
+            var autoOverflowArea = textConfig.autoOverflowArea;
+            var layoutRect = void 0;
+            if (autoOverflowArea || hasPosition) {
+                layoutRect = tmpBoundingRect;
                 if (textConfig.layoutRect) {
                     layoutRect.copy(textConfig.layoutRect);
                 }
@@ -78,6 +83,8 @@ var Element = (function () {
                 if (!isLocal) {
                     layoutRect.applyTransform(this.transform);
                 }
+            }
+            if (hasPosition) {
                 if (this.calculateTextPosition) {
                     this.calculateTextPosition(tmpTextPosCalcRes, textConfig, layoutRect);
                 }
@@ -117,10 +124,21 @@ var Element = (function () {
                     innerTransformable.originY = -textOffset[1];
                 }
             }
+            var innerTextDefaultStyle = this._innerTextDefaultStyle || (this._innerTextDefaultStyle = {});
+            if (autoOverflowArea) {
+                var overflowRect = innerTextDefaultStyle.overflowRect =
+                    innerTextDefaultStyle.overflowRect || new BoundingRect(0, 0, 0, 0);
+                innerTransformable.getLocalTransform(tmpInnerTextTrans);
+                invert(tmpInnerTextTrans, tmpInnerTextTrans);
+                BoundingRect.copy(overflowRect, layoutRect);
+                overflowRect.applyTransform(tmpInnerTextTrans);
+            }
+            else {
+                innerTextDefaultStyle.overflowRect = null;
+            }
             var isInside = textConfig.inside == null
                 ? (typeof textConfig.position === 'string' && textConfig.position.indexOf('inside') >= 0)
                 : textConfig.inside;
-            var innerTextDefaultStyle = this._innerTextDefaultStyle || (this._innerTextDefaultStyle = {});
             var textFill = void 0;
             var textStroke = void 0;
             var autoStroke = void 0;
@@ -401,16 +419,15 @@ var Element = (function () {
         }
     };
     Element.prototype.isSilent = function () {
-        var isSilent = this.silent;
-        var ancestor = this.parent;
-        while (!isSilent && ancestor) {
-            if (ancestor.silent) {
-                isSilent = true;
-                break;
+        var el = this;
+        while (el) {
+            if (el.silent) {
+                return true;
             }
-            ancestor = ancestor.parent;
+            var hostEl = el.__hostTarget;
+            el = hostEl ? (el.ignoreHostSilent ? null : hostEl) : el.parent;
         }
-        return isSilent;
+        return false;
     };
     Element.prototype._updateAnimationTargets = function () {
         for (var i = 0; i < this.animators.length; i++) {
@@ -776,11 +793,12 @@ var Element = (function () {
         elProto.name = '';
         elProto.ignore =
             elProto.silent =
-                elProto.isGroup =
-                    elProto.draggable =
-                        elProto.dragging =
-                            elProto.ignoreClip =
-                                elProto.__inHover = false;
+                elProto.ignoreHostSilent =
+                    elProto.isGroup =
+                        elProto.draggable =
+                            elProto.dragging =
+                                elProto.ignoreClip =
+                                    elProto.__inHover = false;
         elProto.__dirty = REDRAW_BIT;
         var logs = {};
         function logDeprecatedError(key, xKey, yKey) {

package/lib/Handler.js

@@ -267,7 +267,7 @@ function isHover(displayable, x, y) {
                 isSilent = true;
             }
             var hostEl = el.__hostTarget;
-            el = hostEl ? hostEl : el.parent;
+            el = hostEl ? (el.ignoreHostSilent ? null : hostEl) : el.parent;
         }
         return isSilent ? SILENT : true;
     }

package/lib/Storage.js

@@ -48,7 +48,7 @@ var Storage = (function () {
         displayList.length = this._displayListLen;
         timsort(displayList, shapeCompareFunc);
     };
-    Storage.prototype._updateAndAddDisplayable = function (el, clipPaths, includeIgnore) {
+    Storage.prototype._updateAndAddDisplayable = function (el, parentClipPaths, includeIgnore) {
         if (el.ignore && !includeIgnore) {
             return;
         }
@@ -56,26 +56,32 @@ var Storage = (function () {
         el.update();
         el.afterUpdate();
         var userSetClipPath = el.getClipPath();
-        if (el.ignoreClip) {
-            clipPaths = null;
-        }
-        else if (userSetClipPath) {
-            if (clipPaths) {
-                clipPaths = clipPaths.slice();
+        var parentHasClipPaths = parentClipPaths && parentClipPaths.length;
+        var clipPathIdx = 0;
+        var thisClipPaths = el.__clipPaths;
+        if (!el.ignoreClip
+            && (parentHasClipPaths || userSetClipPath)) {
+            if (!thisClipPaths) {
+                thisClipPaths = el.__clipPaths = [];
             }
-            else {
-                clipPaths = [];
+            if (parentHasClipPaths) {
+                for (var idx = 0; idx < parentClipPaths.length; idx++) {
+                    thisClipPaths[clipPathIdx++] = parentClipPaths[idx];
+                }
             }
             var currentClipPath = userSetClipPath;
             var parentClipPath = el;
             while (currentClipPath) {
                 currentClipPath.parent = parentClipPath;
                 currentClipPath.updateTransform();
-                clipPaths.push(currentClipPath);
+                thisClipPaths[clipPathIdx++] = currentClipPath;
                 parentClipPath = currentClipPath;
                 currentClipPath = currentClipPath.getClipPath();
             }
         }
+        if (thisClipPaths) {
+            thisClipPaths.length = clipPathIdx;
+        }
         if (el.childrenRef) {
             var children = el.childrenRef();
             for (var i = 0; i < children.length; i++) {
@@ -83,18 +89,12 @@ var Storage = (function () {
                 if (el.__dirty) {
                     child.__dirty |= REDRAW_BIT;
                 }
-                this._updateAndAddDisplayable(child, clipPaths, includeIgnore);
+                this._updateAndAddDisplayable(child, thisClipPaths, includeIgnore);
             }
             el.__dirty = 0;
         }
         else {
             var disp = el;
-            if (clipPaths && clipPaths.length) {
-                disp.__clipPaths = clipPaths;
-            }
-            else if (disp.__clipPaths && disp.__clipPaths.length > 0) {
-                disp.__clipPaths = [];
-            }
             if (isNaN(disp.z)) {
                 logInvalidZError();
                 disp.z = 0;
@@ -111,15 +111,15 @@ var Storage = (function () {
         }
         var decalEl = el.getDecalElement && el.getDecalElement();
         if (decalEl) {
-            this._updateAndAddDisplayable(decalEl, clipPaths, includeIgnore);
+            this._updateAndAddDisplayable(decalEl, thisClipPaths, includeIgnore);
         }
         var textGuide = el.getTextGuideLine();
         if (textGuide) {
-            this._updateAndAddDisplayable(textGuide, clipPaths, includeIgnore);
+            this._updateAndAddDisplayable(textGuide, thisClipPaths, includeIgnore);
         }
         var textEl = el.getTextContent();
         if (textEl) {
-            this._updateAndAddDisplayable(textEl, clipPaths, includeIgnore);
+            this._updateAndAddDisplayable(textEl, thisClipPaths, includeIgnore);
         }
     };
     Storage.prototype.addRoot = function (el) {

package/lib/canvas/graphic.js

@@ -108,7 +108,7 @@ function brushPath(ctx, el, style, inBatch) {
             strokePattern = (dirtyFlag || !el.__canvasStrokePattern)
                 ? createCanvasPattern(ctx, stroke, el)
                 : el.__canvasStrokePattern;
-            el.__canvasStrokePattern = fillPattern;
+            el.__canvasStrokePattern = strokePattern;
         }
         if (hasFillGradient) {
             ctx.fillStyle = fillGradient;

package/lib/contain/text.d.ts

@@ -1,10 +1,22 @@
 import BoundingRect, { RectLike } from '../core/BoundingRect';
 import { TextAlign, TextVerticalAlign, BuiltinTextPosition } from '../core/types';
+import LRU from '../core/LRU';
 export declare function getWidth(text: string, font: string): number;
+export interface FontMeasureInfo {
+    font: string;
+    strWidthCache: LRU<number>;
+    asciiWidthMap: number[] | null | undefined;
+    asciiWidthMapTried: boolean;
+    stWideCharWidth: number;
+    asciiCharWidth: number;
+}
+export declare function ensureFontMeasureInfo(font: string): FontMeasureInfo;
+export declare function measureCharWidth(fontMeasureInfo: FontMeasureInfo, charCode: number): number;
+export declare function measureWidth(fontMeasureInfo: FontMeasureInfo, text: string): number;
 export declare function innerGetBoundingRect(text: string, font: string, textAlign?: TextAlign, textBaseline?: TextVerticalAlign): BoundingRect;
 export declare function getBoundingRect(text: string, font: string, textAlign?: TextAlign, textBaseline?: TextVerticalAlign): BoundingRect;
-export declare function adjustTextX(x: number, width: number, textAlign: TextAlign): number;
-export declare function adjustTextY(y: number, height: number, verticalAlign: TextVerticalAlign): number;
+export declare function adjustTextX(x: number, width: number, textAlign: TextAlign, inverse?: boolean): number;
+export declare function adjustTextY(y: number, height: number, verticalAlign: TextVerticalAlign, inverse?: boolean): number;
 export declare function getLineHeight(font?: string): number;
 export declare function measureText(text: string, font?: string): {
     width: number;

package/lib/contain/text.js

@@ -1,22 +1,72 @@
 import BoundingRect from '../core/BoundingRect.js';
 import LRU from '../core/LRU.js';
 import { DEFAULT_FONT, platformApi } from '../core/platform.js';
-var textWidthCache = {};
 export function getWidth(text, font) {
+    return measureWidth(ensureFontMeasureInfo(font), text);
+}
+export function ensureFontMeasureInfo(font) {
+    if (!_fontMeasureInfoCache) {
+        _fontMeasureInfoCache = new LRU(100);
+    }
+    font = font || DEFAULT_FONT;
+    var measureInfo = _fontMeasureInfoCache.get(font);
+    if (!measureInfo) {
+        measureInfo = {
+            font: font,
+            strWidthCache: new LRU(500),
+            asciiWidthMap: null,
+            asciiWidthMapTried: false,
+            stWideCharWidth: platformApi.measureText('国', font).width,
+            asciiCharWidth: platformApi.measureText('a', font).width
+        };
+        _fontMeasureInfoCache.put(font, measureInfo);
+    }
+    return measureInfo;
+}
+var _fontMeasureInfoCache;
+function tryCreateASCIIWidthMap(font) {
+    if (_getASCIIWidthMapLongCount >= GET_ASCII_WIDTH_LONG_COUNT_MAX) {
+        return;
+    }
     font = font || DEFAULT_FONT;
-    var cacheOfFont = textWidthCache[font];
-    if (!cacheOfFont) {
-        cacheOfFont = textWidthCache[font] = new LRU(500);
+    var asciiWidthMap = [];
+    var start = +(new Date());
+    for (var code = 0; code <= 127; code++) {
+        asciiWidthMap[code] = platformApi.measureText(String.fromCharCode(code), font).width;
     }
-    var width = cacheOfFont.get(text);
+    var cost = +(new Date()) - start;
+    if (cost > 16) {
+        _getASCIIWidthMapLongCount = GET_ASCII_WIDTH_LONG_COUNT_MAX;
+    }
+    else if (cost > 2) {
+        _getASCIIWidthMapLongCount++;
+    }
+    return asciiWidthMap;
+}
+var _getASCIIWidthMapLongCount = 0;
+var GET_ASCII_WIDTH_LONG_COUNT_MAX = 5;
+export function measureCharWidth(fontMeasureInfo, charCode) {
+    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, text) {
+    var strWidthCache = fontMeasureInfo.strWidthCache;
+    var width = strWidthCache.get(text);
     if (width == null) {
-        width = platformApi.measureText(text, font).width;
-        cacheOfFont.put(text, width);
+        width = platformApi.measureText(text, fontMeasureInfo.font).width;
+        strWidthCache.put(text, width);
     }
     return width;
 }
 export function innerGetBoundingRect(text, font, textAlign, textBaseline) {
-    var width = getWidth(text, font);
+    var width = measureWidth(ensureFontMeasureInfo(font), text);
     var height = getLineHeight(font);
     var x = adjustTextX(0, width, textAlign);
     var y = adjustTextY(0, height, textBaseline);
@@ -38,26 +88,26 @@ export function getBoundingRect(text, font, textAlign, textBaseline) {
         return uniondRect;
     }
 }
-export function adjustTextX(x, width, textAlign) {
+export function adjustTextX(x, width, textAlign, inverse) {
     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, height, verticalAlign) {
+export function adjustTextY(y, height, verticalAlign, inverse) {
     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) {
-    return getWidth('国', font);
+    return ensureFontMeasureInfo(font).stWideCharWidth;
 }
 export function measureText(text, font) {
     return platformApi.measureText(text, font);

package/lib/core/BoundingRect.d.ts

@@ -1,15 +1,19 @@
 import * as matrix from './matrix';
-import { PointLike } from './Point';
+import Point, { PointLike } from './Point';
+import { NullUndefined } from './types';
 declare class BoundingRect {
     x: number;
     y: number;
     width: number;
     height: number;
     constructor(x: number, y: number, width: number, height: number);
+    static set<TTarget extends RectLike>(target: TTarget, x: number, y: number, width: number, height: number): TTarget;
     union(other: BoundingRect): void;
     applyTransform(m: matrix.MatrixArray): void;
     calculateTransform(b: RectLike): matrix.MatrixArray;
-    intersect(b: RectLike, mtv?: PointLike): boolean;
+    intersect(b: RectLike, mtv?: PointLike, opt?: BoundingRectIntersectOpt): boolean;
+    static intersect(a: RectLike, b: RectLike, mtv?: PointLike, opt?: BoundingRectIntersectOpt): boolean;
+    static contain(rect: RectLike, x: number, y: number): boolean;
     contain(x: number, y: number): boolean;
     clone(): BoundingRect;
     copy(other: RectLike): void;
@@ -17,7 +21,7 @@ declare class BoundingRect {
     isFinite(): boolean;
     isZero(): boolean;
     static create(rect: RectLike): BoundingRect;
-    static copy(target: RectLike, source: RectLike): void;
+    static copy<TTarget extends RectLike>(target: TTarget, source: RectLike): TTarget;
     static applyTransform(target: RectLike, source: RectLike, m: matrix.MatrixArray): void;
 }
 export declare type RectLike = {
@@ -26,4 +30,22 @@ export declare type RectLike = {
     width: number;
     height: number;
 };
+export interface BoundingRectIntersectOpt {
+    direction?: number;
+    bidirectional?: boolean;
+    touchThreshold?: number;
+    outIntersectRect?: RectLike;
+    clamp?: boolean;
+}
+export declare function createIntersectContext(): {
+    minTv: Point;
+    maxTv: Point;
+    useDir: boolean;
+    dirMinTv: Point;
+    touchThreshold: number;
+    bidirectional: boolean;
+    negativeSize: boolean;
+    reset(opt: BoundingRectIntersectOpt | NullUndefined, useMTV: boolean): void;
+    calcDirMTV(): void;
+};
 export default BoundingRect;