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

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/assets/topo_layout_hierarchical.svg

@@ -0,0 +1,10 @@
+<?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">
+        <path d="M22.6470588,34.6470588 C25.4084826,34.6470588 27.6470588,36.8856351 27.6470588,39.6470588 C27.6470588,42.4084826 25.4084826,44.6470588 22.6470588,44.6470588 C19.8856351,44.6470588 17.6470588,42.4084826 17.6470588,39.6470588 C17.6470588,36.8856351 19.8856351,34.6470588 22.6470588,34.6470588 Z M5.70588235,17.6470588 C8.4673061,17.6470588 10.7058824,19.8856351 10.7058824,22.6470588 C10.7058824,25.4084826 8.4673061,27.6470588 5.70588235,27.6470588 C2.9444586,27.6470588 0.705882353,25.4084826 0.705882353,22.6470588 C0.705882353,19.8856351 2.9444586,17.6470588 5.70588235,17.6470588 Z M40.7058824,17.6470588 C43.4673061,17.6470588 45.7058824,19.8856351 45.7058824,22.6470588 C45.7058824,25.4084826 43.4673061,27.6470588 40.7058824,27.6470588 C37.9444586,27.6470588 35.7058824,25.4084826 35.7058824,22.6470588 C35.7058824,19.8856351 37.9444586,17.6470588 40.7058824,17.6470588 Z M22.6470588,0.647058824 C25.4084826,0.647058824 27.6470588,2.88563507 27.6470588,5.64705882 C27.6470588,8.40848257 25.4084826,10.6470588 22.6470588,10.6470588 C19.8856351,10.6470588 17.6470588,8.40848257 17.6470588,5.64705882 C17.6470588,2.88563507 19.8856351,0.647058824 22.6470588,0.647058824 Z" id="形状结合" fill="#DAE4F0"></path>
+        <path d="M22.5,-1.95399252e-13 C25.5375661,-1.95399252e-13 28,2.46243388 28,5.5 C28,6.6576632 27.6423341,7.73178905 27.0314769,8.61790293 L36.82321,18.4095545 C37.7974662,17.5332483 39.0864597,17 40.5,17 C43.5375661,17 46,19.4624339 46,22.5 C46,25.5375661 43.5375661,28 40.5,28 C39.1265414,28 37.8706666,27.496564 36.9068415,26.6641581 L27.0950015,36.4763101 C27.6670566,37.3438891 28,38.383063 28,39.5 C28,42.5375661 25.5375661,45 22.5,45 C19.4624339,45 17,42.5375661 17,39.5 C17,38.3423368 17.3576659,37.268211 17.9685231,36.3820971 L8.61790293,27.0314769 C7.73178905,27.6423341 6.6576632,28 5.5,28 C2.46243388,28 -1.95399252e-13,25.5375661 -1.95399252e-13,22.5 C-1.95399252e-13,19.4624339 2.46243388,17 5.5,17 C6.72377407,17 7.85419719,17.3996829 8.7678544,18.0756338 L18.0756338,8.7678544 C17.3996829,7.85419719 17,6.72377407 17,5.5 C17,2.46243388 19.4624339,-1.95399252e-13 22.5,-1.95399252e-13 Z M22.5,35.6041667 C20.3483907,35.6041667 18.6041667,37.3483907 18.6041667,39.5 C18.6041667,41.6516093 20.3483907,43.3958333 22.5,43.3958333 C24.6516093,43.3958333 26.3958333,41.6516093 26.3958333,39.5 C26.3958333,37.3483907 24.6516093,35.6041667 22.5,35.6041667 Z M35.1000174,23.5495069 L35.1,23.6 L23.5991458,23.5991458 L23.6003788,34.1100968 C24.3749969,34.267393 25.0904894,34.587488 25.7095864,35.0331117 L35.6483634,25.0929707 C35.3929942,24.6161549 35.2058615,24.0973163 35.1000174,23.5495069 Z M21.5991458,23.5991458 L10.8899032,23.6003788 C10.7403134,24.3370463 10.4434859,25.0202397 10.0314769,25.6179029 L19.3820971,34.9685231 C20.0336191,34.5193857 20.7867811,34.2071244 21.6000562,34.0732662 L21.5991458,23.5991458 Z M5.5,18.6041667 C3.34839066,18.6041667 1.60416667,20.3483907 1.60416667,22.5 C1.60416667,24.6516093 3.34839066,26.3958333 5.5,26.3958333 C7.65160934,26.3958333 9.39583333,24.6516093 9.39583333,22.5 C9.39583333,20.3483907 7.65160934,18.6041667 5.5,18.6041667 Z M40.5,18.6041667 C38.3483907,18.6041667 36.6041667,20.3483907 36.6041667,22.5 C36.6041667,24.6516093 38.3483907,26.3958333 40.5,26.3958333 C42.6516093,26.3958333 44.3958333,24.6516093 44.3958333,22.5 C44.3958333,20.3483907 42.6516093,18.6041667 40.5,18.6041667 Z M19.5370645,10.1344901 L10.1344901,19.5370645 C10.5284431,20.1519899 10.8033617,20.8504912 10.9267338,21.6000562 L21.5991458,21.5991458 L21.6000562,10.9267338 C20.8504912,10.8033617 20.1519899,10.5284431 19.5370645,10.1344901 Z M23.6003788,10.8899032 L23.5991458,21.5991458 L35.0732662,21.6000562 C35.1660269,21.0364754 35.3444596,20.5017619 35.5947453,20.0097351 L25.6179029,10.0314769 C25.0202397,10.4434859 24.3370463,10.7403134 23.6003788,10.8899032 Z M22.5,1.60416667 C20.3483907,1.60416667 18.6041667,3.34839066 18.6041667,5.5 C18.6041667,7.65160934 20.3483907,9.39583333 22.5,9.39583333 C24.6516093,9.39583333 26.3958333,7.65160934 26.3958333,5.5 C26.3958333,3.34839066 24.6516093,1.60416667 22.5,1.60416667 Z" id="形状结合" fill="#BACCE7"></path>
+    </g>
+</svg>

