@riil-frontend/component-topology 12.0.0-dev.1 → 12.0.0-dev.11

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
@@ -160,12 +162,19 @@ function EdgeType(props) {
     className: _EdgeTypeModule["default"].lineBox
   }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
     field: field,
-    inline: true,
     labelAlign: "top"
   }, /*#__PURE__*/_react["default"].createElement(FormItem, null, /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
     name: "lineButton"
-  })), /*#__PURE__*/_react["default"].createElement(FormItem, {
-    label: "\u8D77\u70B9"
+  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_box["default"], {
+    direction: "row",
+    style: {
+      gap: 8
+    }
+  }, /*#__PURE__*/_react["default"].createElement(FormItem, {
+    label: "\u8D77\u70B9",
+    style: {
+      margin: 0
+    }
   }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
     name: "startPoint",
     placeholder: " ",
@@ -173,7 +182,8 @@ function EdgeType(props) {
       container: function container(trigger) {
         return trigger.parentNode;
       }
-    }
+    },
+    className: _EdgeTypeModule["default"].endPointSelect
   }, START_TYPE_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement(Option, {
       value: item.value,
@@ -186,7 +196,10 @@ function EdgeType(props) {
       className: _EdgeTypeModule["default"].iconImg
     }));
   }))), /*#__PURE__*/_react["default"].createElement(FormItem, {
-    label: "\u7EC8\u70B9"
+    label: "\u7EC8\u70B9",
+    style: {
+      margin: 0
+    }
   }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
     name: "endPoint",
     placeholder: " ",
@@ -194,7 +207,8 @@ function EdgeType(props) {
       container: function container(trigger) {
         return trigger.parentNode;
       }
-    }
+    },
+    className: _EdgeTypeModule["default"].endPointSelect
   }, END_TYPE_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement(Option, {
       value: item.value,
@@ -207,7 +221,10 @@ function EdgeType(props) {
       className: _EdgeTypeModule["default"].iconImg
     }));
   }))), /*#__PURE__*/_react["default"].createElement(FormItem, {
-    label: "\u7C7B\u578B"
+    label: "\u7C7B\u578B",
+    style: {
+      margin: 0
+    }
   }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
     name: "lineMold",
     popupProps: {
@@ -215,7 +232,8 @@ function EdgeType(props) {
         return trigger.parentNode;
       }
     },
-    placeholder: " "
+    placeholder: " ",
+    className: _EdgeTypeModule["default"].lineMoldSelect
   }, LINE_MOLD_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement(Option, {
       value: item.value,
@@ -227,7 +245,7 @@ function EdgeType(props) {
       alt: "",
       className: _EdgeTypeModule["default"].iconImg
     }));
-  })))));
+  })))))));
 }
 
 EdgeType.defaultProps = {

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss

@@ -1,10 +1,30 @@
 @import '~@alifd/next/variables.scss';
 
 .lineBox{
-  width: 236px;
   background: #FFFFFF;
   border-radius: 4px;
   margin-bottom: -7px;
+
+  .endPointSelect {
+    min-width: 0;
+    width: 64px;
+    :global {
+      .#{$css-prefix}select-inner {
+        min-width:0 !important;
+      }
+    }
+  }
+
+  .lineMoldSelect {
+    min-width: 0;
+    width: 88px;
+    :global {
+      .#{$css-prefix}select-inner {
+        min-width:0 !important;
+      }
+    }
+  }
+
   :global {
     .#{$css-prefix}form-item:first-child{
       margin-top: 0;

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -55,6 +55,14 @@ var LINE_TYPE_OPTIONS = [{
 // },
 ];
 
+if (localStorage.getItem('topo.test.edge.customType') === 'true') {
+  LINE_TYPE_OPTIONS.push({
+    value: 'points',
+    label: '自由线形',
+    icon: 'topo_linear_icon_pointsline'
+  });
+}
+
 var LineType = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var value = props.value,
       onChange = props.onChange,

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _SizeInput = _interopRequireDefault(require("../SizeInput"));
 
@@ -58,7 +58,7 @@ function NodeSizeInput(props) {
     };
     updateSizeRatioCurrentSize(ratioInfo);
 
-    _rlog["default"].debug('initSizeRatio', ratioInfo);
+    _componentTopologyUtils.rlog.debug('initSizeRatio', ratioInfo);
 
     return ratioInfo;
   }
@@ -84,7 +84,7 @@ function NodeSizeInput(props) {
         // 首次没有比例时，初始化当前节点比例
         ratioInfo = initSizeRatio();
 
-        _rlog["default"].debug('首次没有比例时，初始化当前节点比例', ratioInfo);
+        _componentTopologyUtils.rlog.debug('首次没有比例时，初始化当前节点比例', ratioInfo);
       } else {
         // 修改后，非锁定方式调整比例（画图调整节点大小，未开启锁定修改），重新初始化比例
         var prevSize = ratioInfo.size;
@@ -92,7 +92,7 @@ function NodeSizeInput(props) {
         if (value.width !== prevSize.width || value.height !== prevSize.height) {
           ratioInfo = initSizeRatio();
 
-          _rlog["default"].debug('修改后，重新初始化比例', ratioInfo);
+          _componentTopologyUtils.rlog.debug('修改后，重新初始化比例', ratioInfo);
         }
       }
 
@@ -109,7 +109,7 @@ function NodeSizeInput(props) {
         size: newSize
       });
 
-      _rlog["default"].debug('按比例更新', name, attrValue, ratio, value, newSize, ratioInfo);
+      _componentTopologyUtils.rlog.debug('按比例更新', name, attrValue, ratio, value, newSize, ratioInfo);
     }
 
     onChange(newSize);

