@riil-frontend/component-topology 11.0.29 → 11.0.30

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

@@ -4,29 +4,35 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import ButtonBox from "./ButtonBox";
 import styles from "./DropdownButton.module.scss";
+
 function DropdownButton(props) {
   var trigger = props.trigger,
-    disabled = props.disabled,
-    _props$showArrow = props.showArrow,
-    showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
-    _props$showContainer = props.showContainer,
-    showContainer = _props$showContainer === void 0 ? true : _props$showContainer,
-    buttonBoxProps = props.buttonBoxProps,
-    children = props.children;
+      disabled = props.disabled,
+      _props$showArrow = props.showArrow,
+      showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+      _props$showContainer = props.showContainer,
+      showContainer = _props$showContainer === void 0 ? true : _props$showContainer,
+      buttonBoxProps = props.buttonBoxProps,
+      children = props.children;
+
   var _useState = useState(false),
-    visible = _useState[0],
-    setVisible = _useState[1];
+      visible = _useState[0],
+      setVisible = _useState[1];
+
   var button = /*#__PURE__*/React.createElement(ButtonBox, _extends({
     active: visible,
     disabled: disabled,
     showArrow: showArrow
   }, buttonBoxProps), trigger);
+
   var renderContent = function renderContent() {
     if (showContainer) {
       return /*#__PURE__*/React.createElement(PopupCard, null, children);
     }
+
     return children;
   };
+
   return /*#__PURE__*/React.createElement(_Dropdown, {
     visible: visible,
     disabled: disabled,
@@ -35,6 +41,7 @@ function DropdownButton(props) {
     onVisibleChange: setVisible
   }, renderContent());
 }
+
 DropdownButton.propTypes = {
   showArrow: PropTypes.bool,
   showContainer: PropTypes.bool
@@ -43,10 +50,12 @@ DropdownButton.defaultProps = {
   showArrow: true,
   showContainer: true
 };
+
 function PopupCard(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles.card
   }, props.children);
 }
+
 DropdownButton.PopupCard = PopupCard;
 export default DropdownButton;

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

@@ -2,22 +2,26 @@ import _Menu from "@alifd/next/es/menu";
 import React from 'react';
 import PropTypes from 'prop-types';
 import DropdownButton from "./DropdownButton";
+
 function DropdownMenu(props) {
   var value = props.value,
-    children = props.children,
-    multiple = props.multiple,
-    onSelect = props.onSelect,
-    valueRender = props.valueRender,
-    disabled = props.disabled;
+      children = props.children,
+      multiple = props.multiple,
+      onSelect = props.onSelect,
+      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, item, extra) {
     var selected = multiple ? keys : keys[0];
+
     if (onSelect) {
       onSelect(selected, item, extra);
     }
   };
+
   var menu = /*#__PURE__*/React.createElement(_Menu, {
     selectMode: selectMode,
     selectedKeys: selectedKeys,
@@ -29,6 +33,7 @@ function DropdownMenu(props) {
     showContainer: false
   }, multiple ? /*#__PURE__*/React.createElement("div", null, menu) : menu);
 }
+
 DropdownButton.propTypes = {
   valueRender: PropTypes.func
 };

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

@@ -1,10 +1,11 @@
 import _Menu from "@alifd/next/es/menu";
 import React from 'react';
 import ArrowPopup from "./ArrowPopup";
+
 function MenuSelect(props) {
   var value = props.value,
-    children = props.children,
-    onChange = props.onChange;
+      children = props.children,
+      onChange = props.onChange;
   var selectedKeys = Array.isArray(value) ? value : [value];
   return /*#__PURE__*/React.createElement(ArrowPopup, {
     label: value
@@ -14,5 +15,6 @@ function MenuSelect(props) {
     onSelect: onChange
   }, children));
 }
+
 MenuSelect.Option = _Menu.Item;
 export default MenuSelect;

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

@@ -3,21 +3,25 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["Component", "styleNames"];
 import React, { useMemo, useState } from 'react';
 import { getTextStyle, setTextStyle } from "./textStyleUtil";
