finetune

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

@@ -341,13 +341,13 @@ G6.registerEdge(
       const midPoint = shape.getPoint(0.5);
       const rad = Math.acos(dx/dst)
       {
-        const rw = 20, rh = 10
-        const rect = group.addShape('rect', { // 文字的边框
+        const rw = 20, rh = 6
+        const rect = group.addShape('rect', { // 文字的底框
           attrs: {
             width: rw,
             height: rh,
             fill: '#fff', 
-            radius: 5,
+            radius: 2,
             // 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 上
           },
@@ -359,11 +359,10 @@ G6.registerEdge(
         rect.setMatrix(toMatrix)
       } 
       {
-        const text = group.addShape('text', { // 文字的边框
+        const text = group.addShape('text', { // 文字
           attrs: { 
             text: '关系',
-            textAlign: 'center',
-            // textBaseLine: 'alphabetic', 
+            textAlign: 'center', 
             fontSize: 4,
             fill: '#000',
             opacity: 0.85,
@@ -371,7 +370,8 @@ G6.registerEdge(
         })
         const bbox = text.getBBox()
         text.moveTo(midPoint.x, midPoint.y + (bbox.height>>1))
-        text.rotateAtPoint(midPoint.x, midPoint.y, dy < 0 ? -rad : rad)
+        const radius = dy < 0 ? -rad : rad
+        text.rotateAtPoint(midPoint.x, midPoint.y, rad > Math.PI * .5 ? radius + Math.PI : radius )
       }
 
 
@@ -429,20 +429,19 @@ const formatText = (text, length = 5, elipsis = '...') => {
   return text;
 };
 function textXY(root, cfg) {
-  const txtWidth = cfg.label.length > 5 ? 15 : cfg.label.length * 3
+  const txtWidth = cfg.label.length > 5 ? 24 : cfg.label.length * 4
   const { x, y } = cfg
   const _y = y - root.y, _x = x - root.x
-  const rad = 8
   const angle = Math.atan2(_y, _x)
   const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
-  // console.log(angle, sinAngle, cosAngle)
-  const radX = rad + txtWidth
-  const radY = rad + Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 50)))) * 20 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
-  // console.log(angle, rad, txt) 
+
+  const radX = 4 + txtWidth
+  const radY = Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 50)))) * 10 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
+
   return [
     // 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
     radX * cosAngle,
-    radY * sinAngle + (sinAngle > 0 ? sinAngle * 12 : sinAngle * 2)
+    radY * sinAngle + (sinAngle > 0 ? sinAngle * 20 : sinAngle * 10)
   ];
 }