@riil-frontend/component-topology 8.0.0-a.3 → 8.0.0-a.5

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js

@@ -2,6 +2,7 @@ import _Field from "@alifd/next/es/field";
 import _Select from "@alifd/next/es/select";
 import _Form from "@alifd/next/es/form";
 import React, { useEffect } from 'react';
+import { getEdgesBySelection, loopEdgesAndChildren } from "../../../../utils/edgeTypeStyleUtil";
 import styles from "./EdgeType.module.scss";
 import LineType from "./LineType";
 var FormItem = _Form.Item;
@@ -60,43 +61,60 @@ var LINE_MOLD_OPTIONS = [{
   icon: 'topo_lineMold_dotted_two'
 }];
 
-function getValuesBySelection(selection) {
+function getValuesByEdges(topo) {
+  function getStartPoint(edge) {
+    var icons = edge.s('icons') || {};
+    return ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].filter(function (name) {
+      return icons[name];
+    })[0] || 'nil';
+  }
+
+  function getEndPoint(edge) {
+    var icons = edge.s('icons') || {};
+    return ['targetArrow', 'targetSolidCircle', 'targetNoneCircle'].filter(function (name) {
+      return icons[name];
+    })[0] || 'nil';
+  }
+
+  var selectionEdges = getEdgesBySelection(topo);
+  var edgeValues = [];
+  loopEdgesAndChildren(topo, selectionEdges, function (edge) {
+    edgeValues.push({
+      lineButton: edge.s('edge.type'),
+      startPoint: getStartPoint(edge),
+      endPoint: getEndPoint(edge),
+      lineMold: edge.a('lineMode') || 'solidLine'
+    });
+  });
   var values = {
+    lineButton: undefined,
     startPoint: undefined,
     endPoint: undefined,
     lineMold: undefined
-  }; // 仅一条连线选中时回显
-
-  if (selection.length === 1) {
-    var edge = selection[0];
-    values = {
-      startPoint: 'nil',
-      endPoint: 'nil',
-      lineMold: edge.a('lineMode') || 'solidLine'
-    };
-    var icons = edge.s('icons') || {};
-    ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].forEach(function (name) {
-      if (icons[name]) {
-        values.startPoint = name;
-      }
+  };
+  Object.keys(values).forEach(function (name) {
+    var vals = edgeValues.map(function (item) {
+      return item[name];
     });
-    ['targetArrow', 'targetSolidCircle', 'targetNoneCircle'].forEach(function (name) {
-      if (icons[name]) {
-        values.endPoint = name;
-      }
-    });
-  }
+    var isSame = vals.filter(function (val) {
+      return val === vals[0];
+    }).length === vals.length;
 
+    if (isSame) {
+      values[name] = vals[0];
+    }
+  });
   return values;
 }
 
 function EdgeType(props) {
-  var selection = props.selection,
+  var topo = props.topo,
+      selection = props.selection,
       _onChange = props.onChange;
 
   var field = _Field.useField({
     autoUnmount: false,
-    values: getValuesBySelection(selection),
+    values: getValuesByEdges(topo),
     onChange: function onChange(name, value) {
       if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
         _onChange(name, null);
@@ -107,7 +125,7 @@ function EdgeType(props) {
   });
 
   useEffect(function () {
-    field.setValues(getValuesBySelection(selection));
+    field.setValues(getValuesByEdges(topo));
   }, [selection]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.lineBox

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -1,6 +1,7 @@
 import _Button from "@alifd/next/es/button";
 import _Balloon from "@alifd/next/es/balloon";
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import styles from "./LineType.module.scss";
 var Tooltip = _Balloon.Tooltip;
 var LINE_TYPE_OPTIONS = [{
@@ -25,11 +26,14 @@ var LINE_TYPE_OPTIONS = [{
   icon: 'topo_linear_icon_arcline'
 }];
 var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var onChange = props.onChange;
+  var value = props.value,
+      onChange = props.onChange;
 
   function lineButton(item) {
+    var _classNames;
+
     return /*#__PURE__*/React.createElement(_Button, {
-      className: "" + styles.redioBtn,
+      className: classNames(styles.redioBtn, (_classNames = {}, _classNames[styles.selected] = value === item.value, _classNames)),
       onClick: function onClick() {
         onChange(item.value);
       }
@@ -50,4 +54,5 @@ var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, item.label);
   }));
 });
+LineType.displayName = 'LineType';
 export default LineType;

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss

@@ -21,6 +21,10 @@
     &:hover {
       background: #F2F7FD !important;
     }
+
+    &.selected {
+      background: #F2F7FD !important;
+    }
   }
   .redioBtn:last-child{
     margin-right: 0;

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -109,6 +109,7 @@ function EdgeTypeButton(props) {
     disabled: disabled,
     trigger: icon
   }, !disabled && /*#__PURE__*/React.createElement(EdgeType, {
+    topo: topo,
     selection: selection,
     onChange: handleChange
   })));

package/es/core/editor/utils/edgeTypeStyleUtil.js

@@ -14,8 +14,7 @@ export function getEdgesBySelection(topo) {
     return nodeIds;
   };
 
-  var getSelectedEdges = function getSelectedEdges(topo) {
-    var gv = topo.getGraphView();
+  var getSelectedEdges = function getSelectedEdges(gv) {
     var selection = gv.getSelectionModel().getSelection().toArray(); // 选中的连线
 
     var edges = selection.filter(function (element) {
@@ -41,7 +40,7 @@ export function getEdgesBySelection(topo) {
     return edges;
   };
 
-  return getSelectedEdges(topo);
+  return getSelectedEdges(topo.getGraphView());
 }
 /**
  * 遍历连线及子连线

package/es/core/models/TopoApp.js

@@ -23,7 +23,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "8.0.0-a.3" === 'string' ? "8.0.0-a.3" : null;
+var version = typeof "8.0.0-a.5" === 'string' ? "8.0.0-a.5" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js

@@ -13,6 +13,8 @@ var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _edgeTypeStyleUtil = require("../../../../utils/edgeTypeStyleUtil");
+
 var _EdgeTypeModule = _interopRequireDefault(require("./EdgeType.module.scss"));
 
 var _LineType = _interopRequireDefault(require("./LineType"));
@@ -77,43 +79,60 @@ var LINE_MOLD_OPTIONS = [{
   icon: 'topo_lineMold_dotted_two'
 }];
 
-function getValuesBySelection(selection) {
+function getValuesByEdges(topo) {
+  function getStartPoint(edge) {
+    var icons = edge.s('icons') || {};
+    return ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].filter(function (name) {
+      return icons[name];
+    })[0] || 'nil';
+  }
+
+  function getEndPoint(edge) {
+    var icons = edge.s('icons') || {};
+    return ['targetArrow', 'targetSolidCircle', 'targetNoneCircle'].filter(function (name) {
+      return icons[name];
+    })[0] || 'nil';
+  }
+
+  var selectionEdges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
+  var edgeValues = [];
+  (0, _edgeTypeStyleUtil.loopEdgesAndChildren)(topo, selectionEdges, function (edge) {
+    edgeValues.push({
+      lineButton: edge.s('edge.type'),
+      startPoint: getStartPoint(edge),
+      endPoint: getEndPoint(edge),
+      lineMold: edge.a('lineMode') || 'solidLine'
+    });
+  });
   var values = {
+    lineButton: undefined,
     startPoint: undefined,
     endPoint: undefined,
     lineMold: undefined
-  }; // 仅一条连线选中时回显
-
-  if (selection.length === 1) {
-    var edge = selection[0];
-    values = {
-      startPoint: 'nil',
-      endPoint: 'nil',
-      lineMold: edge.a('lineMode') || 'solidLine'
-    };
-    var icons = edge.s('icons') || {};
-    ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].forEach(function (name) {
-      if (icons[name]) {
-        values.startPoint = name;
-      }
+  };
+  Object.keys(values).forEach(function (name) {
+    var vals = edgeValues.map(function (item) {
+      return item[name];
     });
-    ['targetArrow', 'targetSolidCircle', 'targetNoneCircle'].forEach(function (name) {
-      if (icons[name]) {
-        values.endPoint = name;
-      }
-    });
-  }
+    var isSame = vals.filter(function (val) {
+      return val === vals[0];
+    }).length === vals.length;
 
+    if (isSame) {
+      values[name] = vals[0];
+    }
+  });
   return values;
 }
 
 function EdgeType(props) {
-  var selection = props.selection,
+  var topo = props.topo,
+      selection = props.selection,
       _onChange = props.onChange;
 
   var field = _field["default"].useField({
     autoUnmount: false,
-    values: getValuesBySelection(selection),
+    values: getValuesByEdges(topo),
     onChange: function onChange(name, value) {
       if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
         _onChange(name, null);
@@ -124,7 +143,7 @@ function EdgeType(props) {
   });
 
   (0, _react.useEffect)(function () {
-    field.setValues(getValuesBySelection(selection));
+    field.setValues(getValuesByEdges(topo));
   }, [selection]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _EdgeTypeModule["default"].lineBox

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -11,6 +11,8 @@ var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _LineTypeModule = _interopRequireDefault(require("./LineType.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); }
@@ -41,11 +43,14 @@ var LINE_TYPE_OPTIONS = [{
 }];
 
 var LineType = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var onChange = props.onChange;
+  var value = props.value,
+      onChange = props.onChange;
 
   function lineButton(item) {
+    var _classNames;
+
     return /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      className: "" + _LineTypeModule["default"].redioBtn,
+      className: (0, _classnames["default"])(_LineTypeModule["default"].redioBtn, (_classNames = {}, _classNames[_LineTypeModule["default"].selected] = value === item.value, _classNames)),
       onClick: function onClick() {
         onChange(item.value);
       }
@@ -67,5 +72,6 @@ var LineType = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }));
 });
 
+LineType.displayName = 'LineType';
 var _default = LineType;
 exports["default"] = _default;

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss

@@ -21,6 +21,10 @@
     &:hover {
       background: #F2F7FD !important;
     }
+
+    &.selected {
+      background: #F2F7FD !important;
+    }
   }
   .redioBtn:last-child{
     margin-right: 0;

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -128,6 +128,7 @@ function EdgeTypeButton(props) {
     disabled: disabled,
     trigger: icon
   }, !disabled && /*#__PURE__*/_react["default"].createElement(_EdgeType["default"], {
+    topo: topo,
     selection: selection,
     onChange: handleChange
   })));

package/lib/core/editor/utils/edgeTypeStyleUtil.js

@@ -24,8 +24,7 @@ function getEdgesBySelection(topo) {
     return nodeIds;
   };
 
-  var getSelectedEdges = function getSelectedEdges(topo) {
-    var gv = topo.getGraphView();
+  var getSelectedEdges = function getSelectedEdges(gv) {
     var selection = gv.getSelectionModel().getSelection().toArray(); // 选中的连线
 
     var edges = selection.filter(function (element) {
@@ -51,7 +50,7 @@ function getEdgesBySelection(topo) {
     return edges;
   };
 
-  return getSelectedEdges(topo);
+  return getSelectedEdges(topo.getGraphView());
 }
 /**
  * 遍历连线及子连线

package/lib/core/models/TopoApp.js

@@ -54,7 +54,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
 var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "8.0.0-a.3" === 'string' ? "8.0.0-a.3" : null;
+var version = typeof "8.0.0-a.5" === 'string' ? "8.0.0-a.5" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "8.0.0-a.3",
+  "version": "8.0.0-a.5",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@8.0.0-a.3/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@8.0.0-a.5/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }