@riil-frontend/component-topology 6.0.0-alpha.5 → 6.0.0-alpha.50

package/lib/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/assets/topo_layout_rectangle.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>topo/source/layout/Icon/分层排布</title>
+    <g id="topo/source/layout/Icon/分层排布" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="矩形布局" transform="translate(0.000000, 11.428571)" fill-rule="nonzero">
+            <path d="M3.57142857,0.714285714 C5.149385,0.714285714 6.42857143,1.99347214 6.42857143,3.57142857 C6.42857143,5.149385 5.149385,6.42857143 3.57142857,6.42857143 C1.99347214,6.42857143 0.714285714,5.149385 0.714285714,3.57142857 C0.714285714,1.99347214 1.99347214,0.714285714 3.57142857,0.714285714 Z M26.4285714,0.714285714 C28.0065279,0.714285714 29.2857143,1.99347214 29.2857143,3.57142857 C29.2857143,5.149385 28.0065279,6.42857143 26.4285714,6.42857143 C24.850615,6.42857143 23.5714286,5.149385 23.5714286,3.57142857 C23.5714286,1.99347214 24.850615,0.714285714 26.4285714,0.714285714 Z" id="形状" fill="#DAE4F0"></path>
+            <path d="M3.57142857,0 C5.54387411,0 7.14285714,1.59898307 7.14285714,3.57142857 C7.14285714,5.54387407 5.54387411,7.14285714 3.57142857,7.14285714 C1.59898304,7.14285714 0,5.54387407 0,3.57142857 C0,1.59898307 1.59898304,0 3.57142857,0 Z M15,0 C16.9724455,0 18.5714286,1.59898307 18.5714286,3.57142857 C18.5714286,5.54387407 16.9724455,7.14285714 15,7.14285714 C13.0275545,7.14285714 11.4285714,5.54387407 11.4285714,3.57142857 C11.4285714,1.59898307 13.0275545,0 15,0 Z M26.4285714,0 C28.4010169,0 30,1.59898307 30,3.57142857 C30,5.54387407 28.4010169,7.14285714 26.4285714,7.14285714 C24.4561259,7.14285714 22.8571429,5.54387407 22.8571429,3.57142857 C22.8571429,1.59898307 24.4561259,0 26.4285714,0 Z M3.57142857,1.04166664 C2.17427965,1.04166664 1.04166666,2.17427964 1.04166666,3.57142857 C1.04166666,4.9685775 2.17427965,6.1011905 3.57142857,6.1011905 C4.96857749,6.1011905 6.1011905,4.9685775 6.1011905,3.57142857 C6.1011905,2.17427964 4.96857749,1.04166664 3.57142857,1.04166664 Z M15,1.04166664 C13.6028511,1.04166664 12.4702381,2.17427964 12.4702381,3.57142857 C12.4702381,4.9685775 13.6028511,6.1011905 15,6.1011905 C16.3971489,6.1011905 17.5297619,4.9685775 17.5297619,3.57142857 C17.5297619,2.17427964 16.3971489,1.04166664 15,1.04166664 Z M26.4285714,1.04166664 C25.0314225,1.04166664 23.8988095,2.17427964 23.8988095,3.57142857 C23.8988095,4.9685775 25.0314225,6.1011905 26.4285714,6.1011905 C27.8257204,6.1011905 28.9583334,4.9685775 28.9583334,3.57142857 C28.9583334,2.17427964 27.8257204,1.04166664 26.4285714,1.04166664 Z" id="形状" fill="#BACCE7"></path>
+        </g>
+        <polygon id="直线" fill="#BACCE7" fill-rule="nonzero" points="30 2 30 5 0 5 0 2"></polygon>
+        <polygon id="直线备份" fill="#BACCE7" fill-rule="nonzero" points="30 25 30 28 0 28 0 25"></polygon>
+    </g>
+</svg>

