@riil-frontend/component-topology 7.0.9 → 8.0.0-a.10

package/es/components/BatchAttrMetric/setting.js

@@ -27,8 +27,6 @@ var Setting = function Setting(_ref) {
   var limit = props.limit,
       saveCb = props.saveCb,
       elementType = props.elementType;
-  rlog.debug("Setting-resAndMetrics-allCiSet-elementType", showType, props, elementType);
-  rlog.debug("Setting----allCiSet", allCiSet);
 
   var _useState = useState(Object.keys(allCiSet)[0]),
       ciType = _useState[0],

package/es/core/common/icons/basicIcons.js

@@ -0,0 +1,57 @@
+export default [{
+  'id': 'system.防火墙2.5D',
+  'name': '防火墙',
+  'url': '/img/topo/basicIcon/防火墙2.5D.svg'
+}, {
+  'id': 'system.云2.5D',
+  'name': '云',
+  'url': '/img/topo/basicIcon/云2.5D.svg'
+}, {
+  'id': 'system.五角星2.5D',
+  'name': '五角星',
+  'url': '/img/topo/basicIcon/五角星2.5D.svg'
+}, {
+  'id': 'system.旗帜2.5D',
+  'name': '旗帜',
+  'url': '/img/topo/basicIcon/旗帜2.5D.svg'
+}, {
+  'id': 'system.人员',
+  'name': '人员',
+  'url': '/img/topo/basicIcon/人员平面.svg'
+}, {
+  'id': 'system.楼宇',
+  'name': '楼宇',
+  'url': '/img/topo/basicIcon/楼宇平面.svg'
+}, {
+  'id': 'system.黑客',
+  'name': '黑客',
+  'url': '/img/topo/basicIcon/黑客平面.svg'
+}, {
+  'id': 'system.摄像头',
+  'name': '摄像头',
+  'url': '/img/topo/basicIcon/摄像头平面.svg'
+}, {
+  'id': 'system.蓝色云端',
+  'name': '蓝色云端',
+  'url': '/img/topo/basicIcon/云平面.svg'
+}, {
+  'id': 'system.五角星平面',
+  'name': '五角星',
+  'url': '/img/topo/basicIcon/五角星平面.svg'
+}, {
+  'id': 'system.旗帜平面',
+  'name': '旗帜',
+  'url': '/img/topo/basicIcon/旗帜平面.svg'
+}, {
+  'id': 'system.防火墙平面',
+  'name': '防火墙',
+  'url': '/img/topo/basicIcon/防火墙平面.svg'
+}, {
+  'id': 'system.线路平面',
+  'name': '线路',
+  'url': '/img/topo/basicIcon/线路平面.svg'
+}, {
+  'id': 'system.打印机平面',
+  'name': '打印机',
+  'url': '/img/topo/basicIcon/打印机平面.svg'
+}];

package/es/core/common/icons/icon.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import topoManager from '@riil-frontend/component-topology-graph/es/manager';
 import { getCiModels } from "../../../constants/ResourceTypeLimit";
+import basicIcons from "./basicIcons";
 /**
  * 获取默认图标
  * @param {*} topo 
@@ -36,18 +37,15 @@ export function getResourceIcons(topo) {
  */
 
 export function getBasicIcons(topo, containsGroupIcon) {
-  var icons = topoManager.iconLibManager.getIcons();
-  icons = icons.filter(function (icon) {
+  var nodeIcons = topoManager.iconLibManager.getNodeIcons().filter(function (icon) {
     return !icon.ciType;
   });
 
   if (containsGroupIcon === false) {
-    icons = icons.filter(function (icon) {
-      return icon.type !== 'group';
-    });
+    return [].concat(nodeIcons, basicIcons);
   }
 
-  return icons;
+  return [topoManager.iconLibManager.getGroupIcon()].concat(nodeIcons, basicIcons);
 }
 export function getGroupDefaultIcons(topo) {
   return [].concat(topoManager.iconLibManager.getIcons());

package/es/core/components/ResourceViewAttributeSetting/Setting.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback, useImperativeHandle, forwardRef, useMemo } from "react";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import BatchAttrMetricDrawer from "../../../components/BatchAttrMetric";
+import { getNodeCiModSet } from "./nodeCiTypeAttrUtil";
 /**
  * 资源显示属性、指标配置
  */
@@ -20,22 +21,15 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/forwardRef(function (props, ref) {
       markData = _useState[0],
       setMarkarkData = _useState[1];
 
-  var _topo$store$useModel = topo.store.useModel("topoBizMod"),
-      bizState = _topo$store$useModel[0],
-      bizDispatchers = _topo$store$useModel[1]; // rlog.debug('TopoView---income', topoId, viewState);
-
-
-  var resAndMetrics = bizState.resAndMetrics;
-  var allCiModSet = resAndMetrics.allCiModSet,
-      allLinkModSet = resAndMetrics.allLinkModSet;
-
   var openMarkSetting = function openMarkSetting(parm) {
-    rlog.debug("openMarkSetting", parm, elementType, showType, allCiModSet, allLinkModSet);
+    rlog.debug("openMarkSetting", parm, elementType, showType);
 
     if (queryData) {
       setMarkarkData(queryData());
     } else {
-      setMarkarkData(elementType === "node" ? allCiModSet : allLinkModSet);
+      setMarkarkData(elementType === "node" ? getNodeCiModSet({
+        topo: topo
+      }) : undefined);
     }
 
     batchAttrMetric.current.show({

package/es/core/components/ResourceViewAttributeSetting/nodeCiTypeAttrUtil.js

@@ -0,0 +1,121 @@
+import { getCiTypesFromCiElements } from "../../../utils/topoData"; // 资源类型含有属性和指标集合
+
+export function getNodeCiModSet(params) {
+  var topo = params.topo;
+  var data = topo.store.getModelState('topoMod').data;
+  var globalConfig = data.global.extraConfig;
+  var ciTypeMap = topo.ciTyeCache.ciTypes;
+
+  function getNodeModSet() {
+    var ciTypes = getCiTypesFromCiElements(data.nodes);
+    return getModSet(ciTypes);
+  }
+  /**
+   *
+   * @param {array} ciTypeCodes
+   * @returns
+   */
+
+
+  function getModSet(ciTypeCodes) {
+    var modSet = {};
+    Object.keys(ciTypeMap).filter(function (item) {
+      return ciTypeCodes.includes(item);
+    }).forEach(function (key) {
+      var ciTypeObj = ciTypeMap[key];
+      modSet[key] = {
+        name: ciTypeObj.displayName,
+        code: ciTypeObj.code,
+        icon: ciTypeObj.icon,
+        list: ciModfilter(ciTypeObj, globalConfig, 'node', ciTypeObj.code)
+      };
+    }); // console.log("modSet--------------------", modSet);
+
+    return modSet;
+  }
+  /**
+   * 过滤ci元数据中的属性和指标，用于属性和指标显示设置
+   * @param {} ciTypeObj
+   * @returns
+   */
+
+
+  function ciModfilter(ciTypeObj, globalSetting, type, code) {
+    var tips = globalSetting[type + "Tip"];
+    var tags = globalSetting[type + "Tag"];
+    var tipArr = [];
+    var tagArr = [];
+
+    if (tips !== null && tips !== void 0 && tips.isCustom) {
+      var _tips$data$code;
+
+      (_tips$data$code = tips.data[code]) === null || _tips$data$code === void 0 ? void 0 : _tips$data$code.map(function (item) {
+        tipArr.push(item.code + "-" + item.type);
+      });
+    }
+
+    if (tags !== null && tags !== void 0 && tags.isCustom) {
+      var _tags$data$code;
+
+      (_tags$data$code = tags.data[code]) === null || _tags$data$code === void 0 ? void 0 : _tags$data$code.map(function (item) {
+        tagArr.push(item.code + "-" + item.type);
+      });
+    } // rlog.debug(
+    //   "过滤ci元数据中的属性和指标，用于属性和指标显示设置",
+    //   globalSetting,
+    //   tipArr,
+    //   tagArr
+    // );
+
+
+    var custom = [];
+
+    if (type === 'node') {
+      custom.push({
+        id: 'name-graph',
+        code: 'name',
+        name: '图片名称',
+        type: 'custom',
+        tag: tagArr.indexOf('name-graph') >= 0,
+        tip: tipArr.indexOf('name-graph') >= 0
+      });
+      custom.push({
+        id: 'display_name-ciType',
+        code: 'ciType',
+        name: '资源类型',
+        type: 'custom',
+        tag: tagArr.indexOf('display_name-ciType') >= 0,
+        tip: tipArr.indexOf('display_name-ciType') >= 0
+      });
+    }
+
+    var attributes = ciTypeObj.attributes.filter(function (attr) {
+      return !!attr.userVisible;
+    }).map(function (item) {
+      var aid = item.code + "-attribute";
+      return {
+        id: aid,
+        code: item.code,
+        name: item.name,
+        type: 'attribute',
+        tag: tagArr.indexOf(aid) >= 0,
+        tip: tipArr.indexOf(aid) >= 0
+      };
+    });
+    var metrics = ciTypeObj.metrics.map(function (item) {
+      var mid = item.code + "-metric";
+      return {
+        id: mid,
+        code: item.code,
+        name: item.name,
+        type: 'metric',
+        tag: tagArr.indexOf(mid) >= 0,
+        tip: tipArr.indexOf(mid) >= 0
+      };
+    });
+    return [].concat(custom, attributes, metrics);
+  }
+
+  ;
+  return getNodeModSet();
+}

package/es/core/components/TopoView/GraphViewPanel.js

@@ -33,7 +33,6 @@ export default function GraphViewPanel(props) {
     style: {
       background: canvasColor
     },
-    onFocus: onFocus,
-    on: true
+    onFocus: onFocus
   }, props.children);
 }

package/es/core/components/TopoView/topoView.js

@@ -24,6 +24,7 @@ import Sidebar from "../../editor/components/Sidebar/Sidebar";
 import PropertyView from "../../editor/components/settings/PropertyView";
 import HistoryManager from "../../models/HistoryManager";
 import editorStyles from "./editor.module.scss";
+import basicIcons from "../../common/icons/basicIcons";
 
 var Topology = function Topology(props) {
   var _classnames;
@@ -74,7 +75,7 @@ var Topology = function Topology(props) {
     topo: topo,
     topoId: topoId,
     isEditing: isEditMode,
-    onSave: onSave,
+    onSave: editorProps.onSave || onSave,
     nodeDeleteable: nodeDeleteable,
     onNodeDelete: onNodeDelete,
     onLineDelete: onLineDelete,
@@ -236,6 +237,7 @@ var Topology = function Topology(props) {
       }),
       data: tData,
       defaultEnterEditMode: defaultEnterEditMode,
+      icons: [].concat(graphViewProps.icons || [], basicIcons),
       onCreate: onGraphCreated,
       onLoaded: handleGraphLoaded,
       onDataLoaded: handleGraphDataLoaded,

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/hooks/useTopoEdit.js

@@ -692,58 +692,9 @@ var useTopoEdit = function useTopoEdit(params) {
     };
   }();
 
-  function checkSavePermission(_x13) {
-    return _checkSavePermission.apply(this, arguments);
-  }
-
-  function _checkSavePermission() {
-    _checkSavePermission = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16(id) {
-      var permission;
-      return _regeneratorRuntime.wrap(function _callee16$(_context16) {
-        while (1) {
-          switch (_context16.prev = _context16.next) {
-            case 0:
-              _context16.next = 2;
-              return topoDispatchers.getTopoPermission({
-                id: id,
-                update: false
-              });
-
-            case 2:
-              permission = _context16.sent;
-
-              if (!topoPermissonUtil.isEditable(permission)) {
-                _context16.next = 5;
-                break;
-              }
-
-              return _context16.abrupt("return", true);
-
-            case 5:
-              _Dialog.alert({
-                title: "没有权限进行此操作",
-                content: "您的权限发生了变化，请联系相关管理员。",
-                okProps: {
-                  children: "确定"
-                },
-                onOk: function onOk() {}
-              });
-
-              return _context16.abrupt("return", false);
-
-            case 7:
-            case "end":
-              return _context16.stop();
-          }
-        }
-      }, _callee16);
-    }));
-    return _checkSavePermission.apply(this, arguments);
-  }
-
   var onSaveTopo = /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(data) {
-      var id, config, serialize, _config$layout, template, layout, saveConfig, valid, saveData;
+      var id, config, serialize, _config$layout, template, layout, saveConfig;
 
       return _regeneratorRuntime.wrap(function _callee8$(_context8) {
         while (1) {
@@ -752,85 +703,42 @@ var useTopoEdit = function useTopoEdit(params) {
               id = data.id, config = data.config, serialize = data.serialize;
               _config$layout = config === null || config === void 0 ? void 0 : config.layout, template = _config$layout.type, layout = _config$layout.layout;
 
-              if (!onSave) {
-                _context8.next = 6;
-                break;
-              }
+              if (onSave) {
+                // 自定义保存
+                saveConfig = /*#__PURE__*/function () {
+                  var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+                    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+                      while (1) {
+                        switch (_context7.prev = _context7.next) {
+                          case 0:
+                            _context7.next = 2;
+                            return editDispatchers.saveTopo({
+                              id: id,
+                              layout: layout,
+                              serialize: serialize
+                            });
 
-              // 自定义保存
-              saveConfig = /*#__PURE__*/function () {
-                var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-                  return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-                    while (1) {
-                      switch (_context7.prev = _context7.next) {
-                        case 0:
-                          _context7.next = 2;
-                          return editDispatchers.saveTopo({
-                            id: id,
-                            layout: layout,
-                            serialize: serialize
-                          });
-
-                        case 2:
-                        case "end":
-                          return _context7.stop();
+                          case 2:
+                          case "end":
+                            return _context7.stop();
+                        }
                       }
-                    }
-                  }, _callee7);
-                }));
-
-                return function saveConfig() {
-                  return _ref7.apply(this, arguments);
-                };
-              }();
-
-              onSave({
-                data: data,
-                saveConfig: saveConfig
-              });
-              return _context8.abrupt("return");
-
-            case 6:
-              // TODO 以下逻辑移到拓扑中心
-              topoEditDispatchers.update({
-                saving: true
-              }); // 检查权限
-
-              _context8.next = 9;
-              return checkSavePermission(id);
-
-            case 9:
-              valid = _context8.sent;
-
-              if (valid) {
-                _context8.next = 13;
-                break;
+                    }, _callee7);
+                  }));
+
+                  return function saveConfig() {
+                    return _ref7.apply(this, arguments);
+                  };
+                }();
+
+                onSave({
+                  topo: topo,
+                  data: data,
+                  saveConfig: saveConfig
+                });
               }
 
-              topoEditDispatchers.update({
-                saving: false
-              });
-              return _context8.abrupt("return");
-
-            case 13:
-              // 保存
-              saveData = _extends({
-                id: id,
-                layout: layout,
-                serialize: serialize
-              }, resourceConfig.getConfig());
-              rlog.info("保存", saveData);
-              _context8.next = 17;
-              return editDispatchers.saveTopo(saveData);
-
-            case 17:
-              topoEditDispatchers.update({
-                saving: false
-              });
-
-              _Message.success("保存成功！");
-
-            case 19:
+            case 3:
             case "end":
               return _context8.stop();
           }
@@ -838,7 +746,7 @@ var useTopoEdit = function useTopoEdit(params) {
       }, _callee8);
     }));
 
-    return function onSaveTopo(_x14) {
+    return function onSaveTopo(_x13) {
       return _ref6.apply(this, arguments);
     };
   }();
@@ -1048,7 +956,7 @@ var useTopoEdit = function useTopoEdit(params) {
       }, _callee10);
     }));
 
-    return function bindNodeResource(_x15) {
+    return function bindNodeResource(_x14) {
       return _ref8.apply(this, arguments);
     };
   }();