@riil-frontend/component-topology 10.0.10 → 10.0.12

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

@@ -15,6 +15,7 @@
     margin-right: 8px;
     width: 32px;
     text-align: right;
+    color:$color-text1-6;
   }
 
   :global {

package/es/components/ColorPanel/index.js

@@ -75,7 +75,7 @@ function ColorPanel(props) {
   };
 
   useEffect(function () {
-    if (value == undefined) return;
+    if (value === undefined) return;
     if (!value) return setActive('-1');
     var activeColor = value.hex ? Color(value.hex).rgb() : Color(value).rgb(); // eslint-disable-next-line no-unused-vars, array-callback-return
 

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

@@ -1,9 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
+import { getHtSelection, getGroupsStyle, setGroupsStyle } from "./BoxBackgroundUtil";
 /**
  * 框背景设置
  * @param {*} props 
@@ -20,8 +21,41 @@ function BoxBackgroundButton(props) {
       setDisabled = _useState[1]; // 选中的元素
 
 
-  var selection = topo.selectionModel.useSelection();
-  useEffect(function () {// setDisabled(false)
+  var selection = topo.selectionModel.useSelection(); // 拓扑图是否加载
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded;
+
+  var htSelection = useMemo(function () {
+    if (!selection.length) {
+      return [];
+    }
+
+    var elements = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    return getHtSelection(elements);
+  }, [selection, topo]);
+  var fieldProps = useMemo(function () {
+    if (!graphLoaded) {
+      return {
+        value: {}
+      };
+    }
+
+    return getGroupsStyle(htSelection, topo);
+  }, [graphLoaded, htSelection, topo]);
+  var setStyle = useMemo(function () {
+    return function (style) {
+      htSelection.forEach(function (element) {
+        setGroupsStyle(element, style);
+      });
+    };
+  }, [htSelection]);
+  useEffect(function () {
+    if (htSelection.length && graphLoaded) {
+      setDisabled(false);
+    } else {
+      setDisabled(true);
+    }
   }, [selection]);
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/Disable.svg",
@@ -39,7 +73,10 @@ function BoxBackgroundButton(props) {
     disabled: disabled,
     trigger: icon
   }, /*#__PURE__*/React.createElement(BoxBackgroundSetting, {
-    topo: topo
+    topo: topo,
+    fieldProps: fieldProps,
+    setStyle: setStyle,
+    htSelection: htSelection
   })));
 }
 

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

