@riil-frontend/component-topology 10.0.20 → 10.0.21

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "10.0.20" === 'string' ? "10.0.20" : null;
+var version = typeof "10.0.21" === 'string' ? "10.0.21" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js

@@ -1,5 +1,4 @@
 import React, { useRef } from 'react';
-import { TopoEvent } from '@riil-frontend/component-topology-graph';
 import DefaultDetailContent from "../../ResourceDetail/DefaultDetailContent";
 
 function useElementDetailManager(props) {
@@ -14,7 +13,6 @@ function useElementDetailManager(props) {
   var visible = resourceDetailState.visible,
       id = resourceDetailState.id;
   var resourceData = topo.dataModel.useDataById(id);
-  var currentHtElementRef = useRef(null);
 
   function init() {
     var notifier = topo.view.topoClient.notifier;
@@ -24,10 +22,14 @@ function useElementDetailManager(props) {
 
   function destroy() {
     var notifier = topo.view.topoClient.notifier;
+
+    if (!notifier) {
+      return;
+    }
+
     notifier.off('topo_element_double_click', handleDblClick);
     notifier.off('topo_element_click', handleClick); // 清除数据
 
-    currentHtElementRef.current = null;
     resourceDetailDispatchers.reset();
     var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
     topoDispatchers.update({
@@ -38,32 +40,17 @@ function useElementDetailManager(props) {
 
   /**
    * 
-   * @param {{id: string, htElement?}} data 
+   * @param {{id: string, htElement}} data 
    * @returns 
    */
 
 
   function open(data) {
-    var id = data.id;
-    var resourceData = topo.dataModel.getDataById(id);
-    var htElement = data.htElement || topo.getDataModel().getDataByTag(id); // 如果是资源/链路，没有权限不显示
-
-    if (resourceData) {
-      var operation = resourceData.operation,
-          permission = resourceData.permission;
-
-      if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
-        return;
-      }
-    } // 自定义显示方法
-
-
-    if (!canShow(htElement)) {
-      return;
-    }
-
+    var id = data.id,
+        htElement = data.htElement;
     var content = getDetailContent({
-      id: id
+      id: id,
+      htElement: htElement
     });
 
     if (content) {
@@ -74,13 +61,27 @@ function useElementDetailManager(props) {
     }
   }
 
+  function openByHtElement(htElement) {
+    open({
+      id: htElement.getTag() || "ht:" + htElement.getId(),
+      htElement: htElement
+    });
+  }
+
+  function openByDataId(dataId) {
+    var htElement = topo.getDataModel().getDataByTag(id);
+    open({
+      id: dataId,
+      htElement: htElement
+    });
+  }
+
   function change(data) {
     open(data);
   } // 重置
 
 
   function reset() {
-    currentHtElementRef.current = null;
     resourceDetailDispatchers.reset();
     var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
     topoDispatchers.update({
@@ -91,7 +92,6 @@ function useElementDetailManager(props) {
 
 
   function close() {
-    currentHtElementRef.current = null;
     resourceDetailDispatchers.update({
       visible: false
     });
@@ -103,10 +103,7 @@ function useElementDetailManager(props) {
         lock = _topo$store$getModelS.lock;
 
     if (lock) {
-      open({
-        id: htElement.getTag() || "ht:" + htElement.getId(),
-        htElement: htElement
-      });
+      openByHtElement(htElement);
     }
   } // 单击切换
 
@@ -119,11 +116,7 @@ function useElementDetailManager(props) {
       return;
     }
 
-    var data = htElement.getAttrObject();
-    open({
-      id: data.id,
-      htElement: htElement
-    });
+    openByHtElement(htElement);
   }
 
   function getDefaultDetailContent(_ref) {
@@ -142,14 +135,24 @@ function useElementDetailManager(props) {
   }
 
   function getDetailContent(_ref2) {
-    var id = _ref2.id;
+    var id = _ref2.id,
+        htElement = _ref2.htElement;
+    var resourceData = topo.dataModel.getDataById(id); // 如果是资源/链路，没有权限不显示
+
+    if (resourceData) {
+      var operation = resourceData.operation,
+          permission = resourceData.permission;
 
-    if (!id) {
-      return null;
+      if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
+        return;
+      }
+    } // 自定义显示方法
+
+
+    if (!canShow(htElement)) {
+      return;
     }
 
-    var resourceData = topo.dataModel.getDataById(id);
-    var htElement = topo.getDataModel().getDataByTag(id);
     var widget; // 支持自定义概览
 
     var _ref3 = resourceDetailProps || {},
@@ -174,9 +177,15 @@ function useElementDetailManager(props) {
     return widget;
   }
 
-  var Content = visible && id ? getDetailContent({
-    id: id
-  }) : null;
+  function getDetailContentById(id) {
+    var htElement = topo.getDataModel().getDataByTag(id) || topo.getDataModel().getDataById(id.replace('ht:', ''));
+    return getDetailContent({
+      id: id,
+      htElement: htElement
+    });
+  }
+
+  var Content = visible && id ? getDetailContentById(id) : null;
   var elementDetailManager = {
     visible: visible,
     id: id,
@@ -185,6 +194,7 @@ function useElementDetailManager(props) {
     init: init,
     destroy: destroy,
     open: open,
+    openByDataId: openByDataId,
     change: change,
     reset: reset,
     close: close,

package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js

@@ -13,24 +13,24 @@ function ResourceDetailDrawer(props) {
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       topoId = _topo$store$useModelS.topoId;
 
-  var elementDetailManager = useElementDetailManager({
+  var detailManager = useElementDetailManager({
     topo: topo,
     canShow: canShow,
     resourceDetailProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps
   });
-  var visible = elementDetailManager.visible,
-      id = elementDetailManager.id,
-      resourceData = elementDetailManager.resourceData,
-      Content = elementDetailManager.Content;
+  var visible = detailManager.visible,
+      id = detailManager.id,
+      resourceData = detailManager.resourceData,
+      Content = detailManager.Content;
   useEffect(function () {
-    elementDetailManager.init();
+    detailManager.init();
     return function () {
-      elementDetailManager.destroy();
+      detailManager.destroy();
     };
   }, []); // 解决切换拓扑图隐藏概览
 
   useEffect(function () {
-    elementDetailManager.reset();
+    detailManager.reset();
   }, [topoId]);
   return /*#__PURE__*/React.createElement(DetailDrawer, {
     visible: visible,
@@ -38,16 +38,16 @@ function ResourceDetailDrawer(props) {
       id: id,
       data: resourceData,
       topo: topo,
-      onChange: elementDetailManager.open
+      detailManager: detailManager
     }),
-    onClose: elementDetailManager.close
+    onClose: detailManager.close
   }, visible && /*#__PURE__*/React.createElement(Content, _extends({}, props, {
     topo: topo,
     visible: visible,
     id: id,
     viewerProps: viewerProps,
-    onClose: elementDetailManager.close,
-    onChangeActive: elementDetailManager.open
+    onClose: detailManager.close,
+    onChangeActive: detailManager.open
   })));
 }
 

package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailPlugin.js

@@ -3,11 +3,15 @@ import React from 'react';
 import ResourceDetailDrawer from "./ResourceDetailDrawer";
 
 function ResourceDetailPlugin(props) {
-  var viewerProps = props.viewerProps;
+  var topo = props.topo,
+      viewerProps = props.viewerProps;
   var resourceDetailProps = viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps;
   var hideResourceDetailDrawer = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.hideResourceDetailDrawer) === true;
 
-  if (hideResourceDetailDrawer) {
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded;
+
+  if (graphLoaded || hideResourceDetailDrawer) {
     return null;
   }
 

package/es/core/viewer/components/plugins/ResourceDetail/components/DrawerTitle.js

@@ -6,7 +6,7 @@ import styles from "../index.module.scss";
 
 function NodeDrawerTitle(_ref) {
   var id = _ref.id,
-      onChange = _ref.onChange,
+      detailManager = _ref.detailManager,
       topo = _ref.topo;
 
   var _useState = useState(''),
@@ -43,9 +43,7 @@ function NodeDrawerTitle(_ref) {
       className: styles['drawer-title']
     }, name),
     onItemClick: function onItemClick(key) {
-      return onChange({
-        id: key
-      });
+      return detailManager.openByDataId(key);
     }
   }, isAvailableArray(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
     return /*#__PURE__*/React.createElement(_MenuButton.Item, {
@@ -59,7 +57,6 @@ function NodeDrawerTitle(_ref) {
 
 function LinkDrawerTitle(_ref2) {
   var id = _ref2.id,
-      onChange = _ref2.onChange,
       topo = _ref2.topo;
   return /*#__PURE__*/React.createElement("div", {
     className: styles['drawer-title']
@@ -69,7 +66,6 @@ function LinkDrawerTitle(_ref2) {
 function Title(props) {
   var id = props.id,
       data = props.data,
-      onChange = props.onChange,
       topo = props.topo;
 
   if (!id) {

package/lib/core/models/TopoApp.js

@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "10.0.20" === 'string' ? "10.0.20" : null;
+var version = typeof "10.0.21" === 'string' ? "10.0.21" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
-
 var _DefaultDetailContent = _interopRequireDefault(require("../../ResourceDetail/DefaultDetailContent"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,7 +25,6 @@ function useElementDetailManager(props) {
   var visible = resourceDetailState.visible,
       id = resourceDetailState.id;
   var resourceData = topo.dataModel.useDataById(id);
-  var currentHtElementRef = (0, _react.useRef)(null);
 
   function init() {
     var notifier = topo.view.topoClient.notifier;
@@ -37,10 +34,14 @@ function useElementDetailManager(props) {
 
   function destroy() {
     var notifier = topo.view.topoClient.notifier;
+
+    if (!notifier) {
+      return;
+    }
+
     notifier.off('topo_element_double_click', handleDblClick);
     notifier.off('topo_element_click', handleClick); // 清除数据
 
-    currentHtElementRef.current = null;
     resourceDetailDispatchers.reset();
     var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
     topoDispatchers.update({
@@ -51,32 +52,17 @@ function useElementDetailManager(props) {
 
   /**
    * 
-   * @param {{id: string, htElement?}} data 
+   * @param {{id: string, htElement}} data 
    * @returns 
    */
 
 
   function open(data) {
-    var id = data.id;
-    var resourceData = topo.dataModel.getDataById(id);
-    var htElement = data.htElement || topo.getDataModel().getDataByTag(id); // 如果是资源/链路，没有权限不显示
-
-    if (resourceData) {
-      var operation = resourceData.operation,
-          permission = resourceData.permission;
-
-      if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
-        return;
-      }
-    } // 自定义显示方法
-
-
-    if (!canShow(htElement)) {
-      return;
-    }
-
+    var id = data.id,
+        htElement = data.htElement;
     var content = getDetailContent({
-      id: id
+      id: id,
+      htElement: htElement
     });
 
     if (content) {
@@ -87,13 +73,27 @@ function useElementDetailManager(props) {
     }
   }
 
+  function openByHtElement(htElement) {
+    open({
+      id: htElement.getTag() || "ht:" + htElement.getId(),
+      htElement: htElement
+    });
+  }
+
+  function openByDataId(dataId) {
+    var htElement = topo.getDataModel().getDataByTag(id);
+    open({
+      id: dataId,
+      htElement: htElement
+    });
+  }
+
   function change(data) {
     open(data);
   } // 重置
 
 
   function reset() {
-    currentHtElementRef.current = null;
     resourceDetailDispatchers.reset();
     var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
     topoDispatchers.update({
@@ -104,7 +104,6 @@ function useElementDetailManager(props) {
 
 
   function close() {
-    currentHtElementRef.current = null;
     resourceDetailDispatchers.update({
       visible: false
     });
@@ -116,10 +115,7 @@ function useElementDetailManager(props) {
         lock = _topo$store$getModelS.lock;
 
     if (lock) {
-      open({
-        id: htElement.getTag() || "ht:" + htElement.getId(),
-        htElement: htElement
-      });
+      openByHtElement(htElement);
     }
   } // 单击切换
 
@@ -132,11 +128,7 @@ function useElementDetailManager(props) {
       return;
     }
 
-    var data = htElement.getAttrObject();
-    open({
-      id: data.id,
-      htElement: htElement
-    });
+    openByHtElement(htElement);
   }
 
   function getDefaultDetailContent(_ref) {
@@ -155,14 +147,24 @@ function useElementDetailManager(props) {
   }
 
   function getDetailContent(_ref2) {
-    var id = _ref2.id;
+    var id = _ref2.id,
+        htElement = _ref2.htElement;
+    var resourceData = topo.dataModel.getDataById(id); // 如果是资源/链路，没有权限不显示
+
+    if (resourceData) {
+      var operation = resourceData.operation,
+          permission = resourceData.permission;
 
-    if (!id) {
-      return null;
+      if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
+        return;
+      }
+    } // 自定义显示方法
+
+
+    if (!canShow(htElement)) {
+      return;
     }
 
-    var resourceData = topo.dataModel.getDataById(id);
-    var htElement = topo.getDataModel().getDataByTag(id);
     var widget; // 支持自定义概览
 
     var _ref3 = resourceDetailProps || {},
@@ -187,9 +189,15 @@ function useElementDetailManager(props) {
     return widget;
   }
 
-  var Content = visible && id ? getDetailContent({
-    id: id
-  }) : null;
+  function getDetailContentById(id) {
+    var htElement = topo.getDataModel().getDataByTag(id) || topo.getDataModel().getDataById(id.replace('ht:', ''));
+    return getDetailContent({
+      id: id,
+      htElement: htElement
+    });
+  }
+
+  var Content = visible && id ? getDetailContentById(id) : null;
   var elementDetailManager = {
     visible: visible,
     id: id,
@@ -198,6 +206,7 @@ function useElementDetailManager(props) {
     init: init,
     destroy: destroy,
     open: open,
+    openByDataId: openByDataId,
     change: change,
     reset: reset,
     close: close,

package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js

@@ -29,24 +29,24 @@ function ResourceDetailDrawer(props) {
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       topoId = _topo$store$useModelS.topoId;
 
-  var elementDetailManager = (0, _useElementDetailManager["default"])({
+  var detailManager = (0, _useElementDetailManager["default"])({
     topo: topo,
     canShow: canShow,
     resourceDetailProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps
   });
-  var visible = elementDetailManager.visible,
-      id = elementDetailManager.id,
-      resourceData = elementDetailManager.resourceData,
-      Content = elementDetailManager.Content;
+  var visible = detailManager.visible,
+      id = detailManager.id,
+      resourceData = detailManager.resourceData,
+      Content = detailManager.Content;
   (0, _react.useEffect)(function () {
-    elementDetailManager.init();
+    detailManager.init();
     return function () {
-      elementDetailManager.destroy();
+      detailManager.destroy();
     };
   }, []); // 解决切换拓扑图隐藏概览
 
   (0, _react.useEffect)(function () {
-    elementDetailManager.reset();
+    detailManager.reset();
   }, [topoId]);
   return /*#__PURE__*/_react["default"].createElement(_DetailDrawer["default"], {
     visible: visible,
@@ -54,16 +54,16 @@ function ResourceDetailDrawer(props) {
       id: id,
       data: resourceData,
       topo: topo,
-      onChange: elementDetailManager.open
+      detailManager: detailManager
     }),
-    onClose: elementDetailManager.close
+    onClose: detailManager.close
   }, visible && /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, props, {
     topo: topo,
     visible: visible,
     id: id,
     viewerProps: viewerProps,
-    onClose: elementDetailManager.close,
-    onChangeActive: elementDetailManager.open
+    onClose: detailManager.close,
+    onChangeActive: detailManager.open
   })));
 }
 

package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailPlugin.js

@@ -12,11 +12,15 @@ var _react = _interopRequireDefault(require("react"));
 var _ResourceDetailDrawer = _interopRequireDefault(require("./ResourceDetailDrawer"));
 
 function ResourceDetailPlugin(props) {
-  var viewerProps = props.viewerProps;
+  var topo = props.topo,
+      viewerProps = props.viewerProps;
   var resourceDetailProps = viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps;
   var hideResourceDetailDrawer = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.hideResourceDetailDrawer) === true;
 
-  if (hideResourceDetailDrawer) {
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded;
+
+  if (graphLoaded || hideResourceDetailDrawer) {
     return null;
   }
 

package/lib/core/viewer/components/plugins/ResourceDetail/components/DrawerTitle.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function NodeDrawerTitle(_ref) {
   var id = _ref.id,
-      onChange = _ref.onChange,
+      detailManager = _ref.detailManager,
       topo = _ref.topo;
 
   var _useState = (0, _react.useState)(''),
@@ -58,9 +58,7 @@ function NodeDrawerTitle(_ref) {
       className: _indexModule["default"]['drawer-title']
     }, name),
     onItemClick: function onItemClick(key) {
-      return onChange({
-        id: key
-      });
+      return detailManager.openByDataId(key);
     }
   }, (0, _utils.isAvailableArray)(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement(_menuButton["default"].Item, {
@@ -74,7 +72,6 @@ function NodeDrawerTitle(_ref) {
 
 function LinkDrawerTitle(_ref2) {
   var id = _ref2.id,
-      onChange = _ref2.onChange,
       topo = _ref2.topo;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"]['drawer-title']
@@ -84,7 +81,6 @@ function LinkDrawerTitle(_ref2) {
 function Title(props) {
   var id = props.id,
       data = props.data,
-      onChange = props.onChange,
       topo = props.topo;
 
   if (!id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "10.0.20",
+  "version": "10.0.21",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@10.0.20/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@10.0.21/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }