@riil-frontend/component-topology 2.1.5-dev.3 → 2.1.9

package/lib/components/ResourceList/index.js

@@ -5,227 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var _utils = require("@riil-frontend/utils");
-
-var _nextFormTable = _interopRequireDefault(require("@ahooksjs/next-form-table"));
-
-var _useFilterPlugin = _interopRequireDefault(require("@ahooksjs/use-filter-plugin"));
-
-var _useSortablePlugin = _interopRequireDefault(require("@ahooksjs/use-sortable-plugin"));
-
-var _useSelectionPlugin = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/plugins/useSelectionPlugin"));
-
-var _cmdb = require("@riil-frontend/component-topology-utils/es/services/cmdb");
-
-var _table = require("@riil-frontend/component-topology-utils/es/utils/table");
-
-var _storage = require("@riil-frontend/component-topology-utils/es/utils/storage");
-
-var _format = require("../../utils/format");
-
-var _FormTable = _interopRequireDefault(require("../FormTable"));
-
-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; }
-
-var PRIMARY_KEY = 'ciId';
-
-var getTableData = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(params) {
-    var _params$current, current, _params$pageSize, pageSize, _params$sortBy, sortBy, _params$sortOrder, sortOrder, like, typeCode, condition, ciType, data, dataSource;
-
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _params$current = params.current, current = _params$current === void 0 ? 1 : _params$current, _params$pageSize = params.pageSize, pageSize = _params$pageSize === void 0 ? 20 : _params$pageSize, _params$sortBy = params.sortBy, sortBy = _params$sortBy === void 0 ? 'displayName' : _params$sortBy, _params$sortOrder = params.sortOrder, sortOrder = _params$sortOrder === void 0 ? 'asc' : _params$sortOrder, like = params.like, typeCode = params.typeCode;
-            condition = 'category(\'resource\')';
-
-            if (like) {
-              condition = {
-                conditions: condition,
-                searchValue: like,
-                searchIndexArray: ['displayName', 'ipAddress']
-              };
-            }
-
-            if (typeCode) {
-              ciType = typeCode.split(',');
-
-              if (typeof condition === 'string') {
-                condition = {
-                  conditions: condition,
-                  ciType: ciType
-                };
-              } else {
-                condition.ciType = ciType;
-              }
-            }
-
-            _context.next = 6;
-            return (0, _cmdb.fetchCommonQuery)(condition, sortBy, sortOrder, current, pageSize, '', {
-              usingExtraConditions: false // 绕过权限过滤
-
-            });
-
-          case 6:
-            data = _context.sent;
-            dataSource = data.content && data.content.map(function (item) {
-              var _item$operation;
-
-              return {
-                ciId: item.id,
-                displayName: item.attributes.displayName,
-                ipAddress: item.attributes.ipAddress,
-                company: item.attributes.company,
-                typeCode: item.typeCode,
-                operation: (_item$operation = item.operation) !== null && _item$operation !== void 0 ? _item$operation : null // 权限字段
-
-              };
-            });
-            return _context.abrupt("return", (0, _format.formatDataForTable)(dataSource, data.total, data.page, data.pageSize));
-
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-
-  return function getTableData(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-var ResourceList = function ResourceList(props, ref) {
-  var pageStore = props.store;
-
-  var _pageStore$useModel = pageStore.useModel('ciModel'),
-      pageState = _pageStore$useModel[0],
-      pageDispatchers = _pageStore$useModel[1];
-
-  var typeDicts = pageState.typeDicts;
-  (0, _react.useEffect)(function () {
-    if (!(0, _utils.isAvailableArray)(typeDicts)) {
-      pageDispatchers.getTypeDicts();
-    }
-  }, []);
-  var initialData = props.initialData,
-      selectionMode = props.selectionMode,
-      className = props.className,
-      children = props.children;
-  var _initialData$selected = initialData.selected,
-      selectedByMe = _initialData$selected === void 0 ? [] : _initialData$selected,
-      _initialData$total = initialData.total,
-      total = _initialData$total === void 0 ? selectedByMe : _initialData$total;
-
-  var disabledKeys = _lodash["default"].difference(total, selectedByMe);
-
-  var plugins = [(0, _useSortablePlugin["default"])({
-    resetWhenQuery: false,
-    defaultValue: {
-      displayName: 'asc'
-    }
-  }), (0, _useFilterPlugin["default"])(), (0, _useSelectionPlugin["default"])({
-    primaryKey: PRIMARY_KEY,
-    mode: selectionMode,
-    checkIsNeedReset: function checkIsNeedReset() {
-      return false;
-    },
-    checkIsDisabled: function checkIsDisabled(record) {
-      return disabledKeys.some(function (item) {
-        return item === record[PRIMARY_KEY];
-      });
-    }
-  })];
-
-  var _useNextFormTable = (0, _nextFormTable["default"])(getTableData, {
-    plugins: plugins
-  }),
-      formProps = _useNextFormTable.formProps,
-      tableProps = _useNextFormTable.tableProps,
-      paginationProps = _useNextFormTable.paginationProps,
-      getSelectedRowKeys = _useNextFormTable.getSelectedRowKeys,
-      setSelectedRowKeys = _useNextFormTable.setSelectedRowKeys;
-
-  (0, _react.useEffect)(function () {
-    if (setSelectedRowKeys) {
-      setSelectedRowKeys(selectedByMe);
-    }
-  }, [selectedByMe]);
-  var selectedKeys = getSelectedRowKeys && getSelectedRowKeys();
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      getSelectedData: function getSelectedData() {
-        return selectedKeys;
-      }
-    };
-  });
-
-  if (selectedKeys) {
-    paginationProps.checkedLen = selectedKeys.length;
-  }
-
-  var filters = {
-    typeCode: typeDicts // company: [],
-
-  };
-  var columns = [{
-    title: '设备名称',
-    dataIndex: 'displayName',
-    sortable: true,
-    cell: _table.getTitleCell
-  }, {
-    title: 'IP地址',
-    dataIndex: 'ipAddress',
-    sortable: true,
-    cell: function cell(ip) {
-      return (0, _table.getTitleCell)((0, _format.getIp)(ip));
-    }
-  }, {
-    title: '类型',
-    dataIndex: 'typeCode',
-    filters: filters.typeCode,
-    cell: function cell(code) {
-      var dict = typeDicts && typeDicts.find(function (item) {
-        return item.value === code;
-      });
-      var name = dict && dict.label || code;
-      return (0, _table.getTitleCell)(name);
-    }
-  }, {
-    title: '厂商',
-    sortable: true,
-    dataIndex: 'company',
-    cell: function cell(code) {
-      var dict = _storage.DICT.get(code);
-
-      var name = dict && dict.name || code;
-      return (0, _table.getTitleCell)(name);
-    }
-  }];
-  return /*#__PURE__*/_react["default"].createElement(_FormTable["default"], {
-    className: className,
-    formProps: formProps,
-    tableProps: tableProps,
-    paginationProps: paginationProps,
-    filters: filters,
-    columns: columns,
-    showChecked: !!selectionMode,
-    showPageSizeSelector: true
-  }, children);
-};
-
-var _default = /*#__PURE__*/_react["default"].forwardRef(ResourceList);
+var _ResourceSelectConnect = _interopRequireDefault(require("./ResourceSelectConnect"));
 
