@riil-frontend/component-topology 6.0.0-alpha.41 → 6.0.0-alpha.43

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

@@ -0,0 +1,53 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import useHtElement from "../../../../../common/hooks/useHtElement";
+import TabView from "../../common/tab/TabView";
+import Data from "./data/Data";
+import styles from "./NodePropertyView.module.scss";
+import Setting from "./Setting";
+export default function NodePropertyView(props) {
+  var _topo$options$editor;
+
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState;
+  var node = useHtElement({
+    topo: topo,
+    id: values.id
+  });
+
+  var renderData = function renderData() {
+    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
+  };
+
+  var renderSetting = function renderSetting() {
+    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
+    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
+  }; // 未绑定资源的节点，根据参数控制是否可关联资源
+
+
+  var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
+  var content;
+
+  if (showRelateResource) {
+    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u6570\u636E",
+      key: "1"
+    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u8BBE\u7F6E",
+      key: "2"
+    }, renderSetting()));
+  } else {
+    content = renderSetting();
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.NodePropertyView
+  }, content);
+}

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

@@ -0,0 +1,49 @@
+import _Form from "@alifd/next/es/form";
+import _Field from "@alifd/next/es/field";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect } from 'react';
+import NameInput from "./NameInput";
+
+function parseValues(values) {
+  return _extends({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+export default function BasicSetting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState,
+      _props$showImageSetti = props.showImageSetting,
+      showImageSetting = _props$showImageSetti === void 0 ? true : _props$showImageSetti;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 0 0 32px'
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u56FE\u7247\u540D\u79F0"
+  }, /*#__PURE__*/React.createElement(NameInput, {
+    name: "attrObject.customName",
+    topo: topo
+  })));
+}

package/es/core/editor/components/settings/propertyViews/text/TextPropertyView.js

@@ -59,23 +59,11 @@ export default function TextPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 4
-    }
-  }, /*#__PURE__*/React.createElement(_Form, {
+  return /*#__PURE__*/React.createElement(_Form, {
     field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ['显示设置'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E",
+    labelAlign: "top",
     style: {
-      padding: 0
+      margin: '12px 0 0 32px'
     }
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6587\u672C"
@@ -92,8 +80,5 @@ export default function TextPropertyView(props) {
     onBlur: function onBlur() {
       topo.historyManager.endTransaction();
     }
-  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
-    name: "styleMap.textObj",
-    topo: topo
-  })))))));
+  })));
 }

package/es/core/models/HistoryManager.js

