@riil-frontend/component-topology 2.4.2 → 2.4.6

package/es/topoCenter/store/topoCenter.js

@@ -189,10 +189,23 @@ export default {
                     viewState: viewState || 'view'
                   });
 
-                  _context4.next = 5;
+                  if (!id) {
+                    _context4.next = 8;
+                    break;
+                  }
+
+                  _context4.next = 6;
                   return dispatch.topoMod.openTopoPage(playload);
 
-                case 5:
+                case 6:
+                  _context4.next = 10;
+                  break;
+
+                case 8:
+                  _context4.next = 10;
+                  return dispatch.topoMod.clearData();
+
+                case 10:
                 case "end":
                   return _context4.stop();
               }

package/lib/components/ResourceList/ResourceSelect.js

@@ -21,7 +21,7 @@ var _useFilterPlugin = _interopRequireDefault(require("@ahooksjs/use-filter-plug
 
 var _useSortablePlugin = _interopRequireDefault(require("@ahooksjs/use-sortable-plugin"));
 
-var _useSelectionPlugin = _interopRequireDefault(require("../../plugins/useSelectionPlugin"));
+var _useSelectionPlugin = _interopRequireDefault(require("../../common/plugins/useSelectionPlugin"));
 
 var _cmdb = require("@riil-frontend/component-topology-utils/es/services/cmdb");
 

package/lib/core/components/TopoView/TopoView.module.scss

@@ -10,6 +10,10 @@
   flex: 1;
   overflow: hidden;
   position: relative;
+
+  &.viewPanelEditMode {
+    border-top: 1px solid #E6E7EB;
+  }
 }
 
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题

package/lib/core/components/TopoView/topoView.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
 var _componentTopologyGraph = _interopRequireWildcard(require("@riil-frontend/component-topology-graph"));
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/utils/rlog"));
@@ -42,7 +44,7 @@ var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 var _Settings = _interopRequireDefault(require("../../editor/components/settings/Settings"));
 
 var TopoView = function TopoView(props) {
-  var _topoApp$options$edit;
+  var _classnames, _topoApp$options$edit;
 
   var engine = props.engine,
       topo = props.topo,
@@ -243,7 +245,7 @@ var TopoView = function TopoView(props) {
     topoEditApi: topoEditApi,
     onEnterEdit: onEnterEdit
   })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TopoViewModule["default"].viewPanel
+    className: (0, _classnames2["default"])(_TopoViewModule["default"].viewPanel, (_classnames = {}, _classnames[_TopoViewModule["default"].viewPanelEditMode] = isEditMode, _classnames))
   }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], {
     debugId: topoApp.debugId,
     data: tData,

package/lib/core/components/titlebar/TitleBar.module.scss

@@ -1,6 +1,6 @@
 .titlebar {
   display: flex;
-  padding: 12px 16px;
+  padding: 16px;
 
   .left {
     flex: 1;
@@ -13,8 +13,6 @@
 
   &.titlebarEditMode {
     padding: 10px 16px;
-    box-shadow: 0px -1px 0px 0px #EBE8E8;
-    border-bottom: 1px solid #E6E7EB;
   }
 
 }
@@ -34,12 +32,4 @@
 
 .moreMenuButton {
   margin-left: 8px;
-  width: 28px;
-  height: 28px;
-
-  :global {
-    .next-menu-btn-arrow {
-      display: none;
-    }
-  }
 }

package/lib/core/editor/components/settings/Settings.module.scss

@@ -37,6 +37,7 @@
       background: none;
       font-size: 12px;
       padding-bottom: 0;
+      padding-left: 32px;
     }
     .next-collapse-panel-content {
       padding-left: 32px;

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.d.ts

@@ -1 +1,12 @@
-export default function NodeSizeInput(props: any): JSX.Element;
+export default NodeSizeInput;
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ */
+declare function NodeSizeInput(props: any): JSX.Element;
+declare namespace NodeSizeInput {
+    export namespace propTypes {
+        export const value: any;
+    }
+}

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.js

@@ -5,11 +5,9 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = NodeSizeInput;
+exports["default"] = void 0;
 
-var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
-
-var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
 
@@ -17,54 +15,115 @@ var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _NodeSizeNumberPicker = _interopRequireDefault(require("./NodeSizeNumberPicker"));
+
+var _NodeSizeInputModule = _interopRequireDefault(require("./NodeSizeInput.module.scss"));
+
 var FormItem = _form["default"].Item;
 var Row = _grid["default"].Row,
     Col = _grid["default"].Col;
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ */
 
 function NodeSizeInput(props) {
   var value = props.value,
-      _onChange = props.onChange;
+      onChange = props.onChange;
 
-  var field = _field["default"].useField({
-    autoUnmount: false,
-    values: value,
-    onChange: function onChange(name, value) {
-      _onChange(field.getValues());
+  var _useState = (0, _react.useState)(false),
+      lock = _useState[0],
+      setLock = _useState[1];
+
+  var handleValue = function handleValue(val) {
+    if (!val || val < 1) {
+      return 1;
+    }
+
+    if (val > 2000) {
+      return 2000;
     }
-  });
 
-  (0, _react.useEffect)(function () {
-    field.setValues(value);
-  }, [value]);
+    return parseInt(val);
+  };
+
+  var handleChange = function handleChange(name, attrValue) {
+    var _extends2;
+
+    var newSize = (0, _extends3["default"])({}, value, (_extends2 = {}, _extends2[name] = attrValue, _extends2));
+
+    if (lock) {
+      if (name === 'width') {
+        newSize.height = handleValue(value.height / value.width * attrValue);
+      } else {
+        newSize.width = handleValue(value.width / value.height * attrValue);
+      }
+    }
+
+    onChange(newSize);
+  };
+
+  function parseValue(val) {
+    return val ? parseInt(val) : val;
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
-    field: field,
     labelAlign: "top",
     component: "div"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(Row, {
-    gutter: "16"
+    gutter: "0"
   }, /*#__PURE__*/_react["default"].createElement(Col, null, /*#__PURE__*/_react["default"].createElement(FormItem, {
     required: true,
     requiredTrigger: "onBlur"
-  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
-    name: "width",
+  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeNumberPicker["default"], {
+    value: parseValue(value.width),
+    label: "\u5BBD:",
     min: 1,
     max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'
+    },
+    onChange: function onChange(val) {
+      return handleChange('width', val);
+    }
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _NodeSizeInputModule["default"].lockBtn,
+    onClick: function onClick() {
+      setLock(!lock);
     }
-  }))), /*#__PURE__*/_react["default"].createElement(Col, null, /*#__PURE__*/_react["default"].createElement(FormItem, {
+  }, lock ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: require("./img/icon_\u89E3\u9501.svg"),
+    title: "\u89E3\u9501",
+    alt: ""
+  }) : /*#__PURE__*/_react["default"].createElement("img", {
+    src: require("./img/icon_\u9501.svg"),
+    title: "\u9501\u5B9A",
+    alt: ""
+  })), /*#__PURE__*/_react["default"].createElement(Col, null, /*#__PURE__*/_react["default"].createElement(FormItem, {
     required: true,
     requiredTrigger: "onBlur"
-  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
-    name: "height",
+  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeNumberPicker["default"], {
+    value: parseValue(value.height),
+    label: "\u9AD8:",
     min: 1,
     max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'
+    },
+    onChange: function onChange(val) {
+      return handleChange('height', val);
     }
   }))))));
 }
 