+var _default = _ResourceSelectConnect["default"];
 exports["default"] = _default;

package/lib/components/ResourceSelect/DefaultResourceSelectDrawer.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = DefaultResourceSelectDrawer;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 DefaultResourceSelectDrawer(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", null);
+}
+
+;

package/lib/components/ResourceSelect/ResourceSelectDrawer.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ResourceSelectDrawer;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ResourceTable = _interopRequireDefault(require("../../common/components/ResourceTable/ResourceTable"));
+
+var _Drawer = _interopRequireDefault(require("../Drawer"));
+
+var _excluded = ["visible", "setVisible", "onAdd", "getTableData", "onOk"];
+
+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 ResourceSelectDrawer(props) {
+  var visible = props.visible,
+      setVisible = props.setVisible,
+      onAdd = props.onAdd,
+      getTableData = props.getTableData,
+      onOk = props.onOk,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  var tableRef = (0, _react.useRef)(); // TODO 默认处理
+
+  var defaultAddResource = function defaultAddResource() {
+    setVisible(false);
+  };
+
+  var handleOk = function handleOk() {
+    var selected = tableRef.current.getSelectedData();
+
+    if (onOk) {
+      onOk(selected);
+      return;
+    }
+
+    defaultAddResource(selected);
+  };
+
+  var onClose = function onClose() {
+    setVisible(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
+    title: "\u6DFB\u52A0\u8D44\u6E90",
+    visible: visible,
+    onSave: handleOk,
+    onClose: onClose,
+    drawerProps: {
+      width: '840px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ResourceTable["default"], (0, _extends2["default"])({
+    ref: tableRef,
+    typeDicts: []
+  }, otherProps, {
+    getTableData: getTableData
+  })));
+}
+
+;

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

@@ -5,16 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
-
 var _list = _interopRequireDefault(require("@alifd/next/lib/list"));
 
 var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _SelectResource = _interopRequireDefault(require("./SelectResource"));
-
 var _ResourceListModule = _interopRequireDefault(require("./ResourceList.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); }
@@ -42,26 +38,5 @@ function ResourceList(props) {
   }));
 }
 
-ResourceList.Select = function Select(props) {
-  var _useState = (0, _react.useState)(false),
-      isSelectResource = _useState[0],
-      setIsSelectResource = _useState[1];
-
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    text: true,
-    type: "primary",
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      setIsSelectResource(true);
-    }
-  }, "\u9009\u62E9"), /*#__PURE__*/_react["default"].createElement(_SelectResource["default"] // mode="single"
-  , {
-    visible: isSelectResource,
-    onVisibleChange: function onVisibleChange(visible) {
-      return setIsSelectResource(visible);
-    }
-  }));
-};
-
 var _default = ResourceList;
 exports["default"] = _default;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ResourceSelectButton;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ResourceSelectDrawer = _interopRequireDefault(require("../../../ResourceSelect/ResourceSelectDrawer"));
