@riil-frontend/component-topology 8.0.0-a.4 → 8.0.0-a.6

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,7 +61,7 @@ var LINE_MOLD_OPTIONS = [{
   icon: 'topo_lineMold_dotted_two'
 }];
 
-function getValuesByEdges(edges) {
+function getValuesByEdges(topo) {
   function getStartPoint(edge) {
     var icons = edge.s('icons') || {};
     return ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].filter(function (name) {
@@ -75,14 +76,18 @@ function getValuesByEdges(edges) {
     })[0] || 'nil';
   }
 
-  var edgeValues = edges.map(function (edge) {
-    return {
+  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
@@ -103,12 +108,13 @@ function getValuesByEdges(edges) {
 }
 
 function EdgeType(props) {
-  var edges = props.edges,
+  var topo = props.topo,
+      selection = props.selection,
       _onChange = props.onChange;
 
   var field = _Field.useField({
     autoUnmount: false,
-    values: getValuesByEdges(edges),
+    values: getValuesByEdges(topo),
     onChange: function onChange(name, value) {
       if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
         _onChange(name, null);
@@ -119,8 +125,8 @@ function EdgeType(props) {
   });
 
   useEffect(function () {
-    field.setValues(getValuesByEdges(edges));
-  }, [edges]);
+    field.setValues(getValuesByEdges(topo));
+  }, [selection]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.lineBox
   }, /*#__PURE__*/React.createElement(_Form, {

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,7 +109,7 @@ function EdgeTypeButton(props) {
     disabled: disabled,
     trigger: icon
   }, !disabled && /*#__PURE__*/React.createElement(EdgeType, {
-    edges: getEdgesBySelection(topo),
+    topo: topo,
     selection: selection,
     onChange: handleChange
   })));

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.4" === 'string' ? "8.0.0-a.4" : null;
+var version = typeof "8.0.0-a.6" === 'string' ? "8.0.0-a.6" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/viewer/components/titlebar/widgets/SearchWidget.js

@@ -50,6 +50,10 @@ function SearchWidget(props) {
 
   var onChange = function onChange(value) {
     setSearchValue(value);
+
+    if (!value) {
+      topo.searchElements(searchType, value);
+    }
   };
 
   return /*#__PURE__*/React.createElement(_Search, {

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,7 +79,7 @@ var LINE_MOLD_OPTIONS = [{
   icon: 'topo_lineMold_dotted_two'
 }];
 
-function getValuesByEdges(edges) {
+function getValuesByEdges(topo) {
   function getStartPoint(edge) {
     var icons = edge.s('icons') || {};
     return ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].filter(function (name) {
@@ -92,14 +94,18 @@ function getValuesByEdges(edges) {
     })[0] || 'nil';
   }
 
-  var edgeValues = edges.map(function (edge) {
-    return {
+  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
@@ -120,12 +126,13 @@ function getValuesByEdges(edges) {
 }
 
 function EdgeType(props) {
-  var edges = props.edges,
+  var topo = props.topo,
+      selection = props.selection,
       _onChange = props.onChange;
 
   var field = _field["default"].useField({
     autoUnmount: false,
-    values: getValuesByEdges(edges),
+    values: getValuesByEdges(topo),
     onChange: function onChange(name, value) {
       if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
         _onChange(name, null);
@@ -136,8 +143,8 @@ function EdgeType(props) {
   });
 
   (0, _react.useEffect)(function () {
-    field.setValues(getValuesByEdges(edges));
-  }, [edges]);
+    field.setValues(getValuesByEdges(topo));
+  }, [selection]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _EdgeTypeModule["default"].lineBox
   }, /*#__PURE__*/_react["default"].createElement(_form["default"], {

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,7 +128,7 @@ function EdgeTypeButton(props) {
     disabled: disabled,
     trigger: icon
   }, !disabled && /*#__PURE__*/_react["default"].createElement(_EdgeType["default"], {
-    edges: (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo),
+    topo: topo,
     selection: selection,
     onChange: handleChange
   })));

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.4" === 'string' ? "8.0.0-a.4" : null;
+var version = typeof "8.0.0-a.6" === 'string' ? "8.0.0-a.6" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/viewer/components/titlebar/widgets/SearchWidget.js

@@ -65,6 +65,10 @@ function SearchWidget(props) {
 
   var onChange = function onChange(value) {
     setSearchValue(value);
+
+    if (!value) {
+      topo.searchElements(searchType, value);
+    }
   };
 
   return /*#__PURE__*/_react["default"].createElement(_search["default"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "8.0.0-a.4",
+  "version": "8.0.0-a.6",
   "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.4/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@8.0.0-a.6/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }