@riil-frontend/component-topology 6.0.0-alpha.6 → 6.0.0-alpha.61

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

@@ -16,18 +16,29 @@ var _DropdownButton = _interopRequireDefault(require("./DropdownButton"));
 function DropdownMenu(props) {
   var value = props.value,
       children = props.children,
+      multiple = props.multiple,
       onChange = props.onChange,
-      valueRender = props.valueRender;
+      valueRender = props.valueRender,
+      disabled = props.disabled;
   var selectedKeys = Array.isArray(value) ? value : [value];
   var valueDisplay = valueRender ? valueRender(value) : value;
+  var selectMode = multiple ? 'multiple' : 'single';
+
+  var handleChange = function handleChange(keys) {
+    onChange(multiple ? keys : keys[0]);
+  };
+
+  var menu = /*#__PURE__*/_react["default"].createElement(_menu["default"], {
+    selectMode: selectMode,
+    selectedKeys: selectedKeys,
+    onSelect: handleChange
+  }, children);
+
   return /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
     trigger: valueDisplay,
+    disabled: disabled,
     showContainer: false
-  }, /*#__PURE__*/_react["default"].createElement(_menu["default"], {
-    selectMode: "single",
-    selectedKeys: selectedKeys,
-    onSelect: onChange
-  }, children));
+  }, multiple ? /*#__PURE__*/_react["default"].createElement("div", null, menu) : menu);
 }
 
 _DropdownButton["default"].propTypes = {

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _textStyleUtil = require("./textStyleUtil");
+
+var _excluded = ["Component", "styleNames"];
+
+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 ElementTextStyleSetting(props) {
+  var topo = props.topo;
+  var Component = props.Component,
+      styleNames = props.styleNames,
+      widgetProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded); // 拓扑图是否加载
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
+
+  var selection = topo.selectionModel.useSelection();
+  var htSelection = (0, _react.useMemo)(function () {
+    if (!selection.length) {
+      return [];
+    }
+
+    return topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+  }, [selection, topo]);
+  var fieldProps = (0, _react.useMemo)(function () {
+    if (!graphLoaded) {
+      return {
+        value: {},
+        fieldDisabled: {}
+      };
+    }
+
+    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, topo);
+      });
+    };
+  }, [htSelection]);
+  return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
+    disabled: false,
+    htSelection: htSelection
+  }, fieldProps, {
+    setStyle: setStyle
+  }, widgetProps));
+}
+
+var _default = ElementTextStyleSetting;
+exports["default"] = _default;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.formatBackgroundRgbaColor = formatBackgroundRgbaColor;
+exports.formatHexColor = formatHexColor;
+exports.formatRgbaColor = formatRgbaColor;
+exports.parseBackground = parseBackground;
+exports.parseColor = parseColor;
+
+var _color = _interopRequireDefault(require("color"));
+
+/**
+ * 解析颜色字符串为对象
+ * 
+ * @param {string} colorStr 
+ * @returns {null|{hex, rgb:{r,g,b,a}}}
+ */
+function parseColor(colorStr) {
+  if (!colorStr) {
+    return null;
+  }
+
+  var color = (0, _color["default"])(colorStr);
+  var rgb = color.rgb();
+  return {
+    hex: color.hex(),
+    rgb: {
+      r: rgb.color[0],
+      g: rgb.color[1],
+      b: rgb.color[2],
+      a: rgb.valpha
+    }
+  };
+}
+
+function parseBackground(colorStr) {
+  var background = parseColor(colorStr);
+  return {
+    background: background,
+    // 背景颜色，格式: {rgba: {}, hex: ''} | null
+    opacity: background ? background.rgb.a : 1 // 背景透明度。值范围 0-1, null，null表示无
+
+  };
+}
+
+function formatHexColor(color) {
+  return color ? color.hex : null;
+}
+
+function formatRgbaColor(color) {
+  if (!color) {
+    return null;
+  }
+
+  var rgb = color.rgb;
+  return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + rgb.a + ")";
+}
+/**
+ * 格式化背景rgba颜色
+ * @param {{background, opacity}} prevColor
+ * @param {{background, opacity}} currentColor
+ */
+
+
+function formatBackgroundRgbaColor(prevColor, currentColor) {
+  if (!('background' in currentColor) && !('opacity' in currentColor)) {
+    return formatRgbaColor(prevColor.background);
+  }
+
+  var colorObj = Object.assign(prevColor, currentColor);
+  var background = colorObj.background,
+      opacity = colorObj.opacity;
+
+  if (!background) {
+    return null;
+  }
+
+  var rgb = background.rgb;
+  return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + (opacity === null ? 1 : opacity) + ")";
+}

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

