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

package/lib/core/editor/components/plugins/AddElementThemePlugin.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useNewElementTheme = _interopRequireDefault(require("../../hooks/useNewElementTheme"));
+
+function AddElementThemePlugin(props) {
+  (0, _useNewElementTheme["default"])({
+    topo: props.topo
+  });
+  return null;
+}
+
+var _default = AddElementThemePlugin;
+exports["default"] = _default;

package/lib/core/editor/components/settings/CloseablePanel.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _configProvider = _interopRequireDefault(require("@alifd/next/lib/config-provider"));
+
+var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CloseablePanelModule = _interopRequireDefault(require("./CloseablePanel.module.scss"));
+
+function CloseablePanel(props) {
+  var prefix = props.prefix,
+      title = props.title,
+      onClose = props.onClose,
+      children = props.children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _CloseablePanelModule["default"].panel
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix + "drawer-header",
+    role: "heading",
+    "aria-level": "1"
+  }, title, /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    "aria-label": "\u5173\u95ED",
+    className: prefix + "drawer-close",
+    onClick: onClose
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    type: "close",
+    className: "next-drawer-close-icon"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _CloseablePanelModule["default"].body
+  }, children));
+}
+
+CloseablePanel.defaultProps = {
+  prefix: 'next-'
+};
+
+var _default = _configProvider["default"].config(CloseablePanel);
+
+exports["default"] = _default;

package/lib/core/editor/components/settings/CloseablePanel.module.scss

@@ -0,0 +1,21 @@
+@import '~@alifd/next/variables.scss';
+
+
+.panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+
+  
+  :global {
+    .#{$css-prefix}drawer-header {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
+}
+.body {
+  flex: 1;
+  overflow: auto;
+}

package/lib/core/editor/components/settings/PropertyView.js

@@ -3,45 +3,92 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = PropertyView;
+exports["default"] = PropertyPanel;
 
-var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CloseablePanel = _interopRequireDefault(require("./CloseablePanel"));
+
+var _edgePropertyViewAdapter = require("./core/edgePropertyViewAdapter");
+
+var _PropertyViewManager = _interopRequireDefault(require("./core/PropertyViewManager"));
 
 var _Settings = _interopRequireDefault(require("./Settings"));
 
 var _SettingsModule = _interopRequireDefault(require("./Settings.module.scss"));
 
-function PropertyView(props) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function PropertyPanel(props) {
+  var _classNames;
+
   var topo = props.topo,
       editorProps = props.editorProps;
   var store = topo.store;
   var topoState = store.useModelState('topoMod');
+  var topoShowType = topoState.type,
+      graphLoaded = topoState.graphLoaded;
 
   var _store$useModelState = store.useModelState('selection'),
       selection = _store$useModelState.selection;
 
-  var topoId = topoState.topoId,
-      topoShowType = topoState.type;
+  var _topo$store$useModel = topo.store.useModel('topoEdit'),
+      topoEditState = _topo$store$useModel[0],
+      topoEditDispatchers = _topo$store$useModel[1];
+
+  var propertyPanelVisible = topoEditState.propertyPanelVisible;
+  var propertyViewManager = (0, _react.useMemo)(function () {
+    return new _PropertyViewManager["default"](topo);
+  }, []); // 临时适配连线属性面板类型，后期组件支持自定义适配
+
+  (0, _edgePropertyViewAdapter.addEdgePropertyViews)(propertyViewManager, editorProps);
 
-  if (!topoId || !topoShowType) {
-    return null;
-  }
+  propertyViewManager.customGetViewType = editorProps.getPropertyViewType || function (elements) {
+    return (0, _edgePropertyViewAdapter.adapterGetEdgePropertyViewType)(elements, editorProps);
+  };
+
+  var PropertyView = propertyViewManager.getPropertyView();
+  (0, _react.useEffect)(function () {
+    if (graphLoaded) {
+      propertyViewManager.init();
+    }
+
+    return function () {
+      propertyViewManager.destroy();
+    };
+  }, [graphLoaded, propertyViewManager]); // 没有视图关闭属性面板
+
+  (0, _react.useEffect)(function () {
+    if (propertyPanelVisible && !PropertyView) {
+      propertyViewManager.close();
+    }
+  }, [propertyPanelVisible, PropertyView, propertyViewManager]);
 
   var renderContent = function renderContent() {
-    if (!topoId || !topoShowType) {
+    if (!propertyPanelVisible || !PropertyView) {
       return null;
     }
 
     return /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
       topo: topo,
+      selection: selection,
+      PropertyView: PropertyView,
       topoShowType: topoShowType,
       topoEditApi: topo.topoEdit,
-      selection: selection,
       editorProps: editorProps
     });
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _SettingsModule["default"].settingsPanel
-  }, renderContent());
+    className: (0, _classnames["default"])(_SettingsModule["default"].propertyPanel, (_classNames = {}, _classNames[_SettingsModule["default"].hide] = !propertyPanelVisible, _classNames))
+  }, /*#__PURE__*/_react["default"].createElement(_CloseablePanel["default"], {
+    title: "\u6570\u636E\u5C5E\u6027",
+    onClose: function onClose() {
+      propertyViewManager.close();
+    }
+  }, renderContent()));
 }

