@riil-frontend/component-topology 6.0.0-alpha.30 → 6.0.0-alpha.31

package/es/core/editor/components/settings/CloseablePanel.js

@@ -1,13 +1,16 @@
 import _ConfigProvider from "@alifd/next/es/config-provider";
 import _Icon from "@alifd/next/es/icon";
 import React from 'react';
+import styles from "./CloseablePanel.module.scss";
 
 function CloseablePanel(props) {
   var prefix = props.prefix,
       title = props.title,
       onClose = props.onClose,
       children = props.children;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.panel
+  }, /*#__PURE__*/React.createElement("div", {
     className: prefix + "drawer-header",
     role: "heading",
     "aria-level": "1"
@@ -19,7 +22,9 @@ function CloseablePanel(props) {
   }, /*#__PURE__*/React.createElement(_Icon, {
     type: "close",
     className: "next-drawer-close-icon"
-  }))), /*#__PURE__*/React.createElement("div", null, children));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.body
+  }, children));
 }
 
 CloseablePanel.defaultProps = {

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

@@ -0,0 +1,9 @@
+.panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+}
+.body {
+  flex: 1;
+}

package/es/core/editor/components/settings/PropertyView.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
 import Settings from "./Settings";
-import styles from "./Settings.module.scss";
 import OpenPropertyPanelListener from "./OpenPropertyPanelListener";
 import CloseablePanel from "./CloseablePanel";
+import styles from "./Settings.module.scss";
 export default function PropertyView(props) {
   var _classNames;
 
@@ -28,10 +28,6 @@ export default function PropertyView(props) {
   }
 
   var renderContent = function renderContent() {
-    if (!graphLoaded) {
-      return null;
-    }
-
     return /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
       topo: topo
     }, /*#__PURE__*/React.createElement(Settings, {
@@ -52,5 +48,5 @@ export default function PropertyView(props) {
         propertyPanelVisible: false
       });
     }
-  }), renderContent());
+  }, renderContent()));
 }

package/es/core/editor/components/settings/common/AlignSetting/index.js

@@ -13,8 +13,7 @@ export default function AlignSetting(props) {
       return !isLayer(ele) && !isEdge(ele);
     }); // console.info("element--selectList", element, selectList);
 
-    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes); // topo.view.topoClient.htTopoClient.setElementsSpace(nodes,'h',300)
-
+    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes);
     topo.historyManager.endTransaction();
   };
 

package/es/core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView.js