package/lib/core/editor/components/settings/common/SizeInput/NodeSizeInput.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _NodeSizeNumberPicker = _interopRequireDefault(require("./NodeSizeNumberPicker"));
 

package/lib/core/editor/components/settings/propertyViews/layer/BasicSetting.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _react = _interopRequireWildcard(require("react"));
 

package/lib/core/editor/components/settings/propertyViews/layer/SettingTab/Setting.js

@@ -19,7 +19,7 @@ var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _AlignSetting = _interopRequireDefault(require("../../../common/AlignSetting"));
 
@@ -47,7 +47,7 @@ function LayerSettingTab(props) {
         return;
       }
 
-      _rlog["default"].debug(values[name], value);
+      _componentTopologyUtils.rlog.debug(values[name], value);
 
       var newValues = field.getValues();
 
@@ -62,7 +62,7 @@ function LayerSettingTab(props) {
   var alignOnChange = function alignOnChange(v) {
     topo.historyManager.beginTransaction();
 
-    _rlog["default"].debug('setAlignmentBySelectionNodes', v);
+    _componentTopologyUtils.rlog.debug('setAlignmentBySelectionNodes', v);
 
     topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
 

package/lib/core/editor/components/settings/propertyViews/view/hooks/useBackgroundSizeConfig.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _react = require("react");
 
@@ -27,7 +27,7 @@ var _default = function _default(props) {
       setSize = _useState[1];
 
   (0, _react.useEffect)(function () {
-    _rlog["default"].info('设置背景图：初始化大小', getSizeFromCurrent());
+    _componentTopologyUtils.rlog.info('设置背景图：初始化大小', getSizeFromCurrent());
 
     setSize(getSizeFromCurrent());
   }, [current]);

package/lib/core/editor/hooks/useKeyboardShortcut.js

@@ -44,8 +44,10 @@ function unbindKeyboardShortcuts(props) {
 
 function useKeyboardShortcut(props) {
   (0, _react.useEffect)(function () {
+    (0, _copyElementUtil.initPasteEventListener)();
     initKeyboardShortcuts(props);
     return function () {
+      (0, _copyElementUtil.destroyPasteEventListener)();
       unbindKeyboardShortcuts(props);
     };
   }, []);

package/lib/core/editor/store/background.js

@@ -11,7 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 /**
  * 背景图

package/lib/core/editor/store/historyManager.js

@@ -7,7 +7,7 @@ exports["default"] = _default;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 /**
  * 动态设置链路样式 Model

package/lib/core/editor/store/topoEdit.js

@@ -11,7 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 /**
  * 拓扑编辑 Model

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

@@ -3,22 +3,39 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.destroyPasteEventListener = destroyPasteEventListener;
 exports.handleCopyHotkey = handleCopyHotkey;
 exports.handlePasteHotkey = handlePasteHotkey;
+exports.initPasteEventListener = initPasteEventListener;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _clipboardUtil = require("../../../utils/clipboardUtil");
+
 function handleCopyHotkey(event, options) {
   var target = event.target || event.srcElement;
   var tagName = target.tagName;
 
   if (tagName !== 'BODY') {
-    copy(options);
+    copy(options.topo);
   }
 }
 
+function initPasteEventListener() {
+  document.addEventListener("paste", handlePasteEventListener);
+}
+
+function destroyPasteEventListener() {
+  document.removeEventListener("paste", handlePasteEventListener);
+}
+
+function handlePasteEventListener(e) {
+  var clipdata = e.clipboardData || window.clipboardData;
+  console.log("主动粘贴", clipdata.getData("text/plain"));
+}
+
 function handlePasteHotkey(event, options) {
   var target = event.target || event.srcElement;
   var tagName = target.tagName;
@@ -28,8 +45,7 @@ function handlePasteHotkey(event, options) {
   }
 }
 
-function copy(options) {
-  var topo = options.topo;
+function copy(topo) {
   var gv = topo.getHtTopo().getGraphView();
   var dm = gv.dm();
   var sm = dm.sm();
@@ -113,14 +129,14 @@ function doPaste(topo, clipboardText) {
   var parseDm = new ht.DataModel();
   var parseSerializer = new ht.JSONSerializer(parseDm);
   parseSerializer.deserialize(clipboardText);
-  var elements = parseDm.getDatas().toArray(); // 添加到拓扑图
+  var elements = parseDm.getDatas().toArray();
+  parseDm.clear(); // 添加到拓扑图
 
   var gv = topo.getHtTopo().getGraphView();
   var dm = gv.dm();
   elements.forEach(function (d) {
     dm.add(d);
-  });
-  parseDm.clear(); // 粘贴之后进行处理
+  }); // 粘贴之后进行处理
 
   var sm = dm.sm();
   sm.cs();
@@ -134,6 +150,8 @@ function doPaste(topo, clipboardText) {
   // TODO
   // gv.translate(-60, -60)
 
+
+  copy(topo);
 }
 
 function isPasetToOriginTopo() {
@@ -150,9 +168,11 @@ function _writeClipboard() {
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          navigator.clipboard.writeText(text);
+          localStorage.setItem('topo.copy.text', text);
 
-        case 1:
+          _clipboardUtil.clipboard.writeText(text);
+
+        case 2:
         case "end":
           return _context2.stop();
       }
@@ -170,7 +190,7 @@ function _readClipboard() {
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          return _context3.abrupt("return", navigator.clipboard.readText());
+          return _context3.abrupt("return", localStorage.getItem('topo.copy.text'));
 
         case 1:
         case "end":

package/lib/core/hooks/__tests__/useCiAttributeChange.test.js

@@ -0,0 +1 @@
+"use strict";

package/lib/core/hooks/ht/useHtDataPropertyChangeListener.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports["default"] = useHtDataPropertyChangeListener;
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _react = require("react");
 

package/lib/core/hooks/useCiAttributeChange.js

@@ -7,29 +7,52 @@ exports["default"] = useCiAttributeChange;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _CiCache = _interopRequireDefault(require("../models/cache/CiCache"));
 
 var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
 
+function ciExistTopo(topoData, ciChangeData) {
+  if (!topoData) {
+    return false;
+  }
+
+  var ciIds = [].concat(topoData.nodes, topoData.links, topoData.linkGroups).map(function (data) {
+    return data.ciId || data.id;
+  });
+  return ciIds.includes(ciChangeData.id);
+}
+
 function mergeData(cis, ciChangeData) {
-  if (!cis.find(function (item) {
-    return item.id === ciChangeData.id || item.ciId === ciChangeData.id;
-  })) {
+  var matchData = function matchData(item) {
+    return (item.ciId || item.id) === ciChangeData.id;
+  };
+
+  if (!cis.find(matchData)) {
     return cis;
   }
 
   return cis.map(function (ci) {
-    if (ci.id === ciChangeData.id) {
-      return (0, _extends2["default"])({}, ci, {
-        attributes: (0, _extends2["default"])({}, ci.attributes, ciChangeData.attributes)
-      });
+    if (!matchData(ci)) {
+      return ci;
     }
 
-    return ci;
+    return (0, _extends2["default"])({}, ci, {
+      id: ci.id,
+      attributes: (0, _extends2["default"])({}, ci.attributes, ciChangeData.attributes)
+    });
   });
 }
+
+function mergeTopoData(topoData, ciChangeData) {
+  var newData = (0, _extends2["default"])({}, topoData, {
+    nodes: mergeData(topoData.nodes, ciChangeData),
+    links: mergeData(topoData.links, ciChangeData),
+    linkGroups: mergeData(topoData.linkGroups, ciChangeData)
+  });
+  return newData;
+}
 /**
  * 监听ci属性变更
  * 
@@ -45,12 +68,8 @@ function useCiAttributeChange(props) {
       // 更新拓扑数据
       var topoData = topo.store.getModelState('topoMod').data;
 
-      if (topoData) {
-        var newData = (0, _extends2["default"])({}, topoData, {
-          nodes: mergeData(topoData.nodes, ciChangeData),
-          links: mergeData(topoData.links, ciChangeData),
-          linkGroups: mergeData(topoData.linkGroups, ciChangeData)
-        });
+      if (ciExistTopo(topoData, ciChangeData)) {
+        var newData = mergeTopoData(topoData, ciChangeData);
         var topoDispatchers = topo.store.getModelDispatchers('topoMod');
         topoDispatchers.update({
           data: newData

package/lib/core/hooks/useManageStatus.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = useManageStatus;
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _react = require("react");
 

package/lib/core/hooks/usePolling.js

@@ -17,7 +17,7 @@ var _ahooks = require("ahooks");
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
 
 var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-emitter");
 
@@ -227,7 +227,7 @@ var usePolling = function usePolling(props) {
 
   (0, _react.useEffect)(function () {
     if (topo.options.enableDefaultMetricLoader) {
-      _rlog["default"].debug('usePolling.useEffect: 开始轮询', {
+      _componentTopologyUtils.rlog.debug('usePolling.useEffect: 开始轮询', {
         pollingSwitch: pollingSwitch,
         resIdsList: resIdsList,
         resourceOverviewState: resourceOverviewState,
@@ -239,7 +239,7 @@ var usePolling = function usePolling(props) {
 
     return function () {
       if (loading) {
-        _rlog["default"].debug('usePolling.useEffect: 结束轮询', resAndMetrics);
+        _componentTopologyUtils.rlog.debug('usePolling.useEffect: 结束轮询', resAndMetrics);
 
         stopPoll();
       }

package/lib/core/hooks/useResourceConfig.js

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