@riil-frontend/component-topology 6.0.0-alpha.9 → 6.0.1

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

@@ -5,35 +5,154 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _ArrowPopup = _interopRequireDefault(require("../components/ArrowPopup"));
+var _LayoutSettings = _interopRequireDefault(require("./components/LayoutSettings"));
 
 var _WidgetBox = _interopRequireDefault(require("../WidgetBox"));
 
-var _excluded = ["showLabel"];
+var _DropdownButton = _interopRequireDefault(require("../components/DropdownButton"));
+
+var _htElementDataUtil = require("../../../../../../utils/htElementDataUtil");
+
+var _excluded = ["topo", "showLabel"];
+
+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; }
 
 function Layout(props) {
-  var topo = props.topo;
-  return /*#__PURE__*/_react["default"].createElement(_ArrowPopup["default"], {
-    label: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-      type: "Topology_icon_zoomout",
-      size: "small"
+  var topo = props.topo,
+      topoShowType = props.topoShowType;
+
+  var _useState = (0, _react.useState)(),
+      layout = _useState[0],
+      setLayout = _useState[1]; // 选中的元素
+
+
+  var selectionElements = topo.selectionModel.useHtSelection();
+
+  var _topo$store$useModelS = topo.store.useModelState('selection'),
+      selection = _topo$store$useModelS.selection;
+
+  var setDisabled = function setDisabled(data) {
+    if (topoShowType == 'layers' && selection.length == 1 && !(0, _htElementDataUtil.isGroup)(selection[0])) {
+      return data != 'rectangle';
+    } else {
+      return data == 'rectangle';
+    }
+  };
+
+  var globalLayout = function globalLayout(data) {
+    var firstElement = selection[0];
+    var layouType = data.id === 'toward' ? "" + data.id + data.options.subId : data.id; // eslint-disable-next-line eqeqeq
+
+    if (topoShowType != 'layers' && selection.length == 0) {
+      topo.getHtTopo().layoutInTopo(layouType);
+    } // eslint-disable-next-line eqeqeq
+
+
+    if (topoShowType != 'layers' && selection.length == 1) {
+      topo.getHtTopo().layoutInContainer(layouType);
+    } // eslint-disable-next-line eqeqeq
+
+
+    if (firstElement && (0, _htElementDataUtil.isLayer)(firstElement)) {
+      topo.getHtTopo().layoutLayer(selectionElements[0]);
+    }
+  };
+
+  var layoutOnChange = function layoutOnChange(v) {
+    var _selection$;
+
+    topo.historyManager.beginTransaction();
+    setLayout(v); // eslint-disable-next-line eqeqeq
+
+    if (topoShowType != 'layers' && ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.className) != 'ht.Node' || topoShowType == 'partition' && selection.length == 1 || topoShowType == 'layers' && selection.length == 1) {
+      globalLayout(v);
+    }
+
+    topo.historyManager.endTransaction();
+  };
+
+  return (
+    /*#__PURE__*/
+    // <LayoutSettings size="xs" selection = {selection} topoShowType={topoShowType} layout={layout} onChange={layoutOnChange} />
+    _react["default"].createElement(_LayoutSettings["default"], {
+      size: "xs",
+      layout: layout,
+      onChange: layoutOnChange,
+      disabled: setDisabled
     })
-  }, /*#__PURE__*/_react["default"].createElement("div", null, "\u5E03\u5C40 ", /*#__PURE__*/_react["default"].createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/_react["default"].createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/_react["default"].createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/_react["default"].createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/_react["default"].createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/_react["default"].createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/_react["default"].createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/_react["default"].createElement("br", null)));
+  );
 }
 
 function LayoutWidget(props) {
-  var showLabel = props.showLabel,
-      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded); // eslint-disable-next-line no-undef
+
+  var store = topo.store; // 拓扑图是否加载
+
+  var topoState = store.useModelState('topoMod'); // 分层或分区时候选中的值，未选中length为0 配合下面的type属性一起使用，
+  // type为partition且selection.length>=0时可以点击布局， selection[0].className != 'ht.Node'
+  // type为auto且selection.length==0时可以点击布局 
+
+  var _topo$store$useModelS2 = topo.store.useModelState('selection'),
+      selection = _topo$store$useModelS2.selection;
+
+  var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
+
+  var disabled = (0, _react.useMemo)(function () {
+    return !isLayoutEnabled({
+      topoShowType: topoShowType,
+      selection: selection
+    });
+  }, [topoShowType, selection]);
+  var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/img/topo/editor/toolbar/layout/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/img/topo/editor/toolbar/layout/Normal.svg",
+    alt: ""
+  });
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
-    label: "\u5E03\u5C40",
-    showLabel: showLabel
-  }, /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"].ButtonBox, null, /*#__PURE__*/_react["default"].createElement(Layout, otherProps)));
+    label: "\u5E03\u5C40\u65B9\u5F0F",
+    tooltip: "\u5E03\u5C40\u65B9\u5F0F",
+    showLabel: showLabel,
+    disabled: disabled
+  }, /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
+    disabled: disabled,
+    trigger: icon
+  }, !disabled && /*#__PURE__*/_react["default"].createElement(Layout, (0, _extends2["default"])({
+    topo: topo,
+    topoShowType: topoShowType
+  }, otherProps))));
+}
+
+function isLayoutEnabled(props) {
+  var topoShowType = props.topoShowType,
+      selection = props.selection; // 选中单个区域/集群后，该按钮亮起
+
+  if (selection.length === 1 && (0, _htElementDataUtil.isGroup)(selection[0]) && selection[0].expanded) {
+    return true;
+  } // 分层拓扑选中任意分层时，布局按钮亮起
+
+
+  if (topoShowType === 'layers' && selection.length === 1 && (0, _htElementDataUtil.isLayer)(selection[0])) {
+    return true;
+  } // 空白拓扑未选中任何资源时，布局按钮亮起
+
+
+  if (topoShowType !== 'layers' && !selection.length) {
+    return true;
+  }
+
+  return false;
 }
 
 var _default = LayoutWidget;

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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -15,27 +15,18 @@ var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
 
 var _DropdownButton = _interopRequireDefault(require("./components/DropdownButton"));
 
