@riil-frontend/component-topology 6.0.0-alpha.27 → 6.0.0-alpha.29

package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js

@@ -37,7 +37,7 @@ function EdgeColorButton(props) {
       disabled = _useState[0],
       setDisabled = _useState[1];
 
-  var _useState2 = (0, _react.useState)(2),
+  var _useState2 = (0, _react.useState)(),
       lineWidth = _useState2[0],
       setLineWidth = _useState2[1]; // 拓扑图是否加载
 
@@ -49,26 +49,27 @@ function EdgeColorButton(props) {
   var selection = topo.selectionManager.useHtSelection();
 
   var getLines = function getLines(list) {
-    if (list[0] && list[0].isEdgeGroupAgent()) {
-      var data = list[0].getEdgeGroup().getEdges().toArray(); // eslint-disable-next-line eqeqeq
-
-      return data.filter(function (item) {
-        return item.getAttrObject().type == 'line';
-      });
-    } else {
+    // eslint-disable-next-line prefer-const
+    var arr = [];
+    (0, _edgeTypeStyleUtil.loopEdgesAndChildren)(topo, list, function (edge) {
       // eslint-disable-next-line eqeqeq
-      return list.filter(function (item) {
-        return item.getAttrObject().type == 'line';
-      });
-    }
+      if (edge.getAttrObject().type == 'line') {
+        arr.push(edge);
+      }
+    });
+    return arr;
   };
 
   (0, _react.useEffect)(function () {
     if (graphLoaded) {
       var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
       var list = getLines(edges);
-      console.log(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
-      setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
+      setLineWidth(0); // eslint-disable-next-line eqeqeq
+
+      if (selection.length == 1 && selection[0].getAttrObject().type == 'line') {
+        setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
+      }
+
       setDisabled(!list.length);
     }
   }, [selection, graphLoaded]);

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

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -17,6 +19,8 @@ var _AlignSetting = _interopRequireDefault(require("../../settings/common/AlignS
 
 var _htElementUtils = require("../../../../../utils/htElementUtils");
 
+var _NodeAlignWidgetModule = _interopRequireDefault(require("./NodeAlignWidget.module.scss"));
+
 var _excluded = ["topo", "showLabel"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -30,7 +34,23 @@ function NodeAlignWidget(props) {
 
   var _useState = (0, _react.useState)(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 拓扑图是否加载
+      setDisabled = _useState[1];
+
+  var _useState2 = (0, _react.useState)(),
+      leftInputVal = _useState2[0],
+      setLeftInputVal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      rightInputVal = _useState3[0],
+      setRightInputVal = _useState3[1];
+
+  var _useState4 = (0, _react.useState)(true),
+      leftDisable = _useState4[0],
+      setLeftDisable = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      rightDisable = _useState5[0],
+      setRightDisable = _useState5[1]; // 拓扑图是否加载
 
 
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
@@ -38,6 +58,41 @@ function NodeAlignWidget(props) {
 
 
   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 !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
+    });
+    topo.view.topoClient.htTopoClient.setElementsSpace(nodes, type, num);
+    topo.historyManager.endTransaction();
+  };
+
+  var leftInputChange = function leftInputChange(v) {
+    if (v * 1 < 0) {
+      setLeftInputVal(0);
+    } else if (v * 1 > 10000) {
+      setLeftInputVal(10000);
+    } else {
+      setLeftInputVal(v);
+    }
+
+    setSpace('v', leftInputVal);
+  };
+
+  var rightInputChange = function rightInputChange(v) {
+    if (v * 1 < 0) {
+      setRightInputVal(0);
+    } else if (v * 1 > 10000) {
+      setRightInputVal(10000);
+    } else {
+      setRightInputVal(v);
+    }
+
+    setSpace('h', rightInputVal);
+  };
+
   (0, _react.useEffect)(function () {
     if (graphLoaded) {
       var selectionEle = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
@@ -45,8 +100,23 @@ function NodeAlignWidget(props) {
         return !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
       });
       setDisabled(nodes.length <= 1);
+      getClickType('none');
     }
   }, [graphLoaded, selection]);
+
+  var getClickType = function getClickType(type) {
+    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["default"].createElement("img", {
     src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
     alt: ""
@@ -63,7 +133,26 @@ function NodeAlignWidget(props) {
     disabled: disabled,
     trigger: icon
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_AlignSetting["default"], {
-    topo: topo
+    topo: topo,
+    getClickType: getClickType
+  }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    disabled: leftDisable,
+    size: "small",
+    placeholder: "\u591A\u4E2A\u503C",
+    className: _NodeAlignWidgetModule["default"].leftInput,
+    value: leftInputVal,
+    htmlType: "number",
+    maxLength: 5,
+    onChange: leftInputChange
+  }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    disabled: rightDisable,
+    size: "small",
+    placeholder: "\u591A\u4E2A\u503C",
+    className: _NodeAlignWidgetModule["default"].rightInput,
+    value: rightInputVal,
+    htmlType: "number",
+    maxLength: 5,
+    onChange: rightInputChange
   }))));
 }
 

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

@@ -0,0 +1,12 @@
+.leftInput{
+  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
+  background-position: right center;
+  width: 100px;
+  margin-right: 10px;
+  margin-left: 5px;
+}
+.rightInput{
+  width: 100px;
+  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
+  background-position: right center;
+}

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

@@ -12,16 +12,19 @@ var _htElementUtils = require("../../../../../../utils/htElementUtils");
 var _AlignTypeList = _interopRequireDefault(require("./AlignTypeList"));
 
 function AlignSetting(props) {
-  var topo = props.topo;
+  var topo = props.topo,
+      getClickType = props.getClickType;
 
   var alignOnChange = function alignOnChange(type) {
+    getClickType(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);
 
-    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes);
+    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes); // topo.view.topoClient.htTopoClient.setElementsSpace(nodes,'h',300)
+
     topo.historyManager.endTransaction();
   };
 

package/lib/core/models/TopoApp.js

@@ -52,7 +52,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
 var _SelectionManager = _interopRequireDefault(require("./SelectionManager"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "6.0.0-alpha.27" === 'string' ? "6.0.0-alpha.27" : null;
+var version = typeof "6.0.0-alpha.29" === 'string' ? "6.0.0-alpha.29" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "6.0.0-alpha.27",
+  "version": "6.0.0-alpha.29",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -115,6 +115,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.27/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.29/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }