@riil-frontend/component-topology 10.0.18 → 10.0.20

package/es/core/viewer/components/plugins/ResourceDetail/components/DrawerTitle.js

@@ -4,62 +4,80 @@ import { dataSearch, isAvailableArray } from '@riil-frontend/utils';
 import React, { useState } from 'react';
 import styles from "../index.module.scss";
 
-function Title(_ref) {
+function NodeDrawerTitle(_ref) {
   var id = _ref.id,
-      name = _ref.name,
-      type = _ref.type,
       onChange = _ref.onChange,
       topo = _ref.topo;
 
-  if (type === 'node') {
-    var _useState = useState(''),
-        keyword = _useState[0],
-        setKeyword = _useState[1];
+  var _useState = useState(''),
+      keyword = _useState[0],
+      setKeyword = _useState[1];
 
-    var nodes = topo.store.getModelState('topoMod').data.nodes; // 查询资源列表
+  var resourceData = topo.dataModel.useDataById(id);
+  var name = resourceData === null || resourceData === void 0 ? void 0 : resourceData.name;
+  var nodes = topo.store.getModelState('topoMod').data.nodes; // 查询资源列表
 
-    nodes = nodes.filter(function (item) {
-      return item.id !== id;
-    });
-    if (!nodes.length) return name;
-    var filterNodes = dataSearch(nodes, ['name'], keyword);
-    return /*#__PURE__*/React.createElement(_MenuButton, {
-      text: true,
-      autoWidth: false,
-      size: "large",
-      popupClassName: styles['title-popup'],
-      menuProps: {
-        header: /*#__PURE__*/React.createElement(_Search, {
-          shape: "simple",
-          placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
-          className: styles.search,
-          hasClear: true,
-          onChange: function onChange(val) {
-            return !val && setKeyword(val);
-          },
-          onSearch: setKeyword
-        })
-      },
-      label: /*#__PURE__*/React.createElement("div", {
-        className: styles['drawer-title']
-      }, name),
-      onItemClick: function onItemClick(key) {
-        return onChange(nodes.find(function (item) {
-          return item.id === key;
-        }) || '');
-      }
-    }, isAvailableArray(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
-      return /*#__PURE__*/React.createElement(_MenuButton.Item, {
-        key: item.id,
-        disabled: !item.operation
-      }, item.name);
-    }) : /*#__PURE__*/React.createElement("div", {
-      className: styles['not-data']
-    }, "\u6682\u65E0\u6570\u636E"));
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
+  nodes = nodes.filter(function (item) {
+    return item.id !== id;
+  });
+  if (!nodes.length) return name;
+  var filterNodes = dataSearch(nodes, ['name'], keyword);
+  return /*#__PURE__*/React.createElement(_MenuButton, {
+    text: true,
+    autoWidth: false,
+    size: "large",
+    popupClassName: styles['title-popup'],
+    menuProps: {
+      header: /*#__PURE__*/React.createElement(_Search, {
+        shape: "simple",
+        placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
+        className: styles.search,
+        hasClear: true,
+        onChange: function onChange(val) {
+          return !val && setKeyword(val);
+        },
+        onSearch: setKeyword
+      })
+    },
+    label: /*#__PURE__*/React.createElement("div", {
       className: styles['drawer-title']
-    }, "\u94FE\u8DEF\u8BE6\u60C5");
+    }, name),
+    onItemClick: function onItemClick(key) {
+      return onChange({
+        id: key
+      });
+    }
+  }, isAvailableArray(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
+    return /*#__PURE__*/React.createElement(_MenuButton.Item, {
+      key: item.id,
+      disabled: !item.operation
+    }, item.name);
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: styles['not-data']
+  }, "\u6682\u65E0\u6570\u636E"));
+}
+
+function LinkDrawerTitle(_ref2) {
+  var id = _ref2.id,
+      onChange = _ref2.onChange,
+      topo = _ref2.topo;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['drawer-title']
+  }, "\u94FE\u8DEF\u8BE6\u60C5");
+}
+
+function Title(props) {
+  var id = props.id,
+      data = props.data,
+      onChange = props.onChange,
+      topo = props.topo;
+
+  if (!id) {
+    return null;
+  } else if ((data === null || data === void 0 ? void 0 : data.type) === 'node') {
+    return /*#__PURE__*/React.createElement(NodeDrawerTitle, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LinkDrawerTitle, props);
   }
 }
 

package/es/core/viewer/components/plugins/ResourceDetail/hooks/useUserId.js

@@ -0,0 +1,66 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState } from 'react';
+import service from "../../../../../services/overview";
+
+function useUserId(props) {
+  var _useState = useState(''),
+      userId = _useState[0],
+      setUserId = _useState[1];
+
+  function fetchUserId() {
+    return _fetchUserId.apply(this, arguments);
+  }
+
+  function _fetchUserId() {
+    _fetchUserId = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              setUserId(function (prev) {
+                // console.log('获取用户id', prev);
+                // 如果已经获取过，就不再重新获取
+                if (!prev) {
+                  _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                    var res;
+                    return _regeneratorRuntime.wrap(function _callee$(_context) {
+                      while (1) {
+                        switch (_context.prev = _context.next) {
+                          case 0:
+                            _context.next = 2;
+                            return service.getUserId();
+
+                          case 2:
+                            res = _context.sent;
+                            setUserId((res === null || res === void 0 ? void 0 : res.user_id) || '');
+
+                          case 4:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }
+                    }, _callee);
+                  }))();
+                }
+
+                return prev;
+              });
+
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _fetchUserId.apply(this, arguments);
+  }
+
+  return {
+    fetchUserId: fetchUserId,
+    userId: userId
+  };
+}
+
+export default useUserId;

package/es/style.js

@@ -4,9 +4,9 @@ import '@alifd/next/es/message/style';
 import '@riil-frontend/component-topology-utils/es/style';
 import '@riil-frontend/component-riil-event-emitter/es/style';
 import '@riil-frontend/utils/es/style';
-import '@alifd/next/es/drawer/style';
 import '@alifd/next/es/menu-button/style';
 import '@alifd/next/es/search/style';
+import '@alifd/next/es/drawer/style';
 import '@alifd/next/es/tab/style';
 import '@alifd/next/es/table/style';
 import '@riil-frontend/component-table-layout/es/style';

package/lib/core/editor/components/Toolbar/widgets/BoxBackgroundButton/BoxBackgroundSetting.js

@@ -201,7 +201,7 @@ function BoxBackgroundSetting(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", null, "\u8FB9\u6846"), /*#__PURE__*/_react["default"].createElement("div", {
     className: _BoxbackgroundSettingsModule["default"].borderWidth
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u8FB9\u6846.svg"
   }), /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
     max: 10,
     min: 1,
@@ -212,7 +212,7 @@ function BoxBackgroundSetting(props) {
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: _BoxbackgroundSettingsModule["default"].backOpacity
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u8FB9\u6846.svg"
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
   }), /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
     max: 100,
     min: 0,

package/lib/core/editor/components/Toolbar/widgets/BoxBackgroundButton/BoxBackgroundUtil.js

@@ -142,7 +142,7 @@ function setGroupStyle(element, style, tagStyle) {
     } else {
       borderCurrentColor = {
         background: prevStyle.background,
-        opacity: style.backgroundOpacity === undefined ? 1 : style.backgroundOpacity
+        opacity: style.borderOpacity === undefined ? 1 : style.borderOpacity
       };
     }
 

package/lib/core/editor/config/themes.js