+var _AlignSetting = _interopRequireDefault(require("../../settings/common/AlignSetting"));
+
+var _htElementUtils = require("../../../../../utils/htElementUtils");
+
+var _NodeAlignWidgetModule = _interopRequireDefault(require("./NodeAlignWidget.module.scss"));
+
 var _excluded = ["topo", "showLabel"];
 
 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; }
 
-function NodeAlignPopup(props) {
-  var topo = props.topo,
-      disabled = props.disabled;
-  var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Normal.svg",
-    alt: ""
-  });
-  return /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
-    trigger: icon
-  }, "\u5BF9\u9F50\u65B9\u5F0F");
-}
-
 function NodeAlignWidget(props) {
   var topo = props.topo,
       showLabel = props.showLabel,
@@ -43,21 +34,117 @@ function NodeAlignWidget(props) {
 
   var _useState = (0, _react.useState)(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
+
+  var _useState2 = (0, _react.useState)(),
+      leftInputVal = _useState2[0],
+      setLeftInputVal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      rightInputVal = _useState3[0],
+      setRightInputVal = _useState3[1];
+
+  var _useState4 = (0, _react.useState)(true),
+      distributionDisabled = _useState4[0],
+      setDistributionDisabled = _useState4[1]; // 拓扑图是否加载
+
 
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
+
+  var selection = topo.selectionModel.useHtSelection();
+
+  var setSpace = function setSpace(type, num) {
+    topo.historyManager.beginTransaction(); // eslint-disable-next-line no-shadow
+
+    var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (ele) {
+      return !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
+    });
+    topo.view.topoClient.htTopoClient.setElementsSpace(nodes, type, num);
+    topo.historyManager.endTransaction();
+  };
+
+  var leftInputChange = function leftInputChange(val) {
+    setLeftInputVal(val);
+    setSpace('h', val);
+  };
+
+  var rightInputChange = function rightInputChange(val) {
+    setRightInputVal(val);
+    setSpace('v', val);
+  };
+
+  var parseValue = function parseValue(v) {
+    return v * 1 > 0 ? Math.round(v) : '';
+  };
 
-  var selection = topo.selectionManager.useSelection();
   (0, _react.useEffect)(function () {
-    setDisabled(false);
-  }, [selection]);
+    if (graphLoaded) {
+      var selectionEle = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+      var nodes = selectionEle.filter(function (ele) {
+        return !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
+      });
+      setDisabled(nodes.length <= 1); // eslint-disable-next-line no-use-before-define
+
+      setLeftInputVal();
+      setRightInputVal();
+      setDistributionDisabled(nodes.length <= 2);
+
+      if (nodes.length === 2) {
+        var h = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'h')[0];
+        var v = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'v')[0];
+        setLeftInputVal(parseValue(h));
+        setRightInputVal(parseValue(v));
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [graphLoaded, selection]);
+  var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Normal.svg",
+    alt: ""
+  });
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
     showLabel: showLabel,