package/lib/core/editor/components/settings/Settings.js

@@ -3,149 +3,67 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = Settings;
+exports["default"] = PropertyViewContainer;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _htElementDataUtil = require("../../../../utils/htElementDataUtil");
-
-var _propertyViews = _interopRequireDefault(require("./propertyViews"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useSettingRuntimeState = _interopRequireDefault(require("./useSettingRuntimeState"));
 
-var _SettingsModule = _interopRequireDefault(require("./Settings.module.scss"));
+var _updateElementProperty = _interopRequireDefault(require("./core/updateElementProperty"));
 
-function getElementType(selection) {
-  var selectionElement = selection[0];
-  var selectionSize = selection.length;
-  var elementType;
+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); }
 
-  if (!selectionSize) {
-    // 未选
-    elementType = "view";
-  } else if (selectionSize >= 2) {
-    // 多选
-    elementType = "multiple";
-  } else if ((0, _htElementDataUtil.isGroup)(selectionElement)) {
-    elementType = "group";
-  } else if (selectionElement.attrObject.topLeftText) {
-    // TODO 临时方式
-    elementType = "box";
-  } else if ((0, _htElementDataUtil.isNode)(selectionElement)) {
-    elementType = "node";
-  } else if ((0, _htElementDataUtil.isEdge)(selectionElement)) {
-    elementType = "edge";
-  } else if ((0, _htElementDataUtil.isLayer)(selectionElement)) {
-    // 分层
-    elementType = "layer";
-  } else if ((0, _htElementDataUtil.isText)(selectionElement)) {
-    elementType = "text";
-  }
+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; }
 
-  return elementType;
+function buildElementValues(selection) {
+  var values = (0, _extends2["default"])({}, selection[0]);
+  var attrTypes = ['attrObject', 'position', 'styleMap'];
+  attrTypes.forEach(function (type) {
+    Object.keys(values[type] || {}).forEach(function (key) {
+      values[type + "." + key] = values[type][key];
+    });
+  });
+  return values;
 }
 
