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

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

@@ -18,6 +18,8 @@ import useManageStatus from "../../../hooks/useManageStatus";
 import useAlarm from "../../../hooks/useAlarm";
 import styles from "./TopoView.module.scss";
 import useRouterAdapter from "../../hooks/useRouterAdapter";
+import { fixLink } from "../../utils/graphLinkUtil";
+import { handleClusterNoPermission } from "../../../utils/clusterUtil";
 
 var Topology = function Topology(props) {
   var _classnames, _graphViewProps$creat;
@@ -27,8 +29,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,
@@ -123,8 +126,23 @@ var Topology = function Topology(props) {
       onReady();
     }
   }, []);
+  var handleGraphDataLoaded = useCallback(function () {
+    rlog.info("TopoView.handleGraphDataLoaded", topoData, topo.getDataModel().getDatas().toArray());
+    fixLink(topo);
+    handleClusterNoPermission(topo);
+    updateEdgeExpanded(topo);
+    topoDispatchers.update({
+      graphLoaded2: true
+    });
+
+    if (onLoad) {
+      onLoad();
+    }
+  }, [topoData]);
   var handleGraphLoaded = useCallback(function () {
     rlog.info("TopoView.handleGraphLoaded", topoData, topo.getDataModel().getDatas().toArray());
+    fixLink(topo);
+    handleClusterNoPermission(topo);
     updateEdgeExpanded(topo);
     topoDispatchers.update({
       graphLoaded: true
@@ -133,6 +151,10 @@ var Topology = function Topology(props) {
     if (onLoaded) {
       onLoaded(topoData);
     }
+
+    if (onLoad) {
+      onLoad();
+    }
   }, [topoData]); // TODO 之后把事件方法都转移出去
 
   var rightEventHandle = function rightEventHandle(event) {
@@ -236,6 +258,7 @@ var Topology = function Topology(props) {
     renderBackgroundView: renderBackgroundView,
     onCreate: onGraphCreated,
     onLoaded: handleGraphLoaded,
+    onDataLoaded: handleGraphDataLoaded,
     onDestroy: onDestroy,
     onEvent: handleEvent,
     style: {
@@ -275,6 +298,7 @@ Topology.propTypes = {
   onNodeDelete: PropTypes.func,
   onLineDelete: PropTypes.func,
   onLoaded: PropTypes.func,
+  onLoad: PropTypes.func,
 
   /**
    * @deprecated 工具栏

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

@@ -5,10 +5,12 @@ export default 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 = useGroupRelateResource({
     group: group,
-    topo: topo
+    topo: topo,
+    useGroupSortResources: useGroupSortResources
   });
   /**
    * 从区域移出节点，放到左上角

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

@@ -1,17 +1,10 @@
 import React, { useEffect } from 'react';
 import GroupRelateData from "./GroupRelateData/GroupRelateData";
-import ClusterGroupRelateData from "./ClusterGroupRelateData/ClusterGroupRelateData";
 export default function GroupRelateDataContainer(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       group = props.group,
       values = props.values,
       editorProps = props.editorProps;
-  var elementTemplate = group.a('elementTemplate');
-
-  if (elementTemplate === 'cluster') {
-    return /*#__PURE__*/React.createElement(ClusterGroupRelateData, props);
-  }
-
   return /*#__PURE__*/React.createElement(GroupRelateData, props);
 }

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

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { useState } from "react";
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { iconFactory } from "@riil-frontend/component-topology-graph";
 import sortBy from "lodash/sortBy";
-import { getGroupChildrenNodes, getNodeData } from "../../../../../../../../utils/htElementUtils";
+import { getGroupChildrenResourceElements } from "../../../../../../../../utils/htElementDataUtil";
+import { getNodeData } from "../../../../../../../../utils/htElementUtils";
 
 function sortResourcesByName(resources) {
   return sortBy(resources, "name");
@@ -13,20 +12,22 @@ export default function useGroupRelateResource(props) {
   var _topo$options$editor;
 
   var group = props.group,
-      topo = props.topo; // const [resources, setResources] = useState([]);
+      topo = props.topo,
+      _props$useGroupSortRe = props.useGroupSortResources,
+      useGroupSortResources = _props$useGroupSortRe === void 0 ? function (nodes) {
+    return nodes;
+  } : _props$useGroupSortRe; // const [resources, setResources] = useState([]);
+  // 过滤出资源
 
-  var nodes = getGroupChildrenNodes(group); // 过滤出资源
+  var resourceNodes = getGroupChildrenResourceElements(group); // 资源按名称排序
 
-  var resourceNodes = nodes.filter(function (node) {
-    return !!node.getTag();
-  }); // 资源按名称排序
-
-  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 _extends({}, getNodeData(node), {
       node: node
     });
-  })).map(function (item) {
+  }));
+  data = data.map(function (item) {
     return {
       title: item.name,
       img: iconFactory.getIconImageUrl(item.image),

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

@@ -6,6 +6,7 @@ import styles from "./GroupPropertyView.module.scss";
 import useGroup from "./hooks/useGroup";
 import GroupSetting from "./SettingTab/Setting";
 import GroupRelateData from "./DataTab/RelateData";
+import ClusterGroupRelateData from "./cluster/ClusterGroupRelateData";
 export default function GroupPropertyView(props) {
   var topo = props.topo,
       topoEdit = props.topoEdit,
@@ -17,10 +18,12 @@ export default function GroupPropertyView(props) {
     topo: topo,
     id: values.id
   });
+  var isCluster = group.a('cluster');
+  var DataTabContent = isCluster ? ClusterGroupRelateData : GroupRelateData;
   return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u6570\u636E",
     key: "1"
-  }, /*#__PURE__*/React.createElement(GroupRelateData, _extends({
+  }, /*#__PURE__*/React.createElement(DataTabContent, _extends({
     group: group
   }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u8BBE\u7F6E",

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

@@ -1,28 +1,37 @@
 import _Collapse from "@alifd/next/es/collapse";
 import _Form from "@alifd/next/es/form";
 import React, { useEffect } from 'react';
-import GroupNodeList from "../GroupNodeList";
-import CollapsePanel from "../../../../../../../../components/collapse/Panel";
-import NodeRelateResourceButton from "../../../node/data/NodeRelateResourceButton";
-import CollapseFullheightStyles from "../../../../common/GroupNodeList/CollapseFullheight.module.scss";
-import textStyles from "../../../../../../../common/text.module.scss";
+import GroupNodeList from "../DataTab/GroupNodeList";
+import CollapsePanel from "../../../../../../../components/collapse/Panel";
+import NodeRelateResourceButton from "../../node/data/NodeRelateResourceButton";
+import NoDataPage from '@riil-frontend/component-no-data-page';
+import CollapseFullheightStyles from "../../../common/GroupNodeList/CollapseFullheight.module.scss";
+import textStyles from "../../../../../../common/text.module.scss";
 export default function ClusterGroupRelateData(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       group = props.group,
       values = props.values,
       editorProps = props.editorProps;
+  var useGroupSortResources = editorProps.useGroupSortResources;
 
   var renderMemberPanel = function renderMemberPanel() {
     return /*#__PURE__*/React.createElement(CollapsePanel, {
       key: "\u96C6\u7FA4\u6210\u5458",
       title: "\u96C6\u7FA4\u6210\u5458",
       className: CollapseFullheightStyles.panelFullHeight
-    }, /*#__PURE__*/React.createElement(GroupNodeList, {
+    }, group.a('operation') ? /*#__PURE__*/React.createElement(GroupNodeList, {
       topo: topo,
       group: group,
-      showRemove: false
-    }));
+      showRemove: false,
+      useGroupSortResources: useGroupSortResources
+    }) : /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 180
+      }
+    }, /*#__PURE__*/React.createElement(NoDataPage, {
+      statusCode: "\u6CA1\u6709\u67E5\u770B\u6743\u9650"
+    })));
   };
 
   return /*#__PURE__*/React.createElement(_Collapse, {
@@ -53,5 +62,9 @@ export default function ClusterGroupRelateData(props) {
       color: '#4D6277'
     },
     title: values.tag ? values.name : null
-  }, values.tag ? values.name : '—'))))), renderMemberPanel());
+  }, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
+    node: values,
+    topo: topo,
+    topoEditApi: topoEditApi
+  }))))), renderMemberPanel());
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { iconFactory } from '@riil-frontend/component-topology-graph';
 import ResourceList from "../../../common/GroupNodeList/ResourceList";
