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

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

@@ -0,0 +1,153 @@
+@import "@alifd/next/variables";
+
+.TopoIconSelect {
+
+
+  .iconSelect {}
+
+
+
+}
+
+.iconCollapse {
+  width: 240px;
+  max-height: 218px;
+  overflow-y: auto;
+  border: none;
+
+  :global {
+    .#{$css-prefix}collapse-panel-expanded {
+      .#{$css-prefix}collapse-panel-content {
+        padding: 0px 0px 5px 0px;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel {
+      border-top: none;
+      background-color: #FFF;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #4D6277;
+      line-height: 17px;
+    }
+
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-content {
+      padding: 0px 0px 5px 0px;
+    }
+  }
+}
+
+.iconSelect {
+  width: 100%;
+
+  .selected {
+    height: 26px;
+    display: block;
+
+    .iconImgWrapper {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      // vertical-align: middle;
+    }
+
+    .iconImg {
+      display: inline-block;
+      width: auto;
+      height: auto;
+      max-width: 18px;
+      max-height: 18px;
+      vertical-align: middle;
+    }
+
+    .icontitle {
+      text-align: left;
+      vertical-align: top;
+      display: inline-block;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #4D6277;
+      //margin-top: 2px;
+      line-height: 26px;
+      margin-left: 7px;
+    }
+
+    :global {
+      .#{$css-prefix}tag {
+        background: none;
+      }
+    }
+  }
+}
+
+
+
+.collPanel {
+  padding: 5px;
+}
+
+
+
+
+.iconli {
+  width: 52px;
+  height: 68px;
+  text-align: center;
+  //border: 2px solid #FFF;
+  overflow: hidden;
+  cursor: pointer;
+
+  .iconImgWrapper {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    margin: 5px 8px 5px 8px;
+  }
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 32px;
+    max-height: 32px;
+    vertical-align: middle;
+  }
+
+  .icontitle {
+    width: 48px;
+    max-width: 50px;
+    text-align: center;
+    font-size: 12px;
+    -webkit-text-size-adjust: none;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4D6277;
+    line-height: 11px;
+  }
+
+
+  // float: left;
+}
+
+.selectedTag {
+  border-radius: 4px;
+  // border: 2px solid #4C89FF;
+  background-color: #F2F7FD;
+}