package/lib/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/assets/topo_layout_toward.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="46px" height="46px" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>树形布局</title>
+    <desc>Created with Sketch.</desc>
+    <g id="树形布局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="#DAE4F0" cx="11" cy="23" r="4"></circle>
+        <circle id="椭圆形备份" fill="#DAE4F0" cx="35" cy="23" r="4"></circle>
+        <circle id="椭圆形备份-2" fill="#DAE4F0" cx="41" cy="40" r="4"></circle>
+        <circle id="椭圆形备份-3" fill="#DAE4F0" cx="29" cy="40" r="4"></circle>
+        <circle id="椭圆形备份-4" fill="#DAE4F0" cx="17" cy="40" r="4"></circle>
+        <circle id="椭圆形备份-5" fill="#DAE4F0" cx="5" cy="40" r="4"></circle>
+        <path d="M37.470512,26.076139 L41.5378785,35.2115936 L39.7107875,36.0250669 L35.6434211,26.8896123 L37.470512,26.076139 Z M13.0270909,26.076139 L17.0944573,35.2115936 L15.2673664,36.0250669 L11.2,26.8896123 L13.0270909,26.076139 Z M8.66045376,26.1182616 L10.4580419,26.9950039 L6.07433039,35.9829444 L4.27674229,35.1062021 L8.66045376,26.1182616 Z M33.0837115,26.1182616 L34.8812996,26.9950039 L30.4975881,35.9829444 L28.7,35.1062021 L33.0837115,26.1182616 Z M20.5096741,8.18361912 L22.0190933,9.49573718 L13.0067139,19.8172607 L11.3248477,18.7495532 L20.5096741,8.18361912 Z M25.9958912,8.18361912 L35,18.5136719 L33.0152395,19.3069617 L24.4864721,9.49573718 L25.9958912,8.18361912 Z" id="形状结合" fill="#BACCE7"></path>
+        <path d="M41,35 C43.7614237,35 46,37.2385763 46,40 C46,42.7614237 43.7614237,45 41,45 C38.2385763,45 36,42.7614237 36,40 C36,37.2385763 38.2385763,35 41,35 Z M29,35 C31.7614237,35 34,37.2385763 34,40 C34,42.7614237 31.7614237,45 29,45 C26.2385763,45 24,42.7614237 24,40 C24,37.2385763 26.2385763,35 29,35 Z M5,35 C7.76142375,35 10,37.2385763 10,40 C10,42.7614237 7.76142375,45 5,45 C2.23857625,45 -1.5187851e-13,42.7614237 -1.5187851e-13,40 C-1.5187851e-13,37.2385763 2.23857625,35 5,35 Z M17,35 C19.7614237,35 22,37.2385763 22,40 C22,42.7614237 19.7614237,45 17,45 C14.2385763,45 12,42.7614237 12,40 C12,37.2385763 14.2385763,35 17,35 Z M41,36.4583333 C39.0439915,36.4583333 37.4583333,38.0439915 37.4583333,40 C37.4583333,41.9560085 39.0439915,43.5416667 41,43.5416667 C42.9560085,43.5416667 44.5416667,41.9560085 44.5416667,40 C44.5416667,38.0439915 42.9560085,36.4583333 41,36.4583333 Z M29,36.4583333 C27.0439915,36.4583333 25.4583333,38.0439915 25.4583333,40 C25.4583333,41.9560085 27.0439915,43.5416667 29,43.5416667 C30.9560085,43.5416667 32.5416667,41.9560085 32.5416667,40 C32.5416667,38.0439915 30.9560085,36.4583333 29,36.4583333 Z M5,36.4583333 C3.04399151,36.4583333 1.45833333,38.0439915 1.45833333,40 C1.45833333,41.9560085 3.04399151,43.5416667 5,43.5416667 C6.95600849,43.5416667 8.54166667,41.9560085 8.54166667,40 C8.54166667,38.0439915 6.95600849,36.4583333 5,36.4583333 Z M17,36.4583333 C15.0439915,36.4583333 13.4583333,38.0439915 13.4583333,40 C13.4583333,41.9560085 15.0439915,43.5416667 17,43.5416667 C18.9560085,43.5416667 20.5416667,41.9560085 20.5416667,40 C20.5416667,38.0439915 18.9560085,36.4583333 17,36.4583333 Z M11,18 C13.7614237,18 16,20.2385763 16,23 C16,25.7614237 13.7614237,28 11,28 C8.23857625,28 6,25.7614237 6,23 C6,20.2385763 8.23857625,18 11,18 Z M35,18 C37.7614237,18 40,20.2385763 40,23 C40,25.7614237 37.7614237,28 35,28 C32.2385763,28 30,25.7614237 30,23 C30,20.2385763 32.2385763,18 35,18 Z M11,19.4583333 C9.04399151,19.4583333 7.45833333,21.0439915 7.45833333,23 C7.45833333,24.9560085 9.04399151,26.5416667 11,26.5416667 C12.9560085,26.5416667 14.5416667,24.9560085 14.5416667,23 C14.5416667,21.0439915 12.9560085,19.4583333 11,19.4583333 Z M35,19.4583333 C33.0439915,19.4583333 31.4583333,21.0439915 31.4583333,23 C31.4583333,24.9560085 33.0439915,26.5416667 35,26.5416667 C36.9560085,26.5416667 38.5416667,24.9560085 38.5416667,23 C38.5416667,21.0439915 36.9560085,19.4583333 35,19.4583333 Z M23,-1.5187851e-13 C25.7614237,-1.5187851e-13 28,2.23857625 28,5 C28,7.76142375 25.7614237,10 23,10 C20.2385763,10 18,7.76142375 18,5 C18,2.23857625 20.2385763,-1.5187851e-13 23,-1.5187851e-13 Z M23,1.45833333 C21.0439915,1.45833333 19.4583333,3.04399151 19.4583333,5 C19.4583333,6.95600849 21.0439915,8.54166667 23,8.54166667 C24.9560085,8.54166667 26.5416667,6.95600849 26.5416667,5 C26.5416667,3.04399151 24.9560085,1.45833333 23,1.45833333 Z" id="形状结合" fill="#BACCE7"></path>
+    </g>
+</svg>

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var _excluded = ["className", "children", "icon", "img", "iconClassName", "textClassName"];
+
+var TemplateButton = function TemplateButton(props) {
+  var className = props.className,
+      children = props.children,
+      icon = props.icon,
+      img = props.img,
+      iconClassName = props.iconClassName,
+      textClassName = props.textClassName,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(_indexModule["default"].card, className)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].iconWrapper
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
+    className: (0, _classnames["default"])(_indexModule["default"].icon, iconClassName),
+    img: img,
+    type: icon
+  }, rest))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(_indexModule["default"].text, textClassName)
+  }, /*#__PURE__*/_react["default"].createElement("span", null, children)));
+};
+
+var _default = TemplateButton;
+exports["default"] = _default;

