@riil-frontend/component-topology 4.0.0-beta.9 → 4.0.2

package/lib/core/components/TopoView/topoView.js

@@ -45,6 +45,10 @@ var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 
 var _useRouterAdapter = _interopRequireDefault(require("../../hooks/useRouterAdapter"));
 
+var _graphLinkUtil = require("../../utils/graphLinkUtil");
+
+var _clusterUtil = require("../../../utils/clusterUtil");
+
 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; }
@@ -57,8 +61,9 @@ var Topology = function Topology(props) {
       titleBar = props.titleBar,
       buildLoadOptions = props.buildLoadOptions,
       onReady = props.onReady,
-      onDestroy = props.onDestroy,
       onLoaded = props.onLoaded,
+      onLoad = props.onLoad,
+      onDestroy = props.onDestroy,
       onRefreshTopo = props.onRefresh,
       onEnterEdit = props.onEnterEdit,
       onSave = props.onSave,
@@ -155,9 +160,25 @@ var Topology = function Topology(props) {
       onReady();
     }
   }, []);
+  var handleGraphDataLoaded = (0, _react.useCallback)(function () {
+    _rlog["default"].info("TopoView.handleGraphDataLoaded", topoData, topo.getDataModel().getDatas().toArray());
+
+    (0, _graphLinkUtil.fixLink)(topo);
+    (0, _clusterUtil.handleClusterNoPermission)(topo);
+    (0, _edgeUtil.updateEdgeExpanded)(topo);
+    topoDispatchers.update({
+      graphLoaded2: true
+    });
+
+    if (onLoad) {
+      onLoad();
+    }
+  }, [topoData]);
   var handleGraphLoaded = (0, _react.useCallback)(function () {
     _rlog["default"].info("TopoView.handleGraphLoaded", topoData, topo.getDataModel().getDatas().toArray());
 
+    (0, _graphLinkUtil.fixLink)(topo);
+    (0, _clusterUtil.handleClusterNoPermission)(topo);
     (0, _edgeUtil.updateEdgeExpanded)(topo);
     topoDispatchers.update({
       graphLoaded: true
@@ -166,6 +187,10 @@ var Topology = function Topology(props) {
     if (onLoaded) {
       onLoaded(topoData);
     }
+
+    if (onLoad) {
+      onLoad();
+    }
   }, [topoData]); // TODO 之后把事件方法都转移出去
 
   var rightEventHandle = function rightEventHandle(event) {
@@ -273,6 +298,7 @@ var Topology = function Topology(props) {
     renderBackgroundView: renderBackgroundView,
     onCreate: onGraphCreated,
     onLoaded: handleGraphLoaded,
+    onDataLoaded: handleGraphDataLoaded,
     onDestroy: onDestroy,
     onEvent: handleEvent,
     style: {
@@ -312,6 +338,7 @@ Topology.propTypes = {
   onNodeDelete: _propTypes["default"].func,
   onLineDelete: _propTypes["default"].func,
   onLoaded: _propTypes["default"].func,
+  onLoad: _propTypes["default"].func,
 
   /**
    * @deprecated 工具栏

package/lib/core/editor/components/settings/propertyViews/group/DataTab/GroupNodeList.js

@@ -15,10 +15,12 @@ function GroupNodeList(props) {
   var topo = props.topo,
       group = props.group,
       _props$showRemove = props.showRemove,
-      showRemove = _props$showRemove === void 0 ? true : _props$showRemove;
+      showRemove = _props$showRemove === void 0 ? true : _props$showRemove,
+      useGroupSortResources = props.useGroupSortResources;
   var dataSource = (0, _useGroupRelateResource["default"])({
     group: group,
-    topo: topo
+    topo: topo,
+    useGroupSortResources: useGroupSortResources
   });
   /**
    * 从区域移出节点，放到左上角

package/lib/core/editor/components/settings/propertyViews/group/DataTab/RelateData.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _GroupRelateData = _interopRequireDefault(require("./GroupRelateData/GroupRelateData"));
 
-var _ClusterGroupRelateData = _interopRequireDefault(require("./ClusterGroupRelateData/ClusterGroupRelateData"));
-
 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; }
@@ -21,11 +19,5 @@ function GroupRelateDataContainer(props) {
       group = props.group,
       values = props.values,
       editorProps = props.editorProps;
-  var elementTemplate = group.a('elementTemplate');
-
-  if (elementTemplate === 'cluster') {
-    return /*#__PURE__*/_react["default"].createElement(_ClusterGroupRelateData["default"], props);
-  }
-
   return /*#__PURE__*/_react["default"].createElement(_GroupRelateData["default"], props);
 }

package/lib/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js

@@ -7,14 +7,12 @@ exports["default"] = useGroupRelateResource;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = require("react");
-
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
-
 var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
 
 var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
 
+var _htElementDataUtil = require("../../../../../../../../utils/htElementDataUtil");
+
 var _htElementUtils = require("../../../../../../../../utils/htElementUtils");
 
 function sortResourcesByName(resources) {
@@ -25,20 +23,22 @@ function useGroupRelateResource(props) {
   var _topo$options$editor;
 
   var group = props.group,
-      topo = props.topo; // const [resources, setResources] = useState([]);
-
-  var nodes = (0, _htElementUtils.getGroupChildrenNodes)(group); // 过滤出资源
+      topo = props.topo,
+      _props$useGroupSortRe = props.useGroupSortResources,
+      useGroupSortResources = _props$useGroupSortRe === void 0 ? function (nodes) {
+    return nodes;
+  } : _props$useGroupSortRe; // const [resources, setResources] = useState([]);
+  // 过滤出资源
 
-  var resourceNodes = nodes.filter(function (node) {
-    return !!node.getTag();
-  }); // 资源按名称排序
+  var resourceNodes = (0, _htElementDataUtil.getGroupChildrenResourceElements)(group); // 资源按名称排序
 
-  var sortResources = ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.sortResources) || sortResourcesByName;
-  var data = sortResources(resourceNodes.map(function (node) {
+  var useSortNodes = useGroupSortResources || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.sortResources) || sortResourcesByName;
+  var data = useSortNodes(resourceNodes.map(function (node) {
     return (0, _extends2["default"])({}, (0, _htElementUtils.getNodeData)(node), {
       node: node
     });
-  })).map(function (item) {
+  }));
+  data = data.map(function (item) {
     return {
       title: item.name,
       img: _componentTopologyGraph.iconFactory.getIconImageUrl(item.image),

package/lib/core/editor/components/settings/propertyViews/group/GroupPropertyView.js

@@ -21,6 +21,8 @@ var _Setting = _interopRequireDefault(require("./SettingTab/Setting"));
 
 var _RelateData = _interopRequireDefault(require("./DataTab/RelateData"));
 
+var _ClusterGroupRelateData = _interopRequireDefault(require("./cluster/ClusterGroupRelateData"));
+
 function GroupPropertyView(props) {
   var topo = props.topo,
       topoEdit = props.topoEdit,
@@ -32,10 +34,12 @@ function GroupPropertyView(props) {
     topo: topo,
     id: values.id
   });
+  var isCluster = group.a('cluster');
+  var DataTabContent = isCluster ? _ClusterGroupRelateData["default"] : _RelateData["default"];
   return /*#__PURE__*/_react["default"].createElement(_TabView["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
     title: "\u6570\u636E",
     key: "1"
-  }, /*#__PURE__*/_react["default"].createElement(_RelateData["default"], (0, _extends2["default"])({
+  }, /*#__PURE__*/_react["default"].createElement(DataTabContent, (0, _extends2["default"])({
     group: group
   }, props))), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
     title: "\u8BBE\u7F6E",

package/lib/core/editor/components/settings/propertyViews/group/{DataTab/ClusterGroupRelateData → cluster}/ClusterGroupRelateData.js

@@ -11,15 +11,17 @@ var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _GroupNodeList = _interopRequireDefault(require("../GroupNodeList"));
+var _GroupNodeList = _interopRequireDefault(require("../DataTab/GroupNodeList"));
 
-var _Panel = _interopRequireDefault(require("../../../../../../../../components/collapse/Panel"));
+var _Panel = _interopRequireDefault(require("../../../../../../../components/collapse/Panel"));
 
-var _NodeRelateResourceButton = _interopRequireDefault(require("../../../node/data/NodeRelateResourceButton"));
+var _NodeRelateResourceButton = _interopRequireDefault(require("../../node/data/NodeRelateResourceButton"));
 
-var _CollapseFullheightModule = _interopRequireDefault(require("../../../../common/GroupNodeList/CollapseFullheight.module.scss"));
+var _componentNoDataPage = _interopRequireDefault(require("@riil-frontend/component-no-data-page"));
 
-var _textModule = _interopRequireDefault(require("../../../../../../../common/text.module.scss"));
+var _CollapseFullheightModule = _interopRequireDefault(require("../../../common/GroupNodeList/CollapseFullheight.module.scss"));
+
+var _textModule = _interopRequireDefault(require("../../../../../../common/text.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); }
 
@@ -31,17 +33,25 @@ function ClusterGroupRelateData(props) {
       group = props.group,
       values = props.values,
       editorProps = props.editorProps;
+  var useGroupSortResources = editorProps.useGroupSortResources;
 
   var renderMemberPanel = function renderMemberPanel() {
     return /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
       key: "\u96C6\u7FA4\u6210\u5458",
       title: "\u96C6\u7FA4\u6210\u5458",
       className: _CollapseFullheightModule["default"].panelFullHeight
-    }, /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
+    }, group.a('operation') ? /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
       topo: topo,
       group: group,
-      showRemove: false
-    }));
+      showRemove: false,
+      useGroupSortResources: useGroupSortResources
+    }) : /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: 180
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_componentNoDataPage["default"], {
+      statusCode: "\u6CA1\u6709\u67E5\u770B\u6743\u9650"
+    })));
   };
 
   return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
@@ -72,5 +82,9 @@ function ClusterGroupRelateData(props) {
       color: '#4D6277'
     },
     title: values.tag ? values.name : null
-  }, values.tag ? values.name : '—'))))), renderMemberPanel());
+  }, values.tag ? values.name : '—'), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
+    node: values,
+    topo: topo,
+    topoEditApi: topoEditApi
+  }))))), renderMemberPanel());
 }