-;
+;
+NodeSizeInput.propTypes = {
+  value: _propTypes["default"].object
+};
+var _default = NodeSizeInput;
+exports["default"] = _default;

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.module.scss

@@ -0,0 +1,5 @@
+.lockBtn {
+  height: 28px;
+  margin: 6px 10px 0 10px;
+  cursor: pointer;
+}

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeNumberPicker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ * 最大最小值限制
+ */
+export default function NodeSizeNumberPicker(props: any): JSX.Element;

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeNumberPicker.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = NodeSizeNumberPicker;
+
+var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _excluded = ["value", "onChange", "min", "onBlur", "onKeyDown"];
+
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ * 最大最小值限制
+ */
+function NodeSizeNumberPicker(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      min = props.min,
+      onBlur = props.onBlur,
+      onKeyDown = props.onKeyDown,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+
+  var _useState = (0, _react.useState)(value),
+      inputValue = _useState[0],
+      setInputValue = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    setInputValue(value);
+  }, [value]);
+
+  var handleBlur = function handleBlur(e) {
+    if (inputValue !== value) {
+      onChange(inputValue);
+    }
+
+    onBlur && onBlur(e);
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === 13 || e.keyCode === 27) {
+      if (inputValue !== value) {
+        onChange(inputValue);
+      }
+    }
+
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  };
+
+  var handleChange = function handleChange(value, e) {
+    // 失去焦点最大最小值
+    if (e.type === 'blur') {
+      onChange(!value ? min : value);
+      return;
+    } // 加减号立即变更
+
+
+    if (e.triggerType === 'up' || e.triggerType === 'down') {
+      onChange(value);
+      return;
+    }
+
+    setInputValue(value);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], (0, _extends2["default"])({}, otherProps, {
+    value: inputValue,
+    min: min,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  }));
+}
+
+;

