@riil-frontend/component-topology 13.0.0-dev.8 → 13.0.0-dev.9

package/es/components/ColorPanel/index.js

@@ -1,14 +1,68 @@
 import _Balloon from "@alifd/next/es/balloon";
+import _extends from "@babel/runtime/helpers/extends";
 
 /* eslint-disable eqeqeq */
 
 /* eslint-disable jsx-a11y/alt-text */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Color from 'color';
 import { SketchPicker } from 'react-color';
 import ColorBlock from "./components/ColorBlock";
 import styles from "./index.module.scss";
+var defaultColorList = [{
+  color: 'rgba(255, 255, 255, 1)',
+  borderColor: 'rgba(219, 219, 219, 1)'
+}, {
+  color: 'rgba(245, 245, 245, 1)',
+  borderColor: 'rgba(208, 208, 208, 1)'
+}, {
+  color: 'rgba(230, 230, 230, 1)',
+  borderColor: 'rgba(196, 196, 196, 1)'
+}, {
+  color: 'rgba(168, 168, 168, 1)',
+  borderColor: 'rgba(146, 146, 146, 1)'
+}, {
+  color: 'rgba(97, 97, 97, 1)',
+  borderColor: 'rgba(85, 85, 85, 1)'
+}, {
+  color: 'rgba(49, 49, 49, 1)',
+  borderColor: 'rgba(43, 43, 43, 1)'
+}, {
+  color: 'rgba(251, 115, 80, 1)',
+  borderColor: 'rgba(213, 98, 69, 1)'
+}, {
+  color: 'rgba(255, 166, 41, 1)',
+  borderColor: 'rgba(219, 144, 45, 1)'
+}, {
+  color: 'rgba(255, 205, 42, 1)',
+  borderColor: 'rgba(216, 175, 37, 1)'
+}, {
+  color: 'rgba(18, 174, 92, 1)',
+  borderColor: 'rgba(23, 148, 79, 1)'
+}, {
+  color: 'rgba(83, 184, 255, 1)',
+  borderColor: 'rgba(74, 156, 217, 1)'
+}, {
+  color: 'rgba(183, 128, 255, 1)',
+  borderColor: 'rgba(155, 109, 216, 1)'
+}, {
+  color: 'rgba(254, 192, 174, 1)',
+  borderColor: 'rgba(217, 163, 148, 1)'
+}, {
+  color: 'rgba(252, 209, 156, 1)',
+  borderColor: 'rgba(215, 178, 133, 1)'
+}, {
+  color: 'rgba(255, 232, 163, 1)',
+  borderColor: 'rgba(217, 198, 139, 1)'
+}, {
+  color: 'rgba(176, 244, 197, 1)',
+  borderColor: 'rgba(153, 209, 171, 1)'
+}, {
+  color: 'rgba(189, 227, 255, 1)',
+  borderColor: 'rgba(161, 193, 217, 1)'
+}];
 /**
  * 颜色选择
  *
@@ -22,7 +76,9 @@ function ColorPanel(props) {
 
   var value = props.value,
       showClear = props.showClear,
-      dataSource = props.dataSource,
+      _props$dataSource = props.dataSource,
+      dataSource = _props$dataSource === void 0 ? defaultColorList : _props$dataSource,
+      colorPickerBalloonProps = props.colorPickerBalloonProps,
       onChange = props.onChange,
       onPickerFocus = props.onPickerFocus,
       onPickerBlur = props.onPickerBlur;
@@ -169,9 +225,7 @@ function ColorPanel(props) {
     onClick: function onClick() {
       changClick('17');
     }
-  }, /*#__PURE__*/React.createElement(_Balloon, {
-    visible: visible,
-    trigger: defaultTrigger,
+  }, /*#__PURE__*/React.createElement(_Balloon, _extends({
     closable: false,
     triggerType: "click",
     animation: false,
@@ -180,9 +234,12 @@ function ColorPanel(props) {
     alignEdge: true,
     style: {
       paddingBottom: 0
-    },
+    }
+  }, colorPickerBalloonProps, {
+    visible: visible,
+    trigger: defaultTrigger,
     onClose: close
-  }, /*#__PURE__*/React.createElement(SketchPicker, {
+  }), /*#__PURE__*/React.createElement(SketchPicker, {
     color: data !== null && data !== void 0 ? data : undefined // width={230}
     ,
     disableAlpha: true,
@@ -198,61 +255,14 @@ function ColorPanel(props) {
   }))))));
 }
 