package/lib/core/editor/components/settings/propertyViews/layer/DataTab/NodeList.js

@@ -11,7 +11,7 @@ var _componentTopologyGraph = require("@riil-frontend/component-topology-graph")
 
 var _ResourceList = _interopRequireDefault(require("../../../common/GroupNodeList/ResourceList"));
 
-var _htElementUtils = require("../../../../../../../utils/htElementUtils");
+var _htElementDataUtil = require("../../../../../../../utils/htElementDataUtil");
 
 /**
  * 分层关联资源列表
@@ -19,10 +19,7 @@ var _htElementUtils = require("../../../../../../../utils/htElementUtils");
 function LayerResourceList(props) {
   var topo = props.topo,
       layer = props.layer;
-  var nodes = (0, _htElementUtils.getLayerChildrenNodes)(layer);
-  var relateDataNodes = nodes.filter(function (node) {
-    return !!node.getTag();
-  });
+  var relateDataNodes = (0, _htElementDataUtil.getLayerChildrenResourceElements)(layer);
   var data = relateDataNodes.map(function (node) {
     return {
       title: node.a('name'),

package/lib/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = BatchSetNodeIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _htElementUtils = require("../../../../../../utils/htElementUtils");
+
+var _NodeIconSelect = _interopRequireDefault(require("../node/NodeIconSelect"));
+
+function BatchSetNodeIcon(props) {
+  var topo = props.topo;
+
+  var setNodeIcon = function setNodeIcon(iconId) {
+    var selection = topo.getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (element) {
+      return (0, _htElementUtils.isNode)(element) && !(0, _htElementUtils.isGroup)(element);
+    });
+    nodes.forEach(function (node) {
+      node.setImage(iconId);
+    });
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_NodeIconSelect["default"], {
+    topo: topo,
+    onChange: setNodeIcon
+  });
+}

package/lib/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js

@@ -23,6 +23,8 @@ var _ViewPropertyView = _interopRequireDefault(require("../view/ViewPropertyView
 
 var _MultipleElementLineType = _interopRequireDefault(require("./MultipleElementLineType"));
 
+var _BatchSetNodeIcon = _interopRequireDefault(require("./BatchSetNodeIcon"));
+
 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; }
@@ -80,6 +82,10 @@ function MultipleElementPropertyView(props) {
     key: "\u56FE\u7247",
     title: "\u56FE\u7247"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u663E\u793A\u56FE\u7247"
+  }, /*#__PURE__*/_react["default"].createElement(_BatchSetNodeIcon["default"], {
+    topo: topo
+  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u56FE\u7247\u5C3A\u5BF8",
     style: {
       marginBottom: 0

package/lib/core/editor/components/settings/propertyViews/node/NodePropertyView.js

@@ -36,7 +36,9 @@ function NodePropertyView(props) {
   });
 
   var renderData = function renderData() {
-    return /*#__PURE__*/_react["default"].createElement(_Data["default"], props);
+    return /*#__PURE__*/_react["default"].createElement(_Data["default"], (0, _extends2["default"])({}, props, {
+      node: node
+    }));
   };
 
   var renderSetting = function renderSetting() {

package/lib/core/editor/components/settings/propertyViews/node/Setting/NameInput.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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; }
+
+var NameInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var onChange = props.onChange;
+
+  var _useState = (0, _react.useState)(props.value),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    setValue(props.value);
+  }, [props.value]);
+
+  var handleChange = function handleChange(v) {
+    setValue(v);
+
+    if (v) {
+      onChange(v);
+    }
+  };
+
+  var handleBlur = function handleBlur() {
+    if (!value) {
+      onChange('');
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, props, {
+    ref: ref,
+    value: value,
+    onChange: handleChange,
+    onBlur: handleBlur
+  }));
+});
+
+var _default = NameInput;
+exports["default"] = _default;

