@riil-frontend/component-topology 0.3.1 → 0.3.2

package/es/core/models/TopoApp.js

@@ -10,6 +10,7 @@ import TopoGraphView from './TopoGraphView';
 import createStore from '../store/createStore';
 import buildProvider from '../components/buildProvider';
 import { formatTreeDataSelect } from '../../utils/format';
+import { getNodes as _getNodes, getEdges as _getEdges } from '../../utils/htElementUtils';
 import Test from '../test/Test';
 var topoDebug = {};
 window.topoDebug = topoDebug;
@@ -99,7 +100,8 @@ var TopoApp = /*#__PURE__*/function () {
 
   _proto.load = /*#__PURE__*/function () {
     var _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(data, options) {
-      var topoDispatchers;
+      var _data$groups, groups, _data$nodes, nodes, links, lines, topoDispatchers;
+
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -108,13 +110,18 @@ var TopoApp = /*#__PURE__*/function () {
                 options = {};
               }
 
+              _data$groups = data.groups, groups = _data$groups === void 0 ? [] : _data$groups, _data$nodes = data.nodes, nodes = _data$nodes === void 0 ? [] : _data$nodes, links = data.links, lines = data.lines;
               topoDispatchers = this.store.getModelDispatchers('topoMod');
-              _context2.next = 4;
+              _context2.next = 5;
               return topoDispatchers.openTopoPage(_extends({
-                data: data
+                data: _extends({}, data, {
+                  groups: groups,
+                  nodes: nodes,
+                  links: links || lines || []
+                })
               }, options));
 
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -147,14 +154,78 @@ var TopoApp = /*#__PURE__*/function () {
     }
 
     return clear;
-  }();
+  }()
+  /**
+   * 全量更新数据
+   *
+   * @param data {{groups: [], nodes: [], lines: []}}
+   */
+  ;
+
+  _proto.updateData =
+  /*#__PURE__*/
+  function () {
+    var _updateData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(data) {
+      var _data$groups2, groups, _data$nodes2, nodes, links, lines;
 
-  _proto.open = /*#__PURE__*/function () {
-    var _open = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(id, mode) {
-      var lastId;
       return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
+            case 0:
+              _data$groups2 = data.groups, groups = _data$groups2 === void 0 ? [] : _data$groups2, _data$nodes2 = data.nodes, nodes = _data$nodes2 === void 0 ? [] : _data$nodes2, links = data.links, lines = data.lines;
+              this.view.topoClient.updateElements({
+                groups: groups,
+                nodes: nodes,
+                links: links || lines || []
+              });
+
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, this);
+    }));
+
+    function updateData(_x3) {
+      return _updateData.apply(this, arguments);
+    }
+
+    return updateData;
+  }()
+  /**
+   * 获取数据
+   * @return {{nodes: [], lines: [], customNodes: [], customLines: []}}
+   */
+  ;
+
+  _proto.getData = function getData() {
+    return {
+      nodes: this.getNodes(),
+      lines: this.getLines(),
+      customNodes: [],
+      customLines: []
+    };
+  };
+
+  _proto.getNodes = function getNodes() {
+    return _getNodes(this.getDataModel());
+  };
+
+  _proto.getLines = function getLines() {
+    return this.getEdges();
+  };
+
+  _proto.getEdges = function getEdges() {
+    return _getEdges(this.getDataModel());
+  };
+
+  _proto.open = /*#__PURE__*/function () {
+    var _open = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(id, mode) {
+      var lastId;
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
             case 0:
               rlog.info('TopoApp.open 打开拓扑图', id); // 如果是切换拓扑图，注销原拓扑图
 
@@ -168,13 +239,13 @@ var TopoApp = /*#__PURE__*/function () {
 
             case 4:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
         }
-      }, _callee4, this);
+      }, _callee5, this);
     }));
 
