@riil-frontend/component-topology 5.0.16 → 5.0.18

package/es/core/components/TopoView/topoView.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import TopoGraph, { TopoEvent } from '@riil-frontend/component-topology-graph';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import useTopoEdit from "../../hooks/useTopoEdit";
-import useSelectionListener from "../../hooks/useSelectionListener";
 import showMessage from "../../utils/showMessage";
 import EditorPlugin from "../../editor/components/EditorPlugin";
 import ViewerPlugin from "../../viewer/components/plugins/ViewerPlugin";
@@ -16,11 +15,12 @@ import BackgroundView from "../../editor/components/BackgroundView";
 import { updateEdgeExpanded } from "../../utils/edgeUtil";
 import useManageStatus from "../../hooks/useManageStatus";
 import useAlarm from "../../hooks/useAlarm";
-import styles from "./TopoView.module.scss";
 import useRouterAdapter from "../../hooks/useRouterAdapter";
 import { fixLink } from "../../utils/graphLinkUtil";
 import { handleClusterNoPermission, upgradeV103GraphClusterNode } from "../../../utils/clusterUtil";
-import { HistoryManager } from "../../models/HistoryManager";
+import SelectionManager from "../../models/SelectionManager";
+import HistoryManager from "../../models/HistoryManager";
+import styles from "./TopoView.module.scss";
 
 var Topology = function Topology(props) {
   var _classnames, _graphViewProps$creat;
@@ -66,7 +66,9 @@ var Topology = function Topology(props) {
       setTData = _useState[1]; // TODO 临时放这里，当前监听内容较多
 
 
-  useSelectionListener(props);
+  var selectionManager = useMemo(function () {
+    return new SelectionManager(topo);
+  }, []);
   useRouterAdapter(props);
   var topoEdit = useTopoEdit({
     topo: topo,
@@ -106,7 +108,9 @@ var Topology = function Topology(props) {
     setTData(buildLoadOptions ? buildLoadOptions(topoData) : topoData);
   }, [topoData]);
   useEffect(function () {
+    // 拓扑退出注销
     return function () {
+      selectionManager.destroy();
       topoDispatchers.reset();
     };
   }, []);
@@ -130,6 +134,7 @@ var Topology = function Topology(props) {
       topo.historyManager = new HistoryManager(topo, htHistoryManager);
     }
 
+    selectionManager.init();
     topoDispatchers.update({
       graphLoaded2: true
     });
@@ -144,6 +149,7 @@ var Topology = function Topology(props) {
     fixLink(topo);
     handleClusterNoPermission(topo);
     updateEdgeExpanded(topo);
+    selectionManager.init();
     topoDispatchers.update({
       graphLoaded: true
     });

package/es/core/hooks/useSelection.js

@@ -1,139 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
-import { useCallback, useRef } from 'react';
-import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 /**
  * Selection
  */
-
 function useSelection(props) {
   var topo = props.topo;
-  var selectionDispatchers = topo.store.useModelDispatchers('selection');
-  var removeListenerRef = useRef(null);
-
-  var setSelection = function setSelection(selection) {
-    selectionDispatchers.update({
-      selection: selection
-    });
-  };
-
-  var updateSelection = useCallback(function (data) {
-    try {
-      var selectionModel = topo.getSelectionModel();
-      var htSelection = selectionModel.getSelection().getArray(); // TODO 对比变更更新
-
-      var selectionArr = htSelection.map(getElementData); // rlog.info("updateSelection", selectionArr.map((element) => element.id));
-
-      setSelection(selectionArr);
-    } catch (e) {
-      rlog.error('updateSelection error', e);
-    }
-  }, []);
-  var initListener = useCallback(function () {
-    rlog.info('Selection initListener');
-
-    function handleSelectionChange(e) {
-      rlog.info('Selection handleSelectionChange', e);
-      updateSelection();
-    }
-
-    function handleDataPropertyChange(e) {
-      var property = e.property,
-          data = e.data;
-
-      if (['position', 'childChange', 'a:scale'].indexOf(property) !== -1) {
-        return;
-      }
-
-      var selectionIds = selectionModel.getSelection().getArray().map(function (item) {
-        return item.getId();
-      });
-
-      if (selectionIds.indexOf(data.getId()) > -1) {
-        // console.info('PropertyChangeListener', e);
-        updateSelection();
-      }
-    }
-
-    var dataModel = topo.getDataModel();
-    var selectionModel = topo.getSelectionModel();
-    selectionModel.addSelectionChangeListener(handleSelectionChange);
-    dataModel.addDataPropertyChangeListener(handleDataPropertyChange);
-    return function () {
-      selectionModel.removeSelectionChangeListener(handleSelectionChange);
-      dataModel.removeDataPropertyChangeListener(handleDataPropertyChange);
-    };
-  }, []);
-  var removeListener = useCallback(function (data) {
-    rlog.info('Selection removeListener');
-
-    if (removeListenerRef.current) {
-      removeListenerRef.current();
-      removeListenerRef.current = null;
-    }
-  }, []);
-  var initSelection = useCallback(function () {
-    rlog.info('Selection init');
-
-    if (removeListenerRef.current) {
-      removeListener();
-    }
-
-    updateSelection();
-    removeListenerRef.current = initListener();
-  }, []);
-  var destroySelection = useCallback(function (data) {
-    rlog.info('Selection destroy');
-    removeListener();
-    setSelection([]);
-  }, []);
-  var resetSelection = useCallback(function (data) {
-    rlog.info('Selection reset');
-    setSelection([]);
-  }, []);
-  return {
-    initSelection: initSelection,
-    destroySelection: destroySelection,
-    resetSelection: resetSelection,
-    updateSelection: updateSelection // destroy,
-
-  };
-} // 构造元素数据
-
 
-var map = {
-  common: function common(element) {
-    var className = element.getClassName();
-    return {
-      className: className,
-      id: element.getId(),
-      tag: element.getTag(),
-      // 业务id
-      name: element.getName(),
-      attrObject: JSON.parse(JSON.stringify(element.getAttrObject() || {})),
-      styleMap: JSON.parse(JSON.stringify(element.getStyleMap() || {}))
-    };
-  },
-  'ht.Edge': function htEdge(element) {
-    return _extends({}, map.common(element));
-  },
-  'ht.Group': function htGroup(element) {
-    return _extends({}, map['ht.Node'](element), {
-      expanded: element.isExpanded()
-    });
-  },
-  'ht.Node': function htNode(element) {
-    return _extends({}, map.common(element), {
-      image: element.getImage(),
-      width: element.getWidth(),
-      height: element.getHeight(),
-      position: element.getPosition()
-    });
-  }
-};
+  var _topo$store$useModelS = topo.store.useModelState('selection'),
+      selection = _topo$store$useModelS.selection;
 
-function getElementData(element) {
-  var className = element.getClassName();
-  return (map[className] || map.common)(element);
+  return selection;
 }
 
 export default useSelection;

package/es/core/models/HistoryManager.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 var ht = window.ht;
-export var HistoryManager = /*#__PURE__*/function () {
+
+var HistoryManager = /*#__PURE__*/function () {
   function HistoryManager(topo, htHistoryManager) {
     this.topo = null;
     this.htHistoryManager = void 0;
@@ -175,4 +176,6 @@ export var HistoryManager = /*#__PURE__*/function () {
   };
 
   return HistoryManager;
-}();
+}();
+
+export { HistoryManager as default };

package/es/core/models/SelectionManager.js

@@ -0,0 +1,138 @@
+import _extends from "@babel/runtime/helpers/extends";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+
+var SelectionManager = /*#__PURE__*/function () {
+  function SelectionManager(topo) {
+    var _this = this;
+
+    this.topo = null;
+    this.inited = false;
+
+    this.setSelection = function (selection) {
+      var selectionDispatchers = _this.topo.store.getModelDispatchers('selection');
+
+      selectionDispatchers.update({
+        selection: selection
+      });
+    };
+
+    this.updateSelection = function () {
+      try {
+        var selectionModel = _this.topo.getSelectionModel();
+
+        var htSelection = selectionModel.getSelection().getArray(); // TODO 对比变更更新
+
+        var selectionArr = htSelection.map(getElementData); // rlog.info("updateSelection", selectionArr.map((element) => element.id));
+
+        _this.setSelection(selectionArr);
+      } catch (e) {
+        rlog.error('updateSelection error', e);
+      }
+    };
+
+    this.topo = topo;
+    this.handleSelectionChange = this.handleSelectionChange.bind(this);
+    this.handleDataPropertyChange = this.handleDataPropertyChange.bind(this);
+  }
+
+  var _proto = SelectionManager.prototype;
+
+  _proto.init = function init() {
+    if (this.inited) {
+      this.removeListener();
+    }
+
+    this.updateSelection();
+    this.initListener();
+    this.inited = true;
+  };
+
+  _proto.destroy = function destroy() {
+    this.removeListener();
+  };
+
+  _proto.handleSelectionChange = function handleSelectionChange(e) {
+    rlog.info('Selection handleSelectionChange', e);
+    this.updateSelection();
+  };
+
+  _proto.handleDataPropertyChange = function handleDataPropertyChange(e) {
+    var property = e.property,
+        data = e.data;
+
+    if (['position', 'childChange', 'a:scale'].indexOf(property) !== -1) {
+      return;
+    }
+
+    var selectionModel = this.topo.getSelectionModel();
+    var selectionIds = selectionModel.getSelection().getArray().map(function (item) {
+      return item.getId();
+    });
+
+    if (selectionIds.indexOf(data.getId()) > -1) {
+      // console.info('PropertyChangeListener', e);
+      this.updateSelection();
+    }
+  };
+
+  _proto.initListener = function initListener() {
+    rlog.info('Selection initListener');
+    var dataModel = this.topo.getDataModel();
+    var selectionModel = this.topo.getSelectionModel();
+    selectionModel.addSelectionChangeListener(this.handleSelectionChange);
+    dataModel.addDataPropertyChangeListener(this.handleDataPropertyChange);
+  };
+
+  _proto.removeListener = function removeListener() {
+    if (!this.inited) {
+      return;
+    }
+
+    rlog.info('Selection removeListener');
+    var dataModel = this.topo.getDataModel();
+    var selectionModel = this.topo.getSelectionModel();
+    selectionModel.removeSelectionChangeListener(this.handleSelectionChange);
+    dataModel.removeDataPropertyChangeListener(this.handleDataPropertyChange);
+  };
+
+  return SelectionManager;
+}();
+
+export { SelectionManager as default };
+; // 构造元素数据
+
+var map = {
+  common: function common(element) {
+    var className = element.getClassName();
+    return {
+      className: className,
+      id: element.getId(),
+      tag: element.getTag(),
+      // 业务id
+      name: element.getName(),
+      attrObject: JSON.parse(JSON.stringify(element.getAttrObject() || {})),
+      styleMap: JSON.parse(JSON.stringify(element.getStyleMap() || {}))
+    };
+  },
+  'ht.Edge': function htEdge(element) {
+    return _extends({}, map.common(element));
+  },
+  'ht.Group': function htGroup(element) {
+    return _extends({}, map['ht.Node'](element), {
+      expanded: element.isExpanded()
+    });
+  },
+  'ht.Node': function htNode(element) {
+    return _extends({}, map.common(element), {
+      image: element.getImage(),
+      width: element.getWidth(),
+      height: element.getHeight(),
+      position: element.getPosition()
+    });
+  }
+};
+
+function getElementData(element) {
+  var className = element.getClassName();
+  return (map[className] || map.common)(element);
+}

package/es/core/models/TopoApp.js

@@ -21,7 +21,7 @@ import PluginManager from "./PluginManager";
 import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig"; // eslint-disable-next-line no-undef
 
-var version = typeof "5.0.16" === 'string' ? "5.0.16" : null;
+var version = typeof "5.0.18" === 'string' ? "5.0.18" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/components/TopoView/topoView.js

@@ -19,8 +19,6 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
 
 var _useTopoEdit = _interopRequireDefault(require("../../hooks/useTopoEdit"));
 
-var _useSelectionListener = _interopRequireDefault(require("../../hooks/useSelectionListener"));
-
 var _showMessage = _interopRequireDefault(require("../../utils/showMessage"));
 
 var _EditorPlugin = _interopRequireDefault(require("../../editor/components/EditorPlugin"));
@@ -41,15 +39,17 @@ var _useManageStatus = _interopRequireDefault(require("../../hooks/useManageStat
 
 var _useAlarm = _interopRequireDefault(require("../../hooks/useAlarm"));
 
-var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
-
 var _useRouterAdapter = _interopRequireDefault(require("../../hooks/useRouterAdapter"));
 
 var _graphLinkUtil = require("../../utils/graphLinkUtil");
 
 var _clusterUtil = require("../../../utils/clusterUtil");
 
-var _HistoryManager = require("../../models/HistoryManager");
+var _SelectionManager = _interopRequireDefault(require("../../models/SelectionManager"));
+
+var _HistoryManager = _interopRequireDefault(require("../../models/HistoryManager"));
+
+var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 
 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); }
 
@@ -99,7 +99,9 @@ var Topology = function Topology(props) {
       setTData = _useState[1]; // TODO 临时放这里，当前监听内容较多
 
 
-  (0, _useSelectionListener["default"])(props);
+  var selectionManager = (0, _react.useMemo)(function () {
+    return new _SelectionManager["default"](topo);
+  }, []);
   (0, _useRouterAdapter["default"])(props);
   var topoEdit = (0, _useTopoEdit["default"])({
     topo: topo,
@@ -139,7 +141,9 @@ var Topology = function Topology(props) {
     setTData(buildLoadOptions ? buildLoadOptions(topoData) : topoData);
   }, [topoData]);
   (0, _react.useEffect)(function () {
+    // 拓扑退出注销
     return function () {
+      selectionManager.destroy();
       topoDispatchers.reset();
     };
   }, []);
@@ -162,9 +166,10 @@ var Topology = function Topology(props) {
     var htHistoryManager = topo.getDataModel().getHistoryManager();
 
     if (htHistoryManager) {
-      topo.historyManager = new _HistoryManager.HistoryManager(topo, htHistoryManager);
+      topo.historyManager = new _HistoryManager["default"](topo, htHistoryManager);
     }
 
+    selectionManager.init();
     topoDispatchers.update({
       graphLoaded2: true
     });
@@ -180,6 +185,7 @@ var Topology = function Topology(props) {
     (0, _graphLinkUtil.fixLink)(topo);
     (0, _clusterUtil.handleClusterNoPermission)(topo);
     (0, _edgeUtil.updateEdgeExpanded)(topo);
+    selectionManager.init();
     topoDispatchers.update({
       graphLoaded: true
     });

package/lib/core/hooks/useSelection.js

@@ -1,151 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = require("react");
-
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
-
 /**
  * Selection
  */
 function useSelection(props) {
   var topo = props.topo;
-  var selectionDispatchers = topo.store.useModelDispatchers('selection');
-  var removeListenerRef = (0, _react.useRef)(null);
-
-  var setSelection = function setSelection(selection) {
-    selectionDispatchers.update({
-      selection: selection
-    });
-  };
-
-  var updateSelection = (0, _react.useCallback)(function (data) {
-    try {
-      var selectionModel = topo.getSelectionModel();
-      var htSelection = selectionModel.getSelection().getArray(); // TODO 对比变更更新
-
-      var selectionArr = htSelection.map(getElementData); // rlog.info("updateSelection", selectionArr.map((element) => element.id));
-
-      setSelection(selectionArr);
-    } catch (e) {
-      _rlog["default"].error('updateSelection error', e);
-    }
-  }, []);
-  var initListener = (0, _react.useCallback)(function () {
-    _rlog["default"].info('Selection initListener');
-
-    function handleSelectionChange(e) {
-      _rlog["default"].info('Selection handleSelectionChange', e);
-
-      updateSelection();
-    }
-
-    function handleDataPropertyChange(e) {
-      var property = e.property,
-          data = e.data;
-
-      if (['position', 'childChange', 'a:scale'].indexOf(property) !== -1) {
-        return;
-      }
-
-      var selectionIds = selectionModel.getSelection().getArray().map(function (item) {
-        return item.getId();
-      });
-
-      if (selectionIds.indexOf(data.getId()) > -1) {
-        // console.info('PropertyChangeListener', e);
-        updateSelection();
-      }
-    }
-
-    var dataModel = topo.getDataModel();
-    var selectionModel = topo.getSelectionModel();
-    selectionModel.addSelectionChangeListener(handleSelectionChange);
-    dataModel.addDataPropertyChangeListener(handleDataPropertyChange);
-    return function () {
-      selectionModel.removeSelectionChangeListener(handleSelectionChange);
-      dataModel.removeDataPropertyChangeListener(handleDataPropertyChange);
-    };
-  }, []);
-  var removeListener = (0, _react.useCallback)(function (data) {
-    _rlog["default"].info('Selection removeListener');
-
-    if (removeListenerRef.current) {
-      removeListenerRef.current();
-      removeListenerRef.current = null;
-    }
-  }, []);
-  var initSelection = (0, _react.useCallback)(function () {
-    _rlog["default"].info('Selection init');
-
-    if (removeListenerRef.current) {
-      removeListener();
-    }
-
-    updateSelection();
-    removeListenerRef.current = initListener();
-  }, []);
-  var destroySelection = (0, _react.useCallback)(function (data) {
-    _rlog["default"].info('Selection destroy');
-
-    removeListener();
-    setSelection([]);
-  }, []);
-  var resetSelection = (0, _react.useCallback)(function (data) {
-    _rlog["default"].info('Selection reset');
-
-    setSelection([]);
-  }, []);
-  return {
-    initSelection: initSelection,
-    destroySelection: destroySelection,
-    resetSelection: resetSelection,
-    updateSelection: updateSelection // destroy,
-
-  };
-} // 构造元素数据
-
 
-var map = {
-  common: function common(element) {
-    var className = element.getClassName();
-    return {
-      className: className,
-      id: element.getId(),
-      tag: element.getTag(),
-      // 业务id
-      name: element.getName(),
-      attrObject: JSON.parse(JSON.stringify(element.getAttrObject() || {})),
-      styleMap: JSON.parse(JSON.stringify(element.getStyleMap() || {}))
-    };
-  },
-  'ht.Edge': function htEdge(element) {
-    return (0, _extends2["default"])({}, map.common(element));
-  },
-  'ht.Group': function htGroup(element) {
-    return (0, _extends2["default"])({}, map['ht.Node'](element), {
-      expanded: element.isExpanded()
-    });
-  },
-  'ht.Node': function htNode(element) {
-    return (0, _extends2["default"])({}, map.common(element), {
-      image: element.getImage(),
-      width: element.getWidth(),
-      height: element.getHeight(),
-      position: element.getPosition()
-    });
-  }
-};
+  var _topo$store$useModelS = topo.store.useModelState('selection'),
+      selection = _topo$store$useModelS.selection;
 
-function getElementData(element) {
-  var className = element.getClassName();
-  return (map[className] || map.common)(element);
+  return selection;
 }
 
 var _default = useSelection;

package/lib/core/models/HistoryManager.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.HistoryManager = void 0;
+exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -194,4 +194,4 @@ var HistoryManager = /*#__PURE__*/function () {
   return HistoryManager;
 }();
 
-exports.HistoryManager = HistoryManager;
+exports["default"] = HistoryManager;