@riil-frontend/component-topology 0.2.9 → 0.3.2

package/lib/components/TopoView/Topo.js

@@ -3,10 +3,10 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Topo = Topo;
+exports.TopoConnect = TopoConnect;
 exports["default"] = void 0;
 
-var _loading = _interopRequireDefault(require("@alifd/next/lib/loading"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -22,6 +22,8 @@ var _TopoNoPermission = _interopRequireDefault(require("./TopoNoPermission"));
 
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 
+var _TopoContent = _interopRequireDefault(require("./TopoContent"));
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -29,63 +31,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 拓扑组件。变化无权限、无数据显示
  */
-function Topo(props) {
+function TopoConnect(props) {
   var engine = props.engine,
-      titleBar = props.titleBar,
-      onEnterEdit = props.onEnterEdit;
-  var store = engine.store;
+      topo = props.topo;
+  var topoApp = engine || topo;
+  var store = topoApp.store;
 
   var _store$useModel = store.useModel('topoMod'),
       topoState = _store$useModel[0],
       topoDispatchers = _store$useModel[1];
 
-  var loading = topoState.loading,
-      topoId = topoState.topoId,
-      topoData = topoState.topoData,
-      topoPermission = topoState.topoPermission;
-
-  var renderContent = function renderContent() {
-    if (!loading && !topoId) {
-      return /*#__PURE__*/_react["default"].createElement(_NoDataPage["default"], {
-        imgSize: "large",
-        className: _indexModule["default"].empty
-      });
-    } else if (!topoId) {
-      return null;
-    } // if (loading) {
-    //   return null;
-    // }
-
-
-    if (!loading) {
-      // 加载完成后
-      if (topoPermission && !_topoPermissonUtil["default"].isReadable(topoPermission)) {
-        return /*#__PURE__*/_react["default"].createElement(_TopoNoPermission["default"], null);
-      }
-
-      if (!topoData) {
-        return /*#__PURE__*/_react["default"].createElement(_Topo["default"], null);
-      }
-    }
-
-    return /*#__PURE__*/_react["default"].createElement(_topoView["default"], {
-      engine: engine,
-      titleBar: titleBar,
-      onEnterEdit: onEnterEdit
-    });
-  };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"]['topo-center-view']
-  }, renderContent(), loading ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"]['topo-center-mask']
-  }, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
-    className: _indexModule["default"]['topo-center-mask-loading'],
-    visible: true,
-    inline: false
-  })) : null);
+  return /*#__PURE__*/_react["default"].createElement(_TopoContent["default"], (0, _extends2["default"])({}, props, {
+    topoState: topoState
+  }));
 }
 
-;
-var _default = Topo;
+var _default = TopoConnect;
 exports["default"] = _default;

package/lib/components/TopoView/TopoContent.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TopoContent = TopoContent;
+exports["default"] = void 0;
+
+var _loading = _interopRequireDefault(require("@alifd/next/lib/loading"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NoDataPage = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/components/NoDataPage"));
+
+var _topoView = _interopRequireDefault(require("./topoView"));
+
+var _topoPermissonUtil = _interopRequireDefault(require("../../utils/topoPermissonUtil"));
+
+var _Topo = _interopRequireDefault(require("./Topo404"));
+
+var _TopoNoPermission = _interopRequireDefault(require("./TopoNoPermission"));
+
+var _indexModule = _interopRequireDefault(require("../index.module.scss"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 拓扑组件。变化无权限、无数据显示
+ */
+function TopoContent(props) {
+  var engine = props.engine,
+      topo = props.topo,
+      topoState = props.topoState,
+      titleBar = props.titleBar,
+      onEnterEdit = props.onEnterEdit;
+  var topoApp = engine || topo;
+  var loading = topoState.loading,
+      topoId = topoState.topoId,
+      topoData = topoState.topoData,
+      topoPermission = topoState.topoPermission;
+
+  var renderContent = function renderContent() {
+    if (!loading && !topoId) {
+      return /*#__PURE__*/_react["default"].createElement(_NoDataPage["default"], {
+        imgSize: "large",
+        className: _indexModule["default"].empty
+      });
+    } else if (!topoId) {
+      return null;
+    } // if (loading) {
+    //   return null;
+    // }
+
+
+    if (!loading) {
+      // 加载完成后
+      if (topoPermission && !_topoPermissonUtil["default"].isReadable(topoPermission)) {
+        return /*#__PURE__*/_react["default"].createElement(_TopoNoPermission["default"], null);
+      }
+
+      if (!topoData) {
+        return /*#__PURE__*/_react["default"].createElement(_Topo["default"], null);
+      }
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_topoView["default"], {
+      engine: topoApp,
+      titleBar: titleBar,
+      onEnterEdit: onEnterEdit
+    });
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"]['topo-center-view']
+  }, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
+    className: _indexModule["default"]['topo-center-mask-loading'],
+    visible: loading
+  }, renderContent()));
+}
+
+var _default = TopoContent;
+exports["default"] = _default;

package/lib/components/TopoView/settings/GroupNodeList/GroupNodeList.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = GroupNodeList;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ResourceList = _interopRequireDefault(require("./ResourceList"));
+
+var _htElementUtils = require("../../../../utils/htElementUtils");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function GroupNodeList(props) {
+  var topo = props.topo,
+      group = props.group;
+  var nodes = (0, _htElementUtils.getGroupNodes)(topo.getDataModel(), group.id);
+  var data = nodes.map(function (node) {
+    return {
+      title: node.name,
+      img: '/ht/image/topo/s/交换机_48.png'
+    };
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ResourceList["default"], {
+    data: data
+  }));
+}
+
+;

package/lib/components/TopoView/settings/{ResourceList.js → GroupNodeList/ResourceList.js}

@@ -20,55 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function ResourceList(props) {
-  var data = [{
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$10'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$10'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$10'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }, {
-    title: 'S6252G-24',
-    img: '/ht/image/topo/s/交换机_48.png',
-    money: '$20'
-  }];
+  var data = props.data;
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: _ResourceListModule["default"].list
   }, data.map(function (item, key) {
@@ -84,8 +36,6 @@ function ResourceList(props) {
   })));
 }
 
