@riil-frontend/component-topology 6.0.0-alpha.5 → 6.0.0-alpha.50

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

@@ -33,8 +33,6 @@ var _template = require("../../../utils/template");
 
 var _PropertyView = _interopRequireDefault(require("../../editor/components/settings/PropertyView"));
 
-var _BackgroundView = _interopRequireDefault(require("../../editor/components/BackgroundView"));
-
 var _edgeUtil = require("../../utils/edgeUtil");
 
 var _useManageStatus = _interopRequireDefault(require("../../hooks/useManageStatus"));
@@ -53,10 +51,14 @@ var _Sidebar = _interopRequireDefault(require("../../editor/components/Sidebar/S
 
 var _HistoryManager = _interopRequireDefault(require("../../models/HistoryManager"));
 
+var _GraphViewPanel = _interopRequireDefault(require("./GraphViewPanel"));
+
 var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 
 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; }
@@ -92,7 +94,6 @@ var Topology = function Topology(props) {
       topoState = _store$useModel[0],
       topoDispatchers = _store$useModel[1];
 
-  var bizDispatchers = store.useModelDispatchers('topoBizMod');
   var topoId = topoState.topoId,
       viewState = topoState.viewState,
       topoData = topoState.topoData,
@@ -103,11 +104,16 @@ var Topology = function Topology(props) {
 
   var _useState = (0, _react.useState)(buildLoadOptions ? buildLoadOptions(topoData) : topoData),
       tData = _useState[0],
-      setTData = _useState[1]; // TODO 临时放这里，当前监听内容较多
-
+      setTData = _useState[1];
 
-  var selectionManager = topo.selectionManager;
   (0, _useRouterAdapter["default"])(props);
+  (0, _useAlarm["default"])({
+    topo: topo
+  });
+  (0, _useManageStatus["default"])({
+    topo: topo
+  }); // 编辑模式----
+
   var topoEdit = (0, _useTopoEdit["default"])({
     topo: topo,
     topoId: topoId,
@@ -120,25 +126,16 @@ var Topology = function Topology(props) {
     isLayerTopo: isLayerTopo
   });
   topo.topoEdit = topoEdit;
-  var onExitEdit = topoEdit.onExitEdit,
-      onBindData = topoEdit.onBindData,
-      onDeleteElement = topoEdit.onDeleteElement,
-      onSaveTopo = topoEdit.onSaveTopo;
-  var titleBarRef = (0, _react.useRef)();
-  (0, _useAlarm["default"])({
-    topo: topo
-  });
-  (0, _useManageStatus["default"])({
-    topo: topo
+  (0, _useKeyboardShortcut["default"])({
+    topo: topo,
+    topoEdit: topoEdit,
+    isEditMode: isEditMode
   });
   (0, _react.useEffect)(function () {
     if (viewState === 'view' && topoId) {
       // TODO 移到模型中
       // rlog.debug('useEffect-viewState', topoId, viewState);
       setTData(null);
-      bizDispatchers.update({
-        setConfig: null
-      });
     }
   }, [topoId, viewState]);
   (0, _react.useEffect)(function () {
@@ -148,7 +145,9 @@ var Topology = function Topology(props) {
   (0, _react.useEffect)(function () {
     // 拓扑退出注销
     return function () {
-      selectionManager.destroy();
+      _rlog["default"].info('TopoView 退出');
+
+      topo.selectionModel.destroy();
       topoDispatchers.reset();
     };
   }, []);
@@ -178,7 +177,7 @@ var Topology = function Topology(props) {
       topo.historyManager = new _HistoryManager["default"](topo, htHistoryManager);
     }
 
-    selectionManager.init();
+    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded2: true
     });
@@ -198,7 +197,7 @@ var Topology = function Topology(props) {
     (0, _graphLinkUtil.fixLink)(topo);
     (0, _clusterUtil.handleClusterNoPermission)(topo);
     (0, _edgeUtil.updateEdgeExpanded)(topo);
-    selectionManager.init();
+    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded: true
     });
@@ -210,7 +209,7 @@ var Topology = function Topology(props) {
     if (onLoad) {
       onLoad();
     }
-  }, [topoData]); // TODO 之后把事件方法都转移出去
+  }, [topoData]);
 
   var rightEventHandle = function rightEventHandle(event) {
     _rlog["default"].debug('右键事件', event);
@@ -249,16 +248,16 @@ var Topology = function Topology(props) {
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_DATA_PICK:
-        onBindData(event.data);
+        topoEdit.onBindData(event.data);
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_DATA_DELETE:
-        onDeleteElement(event.data);
+        topoEdit.onDeleteElement(event.data);
         break;
       // FIXME 保存逻辑优化
 
       case _componentTopologyGraph.TopoEvent.EVENT_SAVE_TOPO:
-        onSaveTopo(event.data);
+        topoEdit.onSaveTopo(event.data);
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_REFRESH:
@@ -266,7 +265,7 @@ var Topology = function Topology(props) {
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_EDIT_EXIT:
-        onExitEdit(event.data);
+        topoEdit.onExitEdit(event.data);
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_CONTEXT_TOOL:
@@ -279,36 +278,17 @@ var Topology = function Topology(props) {
     }
   };
 
-  var renderPropertyView = function renderPropertyView() {
-    return isEditMode && /*#__PURE__*/_react["default"].createElement(_PropertyView["default"], {
-      topo: topo,
-      editorProps: editorProps
-    });
-  };
-
-  var renderBackgroundView = function renderBackgroundView() {
-    return isEditMode && /*#__PURE__*/_react["default"].createElement(_BackgroundView["default"], {
-      topo: topo,
-      editorProps: editorProps
-    });
-  };
-
   var renderCanvas = function renderCanvas() {
     var _graphViewProps$creat;
 
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _TopoViewModule["default"].viewPanel,
-      onKeyDown: function onKeyDown(e) {
-        topo.historyManager && topo.historyManager.handleKeyDown(e);
-      }
+    return /*#__PURE__*/_react["default"].createElement(_GraphViewPanel["default"], {
+      topo: topo
     }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], (0, _extends2["default"])({}, graphViewProps, {
       createHtTopoProps: (0, _extends2["default"])({}, graphViewProps.createHtTopoProps, {
         editor: (0, _extends2["default"])({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
       }),
       data: tData,
       defaultEnterEditMode: defaultEnterEditMode,
-      renderPropertyView: renderPropertyView,
-      renderBackgroundView: renderBackgroundView,
       onCreate: onGraphCreated,
       onLoaded: handleGraphLoaded,
       onDataLoaded: handleGraphDataLoaded,
@@ -350,14 +330,16 @@ var Topology = function Topology(props) {
       urlParams: urlParams
     },
     editorProps: editorProps
-  }), renderCanvas()), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {
+  }), renderCanvas(), isEditMode && /*#__PURE__*/_react["default"].createElement(_PropertyView["default"], {
+    topo: topo,
+    editorProps: editorProps
+  })), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {
     topo: topo,
     viewerProps: viewerProps,
     topoContext: topoContext
   }), isEditMode && /*#__PURE__*/_react["default"].createElement(_EditorPlugin["default"], {
     topo: topo,
     topoEdit: topoEdit,
-    titleBarRef: titleBarRef,
     topoContext: {
       urlParams: urlParams
     },

package/lib/core/components/titlebar/TitleBar.module.scss

@@ -12,7 +12,7 @@
   }
 
   &.titlebarViewMode {
-    padding: 16px 16px 0 16px;
+    padding: 16px;
   }
 
   &.titlebarEditMode {

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

@@ -7,7 +7,7 @@ exports["default"] = TopoEditorPlugin;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _CustomIconPlugin = _interopRequireDefault(require("./CustomIconPlugin"));
 
@@ -17,13 +17,24 @@ var _MultipleResourceSelectPlugin = _interopRequireDefault(require("./plugins/Mu
 
 var _GroupAddResourceDrawerPlugin = _interopRequireDefault(require("./GroupAddResourceDrawerPlugin"));
 
+var _MetricPollingPlugin = _interopRequireDefault(require("../../viewer/components/plugins/MetricPollingPlugin"));
+
+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 TopoEditorPlugin(props) {
   var topo = props.topo,
       topoContext = props.topoContext,
       topoEdit = props.topoEdit,
       editorProps = props.editorProps;
   var store = topo.store;
-  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _CustomIconPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  (0, _react.useEffect)(function () {
+    return function () {
+      topoEdit.reset();
+    };
+  }, []);
+  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["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,

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

@@ -30,7 +30,33 @@ function Sidebar(props) {
       topoEditState = _topo$store$useModel[0],
       topoEditDispatchers = _topo$store$useModel[1];
 
-  var activeKey = topoEditState.resourceTabactiveKey;
+  var activeKey = topoEditState.resourceTabActiveKey; // 拓扑图是否加载
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded;
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      // 退出编辑模式，关闭资源面板状态
+      topoEditDispatchers.update({
+        resourceTabActiveKey: null
+      });
+    };
+  }, []); // 通过url参数打开对应面板
+
+  (0, _react.useEffect)(function () {
+    var _topo$viewProps$urlPa;
+
+    if (graphLoaded && (_topo$viewProps$urlPa = topo.viewProps.urlParams) !== null && _topo$viewProps$urlPa !== void 0 && _topo$viewProps$urlPa.resourceTabActiveKey) {
+      setTimeout(function () {
+        var _topo$viewProps$urlPa2;
+
+        topoEditDispatchers.update({
+          resourceTabActiveKey: ((_topo$viewProps$urlPa2 = topo.viewProps.urlParams) === null || _topo$viewProps$urlPa2 === void 0 ? void 0 : _topo$viewProps$urlPa2.resourceTabActiveKey) || null
+        });
+      }, 2000);
+    }
+  }, [graphLoaded]);
 
   var renderTabItem = function renderTabItem(pane) {
     var View = pane.content;
@@ -50,7 +76,7 @@ function Sidebar(props) {
     activeKey: activeKey,
     onChange: function onChange(key) {
       return topoEditDispatchers.update({
-        resourceTabactiveKey: key
+        resourceTabActiveKey: key
       });
     }
   }, _panes["default"].map(renderTabItem))));

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/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -5,8 +5,49 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = CanvasPanel;
 
-var _react = _interopRequireDefault(require("react"));
+var _tag = _interopRequireDefault(require("@alifd/next/lib/tag"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CanvasPanelModule = _interopRequireDefault(require("./CanvasPanel.module.scss"));
+
+var _useCanvasThemeConfig2 = _interopRequireDefault(require("./hooks/useCanvasThemeConfig"));
+
+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 CanvasPanel(props) {
-  return /*#__PURE__*/_react["default"].createElement("div", null, "ImagePanel");
+  var topo = props.topo;
+
+  var _useCanvasThemeConfig = (0, _useCanvasThemeConfig2["default"])({
+    topo: topo
+  }),
+      themes = _useCanvasThemeConfig.themes,
+      canvasThemeName = _useCanvasThemeConfig.canvasThemeName,
+      setCanvasTheme = _useCanvasThemeConfig.setCanvasTheme;
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _CanvasPanelModule["default"].canvasToggle
+  }, themes.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _CanvasPanelModule["default"].canvas,
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_tag["default"].Selectable, {
+      className: _CanvasPanelModule["default"].tag,
+      style: {
+        background: item.color
+      },
+      checked: item.name === canvasThemeName,
+      onChange: function onChange(checked) {
+        setCanvasTheme(item.name);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _CanvasPanelModule["default"].box
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _CanvasPanelModule["default"].bgColor
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: _CanvasPanelModule["default"].canvasText
+    }, item.label));
+  }));
 }

package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss

@@ -0,0 +1,74 @@
+@import "~@alifd/next/variables.scss";
+
+  .canvasToggle {
+    display: flex;
+    flex-wrap: wrap;
+    .canvas {
+      .tag {
+        border: 1px solid #E4E9EE;
+        width: 110px;
+        height: 62px;
+        border-radius: 2px;
+        margin: 16px 0 0 16px;
+      :global {
+        .#{$css-prefix}tag-body {
+          width: 100%;
+          padding: 0;
+          cursor: pointer;
+        }
+      }
+      .box {
+        position: relative;
+        height: 100%;
+        user-select: none;
+        .bgColor {
+          max-width: 100%;
+          max-height: 100%;
+          display: block;
+          margin: auto;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+        }
+      }
+      &::before,
+      &::after {
+        z-index: 1;
+      }
+      &:hover {
+        .operation {
+          display: block;
+        }
+      }
+      .operation {
+        display: none;
+        // z-index: -1;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 22px;
+        text-align: center;
+        background: rgba(0, 0, 0, 0.4);
+        button {
+          height: 100%;
+          color: #fff;
+          vertical-align: text-bottom;
+        }
+      }
+     }
+      .canvasText{
+        width: 49px;
+        height: 12px;
+        margin: 8px 0 0 46px;
+        text-align: center;
+      }
+    }
+    .canvas:nth-child(2n){
+      margin-left: -7px;
+    }
+  }
+
+

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

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _clusterUtil = require("../../../../../../../utils/clusterUtil");
+
+var _htElementUtils = require("../../../../../../../utils/htElementUtils");
+
+var _themes = _interopRequireDefault(require("../themes"));
+
+var _useNewElementTheme = _interopRequireDefault(require("./useNewElementTheme"));
+
+function useCanvasThemeConfig(props) {
+  var topo = props.topo;
+
+  var _topo$store$useModel = topo.store.useModel('displayConfig'),
+      displayConfig = _topo$store$useModel[0],
+      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) {
+      var themeConfig;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              themeConfig = _themes["default"].find(function (item) {
+                return item.name === themeName;
+              });
+              topo.historyManager.beginTransaction();
+              _context.next = 4;
+              return displayConfigDispatchers.update({
+                canvasTheme: themeName
+              });
+
+            case 4:
+              _context.next = 6;
+              return setGlobalTagTheme(themeConfig);
+
+            case 6:
+              setElementsTheme(themeConfig);
+              topo.historyManager.endTransaction();
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function setCanvasTheme(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  function setGlobalTagTheme(_x2) {
+    return _setGlobalTagTheme.apply(this, arguments);
+  }
+
+  function _setGlobalTagTheme() {
+    _setGlobalTagTheme = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(themeConfig) {
+      var _topo$store$getModelS, nodeLabelStyle, defaultEdgeLabelStyle, globalNodeLabelStyle, globalEdgeTagStyle;
+
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              // 设置资源/链路标注样式
+              _topo$store$getModelS = topo.store.getModelState('displayConfig'), nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle, defaultEdgeLabelStyle = _topo$store$getModelS.defaultEdgeLabelStyle;
+              globalNodeLabelStyle = (0, _extends2["default"])({}, nodeLabelStyle, {
+                color: themeConfig.globalNodeLabelColor
+              });
+              topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+              globalEdgeTagStyle = (0, _extends2["default"])({}, defaultEdgeLabelStyle, {
+                color: themeConfig.globalEdgeTagColor
+              });
+              topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
+              _context2.next = 7;
+              return displayConfigDispatchers.update({
+                nodeLabelStyle: globalNodeLabelStyle,
+                defaultEdgeLabelStyle: globalEdgeTagStyle
+              });
+
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _setGlobalTagTheme.apply(this, arguments);
+  }
+
+  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 {
+    themes: _themes["default"],
+    canvasThemeName: canvasThemeName,
+    setCanvasTheme: setCanvasTheme
+  };
+}
+
+var _default = useCanvasThemeConfig;
+exports["default"] = _default;

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

@@ -0,0 +1,48 @@
+"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;