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

package/lib/graphic/Text.js

@@ -1,5 +1,5 @@
 import { __extends } from "tslib";
-import { parseRichText, parsePlainText } from './helper/parseText.js';
+import { parseRichText, parsePlainText, calcInnerTextOverflowArea } from './helper/parseText.js';
 import TSpan from './TSpan.js';
 import { retrieve2, each, normalizeCssArray, trim, retrieve3, extend, keys, defaults } from '../core/util.js';
 import { adjustTextX, adjustTextY } from '../contain/text.js';
@@ -12,6 +12,7 @@ var DEFAULT_RICH_TEXT_COLOR = {
     fill: '#000'
 };
 var DEFAULT_STROKE_LINE_WIDTH = 2;
+var tmpCITOverflowAreaOut = {};
 export var DEFAULT_TEXT_ANIMATION_PROPS = {
     style: defaults({
         fill: true,
@@ -185,8 +186,16 @@ var ZRText = (function (_super) {
         var style = this.style;
         var textFont = style.font || DEFAULT_FONT;
         var textPadding = style.padding;
+        var defaultStyle = this._defaultStyle;
+        var baseX = style.x || 0;
+        var baseY = style.y || 0;
+        var textAlign = style.align || defaultStyle.align || 'left';
+        var verticalAlign = style.verticalAlign || defaultStyle.verticalAlign || 'top';
+        calcInnerTextOverflowArea(tmpCITOverflowAreaOut, defaultStyle.overflowRect, baseX, baseY, textAlign, verticalAlign);
+        baseX = tmpCITOverflowAreaOut.baseX;
+        baseY = tmpCITOverflowAreaOut.baseY;
         var text = getStyleText(style);
-        var contentBlock = parsePlainText(text, style);
+        var contentBlock = parsePlainText(text, style, tmpCITOverflowAreaOut.outerWidth, tmpCITOverflowAreaOut.outerHeight);
         var needDrawBg = needDrawBackground(style);
         var bgColorDrawn = !!(style.backgroundColor);
         var outerHeight = contentBlock.outerHeight;
@@ -194,11 +203,7 @@ var ZRText = (function (_super) {
         var contentWidth = contentBlock.contentWidth;
         var textLines = contentBlock.lines;
         var lineHeight = contentBlock.lineHeight;
-        var defaultStyle = this._defaultStyle;
-        var baseX = style.x || 0;
-        var baseY = style.y || 0;
-        var textAlign = style.align || defaultStyle.align || 'left';
-        var verticalAlign = style.verticalAlign || defaultStyle.verticalAlign || 'top';
+        this.isTruncated = !!contentBlock.isTruncated;
         var textX = baseX;
         var textY = adjustTextY(baseY, contentBlock.contentHeight, verticalAlign);
         if (needDrawBg || textPadding) {
@@ -261,23 +266,27 @@ var ZRText = (function (_super) {
             setSeparateFont(subElStyle, style);
             textY += lineHeight;
             if (fixedBoundingRect) {
-                el.setBoundingRect(new BoundingRect(adjustTextX(subElStyle.x, style.width, subElStyle.textAlign), adjustTextY(subElStyle.y, calculatedLineHeight, subElStyle.textBaseline), contentWidth, calculatedLineHeight));
+                el.setBoundingRect(new BoundingRect(adjustTextX(subElStyle.x, contentWidth, subElStyle.textAlign), adjustTextY(subElStyle.y, calculatedLineHeight, subElStyle.textBaseline), contentWidth, calculatedLineHeight));
             }
         }
     };
     ZRText.prototype._updateRichTexts = function () {
         var style = this.style;
+        var defaultStyle = this._defaultStyle;
+        var textAlign = style.align || defaultStyle.align;
+        var verticalAlign = style.verticalAlign || defaultStyle.verticalAlign;
+        var baseX = style.x || 0;
+        var baseY = style.y || 0;
+        calcInnerTextOverflowArea(tmpCITOverflowAreaOut, defaultStyle.overflowRect, baseX, baseY, textAlign, verticalAlign);
+        baseX = tmpCITOverflowAreaOut.baseX;
+        baseY = tmpCITOverflowAreaOut.baseY;
         var text = getStyleText(style);
-        var contentBlock = parseRichText(text, style);
+        var contentBlock = parseRichText(text, style, tmpCITOverflowAreaOut.outerWidth, tmpCITOverflowAreaOut.outerHeight, textAlign);
         var contentWidth = contentBlock.width;
         var outerWidth = contentBlock.outerWidth;
         var outerHeight = contentBlock.outerHeight;
         var textPadding = style.padding;
-        var baseX = style.x || 0;
-        var baseY = style.y || 0;
-        var defaultStyle = this._defaultStyle;
-        var textAlign = style.align || defaultStyle.align;
-        var verticalAlign = style.verticalAlign || defaultStyle.verticalAlign;
+        this.isTruncated = !!contentBlock.isTruncated;
         var boxX = adjustTextX(baseX, outerWidth, textAlign);
         var boxY = adjustTextY(baseY, outerHeight, verticalAlign);
         var xLeft = boxX;

package/lib/graphic/helper/parseText.d.ts

@@ -1,5 +1,5 @@
-import { TextAlign, TextVerticalAlign } from '../../core/types';
-import { TextStyleProps } from '../Text';
+import { TextAlign, TextVerticalAlign, NullUndefined } from '../../core/types';
+import { DefaultTextStyle, TextStyleProps } from '../Text';
 interface InnerTruncateOption {
     maxIteration?: number;
     minChar?: number;
@@ -17,8 +17,9 @@ export interface PlainTextContentBlock {
     outerWidth: number;
     outerHeight: number;
     lines: string[];
+    isTruncated: boolean;
 }
-export declare function parsePlainText(text: string, style?: TextStyleProps): PlainTextContentBlock;
+export declare function parsePlainText(text: string, style: Omit<TextStyleProps, 'align' | 'verticalAlign'>, defaultOuterWidth: number | NullUndefined, defaultOuterHeight: number | NullUndefined): PlainTextContentBlock;
 declare class RichTextToken {
     styleName: string;
     text: string;
@@ -49,6 +50,14 @@ export declare class RichTextContentBlock {
     outerWidth: number;
     outerHeight: number;
     lines: RichTextLine[];
+    isTruncated: boolean;
 }
-export declare function parseRichText(text: string, style: TextStyleProps): RichTextContentBlock;
+export declare function parseRichText(text: string, style: Omit<TextStyleProps, 'align' | 'verticalAlign'>, defaultOuterWidth: number | NullUndefined, defaultOuterHeight: number | NullUndefined, topTextAlign: TextAlign): RichTextContentBlock;
+export declare function calcInnerTextOverflowArea(out: CalcInnerTextOverflowAreaOut, overflowRect: DefaultTextStyle['overflowRect'], baseX: number, baseY: number, textAlign: TextAlign, textVerticalAlign: TextVerticalAlign): void;
+export declare type CalcInnerTextOverflowAreaOut = {
+    baseX: number;
+    baseY: number;
+    outerWidth: number | NullUndefined;
+    outerHeight: number | NullUndefined;
+};
 export {};

package/lib/graphic/helper/parseText.js

@@ -1,33 +1,45 @@
 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 = {};
+    truncateText2(out, text, containerWidth, font, ellipsis, options);
+    return out.text;
+}
+function truncateText2(out, text, containerWidth, font, ellipsis, options) {
     if (!containerWidth) {
-        return '';
+        out.text = '';
+        out.isTruncated = false;
+        return;
     }
     var textLines = (text + '').split('\n');
     options = prepareTruncateOptions(containerWidth, font, ellipsis, options);
+    var isTruncated = false;
+    var truncateOut = {};
     for (var i = 0, len = textLines.length; i < len; i++) {
-        textLines[i] = truncateSingleLine(textLines[i], options);
+        truncateSingleLine(truncateOut, textLines[i], options);
+        textLines[i] = truncateOut.textLine;
+        isTruncated = isTruncated || truncateOut.isTruncated;
     }
-    return textLines.join('\n');
+    out.text = textLines.join('\n');
+    out.isTruncated = isTruncated;
 }
 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;
@@ -39,16 +51,20 @@ function prepareTruncateOptions(containerWidth, font, ellipsis, options) {
     preparedOpts.containerWidth = containerWidth;
     return preparedOpts;
 }
-function truncateSingleLine(textLine, options) {
+function truncateSingleLine(out, textLine, options) {
     var containerWidth = options.containerWidth;
-    var font = options.font;
     var contentWidth = options.contentWidth;
+    var fontMeasureInfo = options.fontMeasureInfo;
     if (!containerWidth) {
-        return '';
+        out.textLine = '';
+        out.isTruncated = false;
+        return;
     }
-    var lineWidth = getWidth(textLine, font);
+    var lineWidth = measureWidth(fontMeasureInfo, textLine);
     if (lineWidth <= containerWidth) {
-        return textLine;
+        out.textLine = textLine;
+        out.isTruncated = false;
+        return;
     }
     for (var j = 0;; j++) {
         if (lineWidth <= contentWidth || j >= options.maxIterations) {
@@ -56,38 +72,47 @@ function truncateSingleLine(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;
     }
-    return textLine;
+    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 : [];
@@ -96,37 +121,39 @@ 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, {
             minChar: style.truncateMinChar,
             placeholder: style.placeholder
         });
+        var singleOut = {};
         for (var i = 0; i < lines.length; i++) {
-            lines[i] = truncateSingleLine(lines[i], options);
+            truncateSingleLine(singleOut, lines[i], options);
+            lines[i] = singleOut.textLine;
+            isTruncated = isTruncated || singleOut.isTruncated;
         }
     }
     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,
@@ -136,7 +163,8 @@ export function parsePlainText(text, style) {
         calculatedLineHeight: calculatedLineHeight,
         contentWidth: contentWidth,
         contentHeight: contentHeight,
-        width: width
+        width: width,
+        isTruncated: isTruncated
     };
 }
 var RichTextToken = (function () {
@@ -162,18 +190,28 @@ var RichTextContentBlock = (function () {
         this.outerWidth = 0;
         this.outerHeight = 0;
         this.lines = [];
+        this.isTruncated = false;
     }
     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' }
@@ -194,9 +232,9 @@ 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 = {};
     function finishLine(line, lineWidth, lineHeight) {
         line.width = lineWidth;
         line.lineHeight = lineHeight;
@@ -219,9 +257,10 @@ 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;
                 if (j > 0) {
                     line.tokens = line.tokens.slice(0, j);
                     finishLine(line, lineWidth, lineHeight);
@@ -230,6 +269,7 @@ export function parseRichText(text, style) {
                 else {
                     contentBlock.lines = contentBlock.lines.slice(0, i);
                 }
+                contentBlock.isTruncated = contentBlock.isTruncated || (contentBlock.lines.length < originalLength);
                 break outer;
             }
             var styleTokenWidth = tokenStyle.width;
@@ -237,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) {
@@ -258,12 +298,14 @@ export function parseRichText(text, style) {
                         token.width = token.contentWidth = 0;
                     }
                     else {
-                        token.text = truncateText(token.text, remainTruncWidth - paddingH, font, style.ellipsis, { minChar: style.truncateMinChar });
-                        token.width = token.contentWidth = getWidth(token.text, font);
+                        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 = measureWidth(ensureFontMeasureInfo(font), token.text);
                     }
                 }
                 else {
-                    token.contentWidth = getWidth(token.text, font);
+                    token.contentWidth = measureWidth(ensureFontMeasureInfo(font), token.text);
                 }
             }
             token.width += paddingH;
@@ -276,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;
@@ -315,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();
@@ -330,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;
@@ -371,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') {
@@ -386,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
@@ -446,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;
     }
@@ -467,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

@@ -1,4 +1,6 @@
 import { GradientObject } from '../graphic/Gradient';
+export declare function parseCssInt(val: string | number): number;
+export declare function parseCssFloat(val: string | number): number;
 export declare function parse(colorStr: string, rgbaArr?: number[]): number[];
 export declare function lift(color: string, level: number): string;
 export declare function toHex(color: string): string;
@@ -13,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],
@@ -87,14 +87,14 @@ function clampCssAngle(i) {
 function clampCssFloat(f) {
     return f < 0 ? 0 : f > 1 ? 1 : f;
 }
-function parseCssInt(val) {
+export function parseCssInt(val) {
     var str = val;
     if (str.length && str.charAt(str.length - 1) === '%') {
         return clampCssByte(parseFloat(str) / 100 * 255);
     }
     return clampCssByte(parseInt(str, 10));
 }
-function parseCssFloat(val) {
+export function parseCssFloat(val) {
     var str = val;
     if (str.length && str.charAt(str.length - 1) === '%') {
         return clampCssFloat(parseFloat(str) / 100);
@@ -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/parseSVG.js

@@ -13,6 +13,7 @@ import LinearGradient from '../graphic/LinearGradient.js';
 import RadialGradient from '../graphic/RadialGradient.js';
 import TSpan from '../graphic/TSpan.js';
 import { parseXML } from './parseXML.js';
+import * as colorTool from './color.js';
 ;
 var nodeParsers;
 var INHERITABLE_STYLE_ATTRIBUTES_MAP = {
@@ -399,6 +400,16 @@ function parseGradientColorStops(xmlNode, gradient) {
             var stopColor = styleVals.stopColor
                 || stop.getAttribute('stop-color')
                 || '#000000';
+            var stopOpacity = styleVals.stopOpacity
+                || stop.getAttribute('stop-opacity');
+            if (stopOpacity) {
+                var rgba = colorTool.parse(stopColor);
+                var stopColorOpacity = rgba && rgba[3];
+                if (stopColorOpacity) {
+                    rgba[3] *= colorTool.parseCssFloat(stopOpacity);
+                    stopColor = colorTool.stringify(rgba, 'rgba');
+                }
+            }
             gradient.colorStops.push({
                 offset: offset,
                 color: stopColor

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.7.0-dev.20250620";
+export declare const version = "5.7.0-dev.20250622";
 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.7.0-dev.20250620';
+export var version = '5.7.0-dev.20250622';
 ;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zrender-nightly",
-  "version": "5.7.0-dev.20250620",
+  "version": "5.7.0-dev.20250622",
   "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",