package/lib/core/editor/components/Toolbar/widgets/IconSelect/popUpContent.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var Panel = _collapse["default"].Panel;
+
+function PopUpContent(props) {
+  var iconList = props.iconList,
+      onChange = props.onChange,
+      selectedId = props.selectedId;
+
+  var itemOnClick = function itemOnClick(e) {
+    onChange(e);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+    className: _indexModule["default"].iconCollapse
+  }, iconList.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(Panel, {
+      title: item.name,
+      key: index,
+      className: _indexModule["default"].collPanel
+    }, /*#__PURE__*/_react["default"].createElement(_box["default"], {
+      spacing: 4,
+      direction: "row",
+      wrap: true
+    }, item.icons.map(function (icon, idx) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: idx,
+        className: _indexModule["default"].iconli + " " + (selectedId === icon.id ? _indexModule["default"].selectedTag : ''),
+        onClick: function onClick() {
+          itemOnClick(icon);
+        },
+        title: icon.name
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: _indexModule["default"].iconImgWrapper
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        className: _indexModule["default"].iconImg,
+        alt: "",
+        src: icon.url,
+        size: "xxl"
+      })), /*#__PURE__*/_react["default"].createElement("span", {
+        className: _indexModule["default"].icontitle
+      }, icon.name));
+    })));
+  })));
+}
+
+var _default = PopUpContent;
+exports["default"] = _default;

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _LayoutTagImageSelect = _interopRequireDefault(require("./LayoutTagImageSelect"));
+
+var _LayoutSettingsModule = _interopRequireDefault(require("./LayoutSettings.module.scss"));
+
+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; }
+
+var LAYOUTS = {
+  circular: '星型布局',
+  hierarchical: '均衡布局',
+  toward: '树形布局',
+  rectangle: '分层排布'
+};
+var TREE_LAYOUT_OPTIONS = [{
+  value: 'east',
+  label: '横向'
+}, {
+  value: 'south',
+  label: '纵向'
+}];
+
+var LayoutSettings = function LayoutSettings(props) {
+  var _props$layout = props.layout,
+      layout = _props$layout === void 0 ? {} : _props$layout,
+      onChange = props.onChange,
+      regionId = props.regionId,
+      size = props.size,
+      disabled = props.disabled;
+  var layoutId = layout.id,
+      layoutOptions = layout.options; // const [value, setValue] = useState();
+
+  var handleChange = function handleChange(data) {
+    onChange && onChange(data);
+  };
+
+  var onLayoutSelect = function onLayoutSelect(id) {
+    // console.log("onLayoutSelect", id, layout, value);
+    var options;
+
+    if (id === 'toward') {
+      options = {
+        subId: TREE_LAYOUT_OPTIONS[0].value
+      };
+    } // setValue(id);
+
+
+    handleChange({
+      id: id,
+      options: options
+    });
+  };
+
+  var layoutGroup = Object.keys(LAYOUTS).map(function (id) {
+    return {
+      id: id,
+      name: LAYOUTS[id],
+      icon: "layout_" + id,
+      selected: layoutId === id
+    };
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _LayoutSettingsModule["default"]['layout-setting-template-group']
+  }, /*#__PURE__*/_react["default"].createElement(_LayoutTagImageSelect["default"], {
+    dataSource: layoutGroup,
+    value: layoutId,
+    size: size,
+    disabled: disabled,
+    onChange: onLayoutSelect,
+    boxProps: {
+      spacing: 12,
+      className: _LayoutSettingsModule["default"].tagBox
+    },
+    tagProps: {
+      className: _LayoutSettingsModule["default"].tag,
+      style: {
+        background: '#FFF'
+      },
+      type: 'primary'
+    },
+    itemProps: {
+      className: _LayoutSettingsModule["default"].card,
+      iconClassName: _LayoutSettingsModule["default"].icon,
+      textClassName: _LayoutSettingsModule["default"].text
+    }
+  }), layoutId === 'toward' ? /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5E03\u5C40\u65B9\u5411"
+  }, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
+    dataSource: TREE_LAYOUT_OPTIONS,
+    defaultValue: layoutOptions.subId || TREE_LAYOUT_OPTIONS[0].value,
+    onChange: function onChange(subId) {
+      return handleChange({
+        id: layoutId,
+        options: {
+          subId: subId
+        }
+      });
+    }
+  })) : null);
+};
+
+var _default = LayoutSettings;
+exports["default"] = _default;

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