@@ -0,0 +1,46 @@
+"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, topo) {
+  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);
+  topo.getHtTopo().setRectangleText(element);
+}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getFieldDisabled = getFieldDisabled;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _fontStyleUtil = _interopRequireDefault(require("../../../../../../settings/common/text/fontStyleUtil"));
+
+var _colorUtil = require("../colorUtil");
+
+var _excluded = ["color", "background", "opacity", "bold", "italic"];
+
+function getTextStyle(element) {
+  var underline = null;
+  return (0, _extends2["default"])({
+    color: (0, _colorUtil.parseColor)(element.a('link_ind_left_color')),
+    underline: underline
+  }, _fontStyleUtil["default"].toMap(element.a('link_ind_left_font')), (0, _colorUtil.parseBackground)(element.a('link_ind_background')));
+}
+
+function setTextStyle(element, style, topo) {
+  var _fontStyleUtil$remove = _fontStyleUtil["default"].removeBoldItalic(style),
+      color = _fontStyleUtil$remove.color,
+      background = _fontStyleUtil$remove.background,
+      opacity = _fontStyleUtil$remove.opacity,
+      bold = _fontStyleUtil$remove.bold,
+      italic = _fontStyleUtil$remove.italic,
+      otherStyle = (0, _objectWithoutPropertiesLoose2["default"])(_fontStyleUtil$remove, _excluded);
+
+  var tagStyle = (0, _extends2["default"])({}, otherStyle);
+
+  if ('color' in style) {
+    tagStyle.color = color.hex;
+  }
+
+  if ('bold' in style) {
+    tagStyle.fontBold = bold;
+  }
+
+  if ('italic' in style) {
+    tagStyle.fontItalic = italic;
+  }
+
+  if ('background' in style || 'opacity' in style) {
+    // 背景颜色
+    var prevStyle = getTextStyle(element);
+    tagStyle.background = (0, _colorUtil.formatBackgroundRgbaColor)(prevStyle, style);
+  }
+
+  if (Object.keys(tagStyle).length) {
+    topo.getHtTopo().setEdgeLabelStyle(element, tagStyle);
+  }
+}
+
+function getFieldDisabled(element) {
+  return {
+    fontSize: true
+  };
+}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle,
+  getFieldDisabled: getFieldDisabled
+};
+exports["default"] = _default;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getFieldDisabled = getFieldDisabled;
+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");
+
+var _nodeTag = _interopRequireDefault(require("./nodeTag"));
+
+function getTextStyle(element) {
+  if (!element.isExpanded()) {
+    // eslint-disable-next-line import/no-named-as-default-member
+    return _nodeTag["default"].getTextStyle(element);
+  }
+
+  var underline = element.s('text.decoration') === 'underline';
+
+  var font = _fontStyleUtil["default"].toMap(element.s('group.title.font'));
+
+  return (0, _extends2["default"])({
+    color: (0, _colorUtil.parseColor)(element.s('group.title.color')),
+    underline: underline
+  }, _fontStyleUtil["default"].toMap(element.s('group.title.font')), {
+    fontSize: font.fontSize || 12,
+    fontFamily: font.fontFamily || '微软雅黑'
+  }, (0, _colorUtil.parseBackground)(element.s('group.title.background')));
+}
+
+function setTextStyle(element, style, topo) {
+  if (!element.isExpanded()) {
+    // eslint-disable-next-line import/no-named-as-default-member
+    return _nodeTag["default"].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', (0, _colorUtil.formatBackgroundRgbaColor)(prevStyle, style));
+  var fontStyle = (0, _extends2["default"])({}, getTextStyle(element), style);
+
+  var fontStr = _fontStyleUtil["default"].build(_fontStyleUtil["default"].removeBoldItalic(fontStyle));
+
+  element.s('group.title.font', fontStr);
+}
+
+function getFieldDisabled(element) {
+  if (!element.isExpanded()) {
+    return {
+      fontSize: true
+    };
+  }
+
+  return {};
+}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle,
+  getFieldDisabled: getFieldDisabled
+};
+exports["default"] = _default;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _text = _interopRequireDefault(require("./text"));
+
+var _nodeTag = _interopRequireDefault(require("./nodeTag"));
+
+var _edgeTag = _interopRequireDefault(require("./edgeTag"));
+
+var _groupTitle = _interopRequireDefault(require("./groupTitle"));
+
+var _layerTitle = _interopRequireDefault(require("./layerTitle"));
+
+var _box = _interopRequireDefault(require("./box"));
+
+var _default = {
+  nodeTag: _nodeTag["default"],
+  edgeTag: _edgeTag["default"],
+  text: _text["default"],
+  groupTitle: _groupTitle["default"],
+  layerTitle: _layerTitle["default"],
+  box: _box["default"]
+};
+exports["default"] = _default;

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

