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

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/Icon.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icons from "./assets";
+
+var Icon = function Icon(props) {
+  var _props$alt = props.alt,
+      alt = _props$alt === void 0 ? '' : _props$alt,
+      img = props.img,
+      type = props.type,
+      className = props.className,
+      rotate = props.rotate;
+  var style = rotate ? {
+    transform: "rotate(" + rotate + "deg)"
+  } : null;
+  var src = img || Icons[type];
+  return /*#__PURE__*/React.createElement("img", {
+    className: className,
+    style: style,
+    src: src,
+    alt: alt
+  });
+};
+
+export default Icon;

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

@@ -0,0 +1,10 @@
+import IconLayoutCircular from "./topo_layout_circular.svg";
+import IconLayoutHierarchical from "./topo_layout_hierarchical.svg";
+import IconLayoutToward from "./topo_layout_toward.svg";
+import IconLayoutRectangle from "./topo_layout_rectangle.svg";
+export default {
+  'layout_rectangle': IconLayoutRectangle,
+  'layout_circular': IconLayoutCircular,
+  'layout_hierarchical': IconLayoutHierarchical,
+  'layout_toward': IconLayoutToward
+};

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTemplateButton/assets/topo_layout_circular.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="M24,35 C26.7614237,35 29,37.2385763 29,40 C29,42.7614237 26.7614237,45 24,45 C21.2385763,45 19,42.7614237 19,40 C19,37.2385763 21.2385763,35 24,35 Z M5.7,20.75 C8.46142375,20.75 10.7,22.9885763 10.7,25.75 C10.7,28.5114237 8.46142375,30.75 5.7,30.75 C2.93857625,30.75 0.7,28.5114237 0.7,25.75 C0.7,22.9885763 2.93857625,20.75 5.7,20.75 Z M39.7,20.75 C42.4614237,20.75 44.7,22.9885763 44.7,25.75 C44.7,28.5114237 42.4614237,30.75 39.7,30.75 C36.9385763,30.75 34.7,28.5114237 34.7,25.75 C34.7,22.9885763 36.9385763,20.75 39.7,20.75 Z M12.7,1.75 C15.4614237,1.75 17.7,3.98857625 17.7,6.75 C17.7,9.51142375 15.4614237,11.75 12.7,11.75 C9.93857625,11.75 7.7,9.51142375 7.7,6.75 C7.7,3.98857625 9.93857625,1.75 12.7,1.75 Z M33.7,1.75 C36.4614237,1.75 38.7,3.98857625 38.7,6.75 C38.7,9.51142375 36.4614237,11.75 33.7,11.75 C30.9385763,11.75 28.7,9.51142375 28.7,6.75 C28.7,3.98857625 30.9385763,1.75 33.7,1.75 Z" id="形状" fill="#DAE4F0"></path>
+        <path d="M16.7357263,10.8944619 L21.3748996,16.8328361 C21.7316803,16.7635612 22.1002387,16.7272727 22.4772727,16.7272727 C23.3881144,16.7272727 24.2494913,16.939057 25.0148465,17.3160689 L29.9194782,11.0383855 C28.7414934,9.98544349 28,8.45431428 28,6.75 C28,3.57436269 30.5743627,1 33.75,1 C36.9256373,1 39.5,3.57436269 39.5,6.75 C39.5,9.92563731 36.9256373,12.5 33.75,12.5 C33.0015307,12.5 32.2864624,12.3569935 31.6306281,12.0968134 L26.6283721,18.498458 C27.5114744,19.4195559 28.0909999,20.6339958 28.2061533,21.9809823 L34.5845072,23.2211517 C35.5202467,21.3133843 37.4817447,20 39.75,20 C42.9256373,20 45.5,22.5743627 45.5,25.75 C45.5,28.9256373 42.9256373,31.5 39.75,31.5 C36.5743627,31.5 34,28.9256373 34,25.75 C34,25.5475907 34.0104585,25.3476242 34.0308645,25.1506112 L28.0278628,23.9839192 C27.5340506,25.8075306 26.1655187,27.2715341 24.4003971,27.8978 L24.4002399,34.0363596 C27.2697409,34.3593234 29.5,36.7942092 29.5,39.75 C29.5,42.9256373 26.9256373,45.5 23.75,45.5 C20.5743627,45.5 18,42.9256373 18,39.75 C18,37.0393437 19.8756718,34.766774 22.3999234,34.159383 L22.3996823,28.2252901 L22.256717,28.2231206 C19.7716464,28.129399 17.690226,26.4586024 16.9843891,24.1826643 L11.4788805,25.2537095 C11.4928642,25.4172811 11.5,25.5828072 11.5,25.75 C11.5,28.9256373 8.92563731,31.5 5.75,31.5 C2.57436269,31.5 3.55271368e-15,28.9256373 3.55271368e-15,25.75 C3.55271368e-15,22.5743627 2.57436269,20 5.75,20 C8.05582451,20 10.0446459,21.3572518 10.9611414,23.3164329 L16.734097,22.1946516 C16.828014,20.2542218 17.8837931,18.566218 19.4349009,17.5971737 L15.071367,12.0121621 C14.3614134,12.3258116 13.5760486,12.5 12.75,12.5 C9.57436269,12.5 7,9.92563731 7,6.75 C7,3.57436269 9.57436269,1 12.75,1 C15.9256373,1 18.5,3.57436269 18.5,6.75 C18.5,8.3781911 17.8232649,9.84832225 16.7357263,10.8944619 Z M23.75,35.75 C21.540861,35.75 19.75,37.540861 19.75,39.75 C19.75,41.959139 21.540861,43.75 23.75,43.75 C25.959139,43.75 27.75,41.959139 27.75,39.75 C27.75,37.540861 25.959139,35.75 23.75,35.75 Z M5.75,21.75 C3.540861,21.75 1.75,23.540861 1.75,25.75 C1.75,27.959139 3.540861,29.75 5.75,29.75 C7.959139,29.75 9.75,27.959139 9.75,25.75 C9.75,23.540861 7.959139,21.75 5.75,21.75 Z M39.75,21.75 C37.540861,21.75 35.75,23.540861 35.75,25.75 C35.75,27.959139 37.540861,29.75 39.75,29.75 C41.959139,29.75 43.75,27.959139 43.75,25.75 C43.75,23.540861 41.959139,21.75 39.75,21.75 Z M22.4772727,18.4772727 C20.2681337,18.4772727 18.4772727,20.2681337 18.4772727,22.4772727 C18.4772727,24.6864117 20.2681337,26.4772727 22.4772727,26.4772727 C24.6864117,26.4772727 26.4772727,24.6864117 26.4772727,22.4772727 C26.4772727,20.2681337 24.6864117,18.4772727 22.4772727,18.4772727 Z M12.75,2.75 C10.540861,2.75 8.75,4.540861 8.75,6.75 C8.75,8.959139 10.540861,10.75 12.75,10.75 C14.959139,10.75 16.75,8.959139 16.75,6.75 C16.75,4.540861 14.959139,2.75 12.75,2.75 Z M33.75,2.75 C31.540861,2.75 29.75,4.540861 29.75,6.75 C29.75,8.959139 31.540861,10.75 33.75,10.75 C35.959139,10.75 37.75,8.959139 37.75,6.75 C37.75,4.540861 35.959139,2.75 33.75,2.75 Z" id="形状" fill="#BACCE7"></path>
+    </g>
+</svg>

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,143 @@
+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/htElementDataUtil";
 
 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.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 && !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 && 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.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 _topo$store$useModelS2 = topo.store.useModelState('selection'),