@@ -0,0 +1,70 @@
+@import "@alifd/next/variables";
+@import '@alifd/next/reset.scss';
+
+.label {
+  margin: 0 10px;
+}
+
+.tagBox {
+  color: #4D6277;
+
+
+  :global {
+    .checked {
+      // border: 2px solid $color-brand1-5 !important;
+      color: #4D6277 !important;
+      border-color: #fff !important;
+      background:#F2F7FD !important;
+    }
+  }
+}
+
+.tag {
+  // border: 2px solid $color-gitfill1-1 !important;
+  border-color: #fff !important;
+  color: #4D6277;
+
+  &:hover {
+    background-color: $color-brand1-1 !important;
+    border-color: #fff !important;
+    // border: 2px solid #FFFFFF;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1) !important;
+    border-color: #fff !important;
+    // border: 2px solid $color-brand1-5 !important;
+    color: $color-fill1-1;
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 64px;
+  height: 76px;
+  border: none;
+  padding-top: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $color-brand1-1;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1);
+  }
+}
+
+.icon {
+  width: 30px;
+}
+
+.text {
+  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/components/LayoutTagImageSelect/index.js

@@ -0,0 +1,55 @@
+"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 _LayoutTemplateButton = _interopRequireDefault(require("../LayoutTemplateButton"));
+
+var _LayoutTagSelect = _interopRequireDefault(require("../LayoutTagSelect"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var _excluded = ["dataSource", "onChange", "size", "boxProps", "tagProps", "itemProps", "ItemComponent", "disabled", "value"];
+
+var TagImageSelect = function TagImageSelect(props) {
+  var dataSource = props.dataSource,
+      onChange = props.onChange,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent,
+      disabled = props.disabled,
+      value = props.value,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  var Item = ItemComponent || _LayoutTemplateButton["default"];
+  return /*#__PURE__*/_react["default"].createElement(_LayoutTagSelect["default"], (0, _extends2["default"])({}, otherProps, {
+    onChange: onChange,
+    className: _indexModule["default"].tagSelect,
+    value: value,
+    disabled: disabled,
+    dataSource: dataSource.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/_react["default"].createElement(Item, (0, _extends2["default"])({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  }));
+};
+
+var _default = TagImageSelect;
+exports["default"] = _default;

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

@@ -0,0 +1,7 @@
+.name {
+  margin: 20px 0 0 10px;
+}
+
+.tagSelect {
+  border: none;
+}

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

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _tag = _interopRequireDefault(require("@alifd/next/lib/tag"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+require("./index.scss");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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; }
+
+/* eslint-disable eqeqeq */
+var SelectableTag = _tag["default"].Selectable;
+
+var TagSelect = function TagSelect(props) {
+  var _onChange = props.onChange,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
+      size = props.size,
+      disabled = props.disabled,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps;
+
+  var _useState = (0, _react.useState)(value || defaultValue),
+      current = _useState[0],
+      setCurrent = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    // if (value) {
+    // }
+    setCurrent(value);
+  }, [value]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tag-select-wrap"
+  }, /*#__PURE__*/_react["default"].createElement(_box["default"], (0, _extends2["default"])({
+    spacing: 12,
+    wrap: true,
+    direction: "row"
+  }, boxProps), dataSource.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tag-select-item",
+      key: "wrap-" + item.key
+    }, /*#__PURE__*/_react["default"].createElement(SelectableTag, (0, _extends2["default"])({
+      key: item.key,
+      checked: current === item.key // eslint-disable-next-line eqeqeq
+      ,
+      disabled: disabled(item.key),
+      onChange: function onChange(checked) {
+        _onChange && _onChange(item.key);
+
+        if (!('value' in props)) {
+          setCurrent(item.key);
+        }
+      }
+    }, tagProps), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])({
+        'tag-select-texts': disabled(item.key)
+      })
+    }, item.content)));
+  })));
+};
+
+TagSelect.propTypes = {
+  // eslint-disable-next-line react/require-default-props
+  onChange: _propTypes["default"].func,
+  // eslint-disable-next-line react/require-default-props
+  value: _propTypes["default"].string,
+  // eslint-disable-next-line react/require-default-props
+  defaultValue: _propTypes["default"].string,
+  // eslint-disable-next-line react/require-default-props
+  dataSource: _propTypes["default"].array,
+  boxProps: _propTypes["default"].any
+};
+TagSelect.defaultProps = {
+  boxProps: {}
+};
+var _default = TagSelect;
+exports["default"] = _default;

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

@@ -0,0 +1,32 @@
+/* write style here */
+@import '@alifd/next/variables.scss';
+
+.tag-select-wrap {
+  .tag-select-item {
+    text-align: -webkit-center;
+
+    .#{$css-prefix}tag {
+      height: auto;
+      line-height: 0;
+
+      &::before {
+        z-index: 1;
+      }
+
+      &::after {
+        z-index: 1;
+      }
+
+      .#{$css-prefix}tag-body {
+        width: 100%;
+        padding: 0;
+
+        .tag-select-img {}
+      }
+      .tag-select-texts{
+        color: #C9CED2;
+        opacity: 0.6;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _assets = _interopRequireDefault(require("./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 || _assets["default"][type];
+  return /*#__PURE__*/_react["default"].createElement("img", {
+    className: className,
+    style: style,
+    src: src,
+    alt: alt
+  });
+};
+
+var _default = Icon;
+exports["default"] = _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _topo_layout_circular = _interopRequireDefault(require("./topo_layout_circular.svg"));
+
+var _topo_layout_hierarchical = _interopRequireDefault(require("./topo_layout_hierarchical.svg"));
+
+var _topo_layout_toward = _interopRequireDefault(require("./topo_layout_toward.svg"));
+
+var _topo_layout_rectangle = _interopRequireDefault(require("./topo_layout_rectangle.svg"));
+
+var _default = {
+  'layout_rectangle': _topo_layout_rectangle["default"],
+  'layout_circular': _topo_layout_circular["default"],
+  'layout_hierarchical': _topo_layout_hierarchical["default"],
+  'layout_toward': _topo_layout_toward["default"]
+};
+exports["default"] = _default;

package/lib/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/lib/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>