@riil-frontend/component-topology 9.0.0-a.10 → 9.0.0-a.12

package/es/utils/htElementUtils.js

@@ -15,7 +15,7 @@ function getElementData(element) {
     styleMap: element.getStyleMap()
   };
 
-  if (className === 'ht.Edge') {
+  if (className === "ht.Edge") {
     return _extends({}, commonData);
   }
 
@@ -27,7 +27,7 @@ function getElementData(element) {
 export function isNode(element) {
   // HT为了支持区域内无节点可展开增加了站位节点，因此 节点的layer等于container_blank的过滤掉就可以了
   // eslint-disable-next-line no-underscore-dangle
-  return element instanceof ht.Node && !isLayer(element) && element._layer !== 'container_blank';
+  return element instanceof ht.Node && !isLayer(element) && element._layer !== "container_blank";
 }
 export function isEdge(element) {
   return element instanceof ht.Edge;
@@ -38,7 +38,7 @@ export function isValidEdge(element) {
   }
 
   if (!element.getSource() || !element.getTarget()) {
-    rlog.error('isValidEdge 连线异常：源或目的为空', element);
+    rlog.error("isValidEdge 连线异常：源或目的为空", element);
     return false;
   }
 
@@ -51,7 +51,29 @@ export function isLayer(element) {
   return element instanceof ht.Grid;
 }
 export function isText(element) {
-  return element instanceof ht.Text && element.a('isText');
+  return element instanceof ht.Text && element.a("isText");
+}
+export function isUniqueIp(dataModel, ip) {
+  console.log("isUniqueIp", ip);
+  var nodes = getNodes(dataModel);
+  var isUnique = true;
+
+  for (var i = 0; i < nodes.length; i++) {
+    var element = nodes[i];
+    var tagTxt = element.getTag();
+    console.log("isUniqueIp-element", tagTxt, ip);
+
+    if (tagTxt !== null && tagTxt !== void 0 && tagTxt.startsWith("ip_")) {
+      var ipTxt = tagTxt.replace("ip_", '');
+
+      if (ipTxt === ip) {
+        isUnique = false;
+        break;
+      }
+    }
+  }
+
+  return isUnique;
 }
 export function getElements(dataModel) {
   // console.error(111, dataModel.getDatas().getArray())
@@ -72,7 +94,7 @@ export function getGroupDatas(dataModel) {
 }
 export function getGroupElementByTag(dataModel, tag) {
   return dataModel.getDataByTag(tag) || dataModel.getDatas().toArray().filter(function (item) {
-    return item.a('tag') === tag;
+    return item.a("tag") === tag;
   })[0];
 }
 export function getGroupData(element) {
@@ -83,14 +105,14 @@ export function getGroupData(element) {
   var parent = element.getParent();
   var groupInfo = parent ? {
     groupId: parent.getTag(),
-    groupTag: parent.a('tag') // 父容器
+    groupTag: parent.a("tag") // 父容器
 
   } : {};
   return _extends({
     name: element.getStyleMap().label
   }, element.getAttrObject(), {
     id: element.getTag(),
-    tag: element.a('tag'),
+    tag: element.a("tag"),
     image: element.getImage()
   }, groupInfo);
 }
@@ -104,7 +126,7 @@ export function getNodeData(element) {
   var parent = element.getParent();
   var groupInfo = parent ? {
     groupId: parent.getTag(),
-    groupTag: parent.a('tag') // 父容器
+    groupTag: parent.a("tag") // 父容器
 
   } : {};
   return _extends({}, element.getAttrObject(), {
@@ -116,12 +138,12 @@ export function getEdges(dataModel) {
   return getElements(dataModel).filter(isValidEdge);
 }
 export function isEdgeGroupExpanded(edge) {
-  return isEdge(edge) && edge.getEdgeGroup() && !!edge.s('edge.expanded');
+  return isEdge(edge) && edge.getEdgeGroup() && !!edge.s("edge.expanded");
 }
 /**
  * 是否连线组代理
- * @param {*} edge 
- * @returns 
+ * @param {*} edge
+ * @returns
  */
 
 export function isEdgeGroupAgent(edge) {
@@ -129,9 +151,9 @@ export function isEdgeGroupAgent(edge) {
 }
 /**
  * 获得两个节点间的连线列表
- * @param {*} node1 
- * @param {*} node2 
- * @returns 
+ * @param {*} node1
+ * @param {*} node2
+ * @returns
  */
 
 export function getEdgesBetweenNodes(node1, node2) {
@@ -153,7 +175,7 @@ export function getEdgesBetweenNodes(node1, node2) {
 }
 /**
  * 获得节点间的连线组，连线<=1时返回null
- * @returns 
+ * @returns
  */
 
 export function getEdgeGroupByNodes(node1, node2) {
@@ -172,7 +194,7 @@ export function getEdgeGroupByNodes(node1, node2) {
 }
 /**
  * 获得节点间的连线组，连线<=1时返回null
- * @returns 
+ * @returns
  */
 
 export function getEdgeGroupByNodeTags(dataModel, nodeTag1, nodeTag2) {
@@ -180,7 +202,7 @@ export function getEdgeGroupByNodeTags(dataModel, nodeTag1, nodeTag2) {
   var node2 = dataModel.getDataByTag(nodeTag2);
 
   if (!node1 || !node2) {
-    console.warn('getEdgeGroupByNodes 未找到节点', {
+    console.warn("getEdgeGroupByNodes 未找到节点", {
       node1: node1,
       node2: node2,
       nodeTag1: nodeTag1,
@@ -261,7 +283,7 @@ export function getGroupChildren(group) {
 
 
   return group.getChildren().getArray().filter(function (node) {
-    return node._layer !== 'container_blank';
+    return node._layer !== "container_blank";
   });
 }
 /**
@@ -291,7 +313,7 @@ export function getGroupChildrenData(group) {
 export function setElementRuntimeStyle(element, name, value) {
   var _extends2;
 
-  var prevRuntimeStyle = element.a('runtimeStyles') || {};
+  var prevRuntimeStyle = element.a("runtimeStyles") || {};
 
   var runtimeStyle = _extends({}, prevRuntimeStyle, (_extends2 = {}, _extends2[name] = value, _extends2)); // if (prevRuntimeStyle[name] === undefined && value === undefined) {
   //   return
@@ -302,7 +324,7 @@ export function setElementRuntimeStyle(element, name, value) {
     runtimeStyle[name] = undefined; // delete runtimeStyle[name]
   }
 
-  element.a('runtimeStyles', runtimeStyle);
+  element.a("runtimeStyles", runtimeStyle);
 }
 /**
  * 判断拓扑图是否存在元素
@@ -315,7 +337,7 @@ export function isExistedElement(htTopo, dataModel, data) {
 
 
   var element = getElements(dataModel).find(function (item) {
-    return data.tag && item.a('tag') === data.tag;
+    return data.tag && item.a("tag") === data.tag;
   });
 
   if (element) {

package/lib/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -3,8 +3,8 @@
 
 .tabs {
   height: 100%;
-
-}
+  display: flex;
+} 
 
 // 导航
 .nav {
@@ -49,17 +49,23 @@
 
 // 标签页内容区
 .content {
-  width: 260px;
+  // width: 260px;
   height: 100%;
   border-left: none !important;
-  border-right: 1px solid var(--tab-wrapped-border-line-color);
   transition: width .1s linear;
+  overflow: initial !important;
 
   :global {
     .#{$css-prefix}tabs-tabpane {
-      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      // width: 250px;
       height: 100%;
       overflow: auto;
+      background: #FFF;
+      border-right: 1px solid var(--tab-wrapped-border-line-color);
     }
   }
 

package/lib/core/editor/components/BackgroundView/index.module.scss

@@ -1,8 +1,11 @@
 @import "~@alifd/next/variables.scss";
 
 .background-view {
+  width: 260px;
   padding: 16px;
   background: #fff;
+  height: 100%;
+  overflow: auto;
   .option {
     text-align: right;
     button {

package/lib/core/editor/components/Sidebar/Sidebar.module.scss

@@ -1,19 +1,19 @@
 .sidebar {
   // border-right: 1px solid #E6E7EB;
   position: relative;
-  width: 60px;
+  // width: 60px;
 
   .tabsContainer {
-    position: absolute;
-    width: 60px;
+    // position: absolute;
+    // left: 0;
+    // top: 0;
+    // z-index: 1;
+    // width: 60px;
     height: 100%;
-    left: 0;
-    top: 0;
-    z-index: 1;
     background: #FFF;
 
     &.expanded {
-      width: 320px;
+      // width: 320px;
     }
   }
 }

package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss

@@ -1,6 +1,7 @@
 @import "~@alifd/next/variables.scss";
 
   .canvasToggle {
+    width: 260px;
     display: flex;
     flex-wrap: wrap;
     .canvas {

package/lib/core/editor/components/Sidebar/views/ComponentPanel.js

@@ -46,7 +46,7 @@ function ComponentPanel(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: divRef,
     style: {
-      width: '100%',
+      width: '260px',
       height: '100%'
     }
   });

package/lib/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js

@@ -46,7 +46,8 @@ function ImagePanel(props) {
     accordion: true,
     defaultExpandedKeys: ['资源图片'],
     style: {
-      border: 'none'
+      border: 'none',
+      minWidth: '300px'
     },
     fullheight: true,
     noContentPadding: true

package/lib/core/editor/components/Sidebar/views/LinkPanel.js

@@ -46,7 +46,7 @@ function LinkPanel(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: divRef,
     style: {
-      width: '100%',
+      width: '260px',
       height: '100%'
     }
   });

package/lib/core/editor/components/settings/core/updateElementProperty.js

@@ -5,7 +5,12 @@ exports["default"] = updateElementProperty;
 
 function updateElementProperty(topo, name, value) {
   // const element = topo.getDataModel().getDataById(selection[0].id);
-  var element = topo.getSelectionModel().getFirstData(); // console.info("updateElementProperty",topo.getSelectionModel().getSelection(), { selection, element, name, value });
+  var element = topo.getSelectionModel().getFirstData();
+  console.info("updateElementProperty", topo.getSelectionModel().getSelection(), {
+    element: element,
+    name: name,
+    value: value
+  });
 
   if (name.startsWith('attrObject.')) {
     element.setAttr(name.replace('attrObject.', ''), value);

package/lib/core/editor/components/settings/propertyViews/node/data/BindIpInput.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = BindIpInput;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
+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; }
+
+/**
+ * @return {React.ReactNode | null}
+ */
+function BindIpInput(props) {
+  var _node$attrObjectIpv;
+
+  var nodeElement = props.nodeElement,
+      topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      node = props.node,
+      onChange = props.onChange,
+      value = props.value; // const currentResId = node.tag;
+
+  console.log("nodeElement, topo, topoEditApi, node", nodeElement, topo, topoEditApi, node, value);
+
+  var _useState = (0, _react.useState)(''),
+      error = _useState[0],
+      setError = _useState[1];
+
+  var _useState2 = (0, _react.useState)((_node$attrObjectIpv = node["attrObject.ipv4"]) !== null && _node$attrObjectIpv !== void 0 ? _node$attrObjectIpv : ""),
+      txtValue = _useState2[0],
+      setTxtValue = _useState2[1];
+
+  var saveIp = function saveIp(v) {
+    console.log("saveIp", txtValue);
+    var rex = /^((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)))$/;
+    var reg = txtValue.match(rex);
+
+    if (reg === null) {
+      setError('error');
+    } else {
+      setError('');
+      onChange(txtValue);
+      topoEditApi.relateNodeIp(txtValue, nodeElement);
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: "flex"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    placeholder: "\u8BF7\u8F93\u5165Ip\u5730\u5740",
+    name: "attrObject.ipv4",
+    state: error,
+    value: txtValue,
+    maxLength: 128,
+    onChange: setTxtValue
+  }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    type: "primary",
+    text: true,
+    onClick: saveIp,
+    style: {
+      marginLeft: 10
+    }
+  }, "\u4FDD\u5B58"));
+}

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

@@ -27,6 +27,8 @@ var _NodeRelateResourceButton = _interopRequireDefault(require("./NodeRelateReso
 
 var _PlatformDisplay = _interopRequireDefault(require("./PlatformDisplay"));
 
+var _BindIpInput = _interopRequireDefault(require("./BindIpInput"));
+
 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; }
@@ -37,13 +39,14 @@ var CollapsePanel = _collapse["default"].Panel;
 function parseValues(values) {
   return (0, _extends2["default"])({}, values, {
     "attrObject.customName": values["attrObject.customName"] || values["attrObject.name"],
-    "attrObject.bindTopo": values["attrObject.bindTopo"] || "" // 解决切换节点时关联拓扑选项未重置
-
+    "attrObject.bindTopo": values["attrObject.bindTopo"] || "",
+    // 解决切换节点时关联拓扑选项未重置
+    "attrObject.ipv4": values["attrObject.ipv4"] || ""
   });
 }
 
 function getBindType(values) {
-  if (values.tag) {
+  if (values.tag && !values.tag.startsWith('Ip_')) {
     return "resource";
   }
 
@@ -62,6 +65,7 @@ function Data(props) {
       _onChange = props.onChange,
       editorProps = props.editorProps;
   var bindType = getBindType(values);
+  console.log("node, values", node, values);
 
   var field = _field["default"].useField({
     autoUnmount: false,
@@ -129,7 +133,7 @@ function Data(props) {
   }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
     field: field,
     labelAlign: "top"
-  }, !values.tag && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  }, (!values.tag || bindType === "ip") && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u5173\u8054\u7C7B\u578B"
   }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
     name: "bindType",
@@ -143,7 +147,9 @@ function Data(props) {
     value: "none"
   }, "\u672A\u5173\u8054"), /*#__PURE__*/_react["default"].createElement(Option, {
     value: "resource"
-  }, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/_react["default"].createElement(Option, {
+  }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "ip"
+  }, "\u5173\u8054IP"), RelateTopoTree && /*#__PURE__*/_react["default"].createElement(Option, {
     value: "topo"
   }, "\u5173\u8054\u62D3\u6251"))), bindType === "resource" && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u5173\u8054\u8D44\u6E90"
@@ -157,7 +163,7 @@ 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["default"].createElement(_NodeRelateResourceButton["default"], {
@@ -166,13 +172,27 @@ function Data(props) {
     topo: topo,
     topoEditApi: topoEditApi,
     nodeBindResourceDrawerComponent: editorProps.nodeBindResourceDrawerComponent
-  }))), bindType === "topo" && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  }))), bindType === "ip" && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5173\u8054IP" // 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\u5730\u5740\u683C\u5F0F\u4E0D\u6B63\u786E"
+  }, /*#__PURE__*/_react["default"].createElement(_BindIpInput["default"], {
+    nodeElement: node,
+    node: values,
+    topo: topo,
+    topoEditApi: topoEditApi,
+    placeholder: "\u8BF7\u8F93\u5165",
+    name: "attrObject.ipv4",
+    maxLength: 128
+  })), bindType === "topo" && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u5173\u8054\u62D3\u6251"
   }, /*#__PURE__*/_react["default"].createElement(RelateTopoTree, {
     name: "attrObject.bindTopo",
     topo: topo,
     onChange: handleBindTopoChange
-  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === 'cmpTopo' && node.getTag() && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === "cmpTopo" && node.getTag() && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u6240\u5C5E\u5E73\u53F0"
   }, /*#__PURE__*/_react["default"].createElement(_PlatformDisplay["default"], props)))));
 }