+      selection = _topo$store$useModelS2.selection;
+
+  var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
+
+  var disabled = useMemo(function () {
+    return !isLayoutEnabled({
+      topoShowType: topoShowType,
+      selection: selection
+    });
+  }, [topoShowType, selection]);
+  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,
+      selection = props.selection; // 选中单个区域/集群后，该按钮亮起
+
+  if (selection.length === 1 && isGroup(selection[0]) && selection[0].expanded) {
+    return true;
+  } // 分层拓扑选中任意分层时，布局按钮亮起
+
+
+  if (topoShowType === 'layers' && selection.length === 1 && isLayer(selection[0])) {
+    return true;
+  } // 空白拓扑未选中任何资源时，布局按钮亮起
+
+
+  if (topoShowType !== 'layers' && !selection.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,117 @@ 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),
+      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 !isLayer(ele) && !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();
   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); // 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.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,
+    trigger: icon
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '10px 7px 17px 7px'
+    }
+  }, /*#__PURE__*/React.createElement(AlignSetting, {
+    topo: topo,
+    distributionDisabled: distributionDisabled
+  })), /*#__PURE__*/React.createElement(_NumberPicker, {
+    disabled: disabled,
+    size: "small",
+    hasTrigger: false,
+    placeholder: distributionDisabled ? '' : '多个值',
+    className: styles.leftInput,
+    value: leftInputVal,
+    min: 0,
+    max: 10000,
+    onChange: leftInputChange
+  }), /*#__PURE__*/React.createElement(_NumberPicker, {
     disabled: disabled,
-    selection: selection
-  }, otherProps)));
+    size: "small",
+    hasTrigger: false // eslint-disable-next-line no-nested-ternary
+    ,
+    placeholder: distributionDisabled ? '' : '多个值',
+    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,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/es/core/editor/components/Toolbar/widgets/NodeImageButton/BoxBackgroundSetting.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState, forwardRef, useImperativeHandle } from "rea
 import TopoIconSelect from "../IconSelect";
 import { useNodeIcons } from "../../../../../common/icons/useIcons";
 
-function BoxBackgroundSetting(props, ref) {
+function NodeImageList(props, ref) {
   var value = props.value,
       onChange = props.onChange,
       topo = props.topo;
@@ -15,4 +15,4 @@ function BoxBackgroundSetting(props, ref) {
   }));
 }
 
-export default BoxBackgroundSetting;
+export default NodeImageList;

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

@@ -1,15 +1,25 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useEffect, useState } from "react";
+import { isGroup, isNode, isText } from "../../../../../../utils/htElementUtils";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
+
+function isElementSetImageEnabled(element) {
+  if (isGroup(element)) {
+    return !element.isExpanded();
+  }
+
+  return isNode(element) && !isText(element) && element.a('type') !== 'box';
+}
 /**
  * 替换图片设置
  * @param {*} props
  * @returns
  */
 
+
 function NodeImageButton(props) {
   var topo = props.topo,
       showLabel = props.showLabel,
@@ -24,13 +34,13 @@ function NodeImageButton(props) {
       setImgVal = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useHtSelection();
   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);
     }
@@ -41,10 +51,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);
     // });
@@ -62,6 +74,7 @@ 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,