@@ -1,8 +1,247 @@
-import React from 'react';
+import _NumberPicker from "@alifd/next/es/number-picker";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState } from 'react';
+import styles from "./BoxbackgroundSettings.module.scss";
+import ColorPanel from "../../../../../../components/ColorPanel";
+import FontColorRange from "../../../../../../components/ColorPanel/components/FontColorRange";
 
 function BoxBackgroundSetting(props) {
-  // const {  } = props
-  return /*#__PURE__*/React.createElement("div", null, "xxx");
+  var topo = props.topo,
+      fieldProps = props.fieldProps,
+      setStyle = props.setStyle,
+      htSelection = props.htSelection;
+  var borderColor = fieldProps.borderColor,
+      borderOpacity = fieldProps.borderOpacity,
+      backgroundColor = fieldProps.backgroundColor,
+      backgroundOpacity = fieldProps.backgroundOpacity,
+      width = fieldProps.width,
+      pattern = fieldProps.pattern;
+
+  var _useState = useState(pattern && pattern.length > 0 ? pattern[0] : 0),
+      leftInputVal = _useState[0],
+      setLeftInputVal = _useState[1];
+
+  var _useState2 = useState(pattern && pattern.length == 2 ? pattern[1] : 0),
+      rightInputVal = _useState2[0],
+      setRightInputVal = _useState2[1];
+
+  var backOpacityChange = function backOpacityChange(value) {
+    topo.historyManager.beginTransaction();
+    setStyle({
+      backgroundOpacity: (value / 100).toFixed(2) * 1
+    });
+    topo.historyManager.endTransaction();
+  };
+
+  var backgroundChang = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, type) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(type === 'select')) {
+                _context.next = 7;
+                break;
+              }
+
+              topo.historyManager.beginTransaction();
+              _context.next = 4;
+              return setStyle({
+                backgroundColor: value
+              });
+
+            case 4:
+              topo.historyManager.endTransaction();
+              _context.next = 8;
+              break;
+
+            case 7:
+              setStyle({
+                backgroundColor: value
+              });
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function backgroundChang(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var borderOpacityChange = function borderOpacityChange(value) {
+    topo.historyManager.beginTransaction();
+    setStyle({
+      borderOpacity: (value / 100).toFixed(2) * 1
+    });
+    topo.historyManager.endTransaction();
+  };
+
+  var borderWidthChange = function borderWidthChange(value) {
+    topo.historyManager.beginTransaction();
+    setStyle({
+      width: value
+    });
+    topo.historyManager.endTransaction();
+  };
+
+  var borderColorChang = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, type) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(type === 'select')) {
+                _context2.next = 7;
+                break;
+              }
+
+              topo.historyManager.beginTransaction();
+              _context2.next = 4;
+              return setStyle({
+                borderColor: value
+              });
+
+            case 4:
+              topo.historyManager.endTransaction();
+              _context2.next = 8;
+              break;
+
+            case 7:
+              setStyle({
+                borderColor: value
+              });
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function borderColorChang(_x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var leftInputChange = function leftInputChange(val) {
+    setLeftInputVal(val);
+    topo.historyManager.beginTransaction();
+    setStyle({
+      pattern: [val, rightInputVal]
+    });
+    topo.historyManager.endTransaction();
+  };
+
+  var rightInputChange = function rightInputChange(val) {
+    setRightInputVal(val);
+    topo.historyManager.beginTransaction();
+    setStyle({
+      pattern: [leftInputVal, val]
+    });
+    topo.historyManager.endTransaction();
+  };
+
+  var onFocus = function onFocus() {};
+
+  var onBlur = function onBlur() {};
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.backgroundColor
+  }, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
+    className: styles.backOpacity
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
+  }), /*#__PURE__*/React.createElement(FontColorRange, {
+    max: 100,
+    min: 0,
+    unit: "%",
+    list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
+    onChange: backOpacityChange,
+    defaultValue: backgroundOpacity === undefined ? backgroundOpacity : Math.round(backgroundOpacity * 100)
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px',
+      marginBottom: '3px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    showClear: true,
+    value: backgroundColor,
+    onChange: backgroundChang,
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.borderColor
+  }, /*#__PURE__*/React.createElement("span", null, "\u8FB9\u6846"), /*#__PURE__*/React.createElement("div", {
+    className: styles.borderWidth
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
+  }), /*#__PURE__*/React.createElement(FontColorRange, {
+    max: 10,
+    min: 1,
+    unit: "px",
+    list: [1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    onChange: borderWidthChange,
+    defaultValue: width ? width : 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.backOpacity
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u8FB9\u6846.svg"
+  }), /*#__PURE__*/React.createElement(FontColorRange, {
+    max: 100,
+    min: 0,
+    unit: "%",
+    list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
+    onChange: borderOpacityChange,
+    defaultValue: borderOpacity === undefined ? borderOpacity : Math.round(borderOpacity * 100)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.backOpacity
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u5B9E\u7EBF\u865A\u7EBF.svg"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles.backOpacityLable
+  }, "\u865A\u7EBF"), /*#__PURE__*/React.createElement(_NumberPicker, {
+    size: "small",
+    hasTrigger: false,
+    placeholder: '0',
+    className: styles.leftInput,
+    value: leftInputVal,
+    min: 0,
+    max: 20,
+    onChange: leftInputChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles.backOpacityLable
+  }, "\u95F4\u9694"), /*#__PURE__*/React.createElement(_NumberPicker, {
+    size: "small",
+    hasTrigger: false // eslint-disable-next-line no-nested-ternary
+    ,
+    placeholder: '0',
+    className: styles.rightInput,
+    value: rightInputVal,
+    min: 0,
+    max: 20,
+    onChange: rightInputChange
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px',
+      marginBottom: '3px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    value: borderColor,
+    onChange: borderColorChang,
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
+  }))));
 }
 
 export default BoxBackgroundSetting;

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