+    disabled: disabled,
     label: "\u5BF9\u9F50\u65B9\u5F0F",
     tooltip: "\u5BF9\u9F50\u65B9\u5F0F"
-  }, /*#__PURE__*/_react["default"].createElement(NodeAlignPopup, (0, _extends2["default"])({
+  }, /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
+    disabled: disabled,
+    trigger: icon
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      margin: '10px 7px 17px 7px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_AlignSetting["default"], {
+    topo: topo,
+    distributionDisabled: distributionDisabled
+  })), /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
+    disabled: disabled,
+    size: "small",
+    hasTrigger: false,
+    placeholder: distributionDisabled ? '' : '多个值',
+    className: _NodeAlignWidgetModule["default"].leftInput,
+    value: leftInputVal,
+    min: 0,
+    max: 10000,
+    onChange: leftInputChange
+  }), /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
     disabled: disabled,
-    selection: selection
-  }, otherProps)));
+    size: "small",
+    hasTrigger: false // eslint-disable-next-line no-nested-ternary
+    ,
+    placeholder: distributionDisabled ? '' : '多个值',
+    className: _NodeAlignWidgetModule["default"].rightInput,
+    value: rightInputVal,
+    min: 0,
+    max: 10000,
+    onChange: rightInputChange
+  }))));
 }
 
 var _default = NodeAlignWidget;

package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss

@@ -0,0 +1,33 @@
+.leftInput{
+  width: 106px !important;
+  margin: 0px 9px 10px 9px;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_normal.svg')no-repeat 5px center !important;
+      background-position: 81px center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_disable.svg')no-repeat 5px center !important;
+      background-position: 81px center !important;
+    }
+    .next-input.next-small input{
+      height: calc(30px - 1px * 2);
+    }
+  }
+}
+.rightInput{
+  width: 106px !important;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距 _normal.svg')no-repeat 5px center !important;
+      background-position: 82px center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距_disable.svg')no-repeat 5px center !important;
+      background-position: 82px center !important;
+    }
+    .next-input.next-small input{
+      height: calc(30px - 1px * 2);
+    }
+  }
+}

package/lib/core/editor/components/Toolbar/widgets/NodeImageButton/BoxBackgroundSetting.js

@@ -15,7 +15,7 @@ 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 BoxBackgroundSetting(props, ref) {
+function NodeImageList(props, ref) {
   var value = props.value,
       onChange = props.onChange,
       topo = props.topo;
@@ -28,5 +28,5 @@ function BoxBackgroundSetting(props, ref) {
   }));
 }
 
-var _default = BoxBackgroundSetting;
+var _default = NodeImageList;
 exports["default"] = _default;

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