package/es/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/es/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/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/index.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children", "icon", "img", "iconClassName", "textClassName"];
+import React from 'react';
+import classnames from 'classnames';
+import Icon from "./Icon";
+import styles from "./index.module.scss";
+
+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 = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.card, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(Icon, _extends({
+    className: classnames(styles.icon, iconClassName),
+    img: img,
+    type: icon
+  }, rest))), /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.text, textClassName)
+  }, /*#__PURE__*/React.createElement("span", null, children)));
+};
+
+export default TemplateButton;

package/es/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/es/core/editor/components/Toolbar/widgets/Layout/index.js

@@ -1,28 +1,141 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import _Icon from "@alifd/next/es/icon";
-var _excluded = ["showLabel"];
-import React from 'react';
-import ArrowPopup from "../components/ArrowPopup";
+var _excluded = ["topo", "showLabel"];
+
+/* eslint-disable eqeqeq */
+import React, { useState, useMemo } from 'react';
+import LayoutSettings from "./components/LayoutSettings";
 import WidgetBox from "../WidgetBox";
+import DropdownButton from "../components/DropdownButton";
+import { isGroup, isLayer } from "../../../../../../utils/htElementUtils";
 
 function Layout(props) {
-  var topo = props.topo;
-  return /*#__PURE__*/React.createElement(ArrowPopup, {
-    label: /*#__PURE__*/React.createElement(_Icon, {
-      type: "Topology_icon_zoomout",
-      size: "small"
+  var topo = props.topo,
+      topoShowType = props.topoShowType;
+
+  var _useState = useState(),
+      layout = _useState[0],
+      setLayout = _useState[1]; // 选中的元素
+
+
+  var selectionElements = topo.selectionManager.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) {
+      return data != 'rectangle';
+    } else {
+      return data == 'rectangle';
+    }
+  };
+
+  var globalLayout = function globalLayout(data) {
+    var firstElement = selectionElements[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 (isLayer(firstElement)) {
+      topo.getHtTopo().layoutLayer(firstElement);
+    }
+  };
+
+  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.createElement(LayoutSettings, {
+      size: "xs",
+      layout: layout,
+      onChange: layoutOnChange,
+      disabled: setDisabled
     })
-  }, /*#__PURE__*/React.createElement("div", null, "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null), "\u5E03\u5C40 ", /*#__PURE__*/React.createElement("br", null)));
+  );
 }
 
 function LayoutWidget(props) {
-  var showLabel = props.showLabel,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      otherProps = _objectWithoutPropertiesLoose(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 selectionElements = topo.selectionManager.useHtSelection();
+  var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
+
+  var disabled = useMemo(function () {
+    return !isLayoutEnabled({
+      topoShowType: topoShowType,
+      selectionElements: selectionElements
+    });
+  }, [topoShowType, selectionElements]);
+  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/layout/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/layout/Normal.svg",
+    alt: ""
+  });
   return /*#__PURE__*/React.createElement(WidgetBox, {
-    label: "\u5E03\u5C40",
-    showLabel: showLabel
-  }, /*#__PURE__*/React.createElement(WidgetBox.ButtonBox, null, /*#__PURE__*/React.createElement(Layout, otherProps)));
+    label: "\u5E03\u5C40\u65B9\u5F0F",
+    tooltip: "\u5E03\u5C40\u65B9\u5F0F",
+    showLabel: showLabel,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(DropdownButton, {
+    disabled: disabled,
+    trigger: icon
+  }, !disabled && /*#__PURE__*/React.createElement(Layout, _extends({
+    topo: topo,
+    topoShowType: topoShowType
+  }, otherProps))));
+}
+
+function isLayoutEnabled(props) {
+  var topoShowType = props.topoShowType,
+      selectionElements = props.selectionElements; // 选中单个区域/集群后，该按钮亮起
+
+  if (isGroup(selectionElements[0])) {
+    return true;
+  } // 分层拓扑选中任意分层时，布局按钮亮起
+
+
+  if (topoShowType === 'layers' && selectionElements.length === 1 && isLayer(selectionElements[0])) {
+    return true;
+  } // 空白拓扑未选中任何资源时，布局按钮亮起
+
+
+  if (topoShowType !== 'layers' && !selectionElements.length) {
+    return true;
+  }
+
+  return false;
 }
 
 export default LayoutWidget;

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

