@riil-frontend/component-topology 9.0.0-a.3 → 9.0.0-a.31

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

@@ -22,7 +22,9 @@ var baseLightTheme = {
       'group.title.color': '#4D6277',
       // 标题文字颜色
       'group.background': 'rgba(255, 255, 255, 0.9)',
-      'group.border.color': '#E4E9EE' // 边框颜色
+      'group.border.color': '#E4E9EE',
+      // 边框颜色
+      'group.splitLine': false // 标题底部边框
 
     }
   },
@@ -84,7 +86,56 @@ var THEMES = [_extends({}, baseLightTheme, {
       'group.title.color': '#FFFFFF',
       // 标题文字颜色
       'group.background': 'rgba(29,55,113,0.6)',
-      'group.border.color': 'rgba(8,165,244,0.8)' // 边框颜色
+      'group.border.color': 'rgba(8,165,244,0.8)',
+      // 边框颜色
+      'group.splitLine': false // 标题底部边框
+
+    }
+  },
+  cluster: {
+    style: {
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.title.background': 'rgba(14,44,69,1)',
+      // 标题背景颜色 #0E2C45
+      'group.background': 'rgba(14,44,69,1)',
+      // #0E2C45
+      'group.border.color': '#08A5F4',
+      // 边框颜色
+      'group.border.radius': 3
+    }
+  }
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'black',
+  backgroundImage: '/img/topo/themes/poly.png',
+  backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
+  globalNodeLabelStyle: {
+    color: '#ffffff'
+  },
+  globalEdgeTagStyle: {
+    color: '#E4E9EE',
+    background: 'rgba(6, 54, 88, 1)',
+    // 背景色，不传使用默认内置 @V1.2 index.js:1 #063658 
+    borderColor: '#08A5F4' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
+
+  },
+  text: {
+    color: '#ffffff'
+  },
+  group: {
+    style: {
+      'group.title.background': 'rgba(0,0,0,0.01)',
+      // 标题背景颜色 #08A5F4
+      'group.title.color': '#8FECFF',
+      // 标题文字颜色
+      'group.title.border.color': '#ffffff',
+      // 边框颜色
+      'group.background': 'rgba(0,0,0,0.01)',
+      'group.border.color': '#ffffff',
+      // 边框颜色
+      'group.splitLine': true // 标题底部边框
 
     }
   },

package/es/core/event/topoEventListener.js

@@ -0,0 +1,22 @@
+var n = 0;
+export function createTopoEventListener(type, onMessage) {
+  var eventListenerName = "topo_" + n++;
+  var EE = window.EE;
+
+  if (EE) {
+    EE.on('topo', eventListenerName, function (data) {
+      if (data.type === type) {
+        onMessage(data.data);
+      }
+    });
+  }
+
+  return {
+    eventListenerName: eventListenerName,
+    close: function close() {
+      if (EE) {
+        window.EE.removeListener('topo', eventListenerName);
+      }
+    }
+  };
+}

package/es/core/hooks/useAlarm.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { useEffect } from "react";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
-import { useCbbEventListener } from "@riil-frontend/component-riil-event-emitter";
 import useGraphAlarmDisplay from "./useGraphAlarmDisplay";
+import useTopoEventListener from "./useTopoEventListener";
 /**
  * 
  * 
@@ -104,20 +104,26 @@ export default function useAlarm(options) {
       received: data,
       all: relateTopoAlarm
     });
-  };
+  }; // 订阅消息
+
 
-  useCbbEventListener("topo", {
-    name: "topo",
+  useTopoEventListener({
+    type: 'alarm',
     onMessage: function onMessage(data) {
       rlog.debug("Topoget--AlertMesage------------", topo, data);
-
-      if (data.type === "alarm") {
-        topo.alarm.handleAlarmEvent(data.data);
-      } else if (data.type === "risk") {
-        handleRiskData(data.data);
-      } else if (data.type === "relateTopoAlarm") {
-        handleRelateTopoAlarm(data.data);
-      }
+      topo.alarm.handleAlarmEvent(data);
+    }
+  });
+  useTopoEventListener({
+    type: 'risk',
+    onMessage: function onMessage(data) {
+      handleRiskData(data);
+    }
+  });
+  useTopoEventListener({
+    type: 'relateTopoAlarm',
+    onMessage: function onMessage(data) {
+      handleRelateTopoAlarm(data);
     }
   });
 }

package/es/core/hooks/useCanvasTheme.js

@@ -4,7 +4,7 @@ var themeMap = [{
   name: 'white',
   label: '白色',
   color: null,
-  toolsTheme: 'lightgrayblue'
+  toolsTheme: 'white'
 }, {
   name: 'lightblue',
   label: '蓝色',
@@ -22,7 +22,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;
 
@@ -38,12 +43,13 @@ export default function useCanvasTheme(props) {
 
   var themeConfig = themeMap[themeName || 'white'];
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
+  var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   useEffect(function () {
     // 设置
     if (graphLoaded && themeConfig) {
       try {
         topo.getHtTopo().setTheme(themeName);
-        topo.getHtTopo().setToolsTheme(themeName);
+        topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
       } catch (error) {
         console.error('切换主题失败', error);
       }
@@ -54,12 +60,14 @@ export default 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/es/core/hooks/useResourceConfig.js

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

package/es/core/hooks/useTopoEdit.js

@@ -4,16 +4,18 @@ import _Dialog from "@alifd/next/es/dialog";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import _ from "lodash";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { TopoEvent } from "@riil-frontend/component-topology-graph";
 import { TPL_BLANK, TPL_TREE } from "../../utils/template";
-import topoPermissonUtil from "../../utils/topoPermissionUtil";
-import { getElements, getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode } from "../../utils/htElementUtils";
+import { getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode, getNodes, getGroupChildren } from "../../utils/htElementUtils";
 import useResourceConfig from "./useResourceConfig";
 import useGroupAddResource from "./useGroupAddResource";
 import { findGroupChildren } from "../../utils/topoData";
-import { getGroupChildrenResourceElements } from "../../utils/htElementDataUtil";
+import { isResourceElement } from "../../utils/htElementDataUtil";
 import { isClusterHtElement, isClusterMemberHtElement } from "../../utils/clusterUtil";
+import { mergeExportLinkData } from "../models/utils/linkUtils";
+import { isUniqueIp, buildIpNode } from "../../networkTopo/utils/exitLinkUtil";
 
 var useTopoEdit = function useTopoEdit(params) {
   var topo = params.topo,
@@ -220,7 +222,7 @@ var useTopoEdit = function useTopoEdit(params) {
       return;
     }
 
-    if (!getGroupChildrenResourceElements(group).length || isClusterHtElement(group)) {
+    if (!getGroupChildren(group).filter(isResourceElement).length || isClusterHtElement(group)) {
       doDelete();
       return;
     } // 有子节点时需要确认
@@ -315,7 +317,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);
                 }
@@ -378,8 +380,8 @@ var useTopoEdit = function useTopoEdit(params) {
   };
   /**
    * 获得未存在的连线元素
-   * @param {*} elements 
-   * @returns 
+   * @param {*} elements
+   * @returns
    */
 
 
@@ -392,8 +394,8 @@ var useTopoEdit = function useTopoEdit(params) {
   }
   /**
    * 获得未存在的元素
-   * @param {Array} elements 
-   * @returns 
+   * @param {Array} elements
+   * @returns
    */
 
 
@@ -569,7 +571,7 @@ var useTopoEdit = function useTopoEdit(params) {
               elements = _yield$editDispatcher4.elements;
               // 2022-11-10 修复 添加资源后分层重新布局问题，仅布局新增资源。替换api topo.updateElements(data)
               newElements = findUNExistedElements(elements);
-              rlog.debug('添加分层资源', {
+              rlog.debug("添加分层资源", {
                 layer: group,
                 newElements: newElements
               });
@@ -642,8 +644,8 @@ var useTopoEdit = function useTopoEdit(params) {
   }
   /**
    * 未选中元素添加资源
-   * 
-   * @param {*} data 
+   *
+   * @param {*} data
    */
 
 
@@ -800,7 +802,7 @@ var useTopoEdit = function useTopoEdit(params) {
                           newLinkElements = findUNExistedLinkElements(elements);
                           createElementsData = null;
 
-                          if (newData.type === 'group') {
+                          if (newData.type === "group") {
                             groupChildren = findGroupChildren(elements, newData);
                             newGroupChildren = [];
                             existedGroupChildren = [];
@@ -817,10 +819,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); // 切换前图上如果存在集群内的节点，切换节点为集群后，移到集群内
@@ -835,16 +837,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.debug('批量创建元素', createElementsData); // 恢复图标、大小、位置
+                          rlog.debug("批量创建元素", createElementsData); // 恢复图标、大小、位置
 
                           newElement = dm.getDataByTag(newData.id);
 
@@ -960,6 +962,93 @@ var useTopoEdit = function useTopoEdit(params) {
       return _ref8.apply(this, arguments);
     };
   }();
+  /**
+   * 关联IP的图片节点
+   */
+
+
+  function relateNodeIp(_x15, _x16) {
+    return _relateNodeIp.apply(this, arguments);
+  }
+
+  function _relateNodeIp() {
+    _relateNodeIp = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16(txtValue, nodeElement) {
+      var dm, htTopo, elementNodes, isUnique, ip, configObj, configData, _elements, newLinkElements, newLink, newLinkGroup, createElementsData;
+
+      return _regeneratorRuntime.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:
+              // 根据配置查询拓扑数据
+              dm = topo.getDataModel();
+              htTopo = topo.getHtTopo();
+              elementNodes = getNodes(dm); // 执行唯一性验证
+
+              isUnique = isUniqueIp(dm, txtValue, nodeElement);
+              ip = buildIpNode(txtValue); // 获取关联链路
+
+              if (!isUnique) {
+                _context16.next = 26;
+                break;
+              }
+
+              // deleteExLink(nodeElement);
+              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", configData);
+              _elements = configData.elements;
+              newLinkElements = findUNExistedLinkElements(_elements);
+              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", newLink);
+              createElementsData = {
+                groups: [],
+                nodes: [],
+                links: newLink,
+                linkGroups: newLinkGroup
+              };
+              console.log("createElementsData", createElementsData);
+
+              if ([].concat(newLink, newLinkGroup).length > 0) {
+                htTopo.createElements(createElementsData);
+              }
+
+            case 26:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    }));
+    return _relateNodeIp.apply(this, arguments);
+  }
 
   var onEvent = function onEvent(e) {
     var map = {};
@@ -977,7 +1066,7 @@ var useTopoEdit = function useTopoEdit(params) {
    */
 
   var setViewMouseMode = function setViewMouseMode(mode) {
-    rlog.debug('设置视图鼠标模式', mode);
+    rlog.debug("设置视图鼠标模式", mode);
     topo.getHtTopo().setViewMouseMode(mode);
     topoEditDispatchers.update({
       viewMouseMode: mode
@@ -1055,6 +1144,11 @@ var useTopoEdit = function useTopoEdit(params) {
      */
     onDeleteElement: onDeleteElement,
 
+    /**
+     * 绑定图片ip
+     */
+    relateNodeIp: relateNodeIp,
+
     /**
      * 拓扑图保存回调
      */

package/es/core/hooks/useTopoEventListener.js

@@ -1,26 +1,12 @@
-import { useEffect, useMemo } from 'react';
-var n = 0;
+import { useEffect } from 'react';
+import { createTopoEventListener } from "../event/topoEventListener";
 export default function useTopoEventListener(props) {
   var type = props.type,
       onMessage = props.onMessage;
-  var eventListenerName = useMemo(function () {
-    return "topo_" + n++;
-  }, []);
   useEffect(function () {
-    var EE = window.EE;
-
-    if (EE) {
-      window.EE.on('topo', eventListenerName, function (data) {
-        if (data.type === type) {
-          onMessage(data.data);
-        }
-      });
-    }
-
+    var listener = createTopoEventListener(type, onMessage);
     return function () {
-      if (EE) {
-        window.EE.removeListener('topo', eventListenerName);
-      }
+      listener.close();
     };
   }, [type, onMessage]);
 }

package/es/core/hooks/useTopoFullscreen.js

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+export default 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;
+  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;
+  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]);
+}

package/es/core/models/Alarm.js

@@ -5,9 +5,8 @@ import topoService from "@riil-frontend/component-topology-common/es/services/to
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { EE } from "@riil-frontend/component-riil-event-emitter";
 import { isAvailableArray } from "@riil-frontend/utils";
+import { createTopoEventListener } from "../event/topoEventListener";
 
-// import moment from "moment";
-// import { alarmListDemo } from "./mocks";
 var Alarm = /*#__PURE__*/function () {
   function Alarm() {
     this.topo = void 0;
@@ -375,8 +374,6 @@ var Alarm = /*#__PURE__*/function () {
   /*#__PURE__*/
   function () {
     var _openTopoAlarm = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(id) {
-      var _this2 = this;
-
       var _this$getState2, alarmOpening, topoAlarmIsOpen, alarmDispatchers;
 
       return _regeneratorRuntime.wrap(function _callee6$(_context6) {
@@ -409,17 +406,12 @@ var Alarm = /*#__PURE__*/function () {
             case 10:
               this.secretKey = _context6.sent;
               // rlog.debug("openTopoAlarm 获取初始化告警-------------------开始");
-              EE.on("topo", "topo", function (data, other) {
-                rlog.debug("openTopoAlarm 获取初始化告警------收到信息", data);
-
-                _this2.handleAlarmEvent(data);
-              });
               this.updateState({
                 alarmOpening: false,
                 alarmIsOpened: true
               });
 
-            case 13:
+            case 12:
             case "end":
               return _context6.stop();
           }
@@ -463,16 +455,15 @@ var Alarm = /*#__PURE__*/function () {
             case 3:
               this.currentTopoId = null;
               rlog.debug("useAlarm.useEffect 告警WebSocket 结束");
-              EE.removeListener("topo", "topo");
               this.updateState({
                 topoAlarmIsOpen: false,
                 alarmOpening: false,
                 alarmPanelIsOpen: false
               });
-              _context7.next = 9;
+              _context7.next = 8;
               return this.topo.serverApi.closeTopoAlarm(id, this.secretKey);
 
-            case 9:
+            case 8:
             case "end":
               return _context7.stop();
           }

package/es/core/models/TopoApp.js

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

package/es/core/models/topoData.js

@@ -11,8 +11,8 @@ export function getLayoutId(layout) {
 
   if (typeof layout === "string") {
     return {
-      v: 'towardeast',
-      h: 'towardsouth'
+      v: "towardeast",
+      h: "towardsouth"
     }[layout] || layout;
   }
 
@@ -41,7 +41,7 @@ export function saveTopo(_x) {
 
 function _saveTopo() {
   _saveTopo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
-    var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups, exportLinkIdList, relateTopoIdList, viewGroupId, groupInfo, viewResources;
+    var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups, exportLinkIdList, relateTopoIdList, viewGroupId, groupInfo, viewResources, linkIps;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
@@ -73,7 +73,7 @@ function _saveTopo() {
 
           case 8:
             if (!(resources || groups)) {
-              _context.next = 15;
+              _context.next = 16;
               break;
             }
 
@@ -95,24 +95,31 @@ function _saveTopo() {
               });
             }
 
+            linkIps = []; // resources?.static.map((nodeId) => {
+            //   if (nodeId.startsWith("ip_")) {
+            //     linkIps.push(nodeId.replace("ip_", ""));
+            //   }
+            // });
+
             rlog.debug("saveTopo-groupInfo", groupInfo);
-            _context.next = 15;
+            _context.next = 16;
             return topoService.bindResourceToTopo(topoId, {
               groups: groupInfo,
+              linkIps: linkIps,
               exportLinkIdList: exportLinkIdList,
               relateTopoIdList: relateTopoIdList
             });
 
-          case 15:
+          case 16:
             if (!serialize) {
-              _context.next = 18;
+              _context.next = 19;
               break;
             }
 
-            _context.next = 18;
+            _context.next = 19;
             return topoService.saveSerializeData(topoId, serialize);
 
-          case 18:
+          case 19:
           case "end":
             return _context.stop();
         }