@riil-frontend/component-topology 6.0.20 → 7.0.0-dev.10

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/index.module.scss

@@ -1,135 +1,137 @@
 @import "~@alifd/next/variables.scss";
 
 .resource-overview {
-  .base-info {
-    margin-top: 16px;
-    margin-right: -25px;
-    overflow: hidden;
-    .item {
-      width: 220px;
-      max-width: 100%;
-      margin-right: 25px;
-      margin-bottom: 8px;
-      display: flex;
-      float: left;
-      .label {
-        white-space: nowrap;
-      }
-      .content {
-        flex: 1;
+
+}
+
+.base-info {
+  margin-top: 16px;
+  margin-right: -25px;
+  overflow: hidden;
+  .item {
+    width: 220px;
+    max-width: 100%;
+    margin-right: 25px;
+    margin-bottom: 8px;
+    display: flex;
+    float: left;
+    .label {
+      white-space: nowrap;
+    }
+    .content {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #4d6277;
+      .link {
+        width: 100%;
+        display: block;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        color: #4d6277;
-        .link {
-          width: 100%;
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
       }
     }
   }
-  .indicator {
-    width: 525px;
-    margin: 20px 0 12px;
-    display: flex;
-    flex-wrap: wrap;
-    .no-data{
-      width: 100%;
-      height: 120px;
-      line-height: 120px;
-      text-align: center;
+}
+.indicator {
+  width: 525px;
+  margin: 20px 0 12px;
+  display: flex;
+  flex-wrap: wrap;
+  .no-data{
+    width: 100%;
+    height: 120px;
+    line-height: 120px;
+    text-align: center;
+  }
+  .item {
+    width: 240px;
+    margin-bottom: 24px;
+    &:nth-child(2n + 1) {
+      margin-right: 24px;
     }
-    .item {
-      width: 240px;
-      margin-bottom: 24px;
-      &:nth-child(2n + 1) {
-        margin-right: 24px;
-      }
-      .title {
-        font-size: 13px;
-        color: #78849c;
-      }
-      .content {
-        margin-top: 10px;
-        font-size: 26px;
-        color: #4d6277;
-      }
-      .chart {
-        margin-top: 16px;
-      }
+    .title {
+      font-size: 13px;
+      color: #78849c;
     }
-    // .row {
-    //   display: flex;
-    //   border-bottom: 1px solid #f2f5fa;
-    //   &:last-child {
-    //     border: none;
-    //   }
-    //   .item {
-    //     width: 175px;
-    //     height: 100px;
-    //     box-sizing: border-box;
-    //     display: flex;
-    //     flex-direction: column;
-    //     text-align: center;
-    //     border-right: 1px solid #f2f5fa;
-    //     &:last-child {
-    //       border: none;
-    //     }
-    //     .content {
-    //       margin-top: 19px;
-    //       height: 32px;
-    //       line-height: 32px;
-    //       font-size: 32px;
-    //       color: #4d6277;
-    //     }
-    //     .label {
-    //       margin-top: 12px;
-    //       height: 20px;
-    //       font-size: 14px;
-    //       font-weight: 400;
-    //       color: #78849c;
-    //       line-height: 20px;
-    //     }
-    //   }
-    // }
-  }
-  .alarm {
-    margin-top: 12px;
-    .alarm-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .content {
+      margin-top: 10px;
+      font-size: 26px;
+      color: #4d6277;
     }
-    .alarm-color-icon {
-      width: 12px;
-      height: 12px;
-      font-size: 12px;
-      margin-right: 4px;
+    .chart {
+      margin-top: 16px;
     }
-    .no-data {
-      font-size: 14px;
-      text-align: center;
-      color: var(--color-text1-4);
-      height: 120px;
-      line-height: 120px;
+  }
+  // .row {
+  //   display: flex;
+  //   border-bottom: 1px solid #f2f5fa;
+  //   &:last-child {
+  //     border: none;
+  //   }
+  //   .item {
+  //     width: 175px;
+  //     height: 100px;
+  //     box-sizing: border-box;
+  //     display: flex;
+  //     flex-direction: column;
+  //     text-align: center;
+  //     border-right: 1px solid #f2f5fa;
+  //     &:last-child {
+  //       border: none;
+  //     }
+  //     .content {
+  //       margin-top: 19px;
+  //       height: 32px;
+  //       line-height: 32px;
+  //       font-size: 32px;
+  //       color: #4d6277;
+  //     }
+  //     .label {
+  //       margin-top: 12px;
+  //       height: 20px;
+  //       font-size: 14px;
+  //       font-weight: 400;
+  //       color: #78849c;
+  //       line-height: 20px;
+  //     }
+  //   }
+  // }
+}
+.alarm {
+  margin-top: 12px;
+  .alarm-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .alarm-color-icon {
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+    margin-right: 4px;
+  }
+  .no-data {
+    font-size: 14px;
+    text-align: center;
+    color: var(--color-text1-4);
+    height: 120px;
+    line-height: 120px;
+  }
+  :global {
+    .#{$css-prefix}btn-helper {
+      vertical-align: baseline;
     }
-    :global {
-      .#{$css-prefix}btn-helper {
-        vertical-align: baseline;
-      }
-      .risk-icon {
-        color: #ff7843;
-      }
-      .#{$css-prefix}table .#{$css-prefix}table-body tr:last-child td {
-        border-bottom: none;
-      }
-      // .#{$css-prefix}btn{
-      //   height: 28px !important;
-      // }
+    .risk-icon {
+      color: #ff7843;
     }
+    .#{$css-prefix}table .#{$css-prefix}table-body tr:last-child td {
+      border-bottom: none;
+    }
+    // .#{$css-prefix}btn{
+    //   height: 28px !important;
+    // }
   }
 }
 

package/es/core/viewer/components/titlebar/BasicTools.js

@@ -3,34 +3,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
 import EditButton from "./widgets/EditButton";
 import NodesDragSwitch from "./widgets/NodesDragSwitchWrapper";
-import AlarmListShowButton from "./widgets/AlarmListShowButton";
 import SettingButton from "./widgets/SettingButtonWidget";
-import useEventData from "../../../hooks/useEventData";
+import AlarmButton from "./widgets/AlarmButton";
 export default function BasicTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,
       showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton,
       children = props.children;
-
-  var _topo$store$useModel = topo.store.useModel("topoAlarm"),
-      alarmState = _topo$store$useModel[0],
-      alarmDispatchers = _topo$store$useModel[1];
-
-  var alarmPanelIsOpen = alarmState.alarmPanelIsOpen;
-  var alarmData = useEventData({
-    topo: topo
-  });
   return /*#__PURE__*/React.createElement(_Box, {
     direction: "row",
     spacing: 8
   }, showEditButton && /*#__PURE__*/React.createElement(EditButton, _extends({
     topo: topo
-  }, props)), /*#__PURE__*/React.createElement(AlarmListShowButton, _extends({
+  }, props)), /*#__PURE__*/React.createElement(AlarmButton, _extends({
     topo: topo
-  }, props, {
-    alarmPanelIsOpen: alarmPanelIsOpen,
-    alarmData: alarmData
-  })), /*#__PURE__*/React.createElement(SettingButton, props), /*#__PURE__*/React.createElement(NodesDragSwitch, _extends({
+  }, props)), /*#__PURE__*/React.createElement(SettingButton, props), /*#__PURE__*/React.createElement(NodesDragSwitch, _extends({
     topo: topo
   }, props)), children);
 }

package/es/core/viewer/components/titlebar/widgets/AlarmButton.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import AlarmListShowButton from "./AlarmListShowButton";
+import useEventData from "../../../../hooks/useEventData";
+
+function AlarmButton(props) {
+  var topo = props.topo;
+
+  var _topo$store$useModel = topo.store.useModel("topoAlarm"),
+      alarmState = _topo$store$useModel[0],
+      alarmDispatchers = _topo$store$useModel[1];
+
+  var alarmPanelIsOpen = alarmState.alarmPanelIsOpen;
+  var alarmData = useEventData({
+    topo: topo
+  });
+  return /*#__PURE__*/React.createElement(AlarmListShowButton, _extends({
+    topo: topo
+  }, props, {
+    alarmPanelIsOpen: alarmPanelIsOpen,
+    alarmData: alarmData
+  }));
+}
+
+export default AlarmButton;

package/es/networkTopo/getTopoData.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import topoService from "@riil-frontend/component-topology-common/es/services/topo";
 import { getLinksDetail } from "../core/models/utils/linkUtils";
 import { queryCisByIds } from "../core/services";
 import { addTopoDataResourcePermission } from "./utils/resourcePermissionUtil"; // import "./utils/__tests__/resourcePermissionUtil.test";
@@ -127,12 +126,12 @@ function _buildData() {
   return _buildData.apply(this, arguments);
 }
 
-export default function getTopoData(_x4) {
+export default function getTopoData(_x4, _x5) {
   return _getTopoData.apply(this, arguments);
 }
 
 function _getTopoData() {
-  _getTopoData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
+  _getTopoData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id, topoService) {
     var data;
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {

package/es/networkTopo/store/topoCenter.js

@@ -99,22 +99,45 @@ export default {
                   });
 
                 case 22:
-                  _context.next = 26;
+                  _context.next = 29;
                   break;
 
                 case 24:
-                  _context.next = 26;
+                  if (!params.selectedElementTag) {
+                    _context.next = 27;
+                    break;
+                  }
+
+                  _context.next = 27;
+                  return dispatch.selection.update({
+                    initSelectionId: params.selectedElementTag
+                  });
+
+                case 27:
+                  _context.next = 29;
                   return dispatch.topoMod.initData(_extends({}, params, {
                     type: params.type,
                     id: id
                   }));
 
-                case 26:
+                case 29:
                   _this.update({
                     loading: false
+                  }); // 是否打开概览
+
+
+                  if (!params.openResourceOverview) {
+                    _context.next = 33;
+                    break;
+                  }
+
+                  _context.next = 33;
+                  return dispatch.resourceDetail.update({
+                    visible: true,
+                    id: params.openResourceOverview
                   });
 
-                case 27:
+                case 33:
                 case "end":
                   return _context.stop();
               }

package/es/style.js

@@ -1,45 +1,45 @@
 import '@riil-frontend/component-topology-graph/es/style';
 import '@alifd/next/es/box/style';
 import '@alifd/next/es/message/style';
-import '@alifd/next/es/button/style';
-import '@alifd/next/es/icon/style';
-import '@alifd/next/es/overlay/style';
-import '@alifd/next/es/list/style';
-import '@alifd/next/es/card/style';
-import '@riil-frontend/component-no-data-page/es/style';
-import '@alifd/next/es/drawer/style';
-import '@alifd/next/es/form/style';
-import '@alifd/next/es/field/style';
-import '@alifd/next/es/radio/style';
-import '@alifd/next/es/checkbox/style';
-import '@alifd/next/es/table/style';
-import '@alifd/next/es/search/style';
-import '@alifd/next/es/grid/style';
-import '@riil-frontend/component-action-tree/es/style';
-import '@riil-frontend/component-table-layout/es/style';
-import '@riil-frontend/hooks/es/style';
-import '@alifd/next/es/balloon/style';
 import '@riil-frontend/component-topology-utils/es/style';
-import '@alifd/next/es/dropdown/style';
-import '@alifd/next/es/menu/style';
-import '@alifd/next/es/dialog/style';
 import '@riil-frontend/utils/es/style';
 import '@riil-frontend/component-riil-event-emitter/es/style';
+import '@alifd/next/es/drawer/style';
+import '@alifd/next/es/menu-button/style';
+import '@alifd/next/es/search/style';
 import '@alifd/next/es/tab/style';
+import '@alifd/next/es/table/style';
+import '@riil-frontend/component-table-layout/es/style';
 import '@riil-frontend/component-pager/es/style';
-import '@alifd/next/es/menu-button/style';
+import '@alifd/next/es/button/style';
+import '@alifd/next/es/icon/style';
 import '@alifd/next/es/loading/style';
 import '@alifd/next/es/divider/style';
+import '@riil-frontend/component-no-data-page/es/style';
 
+import '@alifd/next/es/overlay/style';
+import '@alifd/next/es/checkbox/style';
 import '@riil-frontend/component-crucial-link-topo/es/style';
 import '@alifd/next/es/input/style';
+import '@alifd/next/es/field/style';
+import '@alifd/next/es/form/style';
+import '@alifd/next/es/dialog/style';
 import '@alifd/next/es/upload/style';
 import '@alifd/next/es/config-provider/style';
 import '@riil-frontend/component-common-res-list/es/style';
+import '@alifd/next/es/balloon/style';
+import '@alifd/next/es/menu/style';
+import '@alifd/next/es/dropdown/style';
 import '@alifd/next/es/range/style';
+import '@alifd/next/es/radio/style';
 import '@alifd/next/es/tag/style';
 import '@alifd/next/es/number-picker/style';
 import '@alifd/next/es/select/style';
 import '@alifd/next/es/collapse/style';
+import '@alifd/next/es/list/style';
 
+import '@alifd/next/es/grid/style';
+import '@riil-frontend/component-action-tree/es/style';
+import '@riil-frontend/hooks/es/style';
+import '@alifd/next/es/card/style';
 import './index.scss';

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

@@ -21,8 +21,6 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
 
 var _showMessage = _interopRequireDefault(require("../../utils/showMessage"));
 
-var _TitleBar = _interopRequireDefault(require("../titlebar/TitleBar"));
-
 var _template = require("../../../utils/template");
 
 var _edgeUtil = require("../../utils/edgeUtil");
@@ -73,7 +71,6 @@ var Topology = function Topology(props) {
       onLoad = props.onLoad,
       onDestroy = props.onDestroy,
       onRefreshTopo = props.onRefresh,
-      onEnterEdit = props.onEnterEdit,
       onSave = props.onSave,
       nodeDeleteable = props.nodeDeleteable,
       onNodeDelete = props.onNodeDelete,
@@ -187,7 +184,19 @@ var Topology = function Topology(props) {
     topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded: true
-    });
+    }); // url选中元素
+
+    var _topo$store$getModelS = topo.store.getModelState('selection'),
+        initSelectionId = _topo$store$getModelS.initSelectionId;
+
+    if (initSelectionId) {
+      var ele = topo.getHtTopo().getGraphView().dm().getDataByTag(initSelectionId);
+      topo.getHtTopo().getGraphView().sm().setSelection([ele]);
+      var selectionDispatchers = topo.store.getModelDispatchers('selection');
+      selectionDispatchers.update({
+        initSelectionId: null
+      });
+    }
 
     if (onLoaded) {
       onLoaded(topoData);
@@ -234,10 +243,6 @@ var Topology = function Topology(props) {
         rightEventHandle(event);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_DATA_PICK:
-        topoEdit.onBindData(event.data);
-        break;
-
       case _componentTopologyGraph.TopoEvent.EVENT_DATA_DELETE:
         topoEdit.onDeleteElement(event.data);
         break;
@@ -251,10 +256,6 @@ var Topology = function Topology(props) {
         onRefresh(event.data);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_EDIT_EXIT:
-        topoEdit.onExitEdit(event.data);
-        break;
-
       case _componentTopologyGraph.TopoEvent.EVENT_CONTEXT_TOOL:
         _rlog["default"].debug('自定义工具栏事件', event);
 
@@ -294,12 +295,7 @@ var Topology = function Topology(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _TopoViewModule["default"].topoView,
     "data-version": topo.version
-  }, titleBar !== false && (titleBar || /*#__PURE__*/_react["default"].createElement(_TitleBar["default"], {
-    topo: topo,
-    viewerProps: viewerProps,
-    onEnterEdit: onEnterEdit,
-    topoEditApi: topoEdit
-  })), isEditMode && /*#__PURE__*/_react["default"].createElement(_EditorToolbar["default"], {
+  }, titleBar !== false && titleBar, isEditMode && /*#__PURE__*/_react["default"].createElement(_EditorToolbar["default"], {
     topo: topo,
     topoEdit: topoEdit,
     topoContext: {
@@ -341,8 +337,6 @@ Topology.propTypes = {
   viewerProps: _propTypes["default"].object,
   editorProps: _propTypes["default"].object,
   topoContext: _propTypes["default"].object,
-  // 进入编辑模式
-  onEnterEdit: _propTypes["default"].func,
   onRefresh: _propTypes["default"].func,
   onSave: _propTypes["default"].func,
   nodeDeleteable: _propTypes["default"].func,
@@ -354,7 +348,7 @@ Topology.propTypes = {
   /**
    * @deprecated 工具栏
    */
-  titleBar: _propTypes["default"].oneOf([_react["default"].ReactNode, false])
+  titleBar: _propTypes["default"].any
 };
 Topology.defaultProps = {
   defaultEnterEditMode: false,

package/lib/core/components/titlebar/index.js

@@ -30,4 +30,8 @@ exports.TitleWidget = _TitleWidget["default"];
 
 var _ViewerTools = _interopRequireDefault(require("../../viewer/components/titlebar/ViewerTools"));
 
-exports.ViewerTools = _ViewerTools["default"];
+exports.ViewerTools = _ViewerTools["default"];
+
+var _DebugTools = _interopRequireDefault(require("../../editor/components/titlebar/widgets/DebugTools"));
+
+exports.DebugTools = _DebugTools["default"];

package/lib/core/editor/components/EditorPlugin.js

@@ -13,8 +13,6 @@ var _CustomIconPlugin = _interopRequireDefault(require("./CustomIconPlugin"));
 
 var _SaveLoading = _interopRequireDefault(require("./plugins/SaveLoading"));
 
-var _MultipleResourceSelectPlugin = _interopRequireDefault(require("./plugins/MultipleResourceSelectPlugin"));
-
 var _GroupAddResourceDrawerPlugin = _interopRequireDefault(require("./GroupAddResourceDrawerPlugin"));
 
 var _MetricPollingPlugin = _interopRequireDefault(require("../../viewer/components/plugins/MetricPollingPlugin"));
@@ -47,7 +45,7 @@ function TopoEditorPlugin(props) {
     return null;
   }
 
-  var plugins = [_CorePlugin["default"], _SaveLoading["default"], _AddElementThemePlugin["default"], _CustomIconPlugin["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _MetricPollingPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  var plugins = [_CorePlugin["default"], _SaveLoading["default"], _AddElementThemePlugin["default"], _CustomIconPlugin["default"], _GroupAddResourceDrawerPlugin["default"], _MetricPollingPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/_react["default"].createElement(Plugin, (0, _extends2["default"])({
       key: index,

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

@@ -68,16 +68,8 @@ function FontStyleButton(props) {
     underline: underline
   })),
       value = _useState2[0],
-      setValue = _useState2[1]; // 选中的元素
+      setValue = _useState2[1];
 
-
-  var selection = topo.selectionModel.useHtSelection();
-  (0, _react.useEffect)(function () {
-    var containText = selection.filter(function (ele) {
-      return (0, _htElementUtils.isText)(ele);
-    }).length;
-    setDisabled(!containText);
-  }, [selection]);
   (0, _react.useEffect)(function () {
     setValue(buildValue({
       bold: bold,

package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js

@@ -20,23 +20,22 @@ var _colorUtil = require("../colorUtil");
 var _excluded = ["color", "background", "opacity", "bold", "italic"];
 
 function getTextStyle(element) {
-  var underline = null;
   return (0, _extends2["default"])({
     color: (0, _colorUtil.parseColor)(element.a('edge.tag.color')),
     fontFamily: element.a('edge.tag.fontFamily') || '微软雅黑',
-    underline: underline
+    fontSize: element.a('edge.tag.fontSize'),
+    bold: !!element.a('edge.tag.fontBold'),
+    italic: !!element.a('edge.tag.fontItalic')
   }, (0, _colorUtil.parseBackground)(element.a('edge.tag.background')));
 }
 
 function setTextStyle(element, style, topo) {
-  var _fontStyleUtil$remove = _fontStyleUtil["default"].removeBoldItalic(style),
-      color = _fontStyleUtil$remove.color,
-      background = _fontStyleUtil$remove.background,
-      opacity = _fontStyleUtil$remove.opacity,
-      bold = _fontStyleUtil$remove.bold,
-      italic = _fontStyleUtil$remove.italic,
-      otherStyle = (0, _objectWithoutPropertiesLoose2["default"])(_fontStyleUtil$remove, _excluded);
-
+  var color = style.color,
+      background = style.background,
+      opacity = style.opacity,
+      bold = style.bold,
+      italic = style.italic,
+      otherStyle = (0, _objectWithoutPropertiesLoose2["default"])(style, _excluded);
   var tagStyle = (0, _extends2["default"])({}, otherStyle);
 
   if ('color' in style) {
@@ -73,12 +72,12 @@ function setTextStyle(element, style, topo) {
 
 
 function getEnabledFields(element) {
-  return ['fontFamily', 'color', 'background', 'opacity'];
+  return ['fontFamily', 'color', 'background', 'opacity', 'fontSize', 'bold', 'italic'];
 }
 
 function getFieldDisabled(element) {
   return {
-    fontSize: true
+    fontSize: false
   };
 }