@@ -0,0 +1,187 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["borderColor", "borderOpacity", "backgroundColor", "backgroundOpacity", "width", "pattern"];
+import { parseColor, parseBackground, formatBackgroundRgbaColor } from "../components/textStyleSetting/ElementTextStyleSetting/colorUtil";
+/**
+ * @name getHtSelection 获取选中的框和区域(不包含集群)
+ * @param {*} elements 选中元素列表
+ * @returns Array
+ */
+
+export function getHtSelection(elements) {
+  //rectangle
+  return elements.filter(function (i) {
+    return i._layer == 'rectangle' || i instanceof ht.Group && i.a('elementTemplate') !== 'cluster';
+  });
+}
+/**
+ * @name getGroupsStyle 获取区域(不包含集群)/框的样式（['backgroundColor','backgtoundOpacity','width','pattern','widthOpacity','widthColor']）
+ * @param {*} htSelection 选中的区域/框元素列表
+ */
+
+export function getGroupsStyle(htSelection) {
+  var elementValues = [];
+  var elementEnabledFieldsMap = {};
+  var enabledFields = [];
+  htSelection.forEach(function (element) {
+    var id = element.getId();
+    var elementTextStyle = getElementTextStyle(element);
+    elementValues.push({
+      id: id,
+      values: elementTextStyle
+    });
+  });
+  var value = {};
+  var styleNames = ['borderColor', 'borderOpacity', 'backgroundColor', 'backgroundOpacity', 'width', 'pattern'];
+  styleNames.forEach(function (styleName) {
+    // 查询该字段多元素的值列表，排除元素禁用的字段值
+    var fieldValueList = elementValues.reduce(function (result, item) {
+      // 元素字段是否禁用
+      if (!item.values) {
+        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;
+    }
+  });
+  return value;
+}
+/**
+ * @name getElementTextStyle 获取单个元素的指定样式
+ * @param {*} element 
+ */
+
+export function getElementTextStyle(element) {
+  if (element._layer != 'rectangle') {
+    return {
+      borderColor: parseBackground(element.s('group.border.color')).background,
+      borderOpacity: parseBackground(element.s('group.border.color')).opacity,
+      backgroundColor: parseBackground(element.s('group.background')).background,
+      backgroundOpacity: parseBackground(element.s('group.background')).opacity,
+      width: element.s('group.border.width'),
+      pattern: element.s('group.border.pattern') ? getBorderPattern(element.s('group.border.pattern')) : [0, 0]
+    };
+  } else {
+    return {
+      borderColor: parseBackground(element.s('shape.border.color')).background,
+      borderOpacity: parseBackground(element.s('shape.border.color')).opacity,
+      backgroundColor: parseBackground(element.s('shape.background')).background,
+      backgroundOpacity: parseBackground(element.s('shape.background')).opacity,
+      width: element.s('shape.border.width'),
+      pattern: element.s('shape.border.pattern') ? getBorderPattern(element.s('shape.border.pattern')) : [0, 0]
+    };
+  }
+}
+export function getBorderPattern(data) {
+  if (data.length == 1) {
+    return [data[0], data[0]];
+  }
+
+  return data;
+}
+export function setGroupsStyle(elements, style) {
+  var borderColor = style.borderColor,
+      borderOpacity = style.borderOpacity,
+      backgroundColor = style.backgroundColor,
+      backgroundOpacity = style.backgroundOpacity,
+      width = style.width,
+      pattern = style.pattern,
+      otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
+
+  var tagStyle = _extends({}, otherStyle);
+
+  setGroupStyle(elements, style, tagStyle);
+}
+export function setGroupStyle(element, style, tagStyle) {
+  var elementStyles = getElementTextStyle(element);
+
+  if ('borderColor' in style || 'borderOpacity' in style) {
+    var prevStyle = {
+      background: elementStyles.borderColor ? elementStyles.borderColor : 'rgba(255,255,255,1)',
+      opacity: elementStyles.borderOpacity ? elementStyles.borderOpacity : 1
+    };
+    var borderCurrentColor = {};
+
+    if ('borderColor' in style) {
+      borderCurrentColor = {
+        background: style.borderColor,
+        opacity: prevStyle.opacity === undefined ? 1 : prevStyle.opacity
+      };
+    } else {
+      borderCurrentColor = {
+        background: prevStyle.background,
+        opacity: style.backgroundOpacity === undefined ? 1 : style.backgroundOpacity
+      };
+    }
+
+    tagStyle.borderColor = formatBackgroundRgbaColor(prevStyle, borderCurrentColor);
+
+    if (element._layer != 'rectangle') {
+      element.s('group.border.color', tagStyle.borderColor);
+    } else {
+      element.s('shape.border.color', tagStyle.borderColor);
+    }
+  }
+
+  if ('backgroundColor' in style || 'backgroundOpacity' in style) {
+    var backStyle = {
+      backgroundColor: elementStyles.backgroundColor ? elementStyles.backgroundColor : 'rgba(255,255,255,1)',
+      backgroundOpacity: elementStyles.backgroundOpacity ? elementStyles.backgroundOpacity : 1
+    };
+    var backCurrentColor = {};
+
+    if ('backgroundColor' in style) {
+      backCurrentColor = {
+        background: style.backgroundColor,
+        opacity: backStyle.backgroundOpacity === undefined ? 1 : backStyle.backgroundOpacity
+      };
+    } else {
+      backCurrentColor = {
+        background: backStyle.backgroundColor,
+        opacity: style.backgroundOpacity === undefined ? 1 : style.backgroundOpacity
+      };
+    }
+
+    tagStyle.background = formatBackgroundRgbaColor(backStyle, backCurrentColor);
+
+    if (element._layer != 'rectangle') {
+      element.s('group.background', tagStyle.background);
+    } else {
+      element.s('shape.background', tagStyle.background);
+    }
+  }
+
+  if ('width' in style) {
+    tagStyle.width = style.width;
+
+    if (element._layer != 'rectangle') {
+      element.s('group.border.width', tagStyle.width);
+    } else {
+      element.s('shape.border.width', tagStyle.width);
+    }
+  }
+
+  if ('pattern' in style) {
+    tagStyle.pattern = style.pattern;
+
+    if (element._layer != 'rectangle') {
+      element.s('group.border.pattern', tagStyle.pattern);
+    } else {
+      element.s('shape.border.pattern', tagStyle.pattern);
+    }
+  }
+}

package/es/core/editor/components/Toolbar/widgets/BoxBackgroundButton/BoxbackgroundSettings.module.scss

@@ -0,0 +1,82 @@
+@import "@alifd/next/variables";
+
+.content {
+    margin: 4px 0px 0px 6px;
+    color:$color-text1-4;
+   .fontColor{
+    width: 100%;
+    margin-bottom: 16px;
+    .colorPanelBox{
+      padding: 9px;
+      padding-top: 8px;
+    }
+    &>span{
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      line-height: 17px;
+     }
+     
+   }
+   .backgroundColor{
+    width: 100%;
+    height: 159px;
+    .colorPanelBox{
+      padding: 9px;
+      padding-top: 0px;
+    }
+    &>span{
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      line-height: 17px;
+     }
+     .backOpacity{
+      margin-top: 5px;
+      margin-bottom: 5px;
+      line-height: 8px;
+      display: flex;
+      flex-direction: row;
+      
+     }
+   }
+   .borderColor{
+    width: 100%;
+    height: 210px;
+    .colorPanelBox{
+      padding: 9px;
+      padding-top: 0px;
+    }
+    &>span{
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      line-height: 17px;
+     }
+     .borderWidth{
+      margin-top: 5px;
+      margin-bottom: 5px;
+      line-height: 8px;
+      display: flex;
+      flex-direction: row;
+     }
+     .backOpacity{
+      margin-top: 8px;
+      margin-bottom: 5px;
+      line-height: 8px;
+      display: flex;
+      flex-direction: row;
+      .backOpacityLable{
+        margin-left: 16px;
+        line-height: 22px;
+        margin-right: 5px;
+        color:$color-text1-6;
+      }
+      :global{
+        .next-number-picker-normal.next-small{
+          width: 45px;
+        }
+      }
+     }
+   }
+  }

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "10.0.10" === 'string' ? "10.0.10" : null;
+var version = typeof "10.0.12" === 'string' ? "10.0.12" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -15,6 +15,7 @@
     margin-right: 8px;
     width: 32px;
     text-align: right;
+    color:$color-text1-6;
   }
 
   :global {

package/lib/components/ColorPanel/index.js

@@ -92,7 +92,7 @@ function ColorPanel(props) {
   };
 
   (0, _react.useEffect)(function () {
-    if (value == undefined) return;
+    if (value === undefined) return;
     if (!value) return setActive('-1');
     var activeColor = value.hex ? (0, _color["default"])(value.hex).rgb() : (0, _color["default"])(value).rgb(); // eslint-disable-next-line no-unused-vars, array-callback-return