merge

react-ui/src/pages/Experiment/experimentText/index.jsx

@@ -168,6 +168,27 @@ function ExperimentText() {
   }, [message]);
 
   const initGraph = () => {
+    const fittingString = (str, maxWidth, fontSize) => {
+      const ellipsis = '...';
+      const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
+      let currentWidth = 0;
+      let res = str;
+      const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
+      str.split('').forEach((letter, i) => {
+        if (currentWidth > maxWidth - ellipsisLength) return;
+        if (pattern.test(letter)) {
+          // Chinese charactors
+          currentWidth += fontSize;
+        } else {
+          // get the width of single letter according to the fontSize
+          currentWidth += G6.Util.getLetterWidth(letter, fontSize);
+        }
+        if (currentWidth > maxWidth - ellipsisLength) {
+          res = `${str.substr(0, i)}${ellipsis}`;
+        }
+      });
+      return res;
+    };
     G6.registerNode(
       'rect-node',
       {
@@ -194,19 +215,21 @@ function ExperimentText() {
             },
             draggable: true,
           });
-          // if (cfg.label) {
-          //   group.addShape('text', {
-          //     attrs: {
-          //       x: 0,
-          //       y: cfg.height / 2 - 5,
-          //       textAlign: 'center',
-          //       textBaseline: 'middle',
-          //       text: cfg.label,
-          //       fill: '#fff',
-          //     },
-          //     draggable: true,
-          //   });
-          // }
+          if (cfg.label) {
+            group.addShape('text', {
+              attrs: {
+                text: fittingString(cfg.label, 70, 10),
+                x: -20,
+                y: 0,
+                fontSize: 10,
+                textAlign: 'left',
+                textBaseline: 'middle',
+                fill: '#000',
+              },
+              name: 'text-shape',
+              draggable: true,
+            });
+          }
           const bbox = group.getBBox();
           const anchorPoints = this.getAnchorPoints(cfg);
           // console.log(anchorPoints);