-    function open(_x3, _x4) {
+    function open(_x4, _x5) {
       return _open.apply(this, arguments);
     }
 
@@ -182,19 +253,19 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.close = /*#__PURE__*/function () {
-    var _close = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+    var _close = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
               rlog.info('关闭拓扑图', this.id);
 
               if (this.id) {
-                _context5.next = 3;
+                _context6.next = 3;
                 break;
               }
 
-              return _context5.abrupt("return");
+              return _context6.abrupt("return");
 
             case 3:
               this.alarm.close();
@@ -202,10 +273,10 @@ var TopoApp = /*#__PURE__*/function () {
 
             case 5:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5, this);
+      }, _callee6, this);
     }));
 
     function close() {
@@ -216,16 +287,16 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.refresh = /*#__PURE__*/function () {
-    var _refresh = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+    var _refresh = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context6.prev = _context6.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
         }
-      }, _callee6);
+      }, _callee7);
     }));
 
     function refresh() {
@@ -236,10 +307,7 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.getDataModel = function getDataModel() {
-    return this.view.topoClient.htTopoClient._mainView._graphView.getDataModel();
-  };
-
-  _proto.updateData = function updateData() {// TODO
+    return this.view.topoClient.getDataModel();
   };
 
   _proto.getSelectionModel = function getSelectionModel() {
@@ -260,19 +328,19 @@ var TopoApp = /*#__PURE__*/function () {
   };
 
   _proto.openViewMode = /*#__PURE__*/function () {
-    var _openViewMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(id) {
-      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+    var _openViewMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(id) {
+      return _regeneratorRuntime.wrap(function _callee8$(_context8) {
         while (1) {
-          switch (_context7.prev = _context7.next) {
+          switch (_context8.prev = _context8.next) {
             case 0:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
         }
-      }, _callee7);
+      }, _callee8);
     }));
 
-    function openViewMode(_x5) {
+    function openViewMode(_x6) {
       return _openViewMode.apply(this, arguments);
     }
 
@@ -286,11 +354,11 @@ var TopoApp = /*#__PURE__*/function () {
   _proto.enterEditMode =
   /*#__PURE__*/
   function () {
-    var _enterEditMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _enterEditMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
       var topoDispatchers, editDispatchers, ciSetDoc, linkDynamicStyleDispatcher, iconManageDispatchers, topoTreeData;
-      return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+      return _regeneratorRuntime.wrap(function _callee9$(_context9) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context9.prev = _context9.next) {
             case 0:
               this.view.topoClient.enterEditMode();
               topoDispatchers = this.store.getModelDispatchers('topoMod');
@@ -321,10 +389,10 @@ var TopoApp = /*#__PURE__*/function () {
 
             case 14:
             case "end":
-              return _context8.stop();
+              return _context9.stop();
           }
         }
-      }, _callee8, this);
+      }, _callee9, this);
     }));
 
     function enterEditMode() {
@@ -335,11 +403,11 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.exitEditMode = /*#__PURE__*/function () {
-    var _exitEditMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _exitEditMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
       var editDispatchers;
-      return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+      return _regeneratorRuntime.wrap(function _callee10$(_context10) {
         while (1) {
-          switch (_context9.prev = _context9.next) {
+          switch (_context10.prev = _context10.next) {
             case 0:
               this.view.topoClient.exitEditMode();
               editDispatchers = this.store.getModelDispatchers('topoCreateMod');
@@ -351,10 +419,10 @@ var TopoApp = /*#__PURE__*/function () {
 
             case 4:
             case "end":
-              return _context9.stop();
+              return _context10.stop();
           }
         }
-      }, _callee9, this);
+      }, _callee10, this);
     }));
 
     function exitEditMode() {
@@ -365,19 +433,19 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.triggerSaveEvent = /*#__PURE__*/function () {
-    var _triggerSaveEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-      return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+    var _triggerSaveEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+      return _regeneratorRuntime.wrap(function _callee11$(_context11) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context11.prev = _context11.next) {
             case 0:
               this.view.topoClient.saveExternal();
 
             case 1:
             case "end":
-              return _context10.stop();
+              return _context11.stop();
           }
         }
-      }, _callee10, this);
+      }, _callee11, this);
     }));
 
     function triggerSaveEvent() {
@@ -388,19 +456,19 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.save = /*#__PURE__*/function () {
-    var _save = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-      return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+    var _save = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+      return _regeneratorRuntime.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context11.prev = _context11.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
               this.triggerSaveEvent();
 
             case 1:
             case "end":
-              return _context11.stop();
+              return _context12.stop();
           }
         }
