调整relation-node样式，文字位置

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

@@ -45,71 +45,84 @@ class Relation extends React.Component {
   componentDidMount() {
     const { type, loadMoreData } = this.props;
 
-    const container = document.getElementById(`container${type||''}`);
+    const container = document.getElementById(`container${type || ''}`);
     if (!container) return;
-    
+
     const width = container.scrollWidth || 500;
     const height = container.scrollHeight || 500;
 
+    console.debug(container.scrollWidth)
+    let root = null, radius = false
+
     G6.registerNode(
       'relation-node',
       {
-        draw(cfg, group) {    
+        draw(cfg, group) { 
+
+          let [x,y] = [0,0]
+
+          if (cfg.depth === 0) {
+            root = cfg
+            radius = cfg.children?.length > 10
+          } else {
+            [x,y] = textXY(root, cfg)
+          }
+
           group.addShape('circle', {
             attrs: {
               x: 0,
               y: 0,
-              r: cfg.size/2,
+              r: (radius && cfg.depth !== 0) ? 10 : cfg.size/4,
               fill: colors[cfg.depth % colors.length],
             },
           });
-            
+
           const text = group.addShape('text', {
             attrs: {
-              x: 0,
-              y: 0,
+              x,
+              y,
               fill: '#000',
               fontSize: globalFontSize,
               textAlign: 'center',
               textBaseline: 'middle',
-              text: (cfg.label||''),
+              text: (cfg.label || ''),
             }
           });
-
-          const bbox = text.getBBox();
           
-          if (cfg.dbType==='Root' || cfg.dbType==='Dir') {
+          const bbox = text.getBBox();
+
+          if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') {
             if (!cfg.children) {
               group.addShape('marker', {
                 attrs: {
-                  x: bbox.maxX + 8,
-                  y: bbox.height/2,
+                  x: bbox.maxX,
+                  y: bbox.maxY,
                   r: 6,
                   symbol: EXPAND_ICON,
                   stroke: '#73d13d',
                   lineWidth: 2,
                 }
               });
-            } else if ((cfg.children||[]).length>0) {
+            } else if ((cfg.children || []).length > 0) {
               group.addShape('marker', {
                 attrs: {
                   x: bbox.maxX + 8,
-                  y: bbox.height/2,
+                  y: bbox.height >> 1,
                   r: 6,
-                  symbol:  cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
+                  symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
                   stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
                   lineWidth: 2,
                 }
               });
             }
           }
-    
+
           return group;
         },
         update: undefined,
       },
       'single-node'
-    ); 
+    );
 
     const tooltip = new G6.Tooltip({
       offsetX: 10,
@@ -124,14 +137,14 @@ class Relation extends React.Component {
         outDiv.style.width = 'fit-content';
         //outDiv.style.padding = '0px 0px 20px 0px';
         outDiv.innerHTML = `
-          <h4>${e.item.getModel().text||''}</h4>
+          <h4>${e.item.getModel().text || ''}</h4>
           `;
         return outDiv;
       },
     });
 
     graph = new G6.TreeGraph({
-      container: `container${type||''}`,
+      container: `container${type || ''}`,
       width,
       height,
       plugins: [tooltip],
@@ -206,7 +219,7 @@ class Relation extends React.Component {
 
     graph.node(function (node) {
       return {
-        label: fittingString(node.text||'', node.size-32, globalFontSize),
+        label: fittingString(node.text || '', node.size - 32, globalFontSize),
       };
     });
 
@@ -217,17 +230,17 @@ class Relation extends React.Component {
       const nodeId = node.get('id');
       const model = node.getModel();
 
-      if (model.dbType==='Dir') {
+      if (model.dbType === 'Dir') {
         const children = model.children;
         if (!children && loadMoreData) {
-          loadMoreData(model.dirId||'', nodeId);
+          loadMoreData(model.dirId || '', nodeId);
         }
       } else if (model.dbType !== 'Root') {
         //通过资产id跳转到资产详情页
         // model.tableModelId
         // history && history.push(`${ContextPath}/home`);
       }
-      
+
     });
 
     if (typeof window !== 'undefined') {
@@ -237,28 +250,28 @@ class Relation extends React.Component {
         graph.changeSize(container.scrollWidth, container.scrollHeight);
       };
     }
-    
+
   }
 
   layoutGraph = () => {
     const { data } = this.props;
 
-    if(graph && data){
-     
+    if (graph && data) {
+
       function recursionTreeData(treeData, depth) {
-        if ((treeData||[]).length === 0) return;
-  
-        (treeData||[]).forEach((item, index) => {
+        if ((treeData || []).length === 0) return;
 
-          item.size = (100-depth*20)>60?(100-depth*20):60;
+        (treeData || []).forEach((item, index) => {
+
+          item.size = (100 - depth * 20) > 60 ? (100 - depth * 20) : 60;
           item.depth = depth;
-          recursionTreeData(item.children||[], depth+1);
+          recursionTreeData(item.children || [], depth + 1);
         })
       }
-  
+
       data.size = 100;
       data.depth = 0;
-      recursionTreeData(data.children||[], 1);
+      recursionTreeData(data.children || [], 1);
 
       graph.data(data);
       graph.render();
@@ -267,19 +280,19 @@ class Relation extends React.Component {
     }
   }
 
-  componentDidUpdate(prevProps, prevState){
+  componentDidUpdate(prevProps, prevState) {
     const { childData, parentNodeId } = this.props;
 
-    if (parentNodeId && parentNodeId!== prevProps.parentNodeId) {
+    if (parentNodeId && parentNodeId !== prevProps.parentNodeId) {
       const parentData = graph.findDataById(parentNodeId);
       if (!parentData.children) {
         parentData.children = [];
       }
 
-      let depth = childData.depth+1;
-      (childData||[]).forEach((item, index) => {
+      let depth = childData.depth + 1;
+      (childData || []).forEach((item, index) => {
 
-        item.size = (100-depth*20)>60?(100-depth*20):60;
+        item.size = (100 - depth * 20) > 60 ? (100 - depth * 20) : 60;
         item.depth = depth;
       })
 
@@ -299,9 +312,28 @@ class Relation extends React.Component {
     const { type } = this.props;
 
     return (
-      <div id={`container${type||''}`} style={{ width: '100%', height: '100%' }}></div>
+      <div id={`container${type || ''}`} style={{ width: '100%', height: '100%' }}></div>
     );
   }
 }
 
-export default Relation; 
+export default Relation;
\ No newline at end of file
+
+
+function textXY(root, cfg) {
+  const txtWidth = 10
+  const { x, y } = cfg
+  const _y = y - root.y, _x = x - root.x
+  const rad = 10
+  const angle = Math.atan2( _y, _x)
+  const sinAngle = Math.sin(angle), cosAngle = Math.cos(angle)
+  // console.log(angle, sinAngle, cosAngle)
+  const radX = rad
+  const radY = rad + Math.abs(sinAngle) * 10 + Math.abs(Math.pow(sinAngle, Math.abs(Math.round(sinAngle * 100)))) * 30 //Math.pow(Math.E, 80 * Math.log(Math.abs(sinAngle))) * 40
+  // console.log(angle, rad, txt) 
+  return [
+    // 右侧文字(中间向右侧15px,上下部向左靠20px) : 左侧
+    radX * cosAngle + (cosAngle > 0 ? txtWidth + 15 - Math.abs(sinAngle*20) : - (txtWidth + 15 -  Math.abs(sinAngle*20))), 
+    radY * sinAngle
+  ];
+}
\ No newline at end of file