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

package/src/core/PathProxy.ts

@@ -365,6 +365,9 @@ export default class PathProxy {
     }
 
     setData(data: Float32Array | number[]) {
+        if (!this._saveData) {
+            return;
+        }
 
         const len = data.length;
 
@@ -380,6 +383,9 @@ export default class PathProxy {
     }
 
     appendPath(path: PathProxy | PathProxy[]) {
+        if (!this._saveData) {
+            return;
+        }
         if (!(path instanceof Array)) {
             path = [path];
         }
@@ -389,8 +395,14 @@ export default class PathProxy {
         for (let i = 0; i < len; i++) {
             appendSize += path[i].len();
         }
-        if (hasTypedArray && (this.data instanceof Float32Array)) {
+        const oldData = this.data;
+        if (hasTypedArray && (oldData instanceof Float32Array || !oldData)) {
             this.data = new Float32Array(offset + appendSize);
+            if (offset > 0 && oldData) {
+                for (let k = 0; k < offset; k++) {
+                    this.data[k] = oldData[k];
+                }
+            }
         }
         for (let i = 0; i < len; i++) {
             const appendPathData = path[i].data;
@@ -970,6 +982,10 @@ export default class PathProxy {
         return newProxy;
     }
 
+    canSave(): boolean {
+        return !!this._saveData;
+    }
+
     private static initDefaultProps = (function () {
         const proto = PathProxy.prototype;
         proto._saveData = true;

package/src/core/Transformable.ts

@@ -27,6 +27,8 @@ class Transformable {
     skewX: number
     skewY: number
 
+    // Suppose positive y is towards screen-bottom and positive x is towards screen-right;
+    // positive rotation means rotating anticlockwise. (opposite to CSS transform rotate)
     rotation: number
 
     /**

package/src/core/matrix.ts

@@ -77,7 +77,8 @@ export function translate(out: MatrixArray, a: MatrixArray, v: VectorArray): Mat
 }
 
 /**
- * 旋转变换
+ * Suppose positive y is towards screen-bottom and positive x is towards screen-right;
+ * positive rotation means rotating anticlockwise. (opposite to CSS transform rotate)
  */
 export function rotate(
     out: MatrixArray,

package/src/core/types.ts

@@ -11,6 +11,8 @@ export type ArrayLike<T> = {
     length: number
 }
 
+export type NullUndefined = null | undefined;
+
 export type ImageLike = HTMLImageElement | HTMLCanvasElement | HTMLVideoElement
 
 // subset of CanvasTextBaseline

package/src/core/util.ts

@@ -819,4 +819,6 @@ export function hasOwn(own: object, prop: string): boolean {
 
 export function noop() {}
 
-export const RADIAN_TO_DEGREE = 180 / Math.PI;
+export const RADIAN_TO_DEGREE = 180 / Math.PI;
+
+export const EPSILON = Number.EPSILON || Math.pow(2, -52);

package/src/graphic/Displayable.ts

@@ -154,8 +154,6 @@ class Displayable<Props extends DisplayableProps = DisplayableProps> extends Ele
     // TODO use WeakMap?
 
     // Shapes for cascade clipping.
-    // Can only be `null`/`undefined` or an non-empty array, MUST NOT be an empty array.
-    // because it is easy to only using null to check whether clipPaths changed.
     __clipPaths?: Path[]
 
     // FOR CANVAS PAINTER
@@ -223,7 +221,7 @@ class Displayable<Props extends DisplayableProps = DisplayableProps> extends Ele
             return false;
         }
 
-        if (considerClipPath && this.__clipPaths) {
+        if (considerClipPath && this.__clipPaths && this.__clipPaths.length) {
             for (let i = 0; i < this.__clipPaths.length; ++i) {
                 if (this.__clipPaths[i].isZeroArea()) {
                     return false;

package/src/graphic/Group.ts

@@ -256,6 +256,8 @@ class Group extends Element<GroupProps> {
 
     getBoundingRect(includeChildren?: Element[]): BoundingRect {
         // TODO Caching
+        // FIXME: if no child or all ignored, the returned boundingRect (0, 0, 0, 0)
+        //  is not a correct bounding rect in some scenarios, such as rect union and intersection detection.
         const tmpRect = new BoundingRect(0, 0, 0, 0);
         const children = includeChildren || this._children;
         const tmpMat: MatrixArray = [];

package/src/graphic/Text.ts

@@ -1,9 +1,13 @@
 /**
  * RichText is a container that manages complex text label.
- * It will parse text string and create sub displayble elements respectively.
+ * It will parse text string and create sub displayable elements respectively.
  */
-import { TextAlign, TextVerticalAlign, ImageLike, Dictionary, MapToType, FontWeight, FontStyle } from '../core/types';
-import { parseRichText, parsePlainText } from './helper/parseText';
+import {
+    TextAlign, TextVerticalAlign, ImageLike, Dictionary, MapToType, FontWeight, FontStyle, NullUndefined
+} from '../core/types';
+import {
+    parseRichText, parsePlainText, CalcInnerTextOverflowAreaOut, calcInnerTextOverflowArea
+} from './helper/parseText';
 import TSpan, { TSpanStyleProps } from './TSpan';
 import { retrieve2, each, normalizeCssArray, trim, retrieve3, extend, keys, defaults } from '../core/util';
 import { adjustTextX, adjustTextY } from '../contain/text';
@@ -41,7 +45,7 @@ export interface TextStylePropsPart {
     strokeOpacity?: number
     /**
      * textStroke may be set as some color as a default
-     * value in upper applicaion, where the default value
+     * value in upper application, where the default value
      * of lineWidth should be 0 to make sure that
      * user can choose to do not use text stroke.
      */
@@ -92,6 +96,7 @@ export interface TextStylePropsPart {
     /**
      * Width of text block. Not include padding
      * Used for background, truncate, wrap
+     * If string - be 'auto'.
      */
     width?: number | string
     /**
@@ -100,7 +105,7 @@ export interface TextStylePropsPart {
      */
     height?: number
     /**
-     * Reserved for special functinality, like 'hr'.
+     * Reserved for special functionality, like 'hr'.
      */
     tag?: string
 
@@ -121,7 +126,7 @@ export interface TextStylePropsPart {
     /**
      * Margin of label. Used when layouting the label.
      */
-    margin?: number
+    margin?: number | number[]
 
     borderColor?: string
     borderWidth?: number
@@ -148,6 +153,10 @@ export interface TextStyleProps extends TextStylePropsPart {
 
     text?: string
 
+    /**
+     * The outer rect (including padding) is placed based on x/y.
+     * By default 0.
+     */
     x?: number
     y?: number
 
@@ -155,6 +164,7 @@ export interface TextStyleProps extends TextStylePropsPart {
      * Only support number in the top block.
      */
     width?: number
+
     /**
      * Text styles for rich text.
      */
@@ -204,6 +214,9 @@ export type TextState = Pick<TextProps, DisplayableStatePropNames> & ElementComm
 
 export type DefaultTextStyle = Pick<TextStyleProps, 'fill' | 'stroke' | 'align' | 'verticalAlign'> & {
     autoStroke?: boolean
+    // In text local coord.
+    // Exist if and only if `ElementTextConfig['autoOverflowArea']: true`
+    overflowRect?: BoundingRect | NullUndefined
 };
 
 const DEFAULT_RICH_TEXT_COLOR = {
@@ -211,6 +224,8 @@ const DEFAULT_RICH_TEXT_COLOR = {
 };
 const DEFAULT_STROKE_LINE_WIDTH = 2;
 
+const tmpCITOverflowAreaOut = {} as CalcInnerTextOverflowAreaOut;
+
 // const DEFAULT_TEXT_STYLE: TextStyleProps = {
 //     x: 0,
 //     y: 0,
@@ -270,7 +285,7 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
 
     /**
      * Will use this to calculate transform matrix
-     * instead of Element itseelf if it's give.
+     * instead of Element itself if it's give.
      * Not exposed to developers
      */
     innerTransformable: Transformable
@@ -489,8 +504,25 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
         const textFont = style.font || DEFAULT_FONT;
         const textPadding = style.padding as number[];
 
+        const defaultStyle = this._defaultStyle;
+        let baseX = style.x || 0;
+        let baseY = style.y || 0;
+        const textAlign = style.align || defaultStyle.align || 'left';
+        const verticalAlign = style.verticalAlign || defaultStyle.verticalAlign || 'top';
+
+        calcInnerTextOverflowArea(
+            tmpCITOverflowAreaOut, defaultStyle.overflowRect, baseX, baseY, textAlign, verticalAlign
+        );
+        baseX = tmpCITOverflowAreaOut.baseX;
+        baseY = tmpCITOverflowAreaOut.baseY;
+
         const text = getStyleText(style);
-        const contentBlock = parsePlainText(text, style);
+        const contentBlock = parsePlainText(
+            text,
+            style,
+            tmpCITOverflowAreaOut.outerWidth,
+            tmpCITOverflowAreaOut.outerHeight
+        );
         const needDrawBg = needDrawBackground(style);
         const bgColorDrawn = !!(style.backgroundColor);
 
@@ -501,15 +533,8 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
         const textLines = contentBlock.lines;
         const lineHeight = contentBlock.lineHeight;
 
-        const defaultStyle = this._defaultStyle;
-
         this.isTruncated = !!contentBlock.isTruncated;
 
-        const baseX = style.x || 0;
-        const baseY = style.y || 0;
-        const textAlign = style.align || defaultStyle.align || 'left';
-        const verticalAlign = style.verticalAlign || defaultStyle.verticalAlign || 'top';
-
         let textX = baseX;
         let textY = adjustTextY(baseY, contentBlock.contentHeight, verticalAlign);
 
@@ -627,22 +652,34 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
 
     private _updateRichTexts() {
         const style = this.style;
+        const defaultStyle = this._defaultStyle;
+
+        const textAlign = style.align || defaultStyle.align;
+        const verticalAlign = style.verticalAlign || defaultStyle.verticalAlign;
+        let baseX = style.x || 0;
+        let baseY = style.y || 0;
+
+        calcInnerTextOverflowArea(
+            tmpCITOverflowAreaOut, defaultStyle.overflowRect, baseX, baseY, textAlign, verticalAlign
+        );
+        baseX = tmpCITOverflowAreaOut.baseX;
+        baseY = tmpCITOverflowAreaOut.baseY;
 
         // TODO Only parse when text changed?
         const text = getStyleText(style);
-        const contentBlock = parseRichText(text, style);
+        const contentBlock = parseRichText(
+            text,
+            style,
+            tmpCITOverflowAreaOut.outerWidth,
+            tmpCITOverflowAreaOut.outerHeight,
+            textAlign
+        );
 
         const contentWidth = contentBlock.width;
         const outerWidth = contentBlock.outerWidth;
         const outerHeight = contentBlock.outerHeight;
         const textPadding = style.padding as number[];
 
-        const baseX = style.x || 0;
-        const baseY = style.y || 0;
-        const defaultStyle = this._defaultStyle;
-        const textAlign = style.align || defaultStyle.align;
-        const verticalAlign = style.verticalAlign || defaultStyle.verticalAlign;
-
         this.isTruncated = !!contentBlock.isTruncated;
 
         const boxX = adjustTextX(baseX, outerWidth, textAlign);