-      }, _callee11, this);
+      }, _callee12, this);
     }));
 
     function save() {
@@ -411,19 +479,19 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.exportImage = /*#__PURE__*/function () {
-    var _exportImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-      return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+    var _exportImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+      return _regeneratorRuntime.wrap(function _callee13$(_context13) {
         while (1) {
-          switch (_context12.prev = _context12.next) {
+          switch (_context13.prev = _context13.next) {
             case 0:
               this.view.topoClient.exportImage();
 
             case 1:
             case "end":
-              return _context12.stop();
+              return _context13.stop();
           }
         }
-      }, _callee12, this);
+      }, _callee13, this);
     }));
 
     function exportImage() {
@@ -434,16 +502,16 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.switchToViewMode = /*#__PURE__*/function () {
-    var _switchToViewMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-      return _regeneratorRuntime.wrap(function _callee13$(_context13) {
+    var _switchToViewMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+      return _regeneratorRuntime.wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context13.prev = _context13.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
             case "end":
-              return _context13.stop();
+              return _context14.stop();
           }
         }
-      }, _callee13);
+      }, _callee14);
     }));
 
     function switchToViewMode() {
@@ -454,16 +522,16 @@ var TopoApp = /*#__PURE__*/function () {
   }();
 
   _proto.switchToEditMode = /*#__PURE__*/function () {
-    var _switchToEditMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-      return _regeneratorRuntime.wrap(function _callee14$(_context14) {
+    var _switchToEditMode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+      return _regeneratorRuntime.wrap(function _callee15$(_context15) {
         while (1) {
-          switch (_context14.prev = _context14.next) {
+          switch (_context15.prev = _context15.next) {
             case 0:
             case "end":
-              return _context14.stop();
+              return _context15.stop();
           }
         }
-      }, _callee14);
+      }, _callee15);
     }));
 
     function switchToEditMode() {

package/es/core/models/common/TopoClient.js

@@ -43,7 +43,15 @@ var TopoClient = /*#__PURE__*/function () {
     this.emitEvent('', null);
   };
 
-  _proto.clear = function clear() {}
+  _proto.clear = function clear() {};
+
+  _proto.getDataModel = function getDataModel() {
+    return this.htTopoClient._mainView._graphView.getDataModel();
+  };
+
+  _proto.updateElements = function updateElements(elements) {
+    this.emitEvent('topo_update_elements', elements);
+  }
   /**
    * 搜索元素
    *

package/es/icons/icons.js

@@ -0,0 +1 @@
+var map = {};

package/es/utils/htElementUtils.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+function getElementData(element) {
+  var className = element.getClassName();
+  var commonData = {
+    className: className,
+    id: element.getId(),
+    tag: element.getTag(),
+    // 业务id
+    name: element.getName(),
+    attrObject: element.getAttrObject(),
+    styleMap: element.getStyleMap()
+  };
+
+  if (className === 'ht.Edge') {
+    return _extends({}, commonData);
+  }
+
+  return _extends({}, commonData, {
+    position: element.getPosition()
+  });
+}
+
+export function getElements(dataModel) {
+  console.error(111, dataModel.getDatas().getArray());
+  return dataModel.getDatas().getArray();
+}
+export function getNodes(dataModel) {
+  return getElements(dataModel).filter(function (element) {
+    return element.getClassName() === 'ht.Node';
+  }).map(function (element) {
+    var host = element.getHost();
+    return _extends({}, element.getAttrObject(), {
+      tag: element.getId(),
+      image: element.getImage(),
+      groupTag: host ? host.getId() : undefined
+    });
+  });
+}
+export function getEdges(dataModel) {
+  return getElements(dataModel).filter(function (element) {
+    return element.getClassName() === 'ht.Edge';
+  }).map(function (element) {
+    return _extends({}, element.getAttrObject(), {
+      tag: element.getId()
+    });
+  });
+}
+export function getGroupNodes(dataModel, groupIdOrTag) {
+  return getNodes(dataModel).filter(function (element) {
+    return element.groupId === groupIdOrTag || element.groupTag === groupIdOrTag;
+  });
+}

package/es/utils/topoData.js

@@ -82,7 +82,7 @@ var tfGroup = function tfGroup(group) {
 
 function nodeAttributesAdapter(attributes) {
   if (Array.isArray(attributes)) {
-    var map = {};
+    var map = {}; // TODO
   }
 
   return attributes;

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"];