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

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

@@ -15,9 +15,9 @@ var _clusterUtil = require("../../../../../../../utils/clusterUtil");
 
 var _htElementUtils = require("../../../../../../../utils/htElementUtils");
 
-var _themes = _interopRequireDefault(require("../themes"));
+var _themes = _interopRequireDefault(require("../../../../../config/themes"));
 
-var _useNewElementTheme = _interopRequireDefault(require("./useNewElementTheme"));
+var _themeUtil = _interopRequireDefault(require("../../../../../utils/themeUtil"));
 
 function useCanvasThemeConfig(props) {
   var topo = props.topo;
@@ -27,12 +27,6 @@ function useCanvasThemeConfig(props) {
       displayConfigDispatchers = _topo$store$useModel[1];
 
   var canvasThemeName = displayConfig.canvasTheme || 'white';
-  (0, _useNewElementTheme["default"])({
-    topo: topo,
-    theme: canvasThemeName,
-    themes: _themes["default"],
-    setElementTheme: setElementTheme
-  });
 
   var setCanvasTheme = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(themeName) {
@@ -110,25 +104,17 @@ function useCanvasThemeConfig(props) {
   function setElementsTheme(themeConfig) {
     var dm = topo.getHtTopo().getGraphView().dm();
     var elements = (0, _htElementUtils.getElements)(dm);
+
+    var _ThemeUtil = (0, _themeUtil["default"])({
+      topo: topo
+    }),
+        setElementTheme = _ThemeUtil.setElementTheme;
+
     elements.forEach(function (element) {
       setElementTheme(element, themeConfig);
     });
   }
 
-  function setElementTheme(element, themeConfig) {
-    if ((0, _htElementUtils.isText)(element)) {
-      element.s('text.color', themeConfig.text.color);
-    } else if ((0, _htElementUtils.isGroup)(element)) {
-      if ((0, _clusterUtil.isClusterHtElement)(element)) {
-        // 集群
-        element.s(themeConfig.cluster.style);
-      } else {
-        // 区域（非集群）
-        element.s(themeConfig.group.style);
-      }
-    } else if ((0, _htElementUtils.isEdge)(element)) {}
-  }
-
   return {
     themes: _themes["default"],
     canvasThemeName: canvasThemeName,

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useNewElementTheme = _interopRequireDefault(require("../../hooks/useNewElementTheme"));
+
+function AddElementThemePlugin(props) {
+  (0, _useNewElementTheme["default"])({
+    topo: props.topo
+  });
+  return null;
+}
+
+var _default = AddElementThemePlugin;
+exports["default"] = _default;

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

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

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

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

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _themes = _interopRequireDefault(require("../config/themes"));
+
+var _themeUtil = _interopRequireDefault(require("../utils/themeUtil"));
+
+function useNewElementTheme(props) {
+  var topo = props.topo;
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded2 = topoModState.graphLoaded2;
+  (0, _react.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["default"].find(function (item) {
+          return item.name === theme;
+        });
+
+        var _ThemeUtil = (0, _themeUtil["default"])({
+          topo: topo
+        }),
+            setElementTheme = _ThemeUtil.setElementTheme;
+
+        setElementTheme(data, themeConfig);
+      }
+    }
+
+    return function () {
+      if (graphLoaded2) {
+        dm.removeDataModelChangeListener(handleDataModelChangeListener);
+      }
+    };
+  }, [graphLoaded2]);
+}
+
+var _default = useNewElementTheme;
+exports["default"] = _default;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = ThemeUtil;
+
+var _clusterUtil = require("../../../utils/clusterUtil");
+
+var _htElementUtils = require("../../../utils/htElementUtils");
+
+function ThemeUtil(props) {
+  var topo = props.topo;
+
+  function setElementsTheme(themeConfig) {
+    var dm = topo.getHtTopo().getGraphView().dm();
+    var elements = (0, _htElementUtils.getElements)(dm);
+    elements.forEach(function (element) {
+      setElementTheme(element, themeConfig);
+    });
+  }
+
+  function setElementTheme(element, themeConfig) {
+    if ((0, _htElementUtils.isText)(element)) {
+      element.s('text.color', themeConfig.text.color);
+    } else if ((0, _htElementUtils.isGroup)(element)) {
+      if ((0, _clusterUtil.isClusterHtElement)(element)) {
+        // 集群
+        element.s(themeConfig.cluster.style);
+      } else {
+        // 区域（非集群）
+        element.s(themeConfig.group.style);
+      }
+    } else if ((0, _htElementUtils.isEdge)(element)) {}
+  }
+
+  return {
+    setElementsTheme: setElementsTheme,
+    setElementTheme: setElementTheme
+  };
+}

package/lib/core/hooks/useManageStatus.js

@@ -40,15 +40,6 @@ function mergeManageStatus(cis, manageStatusDatas) {
 
 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();
   (0, _useTopoEventListener["default"])({
     type: 'manageStatus',
     onMessage: function onMessage(manageStatusDatas) {
@@ -60,6 +51,7 @@ function useManageStatus(props) {
           links: mergeManageStatus(topoData.links, manageStatusDatas),
           linkGroups: mergeManageStatus(topoData.linkGroups, manageStatusDatas)
         });
+        var topoDispatchers = topo.store.getModelDispatchers('topoMod');
         topoDispatchers.update({
           data: newData
         });

package/lib/core/models/TopoApp.js

@@ -17,6 +17,8 @@ var _componentTopologyUtils = require("@riil-frontend/component-topology-utils")
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
+var _lodash = require("lodash");
+
 var _CiTypeCache = _interopRequireDefault(require("./cache/CiTypeCache"));
 
 var _Alarm = _interopRequireDefault(require("./Alarm"));
@@ -52,7 +54,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
 var _SelectionModel = _interopRequireDefault(require("./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);
 /**
  * 拓扑显示和编辑
@@ -270,7 +272,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((0, _lodash.cloneDeep)({
                 groups: (0, _topoData.formatGroups)(groups),
                 nodes: nodes.map(function (node) {
                   return (0, _extends2["default"])({}, node, {
@@ -284,7 +286,7 @@ var Topo = /*#__PURE__*/function () {
                     dtype: 'link'
                   });
                 })
-              }); // TODO 更新store，触发属性、指标模型加载，更新指标
+              })); // TODO 更新store，触发属性、指标模型加载，更新指标
 
             case 2:
             case "end":

