Merge pull request #1102 from ecomfe/master

Merge master branch into release for v5.6.1
ecomfe · Nov 26, 2024 · a641958 · a641958
2 parents d3e0e17 + 980b0ea
commit a641958
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 85 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,10 +1,14 @@
 /doc
 /test
 /benchmark
+/tsconfig.json
 .github
 .vscode
 
 npm-debug.log
 .DS_Store
 Thumbs.db
 Desktop.ini
+
+.eslintignore
+.eslintrc.yaml
diff --git a/src/core/PathProxy.ts b/src/core/PathProxy.ts
@@ -389,7 +389,7 @@ export default class PathProxy {
         for (let i = 0; i < len; i++) {
             appendSize += path[i].len();
         }
-        if (hasTypedArray && (this.data instanceof Float32Array)) {
+        if (hasTypedArray && (this.data instanceof Float32Array || !this.data)) {
             this.data = new Float32Array(offset + appendSize);
         }
         for (let i = 0; i < len; i++) {

diff --git a/src/core/env.ts b/src/core/env.ts
@@ -37,10 +37,7 @@ else if (typeof document === 'undefined' && typeof self !== 'undefined') {
     // In worker
     env.worker = true;
 }
-else if (
-    typeof navigator === 'undefined'
-    || navigator.userAgent.indexOf('Node.js') === 0
-) {
+else if (!env.hasGlobalWindow || 'Deno' in window) {
     // In node
     env.node = true;
     env.svgSupported = true;

diff --git a/src/graphic/Text.ts b/src/graphic/Text.ts
@@ -275,6 +275,12 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
      */
     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
@@ -497,6 +503,8 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
 
         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';
@@ -602,7 +610,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.
@@ -635,6 +643,8 @@ class ZRText extends Displayable<TextProps> implements GroupLike {
         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);
         let xLeft = boxX;

diff --git a/src/graphic/helper/parseText.ts b/src/graphic/helper/parseText.ts
@@ -44,20 +44,42 @@ export function truncateText(
     ellipsis?: string,
     options?: InnerTruncateOption
 ): string {
+    const out = {} as Parameters<typeof truncateText2>[0];
+    truncateText2(out, text, containerWidth, font, ellipsis, options);
+    return out.text;
+}
+
+// PENDING: not sure whether `truncateText` is used outside zrender, since it has an `export`
+// specifier. So keep it and perform the interface modification in `truncateText2`.
+function truncateText2(
+    out: {text: string, isTruncated: boolean},
+    text: string,
+    containerWidth: number,
+    font: string,
+    ellipsis?: string,
+    options?: InnerTruncateOption
+): void {
     if (!containerWidth) {
-        return '';
+        out.text = '';
+        out.isTruncated = false;
+        return;
     }
 
     const textLines = (text + '').split('\n');
     options = prepareTruncateOptions(containerWidth, font, ellipsis, options);
 
     // FIXME
     // It is not appropriate that every line has '...' when truncate multiple lines.
+    let isTruncated = false;
+    const truncateOut = {} as Parameters<typeof truncateSingleLine>[0];
     for (let i = 0, len = textLines.length; i < len; i++) {
-        textLines[i] = truncateSingleLine(textLines[i], options as InnerPreparedTruncateOption);
+        truncateSingleLine(truncateOut, textLines[i], options as InnerPreparedTruncateOption);
+        textLines[i] = truncateOut.textLine;
+        isTruncated = isTruncated || truncateOut.isTruncated;
     }
 
-    return textLines.join('\n');
+    out.text = textLines.join('\n');
+    out.isTruncated = isTruncated;
 }
 
 function prepareTruncateOptions(
@@ -104,19 +126,27 @@ function prepareTruncateOptions(
     return preparedOpts;
 }
 
-function truncateSingleLine(textLine: string, options: InnerPreparedTruncateOption): string {
+function truncateSingleLine(
+    out: {textLine: string, isTruncated: boolean},
+    textLine: string,
+    options: InnerPreparedTruncateOption
+): void {
     const containerWidth = options.containerWidth;
     const font = options.font;
     const contentWidth = options.contentWidth;
 
     if (!containerWidth) {
-        return '';
+        out.textLine = '';
+        out.isTruncated = false;
+        return;
     }
 
     let lineWidth = getWidth(textLine, font);
 
     if (lineWidth <= containerWidth) {
-        return textLine;
+        out.textLine = textLine;
+        out.isTruncated = false;
+        return;
     }
 
     for (let j = 0; ; j++) {
@@ -139,7 +169,8 @@ function truncateSingleLine(textLine: string, options: InnerPreparedTruncateOpti
         textLine = options.placeholder;
     }
 
-    return textLine;
+    out.textLine = textLine;
+    out.isTruncated = true;
 }
 
 function estimateLength(
@@ -174,6 +205,10 @@ export interface PlainTextContentBlock {
     outerHeight: number
 
     lines: string[]
+
+    // Be `true` if and only if the result text is modified due to overflow, due to
+    // settings on either `overflow` or `lineOverflow`
+    isTruncated: boolean
 }
 
 export function parsePlainText(
@@ -192,6 +227,7 @@ export function parsePlainText(
     const bgColorDrawn = !!(style.backgroundColor);
 
     const truncateLineOverflow = style.lineOverflow === 'truncate';
+    let isTruncated = false;
 
     let width = style.width;
     let lines: string[];
@@ -210,6 +246,7 @@ export function parsePlainText(
     if (contentHeight > height && truncateLineOverflow) {
         const lineCount = Math.floor(height / lineHeight);
 
+        isTruncated = isTruncated || (lines.length > lineCount);
         lines = lines.slice(0, lineCount);
 
         // TODO If show ellipse for line truncate
@@ -228,8 +265,11 @@ export function parsePlainText(
             placeholder: style.placeholder
         });
         // Having every line has '...' when truncate multiple lines.
+        const singleOut = {} as Parameters<typeof truncateSingleLine>[0];
         for (let 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;
         }
     }
 
@@ -265,7 +305,8 @@ export function parsePlainText(
         calculatedLineHeight: calculatedLineHeight,
         contentWidth: contentWidth,
         contentHeight: contentHeight,
-        width: width
+        width: width,
+        isTruncated: isTruncated
     };
 }
 
@@ -314,6 +355,9 @@ export class RichTextContentBlock {
     outerWidth: number = 0
     outerHeight: number = 0
     lines: RichTextLine[] = []
+    // Be `true` if and only if the result text is modified due to overflow, due to
+    // settings on either `overflow` or `lineOverflow`
+    isTruncated: boolean = false
 }
 
 type WrapInfo = {
@@ -326,7 +370,7 @@ type WrapInfo = {
  * Also consider 'bbbb{a|xxx\nzzz}xxxx\naaaa'.
  * If styleName is undefined, it is plain text.
  */
-export function parseRichText(text: string, style: TextStyleProps) {
+export function parseRichText(text: string, style: TextStyleProps): RichTextContentBlock {
     const contentBlock = new RichTextContentBlock();
 
     text != null && (text += '');
@@ -366,6 +410,7 @@ export function parseRichText(text: string, style: TextStyleProps) {
 
     const truncate = overflow === 'truncate';
     const truncateLine = style.lineOverflow === 'truncate';
+    const tmpTruncateOut = {} as Parameters<typeof truncateText2>[0];
 
     // let prevToken: RichTextToken;
 
@@ -412,6 +457,7 @@ export function parseRichText(text: string, style: TextStyleProps) {
             if (truncateLine && topHeight != null && calculatedHeight + token.lineHeight > topHeight) {
                 // TODO Add ellipsis on the previous token.
                 // prevToken.text =
+                const originalLength = contentBlock.lines.length;
                 if (j > 0) {
                     line.tokens = line.tokens.slice(0, j);
                     finishLine(line, lineWidth, lineHeight);
@@ -420,6 +466,7 @@ export function parseRichText(text: string, style: TextStyleProps) {
                 else {
                     contentBlock.lines = contentBlock.lines.slice(0, i);
                 }
+                contentBlock.isTruncated = contentBlock.isTruncated || (contentBlock.lines.length < originalLength);
                 break outer;
             }
 
@@ -461,10 +508,13 @@ export function parseRichText(text: string, style: TextStyleProps) {
                         token.width = token.contentWidth = 0;
                     }
                     else {
-                        token.text = truncateText(
+                        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 = getWidth(token.text, font);
                     }
                 }

diff --git a/src/svg/Painter.ts b/src/svg/Painter.ts
@@ -142,6 +142,7 @@ class SVGPainter implements PainterBase {
         scope.willUpdate = opts.willUpdate;
         scope.compress = opts.compress;
         scope.emphasis = opts.emphasis;
+        scope.ssr = this._opts.ssr;
 
         const children: SVGVNode[] = [];
 

diff --git a/src/svg/core.ts b/src/svg/core.ts
@@ -159,6 +159,8 @@ export interface BrushScope {
      * If compress the output string.
      */
     compress?: boolean
+
+    ssr?: boolean
 }
 
 export function createBrushScope(zrId: string): BrushScope {

diff --git a/src/svg/graphic.ts b/src/svg/graphic.ts
@@ -63,13 +63,15 @@ function setStyleAttrs(attrs: SVGVNodeAttrs, style: AllStyleOption, el: Path | T
         else if (isFillStroke && isPattern(val)) {
             setPattern(el, attrs, key, scope);
         }
-        else if (isFillStroke && val === 'none') {
-            // When is none, it cannot be interacted when ssr
-            attrs[key] = 'transparent';
-        }
         else {
             attrs[key] = val;
         }
+        if (isFillStroke && scope.ssr && val === 'none') {
+            // When is none, it cannot be interacted when ssr
+            // Setting `pointer-events` as `visible` to make it responding
+            // See also https://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
+            attrs['pointer-events'] = 'visible';
+        }
     }, style, el, false);
 
     setShadow(el, attrs, scope);

diff --git a/src/tool/path.ts b/src/tool/path.ts
@@ -389,7 +389,7 @@ function createPathOptions(str: string, opts: SVGPathOption): InnerSVGPathOption
     const innerOpts: InnerSVGPathOption = extend({}, opts);
     innerOpts.buildPath = function (path: PathProxy | CanvasRenderingContext2D) {
         if (isPathProxy(path)) {
-            path.setData(pathProxy.data);
+            path.appendPath(pathProxy);
             // Svg and vml renderer don't have context
             const ctx = path.getContext();
             if (ctx) {