add label for edge

src/view/Manage/Map/Component/Relation.jsx

@@ -17,11 +17,11 @@ const colors = [
   '#FFD6E7',
 ];
 
+
 class Relation extends React.Component {
 
   componentDidMount() {
-    console.debug(this.props?.data)
-
+    // console.debug(this.props?.data)
   }
 
   componentDidUpdate() {
@@ -77,14 +77,14 @@ function init(container, data) {
     linkCenter: true,
     modes: {
       default: [
-        {
-          type: 'collapse-expand',
-          onChange: function onChange(item, collapsed) {
-            const data = item.get('model');
-            data.collapsed = collapsed;
-            return true;
-          },
-        },
+        // {
+        //   type: 'collapse-expand',
+        //   onChange: function onChange(item, collapsed) {
+        //     const data = item.get('model');
+        //     data.collapsed = collapsed;
+        //     return true;
+        //   },
+        // },
         'drag-canvas',
         'zoom-canvas',
       ],
@@ -96,6 +96,9 @@ function init(container, data) {
     nodeStateStyles: {
       hover: {}, // 清除预设hover效果
     },
+    defaultEdge: {
+      type: 'custom-line',
+    },
     layout: {
       type: 'dendrogram',
       direction: 'LR',
@@ -141,8 +144,8 @@ function init(container, data) {
       graph.setItemState(fnode, 'focus', false); // false
     });
     const { item } = evt;
-    graph.setItemState(item, 'hover', false);
     graph.setItemState(item, 'focus', true);
+    graph.setItemState(item, 'hover', false);
   });
 
   if (typeof window !== 'undefined')
@@ -224,7 +227,7 @@ G6.registerNode(
         let refY = 0;
         let offsetY = 0;
         const lineNum = cfg.labelLineNum || 1;
-        const fontSize = 8
+        const fontSize = 6
         offsetY = lineNum * (fontSize || 12);
 
         let [x, y] = [0, r + refY + offsetY + 5]
@@ -264,21 +267,21 @@ G6.registerNode(
           halo && halo.show();
           let scale = 1
           halo && halo.animate(
-            (ratio) => {  
-              scale = 2 - ratio 
+            (ratio) => {
+              scale = 2 - ratio
             },
             {
               repeat: false,
               duration: 500,
               easing: 'easeCubicOut',
             },
-          ); 
+          );
           halo && halo.animate(
             (ratio) => {
               // console.debug('scale', scale)
               const toMatrix = G6.Util.transform(
                 [1, 0, 0, 0, 1, 0, 0, 0, 1],
-                [['r', ratio * Math.PI * 2],['s', scale, scale]],
+                [['r', ratio * Math.PI * 2], ['s', scale, scale]],
               );
               return {
                 matrix: toMatrix,
@@ -301,6 +304,11 @@ G6.registerNode(
         } else {
           focus && focus.hide();
         }
+        // 将相关边也高亮
+        const relatedEdges = item.getEdges();
+        relatedEdges.forEach((edge) => {
+          edge.setState('focus', value);
+        });
       }
     },
     update: undefined,
@@ -308,6 +316,110 @@ G6.registerNode(
   'aggregated-node',
 ); // 这样可以继承 aggregated-node 的 setState
 
+const lineDash = [4, 2, 1, 2];
+G6.registerEdge(
+  'custom-line',
+  {
+    draw(cfg, group) {
+      const startPoint = cfg.startPoint;
+      const endPoint = cfg.endPoint;
+
+      const dx = endPoint.x - startPoint.x, dy = endPoint.y - startPoint.y, dst = Math.sqrt(dx*dx + dy*dy)
+      const px =dst > 30 ? 10 * dx / dst : 0, py = dst > 30 ? 10 * dy / dst : 0
+      const shape = group.addShape('path', {
+        attrs: {
+          stroke: '#aaa',
+          path: [
+            ['M', startPoint.x + px, startPoint.y + py],
+            ['L', endPoint.x - px, endPoint.y - py],
+          ],
+        },
+        // must be assigned in G6 3.3 and later versions. it can be any value you want
+        name: 'path-shape',
+      });
+
+      const midPoint = shape.getPoint(0.5);
+      const rad = Math.acos(dx/dst)
+      {
+        const rw = 20, rh = 10
+        const rect = group.addShape('rect', { // 文字的边框
+          attrs: {
+            width: rw,
+            height: rh,
+            fill: '#fff', 
+            radius: 5,
+            // x and y should be minus width / 2 and height / 2 respectively to translate the center of the rect to the midPoint
+            // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上
+          },
+        }); 
+        const toMatrix = G6.Util.transform(
+          [1, 0, 0, 0, 1, 0, 0, 0, 1],
+          [['t', -rw>>1, -rh>>1],['r', dy < 0 ? -rad : rad],['t',midPoint.x,midPoint.y]],
+        );
+        rect.setMatrix(toMatrix)
+      } 
+      {
+        const text = group.addShape('text', { // 文字的边框
+          attrs: { 
+            text: '关系',
+            textAlign: 'center',
+            // textBaseLine: 'alphabetic', 
+            fontSize: 4,
+            fill: '#000',
+            opacity: 0.85,
+          }
+        })
+        const bbox = text.getBBox()
+        text.moveTo(midPoint.x, midPoint.y + (bbox.height>>1))
+        text.rotateAtPoint(midPoint.x, midPoint.y, dy < 0 ? -rad : rad)
+      }
+
+
+      return group;
+    },
+    afterDraw: (cfg, group) => { 
+
+    },
+    setState: (name, value, item) => {
+      if (name === 'focus') {
+        const keyShape = item.get('keyShape');
+        if (value) {
+          if (keyShape.cfg.animating) {
+            return
+          }
+          // const length = keyShape.getTotalLength(); 
+          // To fix stopAnimate not immediately bug
+          window.setTimeout(() => {
+            keyShape.animate(
+              (ratio) => {
+                // the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
+                // const startLen = ratio * length;
+                // Calculate the lineDash
+                const cfg = {
+                  // lineDash: [startLen, length - startLen],
+                  lineDash,
+                  lineDashOffset: - Math.floor(ratio * 10),
+                };
+                return cfg;
+              },
+              {
+                repeat: true, // Whether executes the animation repeatly
+                duration: 1000, // the duration for executing once
+              },
+            );
+          }, 100)
+
+        } else {
+          keyShape.stopAnimate();
+          keyShape.attr('lineDash', null)
+        }
+      }
+    }
+  },
+  // 'single-edge',
+)
+
+
 // 截断长文本。length 为文本截断后长度，elipsis 是后缀
 const formatText = (text, length = 5, elipsis = '...') => {
   if (!text) return '';
@@ -317,10 +429,10 @@ const formatText = (text, length = 5, elipsis = '...') => {
   return text;
 };
 function textXY(root, cfg) {
-  const txtWidth = cfg.label.length > 5 ? 30 : cfg.label.length * 5
+  const txtWidth = cfg.label.length > 5 ? 15 : cfg.label.length * 3
   const { x, y } = cfg
   const _y = y - root.y, _x = x - root.x
-  const rad = 10
+  const rad = 8
   const angle = Math.atan2(_y, _x)
   const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
   // console.log(angle, sinAngle, cosAngle)

src/view/Manage/Map/Component/Relation2.jsx

@@ -27,6 +27,7 @@ class Relation extends React.Component {
 
 export default Relation;
 
+// https://g6.antv.vision/zh/examples/case/largeGraph#index
 
 function init(container, data) {