+
+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 ResourceSelectButton(props) {
+  var topo = props.topo,
+      layer = props.layer,
+      resourceSelectComponent = props.resourceSelectComponent,
+      onAdd = props.onAdd;
+
+  var _useState = (0, _react.useState)(false),
+      isSelectResource = _useState[0],
+      setIsSelectResource = _useState[1];
+
+  var ResourceSelectComponent = resourceSelectComponent || _ResourceSelectDrawer["default"]; // const ResourceSelectComponent = ResourceSelectDrawer;
+  // TODO
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    text: true,
+    type: "primary",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setIsSelectResource(true);
+    }
+  }, "\u9009\u62E9"), /*#__PURE__*/_react["default"].createElement(ResourceSelectComponent, {
+    layer: layer,
+    visible: isSelectResource,
+    setVisible: setIsSelectResource,
+    topo: topo,
+    existedIds: [],
+    onAdd: onAdd
+  }));
+}
+
+;

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

@@ -25,16 +25,12 @@ var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _ColorPicker = _interopRequireDefault(require("../../edit/LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
 
-var _RuleStyleModule = _interopRequireDefault(require("../../edit/LinkDynamicStyleSettingDrawer/rule/RuleStyle.module.scss"));
-
-var _ResourceList = _interopRequireDefault(require("./GroupNodeList/ResourceList"));
-
 var _GroupNodeList = _interopRequireDefault(require("./GroupNodeList/GroupNodeList"));
 
+var _ResourceSelectButton = _interopRequireDefault(require("./GroupNodeList/ResourceSelectButton"));
+
 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; }
@@ -106,7 +102,8 @@ function parseValues(values) {
 function LayerSettingsForm(props) {
   var topo = props.topo,
       values = props.values,
-      _onChange = props.onChange;
+      _onChange = props.onChange,
+      editorProps = props.editorProps;
 
   var field = _field["default"].useField({
     autoUnmount: false,
@@ -147,7 +144,14 @@ function LayerSettingsForm(props) {
         style: {
           flex: 1
         }
-      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_ResourceList["default"].Select, null))
+      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_ResourceSelectButton["default"], {
+        topo: topo,
+        layer: values,
+        onAdd: function onAdd() {
+          /*TODO 刷新列表 refreshList*/
+        },
+        resourceSelectComponent: editorProps === null || editorProps === void 0 ? void 0 : editorProps.layerResourceSelectComponent
+      }))
     }, /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
       topo: topo,
       group: values

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

@@ -20,16 +20,22 @@ 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 Settings(props) {
+  var _selection$;
+
   var topo = props.topo,
-      selection = props.selection;
+      selection = props.selection,
+      editorProps = props.editorProps;
   var size = selection.length;
+  var selectionIds = selection.map(function (item) {
+    return item.id;
+  }).join(',');
   (0, _react.useEffect)(function () {// const selectionModel = topo.getSelectionModel();
     // console.info('selection change', selection)
   }, [selection]);
   var attrTypes = ['attrObject', 'position', 'styleMap'];
   var updateElementProperty = (0, _react.useCallback)(function (name, value) {
-    // console.info('updateElementProperty', name, value)
-    var element = topo.getDataModel().getDataById(selection[0].id);
+    // const element = topo.getDataModel().getDataById(selection[0].id);
+    var element = topo.getSelectionModel().getFirstData(); // console.info('updateElementProperty', {selection, element, name, value});
 
     if (name.startsWith('attrObject.')) {
       element.setAttr(name.replace('attrObject.', ''), value);
@@ -38,7 +44,7 @@ function Settings(props) {
     } else if (name.startsWith('styleMap.')) {
       element.setStyle(name.replace('styleMap.', ''), value);
     }
-  }, [selection]);
+  }, [(_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.id]);
 
   if (!size) {
     // 未选择元素
@@ -80,8 +86,10 @@ function Settings(props) {
     className: _SettingsModule["default"].settings
   }, /*#__PURE__*/_react["default"].createElement(Component, {
     topo: topo,
+    selection: selection,
     values: values,
-    onChange: updateElementProperty
+    onChange: updateElementProperty,
+    editorProps: editorProps
   })));
 }
 

package/lib/components/TopoView/topoView.js

@@ -250,7 +250,8 @@ var TopoView = function TopoView(props) {
     }
   }), isEditMode && /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
     topo: topoApp,
-    selection: selection
+    selection: selection,
+    editorProps: props.editorProps
   })), /*#__PURE__*/_react["default"].createElement(_SingleResourceDrawer["default"], {
     visible: showSingleResDrawer,
     loading: topoLoading,