+ColorPanel.propTypes = {
+  dataSource: PropTypes.array
+};
 ColorPanel.defaultProps = {
   value: undefined,
   showClear: false,
-  dataSource: [{
-    color: 'rgba(255, 255, 255, 1)',
-    borderColor: 'rgba(219, 219, 219, 1)'
-  }, {
-    color: 'rgba(245, 245, 245, 1)',
-    borderColor: 'rgba(208, 208, 208, 1)'
-  }, {
-    color: 'rgba(230, 230, 230, 1)',
-    borderColor: 'rgba(196, 196, 196, 1)'
-  }, {
-    color: 'rgba(168, 168, 168, 1)',
-    borderColor: 'rgba(146, 146, 146, 1)'
-  }, {
-    color: 'rgba(97, 97, 97, 1)',
-    borderColor: 'rgba(85, 85, 85, 1)'
-  }, {
-    color: 'rgba(49, 49, 49, 1)',
-    borderColor: 'rgba(43, 43, 43, 1)'
-  }, {
-    color: 'rgba(251, 115, 80, 1)',
-    borderColor: 'rgba(213, 98, 69, 1)'
-  }, {
-    color: 'rgba(255, 166, 41, 1)',
-    borderColor: 'rgba(219, 144, 45, 1)'
-  }, {
-    color: 'rgba(255, 205, 42, 1)',
-    borderColor: 'rgba(216, 175, 37, 1)'
-  }, {
-    color: 'rgba(18, 174, 92, 1)',
-    borderColor: 'rgba(23, 148, 79, 1)'
-  }, {
-    color: 'rgba(83, 184, 255, 1)',
-    borderColor: 'rgba(74, 156, 217, 1)'
-  }, {
-    color: 'rgba(183, 128, 255, 1)',
-    borderColor: 'rgba(155, 109, 216, 1)'
-  }, {
-    color: 'rgba(254, 192, 174, 1)',
-    borderColor: 'rgba(217, 163, 148, 1)'
-  }, {
-    color: 'rgba(252, 209, 156, 1)',
-    borderColor: 'rgba(215, 178, 133, 1)'
-  }, {
-    color: 'rgba(255, 232, 163, 1)',
-    borderColor: 'rgba(217, 198, 139, 1)'
-  }, {
-    color: 'rgba(176, 244, 197, 1)',
-    borderColor: 'rgba(153, 209, 171, 1)'
-  }, {
-    color: 'rgba(189, 227, 255, 1)',
-    borderColor: 'rgba(161, 193, 217, 1)'
-  }],
+  dataSource: defaultColorList,
+  colorPickerBalloonProps: {},
   onChange: function onChange() {},
   onPickerFocus: function onPickerFocus() {},
   onPickerBlur: function onPickerBlur() {}

package/es/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js

@@ -15,6 +15,8 @@ function FontColorDropdown(props) {
       background = props.background,
       _props$fieldDisabled = props.fieldDisabled,
       fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
+      colorPickerBalloonProps = props.colorPickerBalloonProps,
+      backgroundPickerBalloonProps = props.backgroundPickerBalloonProps,
       onChange = props.onChange,
       onColorChange = props.onColorChange,
       onBackgroundChange = props.onBackgroundChange,
@@ -27,11 +29,9 @@ function FontColorDropdown(props) {
   var backgroundEnabled = fieldDisabled.background !== true;
   var opacityEnabled = fieldDisabled.opacity !== true;
 
-  var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
-  };
+  var onFocus = function onFocus() {};
 
-  var onBlur = function onBlur() {// topo.historyManager.endTransaction();
-  };
+  var onBlur = function onBlur() {};
 
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
@@ -54,6 +54,7 @@ function FontColorDropdown(props) {
     }
   }, /*#__PURE__*/React.createElement(ColorPanel, {
     value: color,
+    colorPickerBalloonProps: colorPickerBalloonProps,
     onChange: onColorChange,
     onPickerFocus: onFocus,
     onPickerBlur: onBlur
@@ -80,6 +81,7 @@ function FontColorDropdown(props) {
   }, /*#__PURE__*/React.createElement(ColorPanel, {
     showClear: true,
     value: background,
+    colorPickerBalloonProps: backgroundPickerBalloonProps,
     onChange: onBackgroundChange,
     onPickerFocus: onFocus,
     onPickerBlur: onBlur
@@ -111,4 +113,8 @@ function FontColorD(props) {
   }));
 }
 
+ColorPanel.defaultProps = {
+  colorPickerBalloonProps: {},
+  backgroundPickerBalloonProps: {}
+};
 export default FontColorD;

package/es/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js

@@ -32,7 +32,25 @@ function FontStyleSelect(props) {
       disabled = props.disabled,
       onChange = props.onChange,
       _props$fieldDisabled = props.fieldDisabled,
-      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled;
+      fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
+      hideItemTootip = props.hideItemTootip;
+
+  var renderMenuItemContent = function renderMenuItemContent(item) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", {
+      style: fieldDisabled[item.key] ? {} : {
+        color: variables['$color-text1-4']
+      }
+    }, item.label));
+  };
+
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     value: value,
     valueRender: function valueRender() {
@@ -48,20 +66,8 @@ function FontStyleSelect(props) {
     return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
       key: item.key,
       disabled: !!fieldDisabled[item.key]
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      trigger: /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center'
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
-        alt: ""
-      }), /*#__PURE__*/React.createElement("span", {
-        style: fieldDisabled[item.key] ? {} : {
-          color: variables['$color-text1-4']
-        }
-      }, item.label)),
+    }, hideItemTootip ? renderMenuItemContent(item) : /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: renderMenuItemContent(item),
       align: "r",
       popupStyle: {}
     }, item.tooltip));