@@ -41,8 +41,10 @@ export default function CommonEdgePropertyView(props) {
   }, [values]);
 
   var setLineColor = function setLineColor(color) {
-    var style = edge.a("styles") || {};
+    // 同时修改实线、虚线
     edge.s("edge.color", color);
+    edge.s("edge.dash.color", color);
+    var style = edge.a("styles") || {};
     edge.a("styles", _extends({}, style, {
       color: color
     }));
@@ -93,6 +95,10 @@ export default function CommonEdgePropertyView(props) {
     style: {
       width: "100%"
     },
+    onChange: function onChange(val) {
+      // 同时修改实线、虚线的线宽
+      edge.s('edge.dash.width', val);
+    },
     onFocus: function onFocus() {
       topo.historyManager.beginTransaction();
     },

package/es/core/hooks/usePolling.js

@@ -61,11 +61,8 @@ var usePolling = function usePolling(props) {
 
 
   useEffect(function () {
-    var isViewer = topoState.viewState === 'view';
-
-    if (topo.options.enableDefaultMetricLoader && isViewer) {
+    if (topo.options.enableDefaultMetricLoader) {
       rlog.debug('usePolling.useEffect: 开始轮询', {
-        isViewer: isViewer,
         pollingSwitch: pollingSwitch,
         resIdsList: resIdsList,
         resourceOverviewState: resourceOverviewState,
@@ -80,7 +77,7 @@ var usePolling = function usePolling(props) {
         stopPoll();
       }
     };
-  }, [topoState.viewState, pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]);
+  }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]);
   /**
    * 
    * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标

package/es/core/models/AttributeMetricDisplay.js

@@ -650,7 +650,11 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     var htTopo = topo.getHtTopo();
 
     if (htTopo) {
+      var _topo$historyManager, _topo$historyManager2;
+
+      (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '加载标注');
       htTopo.loadTagAndTip(JSON.parse(JSON.stringify(elementTagsAndTips)));
+      (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '加载标注');
     }
   }
   /**

package/es/core/models/TopoApp.js

@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.30" === 'string' ? "6.0.0-alpha.30" : null;
+var version = typeof "6.0.0-alpha.31" === 'string' ? "6.0.0-alpha.31" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/utils/htElementUtils.js

@@ -50,6 +50,9 @@ export function isGroup(element) {
 export function isLayer(element) {
   return element instanceof ht.Grid;
 }
+export function isText(element) {
+  return element instanceof ht.Text && element.a('isText');
+}
 export function getElements(dataModel) {
   // console.error(111, dataModel.getDatas().getArray())
   return dataModel.getDatas().getArray();

package/lib/core/editor/components/EditorPlugin.js

@@ -17,13 +17,15 @@ var _MultipleResourceSelectPlugin = _interopRequireDefault(require("./plugins/Mu
 
 var _GroupAddResourceDrawerPlugin = _interopRequireDefault(require("./GroupAddResourceDrawerPlugin"));
 
+var _MetricPollingPlugin = _interopRequireDefault(require("../../viewer/components/plugins/MetricPollingPlugin"));
+
 function TopoEditorPlugin(props) {
   var topo = props.topo,
       topoContext = props.topoContext,
       topoEdit = props.topoEdit,
       editorProps = props.editorProps;
   var store = topo.store;
-  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _CustomIconPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _CustomIconPlugin["default"], _MetricPollingPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/_react["default"].createElement(Plugin, (0, _extends2["default"])({
       key: index,

package/lib/core/editor/components/Sidebar/Sidebar.js

@@ -42,7 +42,8 @@ function Sidebar(props) {
         resourceTabActiveKey: null
       });
     };
-  }, []);
+  }, []); // 通过url参数打开对应面板
+
   (0, _react.useEffect)(function () {
     var _topo$viewProps$urlPa;
 

package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -61,7 +61,7 @@ function CanvasPanel(props) {
     topo.historyManager.beginTransaction();
     displayConfigDispatchers.update({
       canvasTheme: theme
-    }); // 设置资源标注
+    }); // 设置资源/链路标注样式
 
     var _topo$store$getModelS = topo.store.getModelState('displayConfig'),
         nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle,
@@ -78,8 +78,7 @@ function CanvasPanel(props) {
     displayConfigDispatchers.update({
       nodeLabelStyle: globalNodeLabelStyle,
       defaultEdgeLabelStyle: globalEdgeTagStyle
-    }); // 设置链路标注
-
+    });
     topo.historyManager.endTransaction();
   };
 

package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js

@@ -36,6 +36,7 @@ function HtImagePalette(props) {
       viewRef.current = htTopo.createImagePalette(container, {
         icons: icons
       });
+      console.error(viewRef.current);
     } catch (error) {
       _rlog["default"].error('初始化资源面板失败', error);
     } // 注销组件

package/lib/core/editor/components/Toolbar/buttons.js

@@ -51,13 +51,14 @@ function getButtons(isNetworkTopo) {
   _FontSizeWidget["default"], // 字号
   _FontStyleButton["default"], // 文字样式
   _FontColorButton["default"], // 文字颜色
-  _Divider["default"], _BoxBackgroundButton["default"], // 框背景
-  _Divider["default"], _EdgeColorButton["default"], // 线条颜色
+  _Divider["default"], // BoxBackgroundButton, // 框背景
+  // Divider,
+  _EdgeColorButton["default"], // 线条颜色
   _EdgeTypeButton["default"], // 线形
   _Divider["default"], _NodeImageButton["default"], // 替换图片
   _NodeSizeButton["default"], // 图片尺寸
   _Divider["default"], _Layout["default"], // 布局方式
-  _NodeAlignWidget["default"], // 对齐方式
-  _SearchWidget["default"] // 搜索
+  _NodeAlignWidget["default"] // 对齐方式
+  // SearchWidget, // 搜索
   ]);
 }

package/lib/core/editor/components/Toolbar/hooks/useFontStyleSetting.js

@@ -23,21 +23,35 @@ function useFontStyleSetting(props) {
   var buttonEnabled = true; // 全局配置
 
   var _topo$store$useModel = topo.store.useModel('displayConfig'),
-      nodeLabelStyle = _topo$store$useModel[0].nodeLabelStyle,
+      displayConfigState = _topo$store$useModel[0],
       displayConfigDispatchers = _topo$store$useModel[1];
 
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+
+  var setGlobalTagStyle = function setGlobalTagStyle(styleData) {
+    var globalNodeLabelStyle = (0, _extends2["default"])({}, nodeLabelStyle, styleData);
+    topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+    var globalEdgeTagStyle = (0, _extends2["default"])({}, defaultEdgeLabelStyle, styleData);
+    topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
+    displayConfigDispatchers.update({
+      nodeLabelStyle: globalNodeLabelStyle,
+      defaultEdgeLabelStyle: globalEdgeTagStyle
+    });
+  };
+
   var setStyle = function setStyle(styleData) {
-    // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
+    topo.historyManager.beginTransaction(); // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
+
     if (!selectionElements.length) {
-      topo.getHtTopo().setGlobalNodeLabelStyle(styleData);
-      displayConfigDispatchers.update({
-        nodeLabelStyle: (0, _extends2["default"])({}, nodeLabelStyle, styleData)
-      });
+      setGlobalTagStyle(styleData);
     } else {
       selectionElements.forEach(function (element) {
         if ((0, _htElementUtils.isNode)(element)) {} else if ((0, _htElementUtils.isGroup)(element)) {} else if ((0, _htElementDataUtil.isText)(element)) {} else if ((0, _htElementUtils.isLayer)(element)) {}
       });
     }
+
+    topo.historyManager.endTransaction();
   };
 
   return {

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

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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"));
@@ -48,10 +50,16 @@ function EdgeColorButton(props) {
 
   var selection = topo.selectionManager.useHtSelection();
 
+  var loopEdges = function loopEdges(edges, operateEdgeFn) {
+    edges.forEach(function (edge) {
+      operateEdgeFn(edge);
+    });
+  };
+
   var getLines = function getLines(list) {
     // eslint-disable-next-line prefer-const
     var arr = [];
-    (0, _edgeTypeStyleUtil.loopEdgesAndChildren)(topo, list, function (edge) {
+    loopEdges(list, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
         arr.push(edge);
@@ -66,7 +74,7 @@ function EdgeColorButton(props) {
       var list = getLines(edges);
       setLineWidth(0); // eslint-disable-next-line eqeqeq
 
-      if (selection.length == 1 && selection[0].getAttrObject().type == 'line') {
+      if (selection.length == 1 && selection[0].a('type') == 'line') {
         setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
       }
 
@@ -74,14 +82,20 @@ function EdgeColorButton(props) {
     }
   }, [selection, graphLoaded]);
 
-  var colorOnChange = function colorOnChange(color, type) {
+  var colorOnChange = function colorOnChange(colors, type) {
     // eslint-disable-next-line eqeqeq
     if (type == 'select') topo.historyManager.beginTransaction();
     var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
-    (0, _edgeTypeStyleUtil.loopEdgesAndChildren)(topo, edges, function (edge) {
+    loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
-        edge.s('edge.color', color.hex);
+        var color = colors.hex;
+        edge.s('edge.color', color);
+        edge.s('edge.dash.color', color);
+        var style = edge.a('styles') || {};
+        edge.a('styles', (0, _extends2["default"])({}, style, {
+          color: color
+        }));
       }
     }); // eslint-disable-next-line eqeqeq
 
@@ -97,14 +111,21 @@ function EdgeColorButton(props) {
     topo.historyManager.endTransaction();
   };
 
-  var lineSizeChange = function lineSizeChange(value) {
+  var lineSizeChange = function lineSizeChange(width) {
     var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
-    (0, _edgeTypeStyleUtil.setEdgesAndChildren)(topo, edges, function (edge) {
+    topo.historyManager.beginTransaction();
+    loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
-        edge.s('edge.width', value); // 设置
+        edge.s('edge.dash.width', width);
+        edge.s('edge.width', width);
+        var style = edge.a('styles') || {};
+        edge.a('styles', (0, _extends2["default"])({}, style, {
+          width: width
+        }));
       }
     });
+    topo.historyManager.endTransaction();
   };
 
   var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -86,8 +86,23 @@ function EdgeTypeButton(props) {
         edge.s('icons', (0, _extends2["default"])({}, edge.s('icons')));
         edge.addStyleIcon(value, _constants.EDGE_END_POINT_TYPE_MAP[value]);
       } else if (name === 'lineMold') {
+        // 修改实线虚线
         edge.a('lineMode', value);
         htTopo.setElementStyle(edge, _constants.LINE_MOLD_MAP[value]);
+
+        if (value !== 'solid') {
+          var edgeWidth = edge.s('edge.width');
+
+          if (edgeWidth) {
+            edge.s('edge.dash.width', edgeWidth);
+          }
+
+          var color = edge.s('edge.color');
+
+          if (edgeWidth) {
+            edge.s('edge.dash.color', color);
+          }
+        }
       }
     });
   };

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

@@ -17,6 +17,8 @@ var _FontColorRange = _interopRequireDefault(require("../../../../../components/
 
 var _FontColorButtonModule = _interopRequireDefault(require("./FontColorButton.module.scss"));
 
+var _useFontStyleSetting = _interopRequireDefault(require("../hooks/useFontStyleSetting"));
+
 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; }
@@ -31,6 +33,9 @@ function FontFamilySelect(props) {
       disabled = _useState[0],
       setDisabled = _useState[1];
 
+  var fontStyleSetting = (0, _useFontStyleSetting["default"])({
+    topo: topo
+  });
   console.log(topo, 'topo这里需要处理颜色改变的事情');
 
   var backOpacityChange = function backOpacityChange(value) {

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

@@ -7,6 +7,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _htElementUtils = require("../../../../../utils/htElementUtils");
+
+var _fontStyleUtil = _interopRequireDefault(require("../../settings/common/text/fontStyleUtil"));
+
+var _useFontStyleSetting = _interopRequireDefault(require("../hooks/useFontStyleSetting"));
+
 var _DropdownMenu = _interopRequireDefault(require("./components/DropdownMenu"));
 
 var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
@@ -15,40 +21,37 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 FontFamilySelect(props) {
-  var value = props.value,
-      disabled = props.disabled,
-      onChange = props.onChange;
-  var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
-  var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/bold/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/bold/Normal.svg",
-    alt: ""
-  });
-  return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
-    value: value,
-    valueRender: function valueRender() {
-      return icon;
-    },
-    onChange: onChange
-  }, items.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
-      key: item
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        fontFamily: item
-      }
-    }, item));
-  }));
+var items = [{
+  key: 'bold',
+  label: '加粗',
+  icon: 'bold'
+}, {
+  key: 'italic',
+  label: '斜体',
+  icon: 'Italics'
+}, {
+  key: 'underline',
+  label: '下划线',
+  icon: 'Underline'
+}];
+
+function getTextFontStyle(textElement) {
+  var underline = textElement.s('text.decoration') === 'underline';
+
+  var fontStyle = _fontStyleUtil["default"].toMap(textElement.s('text.font'));
+
+  return {
+    underline: underline,
+    bold: fontStyle.bold,
+    italic: fontStyle.italic
+  };
 }
 
 function FontStyleButton(props) {
   var topo = props.topo,
       showLabel = props.showLabel;
 
-  var _useState = (0, _react.useState)('微软雅黑'),
+  var _useState = (0, _react.useState)(['bold']),
       value = _useState[0],
       setValue = _useState[1];
 
@@ -57,19 +60,71 @@ function FontStyleButton(props) {
       setDisabled = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionManager.useHtSelection();
+  var fontStyleSetting = (0, _useFontStyleSetting["default"])({
+    topo: topo
+  });
   (0, _react.useEffect)(function () {
     setDisabled(false);
+    var fontObj = {};
+
+    if (selection.length === 1) {
+      var element = selection[0];
+
+      if ((0, _htElementUtils.isText)(element)) {
+        fontObj = getTextFontStyle(element);
+      }
+    }
+
+    var newValue = Object.keys(fontObj).reduce(function (result, key) {
+      if (fontObj[key]) {
+        return [].concat(result, [key]);
+      }
+
+      return result;
+    }, []);
+    setValue(newValue);
   }, [selection]);
+  /**
+   * 
+   * @param {Array} selectedKeys 
+   */
+
+  var handleChange = function handleChange(selectedKeys) {
+    setValue(selectedKeys);
+    var style = {
+      fontBold: selectedKeys.includes('bold')
+    };
+    fontStyleSetting.setStyle(style);
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
     label: "\u6587\u5B57\u6837\u5F0F",
     tooltip: "\u6587\u5B57\u6837\u5F0F",
     showLabel: showLabel
-  }, /*#__PURE__*/_react["default"].createElement(FontFamilySelect, {
+  }, /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
     value: value,
-    disabled: disabled,
-    onChange: setValue
-  }));
+    valueRender: function valueRender() {
+      return /*#__PURE__*/_react["default"].createElement("img", {
+        src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
+        alt: ""
+      });
+    },
+    multiple: true,
+    onChange: handleChange
+  }, items.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"].Item, {
+      key: item.key
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: "/img/topo/editor/toolbar/" + item.icon + "/Normal.svg",
+      alt: ""
+    }), /*#__PURE__*/_react["default"].createElement("span", null, item.label)));
+  })));
 }
 
 var _default = FontStyleButton;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -70,27 +70,13 @@ function NodeAlignWidget(props) {
   };
 
   var leftInputChange = function leftInputChange(v) {
-    if (v * 1 < 0) {
-      setLeftInputVal(0);
-    } else if (v * 1 > 10000) {
-      setLeftInputVal(10000);
-    } else {
-      setLeftInputVal(v);
-    }
-
-    setSpace('v', leftInputVal);
+    setLeftInputVal(v);
+    setSpace('h', v);
   };
 
   var rightInputChange = function rightInputChange(v) {
-    if (v * 1 < 0) {
-      setRightInputVal(0);
-    } else if (v * 1 > 10000) {
-      setRightInputVal(10000);
-    } else {
-      setRightInputVal(v);
-    }
-
-    setSpace('h', rightInputVal);
+    setRightInputVal(v);
+    setSpace('v', v);
   };
 
   (0, _react.useEffect)(function () {
@@ -101,10 +87,17 @@ function NodeAlignWidget(props) {
       });
       setDisabled(nodes.length <= 1);
       getClickType('none');
+      setLeftInputVal();
+      setRightInputVal();
     }
   }, [graphLoaded, selection]);
 
   var getClickType = function getClickType(type) {
+    if (leftInputVal || rightInputVal) {
+      setLeftInputVal();
+      setRightInputVal();
+    }
+
     setLeftDisable(true);
     setRightDisable(true);
 
@@ -135,23 +128,25 @@ function NodeAlignWidget(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_AlignSetting["default"], {
     topo: topo,
     getClickType: getClickType
-  }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
     disabled: leftDisable,
     size: "small",
+    hasTrigger: false,
     placeholder: "\u591A\u4E2A\u503C",
     className: _NodeAlignWidgetModule["default"].leftInput,
     value: leftInputVal,
-    htmlType: "number",
-    maxLength: 5,
+    min: 0,
+    max: 10000,
     onChange: leftInputChange
-  }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
     disabled: rightDisable,
     size: "small",
+    hasTrigger: false,
     placeholder: "\u591A\u4E2A\u503C",
     className: _NodeAlignWidgetModule["default"].rightInput,
     value: rightInputVal,
-    htmlType: "number",
-    maxLength: 5,
+    min: 0,
+    max: 10000,
     onChange: rightInputChange
   }))));
 }