+
 function ElementTextStyleSetting(props) {
   var topo = props.topo;
+
   var Component = props.Component,
-    styleNames = props.styleNames,
-    widgetProps = _objectWithoutPropertiesLoose(props, _excluded);
+      styleNames = props.styleNames,
+      widgetProps = _objectWithoutPropertiesLoose(props, _excluded); // 拓扑图是否加载
+
 
-  // 拓扑图是否加载
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
-    graphLoaded = _topo$store$useModelS.graphLoaded;
-  // 选中的元素
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
+
   var selection = topo.selectionModel.useSelection();
   var htSelection = useMemo(function () {
     if (!selection.length) {
       return [];
     }
+
     return topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
   }, [selection, topo]);
   var fieldProps = useMemo(function () {
@@ -27,6 +31,7 @@ function ElementTextStyleSetting(props) {
         fieldDisabled: {}
       };
     }
+
     return getTextStyle(htSelection, styleNames, topo);
   }, [graphLoaded, htSelection, topo]);
   var setStyle = useMemo(function () {
@@ -43,4 +48,5 @@ function ElementTextStyleSetting(props) {
     setStyle: setStyle
   }, widgetProps));
 }
+
 export default ElementTextStyleSetting;

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

@@ -1,15 +1,16 @@
 import Color from 'color';
-
 /**
  * 解析颜色字符串为对象
  * 
  * @param {string} colorStr 
  * @returns {null|{hex, rgb:{r,g,b,a}}}
  */
+
 export function parseColor(colorStr) {
   if (!colorStr) {
     return null;
   }
+
   var color = Color(colorStr);
   var rgb = color.rgb();
   return {
@@ -28,9 +29,9 @@ export function parseBackground(colorStr) {
     background: background,
     // 背景颜色，格式: {rgba: {}, hex: ''} | null
     opacity: background ? background.rgb.a : 1 // 背景透明度。值范围 0-1, null，null表示无
+
   };
 }
-
 export function formatHexColor(color) {
   return color ? color.hex : null;
 }
@@ -38,25 +39,29 @@ export 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 新值
  */
+
 export 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;
+      opacity = colorObj.opacity;
+
   if (!background) {
     return null;
   }
+
   var rgb = background.rgb;
   return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + (opacity === null ? 1 : opacity) + ")";
 }

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

@@ -11,21 +11,24 @@ export function getTextStyle(element) {
 export function setTextStyle(element, style, topo) {
   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);
   topo.getHtTopo().setRectangleText(element);
 }
-
 /**
  * 
  * @param {*} element 
  * @returns {Array}
  */
+
 export function getEnabledFields(element) {
   return ['fontFamily', 'fontSize', 'bold', 'italic', 'color', 'background', 'opacity'];
 }

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