package/es/core/hooks/useResourceConfig.js

@@ -41,8 +41,7 @@ export default function (props) {
     var config = getConfigFromHt();
     return {
       resources: config.resources,
-      groups: config.groups,
-      relateTopoIdList: config.relateTopoIdList
+      groups: config.groups
     };
   };
 

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 "13.0.0-dev.8" === 'string' ? "13.0.0-dev.8" : null;
+var version = typeof "13.0.0-dev.9" === 'string' ? "13.0.0-dev.9" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/models/topoData.js

@@ -41,11 +41,11 @@ export function saveTopo(_x) {
 
 function _saveTopo() {
   _saveTopo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
-    var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups, relateTopoIdList, viewGroupId, groupInfo, viewResources;
+    var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups, viewGroupId, groupInfo, viewResources;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          topoService = data.topoService, topoId = data.id, template = data.template, layout = data.layout, backgroundId = data.backgroundId, globalConfig = data.globalConfig, serialize = data.serialize, resources = data.resources, groups = data.groups, relateTopoIdList = data.relateTopoIdList, viewGroupId = data.viewGroupId;
+          topoService = data.topoService, topoId = data.id, template = data.template, layout = data.layout, backgroundId = data.backgroundId, globalConfig = data.globalConfig, serialize = data.serialize, resources = data.resources, groups = data.groups, viewGroupId = data.viewGroupId;
           rlog.debug("saveTopo", data); // 保存布局
 
           if (!(template && layout)) {
@@ -97,8 +97,7 @@ function _saveTopo() {
           rlog.debug("saveTopo-groupInfo", groupInfo);
           _context.next = 15;
           return topoService.bindResourceToTopo(topoId, {
-            groups: groupInfo,
-            relateTopoIdList: relateTopoIdList
+            groups: groupInfo
           });
 
         case 15:

package/es/core/store/models/topoConfig.js

@@ -243,18 +243,17 @@ export default function (topoApp) {
           var _this2 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-            var editState, resources, _editState$groups, groups, relateTopoIdList, query, data;
+            var editState, resources, _editState$groups, groups, query, data;
 
             return _regeneratorRuntime.wrap(function _callee2$(_context2) {
               while (1) switch (_context2.prev = _context2.next) {
                 case 0:
                   editState = rootState.topoConfig;
-                  resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups, relateTopoIdList = editState.relateTopoIdList;
+                  resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups;
                   query = {
                     id: rootState.topoMod.topoId,
                     resources: resources,
-                    groups: groups,
-                    relateTopoIdList: relateTopoIdList
+                    groups: groups
                   };
                   _context2.next = 5;
                   return _this2.getTopoByConditions(query);
@@ -297,13 +296,13 @@ export default function (topoApp) {
           var _this4 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-            var topoId, resources, groups, relateTopoIdList, viewConditions, groupInfo, data, _yield$Promise$all, dataWithLinkDetail, _combTopoData, topoData, resAndMetrics, topoDataTrans;
+            var topoId, resources, groups, viewConditions, groupInfo, data, _yield$Promise$all, dataWithLinkDetail, _combTopoData, topoData, resAndMetrics, topoDataTrans;
 
             return _regeneratorRuntime.wrap(function _callee4$(_context4) {
               while (1) switch (_context4.prev = _context4.next) {
                 case 0:
                   rlog.debug("getTopoByConditions--------", params);
-                  topoId = params.id, resources = params.resources, groups = params.groups, relateTopoIdList = params.relateTopoIdList;
+                  topoId = params.id, resources = params.resources, groups = params.groups;
                   viewConditions = resToConditions(resources);
                   groupInfo = isAvailableArray(groups) && groups.map(function (group) {
                     return _extends({}, group, {
@@ -313,7 +312,7 @@ export default function (topoApp) {
                   });
                   rlog.debug("getTopoByConditions--------", viewConditions, groupInfo);
                   _context4.next = 7;
-                  return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo, relateTopoIdList);
+                  return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo);
 
                 case 7:
                   data = _context4.sent;

package/es/networkTopo/services/topo/basic.js

@@ -1,7 +1,5 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["groups", "resources"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { request } from '@riil-frontend/component-topology-utils';
 import { rlog } from '@riil-frontend/component-topology-utils';
@@ -9,7 +7,7 @@ import blackList from "./blacklist";
 import { TOPO_API_ROOT } from "./constants";
 import { getBatchCi as _getBatchCi, getBatchCiMetric as _getBatchCiMetric } from "../model";
 import { processByConditionResult, processExitLink } from "../../utils/exitLinkUtil";
-import * as processBothTopoDataUtil from "../../utils/relateTopoDataUtil";
+import * as relateTopoDataUtil from "../../utils/relateTopoDataUtil";
 var API_ROOT = TOPO_API_ROOT;
 /**
  * 拓扑图（看做一个容器）的“父容器”ID
@@ -99,7 +97,8 @@ function prepareGroupParams(modifiedGroups) {
     };
   }).filter(Boolean);
   return {
-    groups: groups
+    groups: groups,
+    relateTopoIdList: relateTopoDataUtil.getRelateTopoIdListFromConfig(modifiedGroups)
   };
 }
 
@@ -399,7 +398,7 @@ export default _extends({
               }),
               serialize: result.serialize ? JSON.parse(result.serialize) : undefined
             });
-            result = processBothTopoDataUtil.processBothTopoData(result);
+            result = relateTopoDataUtil.processBothTopoData(result);
             result = processExitLink(result);
             return _context12.abrupt("return", result);
 
@@ -418,11 +417,11 @@ export default _extends({
   * @param {Array} groups
   * @returns
   */
-  getTopoDataByResource: function getTopoDataByResource(id, resources, groups, relateTopoIdList) {
+  getTopoDataByResource: function getTopoDataByResource(id, resources, groups) {
     return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
       var _result$nodes2, _result$links2;
 
-      var data, obj, result;
+      var data, params, result;
       return _regeneratorRuntime.wrap(function _callee13$(_context13) {
         while (1) switch (_context13.prev = _context13.next) {
           case 0:
@@ -436,11 +435,9 @@ export default _extends({
               });
             }
 
-            obj = prepareGroupParams(data);
+            params = prepareGroupParams(data);
             _context13.next = 5;
-            return request.post(API_ROOT + "/structure/byCondition/" + id, _extends({}, obj, {
-              relateTopoIdList: relateTopoIdList
-            }));
+            return request.post(API_ROOT + "/structure/byCondition/" + id, params);
 
           case 5:
             result = _context13.sent;
@@ -452,9 +449,14 @@ export default _extends({
                 });
               })
             });
-            return _context13.abrupt("return", processByConditionResult(result, obj.groups));
+            result = relateTopoDataUtil.processByConditionTopoData({
+              data: result,
+              config: data
+            });
+            result = processByConditionResult(result, params.groups);
+            return _context13.abrupt("return", result);
 
-          case 8:
+          case 10:
           case "end":
             return _context13.stop();
         }
@@ -471,11 +473,11 @@ export default _extends({
   */
   bindResourceToTopo: function bindResourceToTopo(id, config) {
     return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-      var groups, resources, otherConfig, newGroups, obj;
+      var groups, resources, newGroups, obj;
       return _regeneratorRuntime.wrap(function _callee14$(_context14) {
         while (1) switch (_context14.prev = _context14.next) {
           case 0:
-            groups = config.groups, resources = config.resources, otherConfig = _objectWithoutPropertiesLoose(config, _excluded);
+            groups = config.groups, resources = config.resources;
             newGroups = Array.isArray(groups) ? groups : [];
 
             if (resources) {
@@ -489,7 +491,7 @@ export default _extends({
 
             obj = prepareGroupParams(newGroups);
             _context14.next = 6;
-            return request.post(API_ROOT + "/resource/" + id, _extends({}, otherConfig, obj));
+            return request.post(API_ROOT + "/resource/" + id, obj);
 
           case 6:
             return _context14.abrupt("return", _context14.sent);

package/es/networkTopo/utils/relateTopoDataUtil.js

@@ -25,10 +25,29 @@ export function processBothTopoData(topoData) {
  */
 
 export function processByConditionTopoData(ctx) {
-  var topoData = ctx.topoData;
-  var nodes = topoData.nodes,
-      links = topoData.links;
-  return _extends({}, topoData);
+  var data = ctx.data,
+      config = ctx.config;
+  var nodes = data.nodes,
+      links = data.links;
+  return _extends({}, data, {
+    nodes: [].concat(nodes, buildTopoNodeDatas(config)),
+    links: buildTopoLinks(links)
+  });
+}
+export function getRelateTopoIdListFromConfig(groups) {
+  var relateTopoIdList = [];
+  groups.forEach(function (g) {
+    g.resources["static"].filter(function (ciId) {
+      return ciId.startsWith('topo:');
+    }).map(function (ciId) {
+      return ciId.replace('topo:', '');
+    }).map(function (topoId) {
+      if (!relateTopoIdList.includes(topoId)) {
+        relateTopoIdList.push(topoId);
+      }
+    });
+  });
+  return relateTopoIdList;
 }
 export function buildTopoNode(topoId) {
   return {
@@ -50,7 +69,7 @@ export function buildTopoNode(topoId) {
 }
 
 function buildTopoLinks(links) {
-  links.push.apply(links, topoLinks);
+  // links.push(...topoLinks)
   return links.map(function (link) {
     return _extends({}, link, {
       "source": link.sourceType ? link.sourceType + ':' + link.source : link.source,
@@ -104,6 +123,24 @@ function buildTopoNodeDatasFromSerialize(serialize) {
   return topoNodeDatas;
 }
 
+function buildTopoNodeDatas(config) {
+  var topoNodeDatas = [];
+  config.forEach(function (g) {
+    g.resources["static"].filter(function (ciId) {
+      return ciId.startsWith('topo:');
+    }).map(function (ciId) {
+      return ciId.replace('topo:', '');
+    }).map(function (topoId) {
+      topoNodeDatas.push(_extends({}, buildTopoNode(topoId), {
+        // 添加资源拓扑节点消失的问题
+        'groupId': g.id,
+        'groupTag': g.tag
+      }));
+    });
+  });
+  return topoNodeDatas;
+}
+
 function getRelateTopoIdsFromSerialize(serialize) {
   return serialize;
 }

package/es/utils/ResourceConfigUtil.js

@@ -41,23 +41,8 @@ function getResourceConfigFromHt(topo) {
   return {
     layers: sortBy(layers, 'order'),
     groups: groups,
-    resources: resources,
-    relateTopoIdList: getRelateTopoIdList(dataModel)
+    resources: resources
   };
-} // 查询关联拓扑id列表
-
-
-function getRelateTopoIdList(dataModel) {
-  return getNodes(dataModel).reduce(function (topoIds, node) {
-    var bindType = node.a('bindType');
-    var bindTopo = node.a('bindTopo');
-
-    if (bindType === 'topo' && bindTopo && !topoIds.includes(bindTopo)) {
-      return [].concat(topoIds, [bindTopo]);
-    }
-
-    return topoIds;
-  }, []);
 }
 
 function getLayerDatas(dataModel) {