@@ -1,24 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _NumberPicker from "@alifd/next/es/number-picker";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useState, useEffect } from 'react';
 import WidgetBox from "./WidgetBox";
 import DropdownButton from "./components/DropdownButton";
-
-function NodeAlignPopup(props) {
-  var topo = props.topo,
-      disabled = props.disabled;
-  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Normal.svg",
-    alt: ""
-  });
-  return /*#__PURE__*/React.createElement(DropdownButton, {
-    trigger: icon
-  }, "\u5BF9\u9F50\u65B9\u5F0F");
-}
+import AlignSetting from "../../settings/common/AlignSetting";
+import { isEdge, isLayer } from "../../../../../utils/htElementUtils";
+import styles from "./NodeAlignWidget.module.scss";
 
 function NodeAlignWidget(props) {
   var topo = props.topo,
@@ -27,21 +15,121 @@ function NodeAlignWidget(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
+
+  var _useState2 = useState(),
+      leftInputVal = _useState2[0],
+      setLeftInputVal = _useState2[1];
+
+  var _useState3 = useState(),
+      rightInputVal = _useState3[0],
+      setRightInputVal = _useState3[1];
+
+  var _useState4 = useState(true),
+      leftDisable = _useState4[0],
+      setLeftDisable = _useState4[1];
+
+  var _useState5 = useState(true),
+      rightDisable = _useState5[0],
+      setRightDisable = _useState5[1]; // 拓扑图是否加载
+
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
   var selection = topo.selectionManager.useSelection();
+
+  var setSpace = function setSpace(type, num) {
+    topo.historyManager.beginTransaction();
+    var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (ele) {
+      return !isLayer(ele) && !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);
+  };
+
   useEffect(function () {
-    setDisabled(false);
-  }, [selection]);
+    if (graphLoaded) {
+      var selectionEle = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+      var nodes = selectionEle.filter(function (ele) {
+        return !isLayer(ele) && !isEdge(ele);
+      });
+      setDisabled(nodes.length <= 1);
+      getClickType('none');
+      setLeftInputVal();
+      setRightInputVal();
+    }
+  }, [graphLoaded, selection]);
+
+  var getClickType = function getClickType(type) {
+    if (leftInputVal || rightInputVal) {
+      setLeftInputVal();
+      setRightInputVal();
+    }
+
+    setLeftDisable(true);
+    setRightDisable(true);
+
+    if (type === 'top' || type === 'middle' || type === 'bottom') {
+      setLeftDisable(false);
+    }
+
+    if (type === 'left' || type === 'center' || type === 'right') {
+      setRightDisable(false);
+    }
+  };
+
+  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Normal.svg",
+    alt: ""
+  });
   return /*#__PURE__*/React.createElement(WidgetBox, {
     showLabel: showLabel,
+    disabled: disabled,
     label: "\u5BF9\u9F50\u65B9\u5F0F",
     tooltip: "\u5BF9\u9F50\u65B9\u5F0F"
-  }, /*#__PURE__*/React.createElement(NodeAlignPopup, _extends({
+  }, /*#__PURE__*/React.createElement(DropdownButton, {
     disabled: disabled,
-    selection: selection
-  }, otherProps)));
+    trigger: icon
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlignSetting, {
+    topo: topo,
+    getClickType: getClickType
+  }), /*#__PURE__*/React.createElement(_NumberPicker, {
+    disabled: leftDisable,
+    size: "small",
+    hasTrigger: false,
+    placeholder: "\u591A\u4E2A\u503C",
+    className: styles.leftInput,
+    value: leftInputVal,
+    min: 0,
+    max: 10000,
+    onChange: leftInputChange
+  }), /*#__PURE__*/React.createElement(_NumberPicker, {
+    disabled: rightDisable,
+    size: "small",
+    hasTrigger: false,
+    placeholder: "\u591A\u4E2A\u503C",
+    className: styles.rightInput,
+    value: rightInputVal,
+    min: 0,
+    max: 10000,
+    onChange: rightInputChange
+  }))));
 }
 
 export default NodeAlignWidget;

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