-import { getLayerChildrenNodes } from "../../../../../../../utils/htElementUtils";
+import { getLayerChildrenResourceElements } from "../../../../../../../utils/htElementDataUtil";
 /**
  * 分层关联资源列表
  */
@@ -9,10 +9,7 @@ import { getLayerChildrenNodes } from "../../../../../../../utils/htElementUtils
 export default function LayerResourceList(props) {
   var topo = props.topo,
       layer = props.layer;
-  var nodes = getLayerChildrenNodes(layer);
-  var relateDataNodes = nodes.filter(function (node) {
-    return !!node.getTag();
-  });
+  var relateDataNodes = getLayerChildrenResourceElements(layer);
   var data = relateDataNodes.map(function (node) {
     return {
       title: node.a('name'),

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
+import NodeIconSelect from "../node/NodeIconSelect";
+export default 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 isNode(element) && !isGroup(element);
+    });
+    nodes.forEach(function (node) {
+      node.setImage(iconId);
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(NodeIconSelect, {
+    topo: topo,
+    onChange: setNodeIcon
+  });
+}

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

@@ -7,6 +7,7 @@ import BatchSetNodeSize from "./BatchSetNodeSize/BatchSetNodeSize";
 import { TPL_TREE } from "../../../../../../utils/template";
 import ViewPropertyView from "../view/ViewPropertyView";
 import MultipleElementLineType from "./MultipleElementLineType";
+import BatchSetNodeIcon from "./BatchSetNodeIcon";
 var CollapsePanel = _Collapse.Panel;
 /**
  * 多选元素属性面板
@@ -60,6 +61,10 @@ export default function MultipleElementPropertyView(props) {
     key: "\u56FE\u7247",
     title: "\u56FE\u7247"
   }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u663E\u793A\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(BatchSetNodeIcon, {
+    topo: topo
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u56FE\u7247\u5C3A\u5BF8",
     style: {
       marginBottom: 0

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

@@ -21,7 +21,9 @@ export default function NodePropertyView(props) {
   });
 
   var renderData = function renderData() {
-    return /*#__PURE__*/React.createElement(Data, props);
+    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
   };
 
   var renderSetting = function renderSetting() {

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

@@ -0,0 +1,36 @@
+import _Input from "@alifd/next/es/input";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onChange = props.onChange;
+
+  var _useState = useState(props.value),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  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.createElement(_Input, _extends({}, props, {
+    ref: ref,
+    value: value,
+    onChange: handleChange,
+    onBlur: handleBlur
+  }));
+});
+export default NameInput;

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

@@ -1,11 +1,11 @@
 import _Form from "@alifd/next/es/form";
-import _Input from "@alifd/next/es/input";
 import _Field from "@alifd/next/es/field";
 import _extends from "@babel/runtime/helpers/extends";
 import _Collapse from "@alifd/next/es/collapse";
 import React, { useEffect } from 'react';
 import NodeSizeInput from "../../../common/NodeSizeInput/NodeSizeInput";
 import NodeIconSelect from "../NodeIconSelect";
+import NameInput from "./NameInput";
 var CollapsePanel = _Collapse.Panel;
 
 function parseValues(values) {
@@ -51,7 +51,7 @@ export default function Setting(props) {
     title: "\u663E\u793A\u8BBE\u7F6E"
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u56FE\u7247\u540D\u79F0"
-  }, /*#__PURE__*/React.createElement(_Input, {
+  }, /*#__PURE__*/React.createElement(NameInput, {
     name: "attrObject.customName"
   })), showImageSetting && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u663E\u793A\u56FE\u7247"

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

@@ -31,16 +31,13 @@ function getBindType(values) {
 }
 
 export default 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 = useHtElement({
-    topo: topo,
-    id: values.id
-  });
 
   var field = _Field.useField({
     autoUnmount: false,
@@ -113,6 +110,7 @@ export default function Data(props) {
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : "—"), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
+    nodeElement: node,
     node: values,
     topo: topo,
     topoEditApi: topoEditApi

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

@@ -2,6 +2,7 @@ import _Button from "@alifd/next/es/button";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState } from 'react';
 import BindResourceDrawer from "./BindResourceDrawer";
+import { isClusterMemberHtElement } from "../../../../../../../utils/clusterUtil";
 /**
  * @return {React.ReactNode | null}
  */
@@ -9,10 +10,11 @@ import BindResourceDrawer from "./BindResourceDrawer";
 export default 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 = 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 = useState(false),

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

@@ -0,0 +1,28 @@
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { useEffect } from 'react';
+export default 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;
+  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/es/core/models/AttributeMetricDisplay.js

@@ -114,10 +114,6 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       return _extends({}, link, {
         type: 'edge'
       });
-    }), linkGroups.map(function (link) {
-      return _extends({}, link, {
-        type: 'edgeGroup'
-      });
     }));
   };
 
