@riil-frontend/component-topology 6.0.0-alpha.37 → 6.0.0-alpha.39

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

@@ -7,6 +7,16 @@ var THEMES = [{
   globalEdgeTagColor: '#4d6277',
   text: {
     color: '#4d6277'
+  },
+  group: {
+    style: {
+      'group.title.background': '#E4E9EE',
+      // 标题背景颜色
+      'group.title.color': '#4D6277',
+      // 标题文字颜色
+      'group.border.color': '#E4E9EE' // 边框颜色
+
+    }
   }
 }, {
   name: 'lightblue',
@@ -17,6 +27,16 @@ var THEMES = [{
   globalEdgeTagColor: '#4d6277',
   text: {
     color: '#4d6277'
+  },
+  group: {
+    style: {
+      'group.title.background': '#E4E9EE',
+      // 标题背景颜色
+      'group.title.color': '#4D6277',
+      // 标题文字颜色
+      'group.border.color': '#E4E9EE' // 边框颜色
+
+    }
   }
 }, // {
 //   name: 'yellow',
@@ -37,6 +57,16 @@ var THEMES = [{
   globalEdgeTagColor: '#ffffff',
   text: {
     color: '#ffffff'
+  },
+  group: {
+    style: {
+      'group.title.background': '#08A5F4',
+      // 标题背景颜色
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.border.color': '#08A5F4' // 边框颜色
+
+    }
   }
 }];
 export default THEMES;

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 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";
 
@@ -95,14 +96,12 @@ function useCanvasThemeConfig(props) {
       if (isText(element)) {
         element.s('text.color', themeConfig.text.color);
       } else if (isGroup(element)) {
-        return 'groupTitle';
-      } else if (isNode(element)) {
-        return 'nodeTag';
-      } else if (isEdge(element)) {
-        return 'edgeTag';
-      } else if (isLayer(element)) {
-        return 'layerTitle';
-      }
+        if (isClusterHtElement(element)) {// 集群
+        } else {
+          // 区域（非集群）
+          element.s(themeConfig.group.style);
+        }
+      } else if (isEdge(element)) {}
     });
   }
 

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

