@riil-frontend/component-topology 2.4.1 → 2.4.5

package/es/components/ResourceList/ResourceSelect.js

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import useNextFormTable from '@ahooksjs/next-form-table';
 import useFilterPlugin from '@ahooksjs/use-filter-plugin';
 import useSortablePlugin from '@ahooksjs/use-sortable-plugin';
-import useSelectionPlugin from "../../plugins/useSelectionPlugin";
+import useSelectionPlugin from "../../common/plugins/useSelectionPlugin";
 import { fetchCommonQuery } from '@riil-frontend/component-topology-utils/es/services/cmdb';
 import { getTitleCell } from '@riil-frontend/component-topology-utils/es/utils/table';
 import { DICT } from '@riil-frontend/component-topology-utils/es/utils/storage';

package/es/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/es/core/components/TopoView/topoView.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import TopoContainer, { TopoEvent } from '@riil-frontend/component-topology-graph';
 import rlog from '@riil-frontend/component-topology-utils/es/utils/rlog';
 import useTopoEdit from "../../../hooks/useTopoEdit";
@@ -17,7 +18,7 @@ import styles from "./TopoView.module.scss";
 import Settings from "../../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,
@@ -209,7 +210,7 @@ var TopoView = function TopoView(props) {
     topoEditApi: topoEditApi,
     onEnterEdit: onEnterEdit
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles.viewPanel
+    className: classnames(styles.viewPanel, (_classnames = {}, _classnames[styles.viewPanelEditMode] = isEditMode, _classnames))
   }, /*#__PURE__*/React.createElement(TopoContainer, {
     debugId: topoApp.debugId,
     data: tData,

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

@@ -1,6 +1,6 @@
 .titlebar {
   display: flex;
-  padding: 12px 0;
+  padding: 16px;
 
   .left {
     flex: 1;
@@ -11,6 +11,10 @@
 
   }
 
+  &.titlebarEditMode {
+    padding: 10px 16px;
+  }
+
 }
 
 .title {
@@ -28,12 +32,4 @@
 
 .moreMenuButton {
   margin-left: 8px;
-  width: 28px;
-  height: 28px;
-
-  :global {
-    .next-menu-btn-arrow {
-      display: none;
-    }
-  }
 }

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

@@ -5,7 +5,8 @@
   top: 0;
   right: 0;
   border-radius: 2px;
-  border: 1px solid #E6E7EB;
+  //border: 1px solid #E6E7EB;
+  //border-left: none;
 
   display: flex;
   flex-direction: column;
@@ -36,6 +37,7 @@
       background: none;
       font-size: 12px;
       padding-bottom: 0;
+      padding-left: 32px;
     }
     .next-collapse-panel-content {
       padding-left: 32px;

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

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

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

@@ -1,53 +1,102 @@
-import _NumberPicker from "@alifd/next/lib/number-picker";
-import _Field from "@alifd/next/lib/field";
+import _extends from "@babel/runtime/helpers/extends";
 import _Grid from "@alifd/next/lib/grid";
 import _Form from "@alifd/next/lib/form";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState } from 'react';
+import NodeSizeNumberPicker from "./NodeSizeNumberPicker";
+import styles from "./NodeSizeInput.module.scss";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ */
+
 export default function NodeSizeInput(props) {
   var value = props.value,
-      _onChange = props.onChange;
+      onChange = props.onChange;
+
+  var _useState = useState(false),
+      lock = _useState[0],
+      setLock = _useState[1];
+
+  var handleValue = function handleValue(val) {
+    if (!val || val < 1) {
+      return 1;
+    }
 
-  var field = _Field.useField({
-    autoUnmount: false,
-    values: value,
-    onChange: function onChange(name, value) {
-      _onChange(field.getValues());
+    if (val > 2000) {
+      return 2000;
     }
-  });
 
-  useEffect(function () {
-    field.setValues(value);
-  }, [value]);
+    return parseInt(val);
+  };
+
+  var handleChange = function handleChange(name, attrValue) {
+    var _extends2;
+
+    var newSize = _extends({}, 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);
+      }
+    }
+
+    console.error(111, newSize);
+    onChange(newSize);
+  };
+
   return /*#__PURE__*/React.createElement(_Form, {
-    field: field,
     labelAlign: "top",
     component: "div"
   }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(Row, {
-    gutter: "16"
+    gutter: "0"
   }, /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(FormItem, {
     required: true,
     requiredTrigger: "onBlur"
-  }, /*#__PURE__*/React.createElement(_NumberPicker, {
-    name: "width",
+  }, /*#__PURE__*/React.createElement(NodeSizeNumberPicker, {
+    value: parseInt(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.createElement("div", {
+    className: styles.lockBtn,
+    onClick: function onClick() {
+      setLock(!lock);
     }
-  }))), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(FormItem, {
+  }, lock ? /*#__PURE__*/React.createElement("img", {
+    src: require("./img/icon_\u89E3\u9501.svg"),
+    title: "\u89E3\u9501",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: require("./img/icon_\u9501.svg"),
+    title: "\u9501\u5B9A",
+    alt: ""
+  })), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(FormItem, {
     required: true,
     requiredTrigger: "onBlur"
-  }, /*#__PURE__*/React.createElement(_NumberPicker, {
-    name: "height",
+  }, /*#__PURE__*/React.createElement(NodeSizeNumberPicker, {
+    value: parseInt(value.height),
+    label: "\u9AD8:",
     min: 1,
     max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'
+    },
+    onChange: function onChange(val) {
+      return handleChange('height', val);
     }
   }))))));
 }

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

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

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

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

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

@@ -0,0 +1,73 @@
+import _NumberPicker from "@alifd/next/lib/number-picker";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "onChange", "min", "onBlur", "onKeyDown"];
+import React, { useState, useEffect } from 'react';
+
+/**
+ * 节点大小组件
+ *
+ * 文本框失去焦点、按enter键、点击加减按钮时节点大小变化
+ * 最大最小值限制
+ */
+export default function NodeSizeNumberPicker(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      min = props.min,
+      onBlur = props.onBlur,
+      onKeyDown = props.onKeyDown,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useState = useState(value),
+      inputValue = _useState[0],
+      setInputValue = _useState[1];
+
+  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.createElement(_NumberPicker, _extends({}, otherProps, {
+    value: inputValue,
+    min: min,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  }));
+}
+;

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

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

package/es/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/es/core/editor/components/settings/group/GroupNodeList/icon.js

@@ -18,12 +18,24 @@ export function getIconMap(topo) {
  *
  * @param topo
  * @param type {'node' | 'container'}
- * @return {{label: string, icons: *[]}[]}
+ * @return {{name: string, icons: *[]}[]}
  */
 
 export function getIconGroups(topo, type) {
   return [{
-    label: '默认',
+    name: '默认',
+    icons: [].concat(DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
+export function getNodeIconGroups(topo, type) {
+  return [{
+    name: '默认',
+    icons: [].concat(DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
+export function getGroupIconGroups(topo, type) {
+  return [{
+    name: '默认',
     icons: [].concat(DEFAULT_NODE_ICONS, topo.options.icons || [])
   }];
 }

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

@@ -1,8 +1,6 @@
-import _Avatar from "@alifd/next/lib/avatar";
-import _Select from "@alifd/next/lib/select";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { getIconGroups, getIconMap } from "../group/GroupNodeList/icon";
-var Option = _Select.Option;
+import React from 'react';
+import { getIconGroups } from "../group/GroupNodeList/icon";
+import IconSelect from '@riil-frontend/component-topo-icon-select';
 export default function NodeIconSelect(props) {
   var value = props.value,
       onChange = props.onChange,
@@ -17,26 +15,13 @@ export default function NodeIconSelect(props) {
     newId = a[0].id;
   }
 
-  return /*#__PURE__*/React.createElement(_Select, {
+  return /*#__PURE__*/React.createElement(IconSelect, {
     value: newId,
+    iconList: iconGroups,
     onChange: onChange,
     style: {
       width: '100%'
     }
-  }, iconGroups.map(function (group) {
-    return /*#__PURE__*/React.createElement(_Select.OptionGroup, {
-      label: group.label,
-      key: group.label
-    }, group.icons.map(function (icon) {
-      return /*#__PURE__*/React.createElement(Option, {
-        key: icon.id,
-        value: icon.id
-      }, /*#__PURE__*/React.createElement(_Avatar, {
-        src: icon.url,
-        shape: "square",
-        size: "small"
-      }), "\xA0", icon.name);
-    }));
-  }));
+  });
 }
 ;

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

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

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

@@ -0,0 +1,31 @@
+import _Avatar from "@alifd/next/lib/avatar";
+import _Select from "@alifd/next/lib/select";
+import React from 'react';
+var Option = _Select.Option;
+export default function NodeIconSelect(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      iconList = props.iconList;
+  return /*#__PURE__*/React.createElement(_Select, {
+    value: value,
+    onChange: onChange,
+    style: {
+      width: '100%'
+    }
+  }, iconList.map(function (group) {
+    return /*#__PURE__*/React.createElement(_Select.OptionGroup, {
+      label: group.name,
+      key: group.name
+    }, group.icons.map(function (icon) {
+      return /*#__PURE__*/React.createElement(Option, {
+        key: icon.id,
+        value: icon.id
+      }, /*#__PURE__*/React.createElement(_Avatar, {
+        src: icon.url,
+        shape: "square",
+        size: "small"
+      }), "\xA0", icon.name);
+    }));
+  }));
+}
+;

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

@@ -52,11 +52,7 @@ export default function TextPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 8
-    }
-  }, /*#__PURE__*/React.createElement(_Form, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Form, {
     field: field,
     labelAlign: "top"
   }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {

package/es/core/editor/components/titlebar/TopoEditorTitleBar.js

@@ -1,12 +1,13 @@
 import _Button from "@alifd/next/lib/button";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
 import TitleWidget from "../../../components/titlebar/widgets/TitleWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
 export default function TopoEditorTitleBar(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.titlebar
+    className: classnames(styles.titlebar, styles.titlebarEditMode)
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.left
   }, /*#__PURE__*/React.createElement(TitleWidget, {

package/es/core/models/TopoApp.js

@@ -599,17 +599,31 @@ var TopoApp = /*#__PURE__*/function () {
     }
 
     return save;
-  }();
+  }()
+  /**
+   * 导出为图片
+   *
+   * @param name {string?} 文件名称，不传使用默认
+   */
+  ;
 
-  _proto.exportImage = /*#__PURE__*/function () {
-    var _exportImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+  _proto.exportImage =
+  /*#__PURE__*/
+  function () {
+    var _exportImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15(name) {
+      var fileName;
       return _regeneratorRuntime.wrap(function _callee15$(_context15) {
         while (1) {
           switch (_context15.prev = _context15.next) {
             case 0:
-              this.view.topoClient.exportImage();
+              fileName = name;
 
-            case 1:
+              if (!name) {// TODO 获取拓扑名称，避免改名重绘拓扑图
+              }
+
+              this.view.topoClient.exportImage(fileName);
+
+            case 3:
             case "end":
               return _context15.stop();
           }
@@ -617,7 +631,7 @@ var TopoApp = /*#__PURE__*/function () {
       }, _callee15, this);
     }));
 
-    function exportImage() {
+    function exportImage(_x9) {
       return _exportImage.apply(this, arguments);
     }
 
@@ -652,7 +666,7 @@ var TopoApp = /*#__PURE__*/function () {
       }, _callee16, this);
     }));
 
-    function loadAttrsAndMetrics(_x9) {
+    function loadAttrsAndMetrics(_x10) {
       return _loadAttrsAndMetrics.apply(this, arguments);
     }
 

package/es/models/topoMod.d.ts

@@ -49,6 +49,7 @@ export default function _default(topoApp: any): {
             mode: string | null;
             viewState: string | null;
         }, rootState: any): Promise<void>;
+        clearData(): void;
         switchToViewMode(playload: any, rootState: any): void;
         enterEditMode(playload: any, rootState: any): void;
         openDefaultTopoPage(conditions: {}, rootState: any): Promise<void>;

package/es/models/topoMod.js

@@ -141,10 +141,7 @@ export default function (topoApp) {
                     id = playload.id, data = playload.data, linkTo = playload.linkTo;
                     viewState = playload.mode || playload.viewState || 'view';
                     topoId = id || data.config.id;
-                    _context2.next = 5;
-                    return topoApp.open(topoId);
 
-                  case 5:
                     _this2.update({
                       viewState: viewState,
                       currentTopo: playload,
@@ -152,6 +149,10 @@ export default function (topoApp) {
                       topoPermission: undefined
                     });
 
+                    _context2.next = 6;
+                    return topoApp.open(topoId);
+
+                  case 6:
                     _context2.next = 8;
                     return _this2.initTopoData({
                       topoId: topoId,
@@ -173,6 +174,11 @@ export default function (topoApp) {
             }, _callee2);
           }))();
         },
+        clearData: function clearData() {
+          this.update({
+            topoData: null
+          });
+        },
         switchToViewMode: function switchToViewMode(playload, rootState) {
           this.update({
             viewState: 'view'

package/es/style.js

@@ -26,6 +26,6 @@ import '@alifd/next/lib/radio/style';
 import '@alifd/next/lib/collapse/style';
 import '@alifd/next/lib/list/style';
 import '@alifd/next/lib/tree-select/style';
-import '@alifd/next/lib/avatar/style';
+
 
 import './index.scss';

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/es/topoCenter/store/topoTreeMod.d.ts

@@ -55,7 +55,6 @@ export default function _default(topoApp: any): {
         fetchTopoTree(payload: any, rootState: any): Promise<void>;
         getSelectedTopoId(payload: any, rootState: any): any;
         refreshTree(payload: any, rootState: any): Promise<void>;
-        addNewTopo(params: {}, state: any): Promise<void>;
         editTopoOnTree(conditions: {}, state: any): Promise<void>;
         /**
          * 节指定的点和子节点是否包含指定的拓扑