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

package/es/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -9,26 +9,29 @@ import React, { useEffect } from "react";
 import textStyles from "../../../../../../common/text.module.scss";
 import NodeRelateResourceButton from "./NodeRelateResourceButton";
 import PlatformDisplay from "./PlatformDisplay";
+import BindIpInput from "./BindIpInput";
+import { isUniqueIp } from "../../../../../../../networkTopo/utils/exitLinkUtil";
 var Option = _Select.Option;
 var CollapsePanel = _Collapse.Panel;
 
 function parseValues(values) {
   return _extends({}, values, {
     "attrObject.customName": values["attrObject.customName"] || values["attrObject.name"],
-    "attrObject.bindTopo": values["attrObject.bindTopo"] || "" // 解决切换节点时关联拓扑选项未重置
-
+    "attrObject.bindTopo": values["attrObject.bindTopo"] || "",
+    // 解决切换节点时关联拓扑选项未重置
+    "attrObject.bindIp": values["attrObject.bindIp"] || ""
   });
 }
 
 function getBindType(values) {
-  if (values.tag) {
-    return "resource";
-  }
-
   if (values.attrObject.bindType) {
     return values.attrObject.bindType;
   }
 
+  if (values.tag && !values.tag.startsWith("ip:")) {
+    return "resource";
+  }
+
   return "none";
 }
 
@@ -39,15 +42,20 @@ export default function Data(props) {
       values = props.values,
       _onChange = props.onChange,
       editorProps = props.editorProps;
-  var bindType = getBindType(values);
+  var bindType = getBindType(values); // console.log("node, values", node, values);
 
   var field = _Field.useField({
     autoUnmount: false,
     values: parseValues(values),
     onChange: function onChange(name, value) {
-      var newValues = field.getValues();
+      field.validate(function (errors, vals) {
+        if (errors) {// console.error("field-Data", errors, vals);
+        } else {
+          var newValues = field.getValues();
 
-      _onChange(name, value, newValues);
+          _onChange(name, value, newValues);
+        }
+      });
     }
   });
 
@@ -107,7 +115,7 @@ export default function Data(props) {
   }, /*#__PURE__*/React.createElement(_Form, {
     field: field,
     labelAlign: "top"
-  }, !values.tag && /*#__PURE__*/React.createElement(_Form.Item, {
+  }, (!values.tag || bindType === "ip") && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u7C7B\u578B"
   }, /*#__PURE__*/React.createElement(_Select, {
     name: "bindType",
@@ -121,7 +129,9 @@ export default function Data(props) {
     value: "none"
   }, "\u672A\u5173\u8054"), /*#__PURE__*/React.createElement(Option, {
     value: "resource"
-  }, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
+  }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(Option, {
+    value: "ip"
+  }, "\u5173\u8054IP"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
     value: "topo"
   }, "\u5173\u8054\u62D3\u6251"))), bindType === "resource" && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u8D44\u6E90"
@@ -135,7 +145,7 @@ export default function Data(props) {
       flex: 1,
       paddingRight: 16,
       color: "#4D6277",
-      lineHeight: '20px'
+      lineHeight: "20px"
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : "—"), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
@@ -144,13 +154,35 @@ export default function Data(props) {
     topo: topo,
     topoEditApi: topoEditApi,
     nodeBindResourceDrawerComponent: editorProps.nodeBindResourceDrawerComponent
-  }))), bindType === "topo" && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
+  }))), bindType === "ip" &&
+  /*#__PURE__*/
+  // <Form.Item
+  //   label="关联IP"
+  //   // style={{ display: "flex" }}
+  //   pattern={
+  //     /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/
+  //   }
+  //   patternTrigger="onBlur"
+  //   patternMessage="IP地址格式不正确"
+  // >
+  React.createElement(BindIpInput, {
+    nodeElement: node,
+    values: values,
+    topo: topo,
+    fieldItem: field,
+    topoEditApi: topoEditApi,
+    placeholder: "\u8BF7\u8F93\u5165",
+    name: "attrObject.bindIp",
+    onChange: _onChange,
+    maxLength: 128
+  }) // </Form.Item>
+  , bindType === "topo" && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u62D3\u6251"
   }, /*#__PURE__*/React.createElement(RelateTopoTree, {
     name: "attrObject.bindTopo",
     topo: topo,
     onChange: handleBindTopoChange
-  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === 'cmpTopo' && node.getTag() && /*#__PURE__*/React.createElement(_Form.Item, {
+  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === "cmpTopo" && node.getTag() && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6240\u5C5E\u5E73\u53F0"
   }, /*#__PURE__*/React.createElement(PlatformDisplay, props)))));
 }

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/editor/utils/edgeTypeStyleUtil.js

@@ -1,4 +1,5 @@
 import { getEdges } from "../../../utils/htElementUtils";
+import { getEdgesBetweenNodes } from "../../../utils/htElementUtils";
 var ht = window.ht;
 export function getEdgesBySelection(topo) {
   var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
@@ -42,6 +43,43 @@ export function getEdgesBySelection(topo) {
 
   return getSelectedEdges(topo.getGraphView());
 }
+/**
+ * 根据选中的线查找对应节点下所有的线是否都选中
+ * @param {*} topo 
+ * @param {*} edges 
+ * @param {*} operateEdgeFn 
+ */
+
+export 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 = 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/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,100 @@ 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, isUnique, ip, configObj, configData, _elements, newLinkElements, newLink, newLinkGroup, createElementsData, _htTopo;
+
+      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:
+              // if (txtValue === nodeElement.a('bindIp')) {
+              //   return;
+              // }
+              // 根据配置查询拓扑数据
+              dm = topo.getDataModel(); // 执行唯一性验证
+
+              isUnique = isUniqueIp(dm, txtValue, nodeElement); // 获取关联链路
+
+              if (!isUnique) {
+                _context16.next = 25;
+                break;
+              }
+
+              ip = 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 = {};
@@ -977,7 +1073,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 +1151,11 @@ var useTopoEdit = function useTopoEdit(params) {
      */
     onDeleteElement: onDeleteElement,
 
+    /**
+     * 绑定图片ip
+     */
+    relateNodeIp: relateNodeIp,
+
     /**
      * 拓扑图保存回调
      */

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]);
+}