package/lib/core/editor/components/settings/propertyViews/node/Setting/Setting.js

@@ -7,8 +7,6 @@ exports["default"] = Setting;
 
 var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
-var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
-
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -21,6 +19,8 @@ var _NodeSizeInput = _interopRequireDefault(require("../../../common/NodeSizeInp
 
 var _NodeIconSelect = _interopRequireDefault(require("../NodeIconSelect"));
 
+var _NameInput = _interopRequireDefault(require("./NameInput"));
+
 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; }
@@ -70,7 +70,7 @@ function Setting(props) {
     title: "\u663E\u793A\u8BBE\u7F6E"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u56FE\u7247\u540D\u79F0"
-  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_NameInput["default"], {
     name: "attrObject.customName"
   })), showImageSetting && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u663E\u793A\u56FE\u7247"

package/lib/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -51,16 +51,13 @@ function getBindType(values) {
 }
 
 function Data(props) {
-  var topo = props.topo,
+  var node = props.node,
+      topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
       _onChange = props.onChange,
       editorProps = props.editorProps;
   var bindType = getBindType(values);
-  var node = (0, _useHtElement["default"])({
-    topo: topo,
-    id: values.id
-  });
 
   var field = _field["default"].useField({
     autoUnmount: false,
@@ -133,6 +130,7 @@ function Data(props) {
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : "—"), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
+    nodeElement: node,
     node: values,
     topo: topo,
     topoEditApi: topoEditApi

package/lib/core/editor/components/settings/propertyViews/node/data/NodeRelateResourceButton.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _BindResourceDrawer = _interopRequireDefault(require("./BindResourceDrawer"));
 
+var _clusterUtil = require("../../../../../../../utils/clusterUtil");
+
 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; }
@@ -23,10 +25,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function NodeRelateResourceButton(props) {
   var _node$attrObject$data;
 
-  var topo = props.topo,
+  var nodeElement = props.nodeElement,
+      topo = props.topo,
       topoEditApi = props.topoEditApi,
       node = props.node;
-  var hide = ((_node$attrObject$data = node.attrObject.data) === null || _node$attrObject$data === void 0 ? void 0 : _node$attrObject$data.relateResource) === false;
+  var hide = (0, _clusterUtil.isClusterMemberHtElement)(nodeElement) || ((_node$attrObject$data = node.attrObject.data) === null || _node$attrObject$data === void 0 ? void 0 : _node$attrObject$data.relateResource) === false;
   var currentResId = node.tag;
 
   var _useState = (0, _react.useState)(false),

package/lib/core/hooks/ht/useHtDataPropertyChangeListener.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = useHtDataPropertyChangeListener;
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _react = require("react");
+
+function useHtDataPropertyChangeListener(props) {
+  var topo = props.topo,
+      onChange = props.onChange;
+
+  var _topo$store$useModel = topo.store.useModel('topoMod'),
+      topoState = _topo$store$useModel[0],
+      topoDispatchers = _topo$store$useModel[1];
+
+  var graphLoaded = topoState.graphLoaded,
+      graphLoaded2 = topoState.graphLoaded2;
+  (0, _react.useEffect)(function () {
+    var dm = topo.getDataModel();
+    var inited = false;
+
+    if (graphLoaded || graphLoaded2) {
+      dm.addDataPropertyChangeListener(onChange);
+      inited = true;
+    }
+
+    return function () {
+      if (inited) {
+        dm.removeDataPropertyChangeListener(onChange);
+      }
+    };
+  }, [graphLoaded, graphLoaded2, onChange]);
+}

package/lib/core/models/AttributeMetricDisplay.js

@@ -131,10 +131,6 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       return (0, _extends2["default"])({}, link, {
         type: 'edge'
       });
-    }), linkGroups.map(function (link) {
-      return (0, _extends2["default"])({}, link, {
-        type: 'edgeGroup'
-      });
     }));
   };
 