-function Settings(props) {
+function PropertyViewContainer(props) {
   var topo = props.topo,
       topoShowType = props.topoShowType,
       topoEditApi = props.topoEditApi,
       selection = props.selection,
-      editorProps = props.editorProps;
-  var settingRuntimeState = (0, _useSettingRuntimeState["default"])(); // const selectionSize = selection.length;
-  // const selectionIds = selection.map((item) => item.id).join(",");
-  // useEffect(() => {
-  // const selectionModel = topo.getSelectionModel();
-  // console.info('selection change', selection)
-  // }, [selection]);
-  // TODO 待优化
-
-  var updateElementProperty = function updateElementProperty(name, value) {
-    // const element = topo.getDataModel().getDataById(selection[0].id);
-    var gv = topo.view.topoClient.getGraphView();
-    var element = topo.getSelectionModel().getFirstData(); // console.info("updateElementProperty",topo.getSelectionModel().getSelection(), { selection, element, name, value });
-
-    if (name.startsWith("attrObject.")) {
-      element.setAttr(name.replace("attrObject.", ""), value);
-    } else if (name.startsWith("position.")) {
-      element.setPosition(name.replace("position.", ""), value);
-    } else if (name.startsWith("styleMap.")) {
-      element.setStyle(name.replace("styleMap.", ""), value);
-    } else if (name === "name") {
-      element.setName(value);
-    } else if (name === "width") {
-      element.setWidth(value);
-    } else if (name === "height") {
-      element.setHeight(value);
-    } else if (name === "image") {
-      element.setImage(value);
-    } else if (name === "layout") {
-      // console.info("element----layout", element, value);
-      var layouType = value.id === "toward" ? "" + value.id + value.options.subId : value.id; // console.info(
-      //   "element----layout",
-      //   topo.view.topoClient.htTopoClient,
-      //   layouType
-      // );
-
-      topo.getHtTopo().layoutInContainer(layouType); // let autoLayout = new ht.layout.AutoLayout(gv);
-      // const layouType=value.id==='toward'?`${value.id}${value.options.subId}`:value.id;
-      // gv.dm().sm().ss(element.getChildren());
-      // autoLayout.layout(layouType, function () {
-      //   gv.dm().sm().ss(element);
-      // });
-    } else if (name === "groupAlign") {
-      var selectList = [];
-
-      if (selection.length === 1) {
-        // 选择分层
-        if (element instanceof ht.Grid) {
-          // selectList = gv
-          //   .dm()
-          //   .toDatas((d) => d.getHost() === gv.dm().sm().ld())
-          //   .toArray();
-          selectList = element.getChildren().toArray();
-        } // 选择分区
-
-
-        if (element instanceof ht.Group) {
-          selectList = element.getChildren().toArray();
-        }
-      } else {
-        selectList = topo.getSelectionModel().getSelection().toArray();
-      } // console.info("element--selectList", element, selectList);
-
-
-      topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(value, selectList);
-    }
-  };
-
-  var elementType = getElementType(selection);
-  var PropertyView = _propertyViews["default"][elementType];
-
-  if (!PropertyView) {
-    return null;
+      editorProps = props.editorProps,
+      PropertyView = props.PropertyView;
+  var settingRuntimeState = (0, _useSettingRuntimeState["default"])();
+  var selectionElements = (0, _react.useMemo)(function () {
+    return topo.selectionModel.getSelection();
+  }, [selection]); // 不建议使用，直接使用ht元素对象。待优化
+
+  var singleElementValues = (0, _react.useMemo)(function () {
+    return selection.length === 1 ? buildElementValues(selection) : undefined;
+  }, [selection]);
+  var elementProps = {};
+
+  if (selection.length === 1) {
+    elementProps = {
+      selectionElement: selectionElements[0],
+      values: singleElementValues
+    };
   }
 
-  var attrTypes = ["attrObject", "position", "styleMap"];
-  var values = (0, _extends2["default"])({}, selection[0]);
-  attrTypes.forEach(function (type) {
-    Object.keys(values[type] || {}).forEach(function (key) {
-      values[type + "." + key] = values[type][key];
-    });
-  });
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _SettingsModule["default"].settings
-  }, /*#__PURE__*/_react["default"].createElement(PropertyView, {
-    type: elementType,
+  return /*#__PURE__*/_react["default"].createElement(PropertyView, (0, _extends2["default"])({
     topo: topo,
+    selection: selection,
+    selectionElements: selectionElements,
     topoShowType: topoShowType,
     topoEdit: topoEditApi,
     topoEditApi: topoEditApi,
-    selection: selection,
-    values: values,
-    onChange: updateElementProperty,
-    editorProps: editorProps,
+    editorProps: editorProps
+  }, elementProps, {
+    onChange: function onChange(name, value) {
+      (0, _updateElementProperty["default"])(topo, name, value);
+    },
     settingRuntimeState: settingRuntimeState
   }));
 }

package/lib/core/editor/components/settings/Settings.module.scss

@@ -1,20 +1,23 @@
 @import '~@alifd/next/variables.scss';
 
-.settingsPanel {
+.propertyPanel {
   width: 280px;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
   border-radius: 2px;
-  //border: 1px solid #E6E7EB;
-  //border-left: none;
+  border-left: 1px solid #E6E7EB;
 
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transition: width .1s linear;
 
-  //margin-top: 47px;
+  &.hide {
+    width: 0;
+    border-left: none;
+  }
 
   :global {
     // 滚动条
@@ -71,10 +74,3 @@
     align-items: center;
   }
 }
-
-.settings {
-  flex: 1;
-  background: #FFFFFF;
-  overflow: auto;
-  // padding-bottom: 12px;
-}

package/lib/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss

@@ -6,7 +6,7 @@
       background: #EBECF0;
       margin-right: 3px;
       height: 16px;
-
+      width:1px;
     }
   }
 
@@ -16,8 +16,8 @@
     border-radius: 4px;
     border: none !important;
     color: #4D6277;
-    padding-left: 6px;
-    margin-right: 3px;
+    padding-left: 2px;
+    margin-right: 4px;
 
     &:active {
       background: #F2F7FD !important;

package/lib/core/editor/components/settings/common/AlignSetting/AlignTypeList.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+
+var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AlignSettingModule = _interopRequireDefault(require("./AlignSetting.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 TREE_LAYOUT_OPTIONS = [{
+  value: 'left',
+  label: '左对齐',
+  icon: 'tuopu_zuoceduiqi'
+}, {
+  value: 'center',
+  label: '水平居中',
+  icon: 'tuopu_shuipingjuzhongduiqi'
+}, {
+  value: 'right',
+  label: '右对齐',
+  icon: 'tuopu_youceduiqi'
+}, {
+  value: 'top',
+  label: '靠上对齐',
+  icon: 'tuopu_dingbuduiqi'
+}, {
+  value: 'middle',
+  label: '垂直居中',
+  icon: 'tuopu_chuizhijuzhongduiqi'
+}, {
+  value: 'bottom',
+  label: '靠下对齐',
+  icon: 'tuopu_dibuduiqi'
+}, {
+  value: 'divide'
+}, {
+  value: 'distributeHorizontal',
+  label: '横向分布',
+  icon: 'tuopu_shuipingdengjianjuduiqi'
+}, {
+  value: 'distributeVertical',
+  label: '纵向分布',
+  icon: 'tuopu_chuizhidengjianjuduiqi'
+}];
+
+var AlignTypeList = function AlignTypeList(props) {
+  var _props$selected = props.selected,
+      selected = _props$selected === void 0 ? 'left' : _props$selected,
+      onChange = props.onChange,
+      distributionDisabled = props.distributionDisabled;
+
+  var _useState = (0, _react.useState)(selected),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var handleChange = function handleChange(data) {
+    // console.log("handleChange", data);
+    onChange && onChange(data.value);
+    setValue(data.value); // setValue(data)
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _AlignSettingModule["default"].AlignSetting
+  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
+    return item.value === 'divide' ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+      key: index,
+      direction: "ver"
+    }) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      key: index,
+      className: "" + _AlignSettingModule["default"].redioBtn,
+      text: true,
+      onClick: function onClick() {
+        handleChange(item);
+      },
+      title: item.label // eslint-disable-next-line no-unneeded-ternary
+      ,
+      disabled: (item.value === 'distributeHorizontal' || item.value === 'distributeVertical') && distributionDisabled
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      type: item.icon
+    }));
+  }));
+};
+
+var _default = AlignTypeList;
+exports["default"] = _default;