@@ -8,7 +8,7 @@ function FontFamilySelect(props) {
       onChange = props.onChange;
   var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
   return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: value || '',
+    value: (items.includes(value) ? value : null) || '',
     valueRender: function valueRender(val) {
       return /*#__PURE__*/React.createElement("div", {
         style: {

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

@@ -9,7 +9,11 @@ function ElementTextStyleSetting(props) {
 
   var Component = props.Component,
       styleNames = props.styleNames,
-      widgetProps = _objectWithoutPropertiesLoose(props, _excluded); // 选中的元素
+      widgetProps = _objectWithoutPropertiesLoose(props, _excluded); // 拓扑图是否加载
+
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
   var selection = topo.selectionManager.useSelection();
@@ -21,12 +25,16 @@ function ElementTextStyleSetting(props) {
     return topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
   }, [selection, topo]);
   var value = useMemo(function () {
-    return getTextStyle(htSelection, styleNames) || {};
-  }, [htSelection, topo]);
+    if (!graphLoaded) {
+      return {};
+    }
+
+    return getTextStyle(htSelection, styleNames, topo) || {};
+  }, [graphLoaded, htSelection, topo]);
   var setStyle = useMemo(function () {
     return function (style) {
       htSelection.forEach(function (element) {
-        setTextStyle(element, style);
+        setTextStyle(element, style, topo);
       });
     };
   }, [htSelection]);

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

@@ -23,6 +23,17 @@ 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表示无
+
+  };
+}
 export function formatHexColor(color) {
   return color ? color.hex : null;
 }

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

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+export function getTextStyle(element) {
+  var underline = element.a('text.decoration') === 'underline';
+  return _extends({
+    color: parseColor(element.a('topLeftTextColor')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.a('rectFont')), parseBackground(element.a('topLeftColor')));
+}
+export function setTextStyle(element, style) {
+  if ('underline' in style) {}
+
+  if ('color' in style) {
+    element.a('topLeftTextColor', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  element.a('topLeftColor', formatBackgroundRgbaColor(prevStyle, style));
+
+  var fontStyle = _extends({}, getTextStyle(element), style);
+
+  var fontStr = fontStyleUtil.build(fontStyle);
+  element.a('rectFont', fontStr);
+}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

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

@@ -1,12 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+import nodeTag from "./nodeTag";
 export function getTextStyle(element) {
-  return {
-    color: null,
-    fontFamily: null,
-    fontSize: null,
-    fontStyle: []
-  };
+  if (!element.isExpanded()) {
+    // eslint-disable-next-line import/no-named-as-default-member
+    return nodeTag.getTextStyle(element);
+  }
+
+  var underline = element.s('text.decoration') === 'underline';
+  return _extends({
+    color: parseColor(element.s('group.title.color')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.s('group.title.font')), parseBackground(element.s('group.title.background')));
+}
+export function setTextStyle(element, style, topo) {
+  if (!element.isExpanded()) {
+    // eslint-disable-next-line import/no-named-as-default-member
+    return nodeTag.setTextStyle(element, style, topo);
+  } // if ('underline' in style) {
+  // }
+
+
+  if ('color' in style) {
+    element.s('group.title.color', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  element.s('group.title.background', formatBackgroundRgbaColor(prevStyle, style));
+
+  var fontStyle = _extends({}, getTextStyle(element), style);
+
+  var fontStr = fontStyleUtil.build(fontStyle);
+  element.s('group.title.font', fontStr);
 }
-export function setTextStyle(element, style) {}
 export default {
   getTextStyle: getTextStyle,
   setTextStyle: setTextStyle

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

@@ -3,10 +3,12 @@ import nodeTag from "./nodeTag";
 import edgeTag from "./edgeTag";
 import groupTitle from "./groupTitle";
 import layerTitle from "./layerTitle";
+import box from "./box";
 export default {
   nodeTag: nodeTag,
   edgeTag: edgeTag,
   text: text,
   groupTitle: groupTitle,
-  layerTitle: layerTitle
+  layerTitle: layerTitle,
+  box: box
 };

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

@@ -1,12 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+var defaultStyle = {};
+
+function getLabelStyle(element) {
+  return _extends({}, defaultStyle, element.a('labelStyle') || {});
+}
+
+function setLabelStyle(element, style) {
+  element.a('labelStyle', _extends({}, element.a('labelStyle'), style)); // eslint-disable-next-line no-underscore-dangle
+
+  element.__labelNode.a(style);
+} // 分层标题文字样式
+
+
 export function getTextStyle(element) {
-  return {
-    color: null,
-    fontFamily: null,
-    fontSize: null,
-    fontStyle: []
-  };
+  var style = getLabelStyle(element);
+  var underline = null;
+  return _extends({
+    color: parseColor(style.fontColor),
+    underline: underline
+  }, fontStyleUtil.toMap(style.font), parseBackground(style.background));
+}
+export function setTextStyle(element, style) {
+  // if ('underline' in style) {
+  // }
+  var labelStyle = {};
+
+  if ('color' in style) {
+    labelStyle.fontColor = style.color.hex;
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  labelStyle.background = formatBackgroundRgbaColor(prevStyle, style);
+
+  var fontStyle = _extends({}, getTextStyle(element), style);
+
+  var fontStr = fontStyleUtil.build(fontStyle);
+  labelStyle.font = fontStr;
+  setLabelStyle(element, labelStyle);
 }
-export function setTextStyle(element, style) {}
 export default {
   getTextStyle: getTextStyle,
   setTextStyle: setTextStyle

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

@@ -1,12 +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,
-    fontStyle: []
-  };
+  var underline = null;
+  return _extends({
+    color: parseColor(element.a('ht.color')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.a('ht.font')), parseBackground(element.a('ht.background')));
+}
+export function setTextStyle(element, style, topo) {
+  if ('background' in style || 'opacity' in style) {
+    // 背景颜色
+    var prevStyle = getTextStyle(element);
+    topo.setNodeLabelStyle(element, {
+      background: formatBackgroundRgbaColor(prevStyle, style)
+    });
+  } else {
+    topo.getHtTopo().setNodeLabelStyle(element, style);
+  }
 }
-export function setTextStyle(element, style) {}
 export default {
   getTextStyle: getTextStyle,
   setTextStyle: setTextStyle

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

@@ -1,20 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
-import { formatBackgroundRgbaColor, parseColor } from "../colorUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
 export function getTextStyle(element) {
-  var _background$rgb;
-
   var underline = element.s('text.decoration') === 'underline';
-  var background = parseColor(element.s('textBackground'));
   return _extends({
     color: parseColor(element.s('text.color')),
     underline: underline
-  }, fontStyleUtil.toMap(element.s('text.font')), {
-    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表示无
-
-  });
+  }, fontStyleUtil.toMap(element.s('text.font')), parseBackground(element.s('textBackground')));
 }
 export function setTextStyle(element, style) {
   if ('underline' in style) {

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

@@ -4,6 +4,8 @@ import typeMap from "./elements";
 function getElementType(element) {
   if (isText(element)) {
     return 'text';
+  } else if (element.a('type') === 'box') {
+    return 'box';
   } else if (isGroup(element)) {
     return 'groupTitle';
   } else if (isNode(element)) {
@@ -59,11 +61,11 @@ export function getTextStyle(htSelection, styleNames) {
 
   return null;
 }
-export function setTextStyle(element, style) {
+export function setTextStyle(element, style, topo) {
   var type = getElementType(element);
   var handler = typeMap[type];
 
   if (handler) {
-    handler.setTextStyle(element, style);
+    handler.setTextStyle(element, style, topo);
   }
 }

package/es/core/editor/components/settings/common/text/fontStyleUtil.js

@@ -5,18 +5,17 @@ var fontStyleUtil = {
       font = '';
     }
 
-    var arr = font.trim().split(' ');
+    var str = font.trim();
     var bold = font.indexOf('bold') > -1;
     var italic = font.indexOf('italic') > -1;
-    var fontFamily;
-    var fontSize;
+    str = str.trim().replace('bold ', '').trim().replace('italic ', '').trim();
+    var arr = str.split(' ');
+    var fontSizeStr = arr[0];
+    var fontFamily = str.replace(fontSizeStr, '').trim() || null;
+    var fontSize = null;
 
-    if (arr.length) {
-      fontFamily = arr[arr.length - 1];
-    }
-
-    if (arr.length >= 2) {
-      fontSize = parseInt(arr[arr.length - 2].replace('px', ''), 10);
+    if (fontSizeStr) {
+      fontSize = parseInt(fontSizeStr.replace('px', ''), 10);
     }
 
     return {
@@ -28,17 +27,9 @@ var fontStyleUtil = {
   },
   // 字体样式格式: bold italic 12px 黑体 或 12px 黑体
   build: function build(style) {
-    var font = '';
-
-    if (style.bold) {
-      font += 'bold ';
-    }
-
-    if (style.italic) {
-      font += 'italic ';
-    }
-
-    return "" + font + style.fontSize + "px " + style.fontFamily;
+    return [style.bold ? 'bold' : null, style.italic ? 'italic' : null, style.fontSize ? style.fontSize + "px" : null, style.fontFamily].filter(function (item) {
+      return item !== null;
+    }).join(' ');
   },
   getFontStyleMap: function getFontStyleMap(obj, prefix) {
     var map = {};

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.37" === 'string' ? "6.0.0-alpha.37" : null;
+var version = typeof "6.0.0-alpha.39" === 'string' ? "6.0.0-alpha.39" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -11,6 +11,16 @@ var THEMES = [{
   globalEdgeTagColor: '#4d6277',
   text: {
     color: '#4d6277'
+  },
+  group: {
+    style: {
+      'group.title.background': '#E4E9EE',
+      // 标题背景颜色
+      'group.title.color': '#4D6277',
+      // 标题文字颜色
+      'group.border.color': '#E4E9EE' // 边框颜色
+
+    }
   }
 }, {
   name: 'lightblue',
@@ -21,6 +31,16 @@ var THEMES = [{
   globalEdgeTagColor: '#4d6277',
   text: {
     color: '#4d6277'
+  },
+  group: {
+    style: {
+      'group.title.background': '#E4E9EE',
+      // 标题背景颜色
+      'group.title.color': '#4D6277',
+      // 标题文字颜色
+      'group.border.color': '#E4E9EE' // 边框颜色
+
+    }
   }
 }, // {
 //   name: 'yellow',
@@ -41,6 +61,16 @@ var THEMES = [{
   globalEdgeTagColor: '#ffffff',
   text: {
     color: '#ffffff'
+  },
+  group: {
+    style: {
+      'group.title.background': '#08A5F4',
+      // 标题背景颜色
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.border.color': '#08A5F4' // 边框颜色
+
+    }
   }
 }];
 var _default = THEMES;

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

@@ -11,6 +11,8 @@ 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"));
@@ -106,14 +108,12 @@ function useCanvasThemeConfig(props) {
       if ((0, _htElementUtils.isText)(element)) {
         element.s('text.color', themeConfig.text.color);
       } else if ((0, _htElementUtils.isGroup)(element)) {
-        return 'groupTitle';
-      } else if ((0, _htElementUtils.isNode)(element)) {
-        return 'nodeTag';
-      } else if ((0, _htElementUtils.isEdge)(element)) {
-        return 'edgeTag';
-      } else if ((0, _htElementUtils.isLayer)(element)) {
-        return 'layerTitle';
-      }
+        if ((0, _clusterUtil.isClusterHtElement)(element)) {// 集群
+        } else {
+          // 区域（非集群）
+          element.s(themeConfig.group.style);
+        }
+      } else if ((0, _htElementUtils.isEdge)(element)) {}
     });
   }
 

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

@@ -22,7 +22,7 @@ function FontFamilySelect(props) {
       onChange = props.onChange;
   var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
   return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
-    value: value || '',
+    value: (items.includes(value) ? value : null) || '',
     valueRender: function valueRender(val) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: {

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

@@ -23,7 +23,11 @@ function ElementTextStyleSetting(props) {
   var topo = props.topo;
   var Component = props.Component,
       styleNames = props.styleNames,
-      widgetProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded); // 选中的元素
+      widgetProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded); // 拓扑图是否加载
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
 
   var selection = topo.selectionManager.useSelection();
   var htSelection = (0, _react.useMemo)(function () {
@@ -34,12 +38,16 @@ function ElementTextStyleSetting(props) {
     return topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
   }, [selection, topo]);
   var value = (0, _react.useMemo)(function () {
-    return (0, _textStyleUtil.getTextStyle)(htSelection, styleNames) || {};
-  }, [htSelection, topo]);
+    if (!graphLoaded) {
+      return {};
+    }
+
+    return (0, _textStyleUtil.getTextStyle)(htSelection, styleNames, topo) || {};
+  }, [graphLoaded, htSelection, topo]);
   var setStyle = (0, _react.useMemo)(function () {
     return function (style) {
       htSelection.forEach(function (element) {
-        (0, _textStyleUtil.setTextStyle)(element, style);
+        (0, _textStyleUtil.setTextStyle)(element, style, topo);
       });
     };
   }, [htSelection]);

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

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.formatBackgroundRgbaColor = formatBackgroundRgbaColor;
 exports.formatHexColor = formatHexColor;
+exports.parseBackground = parseBackground;
 exports.parseColor = parseColor;
 
 var _color = _interopRequireDefault(require("color"));
@@ -33,6 +34,18 @@ function parseColor(colorStr) {
   };
 }
 
+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表示无
+
+  };
+}
+
 function formatHexColor(color) {
   return color ? color.hex : null;
 }

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _fontStyleUtil = _interopRequireDefault(require("../../../../../../settings/common/text/fontStyleUtil"));
+
+var _colorUtil = require("../colorUtil");
+
+function getTextStyle(element) {
+  var underline = element.a('text.decoration') === 'underline';
+  return (0, _extends2["default"])({
+    color: (0, _colorUtil.parseColor)(element.a('topLeftTextColor')),
+    underline: underline
+  }, _fontStyleUtil["default"].toMap(element.a('rectFont')), (0, _colorUtil.parseBackground)(element.a('topLeftColor')));
+}
+
+function setTextStyle(element, style) {
+  if ('underline' in style) {}
+
+  if ('color' in style) {
+    element.a('topLeftTextColor', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  element.a('topLeftColor', (0, _colorUtil.formatBackgroundRgbaColor)(prevStyle, style));
+  var fontStyle = (0, _extends2["default"])({}, getTextStyle(element), style);
+
+  var fontStr = _fontStyleUtil["default"].build(fontStyle);
+
+  element.a('rectFont', fontStr);
+}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;