feat: 超出自动隐藏 (#842)

ant-design · Sep 1, 2021 · bc77abe · bc77abe
1 parent 0b37c4c
commit bc77abe
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 4 deletions.
diff --git a/docs/.g2plot-plot-api/decomposition-tree-graph.md b/docs/.g2plot-plot-api/decomposition-tree-graph.md
@@ -100,6 +100,8 @@ Node title configuration.
     containerStyle?: IShapeStyle;
     /** title style */
     style?: ILabelStyle;
+    /** auto ellipsis */
+    autoEllipsis?: boolean;
   },
 }
 ```

diff --git a/docs/.g2plot-plot-api/decomposition-tree-graph.zh-CN.md b/docs/.g2plot-plot-api/decomposition-tree-graph.zh-CN.md
@@ -100,6 +100,8 @@ interface Data {
     containerStyle?: IShapeStyle;
     /** title 样式 */
     style?: ILabelStyle;
+    /** 超出自动隐藏 */
+    autoEllipsis?: boolean;
   },
 }
 ```

diff --git a/docs/.g2plot-plot-api/flow-analysis-graph.md b/docs/.g2plot-plot-api/flow-analysis-graph.md
@@ -107,6 +107,8 @@ Node title configuration.
     containerStyle?: IShapeStyle;
     /** title style */
     style?: ILabelStyle;
+    /** auto ellipsis */
+    autoEllipsis?: boolean;
   },
 }
 ```

diff --git a/docs/.g2plot-plot-api/flow-analysis-graph.zh-CN.md b/docs/.g2plot-plot-api/flow-analysis-graph.zh-CN.md
@@ -107,6 +107,8 @@ interface Data {
     containerStyle?: IShapeStyle;
     /** title 样式 */
     style?: ILabelStyle;
+    /** 超出自动隐藏 */
+    autoEllipsis?: boolean;
   },
 }
 ```

diff --git a/src/graphs/flowAnalysisGraph/customItem.ts b/src/graphs/flowAnalysisGraph/customItem.ts
@@ -8,6 +8,7 @@ import {
   getStatusCfg,
   createMarker,
   cloneBesidesImg,
+  useEllipsis,
 } from '../utils';
 import { CardNodeCfg, CardItems, IShape } from '../interface';
 
@@ -83,7 +84,11 @@ export const registerIndicatorCardNode = () => {
         const paddingArray = cardPadding.map(
           (item: number, index: number) => item + appendPadding[index],
         );
-        const { style: titleStyle, containerStyle: titleContainerStyle } = titleCfg ?? {};
+        const {
+          style: titleStyle,
+          containerStyle: titleContainerStyle,
+          autoEllipsis = true,
+        } = titleCfg ?? {};
         const {
           style: itemStyle,
           containerStyle: itemContainerStyle,
@@ -135,14 +140,17 @@ export const registerIndicatorCardNode = () => {
             name: 'title-rect',
             draggable: true,
           });
+          const textStyle = {
+            ...defaultTitleLabelStyle,
+            ...getStyle(titleStyle, cfg, group),
+          };
           titleTextShape = group!.addShape('text', {
             attrs: {
               x: paddingArray[3],
               y: paddingArray[0],
               textBaseline: 'top',
-              text: title,
-              ...defaultTitleLabelStyle,
-              ...getStyle(titleStyle, cfg, group),
+              text: autoEllipsis ? useEllipsis(title, textStyle?.fontSize, contentWidth) : title,
+              ...textStyle,
             },
             name: 'title',
           });

diff --git a/src/graphs/interface.ts b/src/graphs/interface.ts
@@ -142,6 +142,8 @@ export interface CardNodeCfg extends NodeCfg {
     containerStyle?: IShapeStyle;
     /** title 样式 */
     style?: ILabelStyle;
+    /** 是否自动隐藏 */
+    autoEllipsis?: boolean;
   };
   items?: {
     /** items 容器样式 */

diff --git a/src/graphs/utils.tsx b/src/graphs/utils.tsx
@@ -633,3 +633,17 @@ export const setParentChildren = (
   current.children = children;
   return parendData;
 };
+
+/** 超出省略 */
+export const useEllipsis = (
+  text: string,
+  fontSize: string | number = 12,
+  contentWidth: number = 120,
+) => {
+  const size = isNumber(fontSize) ? fontSize : Number(fontSize.replace('px', ''));
+  const maxWords = Math.floor(contentWidth / size);
+  if (text.length <= maxWords) {
+    return text;
+  }
+  return text.slice(0, maxWords - 1) + '...';
+};