package/lib/core/utils/showGraphManageStatusUtil.js

@@ -59,10 +59,16 @@ function showManageStatus(options) {
 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/lib/core/viewer/components/plugins/ViewerPlugin.js

@@ -9,17 +9,25 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _useAlarm = _interopRequireDefault(require("../../../hooks/useAlarm"));
+
+var _useManageStatus = _interopRequireDefault(require("../../../hooks/useManageStatus"));
+
 var _MetricPollingPlugin = _interopRequireDefault(require("./MetricPollingPlugin"));
 
 var _ResourceDetail = _interopRequireDefault(require("./ResourceDetail"));
 
-// import ResourceWebControllUrlSettingDialog from './ResourceWebControllUrlSettingDialog';
 function ViewerPlugin(props) {
   var topo = props.topo,
       viewerProps = props.viewerProps;
   var store = topo.store;
-  var plugins = [_MetricPollingPlugin["default"], // ResourceWebControllUrlSettingDialog,
-  _ResourceDetail["default"]].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
+  (0, _useAlarm["default"])({
+    topo: topo
+  });
+  (0, _useManageStatus["default"])({
+    topo: topo
+  });
+  var plugins = [_MetricPollingPlugin["default"], _ResourceDetail["default"]].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.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/style.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "6.0.0-alpha.59",
+  "version": "6.0.0-alpha.60",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.59/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.60/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }

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

@@ -1,32 +0,0 @@
-import React, { useEffect } from 'react';
-import { isClusterHtElement } from "../../../../../../../utils/clusterUtil";
-import { getElements, isEdge, isGroup, isLayer, isNode, isText } from "../../../../../../../utils/htElementUtils";
-import THEMES from "../themes";
-
-function useNewElementTheme(props) {
-  var topo = props.topo,
-      theme = props.theme,
-      setElementTheme = props.setElementTheme;
-  useEffect(function () {
-    var dm = topo.getHtTopo().getGraphView().dm();
-    dm.addDataModelChangeListener(handleDataModelChangeListener);
-
-    function handleDataModelChangeListener(e) {
-      var kind = e.kind,
-          data = e.data;
-
-      if (kind === 'add') {
-        var themeConfig = THEMES.find(function (item) {
-          return item.name === theme;
-        });
-        setElementTheme(data, themeConfig);
-      }
-    }
-
-    return function () {
-      dm.removeDataModelChangeListener(handleDataModelChangeListener);
-    };
-  }, [theme]);
-}
-
-export default useNewElementTheme;

package/lib/core/editor/components/Sidebar/views/CanvasPanel/hooks/useNewElementTheme.js

@@ -1,48 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _clusterUtil = require("../../../../../../../utils/clusterUtil");
-
-var _htElementUtils = require("../../../../../../../utils/htElementUtils");
-
-var _themes = _interopRequireDefault(require("../themes"));
-
-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; }
-
-function useNewElementTheme(props) {
-  var topo = props.topo,
-      theme = props.theme,
-      setElementTheme = props.setElementTheme;
-  (0, _react.useEffect)(function () {
-    var dm = topo.getHtTopo().getGraphView().dm();
-    dm.addDataModelChangeListener(handleDataModelChangeListener);
-
-    function handleDataModelChangeListener(e) {
-      var kind = e.kind,
-          data = e.data;
-
-      if (kind === 'add') {
-        var themeConfig = _themes["default"].find(function (item) {
-          return item.name === theme;
-        });
-
-        setElementTheme(data, themeConfig);
-      }
-    }
-
-    return function () {
-      dm.removeDataModelChangeListener(handleDataModelChangeListener);
-    };
-  }, [theme]);
-}
-
-var _default = useNewElementTheme;
-exports["default"] = _default;