@riil-frontend/component-topology 9.0.0-a.8 → 9.0.1

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

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 exports.getEdgesBySelection = getEdgesBySelection;
+exports.isNodeAllEdges = isNodeAllEdges;
 exports.loopEdgesAndChildren = loopEdgesAndChildren;
 exports.setEdgesAndChildren = setEdgesAndChildren;
 exports.setEdgesType = setEdgesType;
@@ -52,6 +53,44 @@ function getEdgesBySelection(topo) {
 
   return getSelectedEdges(topo.getGraphView());
 }
+/**
+ * 根据选中的线查找对应节点下所有的线是否都选中
+ * @param {*} topo 
+ * @param {*} edges 
+ * @param {*} operateEdgeFn 
+ */
+
+
+function isNodeAllEdges(topo) {
+  var selection = topo.getSelectionModel().getSelection().toArray(); // 选中的连线
+
+  var edges = selection.filter(function (element) {
+    return element instanceof ht.Edge;
+  });
+  var inEdges = false;
+  edges.forEach(function (edge) {
+    //根据两边节点查询到所有节点有关的线，过滤出相同的线（两个节点间的线）
+    var sourceNode = edge.getSource();
+    var targetNode = edge.getTarget();
+    var nodeLineList = (0, _htElementUtils.getEdgesBetweenNodes)(sourceNode, targetNode);
+
+    var _loop = function _loop(i) {
+      if (edges.filter(function (edge) {
+        return nodeLineList[i]._id == edge._id;
+      }).length == 0) {
+        inEdges = true;
+        return "break";
+      }
+    };
+
+    for (var i = 0; i < nodeLineList.length; i++) {
+      var _ret = _loop(i);
+
+      if (_ret === "break") break;
+    }
+  });
+  return inEdges;
+}
 /**
  * 遍历连线及子连线
  * @param {*} topo 

package/lib/core/hooks/useCanvasTheme.js

@@ -17,7 +17,7 @@ var themeMap = [{
   name: 'white',
   label: '白色',
   color: null,
-  toolsTheme: 'lightgrayblue'
+  toolsTheme: 'white'
 }, {
   name: 'lightblue',
   label: '蓝色',
@@ -35,7 +35,12 @@ var themeMap = [{
   name: 'dark',
   label: '深色',
   color: '#031425',
-  toolsTheme: 'black'
+  toolsTheme: 'dark'
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'dark',
+  backgroundImage: '/img/topo/themes/poly.png'
 }].reduce(function (map, item) {
   var _extends2;
 
@@ -52,12 +57,13 @@ function useCanvasTheme(props) {
 
   var themeConfig = themeMap[themeName || 'white'];
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
+  var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   (0, _react.useEffect)(function () {
     // 设置
     if (graphLoaded && themeConfig) {
       try {
         topo.getHtTopo().setTheme(themeName);
-        topo.getHtTopo().setToolsTheme(themeName);
+        topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
       } catch (error) {
         console.error('切换主题失败', error);
       }
@@ -68,12 +74,14 @@ function useCanvasTheme(props) {
     if (graphLoaded) {
       try {
         topo.getHtTopo().getGraphView().dm().setBackground(canvasColor);
+        topo.getHtTopo().getGraphView().dm().setBackground(canvasbackgroundImage);
       } catch (error) {
         console.error('切换主题失败', error);
       }
     }
   }, [graphLoaded, canvasColor]);
   return {
-    canvasColor: canvasColor
+    canvasColor: canvasColor,
+    canvasbackgroundImage: canvasbackgroundImage
   };
 }

package/lib/core/hooks/useResourceConfig.js

@@ -59,7 +59,8 @@ function _default(props) {
       resources: config.resources,
       groups: config.groups,
       exportLinkIdList: config.exportLinkIdList,
-      relateTopoIdList: config.relateTopoIdList
+      relateTopoIdList: config.relateTopoIdList //linkIps: config.linkIps,
+
     };
   };
 

package/lib/core/hooks/useTopoEdit.js

@@ -17,14 +17,14 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _react = require("react");
 
+var _lodash = _interopRequireDefault(require("lodash"));
+
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
 var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
 
 var _template = require("../../utils/template");
 
-var _topoPermissionUtil = _interopRequireDefault(require("../../utils/topoPermissionUtil"));
-
 var _htElementUtils = require("../../utils/htElementUtils");
 
 var _useResourceConfig = _interopRequireDefault(require("./useResourceConfig"));
@@ -37,6 +37,10 @@ var _htElementDataUtil = require("../../utils/htElementDataUtil");
 
 var _clusterUtil = require("../../utils/clusterUtil");
 
+var _linkUtils = require("../models/utils/linkUtils");
+
+var _exitLinkUtil = require("../../networkTopo/utils/exitLinkUtil");
+
 var useTopoEdit = function useTopoEdit(params) {
   var topo = params.topo,
       topoId = params.topoId,
@@ -247,7 +251,7 @@ var useTopoEdit = function useTopoEdit(params) {
       return;
     }
 
-    if (!(0, _htElementDataUtil.getGroupChildrenResourceElements)(group).length || (0, _clusterUtil.isClusterHtElement)(group)) {
+    if (!(0, _htElementUtils.getGroupChildren)(group).filter(_htElementDataUtil.isResourceElement).length || (0, _clusterUtil.isClusterHtElement)(group)) {
       doDelete();
       return;
     } // 有子节点时需要确认
@@ -342,7 +346,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
               edges.map(function (edge) {
                 if (edge.a("dtype") === "link" && exportLinkIdList.indexOf(edge.getTag()) >= 0) {
-                  // exLink.push(edge);      
+                  // exLink.push(edge);
                   topo.getGraphView().dm().remove(edge);
                   exportLinkIdList.splice(config.exportLinkIdList.indexOf(edge.getTag()), 1);
                 }
@@ -406,8 +410,8 @@ var useTopoEdit = function useTopoEdit(params) {
   };
   /**
    * 获得未存在的连线元素
-   * @param {*} elements 
-   * @returns 
+   * @param {*} elements
+   * @returns
    */
 
 