@@ -9,9 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var baseLightTheme = {
   color: '#FFFFFF',
-  globalNodeLabelColor: '#4d6277',
+  globalNodeLabelColor: 'rgba(0, 0, 0, 0.75)',
   globalNodeLabelStyle: {
-    color: '#4d6277'
+    color: 'rgba(0, 0, 0, 0.75)'
   },
   globalEdgeTagStyle: {
     color: '#777B9A',
@@ -21,16 +21,16 @@ var baseLightTheme = {
 
   },
   text: {
-    color: '#4d6277'
+    color: 'rgba(0, 0, 0, 0.75)'
   },
   group: {
     style: {
-      'group.title.background': 'rgba(228, 233, 238, 1)',
+      'group.title.background': '#3E6BB3',
       // 标题背景颜色 #E4E9EE
-      'group.title.color': '#4D6277',
+      'group.title.color': '#FFFFFF',
       // 标题文字颜色
-      'group.background': 'rgba(255, 255, 255, 0.9)',
-      'group.border.color': '#E4E9EE',
+      'group.background': 'rgba(255, 255, 255, 0.50)',
+      'group.border.color': 'rgba(255, 255, 255, 0.50)',
       // 边框颜色
       'group.splitLine': false // 标题底部边框
 
@@ -89,12 +89,12 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
   },
   group: {
     style: {
-      'group.title.background': 'rgba(8,165,244,1)',
+      'group.title.background': 'rgba(0, 85, 214, 0.60)',
       // 标题背景颜色 #08A5F4
       'group.title.color': '#FFFFFF',
       // 标题文字颜色
-      'group.background': 'rgba(29,55,113,0.6)',
-      'group.border.color': 'rgba(8,165,244,0.8)',
+      'group.background': 'rgba(0, 0, 0, 0.30)',
+      'group.border.color': 'rgba(0, 0, 0, 0.30)',
       // 边框颜色
       'group.splitLine': false // 标题底部边框
 
@@ -136,7 +136,7 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
     style: {
       'group.title.background': 'rgba(0,0,0,0.01)',
       // 标题背景颜色 #08A5F4
-      'group.title.color': '#8FECFF',
+      'group.title.color': 'rgba(143, 236, 255, 1)',
       // 标题文字颜色
       'group.title.border.color': '#ffffff',
       // 边框颜色

package/lib/core/models/TopoApp.js

@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "10.0.18" === 'string' ? "10.0.18" : null;
+var version = typeof "10.0.20" === 'string' ? "10.0.20" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/viewer/components/plugins/ElementDetailDrawer/components/DetailDrawer.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DetailDrawerModule = _interopRequireDefault(require("./DetailDrawer.module.scss"));
+
+function DetailDrawer(props) {
+  return /*#__PURE__*/_react["default"].createElement(_drawer["default"], (0, _extends2["default"])({
+    className: _DetailDrawerModule["default"].baseInfo,
+    closeMode: ['close', 'esc'],
+    width: 580,
+    hasMask: false
+  }, props));
+}
+
+var _default = DetailDrawer;
+exports["default"] = _default;

package/lib/core/viewer/components/plugins/ElementDetailDrawer/components/DetailDrawer.module.scss

@@ -0,0 +1,16 @@
+@import '~@alifd/next/variables.scss';
+
+.baseInfo {
+  box-shadow: 0px 0px 6px 1px #F2F7FD;
+  .drawer-title{
+    font-size: 16px;
+    font-weight: 500;
+    color: #4D6277;
+  }
+  :global {
+    .#{$css-prefix}drawer-body {
+      height: calc(100% - 49px);
+      padding: 0 24px;
+    }
+  }
+}

package/lib/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
+
+var _DefaultDetailContent = _interopRequireDefault(require("../../ResourceDetail/DefaultDetailContent"));
+
+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 useElementDetailManager(props) {
+  var topo = props.topo,
+      canShow = props.canShow,
+      resourceDetailProps = props.resourceDetailProps;
+
+  var _topo$store$useModel = topo.store.useModel('resourceDetail'),
+      resourceDetailState = _topo$store$useModel[0],
+      resourceDetailDispatchers = _topo$store$useModel[1];
+
+  var visible = resourceDetailState.visible,
+      id = resourceDetailState.id;
+  var resourceData = topo.dataModel.useDataById(id);
+  var currentHtElementRef = (0, _react.useRef)(null);
+
+  function init() {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.on('topo_element_double_click', handleDblClick);
+    notifier.on('topo_element_click', handleClick);
+  }
+
+  function destroy() {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.off('topo_element_double_click', handleDblClick);
+    notifier.off('topo_element_click', handleClick); // 清除数据
+
+    currentHtElementRef.current = null;
+    resourceDetailDispatchers.reset();
+    var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
+    topoDispatchers.update({
+      id: '',
+      metricCodes: []
+    });
+  } // 打开
+
+  /**
+   * 
+   * @param {{id: string, htElement?}} data 
+   * @returns 
+   */
+
+
+  function open(data) {
+    var id = data.id;
+    var resourceData = topo.dataModel.getDataById(id);
+    var htElement = data.htElement || topo.getDataModel().getDataByTag(id); // 如果是资源/链路，没有权限不显示
+
+    if (resourceData) {
+      var operation = resourceData.operation,
+          permission = resourceData.permission;
+
+      if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
+        return;
+      }
+    } // 自定义显示方法
+
+
+    if (!canShow(htElement)) {
+      return;
+    }
+
+    var content = getDetailContent({
+      id: id
+    });
+
+    if (content) {
+      resourceDetailDispatchers.update({
+        visible: true,
+        id: id
+      });
+    }
+  }
+
+  function change(data) {
+    open(data);
+  } // 重置
+
+
+  function reset() {
+    currentHtElementRef.current = null;
+    resourceDetailDispatchers.reset();
+    var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
+    topoDispatchers.update({
+      id: '',
+      metricCodes: []
+    });
+  } // 关闭
+
+
+  function close() {
+    currentHtElementRef.current = null;
+    resourceDetailDispatchers.update({
+      visible: false
+    });
+  } // 处理双击元素事件
+
+
+  function handleDblClick(htElement) {
+    var _topo$store$getModelS = topo.store.getModelState("lock"),
+        lock = _topo$store$getModelS.lock;
+
+    if (lock) {
+      open({
+        id: htElement.getTag() || "ht:" + htElement.getId(),
+        htElement: htElement
+      });
+    }
+  } // 单击切换
+
+
+  function handleClick(htElement) {
+    var resourceDetailState = topo.store.getModelState('resourceDetail');
+    var visible = resourceDetailState.visible;
+
+    if (!visible) {
+      return;
+    }
+
+    var data = htElement.getAttrObject();
+    open({
+      id: data.id,
+      htElement: htElement
+    });
+  }
+
+  function getDefaultDetailContent(_ref) {
+    var resourceData = _ref.resourceData,
+        htElement = _ref.htElement;
+
+    // 仅展示资源和链路的概览
+    if (!resourceData) {
+      return;
+    }
+
+    var ciType = resourceData.ciType; // 没有citype不显示
+
+    if (!ciType) return;
+    return _DefaultDetailContent["default"];
+  }
+
+  function getDetailContent(_ref2) {
+    var id = _ref2.id;
+
+    if (!id) {
+      return null;
+    }
+
+    var resourceData = topo.dataModel.getDataById(id);
+    var htElement = topo.getDataModel().getDataByTag(id);
+    var widget; // 支持自定义概览
+
+    var _ref3 = resourceDetailProps || {},
+        getCustomDetailContent = _ref3.getCustomDetailContent;
+
+    if (getCustomDetailContent) {
+      widget = getCustomDetailContent({
+        id: id,
+        resourceData: resourceData,
+        htElement: htElement
+      });
+    } // 无自定义使用默认
+
+
+    if (!widget) {
+      widget = getDefaultDetailContent({
+        resourceData: resourceData,
+        htElement: htElement
+      });
+    }
+
+    return widget;
+  }
+
+  var Content = visible && id ? getDetailContent({
+    id: id
+  }) : null;
+  var elementDetailManager = {
+    visible: visible,
+    id: id,
+    resourceData: resourceData,
+    Content: Content,
+    init: init,
+    destroy: destroy,
+    open: open,
+    change: change,
+    reset: reset,
+    close: close,
+    handleDblClick: handleDblClick,
+    handleClick: handleClick
+  };
+  return elementDetailManager;
+}
+
+var _default = useElementDetailManager;
+exports["default"] = _default;

package/lib/core/viewer/components/plugins/ResourceDetail/DefaultDetailContent.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = DefaultDetailContent;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ResourceDetail = _interopRequireDefault(require("./ResourceDetail"));
+
+var _useUserId2 = _interopRequireDefault(require("./hooks/useUserId"));
+
+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 DefaultDetailContent(props) {
+  var topo = props.topo,
+      id = props.id,
+      viewerProps = props.viewerProps,
+      onChangeActive = props.onChangeActive,
+      onClose = props.onClose;
+
+  var _useUserId = (0, _useUserId2["default"])(),
+      userId = _useUserId.userId,
+      fetchUserId = _useUserId.fetchUserId;
+
+  var resourceData = topo.dataModel.useDataById(id);
+  var activeData = (0, _react.useMemo)(function () {
+    return resourceData ? {
+      id: resourceData.id,
+      name: resourceData.name,
+      type: resourceData.type === 'node' ? 'node' : 'link',
+      // 类型： node、link
+      ciType: resourceData.ciType,
+      ciName: resourceData.ciName
+    } : {
+      id: '',
+      name: '',
+      type: '',
+      // 类型： node、link
+      ciType: '',
+      ciName: ''
+    };
+  }, [resourceData]);
+  (0, _react.useEffect)(function () {
+    fetchUserId();
+  }, []); // 支持自定义概览
+
+  var _ref = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps) || {},
+      getResourceDetail = _ref.getResourceDetail;
+
+  var ResourceDetailWidget;
+
+  if (getResourceDetail) {
+    ResourceDetailWidget = getResourceDetail(resourceData);
+  }
+
+  if (!ResourceDetailWidget) {
+    ResourceDetailWidget = _ResourceDetail["default"];
+  }
+
+  if (!userId) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(ResourceDetailWidget, (0, _extends2["default"])({}, props, {
+    topo: topo,
+    userId: userId,
+    activeData: activeData,
+    resourceData: resourceData,
+    onClose: onClose
+  }));
+}