package/lib/core/editor/components/settings/common/text/TextStyle.js

@@ -116,7 +116,7 @@ function TextStyle(props) {
   }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
     name: "fontSize",
     min: 8,
-    max: 36,
+    max: 100,
     style: {
       width: '100%',
       marginRight: 8

package/lib/core/editor/components/settings/group/GroupNodeList/icon.d.ts

@@ -70,10 +70,18 @@ export function getIconMap(topo: any): {
  *
  * @param topo
  * @param type {'node' | 'container'}
- * @return {{label: string, icons: *[]}[]}
+ * @return {{name: string, icons: *[]}[]}
  */
 export function getIconGroups(topo: any, type: 'node' | 'container'): {
-    label: string;
+    name: string;
+    icons: any[];
+}[];
+export function getNodeIconGroups(topo: any, type: any): {
+    name: string;
+    icons: any[];
+}[];
+export function getGroupIconGroups(topo: any, type: any): {
+    name: string;
     icons: any[];
 }[];
 export function getIconById(id: any, topo: any): any;

package/lib/core/editor/components/settings/group/GroupNodeList/icon.js

@@ -5,9 +5,11 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.getGroupIconGroups = getGroupIconGroups;
 exports.getIconById = getIconById;
 exports.getIconGroups = getIconGroups;
 exports.getIconMap = getIconMap;
+exports.getNodeIconGroups = getNodeIconGroups;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -30,13 +32,27 @@ function getIconMap(topo) {
  *
  * @param topo
  * @param type {'node' | 'container'}
- * @return {{label: string, icons: *[]}[]}
+ * @return {{name: string, icons: *[]}[]}
  */
 
 
 function getIconGroups(topo, type) {
   return [{
-    label: '默认',
+    name: '默认',
+    icons: [].concat(_defaultIcons.DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
+
+function getNodeIconGroups(topo, type) {
+  return [{
+    name: '默认',
+    icons: [].concat(_defaultIcons.DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
+
+function getGroupIconGroups(topo, type) {
+  return [{
+    name: '默认',
     icons: [].concat(_defaultIcons.DEFAULT_NODE_ICONS, topo.options.icons || [])
   }];
 }

package/lib/core/editor/components/settings/node/NodeIconSelect.js

@@ -1,21 +1,15 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports["default"] = NodeIconSelect;
 
-var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
-
-var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _icon = require("../group/GroupNodeList/icon");
 
-var Option = _select["default"].Option;
+var _componentTopoIconSelect = _interopRequireDefault(require("@riil-frontend/component-topo-icon-select"));
 
 function NodeIconSelect(props) {
   var value = props.value,
@@ -31,27 +25,14 @@ function NodeIconSelect(props) {
     newId = a[0].id;
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_select["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_componentTopoIconSelect["default"], {
     value: newId,
+    iconList: iconGroups,
     onChange: onChange,
     style: {
       width: '100%'
     }
-  }, iconGroups.map(function (group) {
-    return /*#__PURE__*/_react["default"].createElement(_select["default"].OptionGroup, {
-      label: group.label,
-      key: group.label
-    }, group.icons.map(function (icon) {
-      return /*#__PURE__*/_react["default"].createElement(Option, {
-        key: icon.id,
-        value: icon.id
-      }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
-        src: icon.url,
-        shape: "square",
-        size: "small"
-      }), "\xA0", icon.name);
-    }));
-  }));
+  });
 }
 
 ;

package/lib/core/editor/components/settings/node/NodeIconSelectTest.d.ts

@@ -0,0 +1 @@
+export default function NodeIconSelect(props: any): JSX.Element;

package/lib/core/editor/components/settings/node/NodeIconSelectTest.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = NodeIconSelect;
+
+var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
+
+var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Option = _select["default"].Option;
+
+function NodeIconSelect(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      iconList = props.iconList;
+  return /*#__PURE__*/_react["default"].createElement(_select["default"], {
+    value: value,
+    onChange: onChange,
+    style: {
+      width: '100%'
+    }
+  }, iconList.map(function (group) {
+    return /*#__PURE__*/_react["default"].createElement(_select["default"].OptionGroup, {
+      label: group.name,
+      key: group.name
+    }, group.icons.map(function (icon) {
+      return /*#__PURE__*/_react["default"].createElement(Option, {
+        key: icon.id,
+        value: icon.id
+      }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
+        src: icon.url,
+        shape: "square",
+        size: "small"
+      }), "\xA0", icon.name);
+    }));
+  }));
+}
+
+;

package/lib/core/editor/components/settings/node/NodePropertyView.js

@@ -11,28 +11,18 @@ var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
 
 var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
 
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
-
 var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
 var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
 
-var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
-
-var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _ColorPicker = _interopRequireDefault(require("../../LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
-
-var _ResourceSelectButton = _interopRequireDefault(require("../group/GroupNodeList/ResourceSelectButton"));
-
-var _icon = require("../group/GroupNodeList/icon");
-
 var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
 
 var _textModule = _interopRequireDefault(require("../../../../common/text.module.scss"));
@@ -43,12 +33,8 @@ var _NodeIconSelect = _interopRequireDefault(require("./NodeIconSelect"));
 
 var _NodeRelateResourceButton = _interopRequireDefault(require("./NodeRelateResourceButton"));
 
-var FormItem = _form["default"].Item;
-var Row = _grid["default"].Row,
-    Col = _grid["default"].Col;
 var Option = _select["default"].Option;
 var CollapsePanel = _collapse["default"].Panel;
-var RadioGroup = _radio["default"].Group;
 
 function parseValues(values) {
   return (0, _extends2["default"])({}, values);

package/lib/core/editor/components/settings/text/TextPropertyView.js

@@ -68,11 +68,7 @@ function TextPropertyView(props) {
   (0, _react.useEffect)(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      paddingTop: 8
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_form["default"], {
     field: field,
     labelAlign: "top"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {

package/lib/core/editor/components/settings/view/BatchSetNodeSize.d.ts

@@ -0,0 +1 @@
+export default function BatchSetNodeSize(props: any): JSX.Element;

package/lib/core/editor/components/settings/view/BatchSetNodeSize.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = BatchSetNodeSize;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NodeSizeInput = _interopRequireDefault(require("../common/NodeSizeInput/NodeSizeInput"));
+
+function BatchSetNodeSize(props) {
+  return /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
+    value: {}
+  });
+}
+
+;