@@ -0,0 +1,78 @@
+"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");
+
+var defaultStyle = {
+  color: '#4D6277',
+  font: '10px 微软雅黑',
+  background: '#E4E9EE'
+};
+
+function getLabelStyle(element) {
+  var background = element.s('layer.label.background');
+
+  if (background === undefined) {
+    background = defaultStyle.background;
+  }
+
+  return {
+    color: element.s('layer.label.color') || defaultStyle.color,
+    font: element.s('layer.label.font') || defaultStyle.font,
+    background: background
+  };
+}
+
+function setLabelStyle(element, style) {
+  var map = {};
+  Object.keys(style).forEach(function (name) {
+    map["layer.label." + name] = style[name];
+  });
+  element.s(map);
+} // 分层标题文字样式
+
+
+function getTextStyle(element) {
+  var style = getLabelStyle(element);
+  var underline = null;
+  return (0, _extends2["default"])({
+    color: (0, _colorUtil.parseColor)(style.color),
+    underline: underline
+  }, _fontStyleUtil["default"].toMap(style.font), (0, _colorUtil.parseBackground)(style.background));
+}
+
+function setTextStyle(element, style) {
+  // if ('underline' in style) {
+  // }
+  var labelStyle = {};
+
+  if ('color' in style) {
+    labelStyle.color = style.color.hex;
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  labelStyle.background = (0, _colorUtil.formatBackgroundRgbaColor)(prevStyle, style);
+  var fontStyle = (0, _extends2["default"])({}, getTextStyle(element), style);
+
+  var fontStr = _fontStyleUtil["default"].build(fontStyle);
+
+  labelStyle.font = fontStr;
+  setLabelStyle(element, labelStyle);
+}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getFieldDisabled = getFieldDisabled;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _fontStyleUtil = _interopRequireDefault(require("../../../../../../settings/common/text/fontStyleUtil"));
+
+var _colorUtil = require("../colorUtil");
+
+var _excluded = ["color", "background", "opacity", "bold", "italic"];
+
+function getTextStyle(element) {
+  var underline = null;
+  return (0, _extends2["default"])({
+    color: (0, _colorUtil.parseColor)(element.a('ht.color')),
+    underline: underline
+  }, _fontStyleUtil["default"].toMap(element.a('ht.font')), (0, _colorUtil.parseBackground)(element.a('ht.background')));
+}
+
+function setTextStyle(element, style, topo) {
+  var _fontStyleUtil$remove = _fontStyleUtil["default"].removeBoldItalic(style),
+      color = _fontStyleUtil$remove.color,
+      background = _fontStyleUtil$remove.background,
+      opacity = _fontStyleUtil$remove.opacity,
+      bold = _fontStyleUtil$remove.bold,
+      italic = _fontStyleUtil$remove.italic,
+      otherStyle = (0, _objectWithoutPropertiesLoose2["default"])(_fontStyleUtil$remove, _excluded);
+
+  var tagStyle = (0, _extends2["default"])({}, otherStyle);
+
+  if ('color' in style) {
+    tagStyle.color = color.hex;
+  }
+
+  if ('bold' in style) {
+    tagStyle.fontBold = bold;
+  }
+
+  if ('italic' in style) {
+    tagStyle.fontItalic = italic;
+  }
+
+  if ('background' in style || 'opacity' in style) {
+    // 背景颜色
+    var prevStyle = getTextStyle(element);
+    tagStyle.background = (0, _colorUtil.formatBackgroundRgbaColor)(prevStyle, style);
+  }
+
+  if (Object.keys(tagStyle).length) {
+    topo.getHtTopo().setNodeLabelStyle(element, tagStyle);
+  }
+}
+
+function getFieldDisabled(element) {
+  return {
+    fontSize: true
+  };
+}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle,
+  getFieldDisabled: getFieldDisabled
+};
+exports["default"] = _default;

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

@@ -0,0 +1,48 @@
+"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.s('text.decoration') === 'underline';
+  return (0, _extends2["default"])({
+    color: (0, _colorUtil.parseColor)(element.s('text.color')),
+    underline: underline
+  }, _fontStyleUtil["default"].toMap(element.s('text.font')), (0, _colorUtil.parseBackground)(element.s('textBackground')));
+}
+
+function setTextStyle(element, style) {
+  if ('underline' in style) {
+    element.s('text.decoration', style.underline ? 'underline' : null);
+  }
+
+  if ('color' in style) {
+    element.s('text.color', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  var background = (0, _colorUtil.formatBackgroundRgbaColor)(prevStyle, style);
+  element.s('textBackground', background);
+  var fontStyle = (0, _extends2["default"])({}, getTextStyle(element), style);
+
+  var fontStr = _fontStyleUtil["default"].build(fontStyle);
+
+  element.s('text.font', fontStr);
+}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;