package/lib/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/index.module.scss

@@ -0,0 +1,53 @@
+@import "@alifd/next/variables";
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding-top: 6px;
+  cursor: pointer;
+}
+
+.iconWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+}
+
+.icon {
+  width: 120px;
+}
+
+.text {
+    height: 20px;
+  line-height: 20px;
+  font-size: 18px;
+  margin-top: 14px;
+  color: $color-text1-3;
+  outline: none;
+}
+
+  .group-layout-set-card {
+  display: flex;
+  flex-direction: column;
+  width: 55px;
+  height: 60px;
+  border: none;
+  padding-top: 6px;
+  cursor: pointer;
+}
+  .group-layout-set-icon {
+  width: 30px;
+}
+.group-layout-set-text {
+  width: 55px;
+  height: 12px;
+  line-height: 12px;
+  font-size: 12px;
+  margin-top: 8px;
+  color: $color-text1-3;
+  outline: none;
+}

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 ((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,112 @@ 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(v) {
+    setLeftInputVal(v);
+    setSpace('h', v);
+  };
+
+  var rightInputChange = function rightInputChange(v) {
+    setRightInputVal(v);
+    setSpace('v', 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(Math.round(h * 1 > 0 ? h : 0));
+        setRightInputVal(Math.round(v * 1 > 0 ? v : 0));
+      }
+    } // 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: "\u591A\u4E2A\u503C",
+    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,
+    placeholder: "\u591A\u4E2A\u503C",
+    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

@@ -5,12 +5,28 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-function BoxBackgroundSetting(props) {
-  // const {  } = props
-  return /*#__PURE__*/_react["default"].createElement("div", null, "xxx");
+var _IconSelect = _interopRequireDefault(require("../IconSelect"));
+
+var _useIcons = require("../../../../../common/icons/useIcons");
+
+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 NodeImageList(props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  (0, _react.useEffect)(function () {}, []);
+  var icons = (0, _useIcons.useNodeIcons)(topo);
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconSelect["default"], {
+    value: value,
+    iconList: icons,
+    onChange: onChange
+  }));
 }
 
-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"));
@@ -23,8 +25,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /**
  * 替换图片设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 function NodeImageButton(props) {
   var topo = props.topo,
@@ -33,13 +35,43 @@ function NodeImageButton(props) {
 
   var _useState = (0, _react.useState)(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
+
+  var _useState2 = (0, _react.useState)(),
+      imgVal = _useState2[0],
+      setImgVal = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useHtSelection();
   (0, _react.useEffect)(function () {
-    setDisabled(false);
+    var nodes = selection.filter(function (ele) {
+      return (0, _htElementUtils.isGroup)(ele) || (0, _htElementUtils.isNode)(ele);
+    });
+
+    if (nodes.length > 0) {
+      setDisabled(false);
+      setImgVal(nodes[0].getImage());
+    } else {
+      setDisabled(true);
+    }
   }, [selection]);
+
+  var onChange = function onChange(prop) {
+    console.log("onChange-prop", prop, selection); //const { name, value } = prop;
+    // const gv = topo.view.topoClient.getGraphView();
+    //const element = topo.getSelectionModel().getFirstData();
+
+    var elements = topo.getSelectionModel();
+    console.log("onChange-elements", elements);
+    elements.each(function (element) {
+      element.setImage(prop);
+    }); // selection.map((element) => {
+    //   element.setImage(prop);
+    // });
+    // if (name === "image") {
+    // }
+  };
+
   var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
     src: "/img/topo/editor/toolbar/\u66FF\u6362\u56FE\u7247/Disable.svg",
     alt: ""
@@ -50,12 +82,15 @@ 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,
     trigger: icon
   }, /*#__PURE__*/_react["default"].createElement(_BoxBackgroundSetting["default"], {
-    topo: topo
+    topo: topo,
+    onChange: onChange,
+    value: imgVal
   })));
 }