enable 下钻

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

 #left-control-container {
+  opacity: .5;
   position: absolute;
   top: 50%;
   left: 20px;
@@ -38,6 +39,7 @@
 
 
 #right-control-container {
+  opacity: .5;
   position: absolute;
   top: 50%;
   right: 20px;

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

@@ -5,6 +5,7 @@ import circle from './circle.93e1.png'
 import node from './node-bg-select.171e.png'
 
 import './Relation.css'
+import { EXPAND_ICON } from './Relation1';
 
 const colors = [
   '#BDD2FD',
@@ -25,11 +26,20 @@ class Relation extends React.Component {
     // console.debug(this.props?.data)
   }
 
-  componentDidUpdate() {
-    this.graph?.destroy();
-    if (this.props.data) {
-      this.graph = init(this.elem, this.props.data)
+  componentDidUpdate(prevProps, _prevState) {
+    const { childData, parentNodeId, data } = this.props;
+    if (parentNodeId && parentNodeId !== prevProps.parentNodeId) {
+      const parentData = this.graph?.findDataById(parentNodeId);
+      if (!parentData.children) {
+        parentData.children = [];
+      }
+      parentData.children = childData;
+      this.graph?.changeData();
+    } else if (this.props.data) {
+      this.graph?.destroy();
+      this.graph = init(this)(this.elem, this.props.data)
     }
+
   }
 
   graph = undefined
@@ -38,11 +48,15 @@ class Relation extends React.Component {
   render() {
 
     return (
-      <div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', overflow: 'hidden', backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' }}>
+      <React.Fragment>
+        <div ref={ref => this.elem = ref} style={{ width: '100%', height: '100%', backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)' }}>
+        </div>
+
         <div id="left-control-container"></div>
         <div id="right-control-container"></div>
         <div id="bottom-bg-container"></div>
-      </div>
+      </React.Fragment>
+
     );
   }
 }
@@ -68,7 +82,7 @@ function countDepth(node, _depth = 0) {
   }
 }
 
-function init(container, data) {
+const init = (ctx) => function (container, data) {
   depthCount = {}
   countDepth(data)
   // console.debug(depthCount)
@@ -150,9 +164,31 @@ function init(container, data) {
     focusNodes.forEach((fnode) => {
       graph.setItemState(fnode, 'focus', false); // false
     });
-    const { item } = evt;
+    const { item, target } = evt;
     graph.setItemState(item, 'focus', true);
     graph.setItemState(item, 'hover', false);
+
+    const targetType = target.get('type');
+    const name = target.get('name');
+    if (targetType === 'marker') { // 响应展开按钮
+      const model = item.getModel();
+      if (name === 'add-item') {
+        const nodeId = item.get('id');
+        if (model.dbType === 'Dir') {
+          const children = model.children;
+          if (!children) {
+            ctx.props?.loadMoreData(model.dirId || '', nodeId);
+          }
+        } else if (model.dbType !== 'Root') {
+          //通过资产id跳转到资产详情页
+          // history && history.push(`${ContextPath}/home`);
+        }
+      }
+    } else { // 展示 node 详情
+
+    }
+
+
   });
 
   if (typeof window !== 'undefined')
@@ -176,42 +212,42 @@ G6.registerNode(
       if (depthCount[cfg.depth] > 10) {
         r = 7
       }
-      width1 = r * 3.5
-      width2 = r * 5
+      width1 = r * 2.5
+      width2 = r * 4
 
       if (cfg.depth === 0) {
         root = cfg
       }
 
-      if (depthCount[cfg.depth] > 10) {
-        group.addShape('image', {
-          attrs: {
-            x: -width1 / 2,
-            y: -width1 / 2,
-            width: width1,
-            height: width1,
-            img: circle,
-          },
-          name: 'halo-shape',
-          visible: false,
-        });
-      }
+      // if (depthCount[cfg.depth] > 10) {
+      group.addShape('image', {
+        attrs: {
+          x: -width1 / 2,
+          y: -width1 / 2,
+          width: width1,
+          height: width1,
+          img: circle,
+        },
+        name: 'halo-shape',
+        visible: false,
+      });
+      // }
 
-      if (depthCount[cfg.depth] > 10) {
-        group.addShape('image', {
-          attrs: {
-            x: -width2 / 2,
-            y: -width2 / 2,
-            width: width2,
-            height: width2,
-            img: node,
-          },
-          name: 'focus-shape',
-          visible: false,
-        });
+      // if (depthCount[cfg.depth] > 10) { 
+      group.addShape('image', {
+        attrs: {
+          x: -width2 / 2,
+          y: -width2 / 2,
+          width: width2,
+          height: width2,
+          img: node,
+        },
+        name: 'focus-shape',
+        visible: false,
+      });
 
-        lineWidth = .8
-      }
+      lineWidth = .8
+      // }
 
       const keyShape = group.addShape('circle', {
         attrs: {
@@ -255,7 +291,38 @@ G6.registerNode(
           },
           name: 'text-shape',
           className: 'text-shape',
-        });
+        }); 
+      }
+
+      const bbox = keyShape.getBBox()
+      // console.debug(bbox)
+      if (cfg.dbType === 'Root' || cfg.dbType === 'Dir') {
+        if (!cfg.children) {
+          group.addShape('marker', {
+            attrs: {
+              x: bbox.maxX + 3,
+              y: -1,
+              r: 3,
+              symbol: EXPAND_ICON,
+              stroke: '#73d13d',
+              lineWidth: .7,
+              cursor: 'pointer',
+            },
+            name: 'add-item',
+          });
+        } 
+        // else if (cfg?.children?.length > 10) {
+        //   group.addShape('marker', {
+        //     attrs: {
+        //       x: bbox.maxX + 8,
+        //       y: bbox.height >> 1,
+        //       r: 6,
+        //       symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
+        //       stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
+        //       lineWidth: 2,
+        //     }
+        //   });
+        // } 
       }
 
       return keyShape;

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

@@ -16,7 +16,7 @@ const colors = [
   '#FFD6E7',
 ];
 
-const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
+export const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
   return [
     ['M', x - r, y - r],
     ['a', r, r, 0, 1, 0, r * 2, 0],
@@ -25,7 +25,7 @@ const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
     ['L', x + r - 2, y - r],
   ];
 };
-const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
+export const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
   return [
     ['M', x - r, y - r],
     ['a', r, r, 0, 1, 0, r * 2, 0],

src/view/Manage/Map/MapContent.jsx

@@ -187,7 +187,7 @@ class MapContent extends React.Component {
     }
 
     return (
-      <div className='position-relative' style={{ height: '100%' }}>
+      <div className='position-relative' style={{ height: '100%', overflow: 'hidden' }}>
         {
           type==='square' && <>
           {