@riil-frontend/component-topology 6.0.0-alpha.59 → 6.0.0-alpha.60

package/es/core/common/icons/icon.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import topoManager from '@riil-frontend/component-topology-graph/es/manager';
-import { getModelTreeCache } from '@riil-frontend/component-topology-graph/es/iconConfig/services/topoCiModel';
 import { getCiModels } from "../../../constants/ResourceTypeLimit";
 /**
  * 获取默认图标
@@ -20,7 +19,7 @@ export function getNodeDefaultIcons(topo) {
 
 export function getResourceIcons(topo) {
   // 获取模型树缓存
-  var modelTree = getModelTreeCache(); // 过滤出克监控的模型
+  var modelTree = topoManager.ciModel.getModelTreeCache(); // 过滤出可监控的模型
 
   var models = getCiModels(modelTree).filter(function (model) {
     return !!model.icon;

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

@@ -4,27 +4,27 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import TopoGraph, { TopoEvent } from '@riil-frontend/component-topology-graph';
-import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-import useTopoEdit from "../../hooks/useTopoEdit";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog'; // 通用
+
 import showMessage from "../../utils/showMessage";
-import EditorPlugin from "../../editor/components/EditorPlugin";
-import ViewerPlugin from "../../viewer/components/plugins/ViewerPlugin";
 import TitleBar from "../titlebar/TitleBar";
 import { TPL_TREE } from "../../../utils/template";
-import PropertyView from "../../editor/components/settings/PropertyView";
 import { updateEdgeExpanded } from "../../utils/edgeUtil";
-import useManageStatus from "../../hooks/useManageStatus";
-import useAlarm from "../../hooks/useAlarm";
 import useRouterAdapter from "../../hooks/useRouterAdapter";
 import { fixLink } from "../../utils/graphLinkUtil";
 import { handleClusterNoPermission, upgradeV103GraphClusterNode } from "../../../utils/clusterUtil";
+import GraphViewPanel from "./GraphViewPanel";
+import styles from "./TopoView.module.scss"; // 显示模式
+
+import ViewerPlugin from "../../viewer/components/plugins/ViewerPlugin"; // 编辑模式
+
+import useTopoEdit from "../../hooks/useTopoEdit";
+import EditorPlugin from "../../editor/components/EditorPlugin";
 import EditorToolbar from "../../editor/components/Toolbar/EditorToolbar";
 import Sidebar from "../../editor/components/Sidebar/Sidebar";
+import PropertyView from "../../editor/components/settings/PropertyView";
 import HistoryManager from "../../models/HistoryManager";
-import GraphViewPanel from "./GraphViewPanel";
-import styles from "./TopoView.module.scss";
 import editorStyles from "./editor.module.scss";
-import useKeyboardShortcut from "../../editor/hooks/useKeyboardShortcut";
 
 var Topology = function Topology(props) {
   var _classnames;
@@ -70,13 +70,7 @@ var Topology = function Topology(props) {
       tData = _useState[0],
       setTData = _useState[1];
 
-  useRouterAdapter(props);
-  useAlarm({
-    topo: topo
-  });
-  useManageStatus({
-    topo: topo
-  }); // 编辑模式----
+  useRouterAdapter(props); // 编辑模式----
 
   var topoEdit = useTopoEdit({
     topo: topo,
@@ -90,11 +84,6 @@ var Topology = function Topology(props) {
     isLayerTopo: isLayerTopo
   });
   topo.topoEdit = topoEdit;
-  useKeyboardShortcut({
-    topo: topo,
-    topoEdit: topoEdit,
-    isEditMode: isEditMode
-  });
   useEffect(function () {
     if (viewState === 'view' && topoId) {
       // TODO 移到模型中

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

@@ -5,6 +5,8 @@ import SaveLoading from "./plugins/SaveLoading";
 import MultipleResourceSelectPlugin from "./plugins/MultipleResourceSelectPlugin";
 import GroupAddResourceDrawerPlugin from "./GroupAddResourceDrawerPlugin";
 import MetricPollingPlugin from "../../viewer/components/plugins/MetricPollingPlugin";
+import AddElementThemePlugin from "./plugins/AddElementThemePlugin";
+import useKeyboardShortcut from "../hooks/useKeyboardShortcut";
 export default function TopoEditorPlugin(props) {
   var topo = props.topo,
       topoContext = props.topoContext,
@@ -16,7 +18,11 @@ export default function TopoEditorPlugin(props) {
       topoEdit.reset();
     };
   }, []);
-  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, CustomIconPlugin, MetricPollingPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  useKeyboardShortcut({
+    topo: topo,
+    topoEdit: topoEdit
+  });
+  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, AddElementThemePlugin, CustomIconPlugin, MetricPollingPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/React.createElement(Plugin, _extends({
       key: index,

package/es/core/editor/components/Sidebar/views/CanvasPanel/hooks/useCanvasThemeConfig.js

@@ -3,8 +3,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { isClusterHtElement } from "../../../../../../../utils/clusterUtil";
 import { getElements, isEdge, isGroup, isLayer, isNode, isText } from "../../../../../../../utils/htElementUtils";
-import THEMES from "../themes";
-import useNewElementTheme from "./useNewElementTheme";
+import THEMES from "../../../../../config/themes";
+import ThemeUtil from "../../../../../utils/themeUtil";
 
 function useCanvasThemeConfig(props) {
   var topo = props.topo;
@@ -14,12 +14,6 @@ function useCanvasThemeConfig(props) {
       displayConfigDispatchers = _topo$store$useModel[1];
 
   var canvasThemeName = displayConfig.canvasTheme || 'white';
-  useNewElementTheme({
-    topo: topo,
-    theme: canvasThemeName,
-    themes: THEMES,
-    setElementTheme: setElementTheme
-  });
 
   var setCanvasTheme = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeName) {
@@ -97,25 +91,17 @@ function useCanvasThemeConfig(props) {
   function setElementsTheme(themeConfig) {
     var dm = topo.getHtTopo().getGraphView().dm();
     var elements = getElements(dm);
+
+    var _ThemeUtil = ThemeUtil({
+      topo: topo
+    }),
+        setElementTheme = _ThemeUtil.setElementTheme;
+
     elements.forEach(function (element) {
       setElementTheme(element, themeConfig);
     });
   }
 
-  function setElementTheme(element, themeConfig) {
-    if (isText(element)) {
-      element.s('text.color', themeConfig.text.color);
-    } else if (isGroup(element)) {
-      if (isClusterHtElement(element)) {
-        // 集群
-        element.s(themeConfig.cluster.style);
-      } else {
-        // 区域（非集群）
-        element.s(themeConfig.group.style);
-      }
-    } else if (isEdge(element)) {}
-  }
-
   return {
     themes: THEMES,
     canvasThemeName: canvasThemeName,

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

@@ -111,7 +111,7 @@ function FontStyleButton(props) {
       alt: ""
     }), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: '#4d6277 !important'
+        color: '#4d6277'
       }
     }, item.label)));
   })));

package/es/core/editor/components/plugins/AddElementThemePlugin.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import useNewElementTheme from "../../hooks/useNewElementTheme";
+
+function AddElementThemePlugin(props) {
+  useNewElementTheme({
+    topo: props.topo
+  });
+  return null;
+}
+
+export default AddElementThemePlugin;

package/es/core/editor/components/settings/PropertyView.js

@@ -51,7 +51,7 @@ export default function PropertyPanel(props) {
   }, [propertyPanelVisible, PropertyView, propertyViewManager]);
 
   var renderContent = function renderContent() {
-    if (!PropertyView) {
+    if (!propertyPanelVisible || !PropertyView) {
       return null;
     }
 

package/es/core/editor/hooks/useKeyboardShortcut.js

@@ -3,8 +3,7 @@ var ht = window.ht; // 快捷键
 
 export default function useKeyboardShortcut(props) {
   var topo = props.topo,
-      topoEdit = props.topoEdit,
-      isEditMode = props.isEditMode;
+      topoEdit = props.topoEdit;
   useEffect(function () {
     var handleKeyDown = function handleKeyDown(e) {
       if (e.target.tagName === 'INPUT') {
@@ -24,6 +23,7 @@ export default function useKeyboardShortcut(props) {
       }
 
       if (e.keyCode === 32) {
+        // 空格
         var _topo$store$getModelS = topo.store.getModelState('topoEdit'),
             viewMouseMode = _topo$store$getModelS.viewMouseMode;
 
@@ -31,12 +31,9 @@ export default function useKeyboardShortcut(props) {
       }
     };
 
-    if (isEditMode) {
-      window.addEventListener('keydown', handleKeyDown);
-    }
-
+    window.addEventListener('keydown', handleKeyDown);
     return function () {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [isEditMode]);
+  }, []);
 }

package/es/core/editor/hooks/useNewElementTheme.js

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import THEMES from "../config/themes";
+import ThemeUtil from "../utils/themeUtil";
+
+function useNewElementTheme(props) {
+  var topo = props.topo;
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded2 = topoModState.graphLoaded2;
+  useEffect(function () {
+    var dm = topo.getHtTopo().getGraphView().dm();
+
+    if (graphLoaded2) {
+      dm.addDataModelChangeListener(handleDataModelChangeListener);
+    }
+
+    function handleDataModelChangeListener(e) {
+      var kind = e.kind,
+          data = e.data;
+
+      if (kind === 'add') {
+        var displayConfig = topo.store.getModelState('displayConfig');
+        var theme = displayConfig.canvasTheme || 'white';
+        var themeConfig = THEMES.find(function (item) {
+          return item.name === theme;
+        });
+
+        var _ThemeUtil = ThemeUtil({
+          topo: topo
+        }),
+            setElementTheme = _ThemeUtil.setElementTheme;
+
+        setElementTheme(data, themeConfig);
+      }
+    }
+
+    return function () {
+      if (graphLoaded2) {
+        dm.removeDataModelChangeListener(handleDataModelChangeListener);
+      }
+    };
+  }, [graphLoaded2]);
+}
+
+export default useNewElementTheme;

package/es/core/editor/utils/themeUtil.js

@@ -0,0 +1,32 @@
+import { isClusterHtElement } from "../../../utils/clusterUtil";
+import { getElements, isEdge, isGroup, isText } from "../../../utils/htElementUtils";
+export default function ThemeUtil(props) {
+  var topo = props.topo;
+
+  function setElementsTheme(themeConfig) {
+    var dm = topo.getHtTopo().getGraphView().dm();
+    var elements = getElements(dm);
+    elements.forEach(function (element) {
+      setElementTheme(element, themeConfig);
+    });
+  }
+
+  function setElementTheme(element, themeConfig) {
+    if (isText(element)) {
+      element.s('text.color', themeConfig.text.color);
+    } else if (isGroup(element)) {
+      if (isClusterHtElement(element)) {
+        // 集群
+        element.s(themeConfig.cluster.style);
+      } else {
+        // 区域（非集群）
+        element.s(themeConfig.group.style);
+      }
+    } else if (isEdge(element)) {}
+  }
+
+  return {
+    setElementsTheme: setElementsTheme,
+    setElementTheme: setElementTheme
+  };
+}

package/es/core/hooks/useManageStatus.js

@@ -29,15 +29,6 @@ function mergeManageStatus(cis, manageStatusDatas) {
 
 export default function useManageStatus(props) {
   var topo = props.topo;
-
-  var _topo$store$useModel = topo.store.useModel('topoMod'),
-      topoState = _topo$store$useModel[0],
-      topoDispatchers = _topo$store$useModel[1];
-
-  var graphLoaded = topoState.graphLoaded,
-      viewState = topoState.viewState;
-  var isEditMode = viewState === 'edit';
-  var resources = topo.dataModel.useCis();
   useTopoEventListener({
     type: 'manageStatus',
     onMessage: function onMessage(manageStatusDatas) {
@@ -50,6 +41,7 @@ export default function useManageStatus(props) {
           linkGroups: mergeManageStatus(topoData.linkGroups, manageStatusDatas)
         });
 
+        var topoDispatchers = topo.store.getModelDispatchers('topoMod');
         topoDispatchers.update({
           data: newData
         });

package/es/core/models/TopoApp.js

@@ -4,6 +4,7 @@ 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 { cloneDeep } from 'lodash';
 import CiTypeCache from "./cache/CiTypeCache";
 import Alarm from "./Alarm";
 import TopoGraphView from "./TopoGraphView";
@@ -22,7 +23,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.59" === 'string' ? "6.0.0-alpha.59" : null;
+var version = typeof "6.0.0-alpha.60" === 'string' ? "6.0.0-alpha.60" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑
@@ -241,7 +242,7 @@ var Topo = /*#__PURE__*/function () {
           switch (_context4.prev = _context4.next) {
             case 0:
               _data$groups2 = data.groups, groups = _data$groups2 === void 0 ? [] : _data$groups2, _data$nodes2 = data.nodes, nodes = _data$nodes2 === void 0 ? [] : _data$nodes2, links = data.links, lines = data.lines;
-              this.view.topoClient.updateElements({
+              this.view.topoClient.updateElements(cloneDeep({
                 groups: formatGroups(groups),
                 nodes: nodes.map(function (node) {
                   return _extends({}, node, {
@@ -255,7 +256,7 @@ var Topo = /*#__PURE__*/function () {
                     dtype: 'link'
                   });
                 })
-              }); // TODO 更新store，触发属性、指标模型加载，更新指标
+              })); // TODO 更新store，触发属性、指标模型加载，更新指标
 
             case 2:
             case "end":

package/es/core/utils/showGraphManageStatusUtil.js

@@ -48,10 +48,16 @@ export function showManageStatus(options) {
 export function removeManageStatus(options) {
   var topo = options.topo,
       resources = options.resources;
+  var dm = topo.getDataModel();
+
+  if (!dm) {
+    return;
+  }
+
   resources.forEach(function (resource) {
     var type = resource.type,
         id = resource.id;
-    var element = topo.getDataModel().getDataByTag(id);
+    var element = dm.getDataByTag(id);
     if (!element) return;
 
     if (type === 'node') {

package/es/core/viewer/components/plugins/ViewerPlugin.js

@@ -1,14 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react'; // import ResourceWebControllUrlSettingDialog from './ResourceWebControllUrlSettingDialog';
-
+import React from 'react';
+import useAlarm from "../../../hooks/useAlarm";
+import useManageStatus from "../../../hooks/useManageStatus";
 import MetricPollingPlugin from "./MetricPollingPlugin";
 import ResourceDetail from "./ResourceDetail";
 export default function ViewerPlugin(props) {
   var topo = props.topo,
       viewerProps = props.viewerProps;
   var store = topo.store;
-  var plugins = [MetricPollingPlugin, // ResourceWebControllUrlSettingDialog,
-  ResourceDetail].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
+  useAlarm({
+    topo: topo
+  });
+  useManageStatus({
+    topo: topo
+  });
+  var plugins = [MetricPollingPlugin, ResourceDetail].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/React.createElement(Plugin, _extends({
       key: index,

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/dialog/style';
-import '@riil-frontend/component-topology-utils/es/style';
-import '@riil-frontend/utils/es/style';
-import '@alifd/next/es/upload/style';
-import '@alifd/next/es/icon/style';
-import '@alifd/next/es/config-provider/style';
-import '@alifd/next/es/input/style';
-import '@alifd/next/es/field/style';
-import '@alifd/next/es/form/style';
-import '@alifd/next/es/loading/style';
-import '@alifd/next/es/drawer/style';
 import '@alifd/next/es/button/style';
-import '@riil-frontend/component-common-res-list/es/style';
-import '@riil-frontend/component-no-data-page/es/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/search/style';
-import '@alifd/next/es/divider/style';
-
+import '@alifd/next/es/icon/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/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/collapse/style';
-import '@alifd/next/es/select/style';
-import '@alifd/next/es/number-picker/style';
-
-import '@alifd/next/es/tag/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/tab/style';
+import '@riil-frontend/component-pager/es/style';
+import '@alifd/next/es/menu-button/style';
+import '@alifd/next/es/loading/style';
+import '@alifd/next/es/divider/style';
+
+import '@riil-frontend/component-crucial-link-topo/es/style';
+import '@alifd/next/es/input/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/range/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 './index.scss';

package/lib/core/common/icons/icon.js

@@ -21,8 +21,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _manager = _interopRequireDefault(require("@riil-frontend/component-topology-graph/es/manager"));
 
-var _topoCiModel = require("@riil-frontend/component-topology-graph/es/iconConfig/services/topoCiModel");
-
 var _ResourceTypeLimit = require("../../../constants/ResourceTypeLimit");
 
 /**
@@ -43,7 +41,8 @@ function getNodeDefaultIcons(topo) {
 
 function getResourceIcons(topo) {
   // 获取模型树缓存
-  var modelTree = (0, _topoCiModel.getModelTreeCache)(); // 过滤出克监控的模型
+  var modelTree = _manager["default"].ciModel.getModelTreeCache(); // 过滤出可监控的模型
+
 
   var models = (0, _ResourceTypeLimit.getCiModels)(modelTree).filter(function (model) {
     return !!model.icon;

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

@@ -19,50 +19,47 @@ var _componentTopologyGraph = _interopRequireWildcard(require("@riil-frontend/co
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
-var _useTopoEdit = _interopRequireDefault(require("../../hooks/useTopoEdit"));
-
 var _showMessage = _interopRequireDefault(require("../../utils/showMessage"));
 
-var _EditorPlugin = _interopRequireDefault(require("../../editor/components/EditorPlugin"));
-
-var _ViewerPlugin = _interopRequireDefault(require("../../viewer/components/plugins/ViewerPlugin"));
-
 var _TitleBar = _interopRequireDefault(require("../titlebar/TitleBar"));
 
 var _template = require("../../../utils/template");
 
-var _PropertyView = _interopRequireDefault(require("../../editor/components/settings/PropertyView"));
-
 var _edgeUtil = require("../../utils/edgeUtil");
 
-var _useManageStatus = _interopRequireDefault(require("../../hooks/useManageStatus"));
-
-var _useAlarm = _interopRequireDefault(require("../../hooks/useAlarm"));
-
 var _useRouterAdapter = _interopRequireDefault(require("../../hooks/useRouterAdapter"));
 
 var _graphLinkUtil = require("../../utils/graphLinkUtil");
 
 var _clusterUtil = require("../../../utils/clusterUtil");
 
+var _GraphViewPanel = _interopRequireDefault(require("./GraphViewPanel"));
+
+var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
+
+var _ViewerPlugin = _interopRequireDefault(require("../../viewer/components/plugins/ViewerPlugin"));
+
+var _useTopoEdit = _interopRequireDefault(require("../../hooks/useTopoEdit"));
+
+var _EditorPlugin = _interopRequireDefault(require("../../editor/components/EditorPlugin"));
+
 var _EditorToolbar = _interopRequireDefault(require("../../editor/components/Toolbar/EditorToolbar"));
 
 var _Sidebar = _interopRequireDefault(require("../../editor/components/Sidebar/Sidebar"));
 
-var _HistoryManager = _interopRequireDefault(require("../../models/HistoryManager"));
-
-var _GraphViewPanel = _interopRequireDefault(require("./GraphViewPanel"));
+var _PropertyView = _interopRequireDefault(require("../../editor/components/settings/PropertyView"));
 
-var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
+var _HistoryManager = _interopRequireDefault(require("../../models/HistoryManager"));
 
 var _editorModule = _interopRequireDefault(require("./editor.module.scss"));
 
-var _useKeyboardShortcut = _interopRequireDefault(require("../../editor/hooks/useKeyboardShortcut"));
-
 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 Topology = function Topology(props) {
   var _classnames;
 
@@ -107,13 +104,7 @@ var Topology = function Topology(props) {
       tData = _useState[0],
       setTData = _useState[1];
 
-  (0, _useRouterAdapter["default"])(props);
-  (0, _useAlarm["default"])({
-    topo: topo
-  });
-  (0, _useManageStatus["default"])({
-    topo: topo
-  }); // 编辑模式----
+  (0, _useRouterAdapter["default"])(props); // 编辑模式----
 
   var topoEdit = (0, _useTopoEdit["default"])({
     topo: topo,
@@ -127,11 +118,6 @@ var Topology = function Topology(props) {
     isLayerTopo: isLayerTopo
   });
   topo.topoEdit = topoEdit;
-  (0, _useKeyboardShortcut["default"])({
-    topo: topo,
-    topoEdit: topoEdit,
-    isEditMode: isEditMode
-  });
   (0, _react.useEffect)(function () {
     if (viewState === 'view' && topoId) {
       // TODO 移到模型中

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

@@ -19,6 +19,10 @@ var _GroupAddResourceDrawerPlugin = _interopRequireDefault(require("./GroupAddRe
 
 var _MetricPollingPlugin = _interopRequireDefault(require("../../viewer/components/plugins/MetricPollingPlugin"));
 
+var _AddElementThemePlugin = _interopRequireDefault(require("./plugins/AddElementThemePlugin"));
+
+var _useKeyboardShortcut = _interopRequireDefault(require("../hooks/useKeyboardShortcut"));
+
 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; }
@@ -34,7 +38,11 @@ function TopoEditorPlugin(props) {
       topoEdit.reset();
     };
   }, []);
-  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _CustomIconPlugin["default"], _MetricPollingPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  (0, _useKeyboardShortcut["default"])({
+    topo: topo,
+    topoEdit: topoEdit
+  });
+  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _AddElementThemePlugin["default"], _CustomIconPlugin["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,