@@ -9,6 +9,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _htElementUtils = require("../../../../../../utils/htElementUtils");
+
 var _DropdownButton = _interopRequireDefault(require("../components/DropdownButton"));
 
 var _WidgetBox = _interopRequireDefault(require("../WidgetBox"));
@@ -21,11 +23,20 @@ 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 isElementSetImageEnabled(element) {
+  if ((0, _htElementUtils.isGroup)(element)) {
+    return !element.isExpanded();
+  }
+
+  return (0, _htElementUtils.isNode)(element) && !(0, _htElementUtils.isText)(element) && element.a('type') !== 'box';
+}
 /**
  * 替换图片设置
  * @param {*} props
  * @returns
  */
+
+
 function NodeImageButton(props) {
   var topo = props.topo,
       showLabel = props.showLabel,
@@ -40,13 +51,13 @@ function NodeImageButton(props) {
       setImgVal = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useHtSelection();
   (0, _react.useEffect)(function () {
-    console.log("NodeImageButton-selection", selection);
+    var nodes = selection.filter(isElementSetImageEnabled);
 
-    if (selection && selection.length > 0) {
+    if (nodes.length > 0) {
       setDisabled(false);
-      setImgVal(selection[0].image);
+      setImgVal(nodes[0].getImage());
     } else {
       setDisabled(true);
     }
@@ -57,10 +68,12 @@ function NodeImageButton(props) {
     // const gv = topo.view.topoClient.getGraphView();
     //const element = topo.getSelectionModel().getFirstData();
 
-    var elements = topo.getSelectionModel();
+    var elements = selection;
     console.log("onChange-elements", elements);
-    elements.each(function (element) {
-      element.setImage(prop);
+    elements.forEach(function (element) {
+      if (isElementSetImageEnabled(element)) {
+        element.setImage(prop);
+      }
     }); // selection.map((element) => {
     //   element.setImage(prop);
     // });
@@ -78,6 +91,7 @@ function NodeImageButton(props) {
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
     label: "\u66FF\u6362\u56FE\u7247",
     tooltip: "\u66FF\u6362\u56FE\u7247",
+    disabled: disabled,
     showLabel: showLabel
   }, /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
     disabled: disabled,

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

@@ -17,7 +17,9 @@ var _useSettingRuntimeState = _interopRequireDefault(require("../../../settings/
 
 var _WidgetBox = _interopRequireDefault(require("../WidgetBox"));
 
-var _BoxBackgroundSetting = _interopRequireDefault(require("./BoxBackgroundSetting"));
+var _NodeSizeButtonModule = _interopRequireDefault(require("./NodeSizeButton.module.scss"));
+
+var _htElementUtils = require("../../../../../../utils/htElementUtils");
 
 var _excluded = ["topo", "showLabel"];
 
@@ -44,17 +46,26 @@ function NodeSizeButton(props) {
       setSize = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
   var settingRuntimeState = (0, _useSettingRuntimeState["default"])();
   (0, _react.useEffect)(function () {
-    if (selection && selection.length > 0) {
-      console.log("NodeSizeButton-selection", selection);
+    var elements = selection.map(function (item) {
+      return item.id;
+    }).map(function (id) {
+      return topo.getDataModel().getDataById(id);
+    });
+    var nodes = elements.filter(function (ele) {
+      return (0, _htElementUtils.isGroup)(ele) || (0, _htElementUtils.isNode)(ele);
+    });
+
+    if (nodes.length > 0) {
       setDisabled(false);
 
       if (selection.length === 1) {
+        var element = nodes[0];
         setSize({
-          width: selection[0].width,
-          height: selection[0].height
+          width: element.getWidth(),
+          height: element.getHeight()
         });
       }
     } else {
@@ -67,67 +78,62 @@ function NodeSizeButton(props) {
   }, [selection]);
 
   var _onChange = function onChange(prop) {
-    console.log("onChange-prop", prop);
     var name = prop.name,
         value = prop.value;
-    var gv = topo.view.topoClient.getGraphView();
     var element = topo.getSelectionModel().getFirstData();
 
-    if (name === "width") {
+    if (name === 'width') {
       element.setWidth(value);
-    } else if (name === "height") {
+    } else if (name === 'height') {
       element.setHeight(value);
     }
   };
 
   return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
     label: "\u56FE\u7247\u5C3A\u5BF8",
+    disabled: disabled,
     tooltip: "\u56FE\u7247\u5C3A\u5BF8",
     showLabel: showLabel
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      width: 136
-    }
+    className: _NodeSizeButtonModule["default"].toolbarNodeSizeSetting
   }, selection.length > 1 ? /*#__PURE__*/_react["default"].createElement(_BatchSetNodeSize["default"], {
-    topo: topo,
-    size: "small",
+    topo: topo // size="small"
+    ,
     value: size,
     disabled: disabled,
     showLabel: false,
-    hasTrigger: false,
-    onChange: function onChange(size) {
-      topo.historyManager.beginTransaction();
-
-      _onChange({
-        name: "width",
-        value: size.width
-      });
-
-      _onChange({
-        name: "height",
-        value: size.height
-      });
+    numberPickerProps: {
+      hasTrigger: false,
+      placeholder: '-'
+    } // onChange={(size) => {
+    //   topo.historyManager.beginTransaction();
+    //   onChange({ name: "width", value: size.width });
+    //   onChange({ name: "height", value: size.height });
+    //   topo.historyManager.endTransaction();
+    // }}
 
-      topo.historyManager.endTransaction();
-    }
   }) : /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
-    topo: topo,
-    size: "small",
+    topo: topo // size="small"
+    ,
     value: size,
     disabled: disabled,
     showLabel: false,
     hasTrigger: false,
+    numberPickerProps: {
+      hasTrigger: false,
+      placeholder: '-'
+    },
     settingRuntimeState: settingRuntimeState,
     onChange: function onChange(size) {
       topo.historyManager.beginTransaction();
 
       _onChange({
-        name: "width",
+        name: 'width',
         value: size.width
       });
 
       _onChange({
-        name: "height",
+        name: 'height',
         value: size.height
       });
 

package/lib/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.module.scss

@@ -0,0 +1,28 @@
+@import '~@alifd/next/variables.scss';
+
+.toolbarNodeSizeSetting {
+  width: 144px;
+
+  // 图片尺寸输入框
+  :global {
+    .#{$css-prefix}input-inner {
+      padding-right: 8px;
+    }
+
+    .#{$css-prefix}input.#{$css-prefix}medium {
+      height: 24px;
+    }
+
+    .#{$css-prefix}input {
+      border: none;
+
+      &:hover:not(.#{$css-prefix}disabled) {
+        background: #F2F7FD;
+      }
+    }
+
+    .#{$css-prefix}input.#{$css-prefix}medium input {
+      height: 24px;
+    }
+  }
+}

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

@@ -7,26 +7,35 @@ exports["default"] = void 0;
 
 var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _ButtonBox = _interopRequireDefault(require("./components/ButtonBox"));
 
 var _WidgetBoxModule = _interopRequireDefault(require("./WidgetBox.module.scss"));
 
+var _excluded = ["label", "showLabel", "tooltip", "disabled", "children"];
+
 function WidgetBox(props) {
   var label = props.label,
       showLabel = props.showLabel,
       tooltip = props.tooltip,
       disabled = props.disabled,
-      children = props.children;
+      children = props.children,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
 
-  var button = /*#__PURE__*/_react["default"].createElement("div", {
+  var button = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     disabled: disabled,
     className: _WidgetBoxModule["default"].container
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, otherProps), /*#__PURE__*/_react["default"].createElement("div", {
     className: _WidgetBoxModule["default"].content
   }, children), showLabel !== false && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _WidgetBoxModule["default"].label
+    className: (0, _classnames["default"])(_WidgetBoxModule["default"].label, disabled ? _WidgetBoxModule["default"].disabledLabel : _WidgetBoxModule["default"].normalLabel)
   }, label));
 
   if (!tooltip) {