fixed url bug and hide label

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

@@ -6,7 +6,7 @@
   width: 400px;
   height: 620px;
   margin-top: -310px;
-  background-image: url('./assets/border-left.0932.png');
+  background-image: url(./assets/border-left.0932.png);
   background-size: cover;
   background-position: 0;
   -webkit-animation: leftflyin 1s;
@@ -46,7 +46,7 @@
   width: 400px;
   height: 620px;
   margin-top: -310px;
-  background-image: url(https://static.allhistory.com/online/common/img/border-right.61f0.png);
+  background-image: url(./assets/border-right.61f0.png);
   background-size: cover;
   background-position: 100%;
   -webkit-animation: rightflyin 1s;
@@ -81,7 +81,7 @@
 #top-bg-container {
   top: -120px;
   height: 240px;
-  background-image: url(https://static.allhistory.com/online/common/img/top-bg.7c77.png);
+  /* background-image: url(https://static.allhistory.com/online/common/img/top-bg.7c77.png); */
   background-size: 100% 240px
 }
 
@@ -98,7 +98,7 @@
 #bottom-bg-container {
   bottom: 0;
   height: 289px;
-  background-image: url(https://static.allhistory.com/online/common/img/bottom-bg.8d9e.png);
+  background-image: url(./assets/bottom-bg.8d9e.png);
   background-size: cover;
   background-position: top
 }

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

@@ -432,10 +432,12 @@ G6.registerEdge(
             width: rw,
             height: rh,
             fill: '#fff',
-            radius: 2,
+            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 上
           },
+          name: 'rect',
+          visible: false
         });
         const toMatrix = G6.Util.transform(
           [1, 0, 0, 0, 1, 0, 0, 0, 1],
@@ -450,30 +452,32 @@ G6.registerEdge(
             textAlign: 'center',
             fontSize: 4,
             fill: '#000',
-            opacity: 0.85,
-          }
+            opacity: 0.85
+          },
+          name: 'text',
+          visible: false
         })
         const bbox = text.getBBox()
         text.moveTo(midPoint.x, midPoint.y + (bbox.height >> 1))
         text.rotateAtPoint(midPoint.x, midPoint.y, rad > Math.PI * .5 ? radius + Math.PI : radius)
       }
 
-      {
-        const arrow = group.addShape('marker', {
-          attrs: {
-            x: 0,
-            y: 0,
-            r: 2,
-            fill: '#fff',
-            symbol: 'triangle',
-          },
-          // must be assigned in G6 3.3 and later versions. it can be any value you want
-          name: 'marker-shape',
-        });
-        const x = midPoint.x + ((rw >> 1) + 2.5) * dx / dst, y = midPoint.y + ((rw >> 1) + 2.5) * dy / dst
-        arrow.moveTo(x, y)
-        arrow.rotateAtPoint(x, y, radius + Math.PI * .5)
-      }
+      // {
+      //   const arrow = group.addShape('marker', {
+      //     attrs: {
+      //       x: 0,
+      //       y: 0,
+      //       r: 2,
+      //       fill: '#fff',
+      //       symbol: 'triangle',
+      //     },
+      //     // must be assigned in G6 3.3 and later versions. it can be any value you want
+      //     name: 'marker-shape',
+      //   });
+      //   const x = midPoint.x + ((rw >> 1) + 2.5) * dx / dst, y = midPoint.y + ((rw >> 1) + 2.5) * dy / dst
+      //   arrow.moveTo(x, y)
+      //   arrow.rotateAtPoint(x, y, radius + Math.PI * .5)
+      // }
 
       return group;
     },
@@ -483,10 +487,16 @@ G6.registerEdge(
     setState: (name, value, item) => {
       if (name === 'active') {
         const keyShape = item.get('keyShape').get('children')[0];
+        // const rect = item.get('keyShape').get('children')[1];
+        // const text = item.get('keyShape').get('children')[2];
         if (value) {
           keyShape.attr('stroke', highlight);
+          // rect.show()
+          // text.show()
         } else {
           keyShape.attr('stroke', '#aaa');
+          // rect.hide()
+          // text.hide()
         }
       }
       // if (name === 'focus') {