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

package/es/core/editor/components/Toolbar/widgets/BoxBackgroundButton/BoxBackgroundSetting.js

@@ -7,8 +7,6 @@ import ColorPanel from "../../../../../../components/ColorPanel";
 import FontColorRange from "../../../../../../components/ColorPanel/components/FontColorRange";
 
 function BoxBackgroundSetting(props) {
-  var _ref, _ref2;
-
   var topo = props.topo,
       fieldProps = props.fieldProps,
       setStyle = props.setStyle,
@@ -36,8 +34,8 @@ function BoxBackgroundSetting(props) {
     topo.historyManager.endTransaction();
   };
 
-  var backgroundChang = function backgroundChang(_x, _x2) {
-    return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, type) {
+  var backgroundChang = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, type) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -67,8 +65,12 @@ function BoxBackgroundSetting(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function backgroundChang(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   var borderOpacityChange = function borderOpacityChange(value) {
     topo.historyManager.beginTransaction();
@@ -86,8 +88,8 @@ function BoxBackgroundSetting(props) {
     topo.historyManager.endTransaction();
   };
 
-  var borderColorChang = function borderColorChang(_x3, _x4) {
-    return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, type) {
+  var borderColorChang = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, type) {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -117,8 +119,12 @@ function BoxBackgroundSetting(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function borderColorChang(_x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
   var leftInputChange = function leftInputChange(val) {
     setLeftInputVal(val);

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

@@ -11,8 +11,6 @@ import styles from "./FontColorButton.module.scss";
 import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 
 function FontColorDropdown(props) {
-  var _ref, _ref2;
-
   var color = props.color,
       onChange = props.onChange,
       topo = props.topo,
@@ -37,8 +35,8 @@ function FontColorDropdown(props) {
     topo.historyManager.endTransaction();
   };
 
-  var colorChang = function colorChang(_x, _x2) {
-    return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, type) {
+  var colorChang = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, type) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -68,11 +66,15 @@ function FontColorDropdown(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function colorChang(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
-  var backgroundChang = function backgroundChang(_x3, _x4) {
-    return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, type) {
+  var backgroundChang = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, type) {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -102,8 +104,12 @@ function FontColorDropdown(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function backgroundChang(_x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
   var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
   };

package/es/core/editor/components/settings/propertyViews/layer/DataTab/DefaultLayerAddResourceDrawer.js

@@ -4,16 +4,14 @@ import React, { useState, useEffect } from 'react';
 import ResourceSelectDrawer from "../../../../../../../components/NetworkTopoResourceSelectDrawer";
 
 var LayerAddResourceDrawer = function LayerAddResourceDrawer(props) {
-  var _ref;
-
   var visible = props.visible,
       layer = props.layer,
       topo = props.topo,
       topoEdit = props.topoEdit,
       onClose = props.onClose;
 
-  var onOk = function onOk(_x) {
-    return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selected) {
+  var onOk = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selected) {
       var layerData;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -30,8 +28,12 @@ var LayerAddResourceDrawer = function LayerAddResourceDrawer(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function onOk(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   return /*#__PURE__*/React.createElement(ResourceSelectDrawer, {
     visible: visible,

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

@@ -11,16 +11,14 @@ import ResourceSelectDrawer from "../../../../../../../components/NetworkTopoRes
  */
 
 var BindResourceDrawer = function BindResourceDrawer(props) {
-  var _ref;
-
   var visible = props.visible,
       topoEditApi = props.topoEditApi,
       node = props.node,
       currentResId = props.currentResId,
       onClose = props.onClose;
 
-  var handleSave = function handleSave(_x) {
-    return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selected) {
+  var handleSave = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selected) {
       var result;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -51,8 +49,12 @@ var BindResourceDrawer = function BindResourceDrawer(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function handleSave(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   return /*#__PURE__*/React.createElement(ResourceSelectDrawer, {
     visible: visible,

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

@@ -34,8 +34,6 @@ function getBindType(values) {
 }
 
 export default function Data(props) {
-  var _ref;
-
   var node = props.node,
       topo = props.topo,
       topoEditApi = props.topoEditApi,
@@ -74,8 +72,8 @@ export default function Data(props) {
     }
   };
 
-  var handleBindTopoChange = function handleBindTopoChange(_x, _x2) {
-    return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, data) {
+  var handleBindTopoChange = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, data) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -94,8 +92,12 @@ export default function Data(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function handleBindTopoChange(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
   return /*#__PURE__*/React.createElement(_Collapse, {

package/es/core/editor/components/settings/propertyViews/view/BackgroundSize.js

@@ -4,8 +4,6 @@ import React from 'react';
 import NodeSizeInput from "../../common/NodeSizeInput/NodeSizeInput";
 import useBackgroundSizeConfig from "./hooks/useBackgroundSizeConfig";
 export default function BackgroundSize(props) {
-  var _ref;
-
   var topo = props.topo,
       backgroundConfig = props.backgroundConfig,
       settingRuntimeState = props.settingRuntimeState;
@@ -14,8 +12,8 @@ export default function BackgroundSize(props) {
     current: backgroundConfig.current
   });
 
-  var setSize = function setSize(_x) {
-    return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(size) {
+  var setSize = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(size) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -31,8 +29,12 @@ export default function BackgroundSize(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function setSize(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   return /*#__PURE__*/React.createElement(NodeSizeInput, {
     nodeId: backgroundSizeConfig.nodeId,

package/es/core/editor/components/titlebar/TopoEditorTitleBar.js

@@ -11,8 +11,6 @@ import styles from "../../../components/titlebar/TitleBar.module.scss";
 import DebugTools from "./widgets/DebugTools";
 import SettingButtonWidget from "../../../viewer/components/titlebar/widgets/SettingButtonWidget";
 export default function TopoEditorTitleBar(props) {
-  var _ref;
-
   var topo = props.topo,
       topoEditApi = props.topoEditApi;
   var store = topo.store;
@@ -27,8 +25,8 @@ export default function TopoEditorTitleBar(props) {
       exitFlag = _useState[0],
       setExitFlag = _useState[1];
 
-  var saveAndExit = function saveAndExit() {
-    return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var saveAndExit = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -43,8 +41,12 @@ export default function TopoEditorTitleBar(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+
+    return function saveAndExit() {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
   useEffect(function () {
     if (!saving && exitFlag) {
@@ -73,13 +75,11 @@ export default function TopoEditorTitleBar(props) {
   }, "\u4FDD\u5B58"), /*#__PURE__*/React.createElement(_Button, {
     className: styles.button,
     onClick: function onClick() {
-      var _onOk, _onCancel;
-
       _Dialog.confirm({
         title: '提示',
         content: '若直接退出，图上修改的内容将不会保存！',
-        onOk: function onOk() {
-          return (_onOk = _onOk || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        onOk: function () {
+          var _onOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
             return _regeneratorRuntime.wrap(function _callee2$(_context2) {
               while (1) switch (_context2.prev = _context2.next) {
                 case 0:
@@ -90,10 +90,16 @@ export default function TopoEditorTitleBar(props) {
                   return _context2.stop();
               }
             }, _callee2);
-          }))).apply(this, arguments);
-        },
-        onCancel: function onCancel() {
-          return (_onCancel = _onCancel || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+          }));
+
+          function onOk() {
+            return _onOk.apply(this, arguments);
+          }
+
+          return onOk;
+        }(),
+        onCancel: function () {
+          var _onCancel = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
             return _regeneratorRuntime.wrap(function _callee3$(_context3) {
               while (1) switch (_context3.prev = _context3.next) {
                 case 0:
@@ -104,8 +110,14 @@ export default function TopoEditorTitleBar(props) {
                   return _context3.stop();
               }
             }, _callee3);
-          }))).apply(this, arguments);
-        },
+          }));
+
+          function onCancel() {
+            return _onCancel.apply(this, arguments);
+          }
+
+          return onCancel;
+        }(),
         cancelProps: {
           children: '退出'
         },

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

@@ -1,39 +1,43 @@
-import React, { useEffect } from 'react';
-var ht = window.ht; // 快捷键
+import hotkeys from 'hotkeys-js';
+import { useEffect } from 'react';
+import { handleCopyHotkey, handlePasteHotkey } from "../utils/copyElementUtil";
 
-export default function useKeyboardShortcut(props) {
+function initKeyboardShortcuts(props) {
   var topo = props.topo,
-      topoEdit = props.topoEdit;
-  useEffect(function () {
-    var handleKeyDown = function handleKeyDown(e) {
-      if (e.target.tagName === 'INPUT') {
-        return;
-      }
-
-      var isCtrlDown = ht.Default.isCtrlDown;
-
-      if (isCtrlDown(e)) {
-        if (e.keyCode === 90) {
-          // ctrl+z 撤销
-          topo.historyManager.undo();
-        } //  else if (e.keyCode == 89) {//ctrl+y 重做
-        //   this.redo();
-        // }
-
-      }
-
-      if (e.keyCode === 32 && e.target.nodeName !== 'TEXTAREA') {
-        // 空格
-        var _topo$store$getModelS2 = topo.store.getModelState('topoEdit'),
-            viewMouseMode = _topo$store$getModelS2.viewMouseMode;
-
-        topoEdit.setViewMouseMode(viewMouseMode === 'select' ? 'move' : 'select');
-      }
-    };
+      topoEdit = props.topoEdit; // 撤销
+
+  hotkeys('ctrl+z, command+z', function (event) {
+    topo.historyManager.undo();
+  }); // 重做
+
+  hotkeys('ctrl+y, command+y', function (event) {}); // 空格：切换选择/移动
+
+  hotkeys('space', function (event) {
+    var _topo$store$getModelS = topo.store.getModelState('topoEdit'),
+        viewMouseMode = _topo$store$getModelS.viewMouseMode;
+
+    topoEdit.setViewMouseMode(viewMouseMode === 'select' ? 'move' : 'select');
+  }); // 复制
 
-    window.addEventListener('keydown', handleKeyDown);
+  hotkeys('ctrl+c, command+c', function (event) {
+    return handleCopyHotkey(event, props);
+  }); // 粘贴
+
+  hotkeys('ctrl+v, command+v', function (event) {
+    return handlePasteHotkey(event, props);
+  });
+}
+
+function unbindKeyboardShortcuts(props) {
+  hotkeys.unbind();
+} // 快捷键
+
+
+export default function useKeyboardShortcut(props) {
+  useEffect(function () {
+    initKeyboardShortcuts(props);
     return function () {
-      window.removeEventListener('keydown', handleKeyDown);
+      unbindKeyboardShortcuts(props);
     };
   }, []);
 }

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

@@ -0,0 +1,171 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+export function handleCopyHotkey(event, options) {
+  var target = event.target || event.srcElement;
+  var tagName = target.tagName;
+
+  if (tagName !== 'BODY') {
+    copy(options);
+  }
+}
+export function handlePasteHotkey(event, options) {
+  var target = event.target || event.srcElement;
+  var tagName = target.tagName;
+
+  if (tagName !== 'BODY') {
+    paste(options);
+  }
+}
+
+function copy(options) {
+  var topo = options.topo;
+  var gv = topo.getHtTopo().getGraphView();
+  var dm = gv.dm();
+  var sm = dm.sm();
+  var serializer = new ht.JSONSerializer(dm);
+
+  serializer.isSerializable = function (data) {
+    //可在此设置要选中的数据或者在copy处
+    // if(sm.co(data)){
+    //   if(data instanceof ht.Group){
+    //     sm.as(data.getChildren());
+    //   }
+    // }
+    return sm.co(data);
+  };
+
+  var copyData = {
+    copyTopoElements: true,
+    source: {
+      id: topo.id,
+      topoType: topo.viewProps.topoType
+    },
+    data: serializer.toJSON()
+  };
+  writeClipboard(JSON.stringify(copyData, null, 0));
+}
+
+function paste(_x) {
+  return _paste.apply(this, arguments);
+}
+
+function _paste() {
+  _paste = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(options) {
+    var topo, clipboardText, copyData;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          topo = options.topo;
+          _context.next = 3;
+          return readClipboard();
+
+        case 3:
+          clipboardText = _context.sent;
+          copyData = parseCopyData(clipboardText, topo);
+
+          if (copyData) {
+            topo.historyManager.beginTransaction();
+            doPaste(topo, copyData.data);
+            topo.historyManager.endTransaction();
+          }
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _paste.apply(this, arguments);
+}
+
+function parseCopyData(clipboardText, topo) {
+  var copyData = null;
+
+  try {
+    copyData = JSON.parse(clipboardText); // 网络拓扑和业务拓扑之间不支持复制粘贴
+
+    if (!copyData.copyTopoElements || copyData.topoType !== topo.topoType) {
+      copyData = null;
+    }
+  } catch (error) {}
+
+  return copyData;
+}
+
+function validateTopoCopyText(clipboardText) {
+  // TODO
+  return true;
+}
+
+function doPaste(topo, clipboardText) {
+  // 解析剪切板内容
+  var parseDm = new ht.DataModel();
+  var parseSerializer = new ht.JSONSerializer(parseDm);
+  parseSerializer.deserialize(clipboardText);
+  var elements = parseDm.getDatas().toArray(); // 添加到拓扑图
+
+  var gv = topo.getHtTopo().getGraphView();
+  var dm = gv.dm();
+  elements.forEach(function (d) {
+    dm.add(d);
+  });
+  parseDm.clear(); // 粘贴之后进行处理
+
+  var sm = dm.sm();
+  sm.cs();
+  sm.as(elements); // 粘贴位置处理
+
+  if (isPasetToOriginTopo()) {
+    gv.moveSelection(60, 60);
+  } else {// 从拓扑图A复制到拓扑图B时，粘贴到拓扑图可视区域中心位置居中粘贴
+    // TODO
+  } // 若用户粘贴后的位置超出现有位置后，将视野拉到可视范围内
+  // TODO
+  // gv.translate(-60, -60)
+
+}
+
+function isPasetToOriginTopo() {
+  // TODO
+  return true;
+}
+
+function writeClipboard(_x2) {
+  return _writeClipboard.apply(this, arguments);
+}
+
+function _writeClipboard() {
+  _writeClipboard = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(text) {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          navigator.clipboard.writeText(text);
+
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _writeClipboard.apply(this, arguments);
+}
+
+function readClipboard() {
+  return _readClipboard.apply(this, arguments);
+}
+
+function _readClipboard() {
+  _readClipboard = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          return _context3.abrupt("return", navigator.clipboard.readText());
+
+        case 1:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _readClipboard.apply(this, arguments);
+}

package/es/core/hooks/usePolling.js

@@ -15,8 +15,6 @@ import useHtDataPropertyChangeListener from "./ht/useHtDataPropertyChangeListene
  */
 
 var usePolling = function usePolling(props) {
-  var _fetchData, _refresh;
-
   var topo = props.topo;
   var store = topo.store;
   useCiAttributeChange({
@@ -35,7 +33,16 @@ var usePolling = function usePolling(props) {
    */
 
   function fetchData() {
-    return (_fetchData = _fetchData || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _fetchData.apply(this, arguments);
+  }
+  /**
+   * 
+   * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
+   */
+
+
+  function _fetchData() {
+    _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _topo$store$getModelS, resIdsList, nodeIdsList, codes, param, _yield$Promise$all, ciMetricsResult, mergeData, transformLinkData, adapterIpv6;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -145,16 +152,17 @@ var usePolling = function usePolling(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
+    }));
+    return _fetchData.apply(this, arguments);
   }
-  /**
-   * 
-   * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
-   */
-
 
   function refresh() {
-    return (_refresh = _refresh || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    return _refresh.apply(this, arguments);
+  } // 轮询hooks
+
+
+  function _refresh() {
+    _refresh = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       var data;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -179,9 +187,9 @@ var usePolling = function usePolling(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }))).apply(this, arguments);
-  } // 轮询hooks
-
+    }));
+    return _refresh.apply(this, arguments);
+  }
 
   var _useRequest = useRequest(refresh, {
     pollingInterval: 60 * 1000,