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

package/es/components/ColorPanel/components/FontColorRange/index.module.scss

@@ -12,6 +12,9 @@
 
   .unit {
     margin-left: 14px;
+    margin-right: 8px;
+    width: 32px;
+    text-align: right;
   }
 
   :global {

package/es/core/editor/components/Sidebar/views/CanvasPanel/themes.js

@@ -1,8 +1,6 @@
-var THEMES = [{
-  name: 'white',
-  label: '白色',
+import _extends from "@babel/runtime/helpers/extends";
+var baseLightTheme = {
   color: '#FFFFFF',
-  toolsTheme: 'lightgrayblue',
   globalNodeLabelColor: '#4d6277',
   globalEdgeTagColor: '#4d6277',
   text: {
@@ -14,31 +12,23 @@ var THEMES = [{
       // 标题背景颜色
       'group.title.color': '#4D6277',
       // 标题文字颜色
+      'group.background': 'rgba(76, 137, 255, 0.1)',
       'group.border.color': '#E4E9EE' // 边框颜色
 
     }
   }
-}, {
+};
+var THEMES = [_extends({}, baseLightTheme, {
+  name: 'white',
+  label: '白色',
+  color: '#FFFFFF',
+  toolsTheme: 'lightgrayblue'
+}), _extends({}, baseLightTheme, {
   name: 'lightblue',
   label: '蓝色',
   color: '#F9FBFF',
-  toolsTheme: 'white',
-  globalNodeLabelColor: '#4d6277',
-  globalEdgeTagColor: '#4d6277',
-  text: {
-    color: '#4d6277'
-  },
-  group: {
-    style: {
-      'group.title.background': '#E4E9EE',
-      // 标题背景颜色
-      'group.title.color': '#4D6277',
-      // 标题文字颜色
-      'group.border.color': '#E4E9EE' // 边框颜色
-
-    }
-  }
-}, // {
+  toolsTheme: 'white'
+}), // {
 //   name: 'yellow',
 //   label: '黄色',
 //   color: '#FFFDE6',
@@ -64,7 +54,8 @@ var THEMES = [{
       // 标题背景颜色
       'group.title.color': '#FFFFFF',
       // 标题文字颜色
-      'group.border.color': '#08A5F4' // 边框颜色
+      'group.background': 'rgba(29,55,113,0.6)',
+      'group.border.color': 'rgba(8,165,244,0.8)' // 边框颜色
 
     }
   }

package/es/core/editor/components/Toolbar/buttons.js

@@ -26,9 +26,8 @@ export default function getButtons(isNetworkTopo) {
   FontSizeWidget, // 字号
   FontStyleButton, // 文字样式
   FontColorButton, // 文字颜色
-  Divider, // BoxBackgroundButton, // 框背景
-  // Divider,
-  EdgeColorButton, // 线条颜色
+  Divider, BoxBackgroundButton, // 框背景
+  Divider, EdgeColorButton, // 线条颜色
   EdgeTypeButton, // 线形
   Divider, NodeImageButton, // 替换图片
   NodeSizeButton, // 图片尺寸

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

@@ -21,8 +21,7 @@ function BoxBackgroundButton(props) {
 
 
   var selection = topo.selectionManager.useSelection();
-  useEffect(function () {
-    setDisabled(false);
+  useEffect(function () {// setDisabled(false)
   }, [selection]);
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/Disable.svg",
@@ -34,6 +33,7 @@ function BoxBackgroundButton(props) {
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6846\u80CC\u666F",
     tooltip: "\u6846\u80CC\u666F",
+    disabled: disabled,
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     disabled: disabled,

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

@@ -120,7 +120,8 @@ function EdgeColorButton(props) {
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u7EBF\u6761\u989C\u8272",
     tooltip: "\u7EBF\u6761\u989C\u8272",
-    showLabel: showLabel
+    showLabel: showLabel,
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     disabled: disabled,
     trigger: icon

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

@@ -7,7 +7,7 @@ import FontColorRange from "../../../../../components/ColorPanel/components/Font
 import styles from "./FontColorButton.module.scss";
 import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 
-function FontFamilySelect(props) {
+function FontColorDropdown(props) {
   var onChange = props.onChange,
       topo = props.topo,
       color = props.color,
@@ -20,25 +20,19 @@ function FontFamilySelect(props) {
 
   var backOpacityChange = function backOpacityChange(value) {
     onChange({
-      color: color,
-      background: background,
       opacity: value / 100
     });
   };
 
   var colorChang = function colorChang(value) {
     onChange({
-      color: value.hex,
-      background: background,
-      opacity: opacity
+      color: value
     });
   };
 
   var backgroundChang = function backgroundChang(value) {
     onChange({
-      color: color,
-      background: value.hex,
-      opacity: opacity
+      background: value
     });
   };
 
@@ -86,17 +80,13 @@ function FontColorButton(props) {
     label: "\u6587\u5B57\u989C\u8272",
     tooltip: "\u6587\u5B57\u989C\u8272",
     showLabel: showLabel
-  }, /*#__PURE__*/React.createElement(FontFamilySelect, {
+  }, /*#__PURE__*/React.createElement(FontColorDropdown, {
     color: style.color,
     background: style.background,
     opacity: style.opacity,
     onChange: function onChange(val) {
       topo.historyManager.beginTransaction();
-      setStyle({
-        color: val.color,
-        background: val.background,
-        opacity: val.opacity
-      });
+      setStyle(val);
       topo.historyManager.endTransaction();
     },
     topo: topo

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js

@@ -24,13 +24,11 @@ export function parseColor(colorStr) {
   };
 }
 export function parseBackground(colorStr) {
-  var _background$rgb;
-
   var background = parseColor(colorStr);
   return {
     background: background,
     // 背景颜色，格式: {rgba: {}, hex: ''} | null
-    opacity: background === null || background === void 0 ? void 0 : (_background$rgb = background.rgb) === null || _background$rgb === void 0 ? void 0 : _background$rgb.a // 背景透明度。值范围 0-1, null，null表示无
+    opacity: background ? background.rgb.a : 1 // 背景透明度。值范围 0-1, null，null表示无
 
   };
 }
@@ -57,5 +55,5 @@ export function formatBackgroundRgbaColor(prevColor, currentColor) {
   }
 
   var rgb = background.rgb;
-  return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + opacity + ")";
+  return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + (opacity === null ? 1 : opacity) + ")";
 }

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

@@ -1,17 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
 export function getTextStyle(element) {
-  return {
-    color: null,
-    // 文字颜色
-    fontFamily: null,
-    fontSize: null // fontBold: false, // 文字样式加粗 @V1.2
-    // fontItalic: false, // 文字样式斜体 @V1.2
-    // fontUnderline: false, // 文字样式下划线 @V1.2
-    // background: {rgb: {}, hex: ''}, // 背景颜色，rgba格式。null表示无
-    // opacity: 1, // 背景透明度。值范围 0-1, null，null表示无
-
-  };
+  var underline = null;
+  return _extends({
+    color: parseColor(element.a('link_ind_left_color')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.a('link_ind_left_font')), parseBackground(element.a('link_ind_background')));
+}
+export function setTextStyle(element, style, topo) {
+  if ('background' in style || 'opacity' in style) {
+    // 背景颜色
+    var prevStyle = getTextStyle(element);
+    topo.getHtTopo().setEdgeLabelStyle(element, {
+      background: formatBackgroundRgbaColor(prevStyle, style)
+    });
+  } else {
+    topo.getHtTopo().setEdgeLabelStyle(element, style);
+  }
 }
-export function setTextStyle(element, style) {}
 export default {
   getTextStyle: getTextStyle,
   setTextStyle: setTextStyle

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/layerTitle.js

@@ -11,6 +11,8 @@ function setLabelStyle(element, style) {
   element.a('labelStyle', _extends({}, element.a('labelStyle'), style)); // eslint-disable-next-line no-underscore-dangle
 
   element.__labelNode.a(style);
+
+  console.error(element.__labelNode.getAttrObject());
 } // 分层标题文字样式
 
 

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/nodeTag.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["color", "background", "opacity"];
 import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
 import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
 export function getTextStyle(element) {
@@ -9,15 +11,24 @@ export function getTextStyle(element) {
   }, fontStyleUtil.toMap(element.a('ht.font')), parseBackground(element.a('ht.background')));
 }
 export function setTextStyle(element, style, topo) {
+  var color = style.color,
+      background = style.background,
+      opacity = style.opacity,
+      otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
+
+  var tagStyle = _extends({}, otherStyle);
+
+  if ('color' in style) {
+    tagStyle.color = color.hex;
+  }
+
   if ('background' in style || 'opacity' in style) {
     // 背景颜色
     var prevStyle = getTextStyle(element);
-    topo.getHtTopo().setNodeLabelStyle(element, {
-      background: formatBackgroundRgbaColor(prevStyle, style)
-    });
-  } else {
-    topo.getHtTopo().setNodeLabelStyle(element, style);
+    tagStyle.background = formatBackgroundRgbaColor(prevStyle, style);
   }
+
+  topo.getHtTopo().setNodeLabelStyle(element, tagStyle);
 }
 export default {
   getTextStyle: getTextStyle,

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/globalTag.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import { formatBackgroundRgbaColor, parseBackground } from "../ElementTextStyleSetting/colorUtil";
 var defaultStyle = {
   color: '#AFB9C2',
   fontFamily: '微软雅黑'
@@ -7,13 +8,11 @@ export function useValues(topo) {
   var displayConfigState = topo.store.useModelState('displayConfig');
   var nodeLabelStyle = displayConfigState.nodeLabelStyle,
       defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
-  return {
+  return _extends({
     color: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.color) || defaultStyle.color,
     fontFamily: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontFamily) || defaultStyle.fontFamily,
-    fontSize: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontSize,
-    background: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.background,
-    opacity: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.opacity
-  };
+    fontSize: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontSize
+  }, parseBackground(nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.background));
 }
 export var setGlobalTagStyle = function setGlobalTagStyle(topo, styleData) {
   var _topo$store$getModel = topo.store.getModel('displayConfig'),
@@ -22,17 +21,32 @@ export var setGlobalTagStyle = function setGlobalTagStyle(topo, styleData) {
 
   var nodeLabelStyle = displayConfigState.nodeLabelStyle,
       defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+  var style = buildStyle(styleData, nodeLabelStyle);
 
-  var globalNodeLabelStyle = _extends({}, nodeLabelStyle, styleData);
+  var globalNodeLabelStyle = _extends({}, nodeLabelStyle, style);
 
   topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
-
-  var globalEdgeTagStyle = _extends({}, defaultEdgeLabelStyle, styleData);
-
+  var globalEdgeTagStyle = globalNodeLabelStyle;
   topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
   displayConfigDispatchers.update({
     nodeLabelStyle: globalNodeLabelStyle,
     defaultEdgeLabelStyle: globalEdgeTagStyle
   });
 };
+
+function buildStyle(styleData, prevTagStyle) {
+  var style = {};
+
+  if ('color' in styleData) {
+    style.color = styleData.color.hex;
+  }
+
+  if ('background' in styleData || 'opacity' in styleData) {
+    var prevBackgroundStyle = parseBackground(prevTagStyle === null || prevTagStyle === void 0 ? void 0 : prevTagStyle.background);
+    style.background = formatBackgroundRgbaColor(prevBackgroundStyle, styleData);
+  }
+
+  return style;
+}
+
 export function setStyle() {}

package/es/core/hooks/useCanvasTheme.js

@@ -40,7 +40,19 @@ export default function useCanvasTheme(props) {
     var themeConfig = themeMap[canvasTheme];
 
     if (graphLoaded && themeConfig) {
-      topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
+      var _topo$historyManager2;
+
+      try {
+        var _topo$historyManager;
+
+        (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '切换主题');
+        topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
+        topo.getHtTopo().setTheme(canvasTheme);
+      } catch (error) {
+        console.error('切换主题失败', error);
+      }
+
+      (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '切换主题');
     }
   }, [canvasTheme, graphLoaded]);
   return {

package/es/core/models/HistoryManager.js

@@ -9,6 +9,7 @@ var HistoryManager = /*#__PURE__*/function () {
     this.storeHistory = [];
     this.topo = topo;
     this.htHistoryManager = htHistoryManager;
+    htHistoryManager.clear();
     rlog.info('HistoryManager 初始化', htHistoryManager);
     this.updateStore = this.updateStore.bind(this);
     this.init();

package/es/core/models/SelectionManager.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import useHtElements from "../common/hooks/useHtElements";
+import ignoreList from "./selection/ignoreList";
 
 var SelectionManager = /*#__PURE__*/function () {
   function SelectionManager(topo) {
@@ -12,11 +13,12 @@ var SelectionManager = /*#__PURE__*/function () {
     this.setSelection = function (selection) {
       var selectionDispatchers = _this.topo.store.getModelDispatchers('selection');
 
+      _this.selectionIds = selection.map(function (item) {
+        return item.id;
+      });
       selectionDispatchers.update({
         selection: selection,
-        selectionIds: selection.map(function (item) {
-          return item.id;
-        })
+        selectionIds: _this.selectionIds
       });
     };
 
@@ -82,19 +84,21 @@ var SelectionManager = /*#__PURE__*/function () {
     var property = e.property,
         data = e.data;
 
-    if (['position', 'childChange', 'a:scale'].indexOf(property) !== -1) {
+    if (!this.selectionIds.includes(data.getId())) {
       return;
     }
 
-    var selectionModel = this.topo.getSelectionModel();
-    var selectionIds = selectionModel.getSelection().getArray().map(function (item) {
-      return item.getId();
-    });
+    if (ignoreList.indexOf(property) !== -1) {
+      return;
+    }
 
-    if (selectionIds.indexOf(data.getId()) > -1) {
-      // console.info('PropertyChangeListener', e);
-      this.updateSelection();
+    if (!window.aa) {
+      window.aa = [];
     }
+
+    window.aa.push(e); // console.info('PropertyChangeListener', e);
+
+    this.updateSelection();
   };
 
   _proto.initListener = function initListener() {

package/es/core/models/TopoApp.js

@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.40" === 'string' ? "6.0.0-alpha.40" : null;
+var version = typeof "6.0.0-alpha.41" === 'string' ? "6.0.0-alpha.41" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/models/selection/ignoreList.js

@@ -0,0 +1 @@
+export default ['position', 'childChange', 'a:scale', 'icons', 'a:dataSource', 'a:dataTipSource', 'agentChange', 'a:runtimeStyles', 'a:linkArrow', '*', 'a:link_ind_left_arrow', 'a:link_ind_right_arrow', 'a:link_ind_area', 'a:middle_area', 'a:areaRect', 'a:outAreaRect', 'a:link_ind_area_right'];

package/es/core/models/utils/linkUtils.js

@@ -176,7 +176,7 @@ function _getLinksDetail() {
 
 export function buildTopoLinkData() {}
 export var compatibleWith = function compatibleWith(value) {
-  console.log("compatibleWith", value);
+  // console.log("compatibleWith",value);
   var pluralType = value !== null && value !== void 0 ? value : 2;
 
   if (value === false) {
@@ -200,8 +200,8 @@ export var showLinkByConfig = function showLinkByConfig(props) {
   var _plurals$compatibleWi;
 
   var topo = props.topo,
-      showType = props.showType;
-  console.log("showLinkByConfig-----------------------------", props, showType); //const displayConfig = topo.store.getModelState("displayConfig");
+      showType = props.showType; // console.log("showLinkByConfig-----------------------------", props, showType);
+  //const displayConfig = topo.store.getModelState("displayConfig");
 
   var types = (_plurals$compatibleWi = plurals[compatibleWith(showType)]) !== null && _plurals$compatibleWi !== void 0 ? _plurals$compatibleWi : []; // 查询所有连线
 
@@ -210,8 +210,7 @@ export var showLinkByConfig = function showLinkByConfig(props) {
   var edges = getEdges(dm); // console.log("edges", edges);
 
   var showPhy = types.indexOf("phy") >= 0;
-  var showAgg = types.indexOf("agg") >= 0;
-  console.log("edges----types", showType, types, showPhy, showAgg);
+  var showAgg = types.indexOf("agg") >= 0; // console.log("edges----types",showType, types,showPhy, showAgg);
 
   if (Array.isArray(edges) && edges.length > 0) {
     edges.map(function (edge) {

package/es/core/store/models/topoConfig.js

@@ -314,7 +314,7 @@ export default function (topoApp) {
               while (1) {
                 switch (_context4.prev = _context4.next) {
                   case 0:
-                    rlog.debug("getTopoByConditions--------", params);
+                    // rlog.debug("getTopoByConditions--------", params);
                     topoId = params.id, resources = params.resources, groups = params.groups, exportLinkIdList = params.exportLinkIdList;
                     viewConditions = resToConditions(resources);
                     groupInfo = isAvailableArray(groups) && groups.map(function (group) {
@@ -322,24 +322,22 @@ export default function (topoApp) {
                         layout: getLayoutId(group.layout),
                         resources: resToConditions(group.resources)
                       });
-                    });
-                    rlog.debug("getTopoByConditions--------", viewConditions, groupInfo);
-                    _context4.next = 7;
+                    }); // rlog.debug("getTopoByConditions--------", viewConditions, groupInfo);
+
+                    _context4.next = 5;
                     return topoService.getTopoDataByResource(topoId, viewConditions, groupInfo, exportLinkIdList);
 
-                  case 7:
+                  case 5:
                     data = _context4.sent;
-                    rlog.debug("getTopoByConditions--------data", data);
-                    _context4.next = 11;
+                    _context4.next = 8;
                     return buildTopoData(data);
 
-                  case 11:
+                  case 8:
                     data = _context4.sent;
-                    rlog.debug("getTopoByConditions--------", data, groupInfo);
-                    _context4.next = 15;
+                    _context4.next = 11;
                     return Promise.all([topoApp.ciTyeCache.getCiTypeMap(getCiTypes(data)), dispatch.customIcon.loadCustomIcons()]);
 
-                  case 15:
+                  case 11:
                     _yield$Promise$all = _context4.sent;
                     ciTypeMap = _yield$Promise$all[0];
                     _combTopoData = combTopoData({
@@ -367,7 +365,7 @@ export default function (topoApp) {
                       topoDataTrans: topoDataTrans
                     });
 
-                  case 23:
+                  case 19:
                   case "end":
                     return _context4.stop();
                 }

package/es/core/utils/edgeUtil.js

@@ -7,6 +7,8 @@ import { showLinkByConfig } from "../models/utils/linkUtils";
  */
 
 export var updateEdgeExpanded = function updateEdgeExpanded(topo) {
+  var _topo$historyManager, _topo$historyManager2;
+
   var _topo$store$getModelS = topo.store.getModelState("topoMod"),
       viewState = _topo$store$getModelS.viewState;
 
@@ -21,6 +23,8 @@ export var updateEdgeExpanded = function updateEdgeExpanded(topo) {
       expandAllEdges = _topo$store$getModelS2.expandAllEdges; // console.log("expandAllEdges----------", expandAllEdges);
 
 
+  (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '连线展开控制');
+
   if (expandAllEdges === 1) {
     showLinkByConfig({
       topo: topo,
@@ -37,6 +41,8 @@ export var updateEdgeExpanded = function updateEdgeExpanded(topo) {
     rlog.debug("updateEdgeExpanded 展开-isEditMode", isEditMode);
   }
 
+  (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '连线展开控制');
+
   if (topo.linkDynamicStyleExecutor) {
     topo.linkDynamicStyleExecutor.execute();
   }

package/lib/components/ColorPanel/components/FontColorRange/index.module.scss

@@ -12,6 +12,9 @@
 
   .unit {
     margin-left: 14px;
+    margin-right: 8px;
+    width: 32px;
+    text-align: right;
   }
 
   :global {

package/lib/core/editor/components/Sidebar/views/CanvasPanel/themes.js

@@ -1,12 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = void 0;
-var THEMES = [{
-  name: 'white',
-  label: '白色',
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var baseLightTheme = {
   color: '#FFFFFF',
-  toolsTheme: 'lightgrayblue',
   globalNodeLabelColor: '#4d6277',
   globalEdgeTagColor: '#4d6277',
   text: {
@@ -18,31 +20,23 @@ var THEMES = [{
       // 标题背景颜色
       'group.title.color': '#4D6277',
       // 标题文字颜色
+      'group.background': 'rgba(76, 137, 255, 0.1)',
       'group.border.color': '#E4E9EE' // 边框颜色
 
     }
   }
-}, {
+};
+var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
+  name: 'white',
+  label: '白色',
+  color: '#FFFFFF',
+  toolsTheme: 'lightgrayblue'
+}), (0, _extends2["default"])({}, baseLightTheme, {
   name: 'lightblue',
   label: '蓝色',
   color: '#F9FBFF',
-  toolsTheme: 'white',
-  globalNodeLabelColor: '#4d6277',
-  globalEdgeTagColor: '#4d6277',
-  text: {
-    color: '#4d6277'
-  },
-  group: {
-    style: {
-      'group.title.background': '#E4E9EE',
-      // 标题背景颜色
-      'group.title.color': '#4D6277',
-      // 标题文字颜色
-      'group.border.color': '#E4E9EE' // 边框颜色
-
-    }
-  }
-}, // {
+  toolsTheme: 'white'
+}), // {
 //   name: 'yellow',
 //   label: '黄色',
 //   color: '#FFFDE6',
@@ -68,7 +62,8 @@ var THEMES = [{
       // 标题背景颜色
       'group.title.color': '#FFFFFF',
       // 标题文字颜色
-      'group.border.color': '#08A5F4' // 边框颜色
+      'group.background': 'rgba(29,55,113,0.6)',
+      'group.border.color': 'rgba(8,165,244,0.8)' // 边框颜色
 
     }
   }

package/lib/core/editor/components/Toolbar/buttons.js

@@ -51,9 +51,8 @@ function getButtons(isNetworkTopo) {
   _FontSizeWidget["default"], // 字号
   _FontStyleButton["default"], // 文字样式
   _FontColorButton["default"], // 文字颜色
-  _Divider["default"], // BoxBackgroundButton, // 框背景
-  // Divider,
-  _EdgeColorButton["default"], // 线条颜色
+  _Divider["default"], _BoxBackgroundButton["default"], // 框背景
+  _Divider["default"], _EdgeColorButton["default"], // 线条颜色
   _EdgeTypeButton["default"], // 线形
   _Divider["default"], _NodeImageButton["default"], // 替换图片
   _NodeSizeButton["default"], // 图片尺寸