@@ -0,0 +1,28 @@
+.leftInput{
+  width: 100px !important;
+  margin-right: 10px;
+  margin-left: 5px;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_normal.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_disable.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+  }
+}
+.rightInput{
+  width: 100px !important;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距 _normal.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距_disable.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+  }
+}

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

@@ -1,8 +1,18 @@
-import React from 'react';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from "react";
+import TopoIconSelect from "../IconSelect";
+import { useNodeIcons } from "../../../../../common/icons/useIcons";
 
-function BoxBackgroundSetting(props) {
-  // const {  } = props
-  return /*#__PURE__*/React.createElement("div", null, "xxx");
+function NodeImageList(props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  useEffect(function () {}, []);
+  var icons = useNodeIcons(topo);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TopoIconSelect, {
+    value: value,
+    iconList: icons,
+    onChange: onChange
+  }));
 }
 
-export default BoxBackgroundSetting;
+export default NodeImageList;

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

@@ -1,13 +1,14 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
+import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
 /**
  * 替换图片设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeImageButton(props) {
@@ -17,13 +18,43 @@ function NodeImageButton(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
 
+  var _useState2 = useState(),
+      imgVal = _useState2[0],
+      setImgVal = _useState2[1]; // 选中的元素
 
-  var selection = topo.selectionManager.useSelection();
+
+  var selection = topo.selectionManager.useHtSelection();
   useEffect(function () {
-    setDisabled(false);
+    var nodes = selection.filter(function (ele) {
+      return isGroup(ele) || 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.createElement("img", {
     src: "/img/topo/editor/toolbar/\u66FF\u6362\u56FE\u7247/Disable.svg",
     alt: ""
@@ -34,12 +65,15 @@ function NodeImageButton(props) {
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u66FF\u6362\u56FE\u7247",
     tooltip: "\u66FF\u6362\u56FE\u7247",
+    disabled: disabled,
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     disabled: disabled,
     trigger: icon
   }, /*#__PURE__*/React.createElement(BoxBackgroundSetting, {
-    topo: topo
+    topo: topo,
+    onChange: onChange,
+    value: imgVal
   })));
 }