-;
-
 ResourceList.Select = function Select(props) {
   var _useState = (0, _react.useState)(false),
       isSelectResource = _useState[0],
@@ -95,8 +45,8 @@ ResourceList.Select = function Select(props) {
     text: true,
     type: "primary",
     onClick: function onClick(e) {
-      setIsSelectResource(true);
       e.stopPropagation();
+      setIsSelectResource(true);
     }
   }, "\u9009\u62E9"), /*#__PURE__*/_react["default"].createElement(_SelectResource["default"] // mode="single"
   , {

package/lib/components/TopoView/settings/LayerSettingsForm.js

@@ -31,7 +31,9 @@ var _ColorPicker = _interopRequireDefault(require("../../edit/LinkDynamicStyleSe
 
 var _RuleStyleModule = _interopRequireDefault(require("../../edit/LinkDynamicStyleSettingDrawer/rule/RuleStyle.module.scss"));
 
-var _ResourceList = _interopRequireDefault(require("./ResourceList"));
+var _ResourceList = _interopRequireDefault(require("./GroupNodeList/ResourceList"));
+
+var _GroupNodeList = _interopRequireDefault(require("./GroupNodeList/GroupNodeList"));
 
 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); }
 
@@ -102,7 +104,8 @@ function parseValues(values) {
 }
 
 function LayerSettingsForm(props) {
-  var values = props.values,
+  var topo = props.topo,
+      values = props.values,
       _onChange = props.onChange;
 
   var field = _field["default"].useField({
@@ -145,7 +148,10 @@ function LayerSettingsForm(props) {
           flex: 1
         }
       }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_ResourceList["default"].Select, null))
-    }, /*#__PURE__*/_react["default"].createElement(_ResourceList["default"], null));
+    }, /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
+      topo: topo,
+      group: values
+    }));
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_form["default"], {

package/lib/components/TopoView/settings/Settings.js

@@ -77,6 +77,7 @@ function Settings(props) {
   }, "\u5C5E\u6027\u9762\u677F"), /*#__PURE__*/_react["default"].createElement("div", {
     className: _SettingsModule["default"].settings
   }, /*#__PURE__*/_react["default"].createElement(Component, {
+    topo: topo,
     values: values,
     onChange: updateElementProperty
   })));

package/lib/components/TopoView/toolbar/index.js

@@ -14,4 +14,8 @@ exports.SearchWidget = _SearchWidget["default"];
 
 var _TitleWidget = _interopRequireDefault(require("./widgets/TitleWidget"));
 
-exports.TitleWidget = _TitleWidget["default"];
+exports.TitleWidget = _TitleWidget["default"];
+
+var _ViewTools = _interopRequireDefault(require("./ViewTools"));
+
+exports.ViewerTools = _ViewTools["default"];

package/lib/components/TopoView/toolbar/widgets/EditButton.js

@@ -31,7 +31,7 @@ function EditButton(props) {
       topoState = _store$useModel[0];
 
   var topoPermission = topoState.topoPermission;
-  var show = showEditButton && (topo.options.usePermission ? !_topoPermissonUtil["default"].isEditable(topoPermission) : true);
+  var show = showEditButton && (topo.options.usePermission ? _topoPermissonUtil["default"].isEditable(topoPermission) : true);
 
   if (!show) {
     return null;

package/lib/components/TopoView/topoView.js

@@ -47,6 +47,7 @@ var TopoView = function TopoView(props) {
   var engine = props.engine,
       topo = props.topo,
       titleBar = props.titleBar,
+      onRefreshTopo = props.onRefresh,
       onEnterEdit = props.onEnterEdit,
       onSave = props.onSave;
   var topoApp = engine || topo;
@@ -154,7 +155,7 @@ var TopoView = function TopoView(props) {
   var onRefresh = function onRefresh(e) {
     _rlog["default"].debug('TopoView:onRefresh', e);
 
-    topoDispatchers.refreshTopo();
+    onRefreshTopo ? onRefreshTopo() : topoDispatchers.refreshTopo();
   };
   /**
    * 接收HT传递的事件
@@ -271,11 +272,9 @@ TopoView.propTypes = {
   topo: _propTypes["default"].any,
   // 工具栏
   titleBar: _propTypes["default"].oneOf([_react["default"].ReactNode, false]),
-  // 保存回调
+  // 进入编辑模式
   onEnterEdit: _propTypes["default"].func
 };
-TopoView.defaultProps = {
-  onEnterEdit: function onEnterEdit() {}
-};
+TopoView.defaultProps = {};
 var _default = TopoView;
 exports["default"] = _default;

package/lib/components/index.module.scss

@@ -13,17 +13,15 @@
   .isShow {
     display: block;
   }
+}
 
-  .topo-center-mask {
-    height: calc(100% - 125px);
-    width: calc(100% - 280px);
-    position: fixed;
-    top: 107px;
-    left: 252px;
-    border-radius: 4px;
-    background: rgba(255, 255, 255, .1);
 
-    .topo-center-mask-loading {
+.topo-center-mask-loading {
+  width: 100%;
+  height: 100%;
+
+  :global {
+    .next-loading-wrap {
       height: 100%;
     }
   }