@@ -258,8 +254,14 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     var tagTipOptions = this.topo.options.tagTip;
     var defaultLinkTagConfig = tagTipOptions !== null && tagTipOptions !== void 0 && tagTipOptions.getDefaultLinkTagConfig ? tagTipOptions === null || tagTipOptions === void 0 ? void 0 : tagTipOptions.getDefaultLinkTagConfig(link) : null;
     var defaultLinkTipConfig = tagTipOptions !== null && tagTipOptions !== void 0 && tagTipOptions.getDefaultLinkTipConfig ? tagTipOptions === null || tagTipOptions === void 0 ? void 0 : tagTipOptions.getDefaultLinkTipConfig(link) : null;
+    var linkTagConfig = linkTag || defaultLinkTagConfig;
     return {
-      tags: getItems(linkTag || defaultLinkTagConfig),
+      tags: getItems(linkTagConfig),
+      tagLinkArrow: {
+        1: 'both',
+        2: 'from',
+        3: 'to'
+      }[linkTagConfig === null || linkTagConfig === void 0 ? void 0 : linkTagConfig.type] || undefined,
       tips: getItems(linkTip || defaultLinkTipConfig)
     };
   };
@@ -272,13 +274,14 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
       var tagTipConfig = _this2.getLinkTagTipConfig(link);
 