@@ -4,9 +4,11 @@ var _excluded = ["color", "background", "opacity", "bold", "italic"];
 import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
 export function getTextStyle(element) {
   var opacity = element.a('edge.tag.opacity');
+
   if (opacity === null || opacity === undefined) {
     opacity = 1;
   }
+
   return _extends({
     color: parseColor(element.a('edge.tag.color')),
     fontFamily: element.a('edge.tag.fontFamily') || '微软雅黑',
@@ -19,39 +21,46 @@ export function getTextStyle(element) {
 }
 export function setTextStyle(element, style, topo) {
   var color = style.color,
-    background = style.background,
-    opacity = style.opacity,
-    bold = style.bold,
-    italic = style.italic,
-    otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
+      background = style.background,
+      opacity = style.opacity,
+      bold = style.bold,
+      italic = style.italic,
+      otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
+
   var tagStyle = _extends({}, 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) {
     // 背景颜色
     var prevStyle = getTextStyle(element);
     tagStyle.background = formatBackgroundRgbaColor(prevStyle, style);
   }
+
   if ('opacity' in style) {
     tagStyle.opacity = opacity;
   }
+
   if (Object.keys(tagStyle).length) {
     topo.getHtTopo().setEdgeLabelStyle(element, tagStyle);
   }
 }
-
 /**
  * 
  * @param {*} element 
  * @returns {Array}
  */
+
 export function getEnabledFields(element) {
   return ['fontFamily', 'color', 'background', 'opacity', 'fontSize', 'bold', 'italic'];
 }

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

@@ -8,6 +8,7 @@ export function getTextStyle(element) {
     // eslint-disable-next-line import/no-named-as-default-member
     return nodeTag.getTextStyle(element);
   }
+
   var underline = element.s('text.decoration') === 'underline';
   var font = fontStyleUtil.toMap(element.s('group.title.font'));
   return _extends({
@@ -22,32 +23,35 @@ 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 ('underline' in style) {
   // }
 
+
   if ('color' in style) {
     element.s('group.title.color', style.color.hex);
   }
+
   if ('background' in style || 'opacity' in style) {
     // 背景颜色
     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 getEnabledFields(element) {
   if (!element.isExpanded()) {
     return ['fontFamily', 'fontSize', 'bold', 'italic', 'underline', 'color', 'background', 'opacity'];
-  }
+  } // 集群禁用背景颜色设置
+
 
-  // 集群禁用背景颜色设置
   if (isClusterHtElement(element)) {
     return ['fontFamily', 'fontSize', 'bold', 'italic', 'color'];
   }
+
   return ['fontFamily', 'fontSize', 'bold', 'italic', 'color', 'background', 'opacity'];
 }
 export function getFieldDisabled(element) {
@@ -56,6 +60,7 @@ export function getFieldDisabled(element) {
       fontSize: true
     };
   }
+
   return {};
 }
 export default {

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

@@ -6,26 +6,30 @@ var defaultStyle = {
   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);
-}
+} // 分层标题文字样式
+
 
-// 分层标题文字样式
 export function getTextStyle(element) {
   var style = getLabelStyle(element);
   var underline = null;
@@ -37,25 +41,28 @@ export function getTextStyle(element) {
 export 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 = formatBackgroundRgbaColor(prevStyle, style);
+
   var fontStyle = _extends({}, getTextStyle(element), style);
+
   var fontStr = fontStyleUtil.build(fontStyle);
   labelStyle.font = fontStr;
   setLabelStyle(element, labelStyle);
 }
-
 /**
  * 
  * @param {*} element 
  * @returns {Array}
  */
+
 export function getEnabledFields(element) {
   return ['fontFamily', 'fontSize', 'color', 'background', 'opacity'];
 }

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

@@ -4,9 +4,11 @@ var _excluded = ["color", "background", "opacity", "bold", "italic", "underline"
 import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
 export function getTextStyle(element) {
   var opacity = element.a('node.tag.opacity');
+
   if (opacity === null || opacity === undefined) {
     opacity = 1;
   }
+
   return _extends({
     color: parseColor(element.a('node.tag.color')),
     fontFamily: element.a('node.tag.fontFamily') || '微软雅黑',
@@ -20,33 +22,41 @@ export function getTextStyle(element) {
 }
 export function setTextStyle(element, style, topo) {
   var color = style.color,
-    background = style.background,
-    opacity = style.opacity,
-    bold = style.bold,
-    italic = style.italic,
-    underline = style.underline,
-    otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
+      background = style.background,
+      opacity = style.opacity,
+      bold = style.bold,
+      italic = style.italic,
+      underline = style.underline,
+      otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
+
   var tagStyle = _extends({}, otherStyle);
+
   if ('color' in style) {
     tagStyle.color = color.hex;
   }
+
   if ('bold' in style) {
     tagStyle.fontBold = bold;
   }
+
   if ('italic' in style) {
     tagStyle.fontItalic = italic;
   }
+
   if ('underline' in style) {
     tagStyle.fontUnderline = underline;
   }
+
   if ('background' in style) {
     // 背景颜色
     var prevStyle = getTextStyle(element);
     tagStyle.background = formatBackgroundRgbaColor(prevStyle, style);
   }
+
   if ('opacity' in style) {
     tagStyle.opacity = opacity;
   }
+
   if (Object.keys(tagStyle).length) {
     topo.getHtTopo().setNodeLabelStyle(element, tagStyle);
   }
@@ -54,13 +64,13 @@ export function setTextStyle(element, style, topo) {
 export function getEnabledFields(element) {
   return ['fontFamily', 'color', 'background', 'opacity', 'fontSize', 'bold', 'italic', 'underline'];
 }
-
 /**
  * 获得字段是否禁用
  * 
  * @param {*} element 
  * @returns 
  */
+
 export function getFieldDisabled(element) {
   return {
     fontSize: false,

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

@@ -12,14 +12,18 @@ export 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 = formatBackgroundRgbaColor(prevStyle, style);
   element.s('textBackground', background);
+
   var fontStyle = _extends({}, getTextStyle(element), style);
+
   var fontStr = fontStyleUtil.build(fontStyle);
   element.s('text.font', fontStr);
 }

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { isGroup, isLayer, isNode, isText, isEdge } from "../../../../../../../../utils/htElementUtils";
 import typeMap from "./elements";
+
 function getElementType(element) {
   if (isText(element)) {
     return 'text';
@@ -15,33 +16,42 @@ function getElementType(element) {
   } else if (isLayer(element)) {
     return 'layerTitle';
   }
+
   return null;
 }
+
 export function getElementTextStyle(element) {
   var type = getElementType(element);
   var handler = typeMap[type];
+
   if (handler) {
     return handler.getTextStyle(element);
   }
+
   return null;
 }
 export function getElementTextStyleFieldDisabled(element) {
   var type = getElementType(element);
   var handler = typeMap[type];
+
   if (handler) {
     if (handler.getFieldDisabled) {
       return handler.getFieldDisabled(element) || {};
     }
+
     return {};
   }
+
   return null;
 }
 export function getElementTextStyleEnabledFields(element) {
   var type = getElementType(element);
   var handler = typeMap[type];
+
   if (handler && handler.getEnabledFields) {
     return handler.getEnabledFields(element);
   }
+
   return null;
 }
 export function getTextStyle(htSelection, styleNames) {
@@ -58,40 +68,45 @@ export function getTextStyle(htSelection, styleNames) {
     var elementEnabledFields = getElementTextStyleEnabledFields(element) || [];
     elementEnabledFieldsMap[id] = elementEnabledFields;
     enabledFields.push.apply(enabledFields, elementEnabledFields);
-  });
+  }); // 多选时值相同返回，排除元素禁用的字段值
 
-  // 多选时值相同返回，排除元素禁用的字段值
   var value = {};
   styleNames.forEach(function (styleName) {
     // 查询该字段多元素的值列表，排除元素禁用的字段值
     var fieldValueList = elementValues.reduce(function (result, item) {
       // 元素字段是否禁用
       var fieldDisabled = !elementEnabledFieldsMap[item.id].includes(styleName);
+
       if (!item.values || fieldDisabled) {
         return result;
       }
+
       return [].concat(result, [item.values[styleName]]);
-    }, []);
-    // 对比是否一样，如果一样则使用
+    }, []); // 对比是否一样，如果一样则使用
+
     var val = fieldValueList[0];
     var different = fieldValueList.filter(function (item) {
       // 如果是颜色，特殊处理
       if (item && val && item.rgb) {
         return item.rgb.r + "," + item.rgb.g + "," + item.rgb.b + "," + item.rgb.a !== val.rgb.r + "," + val.rgb.g + "," + val.rgb.b + "," + val.rgb.a;
       }
+
       return item !== val;
     });
+
     if (!different.length) {
       value[styleName] = val;
     }
   });
-  var disabled = true;
-  // 字段如果没有元素启用则禁用
+  var disabled = true; // 字段如果没有元素启用则禁用
+
   var fieldDisabled = styleNames.reduce(function (result, fieldName) {
     var _extends2;
+
     if (enabledFields.includes(fieldName)) {
       disabled = false;
     }
+
     return _extends({}, result, (_extends2 = {}, _extends2[fieldName] = !enabledFields.includes(fieldName), _extends2));
   }, {});
   return {
@@ -107,6 +122,7 @@ export function getTextStyle(htSelection, styleNames) {
 export function setTextStyle(element, style, topo) {
   var type = getElementType(element);
   var handler = typeMap[type];
+
   if (handler) {
     handler.setTextStyle(element, style, topo);
   }

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

@@ -9,12 +9,15 @@ var fieldDisabled = {
   italic: false,
   underline: false
 };
+
 function GlobalTagStyleSetting(props) {
   var topo = props.topo;
+
   var Component = props.Component,
-    widgetProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var values = useValues(topo);
-  // const values = useMemo(() => ({}), [])
+      widgetProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var values = useValues(topo); // const values = useMemo(() => ({}), [])
+
   var setStyle = useMemo(function () {
     return function (style) {
       return setGlobalTagStyle(topo, style);
@@ -27,4 +30,5 @@ function GlobalTagStyleSetting(props) {
     fieldDisabled: fieldDisabled
   }, widgetProps));
 }
+
 export default GlobalTagStyleSetting;