@@ -65,6 +65,10 @@ var HistoryManager = /*#__PURE__*/function () {
     var _this = this;
 
     this.htHistoryManager.beginTransaction();
+    var displayConfigProperties = [// 单多链路
+    'expandAllEdges', // 节点标注
+    'nodeLabelStyle', // 画布主题
+    'canvasTheme', 'linkTag', 'linkTip', 'nodeTag', 'nodeTip'];
     var items = [{
       modelName: 'topoMod',
       property: 'data'
@@ -72,23 +76,16 @@ var HistoryManager = /*#__PURE__*/function () {
     {
       modelName: 'topoMod',
       property: 'type'
-    }, // 单多链路
-    {
-      modelName: 'displayConfig',
-      property: 'expandAllEdges'
-    }, // 节点标注
-    {
-      modelName: 'displayConfig',
-      property: 'nodeLabelStyle'
-    }, // 画布主题
-    {
-      modelName: 'displayConfig',
-      property: 'canvasTheme'
-    }, // 背景
+    }].concat(displayConfigProperties.map(function (property) {
+      return {
+        modelName: 'displayConfig',
+        property: property
+      };
+    }), [// 背景
     {
       modelName: 'background',
       property: 'current'
-    }];
+    }]);
     this.storeHistory = items.map(function (item) {
       return _extends({}, item, {
         oldValue: _this.topo.store.getModelState(item.modelName)[item.property]

package/es/core/models/{SelectionManager.js → SelectionModel.js}

@@ -3,25 +3,13 @@ import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import useHtElements from "../common/hooks/useHtElements";
 import ignoreList from "./selection/ignoreList";
 
-var SelectionManager = /*#__PURE__*/function () {
-  function SelectionManager(topo) {
+var SelectionModel = /*#__PURE__*/function () {
+  function SelectionModel(topo) {
     var _this = this;
 
     this.topo = null;
     this.inited = false;
 
-    this.setSelection = function (selection) {
-      var selectionDispatchers = _this.topo.store.getModelDispatchers('selection');
-
-      _this.selectionIds = selection.map(function (item) {
-        return item.id;
-      });
-      selectionDispatchers.update({
-        selection: selection,
-        selectionIds: _this.selectionIds
-      });
-    };
-
     this.updateSelection = function () {
       try {
         var selectionModel = _this.topo.getSelectionModel();
@@ -30,18 +18,30 @@ var SelectionManager = /*#__PURE__*/function () {
 
         var selectionArr = htSelection.map(getElementData); // rlog.info("updateSelection", selectionArr.map((element) => element.id));
 
-        _this.setSelection(selectionArr);
+        _this.updateStoreSelection(selectionArr);
       } catch (e) {
         rlog.error('updateSelection error', e);
       }
     };
 
+    this.updateStoreSelection = function (selection) {
+      var selectionDispatchers = _this.topo.store.getModelDispatchers('selection');
+
+      _this.selectionIds = selection.map(function (item) {
+        return item.id;
+      });
+      selectionDispatchers.update({
+        selection: selection,
+        selectionIds: _this.selectionIds
+      });
+    };
+
     this.topo = topo;
     this.handleSelectionChange = this.handleSelectionChange.bind(this);
     this.handleDataPropertyChange = this.handleDataPropertyChange.bind(this);
   }
 
-  var _proto = SelectionManager.prototype;
+  var _proto = SelectionModel.prototype;
 
   _proto.init = function init() {
     if (this.inited) {
@@ -75,6 +75,15 @@ var SelectionManager = /*#__PURE__*/function () {
     return elements;
   };
 
+  _proto.getSelection = function getSelection() {
+    var selectionModel = this.topo.getSelectionModel();
+    return selectionModel.getSelection().getArray();
+  }
+  /**
+   * 同步选中元素到store
+   */
+  ;
+
   _proto.handleSelectionChange = function handleSelectionChange(e) {
     rlog.info('Selection handleSelectionChange', e);
     this.updateSelection();
@@ -121,10 +130,10 @@ var SelectionManager = /*#__PURE__*/function () {
     dataModel.removeDataPropertyChangeListener(this.handleDataPropertyChange);
   };
 
-  return SelectionManager;
+  return SelectionModel;
 }();
 
-export { SelectionManager as default };
+export { SelectionModel as default };
 ; // 构造元素数据
 
 var map = {

package/es/core/models/TopoApp.js

@@ -20,9 +20,9 @@ import { updateEdgeExpanded } from "../utils/edgeUtil";
 import PluginManager from "./PluginManager";
 import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
-import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
+import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.41" === 'string' ? "6.0.0-alpha.41" : null;
+var version = typeof "6.0.0-alpha.43" === 'string' ? "6.0.0-alpha.43" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑
@@ -78,7 +78,7 @@ var Topo = /*#__PURE__*/function () {
 
     this.test = new Test(this);
     this.uid = topoFactory.add(options.name, this);
-    this.selectionManager = new SelectionManager(this);
+    this.selectionModel = new SelectionModel(this);
   };
 
   _proto.destroy = function destroy() {

package/es/networkTopo/components/editor/propertyViews/edge/EdgePropertyView.js

@@ -1,10 +1,43 @@
+import _Form from "@alifd/next/es/form";
+import _Field from "@alifd/next/es/field";
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import CommonEdgePropertyView from "../../../../../core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import React, { useEffect } from 'react';
 import BindExitLinkSelect from "./link/BindExitLinkSelect";
+
+function parseValues(values, edge) {
+  return _extends({}, values);
+}
+
 export default function EdgePropertyView(props) {
-  var extraDisplaySetting = /*#__PURE__*/React.createElement(BindExitLinkSelect, props);
-  return /*#__PURE__*/React.createElement(CommonEdgePropertyView, _extends({}, props, {
-    extraDisplaySetting: extraDisplaySetting
-  }));
+  var topo = props.topo,
+      edge = props.edge,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps,
+      extraDisplaySetting = props.extraDisplaySetting;
+  var store = topo.store;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValues(values, edge),
+    onChange: function onChange(name, value) {
+      rlog.debug('CommonEdgePropertyView', name, value);
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValues(values, edge));
+  }, [values]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '12px 0 0 32px'
+    }
+  }, /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(BindExitLinkSelect, props))));
 }

package/es/networkTopo/components/editor/propertyViews/edge/LinkPropertyView/LinkPropertyView.js

@@ -1,37 +1,31 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
-import React from "react";
-import TabView from "../../../../../../core/editor/components/settings/common/tab/TabView";
+import NoDataPage from '@riil-frontend/component-no-data-page';
+import React from 'react';
 import Data from "./Data";
-import Setting from "./Setting";
 export default function LinkPropertyView(props) {
   var edge = props.edge,
       topo = props.topo; // 无权限不显示数据页签
 
-  var _topo$store$useModelS = topo.store.useModelState("topoMod").data,
+  var _topo$store$useModelS = topo.store.useModelState('topoMod').data,
       links = _topo$store$useModelS.links,
       linkGroups = _topo$store$useModelS.linkGroups;
   var link = [].concat(links, linkGroups).find(function (item) {
     return item.id === edge.getTag();
-  }); // console.log('LinkPropertyView',link)
+  });
 
   if (link) {
     var readable = link.permission.readable;
 
     if (!readable) {
-      return /*#__PURE__*/React.createElement(Setting, props);
+      return /*#__PURE__*/React.createElement(NoDataPage, {
+        statusCode: "\u6CA1\u6709\u67E5\u770B\u6743\u9650"
+      });
     }
   } else {
-    return /*#__PURE__*/React.createElement(Setting, props);
+    return null;
   }
 
-  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
     link: link
-  }))), /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
-  }, /*#__PURE__*/React.createElement(Setting, props)));
+  }));
 }