package/lib/core/editor/components/settings/common/AlignSetting/index.js

@@ -3,91 +3,32 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = void 0;
+exports["default"] = AlignSetting;
 
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+var _react = _interopRequireDefault(require("react"));
 
-var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+var _htElementUtils = require("../../../../../../utils/htElementUtils");
 
-var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
+var _AlignTypeList = _interopRequireDefault(require("./AlignTypeList"));
 
-var _react = _interopRequireWildcard(require("react"));
+function AlignSetting(props) {
+  var topo = props.topo,
+      distributionDisabled = props.distributionDisabled;
 
-var _AlignSettingModule = _interopRequireDefault(require("./AlignSetting.module.scss"));
+  var alignOnChange = function alignOnChange(type) {
+    topo.historyManager.beginTransaction();
+    var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (ele) {
+      return !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
+    }); // console.info("element--selectList", element, selectList);
 
-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 TREE_LAYOUT_OPTIONS = [{
-  value: "left",
-  label: "左对齐",
-  icon: "tuopu_zuoceduiqi"
-}, {
-  value: "center",
-  label: "水平居中",
-  icon: "tuopu_shuipingjuzhongduiqi"
-}, {
-  value: "right",
-  label: "右对齐",
-  icon: "tuopu_youceduiqi"
-}, {
-  value: "top",
-  label: "靠上对齐",
-  icon: "tuopu_dingbuduiqi"
-}, {
-  value: "middle",
-  label: "垂直居中",
-  icon: "tuopu_chuizhijuzhongduiqi"
-}, {
-  value: "bottom",
-  label: "靠下对齐",
-  icon: "tuopu_dibuduiqi"
-}, {
-  value: "divide"
-}, {
-  value: "distributeHorizontal",
-  label: "横向分布",
-  icon: "tuopu_shuipingdengjianjuduiqi"
-}, {
-  value: "distributeVertical",
-  label: "纵向分布",
-  icon: "tuopu_chuizhidengjianjuduiqi"
-}];
-
-var AlignSetting = function AlignSetting(props) {
-  var _props$selected = props.selected,
-      selected = _props$selected === void 0 ? "left" : _props$selected,
-      onChange = props.onChange;
-
-  var _useState = (0, _react.useState)(selected),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var handleChange = function handleChange(data) {
-    // console.log("handleChange", data);
-    onChange && onChange(data.value);
-    setValue(data.value); // setValue(data)
+    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes);
+    topo.historyManager.endTransaction();
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _AlignSettingModule["default"].AlignSetting
-  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
-    return item.value === "divide" ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-      key: index,
-      direction: "ver"
-    }) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      key: index,
-      className: "" + _AlignSettingModule["default"].redioBtn,
-      onClick: function onClick() {
-        handleChange(item);
-      },
-      title: item.label
-    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-      type: item.icon
-    }));
-  }));
-};
-
-var _default = AlignSetting;
-exports["default"] = _default;
+  return /*#__PURE__*/_react["default"].createElement(_AlignTypeList["default"], {
+    onChange: alignOnChange,
+    selected: "left",
+    distributionDisabled: distributionDisabled
+  });
+}

package/lib/core/editor/components/settings/common/GroupNodeList/ResourceList.module.scss

@@ -2,6 +2,7 @@
 
 .list {
   max-height: 100%;
+  margin-top: -8px;
 
   .item{
     display: flex;