@@ -420,8 +424,8 @@ var useTopoEdit = function useTopoEdit(params) {
   }
   /**
    * 获得未存在的元素
-   * @param {Array} elements 
-   * @returns 
+   * @param {Array} elements
+   * @returns
    */
 
 
@@ -600,7 +604,7 @@ var useTopoEdit = function useTopoEdit(params) {
               // 2022-11-10 修复 添加资源后分层重新布局问题，仅布局新增资源。替换api topo.updateElements(data)
               newElements = findUNExistedElements(elements);
 
-              _rlog["default"].debug('添加分层资源', {
+              _rlog["default"].debug("添加分层资源", {
                 layer: group,
                 newElements: newElements
               });
@@ -674,8 +678,8 @@ var useTopoEdit = function useTopoEdit(params) {
   }
   /**
    * 未选中元素添加资源
-   * 
-   * @param {*} data 
+   *
+   * @param {*} data
    */
 
 
@@ -835,7 +839,7 @@ var useTopoEdit = function useTopoEdit(params) {
                           newLinkElements = findUNExistedLinkElements(elements);
                           createElementsData = null;
 
-                          if (newData.type === 'group') {
+                          if (newData.type === "group") {
                             groupChildren = (0, _topoData.findGroupChildren)(elements, newData);
                             newGroupChildren = [];
                             existedGroupChildren = [];
@@ -852,10 +856,10 @@ var useTopoEdit = function useTopoEdit(params) {
                               groups: [newData],
                               nodes: newGroupChildren,
                               links: newLinkElements.filter(function (item) {
-                                return item.type === 'link';
+                                return item.type === "link";
                               }),
                               linkGroups: newLinkElements.filter(function (item) {
-                                return item.type === 'linkGroup';
+                                return item.type === "linkGroup";
                               })
                             };
                             htTopo.createElements(createElementsData); // 切换前图上如果存在集群内的节点，切换节点为集群后，移到集群内
@@ -870,16 +874,16 @@ var useTopoEdit = function useTopoEdit(params) {
                               groups: [],
                               nodes: [newData],
                               links: newLinkElements.filter(function (item) {
-                                return item.type === 'link';
+                                return item.type === "link";
                               }),
                               linkGroups: newLinkElements.filter(function (item) {
-                                return item.type === 'linkGroup';
+                                return item.type === "linkGroup";
                               })
                             };
                             htTopo.createElements(createElementsData);
                           }
 
-                          _rlog["default"].debug('批量创建元素', createElementsData); // 恢复图标、大小、位置
+                          _rlog["default"].debug("批量创建元素", createElementsData); // 恢复图标、大小、位置
 
 
                           newElement = dm.getDataByTag(newData.id);
@@ -999,6 +1003,100 @@ var useTopoEdit = function useTopoEdit(params) {
       return _ref8.apply(this, arguments);
     };
   }();
+  /**
+   * 关联IP的图片节点
+   */
+
+
+  function relateNodeIp(_x15, _x16) {
+    return _relateNodeIp.apply(this, arguments);
+  }
+
+  function _relateNodeIp() {
+    _relateNodeIp = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16(txtValue, nodeElement) {
+      var dm, isUnique, ip, configObj, configData, _elements, newLinkElements, newLink, newLinkGroup, createElementsData, _htTopo;
+
+      return _regenerator["default"].wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              console.log("bindIPtoNode", txtValue, nodeElement);
+
+              if (txtValue) {
+                _context16.next = 3;
+                break;
+              }
+
+              return _context16.abrupt("return");
+
+            case 3:
+              // if (txtValue === nodeElement.a('bindIp')) {
+              //   return;
+              // }
+              // 根据配置查询拓扑数据
+              dm = topo.getDataModel(); // 执行唯一性验证
+
+              isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, txtValue, nodeElement); // 获取关联链路
+
+              if (!isUnique) {
+                _context16.next = 25;
+                break;
+              }
+
+              ip = (0, _exitLinkUtil.buildIpNode)(txtValue);
+              _context16.next = 9;
+              return deleteExLink(nodeElement);
+
+            case 9:
+              nodeElement.a(ip);
+              nodeElement.setName(txtValue);
+              nodeElement.setTag("ip:" + txtValue); // 获取配置
+
+              configObj = topo.resourceConfig.getConfig();
+              _context16.next = 15;
+              return resourceConfig.updateConfig(configObj);
+
+            case 15:
+              _context16.next = 17;
+              return editDispatchers.fetchDataByConfig();
+
+            case 17:
+              configData = _context16.sent;
+              // console.log("configData",configObj, configData);
+              _elements = configData.elements;
+              newLinkElements = findUNExistedLinkElements(_elements); // console.log("configData", configData, newLinkElements);
+
+              newLink = newLinkElements.filter(function (item) {
+                return item.type === "link";
+              });
+              newLinkGroup = newLinkElements.filter(function (item) {
+                return item.type === "linkGroup";
+              }); // const newData = elements.find((item) => item.id === `ip:${txtValue}`);
+              // console.log("newData",newLinkElements, newLink);
+
+              createElementsData = {
+                groups: [],
+                nodes: [],
+                links: newLink,
+                linkGroups: newLinkGroup
+              };
+              console.log("createElementsData", createElementsData);
+
+              if ([].concat(newLink, newLinkGroup).length > 0) {
+                _htTopo = topo.getHtTopo();
+
+                _htTopo.createElements(createElementsData);
+              }
+
+            case 25:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    }));
+    return _relateNodeIp.apply(this, arguments);
+  }
 
   var onEvent = function onEvent(e) {
     var map = {};
@@ -1016,7 +1114,7 @@ var useTopoEdit = function useTopoEdit(params) {
    */
 
   var setViewMouseMode = function setViewMouseMode(mode) {
-    _rlog["default"].debug('设置视图鼠标模式', mode);
+    _rlog["default"].debug("设置视图鼠标模式", mode);
 
     topo.getHtTopo().setViewMouseMode(mode);
     topoEditDispatchers.update({
@@ -1095,6 +1193,11 @@ var useTopoEdit = function useTopoEdit(params) {
      */
     onDeleteElement: onDeleteElement,
 
+    /**
+     * 绑定图片ip
+     */
+    relateNodeIp: relateNodeIp,
+
     /**
      * 拓扑图保存回调
      */

package/lib/core/hooks/useTopoFullscreen.js

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = useTopoFullscreen;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 useTopoFullscreen(props) {
+  var topo = props.topo,
+      panelRef = props.panelRef;
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded,
+      graphLoaded2 = topoModState.graphLoaded2,
+      topoData = topoModState.data;
+  (0, _react.useEffect)(function () {
+    var htTopo = topo.getHtTopo();
+
+    if ((graphLoaded || graphLoaded2) && topoData && htTopo.setFullScreenFunc) {
+      htTopo.setFullScreenFunc(function () {
+        panelRef.current.requestFullscreen();
+      });
+    }
+  }, [topoData, graphLoaded, graphLoaded2]); // 监听退出全屏
+
+  var panelDom = panelRef.current;
+  (0, _react.useEffect)(function () {
+    panelDom === null || panelDom === void 0 ? void 0 : panelDom.addEventListener('fullscreenchange', handleFullscreenChange); // 监听退出全屏
+
+    function handleFullscreenChange() {
+      var htTopo = topo.getHtTopo();
+      htTopo.setToolsVisible(!document.fullscreenElement);
+    }
+
+    return function () {
+      panelDom === null || panelDom === void 0 ? void 0 : panelDom.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [panelDom]);
+}