package/es/networkTopo/components/editor/propertyViews/edge/LinkPropertyView/LinkPropertyViewV1.js

@@ -0,0 +1,37 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import TabView from "../../../../../../core/editor/components/settings/common/tab/TabView";
+import Data from "./Data";
+import Setting from "./Setting";
+export default function LinkPropertyView(props) {
+  var edge = props.edge,
+      topo = props.topo; // 无权限不显示数据页签
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod').data,
+      links = _topo$store$useModelS.links,
+      linkGroups = _topo$store$useModelS.linkGroups;
+  var link = [].concat(links, linkGroups).find(function (item) {
+    return item.id === edge.getTag();
+  }); // console.log('LinkPropertyView',link)
+
+  if (link) {
+    var readable = link.permission.readable;
+
+    if (!readable) {
+      return /*#__PURE__*/React.createElement(Setting, props);
+    }
+  } else {
+    return /*#__PURE__*/React.createElement(Setting, props);
+  }
+
+  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+    link: link
+  }))), /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(Setting, props)));
+}

package/es/networkTopo/components/editor/propertyViews/edge/link/LinkInfoPreview.module.scss

@@ -53,7 +53,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding-top: 8px;
+  padding-top: 12px;
   padding-left: 16px;
 
   :global {

package/es/networkTopo/models/LinkDynamicStyleExecutor.js

@@ -54,13 +54,13 @@ var LinkDynamicStyleExecutor = /*#__PURE__*/function () {
     var _this = this;
 
     var topo = this.topo;
-    topo.historyManager && topo.historyManager.setDisabled(true, '链路动态样式');
 
     var _topo$dataModel$getDa = topo.dataModel.getData(),
         links = _topo$dataModel$getDa.links,
         linkGroups = _topo$dataModel$getDa.linkGroups;
 
-    var dataModel = this.topo.getDataModel(); // 1、如果连线可见，设置线宽
+    var dataModel = this.topo.getDataModel();
+    topo.historyManager && topo.historyManager.setDisabled(true, '链路动态样式'); // 1、如果连线可见，设置线宽
 
     links.forEach(function (link) {
       var edge = dataModel.getDataByTag(link.id);

package/es/style.js

@@ -38,8 +38,8 @@ import '@alifd/next/es/menu/style';
 import '@alifd/next/es/collapse/style';
 import '@alifd/next/es/select/style';
 import '@alifd/next/es/number-picker/style';
-
 import '@alifd/next/es/tag/style';
+
 import '@riil-frontend/component-riil-event-emitter/es/style';
 import '@alifd/next/es/range/style';
 import './index.scss';

package/lib/components/VerticalIconTab/VerticalIconTab.js

@@ -9,6 +9,8 @@ var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -26,8 +28,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function CustomTabItem(_ref) {
   var title = _ref.title,
+      titleTootip = _ref.titleTootip,
       icon = _ref.icon;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+
+  var tabItem = /*#__PURE__*/_react["default"].createElement("div", {
     className: "v-icon-tab-item"
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: icon,
@@ -35,6 +39,15 @@ function CustomTabItem(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "tab-title"
   }, title));
+
+  return /*#__PURE__*/_react["default"].createElement(_balloon["default"].Tooltip, {
+    trigger: tabItem,
+    align: "r" // 解决遮挡下拉浮层问题
+    ,
+    popupStyle: {
+      zIndex: 1000
+    }
+  }, titleTootip);
 }
 /**
  * 竖向

package/lib/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -33,6 +33,7 @@
       justify-content: center;
       margin: 0 4px;
       border-radius: 4px;
+      user-select: none;
 
       &:hover {
         background-color: rgba(76, 137, 255, 0.1);

package/lib/core/components/DisplaySettingDrawer/hooks/useDisplaySetting.js

@@ -87,13 +87,18 @@ var _default = function _default(props) {
             case 7:
               extraOnOk = displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onOk;
 
-              if (extraOnOk) {
-                extraOnOk(displayConfig);
+              if (!extraOnOk) {
+                _context2.next = 11;
+                break;
               }
 
+              _context2.next = 11;
+              return extraOnOk(displayConfig);
+
+            case 11:
               topo.historyManager.endTransaction();
 
-            case 10:
+            case 12:
             case "end":
               return _context2.stop();
           }

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

@@ -147,7 +147,7 @@ var Topology = function Topology(props) {
     return function () {
       _rlog["default"].info('TopoView 退出');
 
-      topo.selectionManager.destroy();
+      topo.selectionModel.destroy();
       topoDispatchers.reset();
     };
   }, []);
@@ -177,7 +177,7 @@ var Topology = function Topology(props) {
       topo.historyManager = new _HistoryManager["default"](topo, htHistoryManager);
     }
 
-    topo.selectionManager.init();
+    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded2: true
     });
@@ -197,7 +197,7 @@ var Topology = function Topology(props) {
     (0, _graphLinkUtil.fixLink)(topo);
     (0, _clusterUtil.handleClusterNoPermission)(topo);
     (0, _edgeUtil.updateEdgeExpanded)(topo);
-    topo.selectionManager.init();
+    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded: true
     });

package/lib/core/editor/components/Sidebar/panes.js

@@ -16,28 +16,33 @@ var _ImagePanel = _interopRequireDefault(require("./views/ImagePanel"));
 var _LinkPanel = _interopRequireDefault(require("./views/LinkPanel"));
 
 var panes = [{
-  title: '链路',
   key: '1',
+  title: '链路',
+  titleTootip: '在两个节点之间添加链路&线',
   icon: '/img/topo/editor/sidebar/icon/链路.svg',
   content: _LinkPanel["default"]
 }, {
   title: '组件',
   key: '2',
+  titleTootip: '基础组件',
   icon: '/img/topo/editor/sidebar/icon/组件.svg',
   content: _ComponentPanel["default"]
 }, {
   title: '图片',
   key: '3',
+  titleTootip: '图片素材',
   icon: '/img/topo/editor/sidebar/icon/图片.svg',
   content: _ImagePanel["default"]
 }, {
   title: '背景',
   key: '4',
+  titleTootip: '背景素材',
   icon: '/img/topo/editor/sidebar/icon/背景.svg',
   content: _BackgroundPanel["default"]
 }, {
   title: '画布',
   key: '5',
+  titleTootip: '拓扑图画布底图',
   icon: '/img/topo/editor/sidebar/icon/画布.svg',
   content: _CanvasPanel["default"]
 }];

package/lib/core/editor/components/Toolbar/widgets/AddResourceButton.js

@@ -39,7 +39,7 @@ function AddResourceButton(props) {
       topoEdit = props.topoEdit,
       editorProps = props.editorProps; // 选中的元素
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
 
   var _useState = (0, _react.useState)(getAddType(selection)),
       addType = _useState[0],

package/lib/core/editor/components/Toolbar/widgets/BoxBackgroundButton/BoxBackgroundButton.js

@@ -36,7 +36,7 @@ function BoxBackgroundButton(props) {
       setDisabled = _useState[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
   (0, _react.useEffect)(function () {// setDisabled(false)
   }, [selection]);
   var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {

package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js

@@ -48,7 +48,7 @@ function EdgeColorButton(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
 
   var loopEdges = function loopEdges(edges, operateEdgeFn) {
     edges.forEach(function (edge) {

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -46,7 +46,7 @@ function EdgeTypeButton(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
   (0, _react.useEffect)(function () {
     if (graphLoaded) {
       var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);