-      return {
+      return (0, _extends2["default"])({
         type: link.type,
         id: link.id,
-        ciType: ciType,
+        ciType: ciType
+      }, tagTipConfig, {
         tags: filterByPermission(link, tagTipConfig.tags),
         tips: filterByPermission(link, tagTipConfig.tips)
-      };
+      });
     });
   }
   /**
@@ -355,6 +358,10 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.getNodeNameVisible = function getNodeNameVisible(node) {
+    if (!this.topo.isViewMode()) {
+      return true;
+    }
+
     var _this$getConfig3 = this.getConfig(),
         nodeTag = _this$getConfig3.nodeTag;
 
@@ -718,9 +725,10 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.buildTagsTips = function buildTagsTips() {
+    var _this6 = this;
+
     var data = this.getData(); // 获取标注、悬浮框配置
 
-    var formatter = new _attributeFormatter["default"](this.topo);
     var ciConfigs = this.getResourceTagTipConfig();
     var ciTagsAndTips = ciConfigs.map(function (ciConfig) {
       var ciDataItem = (0, _topoData.findItem)(data, 'id', ciConfig.id);
@@ -737,10 +745,20 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       var ciData = (0, _extends2["default"])({}, (0, _topoData.findItem)(data, 'id', ciConfig.id), {
         ciType: ciConfig.ciType
       });
+      var formatter = new _attributeFormatter["default"](_this6.topo);
+      var tags = formatter.formatAttrs(ciConfig.tags, ciData); // 链路标注箭头
+
+      if (ciConfig.type === 'edge') {
+        tags = {
+          data: tags,
+          linkArrow: ciConfig.tagLinkArrow
+        };
+      }
+
       return {
         type: ciConfig.type,
         id: ciConfig.id,
-        tags: formatter.formatAttrs(ciConfig.tags, ciData),
+        tags: tags,
         tips: formatter.formatAttrs(ciConfig.tips, ciData)
       };
     });

package/lib/core/models/TopoApp.js

@@ -17,7 +17,7 @@ var _componentTopologyUtils = require("@riil-frontend/component-topology-utils")
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
-var _CiTyeCache = _interopRequireDefault(require("./cache/CiTyeCache"));
+var _CiTypeCache = _interopRequireDefault(require("./cache/CiTypeCache"));
 
 var _Alarm = _interopRequireDefault(require("./Alarm"));
 
@@ -47,8 +47,10 @@ var _PluginManager = _interopRequireDefault(require("./PluginManager"));
 
 var _topoFactory = _interopRequireDefault(require("./topoFactory"));
 
+var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTagTipConfig"));
+
 // eslint-disable-next-line no-undef
-var version = typeof "4.0.0-beta.9" === 'string' ? "4.0.0-beta.9" : null;
+var version = typeof "4.0.2" === 'string' ? "4.0.2" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑
@@ -65,8 +67,10 @@ var Topo = /*#__PURE__*/function () {
     this.alarm = new _Alarm["default"]();
     this.store = void 0;
     this.serverApi = _topo["default"];
-    this.ciTyeCache = _CiTyeCache["default"];
+    this.CiTypeCache = _CiTypeCache["default"];
+    this.ciTyeCache = _CiTypeCache["default"];
     this.dictCache = _DictCache["default"];
+    this.elementTagTipConfig = new _ElementTagTipConfig["default"](this);
     this.test = void 0;
     this.uid = void 0;
     this.version = version;
@@ -230,9 +234,10 @@ var Topo = /*#__PURE__*/function () {
   };
 
   _proto.getNodes = function getNodes() {
-    return (0, _htElementUtils.getNodeDatas)(this.getDataModel()).filter(function (node) {
-      return !!node.id;
+    var nodes = (0, _htElementUtils.getNodes)(this.getDataModel()).filter(function (node) {
+      return !!node.getTag();
     });
+    return nodes.map(_htElementUtils.getNodeData);
   };
 
   _proto.getLines = function getLines() {