调整资产浏览关系图

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

@@ -16,30 +16,26 @@ const secondaryHighlightColors = ['#b36cd1', '#48b5a0', '#4a6acc', '#356eff', '#
 
 class Relation extends React.Component {
 
-  // componentDidMount() {
-  //   const { data, onClick } = this.props;
-
-  //   if (data) {
-  //     this.graph = init(this)(this.elem, data, onClick);
-  //   }
-  // }
-
   componentDidUpdate(prevProps, prevState) {
-    const { data, expandTree, onCenterClick, onExpandClick } = this.props;
+    const { data, expandTree, expandId, onCenterClick, onExpandClick } = this.props;
 
     if (data) {
-
       if (data !== prevProps.data) {
-        const newData = JSON.parse(JSON.stringify(data));
-
+        if ((expandId||'') === '') {
           this.graph?.destroy();
-        this.graph = init(this)(this.elem, newData, onCenterClick, onExpandClick);
+          this.graph = init(this)(this.elem, data, onCenterClick, onExpandClick);
+        } else {
+          if (data && (data.children||[]).length > 0) {
+            this.graph?.updateChild(data, 'root');
+          }
+        }
       } 
     }
 
     if (expandTree !== prevProps.expandTree && prevProps.expandTree!==null) {
-      if (!this.elem || !this.elem.scrollWidth || !this.elem.scrollHeight) return;
-      this.graph?.changeSize(this.elem.scrollWidth, this.elem.scrollHeight);
+      if (!this.elem || !this.elem.clientWidth || !this.elem.clientHeight) return;
+
+      this.graph?.changeSize(this.elem.clientWidth, this.elem.clientHeight);
     }
     
   }
@@ -379,6 +375,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
     height,
     linkCenter: true,
     plugins: [tooltip],
+    animate: false,
     modes: {
       default: [
         'drag-canvas',
@@ -406,6 +403,9 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
       rankSep: 150,
       radial: true,
     },
+
+    //fitView不能放在render后面, 否则调用updateChild会刷新界面
+    fitView: (data && (data?.children||[]).length > 0) ? true : false,
   });
 
   const fittingString = (str, maxWidth, fontSize) => {
@@ -441,9 +441,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
   graph.data(data);
   graph.render();
 
-  if (data && (data?.children||[]).length>0) {
-    graph.fitView();
-  } else {
+  if (data && (data?.children||[]).length === 0) {
     //只有一个节点的时候 居中显示
     graph.fitCenter();
   }

src/view/Manage/AssetBrowse/Component/RelationContainer.jsx

@@ -184,7 +184,7 @@ const RelationContainer = (props) => {
 
   return (
     <div style={{ width: '100%', height: '100%', position: 'relative' }}>
-      <Relation data={relationData} expandTree={expandTree} onCenterClick={onCenterClick} onExpandClick={onExpandClick} />
+      <Relation data={relationData} expandId={nodeParams?.expandId} expandTree={expandTree} onCenterClick={onCenterClick} onExpandClick={onExpandClick} />
       <div className='title-text' style={{ position: 'absolute', left: 15, top: 24, fontWeight: 'bold' }} >关系图</div>
     </div>
   );

src/view/Manage/VirtualTable/helper.ts

-/* 
-  https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
-*/
-export function getScrollbarWidth() {
-
-  // Creating invisible container
-  const outer = document.createElement('div');
-  outer.style.visibility = 'hidden';
-  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
-  (outer.style as any).msOverflowStyle = 'scrollbar'; // needed for WinJS apps
-  document.body.appendChild(outer);
-
-  // Creating inner element and placing it in the container
-  const inner = document.createElement('div');
-  outer.appendChild(inner);
-
-  // Calculating difference between container's full width and the child width
-  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
-
-  // Removing temporary elements from the DOM
-  outer.parentNode?.removeChild(outer);
-
-  return scrollbarWidth;
-
-}
\ No newline at end of file

src/view/Manage/VirtualTable/table.css

-.virtual-table .ant-table-container:before, .virtual-table .ant-table-container:after {
-  display: none;
-}
-
-.virtual-table-tbody>div.virtual-table-row>div {
-  display: inline-block;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  box-sizing: border-box;
-  /* padding: 16px; */
-  border-bottom: 1px solid #e8e8e8;
-  background: #FFF;
-}
-
-[data-theme="dark"]  .virtual-table-cell {
-  box-sizing: border-box;
-  /* padding: 16px; */
-  border-bottom: 1px solid #303030;
-  background: #141414;
-}
-
-.ant-table-thead > tr > th.w0::before {
-  width: 0 !important;
-}
-
-.virtual-table-tbody>div.virtual-table-row:hover>div {
-  background-color: #fafafa;
-}
-
-
-/* 
-https://github.com/ant-design/ant-design/blob/master/components/table/demo/resizable-column.md
-*/
-
-.virtual-table .react-resizable {
-  position: relative;
-  background-clip: padding-box;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.virtual-table .react-resizable-handle {
-  position: absolute;
-  right: -5px;
-  bottom: 0;
-  z-index: 1;
-  width: 10px;
-  height: 100%;
-  cursor: col-resize;
-}
-
-
-.virtual-table .ant-table-header {
-  background-color: rgba(0, 0, 0, 0.06);
-}
-
-.virtual-table .virtual-table-tbody>div.virtual-table-row>div.virtual-table-cell {
-  padding: 10px;
-}
-
-.virtual-table .virtual-table-tbody>div.virtual-table-row:hover>div.virtual-table-cell {
-  background: #fafafa;
-}
-
-.virtual-table .footer {
-  text-align: center;
-}
-
-.virtual-table .footer {
-  text-align: center;
-  margin-top: 10px;
-}
-
-.virtual-table .footer > span {
-  background-color: #fafafa;
-  padding: 10px; 
-  border-radius: 8px;
-}
\ No newline at end of file