zrender-nightly 5.7.0-dev.20250619 → 5.7.0-dev.20250621

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/dom.ts

@@ -2,6 +2,7 @@
 import env from './env';
 import {buildTransformer} from './fourPointsTransform';
 import {Dictionary} from './types';
+import { each } from './util';
 
 const EVENT_SAVED_PROP = '___zrEVENTSAVED';
 const _calcOut: number[] = [];
@@ -11,6 +12,7 @@ type SavedInfo = {
     trans?: ReturnType<typeof buildTransformer>
     invTrans?: ReturnType<typeof buildTransformer>
     srcCoords?: number[]
+    clearMarkers?: () => void
 }
 
 /**
@@ -57,6 +59,22 @@ export function transformLocalCoord(
         && transformCoordWithViewport(out, elTarget, _calcOut[0], _calcOut[1]);
 }
 
+export function transformLocalCoordClear(
+    elFrom: HTMLElement,
+    elTarget: HTMLElement,
+) {
+    elFrom && dealClear(elFrom);
+    elTarget && dealClear(elTarget);
+
+    function dealClear(el: HTMLElement) {
+        const saved: SavedInfo = (el as any)[EVENT_SAVED_PROP];
+        if (saved) {
+            saved.clearMarkers && saved.clearMarkers();
+            delete (el as any)[EVENT_SAVED_PROP];
+        }
+    }
+}
+
 /**
  * Transform between a "viewport coord" and a "local coord".
  * "viewport coord": the coord based on the left-top corner of the viewport
@@ -134,6 +152,12 @@ function prepareCoordMarkers(el: HTMLElement, saved: SavedInfo) {
         markers.push(marker);
     }
 
+    saved.clearMarkers = function () {
+        each(markers, function (marker) {
+            marker.parentNode && marker.parentNode.removeChild(marker);
+        });
+    };
+
     return markers;
 }
 

package/src/core/env.ts

@@ -37,7 +37,12 @@ else if (typeof document === 'undefined' && typeof self !== 'undefined') {
     // In worker
     env.worker = true;
 }
-else if (!env.hasGlobalWindow || 'Deno' in window) {
+else if (
+    !env.hasGlobalWindow
+    || 'Deno' in window
+    || (typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string'
+        && navigator.userAgent.indexOf('Node.js') > -1)
+) {
     // In node
     env.node = true;
     env.svgSupported = true;
@@ -85,29 +90,31 @@ function detect(ua: string, env: Env) {
     env.touchEventsSupported = 'ontouchstart' in window && !browser.ie && !browser.edge;
     env.pointerEventsSupported = 'onpointerdown' in window
         && (browser.edge || (browser.ie && +browser.version >= 11));
-    env.domSupported = typeof document !== 'undefined';
-
-    const style = document.documentElement.style;
-
-    env.transform3dSupported = (
-        // IE9 only supports transform 2D
-        // transform 3D supported since IE10
-        // we detect it by whether 'transition' is in style
-        (browser.ie && 'transition' in style)
-        // edge
-        || browser.edge
-        // webkit
-        || (('WebKitCSSMatrix' in window) && ('m11' in new WebKitCSSMatrix()))
-        // gecko-based browsers
-        || 'MozPerspective' in style
-    ) // Opera supports CSS transforms after version 12
-      && !('OTransition' in style);
-
-    // except IE 6-8 and very old firefox 2-3 & opera 10.1
-    // other browsers all support `transform`
-    env.transformSupported = env.transform3dSupported
-        // transform 2D is supported in IE9
-        || (browser.ie && +browser.version >= 9);
+
+    const domSupported = env.domSupported = typeof document !== 'undefined';
+    if (domSupported) {
+        const style = document.documentElement.style;
+
+        env.transform3dSupported = (
+            // IE9 only supports transform 2D
+            // transform 3D supported since IE10
+            // we detect it by whether 'transition' is in style
+            (browser.ie && 'transition' in style)
+            // edge
+            || browser.edge
+            // webkit
+            || (('WebKitCSSMatrix' in window) && ('m11' in new WebKitCSSMatrix()))
+            // gecko-based browsers
+            || 'MozPerspective' in style
+        ) // Opera supports CSS transforms after version 12
+          && !('OTransition' in style);
+
+        // except IE 6-8 and very old firefox 2-3 & opera 10.1
+        // other browsers all support `transform`
+        env.transformSupported = env.transform3dSupported
+            // transform 2D is supported in IE9
+            || (browser.ie && +browser.version >= 9);
+    }
 
 }
 

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

@@ -203,7 +203,7 @@ export function defaults<
     S extends Dictionary<any>
 >(target: T, source: S, overlay?: boolean): T & S {
     const keysArr = keys(source);
-    for (let i = 0; i < keysArr.length; i++) {
+    for (let i = 0, len = keysArr.length; i < len; i++) {
         let key = keysArr[i];
         if ((overlay ? source[key] != null : (target as T & S)[key] == null)) {
             (target as S & T)[key] = (source as T & S)[key];
@@ -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,11 +285,17 @@ 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
 
+    // Be `true` if and only if the result text is modified due to overflow, due to
+    // settings on either `overflow` or `lineOverflow`. Based on this the caller can
+    // take some action like showing the original text in a particular tip.
+    // Only take effect after rendering. So do not visit it before it.
+    isTruncated: boolean
+
     private _children: (ZRImage | Rect | TSpan)[] = []
 
     private _childCursor: 0
@@ -483,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);
 
@@ -495,12 +533,7 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
         const textLines = contentBlock.lines;
         const lineHeight = contentBlock.lineHeight;
 
-        const defaultStyle = this._defaultStyle;
-
-        const baseX = style.x || 0;
-        const baseY = style.y || 0;
-        const textAlign = style.align || defaultStyle.align || 'left';
-        const verticalAlign = style.verticalAlign || defaultStyle.verticalAlign || 'top';
+        this.isTruncated = !!contentBlock.isTruncated;
 
         let textX = baseX;
         let textY = adjustTextY(baseY, contentBlock.contentHeight, verticalAlign);
@@ -602,7 +635,7 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
 
             if (fixedBoundingRect) {
                 el.setBoundingRect(new BoundingRect(
-                    adjustTextX(subElStyle.x, style.width, subElStyle.textAlign as TextAlign),
+                    adjustTextX(subElStyle.x, contentWidth, subElStyle.textAlign as TextAlign),
                     adjustTextY(subElStyle.y, calculatedLineHeight, subElStyle.textBaseline as TextVerticalAlign),
                     /**
                      * Text boundary should be the real text width.
@@ -619,21 +652,35 @@ 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);
         const boxY = adjustTextY(baseY, outerHeight, verticalAlign);