@@ -241,8 +237,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)
     };
   };
@@ -255,13 +257,14 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
       var tagTipConfig = _this2.getLinkTagTipConfig(link);
 
-      return {
+      return _extends({
         type: link.type,
         id: link.id,
-        ciType: ciType,
+        ciType: ciType
+      }, tagTipConfig, {
         tags: filterByPermission(link, tagTipConfig.tags),
         tips: filterByPermission(link, tagTipConfig.tips)
-      };
+      });
     });
   }
   /**
@@ -338,6 +341,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;
 
@@ -700,9 +707,10 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.buildTagsTips = function buildTagsTips() {
+    var _this6 = this;
+
     var data = this.getData(); // 获取标注、悬浮框配置
 
-    var formatter = new AttributeFormatter(this.topo);
     var ciConfigs = this.getResourceTagTipConfig();
     var ciTagsAndTips = ciConfigs.map(function (ciConfig) {
       var ciDataItem = findItem(data, 'id', ciConfig.id);
@@ -720,10 +728,20 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
         ciType: ciConfig.ciType
       });
 
+      var formatter = new AttributeFormatter(_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/es/core/models/TopoApp.js

@@ -4,12 +4,12 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import topoService from '@riil-frontend/component-topology-common/es/services/topo';
 import { setRequest } from '@riil-frontend/component-topology-utils';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-import CiTyeCache from "./cache/CiTyeCache";
+import CiTypeCache from "./cache/CiTypeCache";
 import Alarm from "./Alarm";
 import TopoGraphView from "./TopoGraphView";
 import createStore from "../store/createStore";
 import buildProvider from "../components/buildProvider";
-import { getEdgeDatas, getGroupDatas, getNodeDatas } from "../../utils/htElementUtils";
+import { getEdgeDatas, getGroupDatas, getNodeData, getNodeDatas, getNodes as _getNodes } from "../../utils/htElementUtils";
 import Test from "../test/Test";
 import { formatGroups } from "../../utils/topoData";
 import DictCache from "./cache/DictCache";
@@ -18,9 +18,10 @@ import DataModel from "./DataModel";
 import GraphDataModel from "./GraphDataModel";
 import { updateEdgeExpanded } from "../utils/edgeUtil";
 import PluginManager from "./PluginManager";
-import topoFactory from "./topoFactory"; // eslint-disable-next-line no-undef
+import topoFactory from "./topoFactory";
+import ElementTagTipConfig from "./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);
 /**
  * 拓扑显示和编辑
@@ -37,8 +38,10 @@ var Topo = /*#__PURE__*/function () {
     this.alarm = new Alarm();
     this.store = void 0;
     this.serverApi = topoService;
-    this.ciTyeCache = CiTyeCache;
+    this.CiTypeCache = CiTypeCache;
+    this.ciTyeCache = CiTypeCache;
     this.dictCache = DictCache;
+    this.elementTagTipConfig = new ElementTagTipConfig(this);
     this.test = void 0;
     this.uid = void 0;
     this.version = version;
@@ -202,9 +205,11 @@ var Topo = /*#__PURE__*/function () {
   };
 
   _proto.getNodes = function getNodes() {
-    return getNodeDatas(this.getDataModel()).filter(function (node) {
-      return !!node.id;
+    var nodes = _getNodes(this.getDataModel()).filter(function (node) {
+      return !!node.getTag();
     });
+
+    return nodes.map(getNodeData);
   };
 
   _proto.getLines = function getLines() {

package/es/core/models/TopoGraphView.js

@@ -27,7 +27,9 @@ var TopoGraphView = /*#__PURE__*/function () {
   };
 
   _proto.getHtDataModel = function getHtDataModel() {
-    return this.topoClient.getDataModel();
+    var _this$topoClient;
+
+    return (_this$topoClient = this.topoClient) === null || _this$topoClient === void 0 ? void 0 : _this$topoClient.getDataModel();
   }
   /**
    * 缩放平移整个拓扑以展示所有的图元

package/es/core/models/attributeFormatter/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import { metricValueFormat } from '@riil-frontend/utils';
 import { findItem } from "../../../utils/topoData";
@@ -25,33 +24,10 @@ export function formatMetric(val, metricInfo) {
     return "" + val;
   }
 }
-
-function addLinkMetricUnderlineArrow(metricCode) {
-  var map = {
-    // 总流速和总带宽利用率：双向箭头
-    'interface_totalbps': 'both',
-    'bandwidth_utilization': 'both',
-    // 发送速率和发送带宽利用率：背向取值端口的箭头 指向目的
-    'out_rate': 'to',
-    'out_bandwidth_utilization': 'to',
-    // 接收速率和接收带宽利用率：指向取值端口的箭头 指向源
-    'in_rate': 'from',
-    'in_bandwidth_utilization': 'from'
-  };
-
-  if (map[metricCode]) {
-    return {
-      underlineArrow: map[metricCode]
-    };
-  }
-
-  return {};
-}
 /**
  * 标注值格式化
  */
 
-
 var AttributeFormatter = /*#__PURE__*/function () {
   function AttributeFormatter(topo) {
     this.topo = topo;
@@ -88,7 +64,7 @@ var AttributeFormatter = /*#__PURE__*/function () {
       fieldValue = ciData[attrType + "Map"][fieldCode + "_object"].displayName;
     }
 
-    return _extends({
+    return {
       type: item.type,
       code: item.code,
       // 属性code
@@ -97,7 +73,7 @@ var AttributeFormatter = /*#__PURE__*/function () {
       value: formatMetric(fieldValue, fieldMeta),
       // 属性值
       originValue: fieldValue
-    }, addLinkMetricUnderlineArrow(fieldCode));
+    };
   };
 
   _proto.attributeTransform = function attributeTransform(item, ciData) {